natas_hw
/
dolphinscheduler0701
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[3.0.1-preapre][cherry-pick]3.0.1 UI (#12020)

This commit is contained in:
Kerwin 2022-09-19 09:47:54 +08:00 committed by GitHub
parent b709cd9a12
commit 3b947cebc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 169 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
dolphinscheduler-ui/src/components/crontab/common.ts
View File

@ -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 }

19
dolphinscheduler-ui/src/components/crontab/index.tsx
View File

@ -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>

17
dolphinscheduler-ui/src/components/crontab/modules/day.tsx
View File

@ -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}

70
dolphinscheduler-ui/src/components/crontab/modules/time.tsx
View File

@ -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}
/>

9
dolphinscheduler-ui/src/components/crontab/types.ts
View File

@ -27,4 +27,11 @@ interface ICrontabI18n {
time: string
}
export { ICrontabI18n }
interface ISpecialSelect {
[key: number | string]: {
label: string
value: string
}[]
}
export { ICrontabI18n, ISpecialSelect }

1
dolphinscheduler-ui/src/locales/en_US/project.ts
View File

@ -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',

1
dolphinscheduler-ui/src/locales/zh_CN/project.ts
View File

@ -43,6 +43,7 @@ export default {
create_workflow: '创建工作流',
import_workflow: '导入工作流',
workflow_name: '工作流名称',
workflow_instance_name: '工作流实例名称',
current_selection: '当前选择',
online: '已上线',
offline: '已下线',

4
dolphinscheduler-ui/src/views/datasource/list/detail.tsx
View File

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

3
dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-sql.ts
View File

@ -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),

20
dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx
View File

@ -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}

7
dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-startup-param.tsx
View File

@ -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 '-'
})

1
dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
View File

@ -362,6 +362,7 @@ export default defineComponent({
onCancel={taskCancel}
/>
<ContextMenuItem
startButtonDisplay={!props.instance}
startReadonly={startReadonly.value}
menuReadonly={menuReadonly.value}
taskInstance={taskInstance.value}

23
dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx
View File

@ -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'

2
dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
View File

@ -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',