feat: update dashboard list and reload templates (#33)

src/views/dashboard/graphs/EndpointList.vue

@@ -163,16 +163,21 @@ function clickEndpoint(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[2].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   dashboardStore.setEntity(EntityType[2].value);
   dashboardStore.setCurrentDashboard(d);
   router.push(
-    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
-      scope.row.id
-    }/${d.name.split(" ").join("-")}`
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
   );
 }
 function changePage(pageIndex: number) {
-  endpoints.value = searchEndpoints.value.splice(pageIndex - 1, pageSize);
+  endpoints.value = searchEndpoints.value.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
 }
 function searchList() {
   const currentEndpoints = selectorStore.pods.filter((d: { label: string }) =>
@@ -189,6 +194,12 @@ watch(
     }
   }
 );
+watch(
+  () => [selectorStore.currentService],
+  () => {
+    queryEndpoints();
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";

src/views/dashboard/graphs/InstanceList.vue

@@ -168,18 +168,24 @@ function clickInstance(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[3].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   dashboardStore.setCurrentDashboard(d);
   dashboardStore.setEntity(d.entity);
   router.push(
-    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
-      scope.row.id
-    }/${d.name.split(" ").join("-")}`
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
   );
 }
 
 function changePage(pageIndex: number) {
-  instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
+  instances.value = searchInstances.value.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
 }
+
 function searchList() {
   searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
@@ -195,6 +201,12 @@ watch(
     }
   }
 );
+watch(
+  () => [selectorStore.currentService],
+  () => {
+    queryInstance();
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";

src/views/dashboard/graphs/ServiceList.vue

@@ -179,11 +179,13 @@ function clickService(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[0].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   dashboardStore.setCurrentDashboard(d);
   dashboardStore.setEntity(d.entity);
-  const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name
-    .split(" ")
-    .join("-")}`;
+  const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name}`;
 
   router.push(path);
 }
@@ -224,7 +226,10 @@ function objectSpanMethod(param: any): any {
   }
 }
 function changePage(pageIndex: number) {
-  services.value = selectorStore.services.splice(pageIndex - 1, pageSize);
+  services.value = services.value.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
 }
 function searchList() {
   searchServices.value = selectorStore.services.filter((d: { label: string }) =>