feat: open dashboards with selector ids of link url

src/views/dashboard/configuration/MetricOptions.vue

@@ -194,9 +194,13 @@ async function queryMetrics() {
 }
 
 function changeDashboard(item: Option[]) {
+  const graph = {
+    ...dashboardStore.selectedGrid.graph,
+    dashboardName: item[0].value,
+  };
   dashboardStore.selectWidget({
     ...dashboardStore.selectedGrid,
-    ...{ dashboardName: item[0].value },
+    graph,
   });
 }
 function addMetric() {

src/views/dashboard/controls/Widget.vue

@@ -61,6 +61,7 @@ limitations under the License. -->
 <script lang="ts">
 import { toRefs, reactive, defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
+import { useRoute } from "vue-router";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -82,6 +83,7 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
+    const params = useRoute().params;
     const loading = ref<boolean>(false);
     const state = reactive<{ source: { [key: string]: unknown } }>({
       source: {},
@@ -91,6 +93,10 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
+    if (params.serviceId) {
+      queryMetrics();
+    }
+
     async function queryMetrics() {
       const params = await useQueryProcessor(props.data);
       if (!params) {

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 {

src/views/dashboard/panel/Tool.vue

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
-    <div class="flex-h" v-if="!params.serviceId">
+    <div v-if="params.serviceId"></div>
+    <div class="flex-h" v-else>
       <div class="selectors-item" v-if="states.key !== 10">
         <span class="label">$Service</span>
         <Selector
@@ -35,7 +36,7 @@ limitations under the License. -->
           }}
         </span>
         <Selector
-          v-model="selectorStore.currentPod"
+          v-model="states.currentPod"
           :options="selectorStore.pods"
           size="mini"
           placeholder="Select a data"
@@ -57,7 +58,7 @@ limitations under the License. -->
       <div class="selectors-item" v-if="states.key === 4">
         <span class="label">$DestinationServiceInstance</span>
         <Selector
-          v-model="selectorStore.currentPod"
+          v-model="states.currentPod"
           :options="selectorStore.pods"
           size="mini"
           placeholder="Select a data"
@@ -96,21 +97,43 @@ import { Service } from "@/types/selector";
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const params = useRoute().params;
+const type = EntityType.filter((d: Option) => d.value === params.entity)[0];
 const states = reactive<{
   destService: string;
   destPod: string;
   key: number;
   currentService: string;
+  currentPod: string;
 }>({
   destService: "",
   destPod: "",
-  key: EntityType.filter((d: Option) => d.value === params.entity)[0].key || 0,
+  key: (type && type.key) || 0,
   currentService: "",
+  currentPod: "",
 });
+
 dashboardStore.setLayer(String(params.layerId));
 dashboardStore.setEntity(String(params.entity));
 
-getServices();
+if (params.serviceId) {
+  setSelector();
+} else {
+  getServices();
+}
+
+async function setSelector() {
+  await selectorStore.getService(String(params.serviceId));
+  states.currentService = selectorStore.currentService.value;
+  if (params.podId) {
+    if (String(params.entity) === EntityType[2].value) {
+      await selectorStore.getEndpoint(String(params.podId));
+    }
+    if (String(params.entity) === EntityType[3].value) {
+      await selectorStore.getInstance(String(params.podId));
+    }
+    states.currentPod = selectorStore.currentPod.label;
+  }
+}
 
 async function getServices() {
   if (!dashboardStore.layerId) {
@@ -167,15 +190,18 @@ async function fetchPods(type: string) {
   switch (type) {
     case "Endpoint":
       resp = await selectorStore.getEndpoints();
+      states.currentPod = selectorStore.currentPod.label;
       break;
     case "ServiceInstance":
       resp = await selectorStore.getServiceInstances();
+      states.currentPod = selectorStore.currentPod.label;
       break;
     default:
       resp = {};
   }
   if (resp.errors) {
     ElMessage.error(resp.errors);
+    return;
   }
 }
 </script>