fix: remove the event stack from app store and watch for duration and utc changes (#489)

src/store/modules/__tests__/app.spec.ts

@@ -63,7 +63,6 @@ describe("App Store", () => {
       expect(store.utc).toBe("");
       expect(store.utcHour).toBe(0);
       expect(store.utcMin).toBe(0);
-      expect(store.eventStack).toEqual([]);
       expect(store.timer).toBeNull();
       expect(store.autoRefresh).toBe(false);
       expect(store.version).toBe("");
@@ -216,15 +215,6 @@ describe("App Store", () => {
       expect(store.isMobile).toBe(true);
     });
 
-    it("should set event stack correctly", () => {
-      const store = appStore();
-      const eventStack = [vi.fn()];
-
-      store.setEventStack(eventStack);
-
-      expect(store.eventStack).toEqual(eventStack);
-    });
-
     it("should set auto refresh correctly", () => {
       const store = appStore();
 
@@ -241,18 +231,6 @@ describe("App Store", () => {
       expect(store.coldStageMode).toBe(true);
     });
 
-    it("should run event stack with timer", () => {
-      const store = appStore();
-      const mockEvent = vi.fn();
-      store.eventStack = [mockEvent];
-
-      store.runEventStack();
-
-      vi.advanceTimersByTime(500);
-
-      expect(mockEvent).toHaveBeenCalled();
-    });
-
     it("should set reload timer correctly", () => {
       const store = appStore();
       const mockTimer = setInterval(() => {

src/store/modules/app.ts

@@ -29,7 +29,6 @@ interface AppState {
   utc: string;
   utcHour: number;
   utcMin: number;
-  eventStack: (() => unknown)[];
   timer: Nullable<TimeoutHandle>;
   autoRefresh: boolean;
   version: string;
@@ -56,7 +55,6 @@ export const appStore = defineStore({
     utc: "",
     utcHour: 0,
     utcMin: 0,
-    eventStack: [],
     timer: null,
     autoRefresh: false,
     version: "",
@@ -127,7 +125,6 @@ export const appStore = defineStore({
   actions: {
     setDuration(data: Duration): void {
       this.durationRow = data;
-      this.runEventStack();
     },
     updateDurationRow(data: Duration) {
       this.durationRow = data;
@@ -139,7 +136,6 @@ export const appStore = defineStore({
       this.theme = data;
     },
     setUTC(utcHour: number, utcMin: number): void {
-      this.runEventStack();
       this.utcMin = utcMin;
       this.utcHour = utcHour;
       this.utc = `${utcHour}:${utcMin}`;
@@ -150,39 +146,12 @@ export const appStore = defineStore({
     setIsMobile(mode: boolean) {
       this.isMobile = mode;
     },
-    setEventStack(funcs: (() => void)[]): void {
-      this.eventStack = funcs;
-    },
     setAutoRefresh(auto: boolean) {
       this.autoRefresh = auto;
     },
     setColdStageMode(mode: boolean) {
       this.coldStageMode = mode;
     },
-    runEventStack() {
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
-      this.timer = setTimeout(() => {
-        // Use requestIdleCallback if available for better performance, otherwise use setTimeout
-        const executeEvents = async () => {
-          for (const event of this.eventStack) {
-            try {
-              await Promise.resolve(event());
-            } catch (error) {
-              console.error("Error executing event in eventStack:", error);
-            }
-          }
-        };
-
-        if (typeof requestIdleCallback !== "undefined") {
-          // Execute during idle time to avoid blocking the main thread
-          requestIdleCallback(() => executeEvents(), { timeout: 1000 });
-        } else {
-          executeEvents();
-        }
-      }, 500);
-    },
     async getActivateMenus() {
       const resp = (await this.queryMenuItems()) || {};
 

src/store/modules/event.ts

@@ -48,7 +48,7 @@ export const eventStore = defineStore({
       const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
 
       if (!serviceId) {
-        return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
+        return new Promise((resolve) => resolve({ errors: "" }));
       }
       const response = await graphql.query("queryInstances").params({
         serviceId,
@@ -61,10 +61,10 @@ export const eventStore = defineStore({
       this.instances = [{ value: "", label: "All" }, ...response.data.pods];
       return response;
     },
-    async getEndpoints(keyword: string) {
+    async getEndpoints(keyword?: string) {
       const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
       if (!serviceId) {
-        return new Promise((resolve) => resolve({ errors: "Service ID is required" }));
+        return new Promise((resolve) => resolve({ errors: "" }));
       }
       const response = await graphql.query("queryEndpoints").params({
         serviceId,

src/views/dashboard/panel/Tool.vue

@@ -174,7 +174,8 @@ limitations under the License. -->
   const selectorStore = useSelectorStore();
   const topologyStore = useTopologyStore();
   const appStore = useAppStoreWithOut();
-  const params = useRoute().params;
+  const route = useRoute();
+  const params = route?.params || {};
   const toolIcons = ref<{ name: string; content: string; id: WidgetType }[]>(AllTools);
   const loading = ref<boolean>(false);
   const showHierarchy = ref<boolean>(false);
@@ -209,7 +210,6 @@ limitations under the License. -->
   });
 
   setCurrentDashboard();
-  appStore.setEventStack([initSelector]);
   initSelector();
 
   function initSelector() {
@@ -672,6 +672,15 @@ limitations under the License. -->
       getServices();
     },
   );
+
+  // Watch for duration and utc changes and reinitialize selectors
+  watch(
+    () => [appStore.utc, appStore.duration],
+    () => {
+      initSelector();
+    },
+    { deep: true },
+  );
 </script>
 <style lang="scss" scoped>
   .dashboard-tool {

src/views/dashboard/related/event/Header.vue

@@ -118,8 +118,8 @@ limitations under the License. -->
     }
   }
 
-  async function getEndpoints(id?: string) {
-    const resp = await eventStore.getEndpoints(id);
+  async function getEndpoints() {
+    const resp = await eventStore.getEndpoints();
     if (!resp) {
       return;
     }
@@ -129,8 +129,8 @@ limitations under the License. -->
     }
     state.endpoint = eventStore.endpoints[0];
   }
-  async function getInstances(id?: string) {
-    const resp = await eventStore.getInstances(id);
+  async function getInstances() {
+    const resp = await eventStore.getInstances();
     if (resp.errors) {
       ElMessage.error(resp.errors);
       return;