[Feature][UI Next] Add statistics. (#7895)

* [Feature][UI Next] Add statistics.
* [Feature][UI Next] Add license head.

dolphinscheduler-ui-next/.gitignore

@@ -26,5 +26,4 @@ node_modules
 dist
 dist-ssr
 
-pnpm-lock.yaml
 .pnpm-debug.log

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -122,6 +122,13 @@ const monitor = {
     threads_connections: 'Threads Connections',
     threads_running_connections: 'Threads Running Connections',
   },
+  statistics: {
+    command_number_of_waiting_for_running:
+      'Command Number Of Waiting For Running',
+    failure_command_number: 'Failure Command Number',
+    tasks_number_of_waiting_running: 'Tasks Number Of Waiting Running',
+    task_number_of_ready_to_kill: 'Task Number Of Ready To Kill',
+  },
 }
 
 export default {

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -121,6 +121,12 @@ const monitor = {
     threads_connections: '当前连接数',
     threads_running_connections: '数据库当前活跃连接数',
   },
+  statistics: {
+    command_number_of_waiting_for_running: '待执行的命令数',
+    failure_command_number: '执行失败的命令数',
+    tasks_number_of_waiting_running: '待运行任务数',
+    task_number_of_ready_to_kill: '待杀死任务数',
+  },
 }
 
 export default {

dolphinscheduler-ui-next/src/router/modules/monitor.ts

@@ -53,5 +53,13 @@ export default {
         title: '服务管理-DB',
       },
     },
+    {
+      path: '/monitor/statistics/statistics',
+      name: 'statistics-statistics',
+      component: components['statistics'],
+      meta: {
+        title: '统计管理-Statistics',
+      },
+    },
   ],
 }

dolphinscheduler-ui-next/src/service/modules/projects-analysis/types.ts

@@ -45,4 +45,22 @@ interface TaskStateRes {
   taskCountDtos: TaskCountDto[]
 }
 
-export { CodeReq, StateReq, ProcessDefinitionRes, TaskStateRes }
+interface TaskQueueRes {
+  taskKill: number
+  taskQueue: number
+}
+
+interface CommandStateRes {
+  errorCount: number
+  normalCount: number
+  commandState: string
+}
+
+export {
+  CodeReq,
+  StateReq,
+  ProcessDefinitionRes,
+  TaskStateRes,
+  TaskQueueRes,
+  CommandStateRes,
+}

dolphinscheduler-ui-next/src/views/monitor/statistics/statistics/index.module.scss

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+.connections {
+  font-size: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 160px;
+  color: dodgerblue;
+}
+
+

dolphinscheduler-ui-next/src/views/monitor/statistics/statistics/index.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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 { defineComponent, ref } from 'vue'
+import { NGrid, NGi, NNumberAnimation } from 'naive-ui'
+import { useStatistics } from './use-statistics'
+import { useI18n } from 'vue-i18n'
+import Card from '@/components/card'
+import styles from './index.module.scss'
+import type { TaskQueueRes } from '@/service/modules/projects-analysis/types'
+
+const statistics = defineComponent({
+  name: 'statistics',
+  setup() {
+    const { t } = useI18n()
+    const { getStatistics } = useStatistics()
+    const statisticsRef = ref(getStatistics())
+
+    return { t, statisticsRef }
+  },
+  render() {
+    const { t, statisticsRef } = this
+
+    return (
+      <NGrid x-gap='12' y-gap='8' cols='2 xl:4' responsive='screen'>
+        <NGi>
+          <Card
+            title={t(
+              'monitor.statistics.command_number_of_waiting_for_running'
+            )}
+          >
+            <div class={styles.connections}>
+              {statisticsRef.command.length > 0 && (
+                <NNumberAnimation
+                  from={0}
+                  to={statisticsRef.command
+                    .map((item) => item.normalCount)
+                    .reduce((prev, next) => prev + next)}
+                />
+              )}
+            </div>
+          </Card>
+        </NGi>
+        <NGi>
+          <Card title={t('monitor.statistics.failure_command_number')}>
+            <div class={styles.connections}>
+              {statisticsRef.command.length > 0 && (
+                <NNumberAnimation
+                  from={0}
+                  to={statisticsRef.command
+                    .map((item) => item.errorCount)
+                    .reduce((prev, next) => prev + next)}
+                />
+              )}
+            </div>
+          </Card>
+        </NGi>
+        <NGi>
+          <Card title={t('monitor.statistics.tasks_number_of_waiting_running')}>
+            <div class={styles.connections}>
+              {Object.keys(statisticsRef.task).length > 0 && (
+                <NNumberAnimation
+                  from={0}
+                  to={(statisticsRef.task as TaskQueueRes).taskQueue}
+                />
+              )}
+            </div>
+          </Card>
+        </NGi>
+        <NGi>
+          <Card title={t('monitor.statistics.task_number_of_ready_to_kill')}>
+            <div class={styles.connections}>
+              {Object.keys(statisticsRef.task).length > 0 && (
+                <NNumberAnimation
+                  from={0}
+                  to={(statisticsRef.task as TaskQueueRes).taskKill}
+                />
+              )}
+            </div>
+          </Card>
+        </NGi>
+      </NGrid>
+    )
+  },
+})
+
+export default statistics

dolphinscheduler-ui-next/src/views/monitor/statistics/statistics/use-statistics.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 {
+  countQueueState,
+  countCommandState,
+} from '@/service/modules/projects-analysis'
+import { useAsyncState } from '@vueuse/core'
+import type { Ref } from 'vue'
+import type {
+  TaskQueueRes,
+  CommandStateRes,
+} from '@/service/modules/projects-analysis/types'
+
+export function useStatistics() {
+  const getTask = () => {
+    const { state } = useAsyncState(countQueueState(), {})
+    return state
+  }
+
+  const getCommand = () => {
+    const { state } = useAsyncState(countCommandState(), [])
+    return state
+  }
+
+  const getStatistics = () => {
+    const task: Ref<TaskQueueRes | {}> = getTask()
+    const command: Ref<Array<CommandStateRes>> = getCommand()
+    return { task, command }
+  }
+
+  return { getStatistics }
+}