@riil-frontend/component-topology 2.1.3-dev.5 → 2.1.4

package/lib/components/Link/index.module.scss

@@ -1,3 +1,4 @@
+@import '@riil-frontend/css/lib/index.scss';
 @import "@alifd/next/variables";
 
 .layout {

package/lib/components/Link/setting.js

@@ -37,10 +37,10 @@ var _RowDeleteBallon = _interopRequireDefault(require("@riil-frontend/component-
 
 var _form = _interopRequireDefault(require("./form"));
 
-var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-
 var _hook = require("./hook");
 
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/components/edit/ResourceViewAttributeSetting/ResourceViewAttributeSettingPlugin.js

@@ -13,6 +13,8 @@ var _componentTopologyGraph = require("@riil-frontend/component-topology-graph")
 
 var _Setting = _interopRequireDefault(require("./Setting"));
 
+require("@riil-frontend/css/lib/index.scss");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/models/linkDynamicStyle.js

@@ -241,25 +241,29 @@ function _default(engine) {
 
                     linkStyleMap = {};
                     links.forEach(function (link) {
-                      var _$find2;
-
                       var ciType = link.ciType;
-                      var rules = styleConfig[ciType].rules;
-                      var attributes = ((_$find2 = _lodash["default"].find(allLinkAttributes, {
-                        id: link.id
-                      })) === null || _$find2 === void 0 ? void 0 : _$find2.attributes) || [];
-                      var style = null;
-
-                      for (var i = 0; i < rules.length; i++) {
-                        var rule = rules[i]; // 如果命中规则则中止
-
-                        if (executeCondition(rule.condition[0], attributes)) {
-                          style = rule.style;
-                          break;
+                      var config = styleConfig[ciType];
+
+                      if (config) {
+                        var _$find2;
+
+                        var rules = config.rules;
+                        var attributes = ((_$find2 = _lodash["default"].find(allLinkAttributes, {
+                          id: link.id
+                        })) === null || _$find2 === void 0 ? void 0 : _$find2.attributes) || [];
+                        var style = null;
+
+                        for (var i = 0; i < rules.length; i++) {
+                          var rule = rules[i]; // 如果命中规则则中止
+
+                          if (executeCondition(rule.condition[0], attributes)) {
+                            style = rule.style;
+                            break;
+                          }
                         }
-                      }
 
-                      linkStyleMap[link.id] = style;
+                        linkStyleMap[link.id] = style;
+                      }
                     });
 
                     _rlog["default"].debug('链路动态样式 linkDynamicStyle.execute', {

package/lib/models/topoCreateMod.js

@@ -455,6 +455,7 @@ function _default(topoApp) {
                     ciTypeMap = _yield$Promise$all[0];
                     links = _yield$Promise$all[1];
                     _combTopoData = (0, _topoData.combTopoData)({
+                      engine: topoApp,
                       data: (0, _extends2["default"])({}, data, {
                         links: links
                       }),

package/lib/models/topoMod.js

@@ -417,6 +417,11 @@ function _default(topoApp) {
                       permission: permission
                     }), topoData = _combTopoData.topoData, resAndMetrics = _combTopoData.resAndMetrics;
 
+                    _rlog["default"].debug('topoMod.initTopoData combTopoData', {
+                      topoData: topoData,
+                      resAndMetrics: resAndMetrics
+                    });
+
                     _this5.update({
                       topoData: topoData,
                       resAndMetrics: resAndMetrics,
@@ -437,7 +442,7 @@ function _default(topoApp) {
 
                     topoApp.options.onLoad();
 
-                  case 45:
+                  case 46:
                   case "end":
                     return _context6.stop();
                 }

package/lib/utils/topoData.js

@@ -347,7 +347,7 @@ function getAlarmSwitch(topoData) {
 
 
 var combTopoData = function combTopoData(_ref3) {
-  var _result$global, _alarmSwitch, _engine$options$edito, _result$groups;
+  var _result$global, _result$config, _alarmSwitch, _engine$options$edito, _result$groups;
 
   var result = _ref3.data,
       permission = _ref3.permission,
@@ -383,7 +383,7 @@ var combTopoData = function combTopoData(_ref3) {
       // 是否可编辑----控制[编辑]按钮
       moveable: true,
       // 节点是否可移动
-      enableLineFlow: !!result.config.enableLineFlow // 是否打开线的流动效果
+      enableLineFlow: !!((_result$config = result.config) !== null && _result$config !== void 0 && _result$config.enableLineFlow) // 是否打开线的流动效果
 
     },
     topoDisplayConfig: {
@@ -445,6 +445,7 @@ var combTopoData = function combTopoData(_ref3) {
 
   if (allCis.length > 0) {
     allCis.forEach(function (element, index) {
+      var ciType = element.ciType;
       resIdsList.push(element.id);
       ciDoc[element.id] = {
         code: element.ciType,
@@ -453,18 +454,19 @@ var combTopoData = function combTopoData(_ref3) {
         tip: []
       };
 
-      if (ciTypes.indexOf(element.ciType) < 0) {
-        ciTypes.push(element.ciType);
-        bindingCiSet[element.ciType] = {};
-        ciTypesDoc[element.ciType] = [{
-          ciId: element.id
-        }];
-      } else {
-        ciTypesDoc[element.ciType].push({
-          ciId: element.id
-        });
+      if (ciTypes.indexOf(ciType) < 0) {
+        if (ciType) {
+          ciTypes.push(ciType);
+        }
+
+        bindingCiSet[ciType] = {};
+        ciTypesDoc[ciType] = [];
       }
 
+      ciTypesDoc[element.ciType].push({
+        ciId: element.id
+      });
+
       if (element.attributes) {
         attrsDoc[element.id] = element.attributes.map(function (ait, index) {
           // rlog.debug(

package/lib/utils/topoIconUtil.js

@@ -44,8 +44,11 @@ function getDefaultNodeIcon(topo, node, icons) {
 
   if (!iconId) {
     // 按citype匹配
+    var _node$getAttrObject = node.getAttrObject(),
+        ciType = _node$getAttrObject.ciType;
+
     var icon = icons.filter(function (icon) {
-      return icon.id === "ciType." + node.id;
+      return icon.id === "ciType." + ciType;
     })[0];
 
     if (icon) {

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.1.3-dev.5",
+  "version": "2.1.4",
   "description": "拓扑",
   "files": [
     "demo/",
     "lib/",
     "es/",
     "build/",
-    "3rd/"
+    "3rd/",
+    "public/"
   ],
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,9 +52,9 @@
     "@riil-frontend/component-riil-rule-tree": "^1.0.4",
     "@riil-frontend/component-table-filter-tags": "latest",
     "@riil-frontend/component-table-layout": "^2.0.1",
-    "@riil-frontend/component-topology-graph": "^2.0.2-dev.2",
+    "@riil-frontend/component-topology-graph": "^2.0.3",
     "@riil-frontend/component-topology-utils": "^2.0.1-dev.1",
-    "@riil-frontend/css": "^1.0.10",
+    "@riil-frontend/css": "^2.0.2",
     "@riil-frontend/hooks": "latest",
     "@riil-frontend/next-collapse": "^1.0.1-a.0",
     "@riil-frontend/utils": "^1.0.20",
@@ -84,7 +85,6 @@
   },
   "peerDependencies": {
     "react": "^16 || ^17",
-    "@riil-frontend/css": "^1.0.10",
     "@alifd/next": "1.x"
   },
   "componentConfig": {
@@ -96,5 +96,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.1.3-dev.5/build/index.html"
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.1.4/build/index.html"
 }

package/public/icons/c_b_firewall.svg

@@ -0,0 +1,318 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="46" viewBox="0 0 20 46">
+<g>
+	<polygon fill="#003D55" points="11.368,7.886 19.405,0 19.405,37.309 11.368,45.196 	"/>
+	<polygon fill="#003D55" points="11.562,8.078 19.598,0.197 19.598,37.5 11.562,45.386 	"/>
+	<polygon fill="none" stroke="#ABABAB" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" points="11.562,8.078 
+		19.598,0.197 19.598,37.5 11.562,45.386 	"/>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_1_" x="11.437" y="6.429" width="8.438" height="8.282"/>
+				</defs>
+				<clipPath id="SVGID_2_">
+					<use xlink:href="#SVGID_1_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_2_)" fill="none" stroke="#ABABAB" stroke-width="0.9943" stroke-linecap="round" stroke-miterlimit="10" x1="3.533" y1="22.313" x2="27.636" y2="-1.341"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_3_" x="11.437" y="12.314" width="8.438" height="8.281"/>
+				</defs>
+				<clipPath id="SVGID_4_">
+					<use xlink:href="#SVGID_3_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_4_)" fill="none" stroke="#ABABAB" stroke-width="0.9943" stroke-linecap="round" stroke-miterlimit="10" x1="3.533" y1="28.271" x2="27.636" y2="4.618"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_5_" x="11.437" y="18.307" width="8.438" height="8.282"/>
+				</defs>
+				<clipPath id="SVGID_6_">
+					<use xlink:href="#SVGID_5_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_6_)" fill="none" stroke="#ABABAB" stroke-width="0.9943" stroke-linecap="round" stroke-miterlimit="10" x1="3.533" y1="34.231" x2="27.636" y2="10.578"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_7_" x="11.437" y="24.3" width="8.438" height="8.282"/>
+				</defs>
+				<clipPath id="SVGID_8_">
+					<use xlink:href="#SVGID_7_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_8_)" fill="none" stroke="#ABABAB" stroke-width="0.9943" stroke-linecap="round" stroke-miterlimit="10" x1="3.533" y1="40.197" x2="27.636" y2="16.543"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_9_" x="11.437" y="31.057" width="8.438" height="8.173"/>
+				</defs>
+				<clipPath id="SVGID_10_">
+					<use xlink:href="#SVGID_9_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_10_)" fill="none" stroke="#ABABAB" stroke-width="0.9943" stroke-linecap="round" stroke-miterlimit="10" x1="3.533" y1="46.925" x2="27.636" y2="23.271"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_11_" x="13.991" y="5.667" width="0.776" height="6.319"/>
+				</defs>
+				<clipPath id="SVGID_12_">
+					<use xlink:href="#SVGID_11_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_12_)" fill="none" stroke="#ABABAB" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="14.311" y1="-0.191" x2="14.311" y2="17.694"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_13_" x="16.101" y="9.48" width="0.777" height="6.321"/>
+				</defs>
+				<clipPath id="SVGID_14_">
+					<use xlink:href="#SVGID_13_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_14_)" fill="none" stroke="#ABABAB" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="16.462" y1="3.657" x2="16.462" y2="21.542"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_15_" x="14.213" y="17.763" width="0.777" height="5.774"/>
+				</defs>
+				<clipPath id="SVGID_16_">
+					<use xlink:href="#SVGID_15_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_16_)" fill="none" stroke="#ABABAB" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="14.505" y1="12.505" x2="14.505" y2="28.659"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_17_" x="16.324" y="21.794" width="0.777" height="5.558"/>
+				</defs>
+				<clipPath id="SVGID_18_">
+					<use xlink:href="#SVGID_17_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_18_)" fill="none" stroke="#ABABAB" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="16.656" y1="16.734" x2="16.656" y2="32.309"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_19_" x="14.324" y="29.64" width="0.778" height="6.321"/>
+				</defs>
+				<clipPath id="SVGID_20_">
+					<use xlink:href="#SVGID_19_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_20_)" fill="none" stroke="#ABABAB" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="14.7" y1="23.851" x2="14.7" y2="41.735"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_21_" x="16.545" y="33.671" width="0.776" height="6.431"/>
+				</defs>
+				<clipPath id="SVGID_22_">
+					<use xlink:href="#SVGID_21_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_22_)" fill="none" stroke="#ABABAB" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="16.857" y1="27.89" x2="16.857" y2="45.769"/>
+			</g>
+		</g>
+	</g>
+	<polygon fill="#0D96D4" points="0,7.886 0,14.043 11.368,14.043 11.368,7.886 	"/>
+	<polygon fill="#0D96D4" points="0.201,8.078 0.201,14.235 11.562,14.235 11.562,8.078 	"/>
+	
+		<rect x="0.201" y="8.078" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" width="11.361" height="6.156"/>
+	<polygon fill="#0D96D4" points="0,14.043 0,20.194 11.368,20.194 11.368,14.043 	"/>
+	<polygon fill="#0D96D4" points="0.201,14.235 0.201,20.384 11.562,20.384 11.562,14.235 	"/>
+	
+		<rect x="0.201" y="14.235" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" width="11.361" height="6.15"/>
+	<polygon fill="#0D96D4" points="0,20.194 0,26.35 11.368,26.35 11.368,20.194 	"/>
+	<polygon fill="#0D96D4" points="0.201,20.384 0.201,26.541 11.562,26.541 11.562,20.384 	"/>
+	
+		<rect x="0.201" y="20.384" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" width="11.361" height="6.157"/>
+	<polygon fill="#0D96D4" points="0,26.35 0,32.69 11.368,32.69 11.368,26.35 	"/>
+	<polygon fill="#0D96D4" points="0.201,26.541 0.201,32.888 11.562,32.888 11.562,26.541 	"/>
+	
+		<rect x="0.201" y="26.541" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" width="11.361" height="6.347"/>
+	<polygon fill="#0D96D4" points="0,32.69 0,38.848 11.368,38.848 11.368,32.69 	"/>
+	<polygon fill="#0D96D4" points="0.201,32.888 0.201,39.038 11.562,39.038 11.562,32.888 	"/>
+	
+		<rect x="0.201" y="32.888" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" width="11.361" height="6.149"/>
+	<polygon fill="#0D96D4" points="0,38.848 0,45.005 11.368,45.005 11.368,38.848 	"/>
+	<polygon fill="#0D96D4" points="0.201,39.038 0.201,45.196 11.562,45.196 11.562,39.038 	"/>
+	
+		<rect x="0.201" y="39.038" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" width="11.361" height="6.157"/>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_23_" x="3.553" y="8.173" width="0.776" height="6.102"/>
+				</defs>
+				<clipPath id="SVGID_24_">
+					<use xlink:href="#SVGID_23_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_24_)" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="3.922" y1="2.506" x2="3.922" y2="19.812"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_25_" x="7.329" y="14.275" width="0.776" height="5.994"/>
+				</defs>
+				<clipPath id="SVGID_26_">
+					<use xlink:href="#SVGID_25_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_26_)" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="7.648" y1="8.848" x2="7.648" y2="25.581"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_27_" x="3.553" y="20.595" width="0.776" height="5.994"/>
+				</defs>
+				<clipPath id="SVGID_28_">
+					<use xlink:href="#SVGID_27_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_28_)" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="3.922" y1="15.194" x2="3.922" y2="31.928"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_29_" x="7.329" y="26.589" width="0.776" height="6.101"/>
+				</defs>
+				<clipPath id="SVGID_30_">
+					<use xlink:href="#SVGID_29_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_30_)" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="7.648" y1="20.963" x2="7.648" y2="38.269"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_31_" x="3.553" y="32.91" width="0.776" height="6.211"/>
+				</defs>
+				<clipPath id="SVGID_32_">
+					<use xlink:href="#SVGID_31_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_32_)" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="3.922" y1="27.311" x2="3.922" y2="44.617"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_33_" x="7.329" y="39.121" width="0.776" height="5.885"/>
+				</defs>
+				<clipPath id="SVGID_34_">
+					<use xlink:href="#SVGID_33_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_34_)" fill="none" stroke="#C8C7C7" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="7.648" y1="33.658" x2="7.648" y2="50.385"/>
+			</g>
+		</g>
+	</g>
+	<polygon fill="#63C9F3" points="0,7.886 8.231,0 19.405,0 11.173,7.886 	"/>
+	<polygon fill="#63C9F3" points="0.201,8.078 8.432,0.197 19.598,0.197 11.368,8.078 	"/>
+	<polygon fill="none" stroke="#E3E3E3" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" points="0.201,8.078 
+		8.432,0.197 19.598,0.197 11.368,8.078 	"/>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_35_" x="6.33" y="5.448" width="8.216" height="0.762"/>
+				</defs>
+				<clipPath id="SVGID_36_">
+					<use xlink:href="#SVGID_35_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_36_)" fill="none" stroke="#E3E3E3" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="22.145" y1="5.775" x2="-1.367" y2="5.775"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_37_" x="3.776" y="0.217" width="8.438" height="8.282"/>
+				</defs>
+				<clipPath id="SVGID_38_">
+					<use xlink:href="#SVGID_37_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_38_)" fill="none" stroke="#E3E3E3" stroke-width="0.9943" stroke-linecap="round" stroke-miterlimit="10" x1="-4.108" y1="16.155" x2="19.988" y2="-7.499"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<defs>
+					<rect id="SVGID_39_" x="4.996" y="3.16" width="4.11" height="0.762"/>
+				</defs>
+				<clipPath id="SVGID_40_">
+					<use xlink:href="#SVGID_39_"  overflow="visible"/>
+				</clipPath>
+				
+					<line clip-path="url(#SVGID_40_)" fill="none" stroke="#E3E3E3" stroke-width="0.7479" stroke-linecap="round" stroke-miterlimit="10" x1="1.375" y1="3.466" x2="12.548" y2="3.466"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

package/public/icons/c_b_hub.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="39" viewBox="0 0 48 39">
+<g>
+	<polygon fill="#0D96D4" points="0,3.78 0,37.811 44.269,37.811 44.269,3.78 	"/>
+	<polygon fill="#0D96D4" points="0,3.78 0,37.811 44.269,37.811 44.269,3.78 	"/>
+	
+		<rect x="0" y="3.78" fill="none" stroke="#AEE2FA" stroke-width="0.2971" stroke-linecap="round" stroke-miterlimit="10" width="44.269" height="34.03"/>
+	<polygon fill="#45AFE3" points="0,3.78 2.87,0 47.14,0 44.269,3.78 	"/>
+	<polygon fill="#45AFE3" points="0,3.78 2.87,0 47.14,0 44.269,3.78 	"/>
+	<polygon fill="none" stroke="#AEE2FA" stroke-width="0.2971" stroke-linecap="round" stroke-miterlimit="10" points="0,3.78 
+		2.87,0 47.14,0 44.269,3.78 	"/>
+	<polygon fill="#015B80" points="44.269,37.811 47.14,34.031 47.14,0 44.269,3.78 	"/>
+	<polygon fill="#015B80" points="44.269,37.811 47.14,34.031 47.14,0 44.269,3.78 	"/>
+	<polygon fill="none" stroke="#AEE2FA" stroke-width="0.2971" stroke-linecap="round" stroke-miterlimit="10" points="
+		44.269,37.811 47.14,34.031 47.14,0 44.269,3.78 	"/>
+	
+		<rect x="2.05" y="6.3" fill="none" stroke="#FFFFFF" stroke-width="0.5942" stroke-linecap="round" stroke-miterlimit="10" width="40.17" height="28.989"/>
+	<path fill="#015B80" d="M39.35,25.71c0,3.896-7.565,7.061-16.91,7.061c-9.338,0-16.91-3.164-16.91-7.061
+		c0-3.896,7.571-7.06,16.91-7.06C31.784,18.65,39.35,21.814,39.35,25.71"/>
+	<path fill="none" stroke="#AEE2FA" stroke-width="0.2971" stroke-linecap="round" stroke-miterlimit="10" d="M39.35,25.71
+		c0,3.896-7.565,7.061-16.91,7.061c-9.338,0-16.91-3.164-16.91-7.061c0-3.896,7.571-7.06,16.91-7.06
+		C31.784,18.65,39.35,21.814,39.35,25.71"/>
+	<polygon fill="#015B80" points="5.531,15.88 5.531,25.96 39.145,25.96 39.145,15.88 	"/>
+	<polygon fill="#015B80" points="5.531,15.88 5.531,25.96 39.145,25.96 39.145,15.88 	"/>
+	<path fill="#4DBCEC" d="M39.35,15.63c0,3.896-7.565,7.061-16.91,7.061c-9.338,0-16.91-3.165-16.91-7.061
+		c0-3.906,7.571-7.061,16.91-7.061C31.784,8.57,39.35,11.724,39.35,15.63"/>
+	<path fill="none" stroke="#AEE2FA" stroke-width="0.2971" stroke-linecap="round" stroke-miterlimit="10" d="M39.35,15.63
+		c0,3.896-7.565,7.061-16.91,7.061c-9.338,0-16.91-3.165-16.91-7.061c0-3.906,7.571-7.061,16.91-7.061
+		C31.784,8.57,39.35,11.724,39.35,15.63"/>
+	<polygon fill="#010101" points="22.752,14.111 25.208,15.12 31.152,12.1 33.82,13.109 32.381,10.589 25.412,10.589 28.283,11.34 	
+		"/>
+	<polygon fill="#010101" points="22.752,14.111 25.208,15.12 31.152,12.1 33.82,13.109 32.381,10.589 25.412,10.589 28.283,11.34 	
+		"/>
+	<polygon fill="#010101" points="21.728,16.89 19.263,15.88 13.523,18.901 10.654,17.899 12.092,20.67 19.263,20.67 16.191,19.66 	
+		"/>
+	<polygon fill="#010101" points="21.728,16.89 19.263,15.88 13.523,18.901 10.654,17.899 12.092,20.67 19.263,20.67 16.191,19.66 	
+		"/>
+	<polygon fill="#010101" points="11.271,11.34 13.735,10.331 19.678,13.109 22.338,12.351 20.906,14.871 13.938,14.871 
+		16.807,14.111 	"/>
+	<polygon fill="#010101" points="11.271,11.34 13.735,10.331 19.678,13.109 22.338,12.351 20.906,14.871 13.938,14.871 
+		16.807,14.111 	"/>
+	<polygon fill="#010101" points="33.405,19.911 30.949,20.92 25.208,17.899 22.338,18.901 23.778,16.38 30.949,16.38 27.875,17.14 	
+		"/>
+	<polygon fill="#010101" points="33.405,19.911 30.949,20.92 25.208,17.899 22.338,18.901 23.778,16.38 30.949,16.38 27.875,17.14 	
+		"/>
+	<polygon fill="#FFFFFF" points="22.955,14.371 25.412,15.379 31.355,12.351 34.023,13.36 32.592,10.839 25.622,10.839 
+		28.486,11.591 	"/>
+	<polygon fill="#FFFFFF" points="22.955,14.371 25.412,15.379 31.355,12.351 34.023,13.36 32.592,10.839 25.622,10.839 
+		28.486,11.591 	"/>
+	<polygon fill="#FFFFFF" points="21.931,17.14 19.468,16.13 13.735,19.159 10.864,18.15 12.296,20.92 19.468,20.92 16.394,19.911 	
+		"/>
+	<polygon fill="#FFFFFF" points="21.931,17.14 19.468,16.13 13.735,19.159 10.864,18.15 12.296,20.92 19.468,20.92 16.394,19.911 	
+		"/>
+	<polygon fill="#FFFFFF" points="11.474,11.591 13.938,10.589 19.882,13.36 22.541,12.601 21.11,15.12 14.141,15.12 17.011,14.371 	
+		"/>
+	<polygon fill="#FFFFFF" points="11.474,11.591 13.938,10.589 19.882,13.36 22.541,12.601 21.11,15.12 14.141,15.12 17.011,14.371 	
+		"/>
+	<polygon fill="#FFFFFF" points="33.615,20.169 31.152,21.169 25.412,18.15 22.541,19.159 23.98,16.64 31.152,16.64 28.078,17.39 	
+		"/>
+	<polygon fill="#FFFFFF" points="33.615,20.169 31.152,21.169 25.412,18.15 22.541,19.159 23.98,16.64 31.152,16.64 28.078,17.39 	
+		"/>
+	<g>
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="5.37" y="15.754" width="0.466" height="10.009"/>
+			</defs>
+			<clipPath id="SVGID_2_">
+				<use xlink:href="#SVGID_1_"  overflow="visible"/>
+			</clipPath>
+			
+				<line clip-path="url(#SVGID_2_)" fill="none" stroke="#AEE2FA" stroke-width="0.2971" stroke-linecap="round" stroke-miterlimit="10" x1="5.531" y1="5.541" x2="5.531" y2="35.799"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<defs>
+				<rect id="SVGID_3_" x="38.972" y="15.754" width="0.465" height="10.009"/>
+			</defs>
+			<clipPath id="SVGID_4_">
+				<use xlink:href="#SVGID_3_"  overflow="visible"/>
+			</clipPath>
+			
+				<line clip-path="url(#SVGID_4_)" fill="none" stroke="#AEE2FA" stroke-width="0.2971" stroke-linecap="round" stroke-miterlimit="10" x1="39.145" y1="5.541" x2="39.145" y2="35.799"/>
+		</g>
+	</g>
+</g>
+</svg>