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

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;

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

@@ -1,188 +0,0 @@
-import React, {useState, useEffect, useRef, useCallback, useMemo} from 'react';
-import {Radio, Loading, Button} from '@alifd/next';
-
-// import {createTopo, Topology, TitleBar, SearchWidget} from '@riil-frontend/component-topology';
-import {createTopo, Topology, TitleBar, SearchWidget, ViewerTools} from '../../../src';
-
-import request from './request';
-import data1 from './data/dataStream/data1';
-import createTopoData from './data/dataStream/data2';
-
-function TopoDemo(props) {
-  const [loading, setLoading] = useState(false);
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-      // 编辑模式配置
-      editor: {
-        enableRelateResource: false, // 禁用左侧资源链路页签、禁用手工添加的节点关联资源
-        // 右键菜单
-        contextMenu: {
-          node: {
-            enable: true,
-            items: [
-              {
-                label: '新建服务',
-                id: 'editor.Biz.XXX', // 加前缀避免冲突
-                icon: '/img/topo/contextmenu/Topology_resources_menu_icon_overview.svg', // 可选参数
-                visible: (data) => {
-                  return true;
-                },
-                onClick: (data) => {
-                  console.error('点击了右键菜单', data)
-                }
-              },
-            ]
-          },
-        }
-      }
-    });
-  }, []);
-
-  const Provider = topo.Provider;
-
-  // API：
-
-  // 加载拓扑图数据
-  const loadTopo = async () => {
-    setLoading(true);
-    await topo.load(data1);
-    setLoading(false)
-  };
-
-  // 初始化
-  useEffect(async () => {
-    await loadTopo();
-    return () => {
-      topo.exit();
-    }
-  }, []);
-
-  // 创建拓扑图进入编辑模式
-  const createAndEnterEdit = async () => {
-    setLoading(true);
-    // TODO 转换格式
-    await topo.load(createTopoData, {
-      mode: 'edit'
-    });
-    setLoading(false)
-  };
-
-  // 进入编辑模式
-  const enterEditMode = useCallback(async () => {
-    setLoading(true);
-    await topo.enterEditMode();
-    setLoading(false)
-  }, []);
-
-  // 退出编辑模式
-  const onExitEditMode = useCallback(async () => {
-    setLoading(true);
-
-    await topo.exitEditMode();
-    // 重新加载拓扑
-    await loadTopo();
-
-    setLoading(false)
-  }, []);
-
-  // 触发保存事件
-  const onTriggerSaveEvent = useCallback(async () => {
-    await topo.triggerSaveEvent()
-  }, []);
-
-  // 保存
-  const onSave = useCallback(async (ctx) => {
-    setLoading(true);
-
-    const {saveConfig} = ctx;
-    // 保存节点位置、样式、配置
-    await saveConfig();
-
-    // 获取拓扑图 业务节点和连线、自定义节点和连线
-    const data = topo.getData();
-    console.error('获取拓扑图数据', data);
-    // TODO 保存业务信息，
-
-    setLoading(false)
-  }, []);
-
-  // 更新数据
-  const updateData1 = useCallback(async () => {
-    await topo.updateData({
-      nodes: [
-        {
-          "id": "000000004e2f8f55",
-          "name": "HuiJu166.2_20002-----------11",
-          "ciType": "ruijieSwitch",
-          "operation": "delete"
-        },
-        {
-          "id": "222",
-          "name": "222222222222",
-          "ciType": "ruijieSwitch",
-          "operation": "delete"
-        },
-      ],
-      lines: [
-        {
-          "id": "r647792732420440064",
-          "ciType": "networkLink",
-          "source": "000000004e2f8f55",
-          "target": "2",
-          "operation": "delete"
-        },
-      ]
-    })
-  }, []);
-
-  const renderViewerTitleBar = () => {
-    return (
-      <div style={{display: 'flex', alignItems: 'center'}}>
-        <div style={{flex: 1}}>
-          此处是标题        &nbsp; &nbsp;
-          <Button type="primary" onClick={createAndEnterEdit} title="新建并进入编辑模式">新建</Button>
-        </div>
-        <ViewerTools topo={topo} onEnterEdit={enterEditMode}/>
-      </div>
-    )
-  };
-
-  const renderEditorTitleBar = () => {
-    return (
-      <div style={{display: 'flex', alignItems: 'center'}}>
-        <div style={{flex: 1}}>标题</div>
-        <Button onClick={updateData1}>更新数据</Button>        &nbsp; &nbsp;
-        <Button type="primary" onClick={onTriggerSaveEvent}>保存</Button>        &nbsp; &nbsp;
-        <Button onClick={onExitEditMode}>退出</Button>
-      </div>
-    )
-  };
-
-  return (
-    <Loading visible={loading} style={{width: '100%'}}>
-      <Provider>
-        <TitleBar
-          topo={topo}
-          render={({isEditMode}) => isEditMode ? renderEditorTitleBar() : renderViewerTitleBar()}
-        />
-        <br/>
-
-        <div style={{width: '100%', height: '500px', background: 'white'}}>
-          <Topology
-            topo={topo}
-            titleBar={false}
-            onRefresh={() => {loadTopo()}}
-            onSave={onSave}
-          />
-        </div>
-      </Provider>
-    </Loading>
-  );
-}
-
-
-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/DisableNodeRelateResource.jsx

@@ -1,74 +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 data = {
-  config: {
-    id: 2,
-    name: "demo",
-    showType: "auto",
-    layout: "circular",
-  },
-  nodes: [
-    {
-      id: "1",
-      name: "禁用关联资源",
-      ciType: "ruijieSwitch",
-      operation: "delete",
-      data: {
-        relateResource: false // 禁用节点关联资源，默认true
-      }
-    },
-    {
-      id: "2",
-      name: "未禁用",
-      ciType: "ruijieSwitch",
-      operation: "delete",
-    },
-  ],
-};
-
-function TopoEditorDemo(props) {
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-      editor: {
-        enableRelateResource: false, // 禁用左侧资源链路页签、禁用手工添加的节点关联资源
-      }
-    });
-  }, []);
-
-  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;