@riil-frontend/component-topology 0.2.9 → 0.3.2

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

@@ -0,0 +1,72 @@
+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 TopoDemo(props) {
+
+  const topo = useMemo(() => {
+    return createTopo({
+      request,
+      enableDefaultAlarmLoader: false,
+      enableDefaultMetricLoader: false,
+    });
+  }, []);
+
+  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();
+  }, []);
+
+  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;
+      </div>
+
+      <div style={{width: '100%', height: '500px', background: 'white'}}>
+        <Provider>
+          <Topology
+            topo={topo}
+            titleBar={false}
+            onSave={onSave}
+          />
+        </Provider>
+      </div>
+    </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/DataStreamTopo.jsx

@@ -0,0 +1,146 @@
+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 {topoList, getData} from "./data/dataStream";
+import data1 from './data/appInstall/data1';
+import createTopoData from './data/appInstall/data2';
+
+function TopoDemo(props) {
+
+  const [topoId, setTopoId] = useState('2');
+  const [loading, setLoading] = useState(false);
+
+  const topo = useMemo(() => {
+    return createTopo({
+      request,
+      enableDefaultAlarmLoader: false,
+      enableDefaultMetricLoader: false,
+    });
+  }, []);
+
+  const Provider = topo.Provider;
+
+  // API：
+
+  // 加载拓扑图数据
+  const loadTopo = async (id) => {
+    setLoading(true);
+    // TODO 查询拓扑图，转换格式
+    const data = await getData(id);
+    await topo.load(data);
+    setLoading(false)
+  };
+
+  // 初始化
+  useEffect(async () => {
+    await loadTopo(topoId);
+    return () => {
+      topo.exit();
+    }
+  }, []);
+
+  // 创建拓扑图进入编辑模式
+  const createAndEnterEdit = async () => {
+    setLoading(true);
+    // TODO 转换格式
+    const data = createTopoData;
+    await topo.load(data, {
+      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(topoId);
+
+    setLoading(false)
+  }, [topoId]);
+
+  // 触发保存事件
+  const onTriggerSaveEvent = useCallback(async () => {
+    await topo.triggerSaveEvent()
+  }, []);
+
+  // 保存
+  const onSave = useCallback(async (ctx) => {
+    setLoading(true);
+
+    const {data, saveConfig} = ctx;
+    const {id, config, global, serialize} = data;
+    // 保存
+    await saveConfig();
+
+    setLoading(false)
+  }, [topoId]);
+
+  // 更新数据
+  const updateData1 = useCallback(async () => {
+    await topo.updateData()
+  }, []);
+
+  const editModeParams = {};
+
+  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}/>
+      </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}
+            editModeParams={editModeParams}
+            onRefresh={() => {loadTopo(topoId)}}
+            onSave={onSave}
+          />
+        </div>
+      </Provider>
+    </Loading>
+  );
+}
+
+
+export default TopoDemo;

package/demo/3/{345/272/224/347/224/250/351/203/250/347/275/262/346/213/223/346/211/221/src/mock/data/data3.json → 344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/data/appInstall/data1.json}

@@ -1,38 +1,22 @@
 {
   "config": {
-    "id": 3,
-    "name": "拓扑3",
-    "layout": "towardsouth",
-    "showType": "layers"
+    "id": 1,
+    "name": "拓扑1",
+    "showType": "layers",
+    "layout": "towardsouth"
   },
-  "global": null,
   "groups": [
     {
       "id": 20,
-      "name": "3",
-      "type": null,
-      "layout": "circular",
-      "parentId": -1,
-      "order": 2,
-      "tag": null
+      "name": "业务层"
     },
     {
       "id": 19,
-      "name": "2",
-      "type": null,
-      "layout": "circular",
-      "parentId": -1,
-      "order": 1,
-      "tag": null
+      "name": "工具层"
     },
     {
       "id": 18,
-      "name": "1",
-      "type": null,
-      "layout": "circular",
-      "parentId": -1,
-      "order": 0,
-      "tag": null
+      "name": "数据层"
     }
   ],
   "nodes": [
@@ -40,33 +24,13 @@
       "id": "000000004e2f8f55",
       "name": "HuiJu166.2_20002",
       "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": 20,
-      "groupTag": null
+      "operation": "delete"
     },
     {
       "id": "000000004e2f8f51",
       "name": "HuiJu166.2_20001",
       "ciType": "ruijieSwitch",
-      "ciName": "ruijieSwitch",
-      "operation": "delete",
       "attributes": [
         {
           "code": "ipAddress",
@@ -84,7 +48,7 @@
         }
       ],
       "groupId": 19,
-      "groupTag": null
+      "operation": "delete"
     },
     {
       "id": "000000004e2f8f59",
@@ -108,7 +72,7 @@
           "value": "00-74-9C-8F-F3-7D"
         }
       ],
