You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by wa...@apache.org on 2021/12/29 13:33:13 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next] Process Definition Statistics. (#7715)
This is an automated email from the ASF dual-hosted git repository.
wangyizhi 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 0bc4f9b [Feature][UI Next] Process Definition Statistics. (#7715)
0bc4f9b is described below
commit 0bc4f9b5de4f7ab0275ee77e3d769f1e58792962
Author: songjianet <17...@qq.com>
AuthorDate: Wed Dec 29 21:33:09 2021 +0800
[Feature][UI Next] Process Definition Statistics. (#7715)
---
.../src/components/card/index.tsx | 11 +++-
.../src/components/chart/index.ts | 2 +
.../src/components/chart/modules/Bar.tsx | 15 +++--
.../src/locales/modules/en_US.ts | 9 +++
.../src/locales/modules/zh_CN.ts | 9 +++
.../src/service/modules/projects-analysis/types.ts | 13 ++++-
.../src/views/home/index.module.scss | 5 ++
dolphinscheduler-ui-next/src/views/home/index.tsx | 66 ++++++++++++++++++++--
.../home/use-process-definition.ts} | 39 ++++++-------
.../{index.module.scss => use-process-state.ts} | 0
.../types.ts => views/home/use-table.ts} | 22 +++++---
.../home/{index.module.scss => use-task-state.ts} | 0
12 files changed, 151 insertions(+), 40 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/card/index.tsx b/dolphinscheduler-ui-next/src/components/card/index.tsx
index daaea82..70ebb9a 100644
--- a/dolphinscheduler-ui-next/src/components/card/index.tsx
+++ b/dolphinscheduler-ui-next/src/components/card/index.tsx
@@ -22,6 +22,10 @@ const headerStyle = {
borderBottom: '1px solid var(--border-color)',
}
+const contentStyle = {
+ padding: '8px 10px',
+}
+
const props = {
title: String as PropType<string>,
}
@@ -32,7 +36,12 @@ const Card = defineComponent({
render() {
const { title, $slots } = this
return (
- <NCard title={title} size='small' headerStyle={headerStyle}>
+ <NCard
+ title={title}
+ size='small'
+ headerStyle={headerStyle}
+ contentStyle={contentStyle}
+ >
{$slots}
</NCard>
)
diff --git a/dolphinscheduler-ui-next/src/components/chart/index.ts b/dolphinscheduler-ui-next/src/components/chart/index.ts
index a2ff601..231171a 100644
--- a/dolphinscheduler-ui-next/src/components/chart/index.ts
+++ b/dolphinscheduler-ui-next/src/components/chart/index.ts
@@ -33,6 +33,8 @@ function initChart<Opt extends ECBasicOption>(
const globalProperties =
getCurrentInstance()?.appContext.config.globalProperties
+ option['backgroundColor'] = ''
+
const init = () => {
chart = globalProperties?.echarts.init(
domRef.value,
diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Bar.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Bar.tsx
index 417336f..d0c7e09 100644
--- a/dolphinscheduler-ui-next/src/components/chart/modules/Bar.tsx
+++ b/dolphinscheduler-ui-next/src/components/chart/modules/Bar.tsx
@@ -28,12 +28,20 @@ const props = {
type: [String, Number] as PropType<string | number>,
default: '100%',
},
+ xAxisData: {
+ type: Array as PropType<Array<string>>,
+ default: () => [],
+ },
+ seriesData: {
+ type: Array as PropType<Array<number>>,
+ default: () => [],
+ },
}
const BarChart = defineComponent({
name: 'BarChart',
props,
- setup() {
+ setup(props) {
const barChartRef: Ref<HTMLDivElement | null> = ref(null)
const option = {
@@ -53,7 +61,7 @@ const BarChart = defineComponent({
xAxis: [
{
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: props.xAxisData,
axisTick: {
alignWithLabel: true,
},
@@ -66,10 +74,9 @@ const BarChart = defineComponent({
],
series: [
{
- name: 'Direct',
type: 'bar',
barWidth: '60%',
- data: [10, 52, 200, 334, 390, 330, 220],
+ data: props.seriesData,
},
],
}
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 5b52520..c6e5cf2 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -68,9 +68,18 @@ const menu = {
token_manage: 'Token Manage',
}
+const home = {
+ task_state_statistics: 'Task State Statistics',
+ process_state_statistics: 'Process State Statistics',
+ process_definition_statistics: 'Process Definition Statistics',
+ number: 'Number',
+ state: 'State',
+}
+
export default {
login,
theme,
profile,
menu,
+ home,
}
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index d04610e..86661fd 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -68,9 +68,18 @@ const menu = {
token_manage: '令牌管理',
}
+const home = {
+ task_state_statistics: '任务状态统计',
+ process_state_statistics: '流程状态统计',
+ process_definition_statistics: '流程定义统计',
+ number: '数量',
+ state: '状态',
+}
+
export default {
login,
theme,
profile,
menu,
+ home,
}
diff --git a/dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts b/dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts
index 30a21c5..71333f9 100644
--- a/dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts
@@ -24,4 +24,15 @@ interface StateReq extends CodeReq {
startDate?: string
}
-export { CodeReq, StateReq }
+interface UserList {
+ userName: string
+ userId: number
+ count: number
+}
+
+interface ProcessDefinitionRes {
+ count: number
+ userList: UserList[]
+}
+
+export { CodeReq, StateReq, ProcessDefinitionRes }
diff --git a/dolphinscheduler-ui-next/src/views/home/index.module.scss b/dolphinscheduler-ui-next/src/views/home/index.module.scss
index 3e7c6c2..3221050 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/home/index.module.scss
@@ -14,3 +14,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+.card-table {
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx b/dolphinscheduler-ui-next/src/views/home/index.tsx
index 2f3b047..62d89d8 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@@ -16,20 +16,76 @@
*/
import { defineComponent } from 'vue'
+import { NGrid, NGi, NDataTable } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useTable } from './use-table'
+import { useProcessDefinition } from './use-process-definition'
import Card from '@/components/card'
import PieChart from '@/components/chart/modules/Pie'
-import GaugeChart from '@/components/chart/modules/Gauge'
import BarChart from '@/components/chart/modules/Bar'
+import styles from './index.module.scss'
+import type { ProcessDefinitionRes } from '@/service/modules/projects-analysis/types'
export default defineComponent({
name: 'home',
- setup() {},
+ setup() {
+ const { t } = useI18n()
+ const { getProcessDefinition, formatProcessDefinition } =
+ useProcessDefinition()
+ const processDefinition = getProcessDefinition()
+
+ return { t, processDefinition, formatProcessDefinition }
+ },
render() {
+ const { columnsRef } = useTable()
+ const { t, processDefinition, formatProcessDefinition } = this
+ const chartData =
+ Object.keys(processDefinition).length > 0 &&
+ formatProcessDefinition(processDefinition as ProcessDefinitionRes)
+
return (
<div>
- <Card title='test'>{{ default: () => <PieChart /> }}</Card>
- <Card title='test'>{{ default: () => <GaugeChart /> }}</Card>
- <Card title='test'>{{ default: () => <BarChart /> }}</Card>
+ <NGrid x-gap={12} cols={2}>
+ <NGi>
+ <Card title={t('home.task_state_statistics')}>
+ {{
+ default: () => (
+ <div class={styles['card-table']}>
+ <PieChart />
+ <NDataTable columns={columnsRef} />
+ </div>
+ ),
+ }}
+ </Card>
+ </NGi>
+ <NGi class={styles['card-table']}>
+ <Card title={t('home.process_state_statistics')}>
+ {{
+ default: () => (
+ <div class={styles['card-table']}>
+ <PieChart />
+ <NDataTable columns={columnsRef} />
+ </div>
+ ),
+ }}
+ </Card>
+ </NGi>
+ </NGrid>
+ <NGrid cols={1} style='margin-top: 12px;'>
+ <NGi>
+ <Card title={t('home.process_definition_statistics')}>
+ {{
+ default: () =>
+ chartData && (
+ <BarChart
+ xAxisData={chartData.xAxisData}
+ seriesData={chartData.seriesData}
+ />
+ ),
+ }}
+ </Card>
+ </NGi>
+ </NGrid>
</div>
)
},
diff --git a/dolphinscheduler-ui-next/src/components/card/index.tsx b/dolphinscheduler-ui-next/src/views/home/use-process-definition.ts
similarity index 52%
copy from dolphinscheduler-ui-next/src/components/card/index.tsx
copy to dolphinscheduler-ui-next/src/views/home/use-process-definition.ts
index daaea82..cc97464 100644
--- a/dolphinscheduler-ui-next/src/components/card/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/use-process-definition.ts
@@ -15,28 +15,25 @@
* limitations under the License.
*/
-import { defineComponent, PropType } from 'vue'
-import { NCard } from 'naive-ui'
+import { useAsyncState } from '@vueuse/core'
+import { countDefinitionByUser } from '@/service/modules/projects-analysis'
+import type { ProcessDefinitionRes } from '@/service/modules/projects-analysis/types'
-const headerStyle = {
- borderBottom: '1px solid var(--border-color)',
-}
+export function useProcessDefinition() {
+ const getProcessDefinition = () => {
+ const { state } = useAsyncState(
+ countDefinitionByUser({ projectCode: 0 }),
+ {}
+ )
+ return state
+ }
-const props = {
- title: String as PropType<string>,
-}
+ const formatProcessDefinition = (data: ProcessDefinitionRes) => {
+ const xAxisData: Array<string> = data.userList.map((item) => item.userName)
+ const seriesData: Array<number> = data.userList.map((item) => item.count)
-const Card = defineComponent({
- name: 'Card',
- props,
- render() {
- const { title, $slots } = this
- return (
- <NCard title={title} size='small' headerStyle={headerStyle}>
- {$slots}
- </NCard>
- )
- },
-})
+ return { xAxisData, seriesData }
+ }
-export default Card
+ return { getProcessDefinition, formatProcessDefinition }
+}
diff --git a/dolphinscheduler-ui-next/src/views/home/index.module.scss b/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
similarity index 100%
copy from dolphinscheduler-ui-next/src/views/home/index.module.scss
copy to dolphinscheduler-ui-next/src/views/home/use-process-state.ts
diff --git a/dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts b/dolphinscheduler-ui-next/src/views/home/use-table.ts
similarity index 68%
copy from dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts
copy to dolphinscheduler-ui-next/src/views/home/use-table.ts
index 30a21c5..81bdc6a 100644
--- a/dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts
+++ b/dolphinscheduler-ui-next/src/views/home/use-table.ts
@@ -15,13 +15,19 @@
* limitations under the License.
*/
-interface CodeReq {
- projectCode?: number
-}
+import { useI18n } from 'vue-i18n'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
-interface StateReq extends CodeReq {
- endDate?: string
- startDate?: string
-}
+export function useTable() {
+ const { t } = useI18n()
-export { CodeReq, StateReq }
+ const columnsRef: TableColumns<any> = [
+ { title: '#', key: '#' },
+ { title: t('home.number'), key: 'number' },
+ { title: t('home.state'), key: 'state' },
+ ]
+
+ return {
+ columnsRef,
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/views/home/index.module.scss b/dolphinscheduler-ui-next/src/views/home/use-task-state.ts
similarity index 100%
copy from dolphinscheduler-ui-next/src/views/home/index.module.scss
copy to dolphinscheduler-ui-next/src/views/home/use-task-state.ts