@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/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;

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

@@ -1,106 +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: "编辑模式右键菜单",
-    showType: "auto",
-    layout: "circular",
-  },
-  nodes: [
-    {
-      id: "1",
-      name: "1个菜单",
-      ciType: "ruijieSwitch",
-      operation: "delete"
-    },
-    {
-      id: "2",
-      name: "2个菜单",
-      ciType: "ruijieSwitch",
-      operation: "delete",
-      data: {
-        a: 1
-      }
-    },
-  ],
-  lines: [
-    {
-      id: "r647792732420440064",
-      ciType: "networkLink",
-      source: "1",
-      target: "2",
-      operation: "delete"
-    },
-  ],
-};
-
-function TopoEditorDemo(props) {
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-      editor: {
-        contextMenu: {
-          node: {
-            enable: true,
-            items: [
-              {
-                label: '新建服务',
-                id: 'biz.editor.XXX', // 加前缀避免冲突
-                icon: '/img/topo/contextmenu/Topology_resources_menu_icon_overview.svg', // 可选参数
-                onClick: (data) => {
-                  console.error('点击了右键菜单', data)
-                }
-              },
-              {
-                label: '新建服务2',
-                id: 'biz.editor.XXX', // 加前缀避免冲突
-                icon: '/img/topo/contextmenu/Topology_resources_menu_icon_overview.svg', // 可选参数
-                visible: (data) => data.data?.a === 1,
-                onClick: (data) => {
-                  console.error('点击了右键菜单', data)
-                }
-              },
-            ]
-          },
-        }
-      }
-    });
-  }, []);
-
-  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}
-          titleBar={false}
-          defaultEnterEditMode
-        />
-      </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/Metric.jsx

@@ -1,106 +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: "1个菜单",
-      ciType: "ruijieSwitch",
-      operation: "delete"
-    },
-    {
-      id: "2",
-      name: "2个菜单",
-      ciType: "ruijieSwitch",
-      operation: "delete",
-      data: {
-        a: 1
-      }
-    },
-  ],
-  lines: [
-    {
-      id: "r647792732420440064",
-      ciType: "networkLink",
-      source: "1",
-      target: "2",
-      operation: "delete"
-    },
-  ],
-};
-
-function TopoEditorDemo(props) {
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false,
-      enableDefaultMetricLoader: false,
-      editor: {
-        contextMenu: {
-          node: {
-            enable: true,
-            items: [
-              {
-                label: '新建服务',
-                id: 'editor.Biz.XXX', // 加前缀避免冲突
-                icon: '/img/topo/contextmenu/Topology_resources_menu_icon_overview.svg', // 可选参数
-                onClick: (data) => {
-                  console.error('点击了右键菜单', data)
-                }
-              },
-              {
-                label: '新建服务2',
-                id: 'editor.Biz.XXX', // 加前缀避免冲突
-                icon: '/img/topo/contextmenu/Topology_resources_menu_icon_overview.svg', // 可选参数
-                visible: (data) => data.data?.a === 1,
-                onClick: (data) => {
-                  console.error('点击了右键菜单', data)
-                }
-              },
-            ]
-          },
-        }
-      }
-    });
-  }, []);
-
-  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}
-          titleBar={false}
-          defaultEnterEditMode
-        />
-      </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/data/appInstall/data1.json

@@ -1,140 +0,0 @@
-{
-  "config": {
-    "id": 1,
-    "name": "拓扑1",
-    "showType": "layers",
-    "layout": "towardsouth"
-  },
-  "groups": [
-    {
-      "id": 20,
-      "name": "业务层"
-    },
-    {
-      "id": 19,
-      "name": "工具层"
-    },
-    {
-      "id": 18,
-      "name": "数据层"
-    },
-    {
-      "id": 999,
-      "name": "9999"
-    }
-  ],
-  "nodes": [
-    {
-      "id": "000000004e2f8f55",
-      "name": "aaa(禁用了关联资源)",
-      "ciType": "aaa",
-      "groupId": 20,
-      "operation": "delete",
-      "attributes": {
-        "ipAddress": "1.1.1.1",
-        "assetState": "已报废"
-      },
-      "data": {
-        "relateResource": false
-      }
-    },
-    {
-      "id": "000000004e2f8f51",
-      "name": "HuiJu166.2_20001",
-      "ciType": "ruijieSwitch",
-      "attributes": [
-        {
-          "code": "ipAddress",
-          "name": "IP地址",
-          "tips": true,
-          "tags": true,
-          "value": "172.17.160.114"
-        },
-        {
-          "code": "macAddress",
-          "name": "Mac地址",
-          "tips": true,
-          "tags": false,
-          "value": "00-74-9C-8F-F3-7D"
-        }
-      ],
-      "groupId": 19,
-      "operation": "delete"
-    },
-    {
-      "id": "000000004e2f8f59",
-      "name": "HuiJu166.2_20003",
-      "ciType": "ruijieSwitch",
-      "ciName": "ruijieSwitch",
-      "operation": "delete",
-      "attributes": [
-        {
-          "code": "ipAddress",
-          "name": "IP地址",
-          "tips": true,
-          "tags": true,
-          "value": "172.17.160.114"
-        },
-        {
-          "code": "macAddress",
-          "name": "Mac地址",
-          "tips": true,
-          "tags": false,
-          "value": "00-74-9C-8F-F3-7D"
-        }
-      ],
-      "groupId": 18,
-      "groupTag": null
-    },
-    {
-      "id": "000000004e2f28e7",
-      "name": "HuiJu166.2",
-      "ciType": "ruijieSwitch",
-      "ciName": "ruijieSwitch",
-      "operation": null,
-      "attributes": [
-        {
-          "code": "ipAddress",
-          "name": "IP地址",
-          "tips": true,
-          "tags": true,
-          "value": "172.17.166.2"
-        },
-        {
-          "code": "macAddress",
-          "name": "Mac地址",
-          "tips": true,
-          "tags": false,
-          "value": "00-74-9C-8F-F3-7D"
-        }
-      ],
-      "groupId": 18,
-      "groupTag": null
-    }
-  ],
-  "lines": [
-    {
-      "id": "r647792732420440064",
-      "name": "业务连线1",
-      "source": "000000004e2f8f51",
-      "target": "000000004e2f28e7",
-      "operation": "delete"
-    },
-    {
-      "id": "r647792734152687616",
-      "ciType": "networkLink",
-      "name": "链路111",
-      "source": "000000004e2f8f51",
-      "target": "000000004e2f8f55",
-      "operation": "delete"
-    },
-    {
-      "id": "r647792734572118016",
-      "ciType": "networkLink",
-      "name": "链路111",
-      "source": "000000004e2f8f51",
-      "target": "000000004e2f8f59",
-      "operation": "delete"
-    }
-  ]
-}