Browse Source

[Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does not support multiple worker. (#9061)

3.0.0/version-upgrade
songjianet 3 years ago committed by GitHub
parent
commit
659c610457
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
  2. 4
      dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
  3. 32
      dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
  4. 212
      dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
  5. 18
      dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
  6. 80
      dolphinscheduler-ui-next/src/views/monitor/servers/worker/worker-modal.tsx
  7. 21
      dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx

8
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 }

4
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' }

32
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;
}
}

212
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}
/>
</>
)
}
})

18
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 }
}

80
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

21
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'

Loading…
Cancel
Save