feat: Add menus in side bar (#30)

src/assets/icons/cloud_queue.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z"></path>
+</svg>

src/assets/icons/language.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t2.461 1.43q-0.938-1.688-1.406-3.563h-2.953zM4.266 14.016h3.375q-0.141-0.984-0.141-2.016t0.141-2.016h-3.375q-0.281 1.313-0.281 2.016t0.281 2.016zM12 4.031q-1.313 1.922-1.922 3.984h3.844q-0.609-2.063-1.922-3.984zM18.938 8.016q-0.656-1.078-1.922-2.133t-2.438-1.43q0.844 1.547 1.406 3.563h2.953zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
+</svg>

src/assets/icons/linear_scale.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M19.5 9.516q1.031 0 1.758 0.727t0.727 1.758-0.727 1.758-1.758 0.727q-1.688 0-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5t-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5-1.031 0-1.758-0.727t-0.727-1.758 0.727-1.758 1.758-0.727q1.688 0 2.297 1.5h2.906q0.609-1.5 2.297-1.5t2.297 1.5h2.906q0.609-1.5 2.297-1.5z"></path>
+</svg>

src/components/Selector.vue

@@ -37,8 +37,8 @@ import { ref, watch } from "vue";
 import type { PropType } from "vue";
 
 interface Option {
-  label: string;
+  label: string | number;
-  value: string;
+  value: string | number;
 }
 
 /*global  defineProps, defineEmits*/
@@ -49,11 +49,14 @@ const props = defineProps({
     default: () => [],
   },
   value: {
-    type: [Array, String, Number] as PropType<any>,
+    type: [Array, String, Number, undefined] as PropType<any>,
     default: () => [],
   },
   size: { type: null, default: "default" },
-  placeholder: { type: String, default: "Select a option" },
+  placeholder: {
+    type: [String, Number] as PropType<string | number>,
+    default: "Select a option",
+  },
   borderRadius: { type: Number, default: 3 },
   multiple: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
@@ -61,7 +64,7 @@ const props = defineProps({
 
 const selected = ref<string[] | string>(props.value);
 function changeSelected() {
-  const options = props.options.filter((d: Option) =>
+  const options = props.options.filter((d: any) =>
     props.multiple
       ? selected.value.includes(d.value)
       : selected.value === d.value

src/hooks/useProcessor.ts

@@ -57,7 +57,7 @@ export function useQueryProcessor(config: any) {
       variables.push(`$condition${index}: TopNCondition!`);
       conditions[`condition${index}`] = {
         name,
-        parentService: ["Service", "All"].includes(dashboardStore.entity)
+        parentService: ["All"].includes(dashboardStore.entity)
           ? null
           : selectorStore.currentService.value,
         normal: selectorStore.currentService.normal,

src/layout/components/SideBar.vue

@@ -33,13 +33,17 @@ limitations under the License. -->
       <template v-for="(menu, index) in routes" :key="index">
         <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
           <template #title>
-            <router-link :to="menu.path" :exact="menu.meta.exact || false">
+            <router-link
+              class="items"
+              :to="menu.path"
+              :exact="menu.meta.exact || false"
+            >
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                 <Icon size="lg" :iconName="menu.meta.icon" />
               </el-icon>
-              <span :class="isCollapse ? 'collapse' : ''">{{
+              <span :class="isCollapse ? 'collapse' : ''">
-                t(menu.meta.title)
+                {{ t(menu.meta.title) }}
-              }}</span>
+              </span>
             </router-link>
           </template>
           <el-menu-item-group>
@@ -48,7 +52,11 @@ limitations under the License. -->
               :index="m.name"
               :key="idx"
             >
-              <router-link :to="m.path" :exact="m.meta.exact || false">
+              <router-link
+                class="items"
+                :to="m.path"
+                :exact="m.meta.exact || false"
+              >
                 <span>{{ t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
@@ -59,13 +67,21 @@ limitations under the License. -->
           @click="changePage(menu)"
           v-else
         >
-          <el-icon class="menu-icons" :style="{ margin: '-10px 12px 0 0' }">
+          <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
-            <router-link :to="menu.children[0].path" :exact="menu.meta.exact">
+            <router-link
+              class="items"
+              :to="menu.children[0].path"
+              :exact="menu.meta.exact"
+            >
               <Icon size="lg" :iconName="menu.meta.icon" />
             </router-link>
           </el-icon>
           <template #title>
-            <router-link :to="menu.children[0].path" :exact="menu.meta.exact">
+            <router-link
+              class="items"
+              :to="menu.children[0].path"
+              :exact="menu.meta.exact"
+            >
               <span>{{ t(menu.meta.title) }}</span>
             </router-link>
           </template>
@@ -99,7 +115,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
 const routes = ref<any>(useRouter().options.routes);
-const isCollapse = ref(true);
+const isCollapse = ref(false);
 const controlMenu = () => {
   isCollapse.value = !isCollapse.value;
 };
@@ -172,4 +188,9 @@ span.collapse {
 .el-icon.el-sub-menu__icon-arrow {
   height: 12px;
 }
+
+.items {
+  display: inline-block;
+  width: 100%;
+}
 </style>

src/locales/lang/en.ts

@@ -113,6 +113,12 @@ const msg = {
   noRoot: "Please set a root dashboard for",
   noWidget: "Please add widgets.",
   rename: "Rename",
+  selfObservability: "Self Observability",
+  satellite: "Satellite",
+  skyWalkingServer: "Sky Walking Server",
+  functions: "Functions",
+  browser: "Browser",
+  linux: "Linux",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -113,6 +113,12 @@ const msg = {
   showGroup: "显示分组",
   noWidget: "请添加组件",
   rename: "重命名",
+  selfObservability: "自观性",
+  satellite: "Satellite",
+  skyWalkingServer: "Sky Walking服务",
+  functions: "Functions",
+  linux: "Linux",
+  browser: "浏览器",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/router/browser.ts

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+import { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesBrowser: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "Browser",
+    meta: {
+      title: "browser",
+      icon: "language",
+    },
+    redirect: "/browser",
+    component: Layout,
+    children: [
+      {
+        path: "/browser",
+        name: "Browser",
+        meta: {
+          title: "browser",
+          headPath: "/browser",
+          exact: true,
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+    ],
+  },
+];

src/router/database.ts

@@ -23,7 +23,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
     name: "Database",
     meta: {
       title: "database",
-      icon: "epic",
+      icon: "bar_chart",
     },
     redirect: "/database",
     component: Layout,

src/router/functions.ts

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+import { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesFunctions: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "Functions",
+    meta: {
+      title: "functions",
+      icon: "cloud_queue",
+    },
+    redirect: "/functions",
+    component: Layout,
+    children: [
+      {
+        path: "/functions",
+        name: "Functions",
+        meta: {
+          title: "functions",
+          headPath: "/functions",
+          exact: true,
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+    ],
+  },
+];

src/router/index.ts

@@ -23,12 +23,18 @@ import { routesDashboard } from "./dashboard";
 import { routesEvent } from "./event";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
+import { routesSelf } from "./selfObservability";
+import { routesFunctions } from "./functions";
+import { routesBrowser } from "./browser";
 
 const routes: Array<RouteRecordRaw> = [
   ...routesGen,
   ...routesMesh,
-  ...routesDatabase,
+  ...routesFunctions,
   ...routesInfra,
+  ...routesBrowser,
+  ...routesDatabase,
+  ...routesSelf,
   ...routesDashboard,
   ...routesAlarm,
   ...routesEvent,

src/router/infrastructure.ts

@@ -27,24 +27,34 @@ export const routesInfra: Array<RouteRecordRaw> = [
       exact: true,
       hasGroup: true,
     },
+    redirect: "/infrastructure",
     component: Layout,
     children: [
       {
-        path: "/infrastructure/vm",
+        path: "/infrastructure",
-        name: "VirtualMachine",
+        name: "Linux",
         meta: {
-          title: "virtualMachine",
+          title: "linux",
         },
-        component: () => import("@/views/infrastructure/Infrastructure.vue"),
+        component: () => import("@/views/Layer.vue"),
-      },
+        // component: () => import("@/views/infrastructure/Infrastructure.vue"),
-      {
-        path: "/infrastructure/k8s",
-        name: "Kubernetes",
-        meta: {
-          title: "kubernetes",
-        },
-        component: () => import("@/views/infrastructure/Infrastructure.vue"),
       },
+      // {
+      //   path: "/infrastructure/vm",
+      //   name: "VirtualMachine",
+      //   meta: {
+      //     title: "virtualMachine",
+      //   },
+      //   component: () => import("@/views/infrastructure/Infrastructure.vue"),
+      // },
+      // {
+      //   path: "/infrastructure/k8s",
+      //   name: "Kubernetes",
+      //   meta: {
+      //     title: "kubernetes",
+      //   },
+      //   component: () => import("@/views/infrastructure/Infrastructure.vue"),
+      // },
     ],
   },
 ];

src/router/selfObservability.ts

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ */
+import { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesSelf: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "SelfObservability",
+    redirect: "/self/skyWalkingServer",
+    meta: {
+      title: "selfObservability",
+      icon: "logo",
+      hasGroup: true,
+    },
+    component: Layout,
+    children: [
+      {
+        path: "/self/skyWalkingServer",
+        name: "SkyWalkingServer",
+        meta: {
+          title: "skyWalkingServer",
+          headPath: "/mesh/services",
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+      {
+        path: "/self/satellite",
+        name: "Satellite",
+        meta: {
+          title: "satellite",
+          headPath: "/mesh/controlPanel",
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+    ],
+  },
+];

src/router/serviceMesh.ts

@@ -24,7 +24,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
     redirect: "/mesh/services",
     meta: {
       title: "serviceMesh",
-      icon: "bar_chart",
+      icon: "epic",
       hasGroup: true,
     },
     component: Layout,

src/views/Layer.vue

@@ -34,6 +34,11 @@ const routeNames = [
   "MeshServices",
   "ControlPanel",
   "DataPanel",
+  "Linux",
+  "SkyWalkingServer",
+  "Satellite",
+  "Functions",
+  "Browser",
 ];
 const layer = ref<string>("GENERAL");
 getDashboard();
@@ -69,6 +74,21 @@ function setLayer(n: string) {
     case routeNames[4]:
       layer.value = "MESH_DP";
       break;
+    case routeNames[5]:
+      layer.value = "OS_LINUX";
+      break;
+    case routeNames[6]:
+      layer.value = "SO11Y_OAP";
+      break;
+    case routeNames[7]:
+      layer.value = "SO11Y_SATELLITE";
+      break;
+    case routeNames[8]:
+      layer.value = "FAAS";
+      break;
+    case routeNames[9]:
+      layer.value = "BROWSER";
+      break;
     default:
       layer.value = "GENERAL";
       break;

src/views/dashboard/List.vue

@@ -57,7 +57,7 @@ limitations under the License. -->
         <el-table-column label="Operations">
           <template #default="scope">
             <el-button size="small" @click="handleView(scope.row)">
-              {{ t("view") }}
+              {{ t("edit") }}
             </el-button>
             <el-button size="small" @click="handleEdit(scope.row)">
               {{ t("rename") }}

src/views/dashboard/configuration/widget/MetricOptions.vue

@@ -90,12 +90,11 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import {
   MetricTypes,
   ListChartTypes,
-  MetricCatalog,
   DefaultGraphConfig,
   EntityType,
   ChartTypes,
   PodsChartTypes,
-  ListEntity,
+  MetricsType,
 } from "../../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
@@ -134,13 +133,8 @@ states.visTypes = setVisTypes();
 setDashboards();
 setMetricType();
 
-async function setMetricType(catalog?: string) {
+async function setMetricType() {
   const { graph } = dashboardStore.selectedGrid;
-  if (states.isList) {
-    catalog = catalog || ListEntity[graph.type];
-  } else {
-    catalog = catalog || dashboardStore.entity;
-  }
   const json = await dashboardStore.fetchMetricList();
   if (json.errors) {
     ElMessage.error(json.errors);
@@ -149,16 +143,11 @@ async function setMetricType(catalog?: string) {
   states.metricList = (json.data.metrics || []).filter(
     (d: { catalog: string; type: string }) => {
       if (states.isList || graph.type === "Table") {
-        if (
+        if (d.type === MetricsType.REGULAR_VALUE) {
-          d.type === "REGULAR_VALUE" &&
-          catalog === (MetricCatalog as any)[d.catalog]
-        ) {
           return d;
         }
       } else {
-        if (catalog === (MetricCatalog as any)[d.catalog]) {
+        return d;
-          return d;
-        }
       }
     }
   );
@@ -253,12 +242,7 @@ function changeChartType(item: Option) {
     states.metrics = [""];
     states.metricTypes = [""];
   }
-  const catalog: { [key: string]: string } = {
+  setMetricType();
-    InstanceList: EntityType[3].value,
-    EndpointList: EntityType[2].value,
-    ServiceList: EntityType[0].value,
-  };
-  setMetricType(catalog[graph.type]);
   setDashboards();
   states.dashboardName = "";
 }
@@ -367,7 +351,7 @@ function deleteMetric(index: number) {
   states.metricTypes.splice(index, 1);
 }
 function setMetricTypeList(type: string) {
-  if (type !== "REGULAR_VALUE") {
+  if (type !== MetricsType.REGULAR_VALUE) {
     return MetricTypes[type];
   }
   if (states.isList || dashboardStore.selectedGrid.graph.type === "Table") {

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

@@ -213,7 +213,7 @@ function handleNodeClick(d: Node & { x: number; y: number }) {
   topologyStore.setNode(d);
   topologyStore.setLink(null);
   operationsPos.x = d.x;
-  operationsPos.y = d.y + 30;
+  operationsPos.y = d.y - 70;
   if (d.layer === String(dashboardStore.layerId)) {
     return;
   }
@@ -239,7 +239,9 @@ function handleLinkClick(event: any, d: Call) {
     dashboardStore.entity === EntityType[1].value
       ? EntityType[0].value
       : dashboardStore.entity;
-  const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${d.source.id}/${d.target.id}/${settings.value.linkDashboard}`;
+  const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${
+    d.source.id
+  }/${d.target.id}/${settings.value.linkDashboard.split(" ").join("-")}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
 }
@@ -371,19 +373,25 @@ async function handleInspect() {
   update();
 }
 function handleGoEndpoint(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${topologyStore.node.id}/${name}`;
+  const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${
+    topologyStore.node.id
+  }/${name.split(" ").join("-")}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
 }
 function handleGoInstance(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${topologyStore.node.id}/${name}`;
+  const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${
+    topologyStore.node.id
+  }/${name.split(" ").join("-")}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
 }
 function handleGoDashboard(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/Service/${topologyStore.node.id}/${name}`;
+  const path = `/dashboard/${dashboardStore.layerId}/Service/${
+    topologyStore.node.id
+  }/${name.split(" ").join("-")}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");

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

@@ -189,8 +189,8 @@ function selectNodeLink(d: any) {
   }
   topologyStore.setNode(d.data);
   topologyStore.setLink(null);
-  operationsPos.x = d.event.event.clientX;
+  operationsPos.x = d.event.event.clientX - 200;
-  operationsPos.y = d.event.event.clientY;
+  operationsPos.y = d.event.event.clientY - 150;
 }
 
 async function changeDepth(opt: Option[] | any) {

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

@@ -16,11 +16,12 @@ limitations under the License. -->
   <div class="link-settings">
     <h5 class="title">{{ t("callSettings") }}</h5>
     <div class="label">{{ t("linkDashboard") }}</div>
-    <el-input
+    <Selector
-      v-model="states.linkDashboard"
+      :value="states.linkDashboard"
-      placeholder="Please input a dashboard name for calls"
+      :options="states.linkDashboards"
-      @change="updateSettings"
       size="small"
+      placeholder="Please input a dashboard name for calls"
+      @change="changeLinkDashboard"
       class="inputs"
     />
     <div class="label">{{ t("linkServerMetrics") }}</div>
@@ -51,16 +52,17 @@ limitations under the License. -->
   <div class="node-settings">
     <h5 class="title">{{ t("nodeSettings") }}</h5>
     <div class="label">{{ t("nodeDashboard") }}</div>
-    <el-input
+    <Selector
-      v-show="!isServer"
+      v-show="!isService"
-      v-model="states.nodeDashboard"
+      :value="states.nodeDashboard"
-      placeholder="Please input a dashboard name for nodes"
+      :options="states.nodeDashboards"
-      @change="updateSettings"
       size="small"
+      placeholder="Please input a dashboard name for nodes"
+      @change="changeNodeDashboard"
       class="inputs"
     />
     <div
-      v-show="isServer"
+      v-show="isService"
       v-for="(item, index) in items"
       :key="index"
       class="metric-item"
@@ -73,11 +75,12 @@ limitations under the License. -->
         @change="changeScope(index, $event)"
         class="item mr-5"
       />
-      <el-input
+      <Selector
-        v-model="item.dashboard"
+        :value="item.dashboard"
+        :options="states.nodeDashboards"
+        size="small"
         placeholder="Please input a dashboard name for nodes"
         @change="updateNodeDashboards(index, $event)"
-        size="small"
         class="item mr-5"
       />
       <span>
@@ -108,7 +111,7 @@ limitations under the License. -->
       @change="changeNodeMetrics"
     />
   </div>
-  <div class="legend-settings" v-show="isServer">
+  <div class="legend-settings" v-show="isService">
     <h5 class="title">{{ t("legendSettings") }}</h5>
     <div class="label">{{ t("conditions") }}</div>
     <div v-for="(metric, index) of legend.metric" :key="metric.name + index">
@@ -184,7 +187,8 @@ import { MetricCatalog, ScopeType, MetricConditions } from "../../../data";
 import { Option } from "@/types/app";
 import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
 import { Node, Call } from "@/types/topology";
-import { EntityType, LegendOpt } from "../../../data";
+import { DashboardItem } from "@/types/dashboard";
+import { EntityType, LegendOpt, MetricsType } from "../../../data";
 
 /*global defineEmits */
 const emit = defineEmits(["update", "updateNodes"]);
@@ -208,6 +212,8 @@ const states = reactive<{
   nodeMetrics: string[];
   nodeMetricList: Option[];
   linkMetricList: Option[];
+  linkDashboards: (DashboardItem & { label: string; value: string })[];
+  nodeDashboards: (DashboardItem & { label: string; value: string })[];
 }>({
   linkDashboard: "",
   nodeDashboard: [],
@@ -216,8 +222,10 @@ const states = reactive<{
   nodeMetrics: [],
   nodeMetricList: [],
   linkMetricList: [],
+  linkDashboards: [],
+  nodeDashboards: [],
 });
-const isServer = [EntityType[0].value, EntityType[1].value].includes(
+const isService = [EntityType[0].value, EntityType[1].value].includes(
   dashboardStore.entity
 );
 const legend = reactive<{
@@ -226,6 +234,7 @@ const legend = reactive<{
 
 getMetricList();
 async function getMetricList() {
+  const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
   const json = await dashboardStore.fetchMetricList();
   if (json.errors) {
     ElMessage.error(json.errors);
@@ -237,18 +246,28 @@ async function getMetricList() {
       : dashboardStore.entity === EntityType[4].value
       ? EntityType[3].value
       : dashboardStore.entity;
-  states.nodeMetricList = (json.data.metrics || []).filter(
+  states.linkDashboards = list.reduce(
-    (d: { catalog: string }) => entity === (MetricCatalog as any)[d.catalog]
+    (
+      prev: (DashboardItem & { label: string; value: string })[],
+      d: DashboardItem
+    ) => {
+      if (
+        d.layer === dashboardStore.layerId &&
+        d.entity === entity + "Relation"
+      ) {
+        prev.push({ ...d, label: d.name, value: d.name });
+      }
+      return prev;
+    },
+    []
+  );
+  states.nodeMetricList = (json.data.metrics || []).filter(
+    (d: { type: string }) => d.type === MetricsType.REGULAR_VALUE
   );
-  const e =
-    dashboardStore.entity === EntityType[1].value
-      ? EntityType[0].value
-      : dashboardStore.entity === EntityType[4].value
-      ? EntityType[3].value
-      : dashboardStore.entity;
   states.linkMetricList = (json.data.metrics || []).filter(
-    (d: { catalog: string }) =>
+    (d: { catalog: string; type: string }) =>
-      e + "Relation" === (MetricCatalog as any)[d.catalog]
+      entity + "Relation" === (MetricCatalog as any)[d.catalog] &&
+      d.type === MetricsType.REGULAR_VALUE
   );
 }
 async function setLegend() {
@@ -259,7 +278,7 @@ async function setLegend() {
 
   emit("update", {
     linkDashboard: states.linkDashboard,
-    nodeDashboard: isServer
+    nodeDashboard: isService
       ? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
       : states.nodeDashboard,
     linkServerMetrics: states.linkServerMetrics,
@@ -276,15 +295,34 @@ async function setLegend() {
   }
   emit("updateNodes");
 }
+function changeNodeDashboard(opt: any) {
+  states.nodeDashboard = opt[0].value;
+}
+function changeLinkDashboard(opt: any) {
+  states.linkDashboard = opt[0].value;
+}
 function changeLegend(type: string, opt: any, index: number) {
   (legend.metric[index] as any)[type] = opt[0].value || opt;
 }
-function changeScope(index: number, opt: Option[]) {
+function changeScope(index: number, opt: Option[] | any) {
   items[index].scope = opt[0].value;
-  items[index].dashboard = "";
+  const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
+  states.nodeDashboards = list.reduce(
+    (
+      prev: (DashboardItem & { label: string; value: string })[],
+      d: DashboardItem
+    ) => {
+      if (d.layer === dashboardStore.layerId && d.entity === opt[0].value) {
+        prev.push({ ...d, label: d.name, value: d.name });
+      }
+      return prev;
+    },
+    []
+  );
+  items[index].dashboard = states.nodeDashboards[0].value;
 }
-function updateNodeDashboards(index: number, content: string) {
+function updateNodeDashboards(index: number, content: Option[] | any) {
-  items[index].dashboard = content;
+  items[index].dashboard = content[0].value;
   updateSettings();
 }
 function addItem() {
@@ -297,7 +335,7 @@ function deleteItem(index: number) {
 function updateSettings() {
   emit("update", {
     linkDashboard: states.linkDashboard,
-    nodeDashboard: isServer
+    nodeDashboard: isService
       ? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
       : states.nodeDashboard,
     linkServerMetrics: states.linkServerMetrics,
@@ -306,7 +344,7 @@ function updateSettings() {
     legend: legend.metric,
   });
 }
-async function changeLinkServerMetrics(options: Option[]) {
+async function changeLinkServerMetrics(options: Option[] | any) {
   states.linkServerMetrics = options.map((d: Option) => d.value);
   updateSettings();
   if (!states.linkServerMetrics.length) {
@@ -323,7 +361,7 @@ async function changeLinkServerMetrics(options: Option[]) {
     ElMessage.error(res.errors);
   }
 }
-async function changeLinkClientMetrics(options: Option[]) {
+async function changeLinkClientMetrics(options: Option[] | any) {
   states.linkClientMetrics = options.map((d: Option) => d.value);
   updateSettings();
   if (!states.linkClientMetrics.length) {
@@ -340,7 +378,7 @@ async function changeLinkClientMetrics(options: Option[]) {
     ElMessage.error(res.errors);
   }
 }
-async function changeNodeMetrics(options: Option[]) {
+async function changeNodeMetrics(options: Option[] | any) {
   states.nodeMetrics = options.map((d: Option) => d.value);
   updateSettings();
   if (!states.nodeMetrics.length) {