@riil-frontend/component-topology 2.1.4 → 2.1.6

package/es/components/TopoView/settings/GroupNodeList/ResourceList.js

@@ -2,7 +2,7 @@ import _Button from "@alifd/next/es/button";
 import _List from "@alifd/next/es/list";
 import _Avatar from "@alifd/next/es/avatar";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import SelectResource from './SelectResource';
+import SelectResource from '../../../ResourceSelect/SelectResource';
 import styles from './ResourceList.module.scss';
 
 function ResourceList(props) {

package/es/components/TopoView/settings/LayerSettingsForm.js

@@ -121,7 +121,10 @@ export default function LayerSettingsForm(props) {
         style: {
           flex: 1
         }
-      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(ResourceList.Select, null))
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(ResourceList.Select, null)),
+      onClick: function onClick(e) {
+        console.error(111, e);
+      }
     }, /*#__PURE__*/React.createElement(GroupNodeList, {
       topo: topo,
       group: values

package/es/components/TopoView/topoView.js

@@ -115,9 +115,10 @@ var TopoView = function TopoView(props) {
   }, []);
   var onLoaded = useCallback(function () {
     if (topoApp.alarms) {
+      rlog.info('TopoView.onLoaded', topoData, topoApp.alarms);
       topoApp.loadAlarm(topoApp.alarms);
     }
-  }, []); // TODO 之后把事件方法都转移出去
+  }, [topoData]); // TODO 之后把事件方法都转移出去
 
   var rightEventHandle = function rightEventHandle(event) {
     rlog.debug('右键事件', event);

package/lib/components/TopoView/settings/GroupNodeList/ResourceList.js

@@ -13,7 +13,7 @@ var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _SelectResource = _interopRequireDefault(require("./SelectResource"));
+var _SelectResource = _interopRequireDefault(require("../../../ResourceSelect/SelectResource"));
 
 var _ResourceListModule = _interopRequireDefault(require("./ResourceList.module.scss"));
 

package/lib/components/TopoView/settings/LayerSettingsForm.js

@@ -147,7 +147,10 @@ function LayerSettingsForm(props) {
         style: {
           flex: 1
         }
-      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceList["default"].Select, null))
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceList["default"].Select, null)),
+      onClick: function onClick(e) {
+        console.error(111, e);
+      }
     }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
       topo: topo,
       group: values

package/lib/components/TopoView/topoView.js

@@ -145,9 +145,11 @@ var TopoView = function TopoView(props) {
   }, []);
   var onLoaded = (0, _react.useCallback)(function () {
     if (topoApp.alarms) {
+      _rlog["default"].info('TopoView.onLoaded', topoData, topoApp.alarms);
+
       topoApp.loadAlarm(topoApp.alarms);
     }
-  }, []); // TODO 之后把事件方法都转移出去
+  }, [topoData]); // TODO 之后把事件方法都转移出去
 
   var rightEventHandle = function rightEventHandle(event) {
     _rlog["default"].debug('右键事件', event);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "拓扑",
   "files": [
     "demo/",
+    "demo-mock/",
     "lib/",
     "es/",
     "build/",
-    "3rd/",
     "public/"
   ],
   "main": "lib/index.js",
@@ -96,5 +96,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.1.4/build/index.html"
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.1.6/build/index.html"
 }

package/demo/1/345/237/272/346/234/254/src/ShowAttributeDemo.jsx

@@ -1,14 +0,0 @@
-import React, {useState, useEffect, useRef, useCallback} from 'react';
-
-// import {createTopo, Topology, TitleBar, SearchWidget} from '@riil-frontend/component-topology';
-import {createTopo, Topology, TitleBar, SearchWidget} from '../../../src';
-
-export default function ShowAttributeDemo(props) {
-
-
-    return (
-        <div>
-
-        </div>
-    );
-};

package/demo/2/346/213/223/346/211/221/344/270/255/345/277/203/js/request.js

@@ -1,7 +0,0 @@
-import createMockRequest from "../../createMockRequest";
-
-const request = createMockRequest({
-    baseURL: '/demo/2拓扑中心/js/mock'
-});
-
-export default request;

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

