[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,6 +61,15 @@ 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: () =>
@@ -116,6 +126,7 @@ const workflowRelation = defineComponent({
               }}
             </Card>
         )
+    )
   }
 })