[Improve-9109][UI Next][V1.0.0-Alpha] When there's not any relations of workflows this page will display prompts. (#9133)

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

@@ -0,0 +1,67 @@
+/*
+ * 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 { CSSProperties, defineComponent, PropType } from 'vue'
+import { NResult } from 'naive-ui'
+
+const defaultContentStyle = {
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+}
+
+const props = {
+  title: {
+    type: String as PropType<string>
+  },
+  description: {
+    type: String as PropType<string>
+  },
+  size: {
+    type: String as PropType<"small" | "medium" | "large" | "huge">,
+    default: 'medium'
+  },
+  status: {
+    type: String as PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">
+  },
+  contentStyle: {
+    type: String as PropType<string | CSSProperties>,
+    default: defaultContentStyle
+  }
+}
+
+const Result = defineComponent({
+  name: 'Result',
+  props,
+  render() {
+    const { title, description, size, status, contentStyle, $slots } = this
+    return (
+      <NResult
+        title={title}
+        size={size}
+        description={description}
+        status={status}
+        style={contentStyle}
+      >
+        {$slots}
+      </NResult>
+    )
+  }
+})
+
+export default Result

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

@@ -119,7 +119,7 @@ const Content = defineComponent({
               sideKey={this.sideKeyRef}
             />
           )}
-          <NLayoutContent native-scrollbar={false} style='padding: 16px 22px'>
+          <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

@@ -516,7 +516,9 @@ const project = {
     project_name_required: 'Project name is required',
     related_items: 'Related items',
     project_name: 'Project Name',
-    project_tips: 'Please select project name'
+    project_tips: 'Please select project name',
+    workflow_relation_no_data_result_title: 'Can not find any relations of workflows.',
+    workflow_relation_no_data_result_desc: 'There is not any workflows. Please create a workflow, and then visit this page again.',
   },
   task: {
     online: 'Online',

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

@@ -513,7 +513,9 @@ const project = {
     project_name_required: '项目名称必填',
     related_items: '关联项目',
     project_name: '项目名称',
-    project_tips: '请选择项目'
+    project_tips: '请选择项目',
+    workflow_relation_no_data_result_title: '工作流关系不存在',
+    workflow_relation_no_data_result_desc: '目前没有任何工作流，请先创建工作流，再访问该页面',
   },
   task: {
     online: '已上线',

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

@@ -23,6 +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";
 
 const workflowRelation = defineComponent({
   name: 'workflow-relation',
@@ -60,61 +61,71 @@ const workflowRelation = defineComponent({
     const { t, handleResetDate } = this
 
     return (
-      <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>
+        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"}/>
           )
-        }}
-      </Card>
+        ) || (
+        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>
+        )
     )
   }
 })