refactor: update icons

src/assets/img/icons.js

@@ -1,34 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const requireComponent = require.context("../../assets", false, /\.png$/);
-
-const result = {};
-function capitalizeFirstLetter(str) {
-  return str.toUpperCase();
-}
-function validateFileName(str) {
-  return (
-    /^\S+\.png$/.test(str) &&
-    str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1))
-  );
-}
-requireComponent.keys().forEach((filePath) => {
-  const componentConfig = requireComponent(filePath);
-  const fileName = validateFileName(filePath);
-  result[fileName] = componentConfig;
-});
-export default result;

src/assets/img/icons.ts

@@ -14,9 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const requireComponent = require.context("./images", false, /\.png$/);
-
+const requireComponent = require.context("./technologies", false, /\.png$/);
+const requireTool = require.context("./tools", false, /\.png$/);
 const result: { [key: string]: string } = {};
+const t: { [key: string]: string } = {};
+
 function capitalizeFirstLetter(str: string) {
   return str.toUpperCase();
 }
@@ -27,11 +29,21 @@ function validateFileName(str: string): string | undefined {
     );
   }
 }
-requireComponent.keys().forEach((filePath: string) => {
+[...requireComponent.keys()].forEach((filePath: string) => {
   const componentConfig = requireComponent(filePath);
+
   const fileName = validateFileName(filePath);
   if (fileName) {
     result[fileName] = componentConfig;
   }
 });
-export default result;
+[...requireTool.keys()].forEach((filePath: string) => {
+  const componentConfig = requireTool(filePath);
+
+  const fileName = validateFileName(filePath);
+  if (fileName) {
+    t[fileName] = componentConfig;
+  }
+});
+
+export default { ...result, ...t };

src/locales/lang/en.ts

@@ -81,6 +81,8 @@ const msg = {
   nodeMetrics: "Metrics related with topology nodes",
   instanceDashboard: "Dashboard name related with service instances",
   endpointDashboard: "Dashboard name related with endpoints",
+  callSettings: "Call settings",
+  nodeSettings: "Node Settings",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -80,6 +80,8 @@ const msg = {
   nodeMetrics: "拓扑节点关联的指标",
   instanceDashboard: "拓节点关联的实例的仪表板名称",
   endpointDashboard: "拓节点端点的实例的仪表板名称",
+  callSettings: "拓扑线设置",
+  nodeSettings: "拓扑点设置",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/views/dashboard/related/topology/Settings.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="link-settings">
-    <h5 class="title">Call settings</h5>
+    <h5 class="title">{{ t("callSettings") }}</h5>
     <div class="label">{{ t("linkDashboard") }}</div>
     <el-input
       v-model="states.linkDashboard"
@@ -35,7 +35,7 @@ limitations under the License. -->
     />
   </div>
   <div class="node-settings">
-    <h5 class="title">Node settings</h5>
+    <h5 class="title">{{ t("nodeSettings") }}</h5>
     <div class="label">{{ t("nodeDashboard") }}</div>
     <el-input
       v-model="states.nodeDashboard"

src/views/dashboard/related/topology/utils/legend.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import icons from "./icons";
+import icons from "@/assets/img/icons";
 
 export default function topoLegend(
   graph: any,

src/views/dashboard/related/topology/utils/nodeElement.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import icons from "./icons";
+import icons from "@/assets/img/icons";
 import { Node } from "@/types/topology";
 
 icons["KAFKA-CONSUMER"] = icons.KAFKA;

src/views/dashboard/related/topology/utils/tool.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import icons from "./icons";
+import icons from "@/assets/img/icons";
 import { Node } from "@/types/topology";
 
 const Hexagon = (side: number, r: number, cx: number, cy: number) => {