[Feature][UI Next] Adjust the projects directory (#8128)

dolphinscheduler-ui-next/src/router/modules/projects.ts

@@ -56,7 +56,15 @@ export default {
       }
     },
     {
-      path: '/projects/:projectCode/workflow/definitions/create',
+      path: '/projects/:projectCode/workflow-definitions',
+      name: 'workflow-definition-list',
+      component: components['workflow-definition-list'],
+      meta: {
+        title: '工作流定义'
+      }
+    },
+    {
+      path: '/projects/:projectCode/workflow-definitions/create',
       name: 'workflow-definition-create',
       component: components['workflow-definition-create'],
       meta: {
@@ -64,12 +72,44 @@ export default {
       }
     },
     {
-      path: '/projects/:projectCode/workflow/definitions/:code',
+      path: '/projects/:projectCode/workflow-definitions/:code',
       name: 'workflow-definition-details',
       component: components['workflow-definition-details'],
       meta: {
         title: '工作流定义详情'
       }
+    },
+    {
+      path: '/projects/:projectCode/workflow-instances',
+      name: 'workflow-instance-list',
+      component: components['workflow-instance-list'],
+      meta: {
+        title: '工作流实例'
+      }
+    },
+    {
+      path: '/projects/:projectCode/workflow-instances/:id',
+      name: 'workflow-instance-details',
+      component: components['workflow-instance-details'],
+      meta: {
+        title: '工作流实例详情'
+      }
+    },
+    {
+      path: '/projects/:projectCode/task-instances',
+      name: 'task-instance-list',
+      component: components['task-instance-list'],
+      meta: {
+        title: '任务实例'
+      }
+    },
+    {
+      path: '/projects/:projectCode/task-definitions',
+      name: 'task-definition-list',
+      component: components['task-definition-list'],
+      meta: {
+        title: '任务定义'
+      }
     }
   ]
 }

dolphinscheduler-ui-next/src/views/projects/dag/workflow/hook-demo.ts

@@ -1,36 +0,0 @@
-/*
- * 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 { ref, onMounted, Ref, onUnmounted } from 'vue'
-
-interface Options {
-  // readonly: Ref<boolean>;
-  // canvas: Ref<HTMLElement | undefined>;
-}
-
-/**
- * Canvas Init
- * 1. Bind the graph to the dom
- * 2. Redraw when the page is resized
- * 3. Register custom graphics
- */
-export function useCanvasInit(options: Options) {
-  // Whether the graph can be operated
-  const {} = options
-
-  return {}
-}

dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'TaskDefinitionList',
+  setup() {
+    return () => <div>TaskDefinitionList</div>
+  }
+})

dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx

@@ -18,8 +18,8 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'Projects',
+  name: 'TaskInstanceList',
   setup() {
-    return () => <div>Projects</div>
+    return () => <div>TaskInstanceList</div>
   }
 })

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

@@ -18,7 +18,7 @@
 import type { PropType, Ref } from 'vue'
 import type { Dragged } from './dag'
 import { defineComponent, ref, inject } from 'vue'
-import { ALL_TASK_TYPES } from '../task/config'
+import { ALL_TASK_TYPES } from '../task-details/config'
 import { useSidebarDrag } from './dag-hooks'
 import Styles from './dag.module.scss'
 

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

@@ -83,52 +83,52 @@ $toolbarHeight: 50px;
     background-size: 100% 100%;
     margin-right: 10px;
     &.icon-shell {
-      background-image: url("../../../../assets/images/task-icons/shell.png");
+      background-image: url("../../../assets/images/task-icons/shell.png");
     }
     &.icon-sub_process {
-      background-image: url("../../../../assets/images/task-icons/sub_process.png");
+      background-image: url("../../../assets/images/task-icons/sub_process.png");
     }
     &.icon-procedure {
-      background-image: url("../../../../assets/images/task-icons/procedure.png");
+      background-image: url("../../../assets/images/task-icons/procedure.png");
     }
     &.icon-sql {
-      background-image: url("../../../../assets/images/task-icons/sql.png");
+      background-image: url("../../../assets/images/task-icons/sql.png");
     }
     &.icon-flink {
-      background-image: url("../../../../assets/images/task-icons/flink.png");
+      background-image: url("../../../assets/images/task-icons/flink.png");
     }
     &.icon-mr {
-      background-image: url("../../../../assets/images/task-icons/mr.png");
+      background-image: url("../../../assets/images/task-icons/mr.png");
     }
     &.icon-python {
-      background-image: url("../../../../assets/images/task-icons/python.png");
+      background-image: url("../../../assets/images/task-icons/python.png");
     }
     &.icon-dependent {
-      background-image: url("../../../../assets/images/task-icons/dependent.png");
+      background-image: url("../../../assets/images/task-icons/dependent.png");
     }
     &.icon-http {
-      background-image: url("../../../../assets/images/task-icons/http.png");
+      background-image: url("../../../assets/images/task-icons/http.png");
     }
     &.icon-datax {
-      background-image: url("../../../../assets/images/task-icons/datax.png");
+      background-image: url("../../../assets/images/task-icons/datax.png");
     }
     &.icon-pigeon {
-      background-image: url("../../../../assets/images/task-icons/pigeon.png");
+      background-image: url("../../../assets/images/task-icons/pigeon.png");
     }
     &.icon-sqoop {
-      background-image: url("../../../../assets/images/task-icons/sqoop.png");
+      background-image: url("../../../assets/images/task-icons/sqoop.png");
     }
     &.icon-conditions {
-      background-image: url("../../../../assets/images/task-icons/conditions.png");
+      background-image: url("../../../assets/images/task-icons/conditions.png");
     }
     &.icon-seatunnel {
-      background-image: url("../../../../assets/images/task-icons/seatunnel.png");
+      background-image: url("../../../assets/images/task-icons/seatunnel.png");
     }
     &.icon-spark {
-      background-image: url("../../../../assets/images/task-icons/spark.png");
+      background-image: url("../../../assets/images/task-icons/spark.png");
     }
     &.icon-switch {
-      background-image: url("../../../../assets/images/task-icons/switch.png");
+      background-image: url("../../../assets/images/task-icons/switch.png");
     }
   }
 
