[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(
-              'p',
-              null,
-              { default: () => `[${index + 1}] ${item}` }
-            )
+            return h('p', null, { default: () => `[${index + 1}] ${item}` })
           }),
         ...COLUMN_WIDTH_CONFIG['name']
       },

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

@@ -176,19 +176,21 @@ export default defineComponent({
               {{
                 default: () => t('project.workflow.delete'),
                 trigger: () => (
-                    <NPopconfirm onPositiveClick={this.batchDeleteWorkflow}>
-                      {{
-                        default: () => t('project.workflow.delete_confirm'),
-                        trigger: () => (
-                          <NButton
-                            tag='div'
-                            type='primary'
-                            disabled={this.checkedRowKeys.length <= 0}
-                            class='btn-delete-all'
-                          >{t('project.workflow.delete')}</NButton>
-                        )
-                      }}
-                    </NPopconfirm>
+                  <NPopconfirm onPositiveClick={this.batchDeleteWorkflow}>
+                    {{
+                      default: () => t('project.workflow.delete_confirm'),
+                      trigger: () => (
+                        <NButton
+                          tag='div'
+                          type='primary'
+                          disabled={this.checkedRowKeys.length <= 0}
+                          class='btn-delete-all'
+                        >
+                          {t('project.workflow.delete')}
+                        </NButton>
+                      )
+                    }}
+                  </NPopconfirm>
                 )
               }}
             </NTooltip>

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

@@ -82,17 +82,18 @@ export function useTable() {
         key: 'name',
         className: 'workflow-name',
         ...COLUMN_WIDTH_CONFIG['name'],
-        render: (row) => h(
-          ButtonLink,
-          {
-            onClick: () =>
-              void router.push({
-                name: 'workflow-definition-detail',
-                params: { code: row.code }
-              })
-          },
-          { default: () => row.name }
-        )
+        render: (row) =>
+          h(
+            ButtonLink,
+            {
+              onClick: () =>
+                void router.push({
+                  name: 'workflow-definition-detail',
+                  params: { code: row.code }
+                })
+            },
+            { default: () => row.name }
+          )
       },
       {
         title: t('project.workflow.status'),

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,71 +61,76 @@ const workflowRelation = defineComponent({
     const { t, handleResetDate } = this
 
     return (
-        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')}
-                  status={"info"}
-                  size={"medium"}/>
-          )
-        ) || (
-        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} />
-                    ),
-                'header-extra': () => (
-                    <NSpace>
-                      <NSelect
-                          clearable
-                          style={{ width: '300px' }}
-                          placeholder={t('project.workflow.workflow_name')}
-                          options={this.workflowOptions}
-                          v-model={[this.workflow, 'value']}
-                      />
-                      <NTooltip trigger={'hover'}>
-                        {{
-                          default: () => t('project.workflow.refresh'),
-                          trigger: () => (
-                              <NButton
-                                  strong
-                                  secondary
-                                  circle
-                                  type='info'
-                                  onClick={handleResetDate}
-                              >
-                                <NIcon>
-                                  <ReloadOutlined />
-                                </NIcon>
-                              </NButton>
-                          )
-                        }}
-                      </NTooltip>
-                      <NTooltip trigger={'hover'}>
-                        {{
-                          default: () => t('project.workflow.show_hide_label'),
-                          trigger: () => (
-                              <NButton
-                                  strong
-                                  secondary
-                                  circle
-                                  type='info'
-                                  onClick={() => (this.labelShow = !this.labelShow)}
-                              >
-                                <NIcon>
-                                  <EyeOutlined />
-                                </NIcon>
-                              </NButton>
-                          )
-                        }}
-                      </NTooltip>
-                    </NSpace>
-                )
-              }}
-            </Card>
-        )
+      (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'
+          )}
+          status={'info'}
+          size={'medium'}
+        />
+      )) ||
+      (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}
+                />
+              ),
+            'header-extra': () => (
+              <NSpace>
+                <NSelect
+                  clearable
+                  style={{ width: '300px' }}
+                  placeholder={t('project.workflow.workflow_name')}
+                  options={this.workflowOptions}
+                  v-model={[this.workflow, 'value']}
+                />
+                <NTooltip trigger={'hover'}>
+                  {{
+                    default: () => t('project.workflow.refresh'),
+                    trigger: () => (
+                      <NButton
+                        strong
+                        secondary
+                        circle
+                        type='info'
+                        onClick={handleResetDate}
+                      >
+                        <NIcon>
+                          <ReloadOutlined />
+                        </NIcon>
+                      </NButton>
+                    )
+                  }}
+                </NTooltip>
+                <NTooltip trigger={'hover'}>
+                  {{
+                    default: () => t('project.workflow.show_hide_label'),
+                    trigger: () => (
+                      <NButton
+                        strong
+                        secondary
+                        circle
+                        type='info'
+                        onClick={() => (this.labelShow = !this.labelShow)}
+                      >
+                        <NIcon>
+                          <EyeOutlined />
+                        </NIcon>
+                      </NButton>
+                    )
+                  }}
+                </NTooltip>
+              </NSpace>
+            )
+          }}
+        </Card>
+      ))
     )
   }
 })