From f5aca0f11b717bfb4c1665bf112a6c88098da7bb Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Mon, 10 Jan 2022 16:40:50 +0800 Subject: [PATCH] [Feature][UI Next] Add monitor master. (#7917) --- .../src/components/chart/modules/Gauge.tsx | 9 +- .../src/components/modal/index.module.scss | 4 +- .../src/components/modal/index.tsx | 12 +- .../content/components/sidebar/index.tsx | 1 - .../src/layouts/content/index.tsx | 10 +- .../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 | 12 +- .../monitor/servers/master/index.module.scss | 56 ++++++++ .../views/monitor/servers/master/index.tsx | 136 ++++++++++++++++++ .../monitor/servers/master/use-master.ts | 28 ++++ 12 files changed, 274 insertions(+), 16 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/monitor/servers/master/index.module.scss create mode 100644 dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx create mode 100644 dolphinscheduler-ui-next/src/views/monitor/servers/master/use-master.ts diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Gauge.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Gauge.tsx index 5bb9ec144f..4abab3f41d 100644 --- a/dolphinscheduler-ui-next/src/components/chart/modules/Gauge.tsx +++ b/dolphinscheduler-ui-next/src/components/chart/modules/Gauge.tsx @@ -28,12 +28,15 @@ const props = { type: [String, Number] as PropType, default: 400, }, + data: { + type: [String, Number] as PropType, + }, } const GaugeChart = defineComponent({ name: 'GaugeChart', props, - setup() { + setup(props) { const gaugeChartRef: Ref = ref(null) const option = { @@ -73,12 +76,12 @@ const GaugeChart = defineComponent({ }, detail: { valueAnimation: true, - formatter: '{value} km/h', + formatter: '{value} %', color: 'auto', }, data: [ { - value: 70, + value: props.data, }, ], }, diff --git a/dolphinscheduler-ui-next/src/components/modal/index.module.scss b/dolphinscheduler-ui-next/src/components/modal/index.module.scss index b880442407..325e7c0f88 100644 --- a/dolphinscheduler-ui-next/src/components/modal/index.module.scss +++ b/dolphinscheduler-ui-next/src/components/modal/index.module.scss @@ -23,7 +23,7 @@ display: flex; justify-content: flex-end; - button:first-child { - margin-right: 20px; + button:last-child { + margin-left: 20px; } } diff --git a/dolphinscheduler-ui-next/src/components/modal/index.tsx b/dolphinscheduler-ui-next/src/components/modal/index.tsx index 4d7b705d6a..4fc3cdda25 100644 --- a/dolphinscheduler-ui-next/src/components/modal/index.tsx +++ b/dolphinscheduler-ui-next/src/components/modal/index.tsx @@ -32,6 +32,10 @@ const props = { cancelText: { type: String as PropType, }, + cancelShow: { + type: Boolean as PropType, + default: true, + }, confirmText: { type: String as PropType, }, @@ -72,9 +76,11 @@ const Modal = defineComponent({ default: () => renderSlot($slots, 'default'), footer: () => (
- - {this.cancelText || t('modal.cancel')} - + {this.cancelShow && ( + + {this.cancelText || t('modal.cancel')} + + )} { const key = menuStore.getMenuKey state.sideMenuOptions = - state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0] - .children || [] - state.isShowSide = - state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0] - .isShowSide || false + state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0] + .children || [] + state.isShowSide = + state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0] + .isShowSide || false } const getSideMenuOptions = (item: any) => { diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index 12c8a8666d..4de63d995b 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts @@ -116,6 +116,16 @@ const profile = { } const monitor = { + master: { + 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 24cf9f759e..73b64cd659 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts @@ -115,6 +115,16 @@ const profile = { } const monitor = { + master: { + 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 7dd1d49de0..76806d5382 100644 --- a/dolphinscheduler-ui-next/src/router/modules/monitor.ts +++ b/dolphinscheduler-ui-next/src/router/modules/monitor.ts @@ -32,7 +32,7 @@ export default { { path: '/monitor/servers/master', name: 'servers-master', - component: components['home'], + component: components['master'], meta: { title: '服务管理-Master', }, diff --git a/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts b/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts index 4bba49a403..1a651a12be 100644 --- a/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts +++ b/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts @@ -25,4 +25,14 @@ interface DatabaseRes { date: string } -export { DatabaseRes } +interface MasterRes { + id: number + host: string + port: number + zkDirectory: string + resInfo: string + createTime: string + lastHeartbeatTime: string +} + +export { DatabaseRes, MasterRes } diff --git a/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.module.scss b/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.module.scss new file mode 100644 index 0000000000..f882aff47f --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/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/master/index.tsx b/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx new file mode 100644 index 0000000000..8cd93c7027 --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/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 { useMaster } from './use-master' +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 { MasterRes } 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 { getMaster } = useMaster() + const masterRef: Ref> = ref(getMaster()) + const columnsRef: TableColumns = [ + { title: '#', key: 'id' }, + { title: t('monitor.master.directory'), key: 'directory' }, + ] + + return { t, masterRef, showModalRef, columnsRef } + }, + render() { + const { t, masterRef, columnsRef } = this + + return ( +
+ +
+

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

+

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

+
+ + + + +
+ {masterRef[0] && ( + + )} +
+ + + + +
+ {masterRef[0] && ( + + )} +
+ + + + +
+ {masterRef[0] && ( + + )} +
+ + + + (this.showModalRef = false)} + > + {{ + default: () => + masterRef[0] && ( + + ), + }} + +
+ ) + }, +}) + +export default master diff --git a/dolphinscheduler-ui-next/src/views/monitor/servers/master/use-master.ts b/dolphinscheduler-ui-next/src/views/monitor/servers/master/use-master.ts new file mode 100644 index 0000000000..e8782c61f7 --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/use-master.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 { listMaster } from '@/service/modules/monitor' + +export function useMaster() { + const getMaster = () => { + const { state } = useAsyncState(listMaster(), []) + return state + } + + return { getMaster } +}