feat: open dashboards with selector ids of link url

src/views/dashboard/graphs/EndpointList.vue

@@ -39,7 +39,7 @@ limitations under the License. -->
           <router-link
             target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/endpoint/${selectorStore.currentService.value}/${scope.row.value}/${config.dashboardName}`"
+            :to="`/dashboard/${scope.row.layer}/Endpoint/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}
@@ -67,7 +67,7 @@ limitations under the License. -->
       background
       layout="prev, pager, next"
       :page-size="pageSize"
-      :total="selectorStore.endpoints.length"
+      :total="selectorStore.pods.length"
       @current-change="changePage"
       @prev-click="changePage"
       @next-click="changePage"
@@ -115,8 +115,8 @@ async function queryEndpoints() {
     ElMessage.error(resp.errors);
     return;
   }
-  searchEndpoints.value = selectorStore.endpoints;
-  endpoints.value = selectorStore.endpoints.splice(0, pageSize);
+  searchEndpoints.value = selectorStore.pods;
+  endpoints.value = selectorStore.pods.splice(0, pageSize);
   queryEndpointMetrics(endpoints.value);
 }
 async function queryEndpointMetrics(currentPods: Endpoint[]) {
@@ -147,8 +147,8 @@ function changePage(pageIndex: number) {
   endpoints.value = searchEndpoints.value.splice(pageIndex - 1, pageSize);
 }
 function searchList() {
-  const currentEndpoints = selectorStore.instances.filter(
-    (d: { label: string }) => d.label.includes(searchText.value)
+  const currentEndpoints = selectorStore.pods.filter((d: { label: string }) =>
+    d.label.includes(searchText.value)
   );
   searchEndpoints.value = currentEndpoints;
   endpoints.value = currentEndpoints.splice(0, pageSize);

src/views/dashboard/graphs/InstanceList.vue

@@ -37,9 +37,8 @@ limitations under the License. -->
       <el-table-column label="Service Instances">
         <template #default="scope">
           <router-link
-            target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/serviceInstance/${selectorStore.currentService.value}/${scope.row.value}/${config.dashboardName}`"
+            :to="`/dashboard/${scope.row.layer}/ServiceInstance/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}
@@ -96,7 +95,7 @@ defineProps({
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
-const instances = ref<(Instance | any)[]>([]); // current instances
+const instances = ref<Instance[]>([]); // current instances
 const searchInstances = ref<Instance[]>([]); // all instances
 const pageSize = 5;
 const searchText = ref<string>("");
@@ -112,7 +111,7 @@ async function queryInstance() {
     ElMessage.error(resp.errors);
     return;
   }
-  searchInstances.value = selectorStore.instances;
+  searchInstances.value = selectorStore.pods;
 
   const currentInstances = searchInstances.value.splice(0, pageSize);
   queryInstanceMetrics(currentInstances);
@@ -147,8 +146,8 @@ function changePage(pageIndex: number) {
   instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
 }
 function searchList() {
-  searchInstances.value = selectorStore.instances.filter(
-    (d: { label: string }) => d.label.includes(searchText.value)
+  searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
+    d.label.includes(searchText.value)
   );
   instances.value = searchInstances.value.splice(0, pageSize);
 }

src/views/dashboard/graphs/ServiceList.vue

@@ -39,7 +39,8 @@ limitations under the License. -->
           <router-link
             target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/service/${selectorStore.currentService.value}/${config.dashboardName}`"
+            :to="`/dashboard/${scope.row.layer}/Service/${selectorStore.currentService.value}/${config.dashboardName}`"
+            :key="1"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}
@@ -144,8 +145,8 @@ function changePage(pageIndex: number) {
   services.value = selectorStore.services.splice(pageIndex - 1, pageSize);
 }
 function searchList() {
-  searchServices.value = selectorStore.instances.filter(
-    (d: { label: string }) => d.label.includes(searchText.value)
+  searchServices.value = selectorStore.services.filter((d: { label: string }) =>
+    d.label.includes(searchText.value)
   );
   services.value = searchServices.value.splice(0, pageSize);
 }

src/views/dashboard/graphs/style.scss

@@ -16,6 +16,8 @@
  */
 .table {
   height: 100%;
+  overflow: auto;
+  padding: 0 10px 5px 0;
 }
 
 .pagination {