[Feature][UI Next] Process Definition Statistics. (#7715)

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

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,

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,
         },
       ],
     }

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,
 }

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,
 }

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 }

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;
+}

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

dolphinscheduler-ui-next/src/views/home/use-process-definition.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { useAsyncState } from '@vueuse/core'
+import { countDefinitionByUser } from '@/service/modules/projects-analysis'
+import type { ProcessDefinitionRes } from '@/service/modules/projects-analysis/types'
+
+export function useProcessDefinition() {
+  const getProcessDefinition = () => {
+    const { state } = useAsyncState(
+      countDefinitionByUser({ projectCode: 0 }),
+      {}
+    )
+    return state
+  }
+
+  const formatProcessDefinition = (data: ProcessDefinitionRes) => {
+    const xAxisData: Array<string> = data.userList.map((item) => item.userName)
+    const seriesData: Array<number> = data.userList.map((item) => item.count)
+
+    return { xAxisData, seriesData }
+  }
+
+  return { getProcessDefinition, formatProcessDefinition }
+}

dolphinscheduler-ui-next/src/views/home/use-process-state.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */

dolphinscheduler-ui-next/src/views/home/use-table.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { useI18n } from 'vue-i18n'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
+
+export function useTable() {
+  const { t } = useI18n()
+
+  const columnsRef: TableColumns<any> = [
+    { title: '#', key: '#' },
+    { title: t('home.number'), key: 'number' },
+    { title: t('home.state'), key: 'state' },
+  ]
+
+  return {
+    columnsRef,
+  }
+}

dolphinscheduler-ui-next/src/views/home/use-task-state.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */