@riil-frontend/component-topology 2.1.5-dev.3 → 2.1.6

package/demo/3/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/CreateTopo.jsx

@@ -1,88 +0,0 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
-import {Button} from '@alifd/next';
-
-// import {createTopo, Topology, TitleBar, SearchWidget} from '@riil-frontend/component-topology';
-import {createTopo, Topology} from '../../../src';
-
-import request from './request';
-import topoData from './data/appInstall/data2';
-
-function TopoEditorDemo(props) {
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-      icons: [{
-        id: 'biz.1', // 如果以ciType.开头，节点无图标时默认按ciType匹配
-        name: '图标1',
-        url: 'public/icons/c_b_server.svg', // 图片地址
-        jsonUrl: null, // ht 拓扑使用
-      }]
-    });
-  }, []);
-
-  const Provider = topo.Provider;
-
-  // API：
-
-  // 创建拓扑图进入编辑模式
-  const createAndEnterEdit = async () => {
-    // TODO 转换格式
-    const data = {...topoData};
-    await topo.load(data, {
-      mode: 'edit'
-    });
-  };
-
-  // 初始化
-  useEffect(async () => {
-    await createAndEnterEdit();
-    return () => {
-      topo.exit();
-    }
-  }, []);
-
-  // 保存
-  const onSave = useCallback(async (ctx) => {
-    const {data, saveConfig} = ctx;
-    const {id, config, global, serialize} = data;
-    // 保存
-    await saveConfig();
-  }, []);
-
-  // 退出编辑模式
-  const onExitEditMode = useCallback(async () => {
-    await topo.exitEditMode();
-    // 重新加载拓扑
-    const data = {...topoData};
-    await topo.load(data);
-  }, []);
-
-  return (
-    <div style={{width: '100%'}}>
-      <div style={{display: 'flex', alignItems: 'center', paddingBottom: 16}}>
-        <div style={{flex: 1}}>
-          <Button type="primary" onClick={createAndEnterEdit} title="新建并进入编辑模式">新建</Button>  &nbsp; &nbsp;
-        </div>
-        <Button type="primary" onClick={() => { topo.triggerSaveEvent() }}>保存</Button>  &nbsp; &nbsp;
-        <Button onClick={onExitEditMode}>退出</Button>
-      </div>
-
-      <div style={{width: '100%', height: '500px', background: 'white'}}>
-        <Provider>
-          <Topology
-            topo={topo}
-            defaultEnterEditMode
-            titleBar={false}
-            onSave={onSave}
-          />
-        </Provider>
-      </div>
-    </div>
-  );
-}
-
-
-export default TopoEditorDemo;

package/demo/3/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/CustomAlarm.jsx

@@ -1,110 +0,0 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
-import {Button} from '@alifd/next';
-
-// import {createTopo, Topology, TitleBar, SearchWidget} from '@riil-frontend/component-topology';
-import {createTopo, Topology, ViewerTools} from '../../../src';
-
-import request from './request';
-
-const data = {
-  config: {
-    id: 2,
-    name: "自定义告警",
-    showType: "auto",
-    layout: "circular",
-  },
-  nodes: [
-    {
-      id: "1",
-      name: "111",
-      ciType: "aaa",
-      operation: "delete"
-    },
-    {
-      id: "2",
-      name: "2222",
-      ciType: "ruijieSwitch",
-      operation: "delete",
-    },
-  ],
-};
-
-function TopoDemo(props) {
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-    });
-  }, []);
-
-  const Provider = topo.Provider;
-
-  // 初始化
-  useEffect(async () => {
-    await topo.load(data);
-    await topo.loadAlarm([
-      {
-        id:'1',
-        level: 1,
-        info:'告警信息'
-      }
-    ]);
-    return () => {
-      topo.exit();
-    }
-  }, []);
-
-  const loadAlarms1 = () => {
-    topo.loadAlarm([
-      {
-        id: '1',
-        level: 1,
-        info:'告警信息'
-      },
-      {
-        id: '2',
-        level: 3,
-        info:'告警信息'
-      }
-    ]);
-  };
-
-  const loadAlarms2 = () => {
-    topo.loadAlarm([
-      {
-        id:'1',
-        level: 1,
-        info:'告警信息'
-      }
-    ]);
-  };
-
-  const loadAlarms3 = () => {
-    topo.loadAlarm([
-    ]);
-  };
-
-  return (
-    <div style={{width: '100%', height: '500px', background: 'white'}}>
-      <Provider>
-        <div style={{display: 'flex', alignItems: 'center'}}>
-          <div style={{flex: 1}}>
-            <Button onClick={loadAlarms1}>加载告警1</Button>
-            <Button onClick={loadAlarms2}>加载告警2</Button>
-            <Button onClick={loadAlarms3}>清空告警</Button>
-          </div>
-          <ViewerTools topo={topo} showEditButton={false}/>
-        </div>
-        <Topology
-          topo={topo}
-          titleBar={false}
-        />
-      </Provider>
-    </div>
-  );
-}
-
-
-export default TopoDemo;

package/demo/3/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/CustomAttrAndMetric.jsx

@@ -1,303 +0,0 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
-import {Button} from '@alifd/next';
-
-// import {createTopo, Topology, TitleBar, SearchWidget} from '@riil-frontend/component-topology';
-import {createTopo, Topology, ViewerTools} from '../../../src';
-
-import request from './request';
-
-const data = {
-  config: {
-    id: 2,
-    name: "属性指标",
-    showType: "auto",
-    layout: "circular",
-  },
-  nodes: [
-    {
-      id: "1",
-      name: "自定义属性指标显示",
-      ciType: "aaa",
-      operation: "delete",
-      attributes: {
-        ipAddress: "1.1.1.1",
-        macAddress: "zbdafassa",
-      },
-    },
-    {
-      id: "2",
-      name: "2222",
-      ciType: "ruijieSwitch",
-      operation: "delete",
-    },
-  ],
-};
-
-const attrsAndMetrics = [
-  {
-    "id": "1",
-    "attributes": [
-      {
-        "code": "minMacAddress",
-        "name": "最小MAC地址",
-        "value": "00-74-9C-8F-F3-7D"
-      },
-      {
-        "code": "serialNum",
-        "name": "序列号",
-        "value": "G1MVD9P000289"
-      },
-      {
-        "code": "ipv6Address",
-        "name": "IPv6地址",
-        "value": "2001:167::1,fe80::274:9cff:fe8f:f37e"
-      },
-      {
-        "code": "displayName",
-        "name": "显示名称",
-        "value": "HuiJu166.2"
-      },
-      {
-        "code": "ipAddress",
-        "name": "IP地址",
-        "value": "172.17.164.1"
-      },
-      {
-        "code": "assetState",
-        "name": "资产状态",
-        "value": "1"
-      },
-      {
-        "code": "ipAddressList",
-        "name": "IP地址列表",
-        "value": "172.17.161.1,172.17.163.1,172.17.164.1,172.17.166.2,172.17.166.9,172.17.166.17,172.17.168.1"
-      },
-      {
-        "code": "macAddress",
-        "name": "MAC地址",
-        "value": "00-74-9C-8F-F3-7D"
-      },
-      {
-        "code": "poeSupported",
-        "name": "支持POE",
-        "value": true
-      },
-      {
-        "code": "systemOID",
-        "name": "系统OID",
-        "value": "1.3.6.1.4.1.4881.1.1.10.1.114"
-      },
-      {
-        "code": "name",
-        "name": "名称",
-        "value": "HuiJu166.2"
-      },
-      {
-        "code": "company",
-        "name": "厂商",
-        "value": "ruijie"
-      },
-      {
-        "code": "connection",
-        "name": "连接信息",
-        "value": {
-          "SNMP": {
-            "id": "0000000017696793",
-            "params": "0b50ad15b5fe195bc40f10667e41c7329eaf59fd3598f7438949e98777d8db532eaeef42be70a4d166ee769d7623ccf1b2b0576ac9b4bada6b769870199a5cbf4345d77995eddd9fc15b5bd02103ae9b"
-          }
-        }
-      },
-      {
-        "code": "model",
-        "name": "型号",
-        "value": "S5750-48GT/4SFP-P"
-      },
-      {
-        "code": "distanceToOutlet",
-        "name": "出口距离",
-        "value": 2147483647
-      },
-      {
-        "code": "maxMacAddress",
-        "name": "最大MAC地址",
-        "value": "00-74-9C-8F-F3-7E"
-      }
-    ],
-    "metrics": [
-      {
-        "code": "cpuRate",
-        "name": "CPU利用率",
-        "value": "12"
-      },
-      {
-        "code": "memRate",
-        "name": "内存利用率",
-        "value": "60"
-      }
-    ]
-  },
-  {
-    "id": "2",
-    "attributes": [
-      {
-        "code": "minMacAddress",
-        "name": "最小MAC地址",
-        "value": "00-74-9C-8F-F3-7D"
-      },
-      {
-        "code": "serialNum",
-        "name": "序列号",
-        "value": "G1MVD9P000289"
-      },
-      {
-        "code": "ipv6Address",
-        "name": "IPv6地址",
-        "value": "2001:167::1,fe80::274:9cff:fe8f:f37e"
-      },
-      {
-        "code": "displayName",
-        "name": "显示名称",
-        "value": "HuiJu166.2"
-      },
-      {
-        "code": "ipAddress",
-        "name": "IP地址",
-        "value": "172.17.164.1"
-      },
-      {
-        "code": "assetState",
-        "name": "资产状态",
-        "value": "1"
-      },
-      {
-        "code": "ipAddressList",
-        "name": "IP地址列表",
-        "value": "172.17.161.1,172.17.163.1,172.17.164.1,172.17.166.2,172.17.166.9,172.17.166.17,172.17.168.1"
-      },
-      {
-        "code": "macAddress",
-        "name": "MAC地址",
-        "value": "00-74-9C-8F-F3-7D"
-      },
-      {
-        "code": "poeSupported",
-        "name": "支持POE",
-        "value": true
-      },
-      {
-        "code": "systemOID",
-        "name": "系统OID",
-        "value": "1.3.6.1.4.1.4881.1.1.10.1.114"
-      },
-      {
-        "code": "name",
-        "name": "名称",
-        "value": "HuiJu166.2"
-      },
-      {
-        "code": "company",
-        "name": "厂商",
-        "value": "ruijie"
-      },
-      {
-        "code": "connection",
-        "name": "连接信息",
-        "value": {
-          "SNMP": {
-            "id": "0000000017696793",
-            "params": "0b50ad15b5fe195bc40f10667e41c7329eaf59fd3598f7438949e98777d8db532eaeef42be70a4d166ee769d7623ccf1b2b0576ac9b4bada6b769870199a5cbf4345d77995eddd9fc15b5bd02103ae9b"
-          }
-        }
-      },
-      {
-        "code": "model",
-        "name": "型号",
-        "value": "S5750-48GT/4SFP-P"
-      },
-      {
-        "code": "distanceToOutlet",
-        "name": "出口距离",
-        "value": 2147483647
-      },
-      {
-        "code": "maxMacAddress",
-        "name": "最大MAC地址",
-        "value": "00-74-9C-8F-F3-7E"
-      }
-    ],
-    "metrics": [
-      {
-        "code": "cpuRate",
-        "name": "CPU利用率",
-        "value": "12"
-      },
-      {
-        "code": "memRate",
-        "name": "内存利用率",
-        "value": "60"
-      }
-    ]
-  },
-];
-
-function TopoDemo(props) {
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-      ciTypes: {
-        // 配置指定CiType在图上和浮层上显示哪些属性、指标
-        aaa: {
-          // 图上显示
-          tag: [
-            { code: 'ipAddress', type: 'attribute' },
-            { code: 'cpuRate', type: 'metric' },
-          ],
-          // 浮层显示
-          tip: [
-            { code: 'ipAddress', type: 'attribute' },
-            { code: 'macAddress', type: 'attribute' },
-            { code: 'cpuRate', type: 'metric' },
-          ],
-        },
-      },
-    });
-  }, []);
-
-  const Provider = topo.Provider;
-
-  // 初始化
-  useEffect(async () => {
-    await topo.load(data);
-    await topo.loadAttrsAndMetrics(attrsAndMetrics);
-    return () => {
-      topo.exit();
-    }
-  }, []);
-
-  const loadMetric = () => {
-    topo.loadAttrsAndMetrics(attrsAndMetrics);
-  };
-
-  return (
-    <div style={{width: '100%', height: '500px', background: 'white'}}>
-      <Provider>
-        <div style={{display: 'flex', alignItems: 'center'}}>
-          <div style={{flex: 1}}>
-            <Button onClick={loadMetric}>加载指标</Button>
-          </div>
-          <ViewerTools topo={topo} showEditButton={false}/>
-        </div>
-        <Topology
-          topo={topo}
-          titleBar={false}
-        />
-      </Provider>
-    </div>
-  );
-}
-
-
-export default TopoDemo;