@@ -1,220 +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} from '../../../src';
-
-import request from './request';
-import {topoList, getData} from "./data/appInstall";
-import createTopoData from './data/appInstall/data1';
-
-function TopoDemo(props) {
-
-  const [topoId, setTopoId] = useState('1');
-  const [loading, setLoading] = useState(false);
-
-  const topo = useMemo(() => {
-    return createTopo({
-      request,
-      enableDefaultAlarmLoader: false, // 关闭内置告警推送
-      enableDefaultMetricLoader: false, // 关闭内置指标推送
-      ciTypes: {
-        aaa: {
-          tag: [
-            { code: 'cpuRate', type: 'metric' },
-            { code: 'memRate', type: 'metric' },
-          ],
-          tip: [
-            { code: 'ipAddress', type: 'attribute' },
-            { code: 'macAddress', type: 'attribute' },
-            { code: 'assetState', type: 'attribute' },
-          ],
-        },
-      },
-      editor: {
-        enableRelateResource: 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 renderViewerTitleBar = () => {
-    const onSelect = async (id) => {
-      setTopoId(id);
-      await loadTopo(id);
-    };
-    return (
-      <div style={{display: 'flex', alignItems: 'center'}}>
-        <div style={{flex: 1}}>
-          <Radio.Group dataSource={topoList} shape="button" size="small" value={topoId} onChange={onSelect}/>        &nbsp; &nbsp;
-          <Button type="primary" onClick={createAndEnterEdit} title="新建并进入编辑模式">新建</Button>
-        </div>
-        <SearchWidget topo={topo}/> &nbsp; &nbsp;
-        <Button type="primary" onClick={enterEditMode}>编辑</Button>        &nbsp; &nbsp;
-        <Button onClick={() => { topo.exportImage() }}>导出拓扑图</Button>
-      </div>
-    )
-  };
-
-
-  // 退出编辑模式
-  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 {saveConfig} = ctx;
-    // 保存节点位置、样式、配置
-    await saveConfig();
-
-    // 获取拓扑图 业务节点和连线、自定义节点和连线
-    const data = topo.getData();
-    console.error('获取拓扑图数据', data);
-    // TODO 保存业务信息，
-
-    setLoading(false)
-  }, [topoId]);
-
-  // 更新分层数据
-  const updateData = async () => {
-    await topo.updateData({
-      groups: [
-        {
-          "id": 20,
-          "name": "业务层"
-        },
-        {
-          "id": 19,
-          "name": "工具层"
-        },
-      ],
-      nodes: [
-        {
-          "id": "000000004e2f8f55",
-          "name": "HuiJu166.2_20002",
-          "ciType": "ruijieSwitch",
-          "groupId": 20,
-          "operation": "delete"
-        },
-      ],
-      lines: [],
-    })
-  };
-
-  const renderEditorTitleBar = () => {
-    return (
-      <div style={{display: 'flex', alignItems: 'center'}}>
-        <div style={{flex: 1}}>拓扑图标题</div>
-        <Button onClick={updateData}>修改分层数据</Button>        &nbsp; &nbsp;
-        <Button type="primary" onClick={onTriggerSaveEvent}>保存</Button>        &nbsp; &nbsp;
-        <Button onClick={onExitEditMode}>退出</Button>
-      </div>
-    )
-  };
-
-  // 编辑器参数
-  const editorProps = {
-    // 选择资源
-    layerSelectResource: {
-      ciTypes: [], // 类型过滤
-      getTableData: async (params) => {
-        const {
-          current = 1,
-          pageSize = 20,
-          sortBy = 'displayName',
-          sortOrder = 'asc',
-          like,
-          typeCode,
-        } = params;
-        // 从拓扑图查询已有资源列表
-        // TODO 查询数据
-        return {
-          dataSource: [],
-          total: 100,
-          current: 1,
-          pageSize,
-        }
-      },
-      onOk: async (selected) => {
-        // 查询、合并数据、全量更新拓扑图数据
-
-      }
-    }
-  };
-
-  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}
-            editorProps={editorProps}
-            onRefresh={() => {loadTopo(topoId)}}
-            onSave={onSave}
-            onRemoveElements={() => {}}
-          />
-        </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/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;