-      "groupId": 20,
+      "groupId": 18,
       "groupTag": null
     },
     {
@@ -143,31 +107,7 @@
       "ciType": "networkLink",
       "name": "172.17.160.114(Gi 0/1) - 172.17.160.114(Gi 0/1)",
       "source": "000000004e2f8f51",
-      "target": "000000004e2f8f55",
-      "operation": "delete"
-    },
-    {
-      "id": "r647792732873424896",
-      "ciType": "networkAggLink",
-      "name": "172.17.160.114(AggregatePort 3) - 172.17.160.114(AggregatePort 3)",
-      "source": "000000004e2f8f51",
-      "target": "000000004e2f8f55",
-      "operation": "delete"
-    },
-    {
-      "id": "r647792733318021120",
-      "ciType": "networkAggLink",
-      "name": "链路111",
-      "source": "000000004e2f8f51",
-      "target": "000000004e2f8f55",
-      "operation": "delete"
-    },
-    {
-      "id": "r647792733741645824",
-      "ciType": "networkAggLink",
-      "name": "链路111",
-      "source": "000000004e2f8f51",
-      "target": "000000004e2f8f55",
+      "target": "000000004e2f28e7",
       "operation": "delete"
     },
     {

package/demo/3/{345/272/224/347/224/250/351/203/250/347/275/262/346/213/223/346/211/221/src/mock/data/data1.json → 344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/data/appInstall/data2.json}

@@ -1,11 +1,10 @@
 {
   "config": {
-    "id": 1,
-    "name": "拓扑1",
+    "id": 2,
+    "name": "新建拓扑图demo",
     "showType": "layers",
     "layout": "towardsouth"
   },
-  "global": null,
   "groups": [
     {
       "id": 20,
@@ -26,15 +25,12 @@
       "name": "HuiJu166.2_20002",
       "ciType": "ruijieSwitch",
       "groupId": 20,
-      "groupTag": null,
       "operation": "delete"
     },
     {
       "id": "000000004e2f8f51",
       "name": "HuiJu166.2_20001",
       "ciType": "ruijieSwitch",
-      "ciName": "ruijieSwitch",
-      "operation": "delete",
       "attributes": [
         {
           "code": "ipAddress",
@@ -52,7 +48,7 @@
         }
       ],
       "groupId": 19,
-      "groupTag": null
+      "operation": "delete"
     },
     {
       "id": "000000004e2f8f59",

package/demo/3/{345/272/224/347/224/250/351/203/250/347/275/262/346/213/223/346/211/221/src/mock/data → 344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/data/appInstall}/index.js

@@ -1,29 +1,19 @@
 import data1 from './data1';
 import data2 from './data2';
-import data3 from './data3';
 
-const list = Object.freeze([{
+export const topoList = Object.freeze([{
   label: '拓扑1',
   value: '1',
 }, {
   label: '拓扑2',
   value: '2',
-  selectable: false,
-}, {
-  label: '拓扑3',
-  value: '3',
 }]);
 
 const map = {
   1: data1,
   2: data2,
-  3: data3,
 };
 
-export function getTopoList() {
-  return list;
-}
-
 export async function getData(id) {
   return map[id];
 }

package/demo/3/{345/272/224/347/224/250/351/203/250/347/275/262/346/213/223/346/211/221/src/mock/data/simple.json → 344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/data/dataStream/data1.json}

@@ -1,72 +1,23 @@
 {
   "config": {
     "id": 1,
-    "name": "拓扑1",
-    "layout": "towardsouth",
-    "showType": "layers"
+    "name": "数据流拓扑1",
+    "showType": "auto",
+    "layout": "circular",
+    "enableLineFlow": true
   },
-  "global": null,
-  "groups": [
-    {
-      "id": 20,
-      "name": "3",
-      "type": null,
-      "layout": "circular",
-      "parentId": -1,
-      "order": 2,
-      "tag": null
-    },
-    {
-      "id": 19,
-      "name": "2",
-      "type": null,
-      "layout": "circular",
-      "parentId": -1,
-      "order": 1,
-      "tag": null
-    },
-    {
-      "id": 18,
-      "name": "1",
-      "type": null,
-      "layout": "circular",
-      "parentId": -1,
-      "order": 0,
-      "tag": null
-    }
-  ],
   "nodes": [
     {
       "id": "000000004e2f8f55",
       "name": "HuiJu166.2_20002",
       "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": 20,
-      "groupTag": null
+      "operation": "delete"
     },
     {
       "id": "000000004e2f8f51",
       "name": "HuiJu166.2_20001",
       "ciType": "ruijieSwitch",
-      "ciName": "ruijieSwitch",
-      "operation": "delete",
       "attributes": [
         {
           "code": "ipAddress",
@@ -84,7 +35,7 @@
         }
       ],
       "groupId": 19,
-      "groupTag": null
+      "operation": "delete"
     },
     {
       "id": "000000004e2f8f59",
@@ -143,8 +94,12 @@
       "ciType": "networkLink",
       "name": "172.17.160.114(Gi 0/1) - 172.17.160.114(Gi 0/1)",
       "source": "000000004e2f8f51",
-      "target": "000000004e2f8f55",
-      "operation": "delete"
+      "target": "000000004e2f28e7",
+      "operation": "delete",
+      "styles": {
+        "direction": "right",
+        "color": "#ff00ff"
+      }
     },
     {
       "id": "r647792732873424896",
@@ -152,7 +107,15 @@
       "name": "172.17.160.114(AggregatePort 3) - 172.17.160.114(AggregatePort 3)",
       "source": "000000004e2f8f51",
       "target": "000000004e2f8f55",
-      "operation": "delete"
+      "operation": "delete",
+      "styles": {
+        "direction": "right",
+        "color": "#ff00ff"
+      },
+      "recordStyle": {
+        "direction": "right",
+        "color": "#ff00ff"
+      }
     },
     {
       "id": "r647792733318021120",
@@ -160,7 +123,11 @@
       "name": "链路111",
       "source": "000000004e2f8f51",
       "target": "000000004e2f8f55",
-      "operation": "delete"
+      "operation": "delete",
+      "styles": {
+        "direction": "right",
+        "color": "#ff00ff"
+      }
     },
     {
       "id": "r647792733741645824",
@@ -168,7 +135,11 @@
       "name": "链路111",
       "source": "000000004e2f8f51",
       "target": "000000004e2f8f55",
-      "operation": "delete"
+      "operation": "delete",
+      "styles": {
+        "direction": "right",
+        "color": "#ff00ff"
+      }
     },
     {
       "id": "r647792734152687616",
@@ -176,7 +147,11 @@
       "name": "链路111",
       "source": "000000004e2f8f51",
       "target": "000000004e2f8f55",
-      "operation": "delete"
+      "operation": "delete",
+      "styles": {
+        "direction": "right",
+        "color": "#ff00ff"
+      }
     },
     {
       "id": "r647792734572118016",
@@ -184,7 +159,11 @@
       "name": "链路111",
       "source": "000000004e2f8f51",
       "target": "000000004e2f8f59",
-      "operation": "delete"
+      "operation": "delete",
+      "styles": {
+        "direction": "right",
+        "color": "#ff00ff"
+      }
     }
   ]
-}
+}

package/demo/3/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221/src/data/dataStream/data2.json

@@ -0,0 +1,106 @@
+{
+  "config": {
+    "id": 2,
+    "name": "数据流拓扑",
+    "showType": "auto",
+    "layout": "circular",
+    "enableLineFlow": true
+  },
+  "nodes": [
+    {
+      "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": 20,
+      "groupTag": null
+    },
+    {
+      "id": "000000004e2f28e7",
+      "name": "HuiJu166.2",
+      "ciType": "ruijieSwitch",
+      "ciName": "ruijieSwitch",
+      "operation": "delete",
+      "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
+    }
+  ],
+  "links": [
+    {
+      "id": "r647792732420440064",
+      "ciType": "networkLink",
+      "name": "172.17.160.114(Gi 0/1) - 172.17.160.114(Gi 0/1)",
+      "source": "000000004e2f8f51",
+      "target": "000000004e2f28e7",
+      "operation": "delete"
+    },
+    {
+      "id": "r647792734572118016",
+      "ciType": "networkLink",
+      "name": "链路111",
+      "source": "000000004e2f8f51",
+      "target": "000000004e2f8f59",
+      "operation": "delete",
+      "styles": {
+        "direction": "right",
+        "color": "#ff00ff"
+      }
+    }
+  ]
+}