feat: add cron validation and next run time features to scheduled tasks

Author: Ayideyia

frontend/src/lang/locale/en.ts

@@ -549,6 +549,7 @@ export default {
     empty: 'The scheduled task list is empty. Please{action}a scheduled task first.',
     run: 'Run now',
     log: 'View log',
+    next: 'Next Run Time',
   },
   settings: {
     personalization: 'Personalization',

frontend/src/lang/locale/zh.ts

@@ -548,6 +548,7 @@ export default {
     empty: '计划任务列表为空，请先{action}计划任务。',
     run: '立即运行',
     log: '查看日志',
+    next: '下次运行时间',
   },
   settings: {
     personalization: '个性化',

frontend/src/utils/is.ts

@@ -1,3 +1,4 @@
+import { Cron } from 'croner'
 import { parse } from 'yaml'
 
 export const isValidBase64 = (str: string) => {
@@ -69,3 +70,12 @@ export const isValidJson = (str: string) => {
 }
 
 export const isNumber = (v: any) => typeof v === 'number'
+
+export const isValidCron = (pattern: string) => {
+  try {
+    const instance = new Cron(pattern, { paused: true })
+    return { ok: true, reason: null, instance: instance }
+  } catch (error: any) {
+    return { ok: false, reason: error.message || error, instance: null }
+  }
+}

frontend/src/views/ScheduledTasksView/components/ScheduledTaskForm.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Cron } from 'croner'
 import { ref, inject, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -11,7 +10,7 @@ import {
   useRulesetsStore,
   usePluginsStore,
 } from '@/stores'
-import { deepClone, message, sampleID } from '@/utils'
+import { alert, deepClone, formatDate, isValidCron, message, sampleID } from '@/utils'
 
 import Button from '@/components/Button/index.vue'
 
@@ -46,18 +45,15 @@ const rulesetsStore = useRulesetsStore()
 const pluginsStore = usePluginsStore()
 
 const handleCancel = inject('cancel') as any
+const handleSubmit = inject('submit') as any
 
-const handleSubmit = async () => {
-  try {
-    const job = new Cron(task.value.cron, () => {})
-    job.stop()
-  } catch (error: any) {
-    message.error(error.message)
+const handleSave = async () => {
+  const { ok, reason } = isValidCron(task.value.cron)
+  if (!ok) {
+    message.error(reason)
     return
   }
 
-  loading.value = true
-
   switch (task.value.type) {
     case ScheduledTasksType.UpdateSubscription:
       task.value.subscriptions = task.value.subscriptions.filter((id) =>
@@ -73,13 +69,15 @@ const handleSubmit = async () => {
       break
   }
 
+  loading.value = true
+
   try {
     if (props.id) {
       await scheduledTasksStore.editScheduledTask(props.id, task.value)
     } else {
       await scheduledTasksStore.addScheduledTask(task.value)
     }
-    handleCancel()
+    await handleSubmit()
   } catch (error: any) {
     console.error(error)
     message.error(error)
@@ -97,6 +95,28 @@ const handleUse = (list: string[], id: string) => {
   }
 }
 
+const handleValidate = () => {
+  const { ok, reason } = isValidCron(task.value.cron)
+  if (!ok) {
+    message.error(reason)
+    return
+  }
+  message.success('common.success')
+}
+
+const handleViewNextRuns = () => {
+  const { ok, reason, instance } = isValidCron(task.value.cron)
+  if (!ok) {
+    message.error(reason)
+    return
+  }
+  const list = instance!.nextRuns(99).map((v, i) => {
+    const index = (i + 1).toString().padStart(2, '0')
+    return index + ' - '.repeat(14) + formatDate(v.getTime(), 'YYYY/MM/DD HH:mm:ss')
+  })
+  alert('Next Run Time', list.join('\n'))
+}
+
 if (props.id) {
   const s = scheduledTasksStore.getScheduledTaskById(props.id)
   if (s) {
@@ -121,7 +141,7 @@ const modalSlots = {
         type: 'primary',
         loading: loading.value,
         disabled: !task.value.name || !task.value.cron,
-        onClick: handleSubmit,
+        onClick: handleSave,
       },
       () => t('common.save'),
     ),
@@ -141,7 +161,14 @@ defineExpose({ modalSlots })
     <div class="form-item">
       {{ t('scheduledtask.cron') }} *
       <div class="min-w-[75%]">
-        <Input v-model="task.cron" :placeholder="t('scheduledtask.cronTips')" class="w-full" />
+        <Input v-model="task.cron" :placeholder="t('scheduledtask.cronTips')" class="w-full">
+          <template #suffix>
+            <Button @click="handleValidate" type="primary" size="small">Validate</Button>
+            <Button @click="handleViewNextRuns" type="primary" size="small" class="ml-4">
+              Next Run Time
+            </Button>
+          </template>
+        </Input>
       </div>
     </div>
     <div class="form-item">

frontend/src/views/ScheduledTasksView/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { Cron } from 'croner'
 import { useI18n, I18nT } from 'vue-i18n'
 
-import { DraggableOptions } from '@/constant'
+import { DraggableOptions, ViewOptions } from '@/constant'
 import { View } from '@/enums/app'
 import { useAppSettingsStore, useScheduledTasksStore } from '@/stores'
-import { debounce, formatRelativeTime, formatDate, message } from '@/utils'
+import { debounce, formatRelativeTime, formatDate, message, alert } from '@/utils'
 
 import { useModal } from '@/components/Modal'
 
@@ -20,6 +21,19 @@ const menuList: Menu[] = [
       scheduledTasksStore.runScheduledTask(id)
     },
   },
+  {
+    label: 'scheduledtasks.next',
+    handler: (id: string) => {
+      const task = scheduledTasksStore.getScheduledTaskById(id)
+      if (task) {
+        const list = new Cron(task.cron).nextRuns(99).map((v, i) => {
+          const index = (i + 1).toString().padStart(2, '0')
+          return index + ' - '.repeat(14) + formatDate(v.getTime(), 'YYYY/MM/DD HH:mm:ss')
+        })
+        alert('Next Run Time', list.join('\n'))
+      }
+    },
+  },
   {
     label: 'scheduledtasks.log',
     handler: (id: string) => {
@@ -93,12 +107,10 @@ const onSortUpdate = debounce(scheduledTasksStore.saveScheduledTasks, 1000)
   <div v-else class="grid-list-header">
     <Radio
       v-model="appSettingsStore.app.scheduledtasksView"
-      :options="[
-        { label: 'common.grid', value: View.Grid },
-        { label: 'common.list', value: View.List },
-      ]"
+      :options="ViewOptions"
+      class="mr-auto"
     />
-    <Button @click="handleShowTaskLogs()" type="text" class="ml-auto">
+    <Button @click="handleShowTaskLogs()" type="text">
       {{ t('scheduledtasks.logs') }}
     </Button>
     <Button @click="handleShowTaskForm()" type="primary" icon="add" class="ml-16">