Browse Source

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

* [Feature][UI Next] Fix tslint bugs

* [Feature][UI Next] Workflow save modal

* [Feature][UI Next] Format code
3.0.0/version-upgrade
wangyizhi 3 years ago committed by GitHub
parent
commit
71eeb9c879
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 11
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  2. 11
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  3. 4
      dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
  4. 152
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx
  5. 20
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
  6. 17
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
  7. 7
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts
  8. 4
      dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
  9. 1
      dolphinscheduler-ui-next/tsconfig.json

11
dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@ -496,7 +496,16 @@ const project = {
dagre_layout: 'Dagre', dagre_layout: 'Dagre',
rows: 'Rows', rows: 'Rows',
cols: 'Cols', 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: { node: {
current_node_settings: 'Current node settings', current_node_settings: 'Current node settings',

11
dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@ -495,7 +495,16 @@ const project = {
dagre_layout: '层次布局', dagre_layout: '层次布局',
rows: '行数', rows: '行数',
cols: '列数', cols: '列数',
copy_success: '复制成功' copy_success: '复制成功',
workflow_name: '工作流名称',
description: '描述',
tenant: '租户',
timeout_alert: '超时告警',
global_variables: '全局变量',
basic_info: '基本信息',
minute: '分',
key: '键',
value: '值'
}, },
node: { node: {
current_node_settings: '当前节点设置', current_node_settings: '当前节点设置',

4
dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx

@ -29,7 +29,7 @@ import {
import { SearchOutlined } from '@vicons/antd' import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useTable } from './use-table' 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 Card from '@/components/card'
import VersionModal from './components/version-modal' import VersionModal from './components/version-modal'
import MoveModal from './components/move-modal' import MoveModal from './components/move-modal'
@ -113,7 +113,7 @@ const TaskDefinition = defineComponent({
<NSelect <NSelect
v-model={[this.taskType, 'value']} v-model={[this.taskType, 'value']}
size='small' size='small'
options={Object.keys(ALL_TASK_TYPES).map((item) => { options={Object.keys(TASK_TYPES_MAP).map((item) => {
return { value: item, label: item } return { value: item, label: item }
})} })}
placeholder={t('project.task.task_type')} placeholder={t('project.task.task_type')}

152
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>
)
}
})

20
dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx

@ -15,19 +15,10 @@
* limitations under the License. * limitations under the License.
*/ */
import { import { defineComponent, ref, inject, PropType } from 'vue'
defineComponent,
ref,
inject,
PropType,
onMounted,
watch,
computed
} from 'vue'
import type { Ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Styles from './dag.module.scss' import Styles from './dag.module.scss'
import { NTooltip, NIcon, NButton, NSelect, useMessage } from 'naive-ui' import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui'
import { import {
SearchOutlined, SearchOutlined,
DownloadOutlined, DownloadOutlined,
@ -37,7 +28,7 @@ import {
FormatPainterOutlined, FormatPainterOutlined,
CopyOutlined CopyOutlined
} from '@vicons/antd' } from '@vicons/antd'
import { useNodeSearch, useTextCopy, useCellQuery } from './dag-hooks' import { useNodeSearch, useTextCopy } from './dag-hooks'
import { DataUri } from '@antv/x6' import { DataUri } from '@antv/x6'
import { useFullscreen } from '@vueuse/core' import { useFullscreen } from '@vueuse/core'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
@ -59,7 +50,7 @@ const props = {
export default defineComponent({ export default defineComponent({
name: 'workflow-dag-toolbar', name: 'workflow-dag-toolbar',
props, props,
emits: ['versionToggle'], emits: ['versionToggle', 'saveModelToggle'],
setup(props, context) { setup(props, context) {
const { t } = useI18n() const { t } = useI18n()
@ -302,6 +293,9 @@ export default defineComponent({
type='info' type='info'
secondary secondary
round round
onClick={() => {
context.emit('saveModelToggle', true)
}}
> >
{t('project.dag.save')} {t('project.dag.save')}
</NButton> </NButton>

17
dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@ -30,6 +30,7 @@ import {
import { useThemeStore } from '@/store/theme/theme' import { useThemeStore } from '@/store/theme/theme'
import VersionModal from '../../definition/components/version-modal' import VersionModal from '../../definition/components/version-modal'
import { WorkflowDefinition } from './types' import { WorkflowDefinition } from './types'
import DagSaveModal from './dag-save-modal'
import './x6-style.scss' import './x6-style.scss'
const props = { const props = {
@ -89,6 +90,20 @@ export default defineComponent({
versionModalShow.value = false 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 () => ( return () => (
<div <div
class={[ class={[
@ -100,6 +115,7 @@ export default defineComponent({
layoutToggle={layoutToggle} layoutToggle={layoutToggle}
definition={props.definition} definition={props.definition}
onVersionToggle={versionToggle} onVersionToggle={versionToggle}
onSaveModelToggle={saveModelToggle}
/> />
<div class={Styles.content}> <div class={Styles.content}>
<DagSidebar onDragStart={onDragStart} /> <DagSidebar onDragStart={onDragStart} />
@ -119,6 +135,7 @@ export default defineComponent({
onUpdateList={refreshDetail} onUpdateList={refreshDetail}
/> />
)} )}
<DagSaveModal v-model:show={saveModalShow.value} onSave={onSave} />
</div> </div>
) )
} }

7
dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts

@ -18,7 +18,6 @@
import { ref } from 'vue' import { ref } from 'vue'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import type { Graph } from '@antv/x6' import type { Graph } from '@antv/x6'
import type { Dragged } from '.'
import { genTaskCodeList } from '@/service/modules/task-definition' import { genTaskCodeList } from '@/service/modules/task-definition'
import { useCellUpdate } from './dag-hooks' import { useCellUpdate } from './dag-hooks'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
@ -28,6 +27,12 @@ interface Options {
graph: Ref<Graph | undefined> graph: Ref<Graph | undefined>
} }
interface Dragged {
x: number
y: number
type: string
}
/** /**
* Sidebar item drag && drop in canvas * Sidebar item drag && drop in canvas
*/ */

4
dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx

@ -67,7 +67,7 @@ export default defineComponent({
<Card title={t('resource.file.file_details')}> <Card title={t('resource.file.file_details')}>
<div class={styles['file-edit-content']}> <div class={styles['file-edit-content']}>
<h2> <h2>
<span>{this.resourceViewRef?.value.alias}</span> <span>{this.resourceViewRef.value?.alias}</span>
</h2> </h2>
<NForm <NForm
rules={this.rules} rules={this.rules}
@ -82,7 +82,7 @@ export default defineComponent({
}} }}
> >
<MonacoEditor <MonacoEditor
v-model={[this.resourceViewRef?.value.content, 'value']} v-model={[this.resourceViewRef.value?.content, 'value']}
/> />
</div> </div>
</NFormItem> </NFormItem>

1
dolphinscheduler-ui-next/tsconfig.json

@ -13,6 +13,7 @@
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]
}, },
"skipLibCheck": true,
"types": ["vite/client"], "types": ["vite/client"],
"plugins": [{ "name": "typescript-plugin-css-modules" }] "plugins": [{ "name": "typescript-plugin-css-modules" }]
}, },

Loading…
Cancel
Save