You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/03/23 14:08:40 UTC
[dolphinscheduler] branch dev updated: [Improve-9109][UI Next][V1.0.0-Alpha] When there's not any relations of workflows this page will display prompts. (#9133)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 49de0f0 [Improve-9109][UI Next][V1.0.0-Alpha] When there's not any relations of workflows this page will display prompts. (#9133)
49de0f0 is described below
commit 49de0f092c356956276d10aba82219179016bad3
Author: calvin <ji...@163.com>
AuthorDate: Wed Mar 23 22:08:34 2022 +0800
[Improve-9109][UI Next][V1.0.0-Alpha] When there's not any relations of workflows this page will display prompts. (#9133)
---
.../src/components/result/index.tsx | 67 ++++++++++++
.../src/layouts/content/index.tsx | 2 +-
.../src/locales/modules/en_US.ts | 4 +-
.../src/locales/modules/zh_CN.ts | 4 +-
.../src/views/projects/workflow/relation/index.tsx | 119 +++++++++++----------
5 files changed, 139 insertions(+), 57 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/result/index.tsx b/dolphinscheduler-ui-next/src/components/result/index.tsx
new file mode 100644
index 0000000..52b40ee
--- /dev/null
+++ b/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
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index 45edeb9..9a83a92 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/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>
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 69197e2..4f8918c 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index 199f924..a837b7a 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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: '已上线',
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx
index fc409e4..414e96e 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx
+++ b/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>
+ )
)
}
})