@@ -138,52 +138,52 @@ $toolbarHeight: 50px;
     background-color: $blueBg;
     .sidebar-icon {
       &.icon-shell {
-        background-image: url("../../../../assets/images/task-icons/shell_hover.png");
+        background-image: url("../../../assets/images/task-icons/shell_hover.png");
       }
       &.icon-sub_process {
-        background-image: url("../../../../assets/images/task-icons/sub_process_hover.png");
+        background-image: url("../../../assets/images/task-icons/sub_process_hover.png");
       }
       &.icon-procedure {
-        background-image: url("../../../../assets/images/task-icons/procedure_hover.png");
+        background-image: url("../../../assets/images/task-icons/procedure_hover.png");
       }
       &.icon-sql {
-        background-image: url("../../../../assets/images/task-icons/sql_hover.png");
+        background-image: url("../../../assets/images/task-icons/sql_hover.png");
       }
       &.icon-flink {
-        background-image: url("../../../../assets/images/task-icons/flink_hover.png");
+        background-image: url("../../../assets/images/task-icons/flink_hover.png");
       }
       &.icon-mr {
-        background-image: url("../../../../assets/images/task-icons/mr_hover.png");
+        background-image: url("../../../assets/images/task-icons/mr_hover.png");
       }
       &.icon-python {
-        background-image: url("../../../../assets/images/task-icons/python_hover.png");
+        background-image: url("../../../assets/images/task-icons/python_hover.png");
       }
       &.icon-dependent {
-        background-image: url("../../../../assets/images/task-icons/dependent_hover.png");
+        background-image: url("../../../assets/images/task-icons/dependent_hover.png");
       }
       &.icon-http {
-        background-image: url("../../../../assets/images/task-icons/http_hover.png");
+        background-image: url("../../../assets/images/task-icons/http_hover.png");
       }
       &.icon-datax {
-        background-image: url("../../../../assets/images/task-icons/datax_hover.png");
+        background-image: url("../../../assets/images/task-icons/datax_hover.png");
       }
       &.icon-pigeon {
-        background-image: url("../../../../assets/images/task-icons/pigeon_hover.png");
+        background-image: url("../../../assets/images/task-icons/pigeon_hover.png");
       }
       &.icon-sqoop {
-        background-image: url("../../../../assets/images/task-icons/sqoop_hover.png");
+        background-image: url("../../../assets/images/task-icons/sqoop_hover.png");
       }
       &.icon-conditions {
-        background-image: url("../../../../assets/images/task-icons/conditions_hover.png");
+        background-image: url("../../../assets/images/task-icons/conditions_hover.png");
       }
       &.icon-seatunnel {
-        background-image: url("../../../../assets/images/task-icons/seatunnel_hover.png");
+        background-image: url("../../../assets/images/task-icons/seatunnel_hover.png");
       }
       &.icon-spark {
-        background-image: url("../../../../assets/images/task-icons/spark_hover.png");
+        background-image: url("../../../assets/images/task-icons/spark_hover.png");
       }
       &.icon-switch {
-        background-image: url("../../../../assets/images/task-icons/switch_hover.png");
+        background-image: url("../../../assets/images/task-icons/switch_hover.png");
       }
     }
   }

dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts

@@ -18,7 +18,7 @@
 import type { Ref } from 'vue'
 import type { Node, Graph, Edge } from '@antv/x6'
 import { X6_NODE_NAME, X6_EDGE_NAME } from './dag-config'
-import { ALL_TASK_TYPES } from '../task/config'
+import { ALL_TASK_TYPES } from '../task-details/config'
 import utils from '@/utils'
 
 interface Options {