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' }),
+    ...useCustomLabels({
-    ...useNodeSelectors( { model, field: 'nodeSelectors', name: 'node_selectors' }),
+      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

@@ -71,7 +71,7 @@ export function useNodeSelectors({
           field: 'operator',
           span: 4,
           options: OPERATOR_LIST,
-                    value: 'In',
+          value: 'In'
         },
         {
           type: 'input',

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss

@@ -15,9 +15,38 @@
  * limitations under the License.
  */
 
-.task-item {
+.sidebar {
-  cursor: pointer;
+}
-  height: 20px;
+
-  width: 100px;
+.draggable {
-  border: 1px solid #1890ff;
+  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>
           )
         })}