This is an automated email from the ASF dual-hosted git repository.
zhongjiajie 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 1067444 [Feature][UI Next] Add monitor worker. (#7922)
1067444 is described below
commit 106744448bd156ce128282ad4ee1205db60149af
Author: songjianet <[email protected]>
AuthorDate: Mon Jan 10 18:16:16 2022 +0800
[Feature][UI Next] Add monitor worker. (#7922)
---
.../src/locales/modules/en_US.ts | 10 ++
.../src/locales/modules/zh_CN.ts | 10 ++
.../src/router/modules/monitor.ts | 2 +-
.../src/service/modules/monitor/types.ts | 13 +-
.../src/views/monitor/servers/db/index.module.scss | 2 +-
.../src/views/monitor/servers/db/index.tsx | 2 +-
.../servers/{db => worker}/index.module.scss | 35 ++++--
.../src/views/monitor/servers/worker/index.tsx | 136 +++++++++++++++++++++
.../{db/index.module.scss => worker/use-worker.ts} | 31 ++---
9 files changed, 203 insertions(+), 38 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 4de63d9..f1792c8 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index 73b64cd..9b3e0bd 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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: '最大连接数',
diff --git a/dolphinscheduler-ui-next/src/router/modules/monitor.ts
b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
index 76806d5..2a873ac 100644
--- a/dolphinscheduler-ui-next/src/router/modules/monitor.ts
+++ b/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',
},
diff --git a/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
b/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
index 1a651a1..e3b0e7b 100644
--- a/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
+++ b/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 }
diff --git
a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
b/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
index 7f531bd..f6ce120 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
+++ b/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 {
diff --git a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.tsx
b/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.tsx
index 83d3b00..fc4bc37 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.tsx
+++ b/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}>
diff --git
a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
similarity index 74%
copy from
dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
copy to
dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
index 7f531bd..f882aff 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
+++
b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
@@ -20,24 +20,37 @@
display: flex;
justify-content: center;
align-items: center;
- min-height: 160px;
+ min-height: 400px;
}
-.health {
- @include base;
-}
+.header-card {
+ margin-bottom: 8px;
+
+ .content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .left {
+ margin-right: 20px;
+ }
+ }
-.health-success {
- color: limegreen;
+ .link-btn {
+ color: #579cd8;
+ cursor: pointer;
+
+ &:hover {
+ color: #80bef7;
+ }
+ }
}
-.health-error {
- color: indianred;
+.card {
+ @include base;
}
-.connections {
+.load-average {
@include base;
color: dodgerblue;
}
-
-
diff --git
a/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
new file mode 100644
index 0000000..9b82b73
--- /dev/null
+++ b/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
diff --git
a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
similarity index 73%
copy from
dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
copy to dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
index 7f531bd..9b94e96 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
@@ -15,29 +15,14 @@
* limitations under the License.
*/
-@mixin base {
- font-size: 100px;
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 160px;
-}
-
-.health {
- @include base;
-}
-
-.health-success {
- color: limegreen;
-}
+import { useAsyncState } from '@vueuse/core'
+import {listWorker} from '@/service/modules/monitor'
-.health-error {
- color: indianred;
-}
+export function useWorker() {
+ const getWorker = () => {
+ const { state } = useAsyncState(listWorker(), [])
+ return state
+ }
-.connections {
- @include base;
- color: dodgerblue;
+ return { getWorker }
}
-
-
