Browse Source

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

3.0.0/version-upgrade
calvin 3 years ago committed by GitHub
parent
commit
49de0f092c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 67
      dolphinscheduler-ui-next/src/components/result/index.tsx
  2. 2
      dolphinscheduler-ui-next/src/layouts/content/index.tsx
  3. 4
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  4. 4
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  5. 119
      dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx

67
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

2
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>

4
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',

4
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: '已上线',

119
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>
)
)
}
})

Loading…
Cancel
Save