refactor: dag-menu refactor (#11965)

* refactor: dag-menu refactor

* feat: add i18n support for the dag-menu

* feat: add e2e class

Co-authored-by: devosend <devosend@gmail.com>
Co-authored-by: Tq <tianqitobethefirst@gmail.com>

dolphinscheduler-api/src/main/java/org/apache/dolphinscheduler/api/configuration/TaskTypeConfiguration.java

@@ -55,7 +55,9 @@ public class TaskTypeConfiguration {
     private static final List<FavTaskDto> defaultTaskTypes = new ArrayList<>();
 
     public List<FavTaskDto> getDefaultTaskTypes() {
-        if (defaultTaskTypes.size() <= 0) {
+        if (!defaultTaskTypes.isEmpty()) {
+            return defaultTaskTypes;
+        }
         printDefaultTypes();
         universal.forEach(task -> defaultTaskTypes.add(new FavTaskDto(task, false, Constants.TYPE_UNIVERSAL)));
         cloud.forEach(task -> defaultTaskTypes.add(new FavTaskDto(task, false, Constants.TYPE_CLOUD)));
@@ -64,17 +66,7 @@ public class TaskTypeConfiguration {
         dataQuality.forEach(task -> defaultTaskTypes.add(new FavTaskDto(task, false, Constants.TYPE_DATA_QUALITY)));
         machineLearning.forEach(task -> defaultTaskTypes.add(new FavTaskDto(task, false, Constants.TYPE_MACHINE_LEARNING)));
         other.forEach(task -> defaultTaskTypes.add(new FavTaskDto(task, false, Constants.TYPE_OTHER)));
-
+        return defaultTaskTypes;
-        }
-        List<FavTaskDto> result = new ArrayList<>();
-        defaultTaskTypes.forEach(e -> {
-            try {
-                result.add((FavTaskDto) e.clone());
-            } catch (CloneNotSupportedException ex) {
-                throw new RuntimeException(ex);
-            }
-        });
-        return result;
     }
 
     public void printDefaultTypes() {

dolphinscheduler-api/src/main/java/org/apache/dolphinscheduler/api/service/impl/FavTaskServiceImpl.java

@@ -43,12 +43,20 @@ public class FavTaskServiceImpl extends BaseServiceImpl implements FavTaskServic
         Set<String> userFavTaskTypes = favMapper.getUserFavTaskTypes(loginUser.getId());
 
         List<FavTaskDto> defaultTaskTypes = taskTypeConfiguration.getDefaultTaskTypes();
+        List<FavTaskDto> result = new ArrayList<>();
+        // clone default list and modify fav task type flag
         defaultTaskTypes.forEach(e -> {
-            if (userFavTaskTypes.contains(e.getTaskName())) {
+            try {
-                e.setCollection(true);
+                FavTaskDto clone = (FavTaskDto) e.clone();
+                if (userFavTaskTypes.contains(clone.getTaskName())) {
+                    clone.setCollection(true);
+                }
+                result.add(clone);
+            } catch (CloneNotSupportedException ex) {
+                throw new RuntimeException(ex);
             }
         });
-        return defaultTaskTypes;
+        return result;
     }
 
     @Override

dolphinscheduler-api/src/main/resources/task-type-config.yaml

@@ -18,6 +18,7 @@
 task:
   universal:
     - 'SHELL'
+    - 'JAVA'
     - 'PYTHON'
     - 'PROCEDURE'
     - 'SQL'

dolphinscheduler-dao/src/main/resources/sql/dolphinscheduler_h2.sql

@@ -2003,10 +2003,10 @@ INSERT INTO `t_ds_cluster`
 VALUES (100, 0, 'ds_null_k8s', '{"k8s":"ds_null_k8s"}', 'test', 1, '2021-03-03 11:31:24.0', '2021-03-03 11:31:24.0');
 
 --
--- Table structure for t_ds_fav
+-- Table structure for t_ds_fav_task
 --
-DROP TABLE IF EXISTS t_ds_fav CASCADE;
+DROP TABLE IF EXISTS t_ds_fav_task CASCADE;
-CREATE TABLE t_ds_fav
+CREATE TABLE t_ds_fav_task
 (
     id        bigint(20) NOT NULL AUTO_INCREMENT,
     task_name varchar(64) NOT NULL,

dolphinscheduler-dao/src/main/resources/sql/dolphinscheduler_postgresql.sql

@@ -1958,11 +1958,11 @@ CREATE TABLE t_ds_cluster(
 );
 
 --
--- Table structure for t_ds_fav
+-- Table structure for t_ds_fav_task
 --
 
-DROP TABLE IF EXISTS t_ds_fav;
+DROP TABLE IF EXISTS t_ds_fav_task;
-CREATE TABLE t_ds_fav
+CREATE TABLE t_ds_fav_task
 (
     id        serial      NOT NULL,
     task_name varchar(64) NOT NULL,

dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/cases/WorkflowE2ETest.java

@@ -142,7 +142,7 @@ class WorkflowE2ETest {
                 .goToTab(WorkflowDefinitionTab.class);
 
         workflowDefinitionPage
-            .createWorkflow()
+            .createSubProcessWorkflow()
 
             .<SubWorkflowTaskForm> addTask(TaskType.SUB_PROCESS)
             .childNode("test-workflow-1")

dolphinscheduler-e2e/dolphinscheduler-e2e-case/src/test/java/org/apache/dolphinscheduler/e2e/pages/project/workflow/WorkflowDefinitionTab.java

@@ -59,6 +59,9 @@ public final class WorkflowDefinitionTab extends NavBarPage implements ProjectDe
     @FindBy(className = "items")
     private List<WebElement> workflowList;
 
+    @FindBy(className = "task-cate-logic")
+    private WebElement subProcessList;
+
     public WorkflowDefinitionTab(RemoteWebDriver driver) {
         super(driver);
     }
@@ -69,6 +72,13 @@ public final class WorkflowDefinitionTab extends NavBarPage implements ProjectDe
         return new WorkflowForm(driver);
     }
 
+    public WorkflowForm createSubProcessWorkflow() {
+        buttonCreateProcess().click();
+        subProcessList().click();
+
+        return new WorkflowForm(driver);
+    }
+
     public WorkflowDefinitionTab publish(String workflow) {
         workflowList()
             .stream()

dolphinscheduler-ui/src/locales/en_US/project.ts

@@ -785,5 +785,14 @@ export default {
     pytorch_conda_python_version: 'Python Version',
     pytorch_conda_python_version_tips:
       'Please enter the version number, such as 3.6, 3.7, 3.x'
+  },
+  menu: {
+    fav: 'Favorites',
+    universal: 'Universal',
+    cloud: 'Cloud',
+    logic: 'Logic',
+    di: 'Data Integration',
+    dq: 'Data Quality',
+    other: 'Other',
   }
 }

dolphinscheduler-ui/src/locales/zh_CN/project.ts

@@ -765,5 +765,14 @@ export default {
     pytorch_requirements: '依赖文件',
     pytorch_conda_python_version: 'python版本',
     pytorch_conda_python_version_tips: '请输入版本号，如 3.6, 3.7, 3.x等'
+  },
+  menu: {
+    fav: '收藏组件',
+    universal: '通用组件',
+    cloud: '云',
+    logic: '逻辑节点',
+    di: '数据集成',
+    dq: '数据质量',
+    other: '其他',
   }
 }

dolphinscheduler-ui/src/service/modules/dag-menu/index.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { axios } from '@/service/service'
+
+export function getDagMenu(): any {
+  return axios({
+    url: '/favourite/taskTypes',
+    method: 'get'
+  })
+}
+
+export function Collection(taskName: string): any {
+  return axios({
+    url: `/favourite/${taskName}`,
+    method: 'post'
+  })
+}
+
+export function CancelCollection(taskName: string): any {
+  return axios({
+    url: `/favourite/${taskName}`,
+    method: 'delete'
+  })
+}

dolphinscheduler-ui/src/store/project/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export * from './task-node'
+export * from './task-type'

dolphinscheduler-ui/src/store/project/task-type.ts

@@ -0,0 +1,167 @@
+/*
+ * 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 { defineStore } from 'pinia'
+import type {
+  TaskTypeState,
+  TaskType,
+  ITaskTypeItem,
+  TaskExecuteType
+} from './types'
+
+export const TASK_TYPES_MAP = {
+  JAVA: {
+    alias: 'JAVA'
+  },
+  SHELL: {
+    alias: 'SHELL'
+  },
+  SUB_PROCESS: {
+    alias: 'SUB_PROCESS'
+  },
+  PROCEDURE: {
+    alias: 'PROCEDURE'
+  },
+  SQL: {
+    alias: 'SQL'
+  },
+  SPARK: {
+    alias: 'SPARK'
+  },
+  FLINK: {
+    alias: 'FLINK'
+  },
+  MR: {
+    alias: 'MapReduce',
+    helperLinkDisable: true
+  },
+  PYTHON: {
+    alias: 'PYTHON'
+  },
+  DEPENDENT: {
+    alias: 'DEPENDENT'
+  },
+  HTTP: {
+    alias: 'HTTP'
+  },
+  DATAX: {
+    alias: 'DataX'
+  },
+  PIGEON: {
+    alias: 'PIGEON'
+  },
+  SQOOP: {
+    alias: 'SQOOP',
+    helperLinkDisable: true
+  },
+  CONDITIONS: {
+    alias: 'CONDITIONS'
+  },
+  DATA_QUALITY: {
+    alias: 'DATA_QUALITY',
+    helperLinkDisable: true
+  },
+  SWITCH: {
+    alias: 'SWITCH'
+  },
+  SEATUNNEL: {
+    alias: 'SeaTunnel',
+    helperLinkDisable: true
+  },
+  EMR: {
+    alias: 'AmazonEMR',
+    helperLinkDisable: true
+  },
+  ZEPPELIN: {
+    alias: 'ZEPPELIN',
+    helperLinkDisable: true
+  },
+  JUPYTER: {
+    alias: 'JUPYTER',
+    helperLinkDisable: true
+  },
+  K8S: {
+    alias: 'K8S',
+    helperLinkDisable: true
+  },
+  MLFLOW: {
+    alias: 'MLFLOW',
+    helperLinkDisable: true
+  },
+  OPENMLDB: {
+    alias: 'OPENMLDB',
+    helperLinkDisable: true
+  },
+  DVC: {
+    alias: 'DVC',
+    helperLinkDisable: true
+  },
+  DINKY: {
+    alias: 'DINKY',
+    helperLinkDisable: true
+  },
+  SAGEMAKER: {
+    alias: 'SageMaker',
+    helperLinkDisable: true
+  },
+  CHUNJUN: {
+    alias: 'CHUNJUN',
+    helperLinkDisable: true
+  },
+  FLINK_STREAM: {
+    alias: 'FLINK_STREAM',
+    helperLinkDisable: true,
+    taskExecuteType: 'STREAM'
+  },
+  PYTORCH: {
+    alias: 'Pytorch',
+    helperLinkDisable: true
+  },
+  HIVECLI: {
+    alias: 'HIVECLI',
+    helperLinkDisable: true
+  }
+} as {
+  [key in TaskType]: {
+    alias: string
+    helperLinkDisable?: boolean
+    taskExecuteType?: TaskExecuteType
+  }
+}
+
+export const useTaskTypeStore = defineStore({
+  id: 'project-task-type',
+  state: (): TaskTypeState => ({
+    types: []
+  }),
+  persist: true,
+  getters: {
+    getTaskType(): ITaskTypeItem[] {
+      return this.types
+    }
+  },
+  actions: {
+    setTaskTypes(types: TaskType[]): void {
+      try {
+        this.types = types
+          .filter((type) => !!TASK_TYPES_MAP[type])
+          .map((type) => ({ ...TASK_TYPES_MAP[type], type }))
+      } catch (err) {
+        this.types = []
+      }
+    }
+  }
+})

dolphinscheduler-ui/src/store/project/types.ts

@@ -18,7 +18,42 @@
 import type { EditWorkflowDefinition } from '@/views/projects/workflow/components/dag/types'
 import type { IOption } from '@/components/form/types'
 
-type ProgramType = 'JAVA' | 'SCALA' | 'PYTHON' | 'SQL'
+type TaskExecuteType = 'STREAM' | 'BATCH'
+
+type TaskType =
+  | 'SHELL'
+  | 'SUB_PROCESS'
+  | 'PROCEDURE'
+  | 'SQL'
+  | 'SPARK'
+  | 'FLINK'
+  | 'MR'
+  | 'PYTHON'
+  | 'DEPENDENT'
+  | 'HTTP'
+  | 'DATAX'
+  | 'PIGEON'
+  | 'SQOOP'
+  | 'CONDITIONS'
+  | 'DATA_QUALITY'
+  | 'SWITCH'
+  | 'SEATUNNEL'
+  | 'EMR'
+  | 'ZEPPELIN'
+  | 'K8S'
+  | 'JUPYTER'
+  | 'MLFLOW'
+  | 'OPENMLDB'
+  | 'DVC'
+  | 'JAVA'
+  | 'DINKY'
+  | 'SAGEMAKER'
+  | 'CHUNJUN'
+  | 'FLINK_STREAM'
+  | 'PYTORCH'
+  | 'HIVECLI'
+
+type ProgramType = 'JAVA' | 'SCALA' | 'PYTHON'
 type DependentResultType = {
   [key: string]: 'SUCCESS' | 'WAITING_THREAD' | 'FAILURE'
 }
@@ -45,6 +80,20 @@ interface TaskNodeState {
   name: string
   dependentResult: DependentResultType
 }
+
+interface ITaskType {
+  alias: string
+  helperLinkDisable?: boolean
+  taskDefinitionDisable?: boolean
+  taskExecuteType?: TaskExecuteType
+}
+interface ITaskTypeItem extends ITaskType {
+  type: TaskType
+}
+interface TaskTypeState {
+  types: ITaskTypeItem[]
+}
+
 export {
   TaskNodeState,
   EditWorkflowDefinition,
@@ -53,5 +102,10 @@ export {
   ProgramType,
   DependentResultType,
   BDependentResultType,
-  IMainJar
+  IMainJar,
+  TaskType,
+  ITaskType,
+  ITaskTypeItem,
+  TaskTypeState,
+  TaskExecuteType
 }

dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-java.ts

@@ -83,4 +83,3 @@ export const RUN_TYPES = [
     value: 'JAR'
   }
 ]
-  

dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-task-type.ts

@@ -16,7 +16,7 @@
  */
 
 import { useI18n } from 'vue-i18n'
-import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type'
+import { TASK_TYPES_MAP } from '@/store/project/task-type'
 import type { IJsonItem } from '../types'
 
 export function useTaskType(

dolphinscheduler-ui/src/views/projects/task/components/node/format-data.ts

@@ -42,7 +42,7 @@ export function formatParams(data: INodeData): {
     taskParams.jvmArgs = data.jvmArgs
     taskParams.isModulePath = data.isModulePath
     if (data.runType === 'JAR' && data.mainJar) {
-      taskParams.mainJar = {id: data.mainJar};
+      taskParams.mainJar = { id: data.mainJar }
     }
   }
 

dolphinscheduler-ui/src/views/projects/task/components/node/types.ts

@@ -17,10 +17,7 @@
 
 import { VNode } from 'vue'
 import type { SelectOption } from 'naive-ui'
-import type {
+import type { TaskExecuteType, TaskType } from '@/store/project/types'
-  TaskExecuteType,
-  TaskType
-} from '@/views/projects/task/constants/task-type'
 import type { IDataBase } from '@/service/modules/data-source/types'
 import type {
   IFormItem,

dolphinscheduler-ui/src/views/projects/task/components/node/use-task.ts

@@ -18,7 +18,7 @@ import { ref, Ref, unref } from 'vue'
 import nodes from './tasks'
 import getElementByJson from '@/components/form/get-elements-by-json'
 import { useTaskNodeStore } from '@/store/project/task-node'
-import { TASK_TYPES_MAP } from '../../constants/task-type'
+import { TASK_TYPES_MAP } from '@/store/project/task-type'
 import type {
   IFormItem,
   IJsonItem,

dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx

@@ -36,7 +36,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import { useTask } from './use-task'
-import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type'
+import { TASK_TYPES_MAP } from '@/store/project/task-type'
 import Card from '@/components/card'
 import VersionModal from './components/version-modal'
 import MoveModal from './components/move-modal'

dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-sidebar.tsx

@@ -15,25 +15,94 @@
  * limitations under the License.
  */
 
-import { defineComponent } from 'vue'
+import { defineComponent, onMounted, reactive } from 'vue'
-import {
-  TaskType,
-  TASK_TYPES_MAP
-} from '@/views/projects/task/constants/task-type'
 import styles from './dag.module.scss'
+import type { TaskType } from './types'
+import { NCollapse, NCollapseItem, NIcon } from 'naive-ui'
+import { StarFilled, StarOutlined } from '@vicons/antd'
+import {
+  CancelCollection,
+  Collection,
+  getDagMenu
+} from '@/service/modules/dag-menu'
+import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
   name: 'workflow-dag-sidebar',
   emits: ['dragStart'],
   setup(props, context) {
-    const allTaskTypes = Object.keys(TASK_TYPES_MAP).map((type) => ({
+    const variables = reactive({
-      type,
+      dataList: [],
-      ...TASK_TYPES_MAP[type as TaskType]
+      universal: [],
-    }))
+      cloud: [],
+      logic: [],
+      di: [],
+      dq: [],
+      other: [],
+      fav: []
+    })
+
+    const { t } = useI18n()
+
+    const handleDagMenu = () => {
+      getDagMenu().then((res: any) => {
+        variables.dataList = res.map((item: any) => {
+          return {
+            ...item,
+            starHover: false,
+            type: item.taskName
+          }
+        })
+        variables.universal = variables.dataList.filter(
+          (item: any) => item.taskType === 'Universal'
+        )
+        variables.cloud = variables.dataList.filter(
+          (item: any) => item.taskType === 'Cloud'
+        )
+        variables.logic = variables.dataList.filter(
+          (item: any) => item.taskType === 'Logic'
+        )
+        variables.di = variables.dataList.filter(
+          (item: any) => item.taskType === 'DataIntegration'
+        )
+        variables.dq = variables.dataList.filter(
+          (item: any) => item.taskType === 'DataQuality'
+        )
+        variables.other = variables.dataList.filter(
+          (item: any) => item.taskType === 'Other'
+        )
+        variables.fav = variables.dataList.filter(
+          (item: any) => item.collection === true
+        )
+      })
+    }
+
+    const handleCollection = (item: any) => {
+      item.collection
+        ? CancelCollection(item.taskName).then(() => {
+            handleDagMenu()
+          })
+        : Collection(item.taskName).then(() => {
+            handleDagMenu()
+          })
+      item.collection = !item.collection
+    }
+
+    onMounted(() => {
+      handleDagMenu()
+    })
 
-    return () => (
+    return () =>
       <div class={styles.sidebar}>
-        {allTaskTypes.map((task) => (
+        <NCollapse default-expanded-names='1' accordion>
+          {variables.fav.length > 0 && (
+            <NCollapseItem
+              title={t('project.menu.fav')}
+              name='0'
+              class='task-cate-fav'
+              v-slots={{
+                default: () => {
+                  return variables.fav.map((task: any) => (
                     <div
                       class={[styles.draggable, `task-item-${task.type}`]}
                       draggable='true'
@@ -47,10 +116,357 @@ export default defineComponent({
                           styles['icon-' + task.type.toLocaleLowerCase()]
                         ]}
                       />
-            <span>{task.alias}</span>
+                      <span>{task.taskName}</span>
+                      <div
+                        class={styles.stars}
+                        onMouseenter={() => {
+                          task.starHover = true
+                        }}
+                        onMouseleave={() => {
+                          task.starHover = false
+                        }}
+                        onClick={() => handleCollection(task)}
+                      >
+                        <NIcon
+                          size='20'
+                          color={
+                            task.collection || task.starHover
+                              ? '#288FFF'
+                              : '#ccc'
+                          }
+                        >
+                          {task.collection ? (
+                            <StarFilled />
+                          ) : (
+                            <StarOutlined />
+                          )}
+                        </NIcon>
                       </div>
-        ))}
                     </div>
-    )
+                  ))
+                }
+              }}
+            ></NCollapseItem>
+          )}
+          {variables.universal.length > 0 && (
+            <NCollapseItem
+              title={t('project.menu.universal')}
+              name='1'
+              class='task-cate-universal'
+              v-slots={{
+                default: () => {
+                  return variables.universal.map((task: any) => (
+                    <div
+                      class={[styles.draggable, `task-item-${task.type}`]}
+                      draggable='true'
+                      onDragstart={(e) => {
+                        context.emit('dragStart', e, task.type as TaskType)
+                      }}
+                    >
+                      <em
+                        class={[
+                          styles['sidebar-icon'],
+                          styles['icon-' + task.type.toLocaleLowerCase()]
+                        ]}
+                      />
+                      <span>{task.taskName}</span>
+                      <div
+                        class={styles.stars}
+                        onMouseenter={() => {
+                          task.starHover = true
+                        }}
+                        onMouseleave={() => {
+                          task.starHover = false
+                        }}
+                        onClick={() => handleCollection(task)}
+                      >
+                        <NIcon
+                          size='20'
+                          color={
+                            task.collection || task.starHover
+                              ? '#288FFF'
+                              : '#ccc'
+                          }
+                        >
+                          {task.collection ? (
+                            <StarFilled />
+                          ) : (
+                            <StarOutlined />
+                          )}
+                        </NIcon>
+                      </div>
+                    </div>
+                  ))
+                }
+              }}
+            ></NCollapseItem>
+          )}
+          {variables.cloud.length > 0 && (
+            <NCollapseItem
+              title={t('project.menu.cloud')}
+              name='2'
+              class='task-cate-cloud'
+              v-slots={{
+                default: () => {
+                  return variables.cloud.map((task: any) => (
+                    <div
+                      class={[styles.draggable, `task-item-${task.type}`]}
+                      draggable='true'
+                      onDragstart={(e) => {
+                        context.emit('dragStart', e, task.type as TaskType)
+                      }}
+                    >
+                      <em
+                        class={[
+                          styles['sidebar-icon'],
+                          styles['icon-' + task.type.toLocaleLowerCase()]
+                        ]}
+                      />
+                      <span>{task.taskName}</span>
+                      <div
+                        class={styles.stars}
+                        onMouseenter={() => {
+                          task.starHover = true
+                        }}
+                        onMouseleave={() => {
+                          task.starHover = false
+                        }}
+                        onClick={() => handleCollection(task)}
+                      >
+                        <NIcon
+                          size='20'
+                          color={
+                            task.collection || task.starHover
+                              ? '#288FFF'
+                              : '#ccc'
+                          }
+                        >
+                          {task.collection ? (
+                            <StarFilled />
+                          ) : (
+                            <StarOutlined />
+                          )}
+                        </NIcon>
+                      </div>
+                    </div>
+                  ))
+                }
+              }}
+            ></NCollapseItem>
+          )}
+          {variables.logic.length > 0 && (
+            <NCollapseItem
+              title={t('project.menu.logic')}
+              name='3'
+              class='task-cate-logic'
+              v-slots={{
+                default: () => {
+                  return variables.logic.map((task: any) => (
+                    <div
+                      class={[styles.draggable, `task-item-${task.type}`]}
+                      draggable='true'
+                      onDragstart={(e) => {
+                        context.emit('dragStart', e, task.type as TaskType)
+                      }}
+                    >
+                      <em
+                        class={[
+                          styles['sidebar-icon'],
+                          styles['icon-' + task.type.toLocaleLowerCase()]
+                        ]}
+                      />
+                      <span>{task.taskName}</span>
+                      <div
+                        class={styles.stars}
+                        onMouseenter={() => {
+                          task.starHover = true
+                        }}
+                        onMouseleave={() => {
+                          task.starHover = false
+                        }}
+                        onClick={() => handleCollection(task)}
+                      >
+                        <NIcon
+                          size='20'
+                          color={
+                            task.collection || task.starHover
+                              ? '#288FFF'
+                              : '#ccc'
+                          }
+                        >
+                          {task.collection ? (
+                            <StarFilled />
+                          ) : (
+                            <StarOutlined />
+                          )}
+                        </NIcon>
+                      </div>
+                    </div>
+                  ))
+                }
+              }}
+            ></NCollapseItem>
+          )}
+          {variables.di.length > 0 && (
+            <NCollapseItem
+              title={t('project.menu.di')}
+              name='4'
+              class='task-cate-di'
+              v-slots={{
+                default: () => {
+                  return variables.di.map((task: any) => (
+                    <div
+                      class={[styles.draggable, `task-item-${task.type}`]}
+                      draggable='true'
+                      onDragstart={(e) => {
+                        context.emit('dragStart', e, task.type as TaskType)
+                      }}
+                    >
+                      <em
+                        class={[
+                          styles['sidebar-icon'],
+                          styles['icon-' + task.type.toLocaleLowerCase()]
+                        ]}
+                      />
+                      <span>{task.taskName}</span>
+                      <div
+                        class={styles.stars}
+                        onMouseenter={() => {
+                          task.starHover = true
+                        }}
+                        onMouseleave={() => {
+                          task.starHover = false
+                        }}
+                        onClick={() => handleCollection(task)}
+                      >
+                        <NIcon
+                          size='20'
+                          color={
+                            task.collection || task.starHover
+                              ? '#288FFF'
+                              : '#ccc'
+                          }
+                        >
+                          {task.collection ? (
+                            <StarFilled />
+                          ) : (
+                            <StarOutlined />
+                          )}
+                        </NIcon>
+                      </div>
+                    </div>
+                  ))
+                }
+              }}
+            ></NCollapseItem>
+          )}
+          {variables.dq.length > 0 && (
+            <NCollapseItem
+              title={t('project.menu.dq')}
+              name='5'
+              class='task-cate-dq'
+              v-slots={{
+                default: () => {
+                  return variables.dq.map((task: any) => (
+                    <div
+                      class={[styles.draggable, `task-item-${task.type}`]}
+                      draggable='true'
+                      onDragstart={(e) => {
+                        context.emit('dragStart', e, task.type as TaskType)
+                      }}
+                    >
+                      <em
+                        class={[
+                          styles['sidebar-icon'],
+                          styles['icon-' + task.type.toLocaleLowerCase()]
+                        ]}
+                      />
+                      <span>{task.taskName}</span>
+                      <div
+                        class={styles.stars}
+                        onMouseenter={() => {
+                          task.starHover = true
+                        }}
+                        onMouseleave={() => {
+                          task.starHover = false
+                        }}
+                        onClick={() => handleCollection(task)}
+                      >
+                        <NIcon
+                          size='20'
+                          color={
+                            task.collection || task.starHover
+                              ? '#288FFF'
+                              : '#ccc'
+                          }
+                        >
+                          {task.collection ? (
+                            <StarFilled />
+                          ) : (
+                            <StarOutlined />
+                          )}
+                        </NIcon>
+                      </div>
+                    </div>
+                  ))
+                }
+              }}
+            ></NCollapseItem>
+          )}
+          {variables.other.length > 0 && (
+            <NCollapseItem
+              title={t('project.menu.other')}
+              name='6'
+              class='task-cate-other'
+              v-slots={{
+                default: () => {
+                  return variables.other.map((task: any) => (
+                    <div
+                      class={[styles.draggable, `task-item-${task.type}`]}
+                      draggable='true'
+                      onDragstart={(e) => {
+                        context.emit('dragStart', e, task.type as TaskType)
+                      }}
+                    >
+                      <em
+                        class={[
+                          styles['sidebar-icon'],
+                          styles['icon-' + task.type.toLocaleLowerCase()]
+                        ]}
+                      />
+                      <span>{task.taskName}</span>
+                      <div
+                        class={styles.stars}
+                        onMouseenter={() => {
+                          task.starHover = true
+                        }}
+                        onMouseleave={() => {
+                          task.starHover = false
+                        }}
+                        onClick={() => handleCollection(task)}
+                      >
+                        <NIcon
+                          size='20'
+                          color={
+                            task.collection || task.starHover
+                              ? '#288FFF'
+                              : '#ccc'
+                          }
+                        >
+                          {task.collection ? (
+                            <StarFilled />
+                          ) : (
+                            <StarOutlined />
+                          )}
+                        </NIcon>
+                      </div>
+                    </div>
+                  ))
+                }
+              }}
+            ></NCollapseItem>
+          )}
+        </NCollapse>
+      </div>
   }
 })

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

@@ -289,6 +289,16 @@ $bgLight: #ffffff;
       }
     }
   }
+
+  span {
+    display: flex;
+    flex: 1;
+  }
+
+  .stars {
+    display: flex;
+    cursor: pointer;
+  }
 }
 
 .dag-dark .draggable {

dolphinscheduler-ui/src/views/projects/workflow/components/dag/types.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TaskType } from '@/views/projects/task/constants/task-type'
+import type { TaskType } from '@/store/project/types'
 export type { ITaskState } from '@/common/types'
 
 export interface ProcessDefinition {
@@ -172,3 +172,5 @@ export interface IWorkflowTaskInstance {
   taskCode: number
   taskType: string
 }
+
+export { TaskType }

dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts

@@ -17,9 +17,9 @@
 
 import type { Ref } from 'vue'
 import type { Graph } from '@antv/x6'
-import type { TaskType } from '@/views/projects/task/constants/task-type'
+import type { TaskType } from '@/store/project/types'
 import type { Coordinate } from './types'
-import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type'
+import { TASK_TYPES_MAP } from '@/store/project/task-type'
 import { useCustomCellBuilder } from './dag-hooks'
 import utils from '@/utils'
 import type { Edge } from '@antv/x6'

dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-custom-cell-builder.ts

@@ -18,10 +18,8 @@
 import type { Node, Edge } from '@antv/x6'
 import { X6_NODE_NAME, X6_EDGE_NAME } from './dag-config'
 import utils from '@/utils'
-import {
+import { TaskType } from '@/store/project/types'
-  TASK_TYPES_MAP,
+import { TASK_TYPES_MAP } from '@/store/project/task-type'
-  TaskType
-} from '@/views/projects/task/constants/task-type'
 import { WorkflowDefinition, Coordinate } from './types'
 
 export function useCustomCellBuilder() {
@@ -96,7 +94,7 @@ export function useCustomCellBuilder() {
           // Use href instead of xlink:href, you may lose the icon when downloadPNG
           'xlink:href': `${
             import.meta.env.BASE_URL
-          }images/task-icons/${(type !== 'FLINK_STREAM'
+          }images/task-icons/${(type !== ('FLINK_STREAM' as TaskType)
             ? type
             : 'FLINK'
           ).toLocaleLowerCase()}.png`

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

@@ -20,7 +20,7 @@ import type { Ref } from 'vue'
 import type { Graph } from '@antv/x6'
 import { genTaskCodeList } from '@/service/modules/task-definition'
 import { Coordinate, Dragged } from './types'
-import { TaskType } from '@/views/projects/task/constants/task-type'
+import { TaskType } from '@/store/project/types'
 import { useRoute } from 'vue-router'
 
 interface Options {

dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts

@@ -17,7 +17,7 @@
 
 import { ref, onMounted, watch } from 'vue'
 import { remove, cloneDeep } from 'lodash'
-import { TaskType } from '@/views/projects/task/constants/task-type'
+import { TaskType } from '@/store/project/types'
 import { formatParams } from '@/views/projects/task/components/node/format-data'
 import { useCellUpdate } from './dag-hooks'
 import type { Ref } from 'vue'