feat: more cron webui
This commit is contained in:
parent
004fed9b2e
commit
3aad31a36b
1
Cargo.lock
generated
1
Cargo.lock
generated
@ -6757,6 +6757,7 @@ dependencies = [
|
||||
"base64 0.22.1",
|
||||
"bytes",
|
||||
"chrono",
|
||||
"chrono-tz 0.10.3",
|
||||
"clap",
|
||||
"cocoon",
|
||||
"color-eyre",
|
||||
|
||||
@ -169,6 +169,7 @@ croner = "2.2.0"
|
||||
ts-rs = "11.0.1"
|
||||
secrecy = { version = "0.10.3", features = ["serde"] }
|
||||
paste = "1.0.15"
|
||||
chrono-tz = "0.10.3"
|
||||
|
||||
[dev-dependencies]
|
||||
inquire = { workspace = true }
|
||||
|
||||
@ -18,6 +18,8 @@ use crate::{
|
||||
#[derive(Snafu, Debug)]
|
||||
#[snafu(visibility(pub(crate)))]
|
||||
pub enum RecorderError {
|
||||
#[snafu(transparent)]
|
||||
ChronoTzParseError { source: chrono_tz::ParseError },
|
||||
#[snafu(transparent)]
|
||||
SeaographyError { source: seaography::SeaographyError },
|
||||
#[snafu(transparent)]
|
||||
|
||||
@ -20,6 +20,7 @@ fn skip_columns_for_entity_input(context: &mut BuilderContext) {
|
||||
cron::Column::SubscriberTaskCron
|
||||
| cron::Column::SystemTaskCron
|
||||
| cron::Column::CronExpr
|
||||
| cron::Column::CronTimezone
|
||||
| cron::Column::Enabled
|
||||
| cron::Column::TimeoutMs
|
||||
| cron::Column::MaxAttempts
|
||||
@ -30,7 +31,8 @@ fn skip_columns_for_entity_input(context: &mut BuilderContext) {
|
||||
context.entity_input.insert_skips.push(entity_column_key);
|
||||
}
|
||||
for column in cron::Column::iter() {
|
||||
if matches!(column, |cron::Column::CronExpr| cron::Column::Enabled
|
||||
if matches!(column, |cron::Column::CronExpr| cron::Column::CronTimezone
|
||||
| cron::Column::Enabled
|
||||
| cron::Column::TimeoutMs
|
||||
| cron::Column::Priority
|
||||
| cron::Column::MaxAttempts)
|
||||
|
||||
@ -178,6 +178,7 @@ pub enum Cron {
|
||||
SubscriberId,
|
||||
SubscriptionId,
|
||||
CronExpr,
|
||||
CronTimezone,
|
||||
NextRun,
|
||||
LastRun,
|
||||
LastError,
|
||||
|
||||
@ -40,6 +40,7 @@ impl MigrationTrait for Migration {
|
||||
table_auto_z(Cron::Table)
|
||||
.col(pk_auto(Cron::Id))
|
||||
.col(string(Cron::CronExpr))
|
||||
.col(string(Cron::CronTimezone))
|
||||
.col(integer_null(Cron::SubscriberId))
|
||||
.col(integer_null(Cron::SubscriptionId))
|
||||
.col(timestamp_with_time_zone_null(Cron::NextRun))
|
||||
|
||||
@ -8,6 +8,7 @@ pub use core::{
|
||||
|
||||
use async_trait::async_trait;
|
||||
use chrono::{DateTime, Utc};
|
||||
use chrono_tz::Tz;
|
||||
use croner::Cron;
|
||||
use sea_orm::{
|
||||
ActiveValue::{self, Set},
|
||||
@ -54,6 +55,7 @@ pub struct Model {
|
||||
pub subscriber_id: Option<i32>,
|
||||
pub subscription_id: Option<i32>,
|
||||
pub cron_expr: String,
|
||||
pub cron_timezone: String,
|
||||
pub next_run: Option<DateTimeUtc>,
|
||||
pub last_run: Option<DateTimeUtc>,
|
||||
pub last_error: Option<String>,
|
||||
@ -140,16 +142,37 @@ impl ActiveModelBehavior for ActiveModel {
|
||||
where
|
||||
C: ConnectionTrait,
|
||||
{
|
||||
if let ActiveValue::Set(ref cron_expr) = self.cron_expr
|
||||
&& matches!(
|
||||
self.next_run,
|
||||
ActiveValue::NotSet | ActiveValue::Unchanged(_)
|
||||
)
|
||||
{
|
||||
let next_run =
|
||||
Model::calculate_next_run(cron_expr).map_err(|e| DbErr::Custom(e.to_string()))?;
|
||||
self.next_run = Set(Some(next_run));
|
||||
}
|
||||
match (
|
||||
&self.cron_expr as &ActiveValue<String>,
|
||||
&self.cron_timezone as &ActiveValue<String>,
|
||||
) {
|
||||
(ActiveValue::Set(cron_expr), ActiveValue::Set(timezone)) => {
|
||||
if matches!(
|
||||
&self.next_run,
|
||||
ActiveValue::NotSet | ActiveValue::Unchanged(_)
|
||||
) {
|
||||
let next_run = Model::calculate_next_run(cron_expr, timezone)
|
||||
.map_err(|e| DbErr::Custom(e.to_string()))?;
|
||||
self.next_run = Set(Some(next_run));
|
||||
}
|
||||
}
|
||||
(
|
||||
ActiveValue::Unchanged(_) | ActiveValue::NotSet,
|
||||
ActiveValue::Unchanged(_) | ActiveValue::NotSet,
|
||||
) => {}
|
||||
(_, _) => {
|
||||
if matches!(
|
||||
self.next_run,
|
||||
ActiveValue::NotSet | ActiveValue::Unchanged(_)
|
||||
) {
|
||||
return Err(DbErr::Custom(
|
||||
"Cron expr and timezone must be insert or update at same time when next \
|
||||
run is not set"
|
||||
.to_string(),
|
||||
));
|
||||
}
|
||||
}
|
||||
};
|
||||
if let ActiveValue::Set(Some(subscriber_id)) = self.subscriber_id
|
||||
&& let ActiveValue::Set(Some(ref subscriber_task)) = self.subscriber_task_cron
|
||||
&& subscriber_task.get_subscriber_id() != subscriber_id
|
||||
@ -272,7 +295,7 @@ impl Model {
|
||||
async fn mark_cron_completed(&self, ctx: &dyn AppContextTrait) -> RecorderResult<()> {
|
||||
let db = ctx.db();
|
||||
|
||||
let next_run = Self::calculate_next_run(&self.cron_expr)?;
|
||||
let next_run = Self::calculate_next_run(&self.cron_expr, &self.cron_timezone)?;
|
||||
|
||||
ActiveModel {
|
||||
id: Set(self.id),
|
||||
@ -310,7 +333,10 @@ impl Model {
|
||||
let next_run = if should_retry {
|
||||
Some(Utc::now() + retry_duration)
|
||||
} else {
|
||||
Some(Self::calculate_next_run(&self.cron_expr)?)
|
||||
Some(Self::calculate_next_run(
|
||||
&self.cron_expr,
|
||||
&self.cron_timezone,
|
||||
)?)
|
||||
};
|
||||
|
||||
ActiveModel {
|
||||
@ -399,11 +425,17 @@ impl Model {
|
||||
Ok(())
|
||||
}
|
||||
|
||||
pub fn calculate_next_run(cron_expr: &str) -> RecorderResult<DateTime<Utc>> {
|
||||
pub fn calculate_next_run(cron_expr: &str, timezone: &str) -> RecorderResult<DateTime<Utc>> {
|
||||
let user_tz = timezone.parse::<Tz>()?;
|
||||
|
||||
let user_tz_now = Utc::now().with_timezone(&user_tz);
|
||||
|
||||
let cron_expr = Cron::new(cron_expr).with_seconds_optional().parse()?;
|
||||
|
||||
let next = cron_expr.find_next_occurrence(&Utc::now(), false)?;
|
||||
let next = cron_expr.find_next_occurrence(&user_tz_now, false)?;
|
||||
|
||||
Ok(next)
|
||||
let next_utc = next.with_timezone(&Utc);
|
||||
|
||||
Ok(next_utc)
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,13 +11,14 @@
|
||||
"codegen-watch": "graphql-codegen --config graphql-codegen.ts --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"recorder": "workspace:*",
|
||||
"@abraham/reflection": "^0.13.0",
|
||||
"@apollo/client": "^3.13.8",
|
||||
"@codemirror/language": "6.11.1",
|
||||
"@corvu/drawer": "^0.2.4",
|
||||
"@corvu/otp-field": "^0.1.4",
|
||||
"@corvu/resizable": "^0.2.5",
|
||||
"@datasert/cronjs-matcher": "^1.4.0",
|
||||
"@datasert/cronjs-parser": "^1.4.0",
|
||||
"@graphiql/toolkit": "^0.11.3",
|
||||
"@hookform/resolvers": "^5.1.1",
|
||||
"@outposts/injection-js": "^2.5.1",
|
||||
@ -72,9 +73,11 @@
|
||||
"react-dom": "^19.1.0",
|
||||
"react-resizable-panels": "^3.0.2",
|
||||
"recharts": "^2.15.3",
|
||||
"recorder": "workspace:*",
|
||||
"rxjs": "^7.8.2",
|
||||
"sonner": "^2.0.5",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwind-scrollbar": "^4.0.2",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"tw-animate-css": "^1.3.4",
|
||||
"type-fest": "^4.41.0",
|
||||
|
||||
@ -144,4 +144,6 @@
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@plugin "tailwind-scrollbar";
|
||||
|
||||
291
apps/webui/src/components/domains/cron/README.md
Normal file
291
apps/webui/src/components/domains/cron/README.md
Normal file
@ -0,0 +1,291 @@
|
||||
# Cron Components
|
||||
|
||||
A comprehensive set of React components for creating, editing, and displaying cron expressions with TypeScript support and shadcn/ui integration.
|
||||
|
||||
## Features
|
||||
|
||||
- 🎯 **Multiple Input Modes**: Text input, visual builder, or both
|
||||
- 🔍 **Real-time Validation**: Powered by `@datasert/cronjs-parser`
|
||||
- ⏰ **Next Run Preview**: Shows upcoming execution times with `@datasert/cronjs-matcher`
|
||||
- 🌍 **Timezone Support**: Display times in different timezones
|
||||
- 📱 **Responsive Design**: Works seamlessly on desktop and mobile
|
||||
- 🎨 **shadcn/ui Integration**: Consistent with your existing design system
|
||||
- 🔧 **TypeScript Support**: Full type definitions included
|
||||
- 🚀 **Customizable**: Extensive props for customization
|
||||
|
||||
## Components
|
||||
|
||||
### `<Cron />` - Main Component
|
||||
|
||||
The primary component that combines all functionality.
|
||||
|
||||
```tsx
|
||||
import { Cron } from '@/components/cron';
|
||||
|
||||
function MyScheduler() {
|
||||
const [cronExpression, setCronExpression] = useState('0 0 9 * * 1-5');
|
||||
|
||||
return (
|
||||
<Cron
|
||||
value={cronExpression}
|
||||
onChange={setCronExpression}
|
||||
mode="both" // 'input' | 'builder' | 'both'
|
||||
showPreview={true}
|
||||
showDescription={true}
|
||||
timezone="UTC"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | `string` | `''` | Current cron expression |
|
||||
| `onChange` | `(value: string) => void` | - | Called when expression changes |
|
||||
| `onValidate` | `(isValid: boolean) => void` | - | Called when validation state changes |
|
||||
| `mode` | `'input' \| 'builder' \| 'both'` | `'both'` | Display mode |
|
||||
| `disabled` | `boolean` | `false` | Disable all inputs |
|
||||
| `placeholder` | `string` | `'0 0 * * * *'` | Input placeholder text |
|
||||
| `showPreview` | `boolean` | `true` | Show next run times preview |
|
||||
| `showDescription` | `boolean` | `true` | Show human-readable description |
|
||||
| `timezone` | `string` | `'UTC'` | Timezone for preview times |
|
||||
| `error` | `string` | - | External error message |
|
||||
| `className` | `ClassValue` | - | Additional CSS classes |
|
||||
|
||||
### `<CronInput />` - Text Input Component
|
||||
|
||||
Simple text input with validation and help text.
|
||||
|
||||
```tsx
|
||||
import { CronInput } from '@/components/cron';
|
||||
|
||||
function QuickEntry() {
|
||||
const [expression, setExpression] = useState('');
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
|
||||
return (
|
||||
<CronInput
|
||||
value={expression}
|
||||
onChange={setExpression}
|
||||
onValidate={setIsValid}
|
||||
placeholder="Enter cron expression..."
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | `string` | - | Current expression value |
|
||||
| `onChange` | `(value: string) => void` | - | Called when input changes |
|
||||
| `onValidate` | `(isValid: boolean) => void` | - | Called when validation changes |
|
||||
| `placeholder` | `string` | `'0 0 * * * *'` | Placeholder text |
|
||||
| `disabled` | `boolean` | `false` | Disable input |
|
||||
| `readOnly` | `boolean` | `false` | Make input read-only |
|
||||
| `error` | `string` | - | Error message to display |
|
||||
| `className` | `ClassValue` | - | Additional CSS classes |
|
||||
|
||||
### `<CronBuilder />` - Visual Builder Component
|
||||
|
||||
Visual interface for building cron expressions with presets and field editors.
|
||||
|
||||
```tsx
|
||||
import { CronBuilder } from '@/components/cron';
|
||||
|
||||
function VisualScheduler() {
|
||||
const [expression, setExpression] = useState('0 0 * * * *');
|
||||
|
||||
return (
|
||||
<CronBuilder
|
||||
value={expression}
|
||||
onChange={setExpression}
|
||||
showPreview={true}
|
||||
defaultTab="daily"
|
||||
allowedPeriods={['hourly', 'daily', 'weekly']}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | `string` | `'0 0 * * * *'` | Current expression |
|
||||
| `onChange` | `(value: string) => void` | - | Called when expression changes |
|
||||
| `disabled` | `boolean` | `false` | Disable all controls |
|
||||
| `showPreview` | `boolean` | `true` | Show preview section |
|
||||
| `defaultTab` | `CronPeriod` | `'hourly'` | Default active tab |
|
||||
| `allowedPeriods` | `CronPeriod[]` | All periods | Which tabs to show |
|
||||
| `presets` | `CronPreset[]` | Built-in presets | Custom preset list |
|
||||
| `className` | `ClassValue` | - | Additional CSS classes |
|
||||
|
||||
### `<CronDisplay />` - Display Component
|
||||
|
||||
Read-only component for displaying cron expression information.
|
||||
|
||||
```tsx
|
||||
import { CronDisplay } from '@/components/cron';
|
||||
|
||||
function ScheduleInfo({ schedule }) {
|
||||
return (
|
||||
<CronDisplay
|
||||
expression={schedule.cronExpression}
|
||||
showNextRuns={true}
|
||||
showDescription={true}
|
||||
nextRunsCount={5}
|
||||
timezone={schedule.timezone}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `expression` | `string` | - | Cron expression to display |
|
||||
| `showNextRuns` | `boolean` | `true` | Show upcoming run times |
|
||||
| `showDescription` | `boolean` | `true` | Show human-readable description |
|
||||
| `nextRunsCount` | `number` | `5` | Number of future runs to show |
|
||||
| `timezone` | `string` | `'UTC'` | Timezone for times |
|
||||
| `className` | `ClassValue` | - | Additional CSS classes |
|
||||
|
||||
## Cron Expression Format
|
||||
|
||||
The components support 6-field cron expressions with seconds:
|
||||
|
||||
```
|
||||
┌─────────────── second (0-59)
|
||||
│ ┌───────────── minute (0-59)
|
||||
│ │ ┌─────────── hour (0-23)
|
||||
│ │ │ ┌───────── day of month (1-31)
|
||||
│ │ │ │ ┌─────── month (1-12)
|
||||
│ │ │ │ │ ┌───── day of week (0-6, Sunday=0)
|
||||
│ │ │ │ │ │
|
||||
* * * * * *
|
||||
```
|
||||
|
||||
### Special Characters
|
||||
|
||||
| Character | Description | Example |
|
||||
|-----------|-------------|---------|
|
||||
| `*` | Any value | `*` = every value |
|
||||
| `,` | List separator | `1,3,5` = values 1, 3, and 5 |
|
||||
| `-` | Range | `1-5` = values 1 through 5 |
|
||||
| `/` | Step values | `*/5` = every 5th value |
|
||||
| `?` | No specific value | Used when day/weekday conflict |
|
||||
| `L` | Last | Last day of month/week |
|
||||
| `W` | Weekday | Nearest weekday |
|
||||
|
||||
### Common Examples
|
||||
|
||||
| Expression | Description |
|
||||
|------------|-------------|
|
||||
| `0 * * * * *` | Every minute |
|
||||
| `0 */5 * * * *` | Every 5 minutes |
|
||||
| `0 0 * * * *` | Every hour |
|
||||
| `0 0 9 * * *` | Daily at 9 AM |
|
||||
| `0 30 9 * * 1-5` | Weekdays at 9:30 AM |
|
||||
| `0 0 0 * * 0` | Every Sunday at midnight |
|
||||
| `0 0 0 1 * *` | First day of every month |
|
||||
| `0 0 0 1 1 *` | Every January 1st |
|
||||
|
||||
## Dependencies
|
||||
|
||||
- `@datasert/cronjs-parser` - For parsing and validating cron expressions
|
||||
- `@datasert/cronjs-matcher` - For calculating next run times
|
||||
- `@radix-ui/react-*` - UI primitives (via shadcn/ui)
|
||||
- `lucide-react` - Icons
|
||||
|
||||
## Installation
|
||||
|
||||
1. Copy the component files to your project
|
||||
2. Ensure you have the required dependencies:
|
||||
|
||||
```bash
|
||||
npm install @datasert/cronjs-parser @datasert/cronjs-matcher
|
||||
```
|
||||
|
||||
3. Import and use the components:
|
||||
|
||||
```tsx
|
||||
import { Cron } from '@/components/cron';
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Custom Presets
|
||||
|
||||
```tsx
|
||||
const customPresets = [
|
||||
{
|
||||
label: 'Business Hours',
|
||||
value: '0 0 9-17 * * 1-5',
|
||||
description: 'Every hour during business hours',
|
||||
category: 'custom'
|
||||
},
|
||||
// ... more presets
|
||||
];
|
||||
|
||||
<CronBuilder presets={customPresets} />
|
||||
```
|
||||
|
||||
### Restricted Periods
|
||||
|
||||
```tsx
|
||||
<CronBuilder
|
||||
allowedPeriods={['daily', 'weekly']}
|
||||
defaultTab="daily"
|
||||
/>
|
||||
```
|
||||
|
||||
### Custom Validation
|
||||
|
||||
```tsx
|
||||
function MyComponent() {
|
||||
const [expression, setExpression] = useState('');
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
|
||||
const handleValidation = (valid: boolean) => {
|
||||
setIsValid(valid);
|
||||
// Custom validation logic
|
||||
};
|
||||
|
||||
return (
|
||||
<Cron
|
||||
value={expression}
|
||||
onChange={setExpression}
|
||||
onValidate={handleValidation}
|
||||
error={!isValid ? 'Invalid expression' : undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## TypeScript Support
|
||||
|
||||
All components include comprehensive TypeScript definitions:
|
||||
|
||||
```tsx
|
||||
import type {
|
||||
CronProps,
|
||||
CronExpression,
|
||||
CronValidationResult,
|
||||
CronPeriod
|
||||
} from '@/components/cron';
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
See `CronExample` component for comprehensive usage examples and interactive demos.
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Modern browsers with ES2015+ support
|
||||
- React 16.8+ (hooks support required)
|
||||
- TypeScript 4.0+ recommended
|
||||
643
apps/webui/src/components/domains/cron/cron-builder.tsx
Normal file
643
apps/webui/src/components/domains/cron/cron-builder.tsx
Normal file
@ -0,0 +1,643 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
||||
import { cn } from '@/presentation/utils';
|
||||
import { getFutureMatches } from '@datasert/cronjs-matcher';
|
||||
import { Calendar, Clock, Info, Settings, Zap } from 'lucide-react';
|
||||
import {
|
||||
type CSSProperties,
|
||||
type FC,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
type CronBuilderProps,
|
||||
CronField,
|
||||
type CronFieldConfig,
|
||||
CronPeriod,
|
||||
type CronPreset,
|
||||
} from './types';
|
||||
|
||||
const CRON_PRESETS: CronPreset[] = [
|
||||
{
|
||||
label: 'Every minute',
|
||||
value: '0 * * * * *',
|
||||
description: 'Runs every minute',
|
||||
category: 'common',
|
||||
},
|
||||
{
|
||||
label: 'Every 5 minutes',
|
||||
value: '0 */5 * * * *',
|
||||
description: 'Runs every 5 minutes',
|
||||
category: 'common',
|
||||
},
|
||||
{
|
||||
label: 'Every 15 minutes',
|
||||
value: '0 */15 * * * *',
|
||||
description: 'Runs every 15 minutes',
|
||||
category: 'common',
|
||||
},
|
||||
{
|
||||
label: 'Every 30 minutes',
|
||||
value: '0 */30 * * * *',
|
||||
description: 'Runs every 30 minutes',
|
||||
category: 'common',
|
||||
},
|
||||
{
|
||||
label: 'Every hour',
|
||||
value: '0 0 * * * *',
|
||||
description: 'Runs at the top of every hour',
|
||||
category: 'common',
|
||||
},
|
||||
{
|
||||
label: 'Every 6 hours',
|
||||
value: '0 0 */6 * * *',
|
||||
description: 'Runs every 6 hours',
|
||||
category: 'common',
|
||||
},
|
||||
{
|
||||
label: 'Daily at midnight',
|
||||
value: '0 0 0 * * *',
|
||||
description: 'Runs once daily at 00:00',
|
||||
category: 'daily',
|
||||
},
|
||||
{
|
||||
label: 'Daily at 9 AM',
|
||||
value: '0 0 9 * * *',
|
||||
description: 'Runs daily at 9:00 AM',
|
||||
category: 'daily',
|
||||
},
|
||||
{
|
||||
label: 'Weekdays at 9 AM',
|
||||
value: '0 0 9 * * 1-5',
|
||||
description: 'Runs Monday to Friday at 9:00 AM',
|
||||
category: 'weekly',
|
||||
},
|
||||
{
|
||||
label: 'Every Sunday',
|
||||
value: '0 0 0 * * 0',
|
||||
description: 'Runs every Sunday at midnight',
|
||||
category: 'weekly',
|
||||
},
|
||||
{
|
||||
label: 'First day of month',
|
||||
value: '0 0 0 1 * *',
|
||||
description: 'Runs on the 1st day of every month',
|
||||
category: 'monthly',
|
||||
},
|
||||
{
|
||||
label: 'Every year',
|
||||
value: '0 0 0 1 1 *',
|
||||
description: 'Runs on January 1st every year',
|
||||
category: 'yearly',
|
||||
},
|
||||
];
|
||||
|
||||
const FIELD_CONFIGS: Record<CronField, CronFieldConfig> = {
|
||||
seconds: {
|
||||
min: 0,
|
||||
max: 59,
|
||||
step: 1,
|
||||
allowSpecial: ['*', '?'],
|
||||
},
|
||||
minutes: {
|
||||
min: 0,
|
||||
max: 59,
|
||||
step: 1,
|
||||
allowSpecial: ['*', '?'],
|
||||
},
|
||||
hours: {
|
||||
min: 0,
|
||||
max: 23,
|
||||
step: 1,
|
||||
allowSpecial: ['*', '?'],
|
||||
},
|
||||
dayOfMonth: {
|
||||
min: 1,
|
||||
max: 31,
|
||||
step: 1,
|
||||
allowSpecial: ['*', '?', 'L', 'W'],
|
||||
options: [
|
||||
{ label: 'Any day', value: '*' },
|
||||
{ label: 'No specific day', value: '?' },
|
||||
{ label: 'Last day', value: 'L' },
|
||||
{ label: 'Weekday', value: 'W' },
|
||||
],
|
||||
},
|
||||
month: {
|
||||
min: 1,
|
||||
max: 12,
|
||||
step: 1,
|
||||
allowSpecial: ['*'],
|
||||
options: [
|
||||
{ label: 'January', value: 1 },
|
||||
{ label: 'February', value: 2 },
|
||||
{ label: 'March', value: 3 },
|
||||
{ label: 'April', value: 4 },
|
||||
{ label: 'May', value: 5 },
|
||||
{ label: 'June', value: 6 },
|
||||
{ label: 'July', value: 7 },
|
||||
{ label: 'August', value: 8 },
|
||||
{ label: 'September', value: 9 },
|
||||
{ label: 'October', value: 10 },
|
||||
{ label: 'November', value: 11 },
|
||||
{ label: 'December', value: 12 },
|
||||
],
|
||||
},
|
||||
dayOfWeek: {
|
||||
min: 0,
|
||||
max: 6,
|
||||
step: 1,
|
||||
allowSpecial: ['*', '?'],
|
||||
options: [
|
||||
{ label: 'Sunday', value: 0 },
|
||||
{ label: 'Monday', value: 1 },
|
||||
{ label: 'Tuesday', value: 2 },
|
||||
{ label: 'Wednesday', value: 3 },
|
||||
{ label: 'Thursday', value: 4 },
|
||||
{ label: 'Friday', value: 5 },
|
||||
{ label: 'Saturday', value: 6 },
|
||||
],
|
||||
},
|
||||
year: {
|
||||
min: 0,
|
||||
max: 9999,
|
||||
step: 1,
|
||||
allowSpecial: ['*', '?'],
|
||||
},
|
||||
};
|
||||
|
||||
const PERIOD_CONFIGS = {
|
||||
minute: {
|
||||
label: CronPeriod.Minute,
|
||||
description: 'Run every minute',
|
||||
template: '0 * * * * *',
|
||||
fields: [CronField.Minutes],
|
||||
},
|
||||
hourly: {
|
||||
label: CronPeriod.Hourly,
|
||||
description: 'Run every hour',
|
||||
template: '0 0 * * * *',
|
||||
fields: [CronField.Minutes, CronField.Hours],
|
||||
},
|
||||
daily: {
|
||||
label: CronPeriod.Daily,
|
||||
description: 'Run every day',
|
||||
template: '0 0 0 * * *',
|
||||
fields: [CronField.Seconds, CronField.Minutes, CronField.Hours],
|
||||
},
|
||||
weekly: {
|
||||
label: CronPeriod.Weekly,
|
||||
description: 'Run every week',
|
||||
template: '0 0 0 * * 0',
|
||||
fields: [
|
||||
CronField.Seconds,
|
||||
CronField.Minutes,
|
||||
CronField.Hours,
|
||||
CronField.DayOfWeek,
|
||||
],
|
||||
},
|
||||
monthly: {
|
||||
label: CronPeriod.Monthly,
|
||||
description: 'Run every month',
|
||||
template: '0 0 0 1 * *',
|
||||
fields: [
|
||||
CronField.Seconds,
|
||||
CronField.Minutes,
|
||||
CronField.Hours,
|
||||
CronField.DayOfMonth,
|
||||
],
|
||||
},
|
||||
yearly: {
|
||||
label: CronPeriod.Yearly,
|
||||
description: 'Run every year',
|
||||
template: '0 0 0 1 1 *',
|
||||
fields: [
|
||||
CronField.Seconds,
|
||||
CronField.Minutes,
|
||||
CronField.Hours,
|
||||
CronField.DayOfMonth,
|
||||
CronField.Month,
|
||||
],
|
||||
},
|
||||
custom: {
|
||||
label: CronPeriod.Custom,
|
||||
description: 'Custom expression',
|
||||
template: '0 0 * * * *',
|
||||
fields: [
|
||||
CronField.Seconds,
|
||||
CronField.Minutes,
|
||||
CronField.Hours,
|
||||
CronField.DayOfMonth,
|
||||
CronField.Month,
|
||||
CronField.DayOfWeek,
|
||||
],
|
||||
},
|
||||
} as const;
|
||||
|
||||
const CronBuilder: FC<CronBuilderProps> = ({
|
||||
timezone = 'UTC',
|
||||
value = '0 0 * * * *',
|
||||
onChange,
|
||||
className,
|
||||
disabled = false,
|
||||
showPreview = true,
|
||||
showPresets = true,
|
||||
displayPeriods = [
|
||||
CronPeriod.Custom,
|
||||
CronPeriod.Minute,
|
||||
CronPeriod.Hourly,
|
||||
CronPeriod.Daily,
|
||||
CronPeriod.Weekly,
|
||||
CronPeriod.Monthly,
|
||||
CronPeriod.Yearly,
|
||||
],
|
||||
defaultTab = CronPeriod.Custom,
|
||||
presets = CRON_PRESETS,
|
||||
showGeneratedExpression = true,
|
||||
withCard = true,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<CronPeriod>(defaultTab);
|
||||
const [cronFields, setCronFields] = useState(() =>
|
||||
parseCronExpression(value)
|
||||
);
|
||||
|
||||
const currentExpression = useMemo(() => {
|
||||
return `${cronFields.seconds} ${cronFields.minutes} ${cronFields.hours} ${cronFields.dayOfMonth} ${cronFields.month} ${cronFields.dayOfWeek}`;
|
||||
}, [cronFields]);
|
||||
|
||||
const nextRuns = useMemo(() => {
|
||||
if (!showPreview) {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const matches = getFutureMatches(`${currentExpression} *`, {
|
||||
matchCount: 3,
|
||||
timezone,
|
||||
formatInTimezone: true,
|
||||
hasSeconds: true,
|
||||
});
|
||||
return matches.map((match) => new Date(match));
|
||||
} catch (error) {
|
||||
console.error('Failed to get future matched runs', error);
|
||||
return [];
|
||||
}
|
||||
}, [currentExpression, showPreview, timezone]);
|
||||
|
||||
useEffect(() => {
|
||||
setCronFields(parseCronExpression(value));
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
onChange?.(currentExpression);
|
||||
}, [currentExpression, onChange]);
|
||||
|
||||
const handlePresetSelect = useCallback((preset: CronPreset) => {
|
||||
setCronFields(parseCronExpression(preset.value));
|
||||
}, []);
|
||||
|
||||
const handleFieldChange = useCallback(
|
||||
(field: CronField, newValue: string) => {
|
||||
setCronFields((prev) => ({ ...prev, [field]: newValue }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handlePeriodChange = useCallback((period: CronPeriod) => {
|
||||
setActiveTab(period);
|
||||
if (period !== 'custom') {
|
||||
const config = PERIOD_CONFIGS[period];
|
||||
setCronFields(parseCronExpression(config.template));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const filteredPresets = useMemo(() => {
|
||||
return presets.filter((preset) => {
|
||||
if (activeTab === 'custom') {
|
||||
return true;
|
||||
}
|
||||
return preset.category === activeTab;
|
||||
});
|
||||
}, [presets, activeTab]);
|
||||
|
||||
return (
|
||||
<div className={cn(withCard && 'space-y-6', className)}>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(value) => handlePeriodChange(value as CronPeriod)}
|
||||
>
|
||||
<div className="overflow-x-auto">
|
||||
<TabsList
|
||||
className="grid w-(--all-grids-width) grid-cols-7 whitespace-nowrap lg:w-full"
|
||||
style={
|
||||
{
|
||||
'--my-grid-cols': `grid-template-columns: repeat(${displayPeriods.length}, minmax(0, 1fr))`,
|
||||
'--all-grids-width':
|
||||
displayPeriods.length > 4
|
||||
? `${displayPeriods.length * 25 - 20}%`
|
||||
: '100%',
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
{displayPeriods.map((period) => (
|
||||
<TabsTrigger
|
||||
key={period}
|
||||
value={period}
|
||||
disabled={disabled}
|
||||
className="text-xs capitalize"
|
||||
>
|
||||
{PERIOD_CONFIGS[period].label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</div>
|
||||
{displayPeriods.map((period) => (
|
||||
<TabsContent
|
||||
key={period}
|
||||
value={period}
|
||||
className={cn(withCard ? 'space-y-4' : 'px-0')}
|
||||
>
|
||||
<Card className={cn(!withCard && 'border-none shadow-none')}>
|
||||
<CardHeader className={cn('pb-1', !withCard && 'px-0')}>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Settings className="h-4 w-4" />
|
||||
<span className="capitalize">
|
||||
{PERIOD_CONFIGS[period].label} Configuration
|
||||
</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{PERIOD_CONFIGS[period].description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className={cn('space-y-4', !withCard && 'px-0')}>
|
||||
<CronFieldEditor
|
||||
period={period}
|
||||
fields={cronFields}
|
||||
onChange={handleFieldChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{showPresets && filteredPresets.length > 0 && (
|
||||
<Card className={cn(!withCard && 'border-none shadow-none')}>
|
||||
<CardHeader className={cn(!withCard && 'px-0')}>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4" />
|
||||
Quick Presets
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Common cron expressions for quick setup
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className={cn(!withCard && 'px-0')}>
|
||||
<div className="grid gap-3 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{filteredPresets.map((preset, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="h-auto justify-start p-4 text-left"
|
||||
onClick={() => handlePresetSelect(preset)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<div className="w-full space-y-2">
|
||||
<div className="font-medium text-sm">
|
||||
{preset.label}
|
||||
</div>
|
||||
<div className="whitespace-normal break-words text-muted-foreground text-xs leading-relaxed">
|
||||
{preset.description}
|
||||
</div>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="mt-1 break-all font-mono text-xs"
|
||||
>
|
||||
{preset.value}
|
||||
</Badge>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
{/* Current Expression & Preview */}
|
||||
{showGeneratedExpression && (
|
||||
<Card className={cn(!withCard && 'border-none shadow-none')}>
|
||||
<CardHeader className={cn(!withCard && 'px-0')}>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Clock className="h-4 w-4" />
|
||||
Generated Expression
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className={cn('space-y-4', !withCard && 'px-0')}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="px-3 py-1 font-mono text-sm">
|
||||
{currentExpression}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{showPreview && nextRuns.length > 0 && (
|
||||
<>
|
||||
<Separator />
|
||||
<div className="space-y-2">
|
||||
<h4 className="flex items-center gap-2 font-medium text-sm">
|
||||
<Calendar className="h-4 w-4" />
|
||||
Next Runs({timezone})
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
{nextRuns.map((date, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between rounded bg-muted/50 px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="font-medium text-muted-foreground">
|
||||
#{index + 1}
|
||||
</span>
|
||||
|
||||
<span className="font-mono">
|
||||
{date.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface CronFieldEditorProps {
|
||||
period: CronPeriod;
|
||||
fields: Record<CronField, string>;
|
||||
onChange: (field: CronField, value: string) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const CronFieldEditor: FC<CronFieldEditorProps> = ({
|
||||
period,
|
||||
fields,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const relevantFields = [...PERIOD_CONFIGS[period].fields] as CronField[];
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{relevantFields.map((field) => {
|
||||
const config = FIELD_CONFIGS[field];
|
||||
const currentValue = fields[field];
|
||||
|
||||
return (
|
||||
<div key={field} className="space-y-2">
|
||||
<Label className="font-medium text-sm capitalize">
|
||||
{field.replace(/([A-Z])/g, ' $1').toLowerCase()}
|
||||
</Label>
|
||||
|
||||
{field === 'month' || field === 'dayOfWeek' ? (
|
||||
<Select
|
||||
value={currentValue}
|
||||
onValueChange={(value) => onChange(field, value)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="*">Any</SelectItem>
|
||||
{config.options?.map((option, index) => (
|
||||
<SelectItem key={index} value={option.value.toString()}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
// biome-ignore lint/nursery/noNestedTernary: <explanation>
|
||||
) : field === 'dayOfMonth' ? (
|
||||
<div className="space-y-2">
|
||||
<Select
|
||||
value={currentValue}
|
||||
onValueChange={(value) => onChange(field, value)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{config.options?.map((option, index) => (
|
||||
<SelectItem key={index} value={option.value.toString()}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
{Array.from({ length: 31 }, (_, i) => i + 1).map((day) => (
|
||||
<SelectItem key={day} value={day.toString()}>
|
||||
{day}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={currentValue === '*' ? '*' : 'specific'}
|
||||
onValueChange={(value) => {
|
||||
if (value === '*') {
|
||||
onChange(field, '*');
|
||||
} else if (value === 'specific' && currentValue === '*') {
|
||||
onChange(field, '0');
|
||||
}
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
<ToggleGroupItem value="*" className="min-w-fit text-xs">
|
||||
Any
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="specific"
|
||||
className="min-w-fit text-xs"
|
||||
>
|
||||
Specific
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
{currentValue !== '*' && (
|
||||
<Input
|
||||
type="text"
|
||||
value={currentValue}
|
||||
onChange={(e) => onChange(field, e.target.value)}
|
||||
placeholder={`0-${config.max}`}
|
||||
disabled={disabled}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="text-muted-foreground text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Info className="h-3 w-3" />
|
||||
<span>
|
||||
Range: {config.min}-{config.max}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
Supports: *, numbers, ranges (1-5), lists (1,3,5), steps
|
||||
(*/5)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function parseCronExpression(expression: string): Record<CronField, string> {
|
||||
const parts = expression.split(' ');
|
||||
|
||||
// Ensure we have 6 parts, pad with defaults if needed
|
||||
while (parts.length < 6) {
|
||||
parts.push('*');
|
||||
}
|
||||
|
||||
return {
|
||||
seconds: parts[0] || '0',
|
||||
minutes: parts[1] || '*',
|
||||
hours: parts[2] || '*',
|
||||
dayOfMonth: parts[3] || '*',
|
||||
month: parts[4] || '*',
|
||||
dayOfWeek: parts[5] || '*',
|
||||
year: parts[6] || '*',
|
||||
};
|
||||
}
|
||||
|
||||
export { CronBuilder };
|
||||
277
apps/webui/src/components/domains/cron/cron-display.tsx
Normal file
277
apps/webui/src/components/domains/cron/cron-display.tsx
Normal file
@ -0,0 +1,277 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { cn } from '@/presentation/utils';
|
||||
import { getFutureMatches, isTimeMatches } from '@datasert/cronjs-matcher';
|
||||
import { parse } from '@datasert/cronjs-parser';
|
||||
import { AlertCircle, CalendarDays, CheckCircle, Clock } from 'lucide-react';
|
||||
import { type FC, useMemo } from 'react';
|
||||
import type {
|
||||
CronDisplayProps,
|
||||
CronNextRun,
|
||||
CronValidationResult,
|
||||
} from './types.js';
|
||||
|
||||
const CronDisplay: FC<CronDisplayProps> = ({
|
||||
expression,
|
||||
className,
|
||||
showNextRuns = true,
|
||||
nextRunsCount = 5,
|
||||
timezone = 'UTC',
|
||||
showDescription = true,
|
||||
withCard = true,
|
||||
}) => {
|
||||
const validationResult = useMemo((): CronValidationResult => {
|
||||
if (!expression) {
|
||||
return { isValid: false, error: 'No expression provided' };
|
||||
}
|
||||
|
||||
try {
|
||||
const _parsed = parse(`${expression} *`, { hasSeconds: true });
|
||||
return {
|
||||
isValid: true,
|
||||
description: generateDescription(expression),
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
isValid: false,
|
||||
error: error instanceof Error ? error.message : 'Invalid expression',
|
||||
};
|
||||
}
|
||||
}, [expression]);
|
||||
|
||||
const nextRuns = useMemo((): CronNextRun[] => {
|
||||
if (!expression || !validationResult.isValid || !showNextRuns) {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const matches = getFutureMatches(`${expression} *`, {
|
||||
matchCount: nextRunsCount,
|
||||
timezone,
|
||||
formatInTimezone: true,
|
||||
hasSeconds: true,
|
||||
});
|
||||
|
||||
return matches.map((match) => {
|
||||
const date = new Date(match);
|
||||
return {
|
||||
date,
|
||||
timestamp: date.getTime(),
|
||||
formatted: date.toLocaleString(),
|
||||
relative: getRelativeTime(date),
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('Failed to get future matches:', error);
|
||||
return [];
|
||||
}
|
||||
}, [
|
||||
expression,
|
||||
validationResult.isValid,
|
||||
showNextRuns,
|
||||
nextRunsCount,
|
||||
timezone,
|
||||
]);
|
||||
|
||||
const isCurrentTimeMatch = useMemo(() => {
|
||||
if (!expression || !validationResult.isValid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
return isTimeMatches(
|
||||
`${expression} *`,
|
||||
new Date().toISOString(),
|
||||
timezone
|
||||
);
|
||||
} catch (_error: unknown) {
|
||||
return false;
|
||||
}
|
||||
}, [expression, validationResult.isValid, timezone]);
|
||||
|
||||
if (!expression) {
|
||||
return (
|
||||
<Card className={cn(className, !withCard && 'border-none shadow-none')}>
|
||||
<CardContent className={cn('p-4', !withCard && 'px-0')}>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<span className="text-sm">No cron expression set</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={cn(className, !withCard && 'border-none shadow-none')}>
|
||||
<CardHeader className={cn(!withCard && 'px-0')}>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Clock className="h-4 w-4" />
|
||||
Cron Expression
|
||||
{isCurrentTimeMatch && (
|
||||
<Badge variant="default" className="text-xs">
|
||||
<CheckCircle className="mr-1 h-3 w-3" />
|
||||
Active Now
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<Badge
|
||||
variant={validationResult.isValid ? 'secondary' : 'destructive'}
|
||||
className="font-mono text-xs"
|
||||
>
|
||||
{expression}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{validationResult.isValid &&
|
||||
showDescription &&
|
||||
validationResult.description && (
|
||||
<CardDescription className="text-sm">
|
||||
{validationResult.description}
|
||||
</CardDescription>
|
||||
)}
|
||||
|
||||
{!validationResult.isValid && validationResult.error && (
|
||||
<CardDescription className="flex items-center gap-2 text-destructive text-sm">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{validationResult.error}
|
||||
</CardDescription>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
{validationResult.isValid && showNextRuns && nextRuns.length > 0 && (
|
||||
<CardContent className={cn('pt-0', !withCard && 'px-0')}>
|
||||
<div className="space-y-3">
|
||||
<h4 className="flex items-center gap-2 font-medium text-sm">
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
Next Runs
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{timezone}
|
||||
</Badge>
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{nextRuns.map((run, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between rounded border bg-muted/50 p-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-6 font-medium text-muted-foreground text-xs">
|
||||
#{index + 1}
|
||||
</span>
|
||||
<span className="font-mono text-sm">{run.formatted}</span>
|
||||
</div>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{run.relative}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
function generateDescription(expression: string): string {
|
||||
// Enhanced description generator based on common patterns
|
||||
const parts = expression.split(' ');
|
||||
if (parts.length !== 6) {
|
||||
return expression;
|
||||
}
|
||||
|
||||
const [sec, min, hour, day, month, weekday] = parts;
|
||||
|
||||
// Common patterns
|
||||
const patterns: Record<string, string> = {
|
||||
'* * * * * *': 'Every second',
|
||||
'0 * * * * *': 'Every minute',
|
||||
'0 0 * * * *': 'Every hour',
|
||||
'0 0 0 * * *': 'Daily at midnight',
|
||||
'0 0 0 * * 0': 'Every Sunday at midnight',
|
||||
'0 0 0 * * 1': 'Every Monday at midnight',
|
||||
'0 0 0 * * 2': 'Every Tuesday at midnight',
|
||||
'0 0 0 * * 3': 'Every Wednesday at midnight',
|
||||
'0 0 0 * * 4': 'Every Thursday at midnight',
|
||||
'0 0 0 * * 5': 'Every Friday at midnight',
|
||||
'0 0 0 * * 6': 'Every Saturday at midnight',
|
||||
'0 0 0 1 * *': 'Monthly on the 1st at midnight',
|
||||
'0 0 0 1 1 *': 'Yearly on January 1st at midnight',
|
||||
'0 30 9 * * 1-5': 'Weekdays at 9:30 AM',
|
||||
'0 0 */6 * * *': 'Every 6 hours',
|
||||
'0 */30 * * * *': 'Every 30 minutes',
|
||||
'0 */15 * * * *': 'Every 15 minutes',
|
||||
'0 */5 * * * *': 'Every 5 minutes',
|
||||
};
|
||||
|
||||
if (patterns[expression]) {
|
||||
return patterns[expression];
|
||||
}
|
||||
|
||||
// Generate dynamic description
|
||||
let description = 'At ';
|
||||
|
||||
if (sec !== '*' && sec !== '0') {
|
||||
description += `second ${sec}, `;
|
||||
}
|
||||
if (min !== '*') {
|
||||
description += `minute ${min}, `;
|
||||
}
|
||||
if (hour !== '*') {
|
||||
description += `hour ${hour}, `;
|
||||
}
|
||||
|
||||
if (day !== '*' && weekday !== '*') {
|
||||
description += `on day ${day} and weekday ${weekday} `;
|
||||
} else if (day !== '*') {
|
||||
description += `on day ${day} `;
|
||||
} else if (weekday !== '*') {
|
||||
description += `on weekday ${weekday} `;
|
||||
}
|
||||
|
||||
if (month !== '*') {
|
||||
description += `in month ${month}`;
|
||||
}
|
||||
|
||||
// biome-ignore lint/performance/useTopLevelRegex: <explanation>
|
||||
return description.replace(/,\s*$/, '').replace(/At\s*$/, 'Every occurrence');
|
||||
}
|
||||
|
||||
function getRelativeTime(date: Date): string {
|
||||
const now = new Date();
|
||||
const diffMs = date.getTime() - now.getTime();
|
||||
|
||||
if (diffMs < 0) {
|
||||
return 'Past';
|
||||
}
|
||||
|
||||
const diffSec = Math.floor(diffMs / 1000);
|
||||
const diffMin = Math.floor(diffSec / 60);
|
||||
const diffHour = Math.floor(diffMin / 60);
|
||||
const diffDay = Math.floor(diffHour / 24);
|
||||
|
||||
if (diffSec < 60) {
|
||||
return `in ${diffSec}s`;
|
||||
}
|
||||
if (diffMin < 60) {
|
||||
return `in ${diffMin}m`;
|
||||
}
|
||||
if (diffHour < 24) {
|
||||
return `in ${diffHour}h`;
|
||||
}
|
||||
if (diffDay < 7) {
|
||||
return `in ${diffDay}d`;
|
||||
}
|
||||
|
||||
return `in ${Math.floor(diffDay / 7)}w`;
|
||||
}
|
||||
|
||||
export { CronDisplay };
|
||||
413
apps/webui/src/components/domains/cron/cron-example.tsx
Normal file
413
apps/webui/src/components/domains/cron/cron-example.tsx
Normal file
@ -0,0 +1,413 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Code2, Play, Settings, Type } from 'lucide-react';
|
||||
import { type FC, useCallback, useState } from 'react';
|
||||
import { CronBuilder } from './cron-builder.js';
|
||||
import { CronDisplay } from './cron-display.js';
|
||||
import { CronInput } from './cron-input.js';
|
||||
import { Cron } from './cron.js';
|
||||
|
||||
const CronExample: FC = () => {
|
||||
const [inputValue, setInputValue] = useState('0 30 9 * * 1-5');
|
||||
const [builderValue, setBuilderValue] = useState('0 0 */6 * * *');
|
||||
const [fullValue, setFullValue] = useState('0 */15 * * * *');
|
||||
const [displayValue] = useState('0 0 0 * * 0');
|
||||
|
||||
const examples = [
|
||||
{
|
||||
label: 'Every minute',
|
||||
expression: '0 * * * * *',
|
||||
description: 'Runs at the start of every minute',
|
||||
},
|
||||
{
|
||||
label: 'Every 5 minutes',
|
||||
expression: '0 */5 * * * *',
|
||||
description: 'Runs every 5 minutes',
|
||||
},
|
||||
{
|
||||
label: 'Every hour',
|
||||
expression: '0 0 * * * *',
|
||||
description: 'Runs at the start of every hour',
|
||||
},
|
||||
{
|
||||
label: 'Daily at 9 AM',
|
||||
expression: '0 0 9 * * *',
|
||||
description: 'Runs every day at 9:00 AM',
|
||||
},
|
||||
{
|
||||
label: 'Weekdays at 9:30 AM',
|
||||
expression: '0 30 9 * * 1-5',
|
||||
description: 'Runs Monday through Friday at 9:30 AM',
|
||||
},
|
||||
{
|
||||
label: 'Every Sunday',
|
||||
expression: '0 0 0 * * 0',
|
||||
description: 'Runs every Sunday at midnight',
|
||||
},
|
||||
{
|
||||
label: 'First day of month',
|
||||
expression: '0 0 0 1 * *',
|
||||
description: 'Runs on the 1st day of every month',
|
||||
},
|
||||
{
|
||||
label: 'Every quarter',
|
||||
expression: '0 0 0 1 */3 *',
|
||||
description: 'Runs on the 1st day of every quarter',
|
||||
},
|
||||
];
|
||||
|
||||
const handleCopyExample = useCallback(async (expression: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(expression);
|
||||
} catch (error) {
|
||||
console.warn('Failed to copy to clipboard:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="space-y-2">
|
||||
<h1 className="font-bold text-3xl">Cron Expression Components</h1>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
A comprehensive set of components for creating and managing cron
|
||||
expressions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Examples */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Code2 className="h-5 w-5" />
|
||||
Common Examples
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Click any example to copy the expression to your clipboard
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{examples.map((example, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="h-auto flex-col items-start p-4 text-left"
|
||||
onClick={() => handleCopyExample(example.expression)}
|
||||
>
|
||||
<div className="w-full space-y-2">
|
||||
<div className="font-medium text-sm">{example.label}</div>
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
{example.expression}
|
||||
</Badge>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{example.description}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Component Examples */}
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<h2 className="font-semibold text-2xl">Component Examples</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Interactive examples showing different ways to use the cron
|
||||
components.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="full" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="full">Complete</TabsTrigger>
|
||||
<TabsTrigger value="input">Input Only</TabsTrigger>
|
||||
<TabsTrigger value="builder">Builder Only</TabsTrigger>
|
||||
<TabsTrigger value="display">Display Only</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="full" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5" />
|
||||
Complete Cron Component
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Full-featured component with both input and visual builder
|
||||
modes, validation, preview, and help documentation.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<Cron
|
||||
value={fullValue}
|
||||
onChange={setFullValue}
|
||||
mode="both"
|
||||
showPreview={true}
|
||||
showDescription={true}
|
||||
timezone="UTC"
|
||||
/>
|
||||
|
||||
<div className="rounded bg-muted p-4">
|
||||
<h4 className="mb-2 font-medium text-sm">Current Value:</h4>
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{fullValue || 'No expression set'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="input" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Type className="h-5 w-5" />
|
||||
Text Input Component
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Simple text input with validation, help text, and real-time
|
||||
feedback.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<CronInput
|
||||
value={inputValue}
|
||||
onChange={setInputValue}
|
||||
placeholder="Enter cron expression..."
|
||||
/>
|
||||
|
||||
<div className="rounded bg-muted p-4">
|
||||
<h4 className="mb-2 font-medium text-sm">Current Value:</h4>
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{inputValue || 'No expression set'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Input-Only Mode</CardTitle>
|
||||
<CardDescription>
|
||||
Using the main Cron component in input-only mode with preview.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Cron
|
||||
value={inputValue}
|
||||
onChange={setInputValue}
|
||||
mode="input"
|
||||
showPreview={true}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="builder" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5" />
|
||||
Visual Builder Component
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Visual interface for building cron expressions with presets
|
||||
and field editors.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<CronBuilder
|
||||
value={builderValue}
|
||||
onChange={setBuilderValue}
|
||||
showPreview={true}
|
||||
/>
|
||||
|
||||
<div className="rounded bg-muted p-4">
|
||||
<h4 className="mb-2 font-medium text-sm">Current Value:</h4>
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{builderValue || 'No expression set'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Builder-Only Mode</CardTitle>
|
||||
<CardDescription>
|
||||
Using the main Cron component in builder-only mode.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Cron
|
||||
value={builderValue}
|
||||
onChange={setBuilderValue}
|
||||
mode="builder"
|
||||
showPreview={false}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="display" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Play className="h-5 w-5" />
|
||||
Display Component
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Read-only component that shows cron expression details,
|
||||
description, and next run times.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<CronDisplay
|
||||
expression={displayValue}
|
||||
showNextRuns={true}
|
||||
showDescription={true}
|
||||
nextRunsCount={5}
|
||||
timezone="UTC"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Multiple Timezone Display</CardTitle>
|
||||
<CardDescription>
|
||||
Same expression displayed in different timezones.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium text-sm">UTC</h4>
|
||||
<CronDisplay
|
||||
expression="0 0 12 * * *"
|
||||
showNextRuns={true}
|
||||
nextRunsCount={3}
|
||||
timezone="UTC"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium text-sm">
|
||||
America/New_York
|
||||
</h4>
|
||||
<CronDisplay
|
||||
expression="0 0 12 * * *"
|
||||
showNextRuns={true}
|
||||
nextRunsCount={3}
|
||||
timezone="America/New_York"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* Usage Examples */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Usage Examples</CardTitle>
|
||||
<CardDescription>
|
||||
Code examples showing how to integrate these components into your
|
||||
application.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium text-sm">Basic Usage</h4>
|
||||
<div className="rounded bg-muted p-4 font-mono text-sm">
|
||||
<pre>{`import { Cron } from '@/components/cron';
|
||||
|
||||
function MyComponent() {
|
||||
const [cronExpression, setCronExpression] = useState('0 0 * * * *');
|
||||
|
||||
return (
|
||||
<Cron
|
||||
value={cronExpression}
|
||||
onChange={setCronExpression}
|
||||
mode="both"
|
||||
showPreview={true}
|
||||
/>
|
||||
);
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium text-sm">
|
||||
Input Only with Validation
|
||||
</h4>
|
||||
<div className="rounded bg-muted p-4 font-mono text-sm">
|
||||
<pre>{`import { CronInput } from '@/components/cron';
|
||||
|
||||
function ScheduleForm() {
|
||||
const [expression, setExpression] = useState('');
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
|
||||
return (
|
||||
<CronInput
|
||||
value={expression}
|
||||
onChange={setExpression}
|
||||
onValidate={setIsValid}
|
||||
placeholder="0 0 * * * *"
|
||||
/>
|
||||
);
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium text-sm">
|
||||
Display Schedule Information
|
||||
</h4>
|
||||
<div className="rounded bg-muted p-4 font-mono text-sm">
|
||||
<pre>{`import { CronDisplay } from '@/components/cron';
|
||||
|
||||
function SchedulePreview({ schedule }) {
|
||||
return (
|
||||
<CronDisplay
|
||||
expression={schedule.cronExpression}
|
||||
showNextRuns={true}
|
||||
showDescription={true}
|
||||
timezone={schedule.timezone}
|
||||
/>
|
||||
);
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CronExample };
|
||||
186
apps/webui/src/components/domains/cron/cron-input.tsx
Normal file
186
apps/webui/src/components/domains/cron/cron-input.tsx
Normal file
@ -0,0 +1,186 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/presentation/utils';
|
||||
import { parse } from '@datasert/cronjs-parser';
|
||||
import { AlertCircle, CheckCircle, Info } from 'lucide-react';
|
||||
import {
|
||||
type ChangeEvent,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import type { CronInputProps, CronValidationResult } from './types.js';
|
||||
|
||||
const CronInput = forwardRef<HTMLInputElement, CronInputProps>(
|
||||
(
|
||||
{
|
||||
value,
|
||||
onChange,
|
||||
onValidate,
|
||||
placeholder = '0 0 * * * *',
|
||||
className,
|
||||
disabled,
|
||||
readOnly,
|
||||
error,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [internalValue, setInternalValue] = useState(value || '');
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
const validationResult = useMemo((): CronValidationResult => {
|
||||
if (!internalValue.trim()) {
|
||||
return { isValid: false, error: 'Expression is required' };
|
||||
}
|
||||
|
||||
try {
|
||||
parse(`${internalValue} *`, { hasSeconds: true });
|
||||
return { isValid: true };
|
||||
} catch (parseError) {
|
||||
return {
|
||||
isValid: false,
|
||||
error:
|
||||
parseError instanceof Error
|
||||
? parseError.message
|
||||
: 'Invalid cron expression',
|
||||
};
|
||||
}
|
||||
}, [internalValue]);
|
||||
|
||||
useEffect(() => {
|
||||
setInternalValue(value || '');
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
onValidate?.(validationResult.isValid);
|
||||
}, [validationResult.isValid, onValidate]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
setInternalValue(newValue);
|
||||
onChange?.(newValue);
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const handleFocus = useCallback(() => {
|
||||
setIsFocused(true);
|
||||
}, []);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
setIsFocused(false);
|
||||
}, []);
|
||||
|
||||
const hasError =
|
||||
error || (!validationResult.isValid && internalValue.trim());
|
||||
const showSuccess =
|
||||
validationResult.isValid && internalValue.trim() && !isFocused;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="relative">
|
||||
<Input
|
||||
ref={ref}
|
||||
type="text"
|
||||
value={internalValue}
|
||||
onChange={handleChange}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
'pr-10 font-mono text-sm',
|
||||
hasError && 'border-destructive focus-visible:ring-destructive',
|
||||
showSuccess && 'border-success focus-visible:ring-success',
|
||||
className
|
||||
)}
|
||||
disabled={disabled}
|
||||
readOnly={readOnly}
|
||||
aria-invalid={hasError ? 'true' : 'false'}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{/* Status icon */}
|
||||
<div className="-translate-y-1/2 absolute top-1/2 right-3">
|
||||
{hasError && <AlertCircle className="h-4 w-4 text-destructive" />}
|
||||
{showSuccess && <CheckCircle className="h-4 w-4 text-success" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
{hasError && (
|
||||
<div className="flex items-center gap-2 text-destructive text-sm">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<span>{error || validationResult.error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Help text when focused */}
|
||||
{isFocused && !hasError && (
|
||||
<div className="space-y-2 text-muted-foreground text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Info className="h-4 w-4" />
|
||||
<span>Format: second minute hour day month weekday</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
*
|
||||
</Badge>
|
||||
<span>any value</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
,
|
||||
</Badge>
|
||||
<span>list separator</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
-
|
||||
</Badge>
|
||||
<span>range</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
/
|
||||
</Badge>
|
||||
<span>step value</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
<div className="font-medium text-xs">Examples:</div>
|
||||
<div className="space-y-1 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
0 * * * * *
|
||||
</Badge>
|
||||
<span>Every minute</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
0 0 * * * *
|
||||
</Badge>
|
||||
<span>Every hour</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
0 30 9 * * 1-5
|
||||
</Badge>
|
||||
<span>Weekdays at 9:30 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
CronInput.displayName = 'CronInput';
|
||||
|
||||
export { CronInput };
|
||||
500
apps/webui/src/components/domains/cron/cron.tsx
Normal file
500
apps/webui/src/components/domains/cron/cron.tsx
Normal file
@ -0,0 +1,500 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { cn } from '@/presentation/utils';
|
||||
import { parse } from '@datasert/cronjs-parser';
|
||||
import {
|
||||
AlertCircle,
|
||||
Bolt,
|
||||
Check,
|
||||
Code2,
|
||||
Copy,
|
||||
Settings,
|
||||
Type,
|
||||
} from 'lucide-react';
|
||||
import { type FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { CronBuilder } from './cron-builder';
|
||||
import { CronDisplay } from './cron-display';
|
||||
import { CronInput } from './cron-input';
|
||||
import {
|
||||
CronMode,
|
||||
type CronPrimitiveMode,
|
||||
type CronProps,
|
||||
type CronValidationResult,
|
||||
} from './types';
|
||||
|
||||
const PLACEHOLDER = '0 0 * * * *';
|
||||
|
||||
const Cron: FC<CronProps> = ({
|
||||
value = '',
|
||||
onChange,
|
||||
activeMode = 'input',
|
||||
onActiveModeChange,
|
||||
onValidate,
|
||||
className,
|
||||
mode = 'both',
|
||||
disabled = false,
|
||||
placeholder = PLACEHOLDER,
|
||||
showPreview = true,
|
||||
showDescription = true,
|
||||
timezone = 'UTC',
|
||||
error,
|
||||
children,
|
||||
showHelp = true,
|
||||
displayPeriods,
|
||||
defaultTab,
|
||||
presets,
|
||||
showPresets,
|
||||
withCard = true,
|
||||
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
|
||||
}) => {
|
||||
const [internalValue, setInternalValue] = useState(value || '');
|
||||
const [internalActiveMode, setInternalActiveMode] =
|
||||
useState<CronPrimitiveMode>(
|
||||
mode === CronMode.Both ? activeMode : (mode as CronPrimitiveMode)
|
||||
);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const validationResult = useMemo((): CronValidationResult => {
|
||||
if (!internalValue.trim()) {
|
||||
return { isValid: false, error: 'Expression is required', isEmpty: true };
|
||||
}
|
||||
|
||||
try {
|
||||
parse(`${internalValue} *`, { hasSeconds: true });
|
||||
return { isValid: true };
|
||||
} catch (parseError) {
|
||||
return {
|
||||
isValid: false,
|
||||
error:
|
||||
parseError instanceof Error
|
||||
? parseError.message
|
||||
: 'Invalid cron expression',
|
||||
};
|
||||
}
|
||||
}, [internalValue]);
|
||||
|
||||
useEffect(() => {
|
||||
setInternalValue(value || '');
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
onValidate?.(validationResult.isValid);
|
||||
}, [validationResult.isValid, onValidate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === 'both') {
|
||||
setInternalActiveMode(activeMode);
|
||||
}
|
||||
}, [activeMode, mode]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(newValue: string) => {
|
||||
setInternalValue(newValue);
|
||||
onChange?.(newValue);
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const handleActiveModeChange = useCallback(
|
||||
(mode: CronPrimitiveMode) => {
|
||||
setInternalActiveMode(mode);
|
||||
onActiveModeChange?.(mode);
|
||||
},
|
||||
[onActiveModeChange]
|
||||
);
|
||||
|
||||
const handleCopy = useCallback(async () => {
|
||||
if (!internalValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(internalValue);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (error) {
|
||||
console.warn('Failed to copy to clipboard:', error);
|
||||
}
|
||||
}, [internalValue]);
|
||||
|
||||
const hasError =
|
||||
!!error || !!(!validationResult.isValid && internalValue.trim());
|
||||
|
||||
if (mode === 'input') {
|
||||
return (
|
||||
<div className={cn(withCard && 'space-y-4', className)}>
|
||||
<CronInput
|
||||
value={internalValue}
|
||||
onChange={handleChange}
|
||||
onValidate={onValidate}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
error={error}
|
||||
/>
|
||||
|
||||
{showPreview &&
|
||||
(validationResult.isValid || validationResult.isEmpty) && (
|
||||
<CronDisplay
|
||||
expression={
|
||||
validationResult.isEmpty ? placeholder : internalValue
|
||||
}
|
||||
showNextRuns={true}
|
||||
showDescription={showDescription}
|
||||
timezone={timezone}
|
||||
nextRunsCount={3}
|
||||
withCard={withCard}
|
||||
/>
|
||||
)}
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (mode === 'builder') {
|
||||
return (
|
||||
<div className={cn(withCard && 'space-y-4', className)}>
|
||||
<CronBuilder
|
||||
value={internalValue}
|
||||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
showPreview={showPreview}
|
||||
displayPeriods={displayPeriods}
|
||||
defaultTab={defaultTab}
|
||||
presets={presets}
|
||||
showPresets={showPresets}
|
||||
showGeneratedExpression={true}
|
||||
timezone={timezone}
|
||||
withCard={withCard}
|
||||
/>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(withCard && 'space-y-6', className)}>
|
||||
<Card className={cn(!withCard && 'border-none pt-0 shadow-none')}>
|
||||
<CardHeader className={cn(!withCard && 'px-0')}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Bolt className="h-4 w-4" />
|
||||
Cron Expression Builder
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm">
|
||||
Create and validate cron expressions using visual builder or
|
||||
text input
|
||||
</CardDescription>
|
||||
</div>
|
||||
{internalValue && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant={
|
||||
validationResult.isValid ? 'secondary' : 'destructive'
|
||||
}
|
||||
className="font-mono text-sm"
|
||||
>
|
||||
{internalValue}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCopy}
|
||||
disabled={!internalValue || hasError}
|
||||
className="h-8 px-2"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasError && (
|
||||
<div className="mt-3 flex items-center gap-2 text-destructive text-sm">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<span>{error || validationResult.error}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className={cn(!withCard && 'px-0')}>
|
||||
<Tabs
|
||||
value={internalActiveMode}
|
||||
onValueChange={(value) =>
|
||||
handleActiveModeChange(value as 'input' | 'builder')
|
||||
}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="input" className="flex items-center gap-2">
|
||||
<Type className="h-4 w-4" />
|
||||
Text Input
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="builder" className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
Visual Builder
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="input" className="mt-6 space-y-4">
|
||||
<CronInput
|
||||
value={internalValue}
|
||||
onChange={handleChange}
|
||||
onValidate={onValidate}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
error={error}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="builder" className="mt-6">
|
||||
<CronBuilder
|
||||
value={internalValue}
|
||||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
showPreview={false}
|
||||
displayPeriods={displayPeriods}
|
||||
defaultTab={defaultTab}
|
||||
presets={presets}
|
||||
showPresets={showPresets}
|
||||
showGeneratedExpression={false}
|
||||
timezone={timezone}
|
||||
withCard={withCard}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Preview Section */}
|
||||
{showPreview &&
|
||||
(validationResult.isValid || validationResult.isEmpty) && (
|
||||
<>
|
||||
{!withCard && <Separator />}
|
||||
<CronDisplay
|
||||
expression={
|
||||
validationResult.isEmpty ? placeholder : internalValue
|
||||
}
|
||||
showNextRuns={true}
|
||||
showDescription={showDescription}
|
||||
timezone={timezone}
|
||||
nextRunsCount={3}
|
||||
withCard={withCard}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Help Section */}
|
||||
{showHelp && (
|
||||
<>
|
||||
{!withCard && <Separator />}
|
||||
<Card className={cn(!withCard && 'border-none shadow-none')}>
|
||||
<CardHeader className={cn(!withCard && 'px-0')}>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Code2 className="h-4 w-4" />
|
||||
Cron Expression Format
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className={cn(!withCard && 'px-0')}>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-6 gap-2 text-center text-sm">
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium font-mono text-muted-foreground">
|
||||
Second
|
||||
</div>
|
||||
<div className="text-xs">0-59</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium font-mono text-muted-foreground">
|
||||
Minute
|
||||
</div>
|
||||
<div className="text-xs">0-59</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium font-mono text-muted-foreground">
|
||||
Hour
|
||||
</div>
|
||||
<div className="text-xs">0-23</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium font-mono text-muted-foreground">
|
||||
Day
|
||||
</div>
|
||||
<div className="text-xs">1-31</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium font-mono text-muted-foreground">
|
||||
Month
|
||||
</div>
|
||||
<div className="text-xs">1-12</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium font-mono text-muted-foreground">
|
||||
Weekday
|
||||
</div>
|
||||
<div className="text-xs">0-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
*
|
||||
</Badge>
|
||||
<span className="text-sm">Any value</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Matches all possible values
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
5
|
||||
</Badge>
|
||||
<span className="text-sm">Specific value</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Matches exactly this value
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
1-5
|
||||
</Badge>
|
||||
<span className="text-sm">Range</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Matches values 1 through 5
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
1,3,5
|
||||
</Badge>
|
||||
<span className="text-sm">List</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Matches values 1, 3, and 5
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
*/5
|
||||
</Badge>
|
||||
<span className="text-sm">Step</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Every 5th value
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
0-10/2
|
||||
</Badge>
|
||||
<span className="text-sm">Range + Step</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Even values 0-10
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
?
|
||||
</Badge>
|
||||
<span className="text-sm">No specific</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Used when day/weekday conflicts
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="font-mono">
|
||||
L
|
||||
</Badge>
|
||||
<span className="text-sm">Last</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
Last day of month/week
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-sm">Common Examples:</h4>
|
||||
<div className="grid gap-2 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
0 0 * * * *
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">Every hour</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
0 */15 * * * *
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">
|
||||
Every 15 minutes
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
0 0 0 * * *
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">
|
||||
Daily at midnight
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="secondary" className="font-mono text-xs">
|
||||
0 30 9 * * 1-5
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">
|
||||
Weekdays at 9:30 AM
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Cron };
|
||||
20
apps/webui/src/components/domains/cron/index.ts
Normal file
20
apps/webui/src/components/domains/cron/index.ts
Normal file
@ -0,0 +1,20 @@
|
||||
export { Cron } from './cron';
|
||||
export { CronInput } from './cron-input';
|
||||
export { CronBuilder } from './cron-builder';
|
||||
export { CronDisplay } from './cron-display';
|
||||
export { CronExample } from './cron-example';
|
||||
|
||||
export {
|
||||
type CronProps,
|
||||
type CronInputProps,
|
||||
type CronBuilderProps,
|
||||
type CronDisplayProps,
|
||||
type CronExpression,
|
||||
CronPeriod,
|
||||
type CronPreset,
|
||||
type CronValidationResult,
|
||||
type CronNextRun,
|
||||
type CronFieldConfig,
|
||||
CronField,
|
||||
type PeriodConfig,
|
||||
} from './types';
|
||||
162
apps/webui/src/components/domains/cron/types.ts
Normal file
162
apps/webui/src/components/domains/cron/types.ts
Normal file
@ -0,0 +1,162 @@
|
||||
import type { ClassValue } from 'clsx';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export interface CronExpression {
|
||||
seconds?: string;
|
||||
minutes?: string;
|
||||
hours?: string;
|
||||
dayOfMonth?: string;
|
||||
month?: string;
|
||||
dayOfWeek?: string;
|
||||
year?: string;
|
||||
}
|
||||
|
||||
export interface CronDisplayProps {
|
||||
expression: string;
|
||||
className?: ClassValue;
|
||||
showNextRuns?: boolean;
|
||||
nextRunsCount?: number;
|
||||
timezone?: string;
|
||||
showDescription?: boolean;
|
||||
withCard?: boolean;
|
||||
}
|
||||
|
||||
export interface CronInputProps {
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
onValidate?: (isValid: boolean) => void;
|
||||
placeholder?: string;
|
||||
className?: ClassValue;
|
||||
disabled?: boolean;
|
||||
readOnly?: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface CronBuilderProps {
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
className?: ClassValue;
|
||||
disabled?: boolean;
|
||||
showPreview?: boolean;
|
||||
defaultTab?: CronPeriod;
|
||||
displayPeriods?: CronPeriod[];
|
||||
presets?: CronPreset[];
|
||||
showPresets?: boolean;
|
||||
showGeneratedExpression?: boolean;
|
||||
timezone?: string;
|
||||
withCard?: boolean;
|
||||
}
|
||||
|
||||
export const CronPrimitiveMode = {
|
||||
Input: 'input',
|
||||
Builder: 'builder',
|
||||
} as const;
|
||||
|
||||
export type CronPrimitiveMode =
|
||||
(typeof CronPrimitiveMode)[keyof typeof CronPrimitiveMode];
|
||||
|
||||
export const CronMode = {
|
||||
Input: 'input',
|
||||
Builder: 'builder',
|
||||
Both: 'both',
|
||||
} as const;
|
||||
|
||||
export type CronMode = (typeof CronMode)[keyof typeof CronMode];
|
||||
|
||||
export interface CronProps {
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
activeMode?: CronPrimitiveMode;
|
||||
onActiveModeChange?: (mode: CronPrimitiveMode) => void;
|
||||
onValidate?: (isValid: boolean) => void;
|
||||
className?: ClassValue;
|
||||
mode?: CronMode;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
showPreview?: boolean;
|
||||
showDescription?: boolean;
|
||||
timezone?: string;
|
||||
error?: string;
|
||||
children?: ReactNode;
|
||||
defaultTab?: CronPeriod;
|
||||
displayPeriods?: CronPeriod[];
|
||||
presets?: CronPreset[];
|
||||
showHelp?: boolean;
|
||||
showPresets?: boolean;
|
||||
withCard?: boolean;
|
||||
}
|
||||
|
||||
export const CronPeriod = {
|
||||
Minute: 'minute',
|
||||
Hourly: 'hourly',
|
||||
Daily: 'daily',
|
||||
Weekly: 'weekly',
|
||||
Monthly: 'monthly',
|
||||
Yearly: 'yearly',
|
||||
Custom: 'custom',
|
||||
} as const;
|
||||
|
||||
export type CronPeriod = (typeof CronPeriod)[keyof typeof CronPeriod];
|
||||
|
||||
export interface CronFieldProps {
|
||||
period: CronPeriod;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
className?: ClassValue;
|
||||
}
|
||||
|
||||
export interface CronPreset {
|
||||
label: string;
|
||||
value: string;
|
||||
description: string;
|
||||
category?: string;
|
||||
}
|
||||
|
||||
export interface CronValidationResult {
|
||||
isValid: boolean;
|
||||
error?: string;
|
||||
description?: string;
|
||||
isEmpty?: boolean;
|
||||
}
|
||||
|
||||
export interface CronNextRun {
|
||||
date: Date;
|
||||
timestamp: number;
|
||||
formatted: string;
|
||||
relative: string;
|
||||
}
|
||||
|
||||
export interface PeriodConfig {
|
||||
label: string;
|
||||
description: string;
|
||||
defaultValue: string;
|
||||
fields: {
|
||||
seconds?: boolean;
|
||||
minutes?: boolean;
|
||||
hours?: boolean;
|
||||
dayOfMonth?: boolean;
|
||||
month?: boolean;
|
||||
dayOfWeek?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export const CronField = {
|
||||
Seconds: 'seconds',
|
||||
Minutes: 'minutes',
|
||||
Hours: 'hours',
|
||||
DayOfMonth: 'dayOfMonth',
|
||||
Month: 'month',
|
||||
DayOfWeek: 'dayOfWeek',
|
||||
Year: 'year',
|
||||
} as const;
|
||||
|
||||
export type CronField = (typeof CronField)[keyof typeof CronField];
|
||||
|
||||
export interface CronFieldConfig {
|
||||
min: number;
|
||||
max: number;
|
||||
step?: number;
|
||||
options?: Array<{ label: string; value: number | string }>;
|
||||
allowSpecial?: string[];
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { Card, CardContent, CardHeader } from './ui/card';
|
||||
import { Skeleton } from './ui/skeleton';
|
||||
import { Card, CardContent, CardHeader } from "./card";
|
||||
import { Skeleton } from "./skeleton";
|
||||
|
||||
export function DetailCardSkeleton() {
|
||||
return (
|
||||
@ -1,3 +1,4 @@
|
||||
import type { CronPreset } from '@/components/domains/cron';
|
||||
import type { GetCronsQuery } from '@/infra/graphql/gql/graphql';
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
@ -56,3 +57,64 @@ export const DELETE_CRONS = gql`
|
||||
cronDelete(filter: $filter)
|
||||
}
|
||||
`;
|
||||
|
||||
export const INSERT_CRON = gql`
|
||||
mutation InsertCron($data: CronInsertInput!) {
|
||||
cronCreateOne(data: $data) {
|
||||
id
|
||||
cronExpr
|
||||
nextRun
|
||||
lastRun
|
||||
lastError
|
||||
status
|
||||
lockedAt
|
||||
lockedBy
|
||||
createdAt
|
||||
updatedAt
|
||||
timeoutMs
|
||||
maxAttempts
|
||||
priority
|
||||
attempts
|
||||
subscriberTaskCron
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const SUBSCRIPTION_TASK_CRON_PRESETS: CronPreset[] = [
|
||||
{
|
||||
label: 'Daily at midnight',
|
||||
value: '0 0 0 * * *',
|
||||
description: 'Runs once daily at 00:00',
|
||||
category: 'daily',
|
||||
},
|
||||
{
|
||||
label: 'Daily at 9 AM',
|
||||
value: '0 0 9 * * *',
|
||||
description: 'Runs daily at 9:00 AM',
|
||||
category: 'daily',
|
||||
},
|
||||
{
|
||||
label: 'Weekdays at 9 AM',
|
||||
value: '0 0 9 * * 1-5',
|
||||
description: 'Runs Monday to Friday at 9:00 AM',
|
||||
category: 'weekly',
|
||||
},
|
||||
{
|
||||
label: 'Every Sunday',
|
||||
value: '0 0 0 * * 0',
|
||||
description: 'Runs every Sunday at midnight',
|
||||
category: 'weekly',
|
||||
},
|
||||
{
|
||||
label: 'First day of month',
|
||||
value: '0 0 0 1 * *',
|
||||
description: 'Runs on the 1st day of every month',
|
||||
category: 'monthly',
|
||||
},
|
||||
{
|
||||
label: 'Every year',
|
||||
value: '0 0 0 1 1 *',
|
||||
description: 'Runs on January 1st every year',
|
||||
category: 'yearly',
|
||||
},
|
||||
];
|
||||
|
||||
@ -22,6 +22,7 @@ type Documents = {
|
||||
"\n mutation CheckCredential3rdAvailable($filter: Credential3rdFilterInput!) {\n credential3rdCheckAvailable(filter: $filter) {\n available\n }\n }\n": typeof types.CheckCredential3rdAvailableDocument,
|
||||
"\nquery GetCrons($filter: CronFilterInput!, $orderBy: CronOrderInput!, $pagination: PaginationInput!) {\n cron(pagination: $pagination, filter: $filter, orderBy: $orderBy) {\n nodes {\n id\n cronExpr\n nextRun\n lastRun\n lastError\n status\n lockedAt\n lockedBy\n createdAt\n updatedAt\n timeoutMs\n maxAttempts\n priority\n attempts\n subscriberTaskCron\n subscriberTask {\n nodes {\n id,\n job,\n taskType,\n status,\n attempts,\n maxAttempts,\n runAt,\n lastError,\n lockAt,\n lockBy,\n doneAt,\n priority,\n subscription {\n displayName\n sourceUrl\n }\n }\n }\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": typeof types.GetCronsDocument,
|
||||
"\n mutation DeleteCrons($filter: CronFilterInput!) {\n cronDelete(filter: $filter)\n }\n": typeof types.DeleteCronsDocument,
|
||||
"\n mutation InsertCron($data: CronInsertInput!) {\n cronCreateOne(data: $data) {\n id\n cronExpr\n nextRun\n lastRun\n lastError\n status\n lockedAt\n lockedBy\n createdAt\n updatedAt\n timeoutMs\n maxAttempts\n priority\n attempts\n subscriberTaskCron\n }\n }\n": typeof types.InsertCronDocument,
|
||||
"\n mutation InsertFeed($data: FeedsInsertInput!) {\n feedsCreateOne(data: $data) {\n id\n createdAt\n updatedAt\n feedType\n token\n }\n }\n": typeof types.InsertFeedDocument,
|
||||
"\n mutation DeleteFeed($filter: FeedsFilterInput!) {\n feedsDelete(filter: $filter)\n }\n": typeof types.DeleteFeedDocument,
|
||||
"\n query GetSubscriptions($filter: SubscriptionsFilterInput!, $orderBy: SubscriptionsOrderInput!, $pagination: PaginationInput!) {\n subscriptions(\n pagination: $pagination\n filter: $filter\n orderBy: $orderBy\n ) {\n nodes {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n credentialId\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": typeof types.GetSubscriptionsDocument,
|
||||
@ -43,6 +44,7 @@ const documents: Documents = {
|
||||
"\n mutation CheckCredential3rdAvailable($filter: Credential3rdFilterInput!) {\n credential3rdCheckAvailable(filter: $filter) {\n available\n }\n }\n": types.CheckCredential3rdAvailableDocument,
|
||||
"\nquery GetCrons($filter: CronFilterInput!, $orderBy: CronOrderInput!, $pagination: PaginationInput!) {\n cron(pagination: $pagination, filter: $filter, orderBy: $orderBy) {\n nodes {\n id\n cronExpr\n nextRun\n lastRun\n lastError\n status\n lockedAt\n lockedBy\n createdAt\n updatedAt\n timeoutMs\n maxAttempts\n priority\n attempts\n subscriberTaskCron\n subscriberTask {\n nodes {\n id,\n job,\n taskType,\n status,\n attempts,\n maxAttempts,\n runAt,\n lastError,\n lockAt,\n lockBy,\n doneAt,\n priority,\n subscription {\n displayName\n sourceUrl\n }\n }\n }\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": types.GetCronsDocument,
|
||||
"\n mutation DeleteCrons($filter: CronFilterInput!) {\n cronDelete(filter: $filter)\n }\n": types.DeleteCronsDocument,
|
||||
"\n mutation InsertCron($data: CronInsertInput!) {\n cronCreateOne(data: $data) {\n id\n cronExpr\n nextRun\n lastRun\n lastError\n status\n lockedAt\n lockedBy\n createdAt\n updatedAt\n timeoutMs\n maxAttempts\n priority\n attempts\n subscriberTaskCron\n }\n }\n": types.InsertCronDocument,
|
||||
"\n mutation InsertFeed($data: FeedsInsertInput!) {\n feedsCreateOne(data: $data) {\n id\n createdAt\n updatedAt\n feedType\n token\n }\n }\n": types.InsertFeedDocument,
|
||||
"\n mutation DeleteFeed($filter: FeedsFilterInput!) {\n feedsDelete(filter: $filter)\n }\n": types.DeleteFeedDocument,
|
||||
"\n query GetSubscriptions($filter: SubscriptionsFilterInput!, $orderBy: SubscriptionsOrderInput!, $pagination: PaginationInput!) {\n subscriptions(\n pagination: $pagination\n filter: $filter\n orderBy: $orderBy\n ) {\n nodes {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n credentialId\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": types.GetSubscriptionsDocument,
|
||||
@ -102,6 +104,10 @@ export function gql(source: "\nquery GetCrons($filter: CronFilterInput!, $orderB
|
||||
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function gql(source: "\n mutation DeleteCrons($filter: CronFilterInput!) {\n cronDelete(filter: $filter)\n }\n"): (typeof documents)["\n mutation DeleteCrons($filter: CronFilterInput!) {\n cronDelete(filter: $filter)\n }\n"];
|
||||
/**
|
||||
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function gql(source: "\n mutation InsertCron($data: CronInsertInput!) {\n cronCreateOne(data: $data) {\n id\n cronExpr\n nextRun\n lastRun\n lastError\n status\n lockedAt\n lockedBy\n createdAt\n updatedAt\n timeoutMs\n maxAttempts\n priority\n attempts\n subscriberTaskCron\n }\n }\n"): (typeof documents)["\n mutation InsertCron($data: CronInsertInput!) {\n cronCreateOne(data: $data) {\n id\n cronExpr\n nextRun\n lastRun\n lastError\n status\n lockedAt\n lockedBy\n createdAt\n updatedAt\n timeoutMs\n maxAttempts\n priority\n attempts\n subscriberTaskCron\n }\n }\n"];
|
||||
/**
|
||||
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,3 @@
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@ -9,6 +8,7 @@ import {
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { ContainerHeader } from '@/components/ui/container-header';
|
||||
import { DetailCardSkeleton } from '@/components/ui/detail-card-skeleton';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { Dialog, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@ -9,6 +8,7 @@ import {
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { ContainerHeader } from '@/components/ui/container-header';
|
||||
import { DetailCardSkeleton } from '@/components/ui/detail-card-skeleton';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
@ -0,0 +1,152 @@
|
||||
import { Cron } from '@/components/domains/cron';
|
||||
import { CronMode } from '@/components/domains/cron/types';
|
||||
import {
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { INSERT_CRON } from '@/domains/recorder/schema/cron';
|
||||
import type {
|
||||
InsertCronMutation,
|
||||
InsertCronMutationVariables,
|
||||
} from '@/infra/graphql/gql/graphql';
|
||||
import { useMutation } from '@apollo/client';
|
||||
import { useNavigate } from '@tanstack/react-router';
|
||||
import { memo, useCallback } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const SUBSCRIPTION_TASK_CRON_PRESETS = [
|
||||
{
|
||||
label: 'Every hour',
|
||||
value: '0 0 * * * *',
|
||||
description: 'Runs at the top of every hour',
|
||||
category: 'common',
|
||||
},
|
||||
{
|
||||
label: 'Daily at midnight',
|
||||
value: '0 0 0 * * *',
|
||||
description: 'Runs once daily at 00:00',
|
||||
category: 'daily',
|
||||
},
|
||||
{
|
||||
label: 'Daily at 9 AM',
|
||||
value: '0 0 9 * * *',
|
||||
description: 'Runs daily at 9:00 AM',
|
||||
category: 'daily',
|
||||
},
|
||||
{
|
||||
label: 'Every Sunday',
|
||||
value: '0 0 0 * * 0',
|
||||
description: 'Runs every Sunday at midnight',
|
||||
category: 'weekly',
|
||||
},
|
||||
{
|
||||
label: 'First day of month',
|
||||
value: '0 0 0 1 * *',
|
||||
description: 'Runs on the 1st day of every month',
|
||||
category: 'monthly',
|
||||
},
|
||||
{
|
||||
label: 'Every year',
|
||||
value: '0 0 0 1 1 *',
|
||||
description: 'Runs on January 1st every year',
|
||||
category: 'yearly',
|
||||
},
|
||||
];
|
||||
|
||||
export type SubscriptionCronCreationViewCompletePayload = {
|
||||
id: number;
|
||||
};
|
||||
|
||||
export interface SubscriptionCronCreationViewProps {
|
||||
subscriptionId: number;
|
||||
onComplete: (payload: SubscriptionCronCreationViewCompletePayload) => void;
|
||||
}
|
||||
|
||||
export const SubscriptionCronCreationView = memo(
|
||||
({ subscriptionId, onComplete }: SubscriptionCronCreationViewProps) => {
|
||||
const [insertCron, { loading: loadingInsert }] = useMutation<
|
||||
InsertCronMutation,
|
||||
InsertCronMutationVariables
|
||||
>(INSERT_CRON, {
|
||||
onCompleted: (data) => {
|
||||
toast.success('Cron created');
|
||||
onComplete(data.cronCreateOne);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error('Failed to sync subscription', {
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const loading = loadingInsert;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Cron
|
||||
mode={CronMode.Both}
|
||||
withCard={true}
|
||||
showPresets={false}
|
||||
presets={SUBSCRIPTION_TASK_CRON_PRESETS}
|
||||
timezone={'Asia/Shanghai'}
|
||||
/>
|
||||
|
||||
{loading && (
|
||||
<div className="absolute inset-0 flex flex-row items-center justify-center gap-2">
|
||||
<Spinner variant="circle-filled" size="16" />
|
||||
<span>Creating cron...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export interface SubscriptionCronCreationDialogContentProps {
|
||||
subscriptionId: number;
|
||||
onCancel?: VoidFunction;
|
||||
}
|
||||
|
||||
export const SubscriptionCronCreationDialogContent = memo(
|
||||
({
|
||||
subscriptionId,
|
||||
onCancel,
|
||||
}: SubscriptionCronCreationDialogContentProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleCreationComplete = useCallback(
|
||||
(payload: SubscriptionCronCreationViewCompletePayload) => {
|
||||
navigate({
|
||||
to: '/tasks/cron/detail/$id',
|
||||
params: {
|
||||
id: `${payload.id}`,
|
||||
},
|
||||
});
|
||||
},
|
||||
[navigate]
|
||||
);
|
||||
|
||||
return (
|
||||
<DialogContent
|
||||
onAbort={onCancel}
|
||||
className="flex max-h-[80vh] flex-col overflow-y-auto xl:max-w-2xl"
|
||||
>
|
||||
<DialogHeader className="sticky">
|
||||
<DialogTitle>Create Cron</DialogTitle>
|
||||
<DialogDescription>
|
||||
Create a cron to execute the subscription.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||
<SubscriptionCronCreationView
|
||||
subscriptionId={subscriptionId}
|
||||
onComplete={handleCreationComplete}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -18,17 +18,17 @@ import { RefreshCcwIcon } from 'lucide-react';
|
||||
import { memo, useCallback } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export type SubscriptionSyncViewCompletePayload = {
|
||||
export type SubscriptionTaskCreationViewCompletePayload = {
|
||||
id: string;
|
||||
};
|
||||
|
||||
export interface SubscriptionSyncViewProps {
|
||||
id: number;
|
||||
onComplete: (payload: SubscriptionSyncViewCompletePayload) => void;
|
||||
export interface SubscriptionTaskCreationViewProps {
|
||||
subscriptionId: number;
|
||||
onComplete: (payload: SubscriptionTaskCreationViewCompletePayload) => void;
|
||||
}
|
||||
|
||||
export const SubscriptionSyncView = memo(
|
||||
({ id, onComplete }: SubscriptionSyncViewProps) => {
|
||||
export const SubscriptionTaskCreationView = memo(
|
||||
({ subscriptionId, onComplete }: SubscriptionTaskCreationViewProps) => {
|
||||
const [insertSubscriberTask, { loading: loadingInsert }] = useMutation<
|
||||
InsertSubscriberTaskMutation,
|
||||
InsertSubscriberTaskMutationVariables
|
||||
@ -56,7 +56,7 @@ export const SubscriptionSyncView = memo(
|
||||
variables: {
|
||||
data: {
|
||||
job: {
|
||||
subscriptionId: id,
|
||||
subscriptionId: subscriptionId,
|
||||
taskType: SubscriberTaskTypeEnum.SyncOneSubscriptionSources,
|
||||
},
|
||||
},
|
||||
@ -75,7 +75,7 @@ export const SubscriptionSyncView = memo(
|
||||
variables: {
|
||||
data: {
|
||||
job: {
|
||||
subscriptionId: id,
|
||||
subscriptionId: subscriptionId,
|
||||
taskType:
|
||||
SubscriberTaskTypeEnum.SyncOneSubscriptionFeedsIncremental,
|
||||
},
|
||||
@ -95,7 +95,7 @@ export const SubscriptionSyncView = memo(
|
||||
variables: {
|
||||
data: {
|
||||
job: {
|
||||
subscriptionId: id,
|
||||
subscriptionId: subscriptionId,
|
||||
taskType:
|
||||
SubscriberTaskTypeEnum.SyncOneSubscriptionFeedsFull,
|
||||
},
|
||||
@ -111,7 +111,7 @@ export const SubscriptionSyncView = memo(
|
||||
{loading && (
|
||||
<div className="absolute inset-0 flex flex-row items-center justify-center gap-2">
|
||||
<Spinner variant="circle-filled" size="16" />
|
||||
<span>Syncing...</span>
|
||||
<span>Running...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -119,18 +119,20 @@ export const SubscriptionSyncView = memo(
|
||||
}
|
||||
);
|
||||
|
||||
export interface SubscriptionSyncDialogContentProps {
|
||||
id: number;
|
||||
export interface SubscriptionTaskCreationDialogContentProps {
|
||||
subscriptionId: number;
|
||||
onCancel?: VoidFunction;
|
||||
isCron?: boolean;
|
||||
}
|
||||
|
||||
export const SubscriptionSyncDialogContent = memo(
|
||||
({ id, onCancel }: SubscriptionSyncDialogContentProps) => {
|
||||
export const SubscriptionTaskCreationDialogContent = memo(
|
||||
({
|
||||
subscriptionId,
|
||||
onCancel,
|
||||
}: SubscriptionTaskCreationDialogContentProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSyncComplete = useCallback(
|
||||
(payload: SubscriptionSyncViewCompletePayload) => {
|
||||
const handleCreationComplete = useCallback(
|
||||
(payload: SubscriptionTaskCreationViewCompletePayload) => {
|
||||
navigate({
|
||||
to: '/tasks/detail/$id',
|
||||
params: {
|
||||
@ -144,12 +146,15 @@ export const SubscriptionSyncDialogContent = memo(
|
||||
return (
|
||||
<DialogContent onAbort={onCancel}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Sync Subscription</DialogTitle>
|
||||
<DialogTitle>Run Task</DialogTitle>
|
||||
<DialogDescription>
|
||||
Sync the subscription with sources and feeds.
|
||||
Run the task for the subscription.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<SubscriptionSyncView id={id} onComplete={handleSyncComplete} />
|
||||
<SubscriptionTaskCreationView
|
||||
subscriptionId={subscriptionId}
|
||||
onComplete={handleCreationComplete}
|
||||
/>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
@ -1,4 +1,3 @@
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@ -9,6 +8,7 @@ import {
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { ContainerHeader } from '@/components/ui/container-header';
|
||||
import { DetailCardSkeleton } from '@/components/ui/detail-card-skeleton';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { Dialog, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Img } from '@/components/ui/img';
|
||||
@ -47,7 +47,8 @@ import {
|
||||
import { useMemo } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { prettyTaskType } from '../tasks/-pretty-task-type';
|
||||
import { SubscriptionSyncDialogContent } from './-sync';
|
||||
import { SubscriptionCronCreationDialogContent } from './-cron-creation';
|
||||
import { SubscriptionTaskCreationDialogContent } from './-task-creation';
|
||||
|
||||
export const Route = createFileRoute('/_app/subscriptions/detail/$id')({
|
||||
component: SubscriptionDetailRouteComponent,
|
||||
@ -404,19 +405,18 @@ function SubscriptionDetailRouteComponent() {
|
||||
}
|
||||
>
|
||||
<ListIcon className="h-4 w-4" />
|
||||
Crons
|
||||
More
|
||||
</Button>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<RefreshCcwIcon className="h-4 w-4" />
|
||||
Setup Cron
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Cron
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<SubscriptionSyncDialogContent
|
||||
id={subscription.id}
|
||||
<SubscriptionCronCreationDialogContent
|
||||
subscriptionId={subscription.id}
|
||||
onCancel={handleReload}
|
||||
isCron={true}
|
||||
/>
|
||||
</Dialog>
|
||||
</div>
|
||||
@ -477,17 +477,17 @@ function SubscriptionDetailRouteComponent() {
|
||||
}
|
||||
>
|
||||
<ListIcon className="h-4 w-4" />
|
||||
Tasks
|
||||
More
|
||||
</Button>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<RefreshCcwIcon className="h-4 w-4" />
|
||||
Sync
|
||||
Run Task
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<SubscriptionSyncDialogContent
|
||||
id={subscription.id}
|
||||
<SubscriptionTaskCreationDialogContent
|
||||
subscriptionId={subscription.id}
|
||||
onCancel={handleReload}
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@ -9,6 +8,7 @@ import {
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { ContainerHeader } from '@/components/ui/container-header';
|
||||
import { DetailCardSkeleton } from '@/components/ui/detail-card-skeleton';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { FormFieldErrors } from '@/components/ui/form-field-errors';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
||||
@ -47,7 +47,7 @@ import { format } from 'date-fns';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { SubscriptionSyncDialogContent } from './-sync';
|
||||
import { SubscriptionTaskCreationDialogContent } from './-task-creation';
|
||||
|
||||
export const Route = createFileRoute('/_app/subscriptions/manage')({
|
||||
component: SubscriptionManageRouteComponent,
|
||||
@ -238,7 +238,9 @@ function SubscriptionManageRouteComponent() {
|
||||
Sync
|
||||
</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
<SubscriptionSyncDialogContent id={row.original.id} />
|
||||
<SubscriptionTaskCreationDialogContent
|
||||
subscriptionId={row.original.id}
|
||||
/>
|
||||
</Dialog>
|
||||
</DropdownMenuActions>
|
||||
),
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@ -9,6 +8,7 @@ import {
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { ContainerHeader } from '@/components/ui/container-header';
|
||||
import { DetailCardSkeleton } from '@/components/ui/detail-card-skeleton';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { QueryErrorView } from '@/components/ui/query-error-view';
|
||||
|
||||
@ -44,6 +44,14 @@
|
||||
}
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"include": ["**/tsconfig.json", "**/tsconfig.*.json"],
|
||||
"json": {
|
||||
"parser": {
|
||||
"allowComments": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"include": ["apps/webui/src/infra/graphql/gql/**/*"],
|
||||
"linter": {
|
||||
|
||||
62
pnpm-lock.yaml
generated
62
pnpm-lock.yaml
generated
@ -89,6 +89,12 @@ importers:
|
||||
'@corvu/resizable':
|
||||
specifier: ^0.2.5
|
||||
version: 0.2.5(solid-js@1.9.7)
|
||||
'@datasert/cronjs-matcher':
|
||||
specifier: ^1.4.0
|
||||
version: 1.4.0
|
||||
'@datasert/cronjs-parser':
|
||||
specifier: ^1.4.0
|
||||
version: 1.4.0
|
||||
'@graphiql/toolkit':
|
||||
specifier: ^0.11.3
|
||||
version: 0.11.3(@types/node@24.0.10)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@6.0.5)))(graphql@16.11.0)
|
||||
@ -263,6 +269,9 @@ importers:
|
||||
tailwind-merge:
|
||||
specifier: ^3.3.1
|
||||
version: 3.3.1
|
||||
tailwind-scrollbar:
|
||||
specifier: ^4.0.2
|
||||
version: 4.0.2(react@19.1.0)(tailwindcss@4.1.10)
|
||||
tailwindcss:
|
||||
specifier: ^4.1.10
|
||||
version: 4.1.10
|
||||
@ -712,6 +721,12 @@ packages:
|
||||
resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@datasert/cronjs-matcher@1.4.0':
|
||||
resolution: {integrity: sha512-5wAAKYfClZQDWjOeGReEnGLlBKds5K0CitnTv17sH32X4PSuck1dysX71zzCgrm0JCSpobDNg4b292ewhoy6ww==}
|
||||
|
||||
'@datasert/cronjs-parser@1.4.0':
|
||||
resolution: {integrity: sha512-zHGlrWanS4Zjgf0aMi/sp/HTSa2xWDEtXW9xshhlGf/jPx3zTIqfX14PZnoFF7XVOwzC49Zy0SFWG90rlRY36Q==}
|
||||
|
||||
'@date-fns/tz@1.2.0':
|
||||
resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
|
||||
|
||||
@ -3167,6 +3182,9 @@ packages:
|
||||
'@types/node@24.0.10':
|
||||
resolution: {integrity: sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==}
|
||||
|
||||
'@types/prismjs@1.26.5':
|
||||
resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
|
||||
|
||||
'@types/react-dom@19.1.6':
|
||||
resolution: {integrity: sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==}
|
||||
peerDependencies:
|
||||
@ -5008,6 +5026,10 @@ packages:
|
||||
peerDependencies:
|
||||
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
luxon@3.6.1:
|
||||
resolution: {integrity: sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
magic-string@0.30.17:
|
||||
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
|
||||
|
||||
@ -5467,6 +5489,11 @@ packages:
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
|
||||
prism-react-renderer@2.4.1:
|
||||
resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
|
||||
peerDependencies:
|
||||
react: '>=16.0.0'
|
||||
|
||||
prismjs@1.29.0:
|
||||
resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
|
||||
engines: {node: '>=6'}
|
||||
@ -6162,6 +6189,12 @@ packages:
|
||||
tailwind-merge@3.3.1:
|
||||
resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
|
||||
|
||||
tailwind-scrollbar@4.0.2:
|
||||
resolution: {integrity: sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
peerDependencies:
|
||||
tailwindcss: 4.x
|
||||
|
||||
tailwindcss@4.1.10:
|
||||
resolution: {integrity: sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==}
|
||||
|
||||
@ -7216,6 +7249,13 @@ snapshots:
|
||||
'@csstools/css-tokenizer@3.0.4':
|
||||
optional: true
|
||||
|
||||
'@datasert/cronjs-matcher@1.4.0':
|
||||
dependencies:
|
||||
'@datasert/cronjs-parser': 1.4.0
|
||||
luxon: 3.6.1
|
||||
|
||||
'@datasert/cronjs-parser@1.4.0': {}
|
||||
|
||||
'@date-fns/tz@1.2.0': {}
|
||||
|
||||
'@emnapi/runtime@1.4.3':
|
||||
@ -9812,6 +9852,8 @@ snapshots:
|
||||
dependencies:
|
||||
undici-types: 7.8.0
|
||||
|
||||
'@types/prismjs@1.26.5': {}
|
||||
|
||||
'@types/react-dom@19.1.6(@types/react@19.0.1)':
|
||||
dependencies:
|
||||
'@types/react': 19.0.1
|
||||
@ -10219,7 +10261,7 @@ snapshots:
|
||||
|
||||
browserslist@4.25.0:
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001721
|
||||
caniuse-lite: 1.0.30001726
|
||||
electron-to-chromium: 1.5.165
|
||||
node-releases: 2.0.19
|
||||
update-browserslist-db: 1.1.3(browserslist@4.25.0)
|
||||
@ -10282,8 +10324,7 @@ snapshots:
|
||||
|
||||
caniuse-lite@1.0.30001721: {}
|
||||
|
||||
caniuse-lite@1.0.30001726:
|
||||
optional: true
|
||||
caniuse-lite@1.0.30001726: {}
|
||||
|
||||
capital-case@1.0.4:
|
||||
dependencies:
|
||||
@ -11892,6 +11933,8 @@ snapshots:
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
|
||||
luxon@3.6.1: {}
|
||||
|
||||
magic-string@0.30.17:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.0
|
||||
@ -12317,6 +12360,12 @@ snapshots:
|
||||
|
||||
prettier@3.5.3: {}
|
||||
|
||||
prism-react-renderer@2.4.1(react@19.1.0):
|
||||
dependencies:
|
||||
'@types/prismjs': 1.26.5
|
||||
clsx: 2.1.1
|
||||
react: 19.1.0
|
||||
|
||||
prismjs@1.29.0: {}
|
||||
|
||||
prismjs@1.30.0: {}
|
||||
@ -13154,6 +13203,13 @@ snapshots:
|
||||
|
||||
tailwind-merge@3.3.1: {}
|
||||
|
||||
tailwind-scrollbar@4.0.2(react@19.1.0)(tailwindcss@4.1.10):
|
||||
dependencies:
|
||||
prism-react-renderer: 2.4.1(react@19.1.0)
|
||||
tailwindcss: 4.1.10
|
||||
transitivePeerDependencies:
|
||||
- react
|
||||
|
||||
tailwindcss@4.1.10: {}
|
||||
|
||||
tapable@2.2.2: {}
|
||||
|
||||
@ -19,8 +19,9 @@
|
||||
"target": "ES2020",
|
||||
"strictNullChecks": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
// controlled by biome
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"useDefineForClassFields": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
{
|
||||
"path": "./apps/webui"
|
||||
},
|
||||
|
||||
{
|
||||
"path": "./packages/email"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user