You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/03/27 02:26:08 UTC
[dolphinscheduler] branch dev updated: [Fix][UI Next][V1.0.0-Alpha] Monitoring Center does not support multiple (#9207)
This is an automated email from the ASF dual-hosted git repository.
songjian 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 8d60e92 [Fix][UI Next][V1.0.0-Alpha] Monitoring Center does not support multiple (#9207)
8d60e92 is described below
commit 8d60e920adcde0c8807b5aed6733939ef0ee8b23
Author: zhangxinruu <10...@users.noreply.github.com>
AuthorDate: Sun Mar 27 10:25:57 2022 +0800
[Fix][UI Next][V1.0.0-Alpha] Monitoring Center does not support multiple (#9207)
* fixSupportMultipleMaster
* clear
---
.../views/monitor/servers/master/index.module.scss | 34 +---
.../src/views/monitor/servers/master/index.tsx | 212 +++++++++++----------
.../views/monitor/servers/master/master-modal.tsx | 80 ++++++++
.../src/views/monitor/servers/master/use-master.ts | 18 +-
4 files changed, 219 insertions(+), 125 deletions(-)
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
index f882aff..0347c54 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.module.scss
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-@mixin base {
+ @mixin base {
font-size: 100px;
display: flex;
justify-content: center;
@@ -23,29 +23,6 @@
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;
}
@@ -54,3 +31,12 @@
@include base;
color: dodgerblue;
}
+
+.link-btn {
+ color: #579cd8;
+ cursor: pointer;
+
+ &:hover {
+ color: #80bef7;
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx b/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
index d1ca9fc..13b7bd1 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
@@ -15,120 +15,138 @@
* limitations under the License.
*/
-import { defineComponent, ref } from 'vue'
-import { NGrid, NGi, NCard, NNumberAnimation, NDataTable } from 'naive-ui'
+import { defineComponent, onMounted, ref, toRefs } from 'vue'
+import {
+ NGrid,
+ NGi,
+ NCard,
+ NNumberAnimation,
+ NSpace
+} 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 { MasterNode } from '@/service/modules/monitor/types'
+import MasterModal from './master-modal'
import type { Ref } from 'vue'
-import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
+import type { RowData } from 'naive-ui/es/data-table/src/interface'
+import type { MasterNode } from '@/service/modules/monitor/types'
const master = defineComponent({
name: 'master',
setup() {
const showModalRef = ref(false)
const { t } = useI18n()
- const { getMaster } = useMaster()
- const masterRef: Ref<Array<MasterNode>> = ref(getMaster())
- const columnsRef: TableColumns<any> = [
- { title: '#', key: 'index' },
- { title: t('monitor.master.directory'), key: 'directory' }
- ]
+ const { variables, getTableMaster } = useMaster()
+ const zkDirectoryRef: Ref<Array<RowData>> = ref([])
+
+ const clickDetails = (zkDirectories: string) => {
+ zkDirectoryRef.value = [{ directory: zkDirectories, index: 1 }]
+ showModalRef.value = true
+ }
+
+ const onConfirmModal = () => {
+ showModalRef.value = false
+ }
+
+ onMounted(() => {
+ getTableMaster()
+ })
- return { t, masterRef, showModalRef, columnsRef }
+ return {
+ t,
+ ...toRefs(variables),
+ clickDetails,
+ onConfirmModal,
+ showModalRef,
+ zkDirectoryRef
+ }
},
render() {
- const { t, masterRef, columnsRef } = this
+ const { t, clickDetails, onConfirmModal, showModalRef, zkDirectoryRef } =
+ this
return (
- <div>
- <NCard class={styles['header-card']}>
- <div class={styles['content']}>
- <p>
- <span class={styles.left}>{`${t('monitor.master.host')}: ${
- masterRef[0] ? masterRef[0].host : ' - '
- }`}</span>
- <span
- class={styles['link-btn']}
- onClick={() => (this.showModalRef = true)}
- >
- {t('monitor.master.directory_detail')}
- </span>
- </p>
- <p>
- <span class={styles.left}>{`${t('monitor.master.create_time')}: ${
- masterRef[0] ? masterRef[0].createTime : ' - '
- }`}</span>
- <span>{`${t('monitor.master.last_heartbeat_time')}: ${
- masterRef[0] ? masterRef[0].lastHeartbeatTime : ' - '
- }`}</span>
- </p>
- </div>
- </NCard>
- <NGrid x-gap='12' cols='3'>
- <NGi>
- <Card title={t('monitor.master.cpu_usage')}>
- <div class={styles.card}>
- {masterRef[0] && (
- <Gauge
- data={(
- JSON.parse(masterRef[0].resInfo).cpuUsage * 100
- ).toFixed(2)}
- />
- )}
- </div>
- </Card>
- </NGi>
- <NGi>
- <Card title={t('monitor.master.memory_usage')}>
- <div class={styles.card}>
- {masterRef[0] && (
- <Gauge
- data={(
- JSON.parse(masterRef[0].resInfo).memoryUsage * 100
- ).toFixed(2)}
- />
- )}
- </div>
- </Card>
- </NGi>
- <NGi>
- <Card title={t('monitor.master.load_average')}>
- <div class={[styles.card, styles['load-average']]}>
- {masterRef[0] && (
- <NNumberAnimation
- precision={2}
- from={0}
- to={JSON.parse(masterRef[0].resInfo).loadAverage}
- />
- )}
- </div>
- </Card>
- </NGi>
- </NGrid>
- <Modal
- title={t('monitor.master.directory_detail')}
- show={this.showModalRef}
- cancelShow={false}
- onConfirm={() => (this.showModalRef = false)}
- >
- {{
- default: () =>
- masterRef[0] && (
- <NDataTable
- columns={columnsRef}
- data={[{ index: 1, directory: masterRef[0].zkDirectory }]}
- striped
- size={'small'}
- />
- )
- }}
- </Modal>
- </div>
+ <>
+ <NSpace vertical size={25}>
+ {this.data.map((item: MasterNode) => {
+ return (
+ <NSpace vertical>
+ <NCard>
+ <NSpace justify='space-between'>
+ <NSpace>
+ <span>{`${t('monitor.master.host')}: ${
+ item ? item.host : ' - '
+ }`}</span>
+ <span
+ class={styles['link-btn']}
+ onClick={() => clickDetails(item.zkDirectory)}
+ >
+ {t('monitor.master.directory_detail')}
+ </span>
+ </NSpace>
+ <NSpace>
+ <span>{`${t('monitor.master.create_time')}: ${
+ item ? item.createTime : ' - '
+ }`}</span>
+ <span>{`${t('monitor.master.last_heartbeat_time')}: ${
+ item ? item.lastHeartbeatTime : ' - '
+ }`}</span>
+ </NSpace>
+ </NSpace>
+ </NCard>
+ <NGrid x-gap='12' cols='3'>
+ <NGi>
+ <Card title={t('monitor.master.cpu_usage')}>
+ <div class={styles.card}>
+ {item && (
+ <Gauge
+ data={(
+ JSON.parse(item.resInfo).cpuUsage * 100
+ ).toFixed(2)}
+ />
+ )}
+ </div>
+ </Card>
+ </NGi>
+ <NGi>
+ <Card title={t('monitor.master.memory_usage')}>
+ <div class={styles.card}>
+ {item && (
+ <Gauge
+ data={(
+ JSON.parse(item.resInfo).memoryUsage * 100
+ ).toFixed(2)}
+ />
+ )}
+ </div>
+ </Card>
+ </NGi>
+ <NGi>
+ <Card title={t('monitor.master.load_average')}>
+ <div class={[styles.card, styles['load-average']]}>
+ {item && (
+ <NNumberAnimation
+ precision={2}
+ from={0}
+ to={JSON.parse(item.resInfo).loadAverage}
+ />
+ )}
+ </div>
+ </Card>
+ </NGi>
+ </NGrid>
+ </NSpace>
+ )
+ })}
+ </NSpace>
+ <MasterModal
+ showModal={showModalRef}
+ data={zkDirectoryRef}
+ onConfirmModal={onConfirmModal}
+ ></MasterModal>
+ </>
)
}
})
diff --git a/dolphinscheduler-ui-next/src/views/monitor/servers/master/master-modal.tsx b/dolphinscheduler-ui-next/src/views/monitor/servers/master/master-modal.tsx
new file mode 100644
index 0000000..0291f13
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/master-modal.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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 } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NDataTable } from 'naive-ui'
+import Modal from '@/components/modal'
+import type { PropType } from 'vue'
+import type {
+ RowData,
+ TableColumns
+} from 'naive-ui/es/data-table/src/interface'
+
+const props = {
+ showModal: {
+ type: Boolean as PropType<boolean>,
+ default: false
+ },
+ data: {
+ type: Array as PropType<Array<RowData>>,
+ default: () => []
+ }
+}
+
+const MasterModal = defineComponent({
+ props,
+ emits: ['confirmModal'],
+ setup(props, ctx) {
+ const { t } = useI18n()
+ const columnsRef: TableColumns<any> = [
+ { title: '#', key: 'index', render: (row, index) => index + 1 },
+ { title: t('monitor.master.directory'), key: 'directory' }
+ ]
+
+ const onConfirm = () => {
+ ctx.emit('confirmModal')
+ }
+
+ return { t, columnsRef, onConfirm }
+ },
+ render() {
+ const { t, columnsRef, onConfirm } = this
+
+ return (
+ <Modal
+ title={t('monitor.master.directory_detail')}
+ show={this.showModal}
+ cancelShow={false}
+ onConfirm={onConfirm}
+ >
+ {{
+ default: () => (
+ <NDataTable
+ columns={columnsRef}
+ data={this.data}
+ striped
+ size={'small'}
+ />
+ )
+ }}
+ </Modal>
+ )
+ }
+})
+
+export default MasterModal
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
index e8782c6..bd1e55e 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/master/use-master.ts
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/use-master.ts
@@ -15,14 +15,24 @@
* limitations under the License.
*/
+import { reactive } from 'vue'
import { useAsyncState } from '@vueuse/core'
import { listMaster } from '@/service/modules/monitor'
+import type { MasterNode } from '@/service/modules/monitor/types'
export function useMaster() {
- const getMaster = () => {
- const { state } = useAsyncState(listMaster(), [])
+ const variables = reactive({
+ data: []
+ })
+ const getTableMaster = () => {
+ const { state } = useAsyncState(
+ listMaster().then((res: Array<MasterNode>) => {
+ variables.data = res as any
+ }),
+ []
+ )
+
return state
}
-
- return { getMaster }
+ return { variables, getTableMaster }
}