This is an automated email from the ASF dual-hosted git repository.
caishunfeng 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 659c610 [Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does
not support multiple worker. (#9061)
659c610 is described below
commit 659c610457c566160b9211764580eab93fdf8c01
Author: songjianet <[email protected]>
AuthorDate: Mon Mar 21 20:00:25 2022 +0800
[Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does not support
multiple worker. (#9061)
---
.../src/service/modules/monitor/types.ts | 8 +-
.../src/views/monitor/servers/master/index.tsx | 4 +-
.../views/monitor/servers/worker/index.module.scss | 32 +---
.../src/views/monitor/servers/worker/index.tsx | 212 +++++++++++----------
.../src/views/monitor/servers/worker/use-worker.ts | 18 +-
.../views/monitor/servers/worker/worker-modal.tsx | 80 ++++++++
.../task-group/option/components/form-modal.tsx | 21 +-
7 files changed, 233 insertions(+), 142 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
b/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
index 4361542..371b367 100644
--- a/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
@@ -25,7 +25,7 @@ interface DatabaseRes {
date: string
}
-interface MasterRes {
+interface MasterNode {
id: number
host: string
port: number
@@ -35,14 +35,14 @@ interface MasterRes {
lastHeartbeatTime: string
}
-interface WorkerRes {
+interface WorkerNode {
id: number
host: string
port: number
- zkDirectories: string[]
+ zkDirectories: Array<string>
resInfo: string
createTime: string
lastHeartbeatTime: string
}
-export { DatabaseRes, MasterRes, WorkerRes }
+export { DatabaseRes, MasterNode, WorkerNode }
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 2d5f116..d1ca9fc 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
@@ -23,7 +23,7 @@ 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 { MasterNode } from '@/service/modules/monitor/types'
import type { Ref } from 'vue'
import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
@@ -33,7 +33,7 @@ const master = defineComponent({
const showModalRef = ref(false)
const { t } = useI18n()
const { getMaster } = useMaster()
- const masterRef: Ref<Array<MasterRes>> = ref(getMaster())
+ const masterRef: Ref<Array<MasterNode>> = ref(getMaster())
const columnsRef: TableColumns<any> = [
{ title: '#', key: 'index' },
{ title: t('monitor.master.directory'), key: 'directory' }
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
index f882aff..c7cfae9 100644
---
a/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
+++
b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
@@ -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/worker/index.tsx
b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
index 4c556d2..7de5c39 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
@@ -15,122 +15,136 @@
* 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 { 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 WorkerModal from './worker-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 { WorkerNode } from '@/service/modules/monitor/types'
const master = defineComponent({
name: 'master',
setup() {
const showModalRef = ref(false)
const { t } = useI18n()
- const { getWorker } = useWorker()
- const workerRef: Ref<Array<WorkerRes>> = ref(getWorker())
- const columnsRef: TableColumns<any> = [
- { title: '#', key: 'index', render: (row, index) => index + 1 },
- { title: t('monitor.worker.directory'), key: 'directory' }
- ]
+ const { variables, getTableWorker } = useWorker()
+ const zkDirectoryRef: Ref<Array<RowData>> = ref([])
- return { t, workerRef, showModalRef, columnsRef }
+ const clickDetails = (zkDirectories: Array<string>) => {
+ zkDirectoryRef.value = zkDirectories.map((zkItem) => {
+ return {
+ directory: zkItem
+ }
+ })
+ showModalRef.value = true
+ }
+
+ const onConfirmModal = () => {
+ showModalRef.value = false
+ }
+
+ onMounted(() => {
+ getTableWorker()
+ })
+
+ return {
+ t,
+ ...toRefs(variables),
+ clickDetails,
+ onConfirmModal,
+ showModalRef,
+ zkDirectoryRef
+ }
},
render() {
- const { t, workerRef, 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.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, unused) => {
- return { directory: item }
- })}
- striped
- size={'small'}
- />
- )
- }}
- </Modal>
- </div>
+ <>
+ <NSpace vertical size={25}>
+ {this.data.map((item: WorkerNode) => {
+ return (
+ <NSpace vertical>
+ <NCard>
+ <NSpace justify='space-between'>
+ <NSpace>
+ <span>{`${t('monitor.worker.host')}: ${
+ item ? item.host : ' - '
+ }`}</span>
+ <span
+ class={styles['link-btn']}
+ onClick={() => clickDetails(item.zkDirectories)}
+ >
+ {t('monitor.worker.directory_detail')}
+ </span>
+ </NSpace>
+ <NSpace>
+ <span>{`${t('monitor.worker.create_time')}: ${
+ item ? item.createTime : ' - '
+ }`}</span>
+ <span>{`${t('monitor.worker.last_heartbeat_time')}: ${
+ item ? item.lastHeartbeatTime : ' - '
+ }`}</span>
+ </NSpace>
+ </NSpace>
+ </NCard>
+ <NGrid x-gap='12' cols='3'>
+ <NGi>
+ <Card title={t('monitor.worker.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.worker.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.worker.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>
+ <WorkerModal
+ showModal={showModalRef}
+ data={zkDirectoryRef}
+ onConfirmModal={onConfirmModal}
+ />
+ </>
)
}
})
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
index 20bb858..06ec70b 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
@@ -15,14 +15,26 @@
* limitations under the License.
*/
+import { reactive } from 'vue'
import { useAsyncState } from '@vueuse/core'
import { listWorker } from '@/service/modules/monitor'
+import type { WorkerNode } from '@/service/modules/monitor/types'
export function useWorker() {
- const getWorker = () => {
- const { state } = useAsyncState(listWorker(), [])
+ const variables = reactive({
+ data: []
+ })
+
+ const getTableWorker = () => {
+ const { state } = useAsyncState(
+ listWorker().then((res: Array<WorkerNode>) => {
+ variables.data = res as any
+ }),
+ []
+ )
+
return state
}
- return { getWorker }
+ return { variables, getTableWorker }
}
diff --git
a/dolphinscheduler-ui-next/src/views/monitor/servers/worker/worker-modal.tsx
b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/worker-modal.tsx
new file mode 100644
index 0000000..f90ab5c
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/worker/worker-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 WorkerModal = 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.worker.directory'), key: 'directory' }
+ ]
+
+ const onConfirm = () => {
+ ctx.emit('confirmModal')
+ }
+
+ return { t, columnsRef, onConfirm }
+ },
+ render() {
+ const { t, columnsRef, onConfirm } = this
+
+ return (
+ <Modal
+ title={t('monitor.worker.directory_detail')}
+ show={this.showModal}
+ cancelShow={false}
+ onConfirm={onConfirm}
+ >
+ {{
+ default: () => (
+ <NDataTable
+ columns={columnsRef}
+ data={this.data}
+ striped
+ size={'small'}
+ />
+ )
+ }}
+ </Modal>
+ )
+ }
+})
+
+export default WorkerModal
diff --git
a/dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx
b/dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx
index 011a366..47be759 100644
---
a/dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx
+++
b/dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx
@@ -115,21 +115,20 @@ const FormModal = defineComponent({
placeholder={t('resource.task_group_option.please_enter_name')}
/>
</NFormItem>
- { this.status === 0 && (
- <NFormItem
+ {this.status === 0 && (
+ <NFormItem
label={t('resource.task_group_option.project_name')}
path='projectCode'
- >
+ >
<NSelect
- options={projectOptions}
- v-model:value={this.formData.projectCode}
- placeholder={t(
- 'resource.task_group_option.please_select_project'
- )}
+ options={projectOptions}
+ v-model:value={this.formData.projectCode}
+ placeholder={t(
+ 'resource.task_group_option.please_select_project'
+ )}
/>
- </NFormItem>
- )
- }
+ </NFormItem>
+ )}
<NFormItem
label={t('resource.task_group_option.resource_pool_size')}
path='groupSize'
