From 583b8fca50cede2869e8f54576e9eb3362a54871 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 22 Mar 2022 18:27:07 +0800
Subject: [PATCH] use throttle to avoid re-save

---
 src/store/modules/dashboard.ts     | 3 ++-
 src/views/dashboard/List.vue       | 2 +-
 src/views/dashboard/panel/Tool.vue | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index c1a0afe6..0f485c1f 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -396,7 +396,7 @@ export const dashboardStore = defineStore({
       }
       if (!json.status) {
         ElMessage.error(json.message);
-        return;
+        return json;
       }
       if (!this.currentDashboard.id) {
         ElMessage.success("Saved successfully");
@@ -418,6 +418,7 @@ export const dashboardStore = defineStore({
 
       sessionStorage.setItem(key, JSON.stringify(l));
       sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards));
+      return json;
     },
     async deleteDashboard() {
       const res: AxiosResponse = await graphql
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index dd84e4bd..dd7a573c 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -373,7 +373,7 @@ async function handleDelete(row: DashboardItem) {
   sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
   sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`);
 }
-function searchDashboards(pageIndex?: number) {
+function searchDashboards(pageIndex?: any) {
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
   const arr = list.filter((d: { name: string }) =>
     d.name.includes(searchText.value)
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 6c8a6847..9a5045fd 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -118,6 +118,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
 import { useI18n } from "vue-i18n";
+import { useThrottleFn } from "@vueuse/core";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
@@ -145,6 +146,7 @@ const states = reactive<{
   currentDestService: "",
   currentDestPod: "",
 });
+const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000);
 if (params.layerId) {
   dashboardStore.setLayer(params.layerId);
   dashboardStore.setEntity(params.entity);
@@ -346,7 +348,7 @@ function setTabControls(id: string) {
       dashboardStore.addTabControls("Topology");
       break;
     case "apply":
-      dashboardStore.saveDashboard();
+      applyDashboard();
       break;
     default:
       ElMessage.info("Don't support this control");
@@ -375,7 +377,7 @@ function setControls(id: string) {
       dashboardStore.addControl("Topology");
       break;
     case "apply":
-      dashboardStore.saveDashboard();
+      applyDashboard();
       break;
     default:
       dashboardStore.addControl("Widget");