use throttle to avoid re-save

This commit is contained in:
Qiuxia Fan 2022-03-22 18:27:07 +08:00
parent 0dec2fb912
commit 583b8fca50
3 changed files with 7 additions and 4 deletions

View File

@ -396,7 +396,7 @@ export const dashboardStore = defineStore({
} }
if (!json.status) { if (!json.status) {
ElMessage.error(json.message); ElMessage.error(json.message);
return; return json;
} }
if (!this.currentDashboard.id) { if (!this.currentDashboard.id) {
ElMessage.success("Saved successfully"); ElMessage.success("Saved successfully");
@ -418,6 +418,7 @@ export const dashboardStore = defineStore({
sessionStorage.setItem(key, JSON.stringify(l)); sessionStorage.setItem(key, JSON.stringify(l));
sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards)); sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards));
return json;
}, },
async deleteDashboard() { async deleteDashboard() {
const res: AxiosResponse = await graphql const res: AxiosResponse = await graphql

View File

@ -373,7 +373,7 @@ async function handleDelete(row: DashboardItem) {
sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value)); sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`); sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`);
} }
function searchDashboards(pageIndex?: number) { function searchDashboards(pageIndex?: any) {
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]"); const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
const arr = list.filter((d: { name: string }) => const arr = list.filter((d: { name: string }) =>
d.name.includes(searchText.value) d.name.includes(searchText.value)

View File

@ -118,6 +118,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Option } from "@/types/app"; import { Option } from "@/types/app";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useThrottleFn } from "@vueuse/core";
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
@ -145,6 +146,7 @@ const states = reactive<{
currentDestService: "", currentDestService: "",
currentDestPod: "", currentDestPod: "",
}); });
const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000);
if (params.layerId) { if (params.layerId) {
dashboardStore.setLayer(params.layerId); dashboardStore.setLayer(params.layerId);
dashboardStore.setEntity(params.entity); dashboardStore.setEntity(params.entity);
@ -346,7 +348,7 @@ function setTabControls(id: string) {
dashboardStore.addTabControls("Topology"); dashboardStore.addTabControls("Topology");
break; break;
case "apply": case "apply":
dashboardStore.saveDashboard(); applyDashboard();
break; break;
default: default:
ElMessage.info("Don't support this control"); ElMessage.info("Don't support this control");
@ -375,7 +377,7 @@ function setControls(id: string) {
dashboardStore.addControl("Topology"); dashboardStore.addControl("Topology");
break; break;
case "apply": case "apply":
dashboardStore.saveDashboard(); applyDashboard();
break; break;
default: default:
dashboardStore.addControl("Widget"); dashboardStore.addControl("Widget");