This is an automated email from the ASF dual-hosted git repository.
caishunfeng pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 71eeb9c [Feature][UI Next] Workflow save modal (#8341)
71eeb9c is described below
commit 71eeb9c8790c4bbf909c929957e5b92a97a3ed48
Author: wangyizhi <[email protected]>
AuthorDate: Fri Feb 11 09:16:05 2022 +0800
[Feature][UI Next] Workflow save modal (#8341)
* [Feature][UI Next] Fix tslint bugs
* [Feature][UI Next] Workflow save modal
* [Feature][UI Next] Format code
---
.../src/locales/modules/en_US.ts | 11 +-
.../src/locales/modules/zh_CN.ts | 11 +-
.../src/views/projects/task/definition/index.tsx | 4 +-
.../workflow/components/dag/dag-save-modal.tsx | 152 +++++++++++++++++++++
.../workflow/components/dag/dag-toolbar.tsx | 20 +--
.../projects/workflow/components/dag/index.tsx | 17 +++
.../workflow/components/dag/use-dag-drag-drop.ts | 7 +-
.../src/views/resource/file/edit/index.tsx | 4 +-
dolphinscheduler-ui-next/tsconfig.json | 1 +
9 files changed, 207 insertions(+), 20 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index ddf0067..06f7509 100644
--- 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',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index e8e42a6..99d7b27 100644
--- 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: '当前节点设置',
diff --git
a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
index cf362e8..5fb96f8 100644
--- 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')}
diff --git
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
new file mode 100644
index 0000000..be4b9ab
--- /dev/null
+++
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>
+ )
+ }
+})
diff --git
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
index 1edcf19..93ed86a 100644
---
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>
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
index 6c54a8c..32ceea1 100644
---
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>
)
}
diff --git
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
index 3aa8811..046c742 100644
---
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
*/
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
b/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
index c6caf23..b5e1f66 100644
--- 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>
diff --git a/dolphinscheduler-ui-next/tsconfig.json
b/dolphinscheduler-ui-next/tsconfig.json
index bc376e7..8806a48 100644
--- 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" }]
},
