[Feature][UI Next] Workflow save modal (#8341)

* [Feature][UI Next] Fix tslint bugs * [Feature][UI Next] Workflow save modal * [Feature][UI Next] Format code
2022-02-11 09:16:05 +08:00 · 2022-02-11 09:16:05 +08:00 · 71eeb9c879
parent 4c5a90987b
commit 71eeb9c879
9 changed files with 207 additions and 20 deletions
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@ -496,7 +496,16 @@ const project = {
    dagre_layout: 'Dagre',
    rows: 'Rows',
    cols: 'Cols',
-    copy_success: 'Copy Success'
+    copy_success: 'Copy Success',
+    workflow_name: 'Workflow Name',
+    description: 'Description',
+    tenant: 'Tenant',
+    timeout_alert: 'Timeout Alert',
+    global_variables: 'Global Variables',
+    basic_info: 'Basic Information',
+    minute: 'Minute',
+    key: 'Key',
+    value: 'Value'
  },
  node: {
    current_node_settings: 'Current node settings',
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@ -495,7 +495,16 @@ const project = {
    dagre_layout: '层次布局',
    rows: '行数',
    cols: '列数',
-    copy_success: '复制成功'
+    copy_success: '复制成功',
+    workflow_name: '工作流名称',
+    description: '描述',
+    tenant: '租户',
+    timeout_alert: '超时告警',
+    global_variables: '全局变量',
+    basic_info: '基本信息',
+    minute: '分',
+    key: '键',
+    value: '值'
  },
  node: {
    current_node_settings: '当前节点设置',
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
@ -29,7 +29,7 @@ import {
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
-import { ALL_TASK_TYPES } from '@/views/projects/task/constants/task-type'
+import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type'
 import Card from '@/components/card'
 import VersionModal from './components/version-modal'
 import MoveModal from './components/move-modal'
@ -113,7 +113,7 @@ const TaskDefinition = defineComponent({
              <NSelect
                v-model={[this.taskType, 'value']}
                size='small'
-                options={Object.keys(ALL_TASK_TYPES).map((item) => {
+                options={Object.keys(TASK_TYPES_MAP).map((item) => {
                  return { value: item, label: item }
                })}
                placeholder={t('project.task.task_type')}
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx
@ -0,0 +1,152 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, PropType, ref, computed, onMounted } from 'vue'
+import Modal from '@/components/modal'
+import { useI18n } from 'vue-i18n'
+import {
+  NForm,
+  NFormItem,
+  NInput,
+  NSelect,
+  NSwitch,
+  NInputNumber,
+  NDynamicInput
+} from 'naive-ui'
+import { queryTenantList } from '@/service/modules/tenants'
+import './x6-style.scss'
+
+const props = {
+  visible: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}
+
+interface Tenant {
+  tenantCode: string
+  id: number
+}
+
+export default defineComponent({
+  name: 'dag-save-modal',
+  props,
+  emits: ['update:show', 'save'],
+  setup(props, context) {
+    const { t } = useI18n()
+
+    const tenants = ref<Tenant[]>([])
+    const tenantsDropdown = computed(() => {
+      if (tenants.value) {
+        return tenants.value
+          .map((t) => ({
+            label: t.tenantCode,
+            value: t.tenantCode
+          }))
+          .concat({ label: 'default', value: 'default' })
+      }
+      return []
+    })
+    onMounted(() => {
+      queryTenantList().then((res: any) => {
+        tenants.value = res
+      })
+    })
+
+    const formValue = ref({
+      name: '',
+      description: '',
+      tenantCode: 'default',
+      timeoutFlag: false,
+      timeout: 0,
+      globalParams: []
+    })
+    const formRef = ref()
+    const rule = {
+      name: {
+        required: true
+      }
+    }
+    const onSubmit = () => {
+      context.emit('save', formValue.value)
+    }
+    const onCancel = () => {
+      context.emit('update:show', false)
+    }
+
+    return () => (
+      <Modal
+        show={props.visible}
+        title={t('project.dag.basic_info')}
+        onConfirm={onSubmit}
+        onCancel={onCancel}
+        autoFocus={false}
+      >
+        <NForm
+          label-width='100'
+          model={formValue.value}
+          rules={rule}
+          size='medium'
+          label-placement='left'
+          ref={formRef}
+        >
+          <NFormItem label={t('project.dag.workflow_name')} path='name'>
+            <NInput v-model:value={formValue.value.name} />
+          </NFormItem>
+          <NFormItem label={t('project.dag.description')} path='description'>
+            <NInput
+              type='textarea'
+              v-model:value={formValue.value.description}
+            />
+          </NFormItem>
+          <NFormItem label={t('project.dag.tenant')} path='tenantCode'>
+            <NSelect
+              options={tenantsDropdown.value}
+              v-model:value={formValue.value.tenantCode}
+            />
+          </NFormItem>
+          <NFormItem label={t('project.dag.timeout_alert')} path='timeoutFlag'>
+            <NSwitch v-model:value={formValue.value.timeoutFlag} />
+          </NFormItem>
+          {formValue.value.timeoutFlag && (
+            <NFormItem label=' ' path='timeout'>
+              <NInputNumber
+                v-model:value={formValue.value.timeout}
+                show-button={false}
+                min={0}
+                v-slots={{
+                  suffix: () => '分'
+                }}
+              ></NInputNumber>
+            </NFormItem>
+          )}
+          <NFormItem
+            label={t('project.dag.global_variables')}
+            path='globalParams'
+          >
+            <NDynamicInput
+              v-model:value={formValue.value.globalParams}
+              preset='pair'
+              key-placeholder={t('project.dag.key')}
+              value-placeholder={t('project.dag.value')}
+            />
+          </NFormItem>
+        </NForm>
+      </Modal>
+    )
+  }
+})
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
@ -15,19 +15,10 @@
 * limitations under the License.
 */

-import {
-  defineComponent,
-  ref,
-  inject,
-  PropType,
-  onMounted,
-  watch,
-  computed
-} from 'vue'
-import type { Ref } from 'vue'
+import { defineComponent, ref, inject, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Styles from './dag.module.scss'
-import { NTooltip, NIcon, NButton, NSelect, useMessage } from 'naive-ui'
+import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui'
 import {
  SearchOutlined,
  DownloadOutlined,
@ -37,7 +28,7 @@ import {
  FormatPainterOutlined,
  CopyOutlined
 } from '@vicons/antd'
-import { useNodeSearch, useTextCopy, useCellQuery } from './dag-hooks'
+import { useNodeSearch, useTextCopy } from './dag-hooks'
 import { DataUri } from '@antv/x6'
 import { useFullscreen } from '@vueuse/core'
 import { useRouter } from 'vue-router'
@ -59,7 +50,7 @@ const props = {
 export default defineComponent({
  name: 'workflow-dag-toolbar',
  props,
-  emits: ['versionToggle'],
+  emits: ['versionToggle', 'saveModelToggle'],
  setup(props, context) {
    const { t } = useI18n()

@ -302,6 +293,9 @@ export default defineComponent({
            type='info'
            secondary
            round
+            onClick={() => {
+              context.emit('saveModelToggle', true)
+            }}
          >
            {t('project.dag.save')}
          </NButton>
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
@ -30,6 +30,7 @@ import {
 import { useThemeStore } from '@/store/theme/theme'
 import VersionModal from '../../definition/components/version-modal'
 import { WorkflowDefinition } from './types'
+import DagSaveModal from './dag-save-modal'
 import './x6-style.scss'

 const props = {
@ -89,6 +90,20 @@ export default defineComponent({
      versionModalShow.value = false
    }

+    // Save modal
+    const saveModalShow = ref(false)
+    const saveModelToggle = (bool: boolean) => {
+      if (typeof bool === 'boolean') {
+        saveModalShow.value = bool
+      } else {
+        saveModalShow.value = !versionModalShow.value
+      }
+    }
+    const onSave = (form: any) => {
+      // TODO
+      console.log(form)
+    }
+
    return () => (
      <div
        class={[
@ -100,6 +115,7 @@ export default defineComponent({
          layoutToggle={layoutToggle}
          definition={props.definition}
          onVersionToggle={versionToggle}
+          onSaveModelToggle={saveModelToggle}
        />
        <div class={Styles.content}>
          <DagSidebar onDragStart={onDragStart} />
@ -119,6 +135,7 @@ export default defineComponent({
            onUpdateList={refreshDetail}
          />
        )}
+        <DagSaveModal v-model:show={saveModalShow.value} onSave={onSave} />
      </div>
    )
  }
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts
@ -18,7 +18,6 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 import type { Graph } from '@antv/x6'
-import type { Dragged } from '.'
 import { genTaskCodeList } from '@/service/modules/task-definition'
 import { useCellUpdate } from './dag-hooks'
 import { useRoute } from 'vue-router'
@ -28,6 +27,12 @@ interface Options {
  graph: Ref<Graph | undefined>
 }

+interface Dragged {
+  x: number
+  y: number
+  type: string
+}
+
 /**
 * Sidebar item drag && drop in canvas
 */
--- a/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
@ -67,7 +67,7 @@ export default defineComponent({
      <Card title={t('resource.file.file_details')}>
        <div class={styles['file-edit-content']}>
          <h2>
-            <span>{this.resourceViewRef?.value.alias}</span>
+            <span>{this.resourceViewRef.value?.alias}</span>
          </h2>
          <NForm
            rules={this.rules}
@ -82,7 +82,7 @@ export default defineComponent({
                }}
              >
                <MonacoEditor
-                  v-model={[this.resourceViewRef?.value.content, 'value']}
+                  v-model={[this.resourceViewRef.value?.content, 'value']}
                />
              </div>
            </NFormItem>
--- a/dolphinscheduler-ui-next/tsconfig.json
+++ b/dolphinscheduler-ui-next/tsconfig.json
@ -13,6 +13,7 @@
    "paths": {
      "@/*": ["src/*"]
    },
+    "skipLibCheck": true,
    "types": ["vite/client"],
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },