add pagination

src/views/dashboard/List.vue

@@ -117,6 +117,17 @@ limitations under the License. -->
             {{ t("import") }}
           </label>
         </el-button>
+        <el-pagination
+          class="pagination"
+          background
+          small
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :total="dashboardStore.dashboards.length"
+          @current-change="changePage"
+          @prev-click="changePage"
+          @next-click="changePage"
+        />
       </div>
     </div>
   </div>
@@ -137,6 +148,7 @@ import { EntityType } from "./data";
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
+const pageSize = 18;
 const dashboards = ref<DashboardItem[]>([]);
 const searchText = ref<string>("");
 const loading = ref<boolean>(false);
@@ -151,7 +163,7 @@ const handleSelectionChange = (val: DashboardItem[]) => {
 setList();
 async function setList() {
   await dashboardStore.setDashboards();
-  dashboards.value = dashboardStore.dashboards;
+  searchDashboards();
 }
 async function importTemplates(event: any) {
   const arr: any = await readFile(event);
@@ -361,16 +373,20 @@ async function handleDelete(row: DashboardItem) {
   sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
   sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`);
 }
-function searchDashboards() {
+function searchDashboards(pageIndex?: number) {
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
-  dashboards.value = list.filter((d: { name: string }) =>
+  const arr = list.filter((d: { name: string }) =>
     d.name.includes(searchText.value)
   );
+  dashboards.value = arr.splice(pageIndex || 0, pageSize);
 }
 
 function reloadTemplates() {
   dashboardStore.resetTemplates();
 }
+function changePage(pageIndex: number) {
+  searchDashboards(pageIndex);
+}
 </script>
 <style lang="scss" scoped>
 .header {
@@ -401,6 +417,10 @@ function reloadTemplates() {
   background-color: #fff;
 }
 
+.pagination {
+  float: right;
+}
+
 .btn {
   width: 220px;
   font-size: 13px;

src/views/dashboard/graphs/ServiceList.vue

@@ -185,9 +185,7 @@ function clickService(scope: any) {
   }
   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);
 }

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

@@ -394,9 +394,7 @@ function handleGoEndpoint(name: string) {
     entity: EntityType[2].value,
   });
   dashboardStore.setEntity(p.entity);
-  const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name
-    .split(" ")
-    .join("-")}`;
+  const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
@@ -424,9 +422,7 @@ function handleGoDashboard(name: string) {
     entity: EntityType[0].value,
   });
   dashboardStore.setEntity(p.entity);
-  const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name
-    .split(" ")
-    .join("-")}`;
+  const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");