You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
7.3 KiB
167 lines
7.3 KiB
1 month ago
|
from dash import dcc, html
|
||
|
|
import feffery_antd_components as fac
|
||
|
|
from flask import session
|
||
|
|
|
||
|
|
from . import profile
|
||
|
|
from api.modmag import get_cluster_info_api
|
||
|
|
|
||
|
|
from config.global_config import ApiBaseUrlConfig
|
||
|
|
|
||
|
|
import callbacks.model_c.modmag_c
|
||
|
|
from utils.common import process_string
|
||
|
|
from utils.mod_mag import get_supervisor_info, get_workers_info,get_worker_detail_info
|
||
|
|
|
||
|
|
def render(*args, **kwargs):
|
||
|
|
button_perms = kwargs.get('button_perms')
|
||
|
|
cluster_info = get_cluster_info_api()
|
||
|
|
supervisor_data = get_supervisor_info(cluster_info)
|
||
|
|
workers_data = get_workers_info(cluster_info)
|
||
|
|
worker_detail_data = get_worker_detail_info(cluster_info)
|
||
|
|
|
||
|
|
# 限制显示的行数
|
||
|
|
max_rows = 5
|
||
|
|
supervisor_data = supervisor_data[:max_rows]
|
||
|
|
|
||
|
|
return [
|
||
|
|
html.Div(
|
||
|
|
[
|
||
|
|
fac.AntdSpace(
|
||
|
|
[
|
||
|
|
fac.AntdDivider('Supervisor', innerTextOrientation='left', style={'margin': '0px'}),
|
||
|
|
fac.AntdTable(
|
||
|
|
columns=[
|
||
|
|
{
|
||
|
|
'dataIndex': '字段1',
|
||
|
|
'title': 'item',
|
||
|
|
'width': '33%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段2',
|
||
|
|
'title': 'value/Usage',
|
||
|
|
'width': '33%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段3',
|
||
|
|
'title': 'other/total',
|
||
|
|
'width': '34%'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
data=supervisor_data,
|
||
|
|
pagination=False, # 禁用分页
|
||
|
|
style={
|
||
|
|
'cursor': 'pointer',
|
||
|
|
'width': "100%",
|
||
|
|
'flex': '1 1 auto', # 分配 flex 比例
|
||
|
|
'fontSize': '0.8rem', # 减小字体以降低表格行高
|
||
|
|
},
|
||
|
|
),
|
||
|
|
fac.AntdDivider('Workers', innerTextOrientation='left', style={'margin': '10px 0px'}),
|
||
|
|
fac.AntdTable(
|
||
|
|
columns=[
|
||
|
|
{
|
||
|
|
'dataIndex': '字段1',
|
||
|
|
'title': 'item',
|
||
|
|
'width': '33%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段2',
|
||
|
|
'title': 'value/Usage',
|
||
|
|
'width': '33%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段3',
|
||
|
|
'title': 'other/total',
|
||
|
|
'width': '34%'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
data=workers_data,
|
||
|
|
pagination=False, # 禁用分页
|
||
|
|
style={
|
||
|
|
'cursor': 'pointer',
|
||
|
|
'width': "100%",
|
||
|
|
'flex': '1 1 auto', # 分配 flex 比例
|
||
|
|
'fontSize': '0.8rem', # 减小字体以降低表格行高
|
||
|
|
},
|
||
|
|
),
|
||
|
|
fac.AntdDivider('Worker-Details', innerTextOrientation='left', style={'margin': '10px 0px'}),
|
||
|
|
fac.AntdTable(
|
||
|
|
columns=[
|
||
|
|
{
|
||
|
|
'dataIndex': '字段1',
|
||
|
|
'title': 'Node Type',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段2',
|
||
|
|
'title': 'Address',
|
||
|
|
'width': '20%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段3',
|
||
|
|
'title': 'CPU Usage',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段4',
|
||
|
|
'title': 'CPU Total',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段5',
|
||
|
|
'title': 'Mem Usage',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段6',
|
||
|
|
'title': 'Mem Total',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段7',
|
||
|
|
'title': 'GPU Count',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段8',
|
||
|
|
'title': 'GPU Mem Usage',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'dataIndex': '字段9',
|
||
|
|
'title': 'GPU Mem Total',
|
||
|
|
'width': '10%'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
data=worker_detail_data,
|
||
|
|
pagination=False, # 禁用分页
|
||
|
|
style={
|
||
|
|
'cursor': 'pointer',
|
||
|
|
'width': "100%",
|
||
|
|
'flex': '1 1 auto', # 分配 flex 比例
|
||
|
|
'fontSize': '0.8rem', # 减小字体以降低表格行高
|
||
|
|
},
|
||
|
|
),
|
||
|
|
],
|
||
|
|
direction='vertical',
|
||
|
|
size='small', # 减小元素之间的间距
|
||
|
|
style={
|
||
|
|
'width': '100%',
|
||
|
|
# 'flexGrow': '1',
|
||
|
|
'overflowY': 'auto', # 使内容在超出时可以垂直滚动
|
||
|
|
'maxHeight': '500' # 设置最大高度为视口高度减去一些空间
|
||
|
|
}
|
||
|
|
)
|
||
|
|
],
|
||
|
|
style={
|
||
|
|
'width': '100%',
|
||
|
|
'height': '500',
|
||
|
|
'boxSizing': 'border-box',
|
||
|
|
'display': 'flex',
|
||
|
|
'flexDirection': 'column',
|
||
|
|
'justifyContent': 'flex-start', # 元素从顶部开始排列
|
||
|
|
'padding': '10px', # 减少内边距，节省空间
|
||
|
|
# 'overflow': 'auto' # 使内容在超出时可以滚动
|
||
|
|
}
|
||
|
|
)
|
||
|
|
]
|