From 106744448bd156ce128282ad4ee1205db60149af Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Mon, 10 Jan 2022 18:16:16 +0800 Subject: [PATCH] [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 +- .../monitor/servers/db/index.module.scss | 2 +- .../src/views/monitor/servers/db/index.tsx | 2 +- .../monitor/servers/worker/index.module.scss | 56 ++++++++ .../views/monitor/servers/worker/index.tsx | 136 ++++++++++++++++++ .../monitor/servers/worker/use-worker.ts | 28 ++++ 9 files changed, 255 insertions(+), 4 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss create mode 100644 dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx create mode 100644 dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index 4de63d995b..f1792c8f45 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 73b64cd659..9b3e0bd2e6 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 76806d5382..2a873ac389 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 1a651a12be..e3b0e7be52 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 7f531bd84c..f6ce120130 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 83d3b00184..fc4bc37155 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 ( - +
diff --git a/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss new file mode 100644 index 0000000000..f882aff47f --- /dev/null +++ b/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; +} 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 0000000000..9b82b73da7 --- /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> = ref(getWorker()) + const columnsRef: TableColumns = [ + { title: '#', key: 'id' }, + { title: t('monitor.worker.directory'), key: 'directory' }, + ] + + return { t, workerRef, showModalRef, columnsRef } + }, + render() { + const { t, workerRef, columnsRef } = this + + return ( +
+ +
+

+ {`${t('monitor.worker.host')}: ${ + workerRef[0] ? workerRef[0].host : ' - ' + }`} + (this.showModalRef = true)} + > + {t('monitor.worker.directory_detail')} + +

+

+ {`${t('monitor.worker.create_time')}: ${ + workerRef[0] ? workerRef[0].createTime : ' - ' + }`} + {`${t('monitor.worker.last_heartbeat_time')}: ${ + workerRef[0] ? workerRef[0].lastHeartbeatTime : ' - ' + }`} +

+
+ + + + +
+ {workerRef[0] && ( + + )} +
+ + + + +
+ {workerRef[0] && ( + + )} +
+ + + + +
+ {workerRef[0] && ( + + )} +
+ + + + (this.showModalRef = false)} + > + {{ + default: () => + workerRef[0] && ( + { return {id: index + 1, directory: item} })} + striped + size={'small'} + /> + ), + }} + +
+ ) + }, +}) + +export default master diff --git a/dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts new file mode 100644 index 0000000000..9b94e96c30 --- /dev/null +++ b/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 } +}