Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
三久
DolphinScheduler
提交
659c6104
DolphinScheduler
项目概览
三久
/
DolphinScheduler
与 Fork 源项目一致
Fork自
apache / DolphinScheduler
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
DolphinScheduler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
659c6104
编写于
3月 21, 2022
作者:
S
songjianet
提交者:
GitHub
3月 21, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
[Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does not support multiple worker. (#9061)
上级
63a10037
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
233 addition
and
142 deletion
+233
-142
dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
...hinscheduler-ui-next/src/service/modules/monitor/types.ts
+4
-4
dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
...eduler-ui-next/src/views/monitor/servers/master/index.tsx
+2
-2
dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
...i-next/src/views/monitor/servers/worker/index.module.scss
+9
-23
dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
...eduler-ui-next/src/views/monitor/servers/worker/index.tsx
+113
-99
dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
...er-ui-next/src/views/monitor/servers/worker/use-worker.ts
+15
-3
dolphinscheduler-ui-next/src/views/monitor/servers/worker/worker-modal.tsx
...ui-next/src/views/monitor/servers/worker/worker-modal.tsx
+80
-0
dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx
...iews/resource/task-group/option/components/form-modal.tsx
+10
-11
未找到文件。
dolphinscheduler-ui-next/src/service/modules/monitor/types.ts
浏览文件 @
659c6104
...
...
@@ -25,7 +25,7 @@ interface DatabaseRes {
date
:
string
}
interface
Master
Res
{
interface
Master
Node
{
id
:
number
host
:
string
port
:
number
...
...
@@ -35,14 +35,14 @@ interface MasterRes {
lastHeartbeatTime
:
string
}
interface
Worker
Res
{
interface
Worker
Node
{
id
:
number
host
:
string
port
:
number
zkDirectories
:
string
[]
zkDirectories
:
Array
<
string
>
resInfo
:
string
createTime
:
string
lastHeartbeatTime
:
string
}
export
{
DatabaseRes
,
Master
Res
,
WorkerRes
}
export
{
DatabaseRes
,
Master
Node
,
WorkerNode
}
dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
浏览文件 @
659c6104
...
...
@@ -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
{
Master
Res
}
from
'
@/service/modules/monitor/types
'
import
type
{
Master
Node
}
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
<
Master
Res
>>
=
ref
(
getMaster
())
const
masterRef
:
Ref
<
Array
<
Master
Node
>>
=
ref
(
getMaster
())
const
columnsRef
:
TableColumns
<
any
>
=
[
{
title
:
'
#
'
,
key
:
'
index
'
},
{
title
:
t
(
'
monitor.master.directory
'
),
key
:
'
directory
'
}
...
...
dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss
浏览文件 @
659c6104
...
...
@@ -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
;
}
}
dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx
浏览文件 @
659c6104
...
...
@@ -15,122 +15,136 @@
* limitations under the License.
*/
import
{
defineComponent
,
ref
}
from
'
vue
'
import
{
NGrid
,
NGi
,
NCard
,
NNumberAnimation
,
N
DataTabl
e
}
from
'
naive-ui
'
import
{
defineComponent
,
onMounted
,
ref
,
toRefs
}
from
'
vue
'
import
{
NGrid
,
NGi
,
NCard
,
NNumberAnimation
,
N
Spac
e
}
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
}
/>
</>
)
}
})
...
...
dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts
浏览文件 @
659c6104
...
...
@@ -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
{
get
Worker
}
return
{
variables
,
getTable
Worker
}
}
dolphinscheduler-ui-next/src/views/monitor/servers/worker/worker-modal.tsx
0 → 100644
浏览文件 @
659c6104
/*
* 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
dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx
浏览文件 @
659c6104
...
...
@@ -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'
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录