feat: dynamic-dag-sidebar-change (#14244)

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

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'
-    }
+  {
+    value: 'In',
+    label: 'In'
+  },
+  {
+    value: 'NotIn',
+    label: 'NotIn'
+  },
+  {
+    value: 'Exists',
+    label: 'Exists'
+  },
+  {
+    value: 'DoesNotExist',
+    label: 'DoesNotExist'
+  },
+  {
+    value: 'Gt',
+    label: 'Gt'
+  },
+  {
+    value: 'Lt',
+    label: 'Lt'
+  }
 ]

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;
+.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;
 }

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 (
-      <div>
+      <div class={styles.sidebar}>
         {this.taskList.map((task: any) => {
           return (
             <div
-              class={styles['task-item']}
+              class={styles['draggable']}
               draggable='true'
               onDragstart={() => this.handleDragstart(task)}
             >
-              {task.name}
+              <em
+                class={styles['sidebar-icon']}
+                style={{ backgroundImage: task.icon }}
+              ></em>
+              <NEllipsis style={{ width: '60px' }}>{task.name}</NEllipsis>
+              <div
+                class={styles.stars}
+                onMouseenter={() => {
+                  task.starHover = true
+                }}
+                onMouseleave={() => {
+                  task.starHover = false
+                }}
+                onClick={() => this.handleCollection()}
+              >
+                <div class={styles.fav}>
+                  <NIcon
+                    size='18'
+                    color={
+                      task.collection || task.starHover ? '#288FFF' : '#ccc'
+                    }
+                  >
+                    {task.collection ? <StarFilled /> : <StarOutlined />}
+                  </NIcon>
+                </div>
+              </div>
             </div>
           )
         })}