@ali/topology-graph

Install

$ npm install

$ npm run dev
$ npm run build

使用方法

$ npm i @sysom/topology-graph

import TopologyGraph from '@sysom/topology-graph';
 interface ClusterHoverInfo {
    key: string;
    value: string;
}
 interface ClusterGPUInfo {
    id: string;
    name: string;
    style?: {
        [key: string]: any;
    };
    values: {
        [key: string]: ClusterHoverInfo[];
    };
}
 interface ClusterNodeInfo {
    id: string;
    name: string;
    gpu_list: ClusterGPUInfo[];
    style?: {
        [key: string]: any;
    };
    values: {
        [key: string]: ClusterHoverInfo[];
    };
}
 interface ClusterEdgeInfo {
    type: string;
    src_id: string;
    dst_id: string;
    style?: {
        [key: string]: any;
    };
    values: {
        [key: string]: ClusterHoverInfo[];
    };
}
 interface GetClusterTopologyResult {
    nodes: ClusterNodeInfo[];
    edges: ClusterEdgeInfo[];
}

 interface TopologyParams {
    colorMode: 'light' | 'dark'; //拓扑背景色
    pageSizeOptions?: number[]; //分页数组 默认[128, 256, 512, 1024]
    data: GetClusterTopologyResult; 
    refresh: () => void,  //刷新拓扑图数据方法
    dataTotal: number, //拓扑数据总数
    height?: number | string, //拓扑图高度
    loading?: boolean, //加载状态
    setLoading?: any, //设置加载状态方法
    paginationOnchange?: (page: number, pageSize: number) => void //分页方法(获取到选择的页码和页数)
 }

  <TopologyGraph
    data={topologyData}
    loading={loading} 
    setLoading={setLoading} 
    colorMode={'light'} 
    dataTotal={total}  
    refresh={refresh}
     />