Browse Source

[Feature][UI Next] Add monitor worker. (#7922)

3.0.0/version-upgrade
songjianet 3 years ago committed by GitHub
parent
commit
106744448b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 10
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  2. 10
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  3. 2
      dolphinscheduler-ui-next/src/router/modules/monitor.ts
  4. 13
      dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
  5. 2
      dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss
  6. 2
      dolphinscheduler-ui-next/src/views/monitor/servers/db/index.tsx
  7. 56
      dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
  8. 136
      dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
  9. 28
      dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts

10
dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@ -126,6 +126,16 @@ const monitor = {
host: 'Host', host: 'Host',
directory: 'Directory', 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: { db: {
health_state: 'Health State', health_state: 'Health State',
max_connections: 'Max Connections', max_connections: 'Max Connections',

10
dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@ -125,6 +125,16 @@ const monitor = {
host: '主机', host: '主机',
directory: '注册目录', directory: '注册目录',
}, },
worker: {
cpu_usage: '处理器使用量',
memory_usage: '内存使用量',
load_average: '平均负载量',
create_time: '创建时间',
last_heartbeat_time: '最后心跳时间',
directory_detail: '目录详情',
host: '主机',
directory: '注册目录',
},
db: { db: {
health_state: '健康状态', health_state: '健康状态',
max_connections: '最大连接数', max_connections: '最大连接数',

2
dolphinscheduler-ui-next/src/router/modules/monitor.ts

@ -40,7 +40,7 @@ export default {
{ {
path: '/monitor/servers/worker', path: '/monitor/servers/worker',
name: 'servers-worker', name: 'servers-worker',
component: components['home'], component: components['worker'],
meta: { meta: {
title: '服务管理-Worker', title: '服务管理-Worker',
}, },

13
dolphinscheduler-ui-next/src/service/modules/monitor/types.ts

@ -25,6 +25,7 @@ interface DatabaseRes {
date: string date: string
} }
interface MasterRes { interface MasterRes {
id: number id: number
host: string host: string
@ -35,4 +36,14 @@ interface MasterRes {
lastHeartbeatTime: string 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 }

2
dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss

@ -20,7 +20,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 160px; min-height: 240px;
} }
.health { .health {

2
dolphinscheduler-ui-next/src/views/monitor/servers/db/index.tsx

@ -38,7 +38,7 @@ const db = defineComponent({
const { t, databaseRef } = this const { t, databaseRef } = this
return ( return (
<NGrid x-gap='12' y-gap='8' cols='2 xl:4' responsive='screen'> <NGrid x-gap='12' y-gap='8' cols='2 2xl:4' responsive='screen'>
<NGi> <NGi>
<Card title={t('monitor.db.health_state')}> <Card title={t('monitor.db.health_state')}>
<div class={styles.health}> <div class={styles.health}>

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

136
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<Array<WorkerRes>> = ref(getWorker())
const columnsRef: TableColumns<any> = [
{ title: '#', key: 'id' },
{ title: t('monitor.worker.directory'), key: 'directory' },
]
return { t, workerRef, showModalRef, columnsRef }
},
render() {
const { t, workerRef, columnsRef } = 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, index) => { return {id: index + 1, directory: item} })}
striped
size={'small'}
/>
),
}}
</Modal>
</div>
)
},
})
export default master

28
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 }
}
Loading…
Cancel
Save