package/demo/3/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/CustomNodeIcon.jsx

@@ -1,124 +0,0 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
-import {Button} from '@alifd/next';
-
-// import {createTopo, Topology, TitleBar, SearchWidget} from '@riil-frontend/component-topology';
-import {createTopo, Topology} from '../../../src';
-
-import request from './request';
-
-const icons = [
-  {
-    id: 'ciType.aaa', // 如果以ciType.开头，节点无图标时默认按ciType匹配
-    name: 'ciType.aaa',
-    url: '../public/icons/c_b_server.svg', // 图片地址
-    jsonUrl: null, // ht 拓扑使用
-  },
-  {
-    id: 'biz.xxx',
-    name: 'biz.xxx',
-    url: '../public/icons/c_b_firewall.svg', // 图片地址
-    jsonUrl: null, // ht 拓扑使用
-  },
-  {
-    id: 'biz.yyy',
-    name: 'biz.yyy',
-    url: '../public/icons/c_b_hub.svg', // 图片地址
-    jsonUrl: null, // ht 拓扑使用
-  }
-];
-
-const data = {
-  config: {
-    id: 2,
-    name: "自定义图标",
-    showType: "auto",
-    layout: "circular",
-  },
-  nodes: [
-    {
-      id: "1",
-      name: "自定义citype图标",
-      ciType: "aaa",
-      operation: "delete"
-    },
-    {
-      id: "2",
-      name: "直接指定image",
-      ciType: "ruijieSwitch",
-      image: 'biz.xxx',
-      operation: "delete",
-    },
-    {
-      id: "3",
-      name: "根据属性匹配默认图标",
-      ciType: "ruijieSwitch",
-      operation: "delete",
-      data: {
-        a: 1
-      }
-    },
-    {
-      id: "4",
-      name: "内置citype图标",
-      ciType: "ruijieSwitch",
-      operation: "delete"
-    },
-  ],
-  lines: [
-    {
-      id: "r647792732420440064",
-      ciType: "networkLink",
-      source: "1",
-      target: "2",
-      operation: "delete"
-    },
-  ],
-};
-
-function TopoEditorDemo(props) {
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-      // 注册自定义图标
-      icons,
-      // 获取默认节点图标，可选参数。如果无返回值则继续使用内部默认
-      getDefaultNodeIcon: (node) => {
-        const {ciType, data} = node.getAttrObject();
-        if (ciType === 'ruijieSwitch' && data?.a === 1) {
-          return 'biz.yyy'
-        }
-        return null
-      }
-    });
-  }, []);
-
-  const Provider = topo.Provider;
-
-  // 初始化
-  useEffect(async () => {
-    await topo.load(data, {
-      mode: 'edit'
-    });
-    return () => {
-      topo.exit();
-    }
-  }, []);
-
-  return (
-    <div style={{width: '100%', height: '500px', background: 'white'}}>
-      <Provider>
-        <Topology
-          topo={topo}
-          defaultEnterEditMode
-          titleBar={false}
-        />
-      </Provider>
-    </div>
-  );
-}
-
-
-export default TopoEditorDemo;