@riil-frontend/component-topology 11.0.0 → 11.0.2

package/es/components/BatchAttrMetric2/SelectTable.js

@@ -0,0 +1,21 @@
+import React from 'react';
+export default function SelectTable(props) {
+  return /*#__PURE__*/React.createElement(Table, {
+    fixedHeader: true,
+    hasBorder: false,
+    dataSource: tableData,
+    emptyContent: /*#__PURE__*/React.createElement(NoDataPage, {
+      type: "table"
+    }),
+    rowSelection: {
+      selectedRowKeys: selectedRowKeys,
+      onChange: onTableSelect,
+      getProps: function getProps(_ref) {
+        var id = _ref.id;
+        return {
+          disabled: !selectedRowKeys.includes(id) && selectedRowKeys.length >= limit
+        };
+      }
+    }
+  }, columnNodes);
+}

package/es/components/BatchAttrMetric2/constant.js

@@ -0,0 +1,30 @@
+// 选择类型
+export var SELECT_TYPE = {
+  single: {
+    showTree: false,
+    showCiNum: false,
+    drawerWidth: "calc(" + 5 + "/24 * 100%)"
+  },
+  batch: {
+    showTree: true,
+    showCiNum: true,
+    drawerWidth: "calc(" + 10 + "/24 * 100%)"
+  }
+}; // 数据类型
+
+export var DATA_TYPE = {
+  tag: {
+    drawerTitle: '选择图数据',
+    maxSelect: 4,
+    label: '图',
+    poslabel: '拓扑图上',
+    message: "\u56FE\u6570\u636E\uFF1A\u9009\u62E9\u7684\u6307\u6807\u548C\u5C5E\u6027\u5C06\u4F1A\u663E\u793A\u5728\u62D3\u6251\u56FE\u4E0A\uFF0C\u6700\u591A\u652F\u6301\u52FE\u9009 4 \u9879\u3002"
+  },
+  tip: {
+    drawerTitle: '选择Tooltips显示数据',
+    maxSelect: 10,
+    label: 'Tootip',
+    poslabel: 'Tooltip中',
+    message: "Tootip\u6570\u636E\uFF1A\u9009\u62E9\u7684\u6307\u6807\u548C\u5C5E\u6027\u5C06\u4F1A\u663E\u793A\u5728Tooltip\u4E2D\uFF0C\u6700\u591A\u652F\u6301\u52FE\u9009 10 \u9879\u3002"
+  }
+};

package/es/components/BatchAttrMetric2/index.js

@@ -0,0 +1,75 @@
+import _Drawer from "@alifd/next/es/drawer";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["saveCb", "showType"],
+    _excluded2 = ["drawerTitle", "drawerWidth"];
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { useBoolean } from 'ahooks';
+import PropTypes from 'prop-types';
+import styles from "./index.module.scss";
+import SettingPage from "./setting";
+import { SELECT_TYPE, DATA_TYPE } from "./constant";
+/**
+ * 属性指标配置抽屉
+ */
+
+var BatchAttrMetricDrawer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _saveCb = props.saveCb,
+      showType = props.showType,
+      settingProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useBoolean = useBoolean(false),
+      visible = _useBoolean[0],
+      _useBoolean$ = _useBoolean[1],
+      setTrue = _useBoolean$.setTrue,
+      setFalse = _useBoolean$.setFalse;
+
+  var selectType = 'batch';
+  useImperativeHandle(ref, function () {
+    return {
+      /**
+       * 展开抽屉
+       */
+      show: function show(entryConfig) {
+        if (entryConfig === void 0) {
+          entryConfig = {};
+        }
+
+        setTrue();
+      }
+    };
+  });
+
+  var config = _extends({}, SELECT_TYPE[selectType], DATA_TYPE[showType]);
+
+  var drawerTitle = config.drawerTitle,
+      drawerWidth = config.drawerWidth,
+      pageConfig = _objectWithoutPropertiesLoose(config, _excluded2);
+
+  return /*#__PURE__*/React.createElement(_Drawer, {
+    closeMode: ['close', 'esc'],
+    visible: visible,
+    onClose: setFalse,
+    title: drawerTitle,
+    className: styles.drawer,
+    width: drawerWidth
+  }, visible && /*#__PURE__*/React.createElement(SettingPage, _extends({}, pageConfig, settingProps, {
+    cancelCb: setFalse,
+    saveCb: function saveCb(values) {
+      setFalse();
+
+      _saveCb(showType, values);
+    }
+  })));
+});
+BatchAttrMetricDrawer.displayName = 'BatchAttrMetricDrawer';
+BatchAttrMetricDrawer.propTypes = {
+  // 数据项
+  dataSource: PropTypes.array.isRequired,
+  // 保存回调
+  saveCb: PropTypes.func
+};
+BatchAttrMetricDrawer.defaultProps = {
+  saveCb: function saveCb() {}
+};
+export default BatchAttrMetricDrawer;

