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'  # 使内容在超出时可以滚动
            }
        )
    ]