[Feature][UI Next] Add monitor worker. (#7922)

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

@@ -126,6 +126,16 @@ const monitor = {
     host: 'Host',
     directory: 'Directory',
   },
+  worker: {
+    cpu_usage: 'CPU Usage',
+    memory_usage: 'Memory Usage',
+    load_average: 'Load Average',
+    create_time: 'Create Time',
+    last_heartbeat_time: 'Last Heartbeat Time',
+    directory_detail: 'Directory Detail',
+    host: 'Host',
+    directory: 'Directory',
+  },
   db: {
     health_state: 'Health State',
     max_connections: 'Max Connections',

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

@@ -125,6 +125,16 @@ const monitor = {
     host: '主机',
     directory: '注册目录',
   },
+  worker: {
+    cpu_usage: '处理器使用量',
+    memory_usage: '内存使用量',
+    load_average: '平均负载量',
+    create_time: '创建时间',
+    last_heartbeat_time: '最后心跳时间',
+    directory_detail: '目录详情',
+    host: '主机',
+    directory: '注册目录',
+  },
   db: {
     health_state: '健康状态',
     max_connections: '最大连接数',

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

@@ -40,7 +40,7 @@ export default {
     {
       path: '/monitor/servers/worker',
       name: 'servers-worker',
-      component: components['home'],
+      component: components['worker'],
       meta: {
         title: '服务管理-Worker',
       },

dolphinscheduler-ui-next/src/service/modules/monitor/types.ts

@@ -25,6 +25,7 @@ interface DatabaseRes {
   date: string
 }
 
+
 interface MasterRes {
   id: number
   host: string
@@ -35,4 +36,14 @@ interface MasterRes {
   lastHeartbeatTime: string
 }
 
-export { DatabaseRes, MasterRes }
+interface WorkerRes {
+  id: number
+  host: string
+  port: number
+  zkDirectories: string[]
+  resInfo: string
+  createTime: string
+  lastHeartbeatTime: string
+}
+
+export { DatabaseRes, MasterRes, WorkerRes }

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

@@ -20,7 +20,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 160px;
+  min-height: 240px;
 }
 
 .health {

dolphinscheduler-ui-next/src/views/monitor/servers/db/index.tsx

@@ -38,7 +38,7 @@ const db = defineComponent({
     const { t, databaseRef } = this
 
     return (
-      <NGrid x-gap='12' y-gap='8' cols='2 xl:4' responsive='screen'>
+      <NGrid x-gap='12' y-gap='8' cols='2 2xl:4' responsive='screen'>
         <NGi>
           <Card title={t('monitor.db.health_state')}>
             <div class={styles.health}>

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

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+@mixin base {
+  font-size: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.header-card {
+  margin-bottom: 8px;
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      margin-right: 20px;
+    }
+  }
+
+  .link-btn {
+    color: #579cd8;
+    cursor: pointer;
+
+    &:hover {
+      color: #80bef7;
+    }
+  }
+}
+
+.card {
+  @include base;
+}
+
+.load-average {
+  @include base;
+  color: dodgerblue;
+}

dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx

@@ -0,0 +1,136 @@
+/*
+ * 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, NCard, NNumberAnimation, NDataTable } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useWorker } from './use-worker'
+import styles from './index.module.scss'
+import Card from '@/components/card'
+import Gauge from '@/components/chart/modules/Gauge'
+import Modal from '@/components/modal'
+import type { WorkerRes } from '@/service/modules/monitor/types'
+import type { Ref } from 'vue'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
+
+const master = defineComponent({
+  name: 'master',
+  setup() {
+    let showModalRef = ref(false)
+    const { t } = useI18n()
+    const { getWorker } = useWorker()
+    const workerRef: Ref<Array<WorkerRes>> = ref(getWorker())
+    const columnsRef: TableColumns<any> = [
+      { title: '#', key: 'id' },
+      { title: t('monitor.worker.directory'), key: 'directory' },
+    ]
+
+    return { t, workerRef, showModalRef, columnsRef }
+  },
+  render() {
+    const { t, workerRef, columnsRef } = this
+
+    return (
+      <div>
+        <NCard class={styles['header-card']}>
+          <div class={styles['content']}>
+            <p>
+              <span class={styles.left}>{`${t('monitor.worker.host')}: ${
+                workerRef[0] ? workerRef[0].host : ' - '
+              }`}</span>
+              <span
+                class={styles['link-btn']}
+                onClick={() => (this.showModalRef = true)}
+              >
+                {t('monitor.worker.directory_detail')}
+              </span>
+            </p>
+            <p>
+              <span class={styles.left}>{`${t('monitor.worker.create_time')}: ${
+                workerRef[0] ? workerRef[0].createTime : ' - '
+              }`}</span>
+              <span>{`${t('monitor.worker.last_heartbeat_time')}: ${
+                workerRef[0] ? workerRef[0].lastHeartbeatTime : ' - '
+              }`}</span>
+            </p>
+          </div>
+        </NCard>
+        <NGrid x-gap='12' cols='3'>
+          <NGi>
+            <Card title={t('monitor.worker.cpu_usage')}>
+              <div class={styles.card}>
+                {workerRef[0] && (
+                  <Gauge
+                    data={(
+                      JSON.parse(workerRef[0].resInfo).cpuUsage * 100
+                    ).toFixed(2)}
+                  />
+                )}
+              </div>
+            </Card>
+          </NGi>
+          <NGi>
+            <Card title={t('monitor.worker.memory_usage')}>
+              <div class={styles.card}>
+                {workerRef[0] && (
+                  <Gauge
+                    data={(
+                      JSON.parse(workerRef[0].resInfo).memoryUsage * 100
+                    ).toFixed(2)}
+                  />
+                )}
+              </div>
+            </Card>
+          </NGi>
+          <NGi>
+            <Card title={t('monitor.worker.load_average')}>
+              <div class={[styles.card, styles['load-average']]}>
+                {workerRef[0] && (
+                  <NNumberAnimation
+                    precision={2}
+                    from={0}
+                    to={JSON.parse(workerRef[0].resInfo).loadAverage}
+                  />
+                )}
+              </div>
+            </Card>
+          </NGi>
+        </NGrid>
+        <Modal
+          title={t('monitor.worker.directory_detail')}
+          show={this.showModalRef}
+          cancelShow={false}
+          onConfirm={() => (this.showModalRef = false)}
+        >
+          {{
+            default: () =>
+              workerRef[0] && (
+                <NDataTable
+                  columns={columnsRef}
+                  data={workerRef[0].zkDirectories.map((item, index) => { return {id: index + 1, directory: item} })}
+                  striped
+                  size={'small'}
+                />
+              ),
+          }}
+        </Modal>
+      </div>
+    )
+  },
+})
+
+export default master

dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 {listWorker} from '@/service/modules/monitor'
+
+export function useWorker() {
+  const getWorker = () => {
+    const { state } = useAsyncState(listWorker(), [])
+    return state
+  }
+
+  return { getWorker }
+}