package/es/components/BatchAttrMetric2/index.module.scss

@@ -0,0 +1,76 @@
+@import "@alifd/next/variables";
+
+.drawer {
+  & > div {
+    overflow: hidden !important;
+  }
+  :global {
+    .#{$css-prefix}drawer-body {
+      padding: 0;
+      height: calc(100% - 45px);
+    }
+  }
+}
+.layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  & > div:last-child > button:first-child {
+    float: left;
+    line-height: 24px;
+  }
+  :global {
+    .riil-footer {
+      position: unset;
+    }
+  }
+}
+.message {
+  padding: 16px 24px 0;
+}
+.content {
+  padding: 16px 24px 0;
+  flex: auto;
+  overflow: hidden;
+  & > div:first-child:not(:last-child) {
+    box-shadow: 1px 0px 0px 0px #E4E9EE;
+    padding-right: $s-4;
+  }
+  & > div:last-child:not(:first-child) {
+    padding-left: $s-4;
+  }
+  :global {
+    .#{$css-prefix}table-header-node.#{$css-prefix}table-selection {
+      .#{$css-prefix}checkbox-wrapper {
+        display: none;
+      }
+    }
+    .#{$css-prefix}table-cell-wrapper {
+      white-space: unset !important;
+    }
+  }
+}
+.tree-wrap {
+  :global {
+    .#{$css-prefix}tree-node-label-wrapper {
+      width: 1px;
+      .tree-node-label > span {
+        display: inline-block;
+        width: calc(100% - 24px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+.table-wrap {
+  height: calc(100% + 1.5px);
+}
+.tip-content {
+  max-height: 250px;
+  overflow: auto;
+  & > div {
+    line-height: 20px;
+  }
+}

package/es/components/BatchAttrMetric2/setting.js

@@ -0,0 +1,188 @@
+import _Button from "@alifd/next/es/button";
+import _Table from "@alifd/next/es/table";
+import _Search from "@alifd/next/es/search";
+import _Grid from "@alifd/next/es/grid";
+import _Message from "@alifd/next/es/message";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "defaultSet", "dataSource"];
+import React, { useState, useMemo } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import ActionTree from '@riil-frontend/component-action-tree';
+import NoDataPage from '@riil-frontend/component-topology-common/es/components/NoDataPage';
+import TableLayout from '@riil-frontend/component-table-layout';
+import RiilHooks from '@riil-frontend/hooks';
+import * as utils from "./utils";
+import styles from "./index.module.scss";
+import { loopTreeNode } from "../../utils/treeUtil";
+
+var Setting = function Setting(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? {} : _ref$value,
+      defaultSet = _ref.defaultSet,
+      dataSource = _ref.dataSource,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var limit = props.limit,
+      saveCb = props.saveCb;
+  var allCiSet = useMemo(function () {
+    var map = {};
+    loopTreeNode(dataSource, function (item) {
+      map[item.id] = item;
+    });
+    return map;
+  }, [dataSource]);
+
+  var _useState = useState(Object.keys(allCiSet)[0]),
+      ciType = _useState[0],
+      setCiType = _useState[1];
+
+  var _useState2 = useState(''),
+      search = _useState2[0],
+      setSearch = _useState2[1];
+
+  var _useState3 = useState(value),
+      selected = _useState3[0],
+      setSelected = _useState3[1];
+
+  var selectedRowKeys = selected[ciType] || [];
+
+  var _RiilHooks$useTableCo = RiilHooks.useTableColumn({
+    columns: [{
+      width: '100%',
+      dataIndex: 'name',
+      title: '数据',
+      cellOption: {
+        nowrap: true
+      }
+    }, {
+      width: '70px',
+      dataIndex: 'type',
+      title: '类型',
+      cellOption: {
+        nowrap: {
+          nowrapCell: utils.typeCell,
+          title: utils.typeCell
+        }
+      }
+    }]
+  }),
+      columnNodes = _RiilHooks$useTableCo.columnNodes;
+
+  var onTreeSelect = function onTreeSelect(_ref2) {
+    var selectedKey = _ref2[0];
+
+    if (selectedKey && allCiSet[selectedKey].type !== 'folder') {
+      setCiType(selectedKey);
+    }
+  };
+
+  var onTableSelect = function onTableSelect(selectedKeys) {
+    var values = _extends({}, selected);
+
+    rlog.debug('Setting-allCiSet-onTableSelect', limit, selectedKeys, selected);
+    values[ciType] = selectedKeys;
+    setSelected(values);
+  };
+
+  var saveSelected = function saveSelected() {
+    saveCb(selected);
+  };
+
+  var onReset = function onReset() {
+    setSelected({});
+  };
+
+  var tableData = useMemo(function () {
+    var _allCiSet$ciType;
+
+    // console.log('allCiSet,ciType,search', allCiSet, ciType, search);
+    var list = ((_allCiSet$ciType = allCiSet[ciType]) === null || _allCiSet$ciType === void 0 ? void 0 : _allCiSet$ciType.list) || [];
+
+    if (search) {
+      list = list.filter(function (item) {
+        var _item$name;
+
+        return ((_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toUpperCase().indexOf(search.toUpperCase())) !== -1;
+      });
+    }
+
+    return list;
+  }, [allCiSet, ciType, search]);
+
+  function onSearch(value) {
+    // console.log('search', search);
+    setSearch(value);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.layout
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.message
+  }, /*#__PURE__*/React.createElement(_Message, {
+    type: "notice"
+  }, props.label + "\u6570\u636E\uFF1A\u9009\u62E9\u7684\u6307\u6807\u548C\u5C5E\u6027\u5C06\u4F1A\u663E\u793A\u5728" + props.poslabel + "\uFF0C\u6700\u591A\u652F\u6301\u52FE\u9009 " + limit + " \u9879\u3002")), /*#__PURE__*/React.createElement(_Grid.Row, {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement(_Grid.Col, {
+    span: 8,
+    className: styles['tree-wrap']
+  }, /*#__PURE__*/React.createElement(ActionTree, {
+    dataSource: dataSource,
+    onSelect: onTreeSelect,
+    draggable: false,
+    treeProps: {
+      selectedKeys: [ciType]
+    }
+  })), /*#__PURE__*/React.createElement(_Grid.Col, {
+    className: styles['table-wrap']
+  }, /*#__PURE__*/React.createElement(TableLayout, {
+    filterItems: /*#__PURE__*/React.createElement("div", {
+      className: styles.filter
+    }, /*#__PURE__*/React.createElement(_Search, {
+      // className={styles.search}
+      style: {
+        width: 200
+      },
+      shape: "simple",
+      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
+      onSearch: onSearch,
+      onChange: function onChange(val) {
+        return !val && onSearch('');
+      },
+      hasClear: true
+    })),
+    table: /*#__PURE__*/React.createElement(_Table, {
+      fixedHeader: true,
+      hasBorder: false,
+      dataSource: tableData,
+      emptyContent: /*#__PURE__*/React.createElement(NoDataPage, {
+        type: "table"
+      }),
+      rowSelection: {
+        selectedRowKeys: selectedRowKeys,
+        onChange: onTableSelect,
+        getProps: function getProps(_ref3) {
+          var id = _ref3.id;
+          return {
+            disabled: !selectedRowKeys.includes(id) && selectedRowKeys.length >= limit
+          };
+        }
+      }
+    }, columnNodes)
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "riil-footer right"
+  }, /*#__PURE__*/React.createElement(_Button, {
+    text: true,
+    type: "primary",
+    onClick: onReset
+  }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    onClick: function onClick() {
+      saveSelected();
+    }
+  }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(_Button, {
+    onClick: props.cancelCb
+  }, "\u53D6\u6D88")));
+};
+
+export default Setting;

package/es/components/BatchAttrMetric2/utils.js

@@ -0,0 +1,80 @@
+import React from "react";
+import styles from "./index.module.scss";
+import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+/**
+ * 获取树结构数据源
+ * @param {*} allCiSet 数据源
+ * @returns
+ */
+
+export var treeDs = function treeDs(allCiSet) {
+  return Object.keys(allCiSet).map(function (key) {
+    var _allCiSet$key, _allCiSet$key2;
+
+    return {
+      id: key,
+      label: (_allCiSet$key = allCiSet[key]) === null || _allCiSet$key === void 0 ? void 0 : _allCiSet$key.name,
+      icon: "/img/model/" + ((_allCiSet$key2 = allCiSet[key]) === null || _allCiSet$key2 === void 0 ? void 0 : _allCiSet$key2.icon) + ".svg"
+    };
+  });
+}; // 由于属性和指标code存在重复，拼接code与类型作为id
+
+var toId = function toId(_ref) {
+  var code = _ref.code,
+      type = _ref.type;
+  return type ? code + "-" + type : code;
+}; // id反解析回对象
+
+
+var reverseToId = function reverseToId(id) {
+  var _id$split = id.split("-"),
+      code = _id$split[0],
+      type = _id$split[1];
+
+  return {
+    code: code,
+    type: type
+  };
+};
+/**
+ * 获取默认选择项，用于重置
+ * @param {*} allCiSet 数据源
+ * @param {*} defaultSet 默认选择项数据源
+ * @param {*} dataType 数据类型
+ * @returns
+ */
+
+
+export var defaultSelected = function defaultSelected(allCiSet, defaultSet, dataType) {
+  if (defaultSet === void 0) {
+    defaultSet = {};
+  }
+
+  var values = {};
+  Object.keys(allCiSet).forEach(function (key) {
+    var ciTypeSelected = defaultSet[key] || defaultSet[allCiSet[key].code]; // 没有ci类型对应的默认配置 ->  使用通用的配置项
+    // const selected = (ciTypeSelected || defaultSet['common'])[dataType] || [];
+
+    var selected = [];
+    var selectedIds = selected.map(function (item) {
+      return toId(item);
+    });
+    var data = allCiSet[key].list;
+    var selectedData = data === null || data === void 0 ? void 0 : data.filter(function (item) {
+      return selectedIds.includes(item.id);
+    });
+    values[key] = selectedData.map(function (item) {
+      return item.id;
+    }) || [];
+  });
+  return values;
+};
+export var typeCell = function typeCell(text) {
+  if (text === "attribute") {
+    return "属性";
+  } else if (text === "metric") {
+    return "指标";
+  }
+
+  return "-";
+};

package/es/components/ModelAttrSelectDrawer/components/ModelAttrSelect.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function ModelAttrSelect(props) {
+  return /*#__PURE__*/React.createElement("div", null, "ModelAttrSelect");
+}
+
+export default ModelAttrSelect;

package/es/components/ModelAttrSelectDrawer/components/ModelAttrSelectDrawer.js

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import BatchAttrMetricDrawer from "../../BatchAttrMetric2";
+var ModelAttrSelectDrawer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+      dataSource = props.dataSource,
+      limit = props.limit,
+      showType = props.showType,
+      onOk = props.onOk;
+  return /*#__PURE__*/React.createElement(BatchAttrMetricDrawer, {
+    ref: ref,
+    value: value,
+    dataSource: dataSource,
+    limit: limit,
+    showType: showType,
+    saveCb: onOk
+  });
+});
+ModelAttrSelectDrawer.displayName = 'ModelAttrSelectDrawer';
+ModelAttrSelectDrawer.propTypes = {
+  // 数据项
+  dataSource: PropTypes.array,
+  value: PropTypes.object,
+  limit: PropTypes.number,
+  showType: PropTypes.oneOf(['tag', 'tip', null]),
+  // 保存回调
+  onOk: PropTypes.func
+};
+ModelAttrSelectDrawer.defaultProps = {
+  dataSource: [],
+  value: {},
+  limit: 999,
+  showType: null,
+  onOk: function onOk(val) {}
+};
+export default ModelAttrSelectDrawer;

package/es/components/ModelAttrSelectDrawer/index.js

@@ -0,0 +1,2 @@
+import ModelAttrSelectDrawer from "./components/ModelAttrSelectDrawer";
+export default ModelAttrSelectDrawer;

package/es/core/components/DisplaySettingDrawer/NodeTag.js

@@ -29,6 +29,7 @@ var NodeTag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     type: "node"
   }));
 });
+NodeTag.displayName = 'NodeTag';
 NodeTag.propTypes = {
   commonOptions: PropTypes.array
 };