From 906353bbaf47b9a76ffa77940474d04b8bf77b26 Mon Sep 17 00:00:00 2001 From: pppppjcc <129030959+pppppjcc@users.noreply.github.com> Date: Mon, 19 Jun 2023 14:28:53 +0800 Subject: [PATCH] feat: dynamic-dag-sidebar-change (#14244) --- .../task/components/node/fields/use-k8s.ts | 19 +- .../node/fields/use-node-selectors.ts | 174 +++++++++--------- .../dynamic-dag/dag-sidebar.module.scss | 41 ++++- .../components/dynamic-dag/dag-sidebar.tsx | 38 +++- 4 files changed, 172 insertions(+), 100 deletions(-) diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts index 9f5d9eb2ae..dd0a4a3d8d 100644 --- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts +++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts @@ -14,7 +14,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { useCustomParams, useNamespace, useCustomLabels, useNodeSelectors } from '.' +import { + useCustomParams, + useNamespace, + useCustomLabels, + useNodeSelectors +} from '.' import type { IJsonItem } from '../types' import { useI18n } from 'vue-i18n' @@ -75,8 +80,16 @@ export function useK8s(model: { [field: string]: any }): IJsonItem[] { placeholder: t('project.node.args_tips') } }, - ...useCustomLabels({ model, field: 'customizedLabels', name: 'custom_labels' }), - ...useNodeSelectors( { model, field: 'nodeSelectors', name: 'node_selectors' }), + ...useCustomLabels({ + model, + field: 'customizedLabels', + name: 'custom_labels' + }), + ...useNodeSelectors({ + model, + field: 'nodeSelectors', + name: 'node_selectors' + }), ...useCustomParams({ model, field: 'localParams', isSimple: true }) ] } diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts index fc79310d89..48ca120127 100644 --- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts +++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts @@ -19,99 +19,99 @@ import { useI18n } from 'vue-i18n' import type { IJsonItem } from '../types' export function useNodeSelectors({ - model, - field, - name, - span = 24 - }: { - model: { [field: string]: any } - field: string - name?: string - span?: Ref | number + model, + field, + name, + span = 24 +}: { + model: { [field: string]: any } + field: string + name?: string + span?: Ref | number }): IJsonItem[] { - const { t } = useI18n() + const { t } = useI18n() - return [ + return [ + { + type: 'custom-parameters', + field: field, + name: t(`project.node.${name}`), + class: 'btn-custom-parameters', + span, + children: [ { - type: 'custom-parameters', - field: field, - name: t(`project.node.${name}`), - class: 'btn-custom-parameters', - span, - children: [ - { - type: 'input', - field: 'key', - span: 8, - class: 'node-selector-label-name', - props: { - placeholder: t('project.node.expression_name_tips'), - maxLength: 256 - }, - validate: { - trigger: ['input', 'blur'], - required: true, - validator(validate: any, value: string) { - if (!value) { - return new Error(t('project.node.expression_name_tips')) - } + type: 'input', + field: 'key', + span: 8, + class: 'node-selector-label-name', + props: { + placeholder: t('project.node.expression_name_tips'), + maxLength: 256 + }, + validate: { + trigger: ['input', 'blur'], + required: true, + validator(validate: any, value: string) { + if (!value) { + return new Error(t('project.node.expression_name_tips')) + } - const sameItems = model[field].filter( - (item: { label: string }) => item.label === value - ) + const sameItems = model[field].filter( + (item: { label: string }) => item.label === value + ) - if (sameItems.length > 1) { - return new Error(t('project.node.label_repeat')) - } - } - } - }, - { - type: 'select', - field: 'operator', - span: 4, - options: OPERATOR_LIST, - value: 'In', - }, - { - type: 'input', - field: 'values', - span: 10, - class: 'node-selector-label-value', - props: { - placeholder: t('project.node.expression_value_tips'), - maxLength: 256, - disabled: false - } - } - ] + if (sameItems.length > 1) { + return new Error(t('project.node.label_repeat')) + } + } + } + }, + { + type: 'select', + field: 'operator', + span: 4, + options: OPERATOR_LIST, + value: 'In' + }, + { + type: 'input', + field: 'values', + span: 10, + class: 'node-selector-label-value', + props: { + placeholder: t('project.node.expression_value_tips'), + maxLength: 256, + disabled: false + } } - ] + ] + } + ] } export const OPERATOR_LIST = [ - { - value: 'In', - label: 'In' - }, - { - value: 'NotIn', - label: 'NotIn' - }, - { - value: 'Exists', - label: 'Exists' - }, - { - value: 'DoesNotExist', - label: 'DoesNotExist' - }, - { - value: 'Gt', - label: 'Gt' - }, - { - value: 'Lt', - label: 'Lt' - } -] \ No newline at end of file + { + value: 'In', + label: 'In' + }, + { + value: 'NotIn', + label: 'NotIn' + }, + { + value: 'Exists', + label: 'Exists' + }, + { + value: 'DoesNotExist', + label: 'DoesNotExist' + }, + { + value: 'Gt', + label: 'Gt' + }, + { + value: 'Lt', + label: 'Lt' + } +] diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss index 7ada37d22e..4c27d34b86 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss @@ -15,9 +15,38 @@ * limitations under the License. */ -.task-item { - cursor: pointer; - height: 20px; - width: 100px; - border: 1px solid #1890ff; -} \ No newline at end of file +.sidebar { +} + +.draggable { + color: #000; + border: 1px solid #00000040; + display: flex; + align-items: center; + width: 130px; + justify-content: space-around; + border-radius: 5px; + height: 30px; + margin-bottom: 10px; + margin-right: 20px; +} +.fav { + width: 18px; + height: 18px; +} + +.draggable { + &:hover { + color: blue; + border: 1px dashed blue; + background-color: #fff; + } +} + +.sidebar-icon { + display: block; + width: 18px; + height: 18px; + background-size: 100% 100%; + background-color: #fafafa; +} diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx index 4cd3176044..75be348344 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx @@ -18,6 +18,8 @@ import { defineComponent, onMounted, toRefs } from 'vue' import { useSidebar } from './use-sidebar' import styles from './dag-sidebar.module.scss' +import { NEllipsis, NIcon } from 'naive-ui' +import { StarFilled, StarOutlined } from '@vicons/antd' const DagSidebar = defineComponent({ name: 'DagSidebar', @@ -29,26 +31,54 @@ const DagSidebar = defineComponent({ context.emit('Dragstart', task) } + const handleCollection = () => {} + onMounted(() => { getTaskList() }) return { ...toRefs(variables), - handleDragstart + handleDragstart, + handleCollection } }, render() { return ( -
+
{this.taskList.map((task: any) => { return (
this.handleDragstart(task)} > - {task.name} + + {task.name} +
{ + task.starHover = true + }} + onMouseleave={() => { + task.starHover = false + }} + onClick={() => this.handleCollection()} + > +
+ + {task.collection ? : } + +
+
) })}