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

package/lib/models/topoMod.js

@@ -357,32 +357,44 @@ function _default(topoApp) {
 
                   case 15:
                     if (!data) {
-                      _context6.next = 22;
+                      _context6.next = 26;
                       break;
                     }
 
-                    _context6.next = 18;
+                    if (!topoId) {
+                      _context6.next = 23;
+                      break;
+                    }
+
+                    _context6.next = 19;
                     return topoApp.options.loadData(topoId);
 
-                  case 18:
+                  case 19:
                     topoConfig = _context6.sent;
                     result = (0, _extends2["default"])({}, data, {
                       global: topoConfig.global,
                       serialize: topoConfig.serialize
                     });
-                    _context6.next = 25;
+                    _context6.next = 24;
                     break;
 
-                  case 22:
-                    _context6.next = 24;
-                    return topoApp.options.loadData(topoId);
+                  case 23:
+                    result = (0, _extends2["default"])({}, data);
 
                   case 24:
+                    _context6.next = 29;
+                    break;
+
+                  case 26:
+                    _context6.next = 28;
+                    return topoApp.options.loadData(topoId);
+
+                  case 28:
                     result = _context6.sent;
 
-                  case 25:
+                  case 29:
                     if (result) {
-                      _context6.next = 29;
+                      _context6.next = 33;
                       break;
                     }
 
@@ -394,13 +406,13 @@ function _default(topoApp) {
                     topoApp.options.onLoad();
                     return _context6.abrupt("return");
 
-                  case 29:
+                  case 33:
                     _rlog["default"].debug('topoMod.initTopoData 获取拓扑数据', topoId, linkTo, result);
 
-                    _context6.next = 32;
+                    _context6.next = 36;
                     return Promise.all([topoApp.ciTyeCache.getCiTypeMap((0, _topoData.getCiTypes)(result)), dispatch.iconManage.getIcons()]);
 
-                  case 32:
+                  case 36:
                     _yield$Promise$all = _context6.sent;
                     ciTypeMap = _yield$Promise$all[0];
                     customIcons = _yield$Promise$all[1];
@@ -442,7 +454,7 @@ function _default(topoApp) {
 
                     topoApp.options.onLoad();
 
-                  case 46:
+                  case 50:
                   case "end":
                     return _context6.stop();
                 }
@@ -556,6 +568,8 @@ function _default(topoApp) {
 
         /**
          * 查询最近一个月的告警
+         *
+         * TODO 迁移
          */
         getAlarmById: function getAlarmById(conditions, state) {
           var _this8 = this;

package/lib/style.js

@@ -36,7 +36,5 @@ require('@alifd/next/lib/radio/style');
 require('@alifd/next/lib/collapse/style');
 require('@alifd/next/lib/list/style');
 require('@alifd/next/lib/avatar/style');
-require('@alifd/next/lib/cascader-select/style');
-require('@riil-frontend/component-no-data-page/lib/style');
 require('@riil-frontend/component-topology-utils/lib/style');
 require('./index.scss');

package/lib/utils/htElementUtils.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 exports.__esModule = true;
 exports.getElements = getElements;
+exports.getGroups = getGroups;
 exports.getNodes = getNodes;
 exports.getEdges = getEdges;
 exports.getGroupNodes = getGroupNodes;
@@ -32,10 +33,28 @@ function getElementData(element) {
 }
 
 function getElements(dataModel) {
-  console.error(111, dataModel.getDatas().getArray());
+  // console.error(111, dataModel.getDatas().getArray())
   return dataModel.getDatas().getArray();
 }
 
+function getGroups(dataModel) {
+  return getElements(dataModel).filter(function (element) {
+    return element.getClassName() === 'ht.Grid' || element.getClassName() === 'ht.Group';
+  }).filter(function (element) {
+    return !!element.getTag();
+  }).map(function (element) {
+    var host = element.getHost();
+    return (0, _extends2["default"])({
+      name: element.getStyleMap().label
+    }, element.getAttrObject(), {
+      id: element.getTag(),
+      tag: element.getId(),
+      image: element.getImage(),
+      groupTag: host ? host.getId() : undefined
+    });
+  });
+}
+
 function getNodes(dataModel) {
   return getElements(dataModel).filter(function (element) {
     return element.getClassName() === 'ht.Node';

package/lib/utils/topoData.js

@@ -587,6 +587,8 @@ var combTopoData = function combTopoData(_ref3) {
     // ci类型集合
     ciTypesDoc: ciTypesDoc,
     // 每种ci含有的ci
+    ciTypeMap: ciTypeMap,
+    // ci类型模型map
     metrics: metrics,
     // 所有指标
     metricsDoc: metricsDoc,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.1.5-dev.3",
+  "version": "2.1.9",
   "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.5-dev.3/build/index.html"
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.1.9/build/index.html"
 }

package/demo/1/345/237/272/346/234/254//346/226/260/345/273/272/350/277/233/345/205/245/347/274/226/350/276/221/346/250/241/345/274/217.md

@@ -1,11 +0,0 @@
----
-title: 新建进入编辑模式
-order: 3
----
-
-<br/>
-
-
-```jsx
-<DemoCode src="../3业务监控拓扑/src/CreateTopo.jsx" />
-```

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 "../../../demo-src/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,228 +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' },
-          ],
-        },
-      },
-      icons: [
-        {
-          id: 'ciType.aaa', // 如果以ciType.开头，节点无图标时默认按ciType匹配
-          name: 'ciType.aaa',
-          url: '../public/icons/c_b_server.svg', // 图片地址
-          jsonUrl: null, // ht 拓扑使用
-        }
-      ],
-      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;