From 3b947cebc71fac613c775dbbbb95e7939af91629 Mon Sep 17 00:00:00 2001
From: Kerwin <37063904+zhuangchong@users.noreply.github.com>
Date: Mon, 19 Sep 2022 09:47:54 +0800
Subject: [PATCH] [3.0.1-preapre][cherry-pick]3.0.1 UI (#12020)

---
 .../src/components/crontab/common.ts          | 39 ++++++++++-
 .../src/components/crontab/index.tsx          | 19 +++++
 .../src/components/crontab/modules/day.tsx    | 17 ++---
 .../src/components/crontab/modules/time.tsx   | 70 +++++++++++++------
 .../src/components/crontab/types.ts           |  9 ++-
 .../src/locales/en_US/project.ts              |  1 +
 .../src/locales/zh_CN/project.ts              |  1 +
 .../src/views/datasource/list/detail.tsx      |  4 +-
 .../task/components/node/fields/use-sql.ts    |  3 +
 .../components/dag/dag-context-menu.tsx       | 20 ++++--
 .../components/dag/dag-startup-param.tsx      |  7 +-
 .../workflow/components/dag/index.tsx         |  1 +
 .../definition/components/start-modal.tsx     | 23 +++++-
 .../projects/workflow/instance/use-table.ts   |  2 +-
 14 files changed, 169 insertions(+), 47 deletions(-)

diff --git a/dolphinscheduler-ui/src/components/crontab/common.ts b/dolphinscheduler-ui/src/components/crontab/common.ts
index 5069801d5d..af4168f1ae 100644
--- a/dolphinscheduler-ui/src/components/crontab/common.ts
+++ b/dolphinscheduler-ui/src/components/crontab/common.ts
@@ -16,6 +16,7 @@
  */
 
 import _ from 'lodash'
+import type { ISpecialSelect } from './types'
 
 const timeI18n = {
   second: {
@@ -190,4 +191,40 @@ const isWeek = (str: string) => {
   return flag
 }
 
-export { isStr, isWeek, timeI18n, week, specificWeek, lastWeeks }
+const range = (start: number, stop: number, step = 1) =>
+  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
+
+const specificList: ISpecialSelect = {
+  60: _.map(range(0, 59), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  24: _.map(range(0, 23), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  12: _.map(range(1, 12), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  year: _.map(range(2018, 2030), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  day: _.map(range(1, 31), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  })
+}
+
+export { isStr, isWeek, timeI18n, week, specificWeek, lastWeeks, specificList }
diff --git a/dolphinscheduler-ui/src/components/crontab/index.tsx b/dolphinscheduler-ui/src/components/crontab/index.tsx
index d74623f841..c0bc835f70 100644
--- a/dolphinscheduler-ui/src/components/crontab/index.tsx
+++ b/dolphinscheduler-ui/src/components/crontab/index.tsx
@@ -93,18 +93,27 @@ export default defineComponent({
           <CrontabTime
             v-model:timeValue={this.secondRef}
             timeI18n={timeI18n.second}
+            timeSpecial={60}
+            timeMin={0}
+            timeMax={59}
           />
         </NTabPane>
         <NTabPane name='minute' tab={t('crontab.minute')}>
           <CrontabTime
             v-model:timeValue={this.minuteRef}
             timeI18n={timeI18n.minute}
+            timeSpecial={60}
+            timeMin={0}
+            timeMax={59}
           />
         </NTabPane>
         <NTabPane name='hour' tab={t('crontab.hour')}>
           <CrontabTime
             v-model:timeValue={this.hourRef}
             timeI18n={timeI18n.hour}
+            timeSpecial={24}
+            timeMin={0}
+            timeMax={23}
           />
         </NTabPane>
         <NTabPane name='day' tab={t('crontab.day')}>
@@ -117,12 +126,22 @@ export default defineComponent({
           <CrontabTime
             v-model:timeValue={this.monthRef}
             timeI18n={timeI18n.month}
+            timeSpecial={12}
+            timeMin={0}
+            timeMax={12}
           />
         </NTabPane>
         <NTabPane name='year' tab={t('crontab.year')}>
           <CrontabTime
             v-model:timeValue={this.yearRef}
             timeI18n={timeI18n.year}
+            timeSpecial={'year'}
+            timeMin={0}
+            timeMax={2030}
+            intervalPerform={1}
+            intervalStart={2019}
+            cycleStart={2019}
+            cycleEnd={2019}
           />
         </NTabPane>
       </NTabs>
diff --git a/dolphinscheduler-ui/src/components/crontab/modules/day.tsx b/dolphinscheduler-ui/src/components/crontab/modules/day.tsx
index 9c67ff9db3..201e9b777a 100644
--- a/dolphinscheduler-ui/src/components/crontab/modules/day.tsx
+++ b/dolphinscheduler-ui/src/components/crontab/modules/day.tsx
@@ -18,7 +18,14 @@
 import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
 import { NInputNumber, NRadio, NRadioGroup, NSelect } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
-import { isStr, isWeek, week, specificWeek, lastWeeks } from '../common'
+import {
+  isStr,
+  isWeek,
+  week,
+  specificWeek,
+  lastWeeks,
+  specificList
+} from '../common'
 import styles from '../index.module.scss'
 
 const props = {
@@ -39,11 +46,6 @@ export default defineComponent({
   setup(props, ctx) {
     const { t } = useI18n()
 
-    const options = Array.from({ length: 60 }, (x, i) => ({
-      label: i.toString(),
-      value: i
-    }))
-
     const weekOptions = week.map((v) => ({
       label: t(v.label),
       value: v.value
@@ -430,7 +432,6 @@ export default defineComponent({
     onMounted(() => analyticalValue())
 
     return {
-      options,
       weekOptions,
       lastWeekOptions,
       radioRef,
@@ -551,7 +552,7 @@ export default defineComponent({
               <NSelect
                 style={{ width: '300px' }}
                 multiple
-                options={this.options}
+                options={specificList.day}
                 placeholder={t('crontab.specific_day_tip')}
                 v-model:value={this.WkspecificDayRef}
                 onUpdateValue={this.onWkspecificDay}
diff --git a/dolphinscheduler-ui/src/components/crontab/modules/time.tsx b/dolphinscheduler-ui/src/components/crontab/modules/time.tsx
index 1f53ccb793..e2a7f30bb3 100644
--- a/dolphinscheduler-ui/src/components/crontab/modules/time.tsx
+++ b/dolphinscheduler-ui/src/components/crontab/modules/time.tsx
@@ -20,10 +20,38 @@ import { defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue'
 import { NInputNumber, NRadio, NRadioGroup, NSelect } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { ICrontabI18n } from '../types'
-import { isStr } from '../common'
+import { isStr, specificList } from '../common'
 import styles from '../index.module.scss'
 
 const props = {
+  timeMin: {
+    type: Number as PropType<number>,
+    default: 0
+  },
+  timeMax: {
+    type: Number as PropType<number>,
+    default: 60
+  },
+  intervalPerform: {
+    type: Number as PropType<number>,
+    default: 5
+  },
+  intervalStart: {
+    type: Number as PropType<number>,
+    default: 3
+  },
+  cycleStart: {
+    type: Number as PropType<number>,
+    default: 1
+  },
+  cycleEnd: {
+    type: Number as PropType<number>,
+    default: 1
+  },
+  timeSpecial: {
+    type: Number as PropType<number | string>,
+    default: 60
+  },
   timeValue: {
     type: String as PropType<string>,
     default: '*'
@@ -46,11 +74,11 @@ export default defineComponent({
 
     const timeRef = ref()
     const radioRef = ref()
-    const intervalStartRef = ref(0)
-    const intervalPerformRef = ref(0)
+    const intervalStartRef = ref(props.intervalStart)
+    const intervalPerformRef = ref(props.intervalPerform)
     const specificTimesRef = ref<Array<number>>([])
-    const cycleStartRef = ref(0)
-    const cycleEndRef = ref(0)
+    const cycleStartRef = ref(props.cycleStart)
+    const cycleEndRef = ref(props.cycleEnd)
 
     /**
      * Parse parameter value
@@ -73,8 +101,10 @@ export default defineComponent({
 
       // Positive integer (times)
       if (
-        ($timeVal.length === 1 && _.isInteger(parseInt($timeVal))) ||
-        ($timeVal.length === 2 && _.isInteger(parseInt($timeVal)))
+        ($timeVal.length === 1 ||
+          $timeVal.length === 2 ||
+          $timeVal.length === 4) &&
+        _.isInteger(parseInt($timeVal))
       ) {
         radioRef.value = 'specificTime'
         specificTimesRef.value = [parseInt($timeVal)]
@@ -232,9 +262,9 @@ export default defineComponent({
             <div class={styles['item-text']}>{t(this.timeI18n!.every)}</div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={5}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.intervalPerformRef}
                 onUpdateValue={this.onIntervalPerform}
               />
@@ -244,9 +274,9 @@ export default defineComponent({
             </div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={3}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.intervalStartRef}
                 onUpdateValue={this.onIntervalStart}
               />
@@ -261,7 +291,7 @@ export default defineComponent({
             <div class={styles['select-input']}>
               <NSelect
                 multiple
-                options={this.options}
+                options={specificList[this.timeSpecial]}
                 placeholder={t(this.timeI18n!.specificTimeTip)}
                 v-model:value={this.specificTimesRef}
                 onUpdateValue={this.onSpecificTimes}
@@ -275,9 +305,9 @@ export default defineComponent({
             <div>{t(this.timeI18n!.cycleFrom)}</div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={1}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.cycleStartRef}
                 onUpdateValue={this.onCycleStart}
               />
@@ -285,9 +315,9 @@ export default defineComponent({
             <div>{t(this.timeI18n!.to)}</div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={1}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.cycleEndRef}
                 onUpdateValue={this.onCycleEnd}
               />
diff --git a/dolphinscheduler-ui/src/components/crontab/types.ts b/dolphinscheduler-ui/src/components/crontab/types.ts
index 77d28676d5..99177ceadd 100644
--- a/dolphinscheduler-ui/src/components/crontab/types.ts
+++ b/dolphinscheduler-ui/src/components/crontab/types.ts
@@ -27,4 +27,11 @@ interface ICrontabI18n {
   time: string
 }
 
-export { ICrontabI18n }
+interface ISpecialSelect {
+  [key: number | string]: {
+    label: string
+    value: string
+  }[]
+}
+
+export { ICrontabI18n, ISpecialSelect }
diff --git a/dolphinscheduler-ui/src/locales/en_US/project.ts b/dolphinscheduler-ui/src/locales/en_US/project.ts
index 7d5068d081..7b1b58d87b 100644
--- a/dolphinscheduler-ui/src/locales/en_US/project.ts
+++ b/dolphinscheduler-ui/src/locales/en_US/project.ts
@@ -43,6 +43,7 @@ export default {
     create_workflow: 'Create Workflow',
     import_workflow: 'Import Workflow',
     workflow_name: 'Workflow Name',
+    workflow_instance_name: 'Workflow Instance Name',
     current_selection: 'Current Selection',
     online: 'Online',
     offline: 'Offline',
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/project.ts b/dolphinscheduler-ui/src/locales/zh_CN/project.ts
index ae2d4c80d4..9b8b42d0a6 100644
--- a/dolphinscheduler-ui/src/locales/zh_CN/project.ts
+++ b/dolphinscheduler-ui/src/locales/zh_CN/project.ts
@@ -43,6 +43,7 @@ export default {
     create_workflow: '创建工作流',
     import_workflow: '导入工作流',
     workflow_name: '工作流名称',
+    workflow_instance_name: '工作流实例名称',
     current_selection: '当前选择',
     online: '已上线',
     offline: '已下线',
diff --git a/dolphinscheduler-ui/src/views/datasource/list/detail.tsx b/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
index cd521e3e54..68b793c7ed 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
+++ b/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
@@ -87,13 +87,13 @@ const DetailModal = defineComponent({
     watch(
       () => props.show,
       async () => {
-        props.show && props.id && setFieldsValue(await queryById(props.id))
         props.show &&
           state.detailForm.type &&
-          changeType(
+          await changeType(
             state.detailForm.type,
             datasourceType[state.detailForm.type]
           )
+        props.show && props.id && setFieldsValue(await queryById(props.id))
       }
     )
 
diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-sql.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-sql.ts
index 602f3d6790..46e489d40e 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-sql.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-sql.ts
@@ -43,6 +43,9 @@ export function useSql(model: { [field: string]: any }): IJsonItem[] {
         trigger: ['input', 'trigger'],
         required: true,
         message: t('project.node.sql_empty_tips')
+      },
+      props: {
+        language: 'sql'
       }
     },
     useUdfs(model),
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx
index 74b8317b88..87161c3d27 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx
@@ -26,6 +26,10 @@ import { IWorkflowTaskInstance } from './types'
 import { NButton } from 'naive-ui'
 
 const props = {
+  startButtonDisplay: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
   startReadonly: {
     type: Boolean as PropType<boolean>,
     default: false
@@ -127,13 +131,15 @@ export default defineComponent({
           class={styles['dag-context-menu']}
           style={{ left: `${this.left}px`, top: `${this.top}px` }}
         >
-          <NButton
-            class={`${styles['menu-item']}`}
-            disabled={this.startReadonly}
-            onClick={this.startRunning}
-          >
-            {t('project.node.start')}
-          </NButton>
+          {this.startButtonDisplay && (
+            <NButton
+              class={`${styles['menu-item']}`}
+              disabled={this.startReadonly}
+              onClick={this.startRunning}
+            >
+              {t('project.node.start')}
+            </NButton>)
+          }
           <NButton
             class={`${styles['menu-item']}`}
             disabled={this.menuReadonly}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-startup-param.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-startup-param.tsx
index 56195ec01e..5b3102c6f0 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-startup-param.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-startup-param.tsx
@@ -43,10 +43,7 @@ export default defineComponent({
 
     const getAlertGroupList = () => {
       listAlertGroupById().then((res: any) => {
-        alertGroupListRef.value = res.map((item: any) => ({
-          label: item.groupName,
-          value: item.id
-        }))
+        alertGroupListRef.value = res
       })
     }
 
@@ -83,7 +80,7 @@ export default defineComponent({
 
       const o = _.filter(alertGroupListRef.value, (v) => v.id === id)
       if (o && o.length) {
-        return o[0].code
+        return o[0].groupName
       }
       return '-'
     })
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
index fcb49bbe8f..3e167bd81e 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
@@ -362,6 +362,7 @@ export default defineComponent({
           onCancel={taskCancel}
         />
         <ContextMenuItem
+          startButtonDisplay={!props.instance}
           startReadonly={startReadonly.value}
           menuReadonly={menuReadonly.value}
           taskInstance={taskInstance.value}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx
index 85914a5f79..59c24b7385 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx
@@ -22,9 +22,11 @@ import {
   h,
   onMounted,
   ref,
-  watch
+  watch,
+  computed
 } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from "vue-router"
 import Modal from '@/components/modal'
 import { useForm } from './use-form'
 import { useModal } from './use-modal'
@@ -72,6 +74,7 @@ export default defineComponent({
   setup(props, ctx) {
     const parallelismRef = ref(false)
     const { t } = useI18n()
+    const route = useRoute()
     const { startState } = useForm()
     const {
       variables,
@@ -142,6 +145,8 @@ export default defineComponent({
       }
     ]
 
+    const showTaskDependType = computed(() => route.name === 'workflow-definition-detail')
+
     const renderLabel = (option: any) => {
       return [
         h(
@@ -201,6 +206,7 @@ export default defineComponent({
 
     return {
       t,
+      showTaskDependType,
       parallelismRef,
       hideModal,
       handleStart,
@@ -219,7 +225,6 @@ export default defineComponent({
 
   render() {
     const { t } = this
-
     return (
       <Modal
         show={this.show}
@@ -250,6 +255,20 @@ export default defineComponent({
               </NSpace>
             </NRadioGroup>
           </NFormItem>
+          {this.showTaskDependType && (
+            <NFormItem
+              label={t('project.workflow.node_execution')}
+              path='taskDependType'
+            >
+              <NRadioGroup v-model:value={this.startForm.taskDependType}>
+                <NSpace>
+                  <NRadio value='TASK_POST'>{t('project.workflow.backward_execution')}</NRadio>
+                  <NRadio value='TASK_PRE'>{t('project.workflow.forward_execution')}</NRadio>
+                  <NRadio value='TASK_ONLY'>{t('project.workflow.current_node_execution')}</NRadio>
+                </NSpace>
+              </NRadioGroup>
+            </NFormItem>)
+          }
           <NFormItem
             label={t('project.workflow.notification_strategy')}
             path='warningType'
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
index 1339113d98..2ac774716d 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
@@ -78,7 +78,7 @@ export function useTable() {
         render: (rowData: any, rowIndex: number) => rowIndex + 1
       },
       {
-        title: t('project.workflow.workflow_name'),
+        title: t('project.workflow.workflow_instance_name'),
         key: 'name',
         ...COLUMN_WIDTH_CONFIG['linkName'],
         className: 'workflow-name',