feat: update tools

src/views/dashboard/List.vue

@@ -39,14 +39,14 @@ limitations under the License. -->
       <el-table-column prop="date" label="Date" />
       <el-table-column label="Operations">
         <template #default="scope">
-          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
+          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
             {{ t("view") }}
           </el-button>
-          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
+          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
             {{ t("edit") }}
           </el-button>
           <el-button
-            size="mini"
+            size="small"
             type="danger"
             @click="handleDelete(scope.$index, scope.row)"
           >

src/views/dashboard/configuration/ConfigEdit.vue

@@ -60,10 +60,10 @@ limitations under the License. -->
       </el-collapse>
     </div>
     <div class="footer">
-      <el-button size="mini">
+      <el-button size="small">
         {{ t("cancel") }}
       </el-button>
-      <el-button size="mini" type="primary" @click="applyConfig">
+      <el-button size="small" type="primary" @click="applyConfig">
         {{ t("apply") }}
       </el-button>
     </div>

src/views/dashboard/data.ts

@@ -142,7 +142,7 @@ export enum MetricCatalog {
 export const EntityType = [
   { value: "Service", label: "Service", key: 1 },
   { value: "All", label: "All", key: 10 },
-  { value: "Endpoint", label: "Service Endpoint", key: 3 },
+  { value: "Endpoint", label: "Endpoint", key: 3 },
   { value: "ServiceInstance", label: "Service Instance", key: 3 },
   { value: "ServiceRelation", label: "Service Relation", key: 2 },
   {
@@ -172,3 +172,8 @@ export const ToolIcons = [
   { name: "device_hub", content: "Topology", id: "topology" },
   // { name: "save", content: "Apply", id: "apply" },
 ];
+export const ScopeType = [
+  { value: "Service", label: "Service", key: 1 },
+  { value: "Endpoint", label: "Endpoint", key: 3 },
+  { value: "ServiceInstance", label: "Service Instance", key: 3 },
+];

src/views/dashboard/related/topology/components/Graph.vue

@@ -42,7 +42,11 @@ limitations under the License. -->
         left: operationsPos.x + 'px',
       }"
     >
-      <span v-for="(item, index) of items" :key="index" @click="item.func">
+      <span
+        v-for="(item, index) of items"
+        :key="index"
+        @click="item.func(item.dashboard)"
+      >
         {{ item.title }}
       </span>
     </div>
@@ -88,7 +92,9 @@ const legend = ref<any>(null);
 const showSetting = ref<boolean>(false);
 const settings = ref<any>({});
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
-const items = ref([
+const items = ref<
+  { id: string; title: string; func: any; dashboard?: string }[]
+>([
   { id: "inspect", title: "Inspect", func: handleInspect },
   { id: "alarm", title: "Alarm", func: handleGoAlarm },
 ]);
@@ -334,20 +340,20 @@ async function handleInspect() {
   await init();
   update();
 }
-function handleGoEndpoint() {
+function handleGoEndpoint(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${topologyStore.node.id}/${settings.value.endpointDashboard}`;
+  const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
 }
-function handleGoInstance() {
+function handleGoInstance(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${topologyStore.node.id}/${settings.value.instanceDashboard}`;
+  const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
 }
-function handleGoDashboard() {
+function handleGoDashboard(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/Service/${topologyStore.node.id}/${settings.value.nodeDashboard}`;
+  const path = `/dashboard/${dashboardStore.layerId}/Service/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
@@ -400,27 +406,32 @@ function updateSettings(config: any) {
     { id: "alarm", title: "Alarm", func: handleGoAlarm },
   ];
   settings.value = config;
-  if (config.nodeDashboard) {
+  for (const item of config.nodeDashboard) {
+    if (item.scope === EntityType[0].value) {
       items.value.push({
         id: "dashboard",
-      title: "View Dashboard",
+        title: "Dashboard",
         func: handleGoDashboard,
+        ...item,
       });
     }
-  if (config.instanceDashboard) {
+    if (item.scope === EntityType[2].value) {
-    items.value.push({
-      id: "instance",
-      title: "Instance",
-      func: handleGoInstance,
-    });
-  }
-  if (config.endpointDashboard) {
       items.value.push({
         id: "endpoint",
         title: "Endpoint",
         func: handleGoEndpoint,
+        ...item,
       });
     }
+    if (item.scope === EntityType[3].value) {
+      items.value.push({
+        id: "instance",
+        title: "Service Instance",
+        func: handleGoInstance,
+        ...item,
+      });
+    }
+  }
 }
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resize);

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

@@ -51,31 +51,39 @@ limitations under the License. -->
   <div class="node-settings">
     <h5 class="title">{{ t("nodeSettings") }}</h5>
     <div class="label">{{ t("nodeDashboard") }}</div>
+    <div v-for="(item, index) in items" :key="index" class="metric-item">
+      <Selector
+        :value="item.scope"
+        :options="ScopeType"
+        size="small"
+        placeholder="Select a scope"
+        @change="changeScope(index, $event)"
+        class="item"
+      />
       <el-input
-      v-model="states.nodeDashboard"
+        v-model="item.dashboard"
         placeholder="Please input a dashboard name for nodes"
-      @change="updateSettings"
+        @change="updateNodeDashboards(index, $event)"
         size="small"
-      class="inputs"
+        class="item"
       />
-    <span v-show="isService">
+      <span>
-      <div class="label">{{ t("instanceDashboard") }}</div>
+        <Icon
-      <el-input
+          class="cp mr-5"
-        v-model="states.instanceDashboard"
+          v-show="index === items.length - 1 && items.length < 5"
-        placeholder="Please input a dashboard name for service instances"
+          iconName="add_circle_outlinecontrol_point"
-        @change="updateSettings"
+          size="middle"
-        size="small"
+          @click="addItem"
-        class="inputs"
         />
-      <div class="label">{{ t("endpointDashboard") }}</div>
+        <Icon
-      <el-input
+          class="cp"
-        v-model="states.endpointDashboard"
+          v-show="items.length > 1"
-        placeholder="Please input a dashboard name for endpoints"
+          iconName="remove_circle_outline"
-        @change="updateSettings"
+          size="middle"
-        size="small"
+          @click="deleteItem(index)"
-        class="inputs"
         />
       </span>
+    </div>
     <div class="label">{{ t("nodeMetrics") }}</div>
     <Selector
       class="inputs"
@@ -94,7 +102,7 @@ import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useTopologyStore } from "@/store/modules/topology";
 import { ElMessage } from "element-plus";
-import { MetricCatalog } from "../../../data";
+import { MetricCatalog, ScopeType } from "../../../data";
 import { Option } from "@/types/app";
 import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
 import { Node, Call } from "@/types/topology";
@@ -105,11 +113,15 @@ const emit = defineEmits(["update"]);
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const topologyStore = useTopologyStore();
+const items = reactive<
+  {
+    scope: string;
+    dashboard: string;
+  }[]
+>([{ scope: "", dashboard: "" }]);
 const states = reactive<{
   linkDashboard: string;
   nodeDashboard: string;
-  instanceDashboard: string;
-  endpointDashboard: string;
   linkServerMetrics: string[];
   linkClientMetrics: string[];
   nodeMetrics: string[];
@@ -118,17 +130,12 @@ const states = reactive<{
 }>({
   linkDashboard: "",
   nodeDashboard: "",
-  instanceDashboard: "",
-  endpointDashboard: "",
   linkServerMetrics: [],
   linkClientMetrics: [],
   nodeMetrics: [],
   nodeMetricList: [],
   linkMetricList: [],
 });
-const isService = ref(
-  [EntityType[1].value, EntityType[0].value].includes(dashboardStore.entity)
-);
 
 getMetricList();
 async function getMetricList() {
@@ -152,12 +159,27 @@ async function getMetricList() {
       e + "Relation" === (MetricCatalog as any)[d.catalog]
   );
 }
+function changeScope(index: number, opt: Option[]) {
+  items[index].scope = opt[0].value;
+  items[index].dashboard = "";
+}
+function updateNodeDashboards(index: number, content: string) {
+  items[index].dashboard = content;
+  updateSettings();
+}
+function addItem() {
+  items.push({ scope: "", dashboard: "" });
+}
+function deleteItem(index: number) {
+  items.splice(index, 1);
+  updateSettings();
+}
 function updateSettings() {
   emit("update", {
     linkDashboard: states.linkDashboard,
-    nodeDashboard: states.nodeDashboard,
+    nodeDashboard: items.filter(
-    endpointDashboard: states.endpointDashboard,
+      (d: { scope: string; dashboard: string }) => d.dashboard
-    instanceDashboard: states.instanceDashboard,
+    ),
     linkServerMetrics: states.linkServerMetrics,
     linkClientMetrics: states.linkClientMetrics,
     nodeMetrics: states.nodeMetrics,
@@ -223,6 +245,11 @@ async function changeNodeMetrics(options: Option[]) {
   width: 330px;
 }
 
+.item {
+  width: 137px;
+  margin: 5px 5px 0 0;
+}
+
 .title {
   margin-bottom: 0;
 }