[Feature][UI Next][V1.0.0-Alpha] Added results page without workflow nodes. (#9189)

dolphinscheduler-ui-next/src/components/result/index.tsx

@@ -33,11 +33,13 @@ const props = {
     type: String as PropType<string>
   },
   size: {
-    type: String as PropType<"small" | "medium" | "large" | "huge">,
+    type: String as PropType<'small' | 'medium' | 'large' | 'huge'>,
     default: 'medium'
   },
   status: {
-    type: String as PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">
+    type: String as PropType<
+      '500' | 'error' | 'info' | 'success' | 'warning' | '404' | '403' | '418'
+    >
   },
   contentStyle: {
     type: String as PropType<string | CSSProperties>,

dolphinscheduler-ui-next/src/layouts/content/index.tsx

@@ -119,7 +119,11 @@ const Content = defineComponent({
               sideKey={this.sideKeyRef}
             />
           )}
-          <NLayoutContent native-scrollbar={false} style='padding: 16px 22px' contentStyle={'height: 100%'}>
+          <NLayoutContent
+            native-scrollbar={false}
+            style='padding: 16px 22px'
+            contentStyle={'height: 100%'}
+          >
             <router-view key={this.$route.fullPath} />
           </NLayoutContent>
         </NLayout>

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -162,7 +162,10 @@ const monitor = {
     last_heartbeat_time: 'Last Heartbeat Time',
     directory_detail: 'Directory Detail',
     host: 'Host',
-    directory: 'Directory'
+    directory: 'Directory',
+    worker_no_data_result_title: 'No Worker Nodes Exist',
+    worker_no_data_result_desc:
+      'Currently, there are no worker nodes exist, please create a worker node and refresh this page'
   },
   db: {
     health_state: 'Health State',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -161,7 +161,10 @@ const monitor = {
     last_heartbeat_time: '最后心跳时间',
     directory_detail: '目录详情',
     host: '主机',
-    directory: '注册目录'
+    directory: '注册目录',
+    worker_no_data_result_title: 'Worker节点不存在',
+    worker_no_data_result_desc:
+      '目前没有任何Worker节点，请先创建Worker节点，再访问该页面'
   },
   db: {
     health_state: '健康状态',

dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx

@@ -21,6 +21,7 @@ import { useI18n } from 'vue-i18n'
 import { useWorker } from './use-worker'
 import styles from './index.module.scss'
 import Card from '@/components/card'
+import Result from '@/components/result'
 import Gauge from '@/components/chart/modules/Gauge'
 import WorkerModal from './worker-modal'
 import type { Ref } from 'vue'
@@ -65,7 +66,14 @@ const worker = defineComponent({
     const { t, clickDetails, onConfirmModal, showModalRef, zkDirectoryRef } =
       this
 
-    return (
+    return this.data.length < 1 ? (
+      <Result
+        title={t('monitor.worker.worker_no_data_result_title')}
+        description={t('monitor.worker.worker_no_data_result_desc')}
+        status={'info'}
+        size={'medium'}
+      />
+    ) : (
       <>
         <NSpace vertical size={25}>
           {this.data.map((item: WorkerNode) => {

dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts

@@ -106,11 +106,7 @@ export function useTable(onEdit: Function) {
         key: 'upstreamTaskMap',
         render: (row: TaskDefinitionItem) =>
           row.upstreamTaskMap.map((item: string, index: number) => {
-            return h(
+            return h('p', null, { default: () => `[${index + 1}] ${item}` })
-              'p',
-              null,
-              { default: () => `[${index + 1}] ${item}` }
-            )
           }),
         ...COLUMN_WIDTH_CONFIG['name']
       },

dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx

@@ -185,7 +185,9 @@ export default defineComponent({
                           type='primary'
                           disabled={this.checkedRowKeys.length <= 0}
                           class='btn-delete-all'
-                          >{t('project.workflow.delete')}</NButton>
+                        >
+                          {t('project.workflow.delete')}
+                        </NButton>
                       )
                     }}
                   </NPopconfirm>

dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts

@@ -82,7 +82,8 @@ export function useTable() {
         key: 'name',
         className: 'workflow-name',
         ...COLUMN_WIDTH_CONFIG['name'],
-        render: (row) => h(
+        render: (row) =>
+          h(
             ButtonLink,
             {
               onClick: () =>

dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx

@@ -23,7 +23,7 @@ import { ReloadOutlined, EyeOutlined } from '@vicons/antd'
 import { useRelation } from './use-relation'
 import Card from '@/components/card'
 import Graph from './components/Graph'
-import Result from "@/components/result";
+import Result from '@/components/result'
 
 const workflowRelation = defineComponent({
   name: 'workflow-relation',
@@ -61,20 +61,25 @@ const workflowRelation = defineComponent({
     const { t, handleResetDate } = this
 
     return (
-        this.seriesData.length === 0 && (
+      (this.seriesData.length === 0 && (
         <Result
           title={t('project.workflow.workflow_relation_no_data_result_title')}
-                  description={t('project.workflow.workflow_relation_no_data_result_desc')}
+          description={t(
-                  status={"info"}
+            'project.workflow.workflow_relation_no_data_result_desc'
-                  size={"medium"}/>
+          )}
-          )
+          status={'info'}
-        ) || (
+          size={'medium'}
-        this.seriesData.length > 0 && (
+        />
+      )) ||
+      (this.seriesData.length > 0 && (
         <Card title={t('project.workflow.workflow_relation')}>
           {{
             default: () =>
               Object.keys(this.seriesData).length > 0 && (
-                        <Graph seriesData={this.seriesData} labelShow={this.labelShow} />
+                <Graph
+                  seriesData={this.seriesData}
+                  labelShow={this.labelShow}
+                />
               ),
             'header-extra': () => (
               <NSpace>
@@ -125,7 +130,7 @@ const workflowRelation = defineComponent({
             )
           }}
         </Card>
-        )
+      ))
     )
   }
 })