You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by qi...@apache.org on 2025/08/08 10:11:44 UTC
(skywalking-booster-ui) branch main updated: fix: remove the event stack from app store and watch for duration and utc changes (#489)
This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new e885b613 fix: remove the event stack from app store and watch for duration and utc changes (#489)
e885b613 is described below
commit e885b613533429de3269a23a864e38cbc27a61e8
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Fri Aug 8 18:11:39 2025 +0800
fix: remove the event stack from app store and watch for duration and utc changes (#489)
---
src/store/modules/__tests__/app.spec.ts | 22 --------------------
src/store/modules/app.ts | 31 ----------------------------
src/store/modules/event.ts | 6 +++---
src/views/dashboard/panel/Tool.vue | 13 ++++++++++--
src/views/dashboard/related/event/Header.vue | 8 +++----
5 files changed, 18 insertions(+), 62 deletions(-)
diff --git a/src/store/modules/__tests__/app.spec.ts b/src/store/modules/__tests__/app.spec.ts
index 8f0c1797..f63abd5d 100644
--- a/src/store/modules/__tests__/app.spec.ts
+++ b/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(() => {
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 8ae6d9ec..e358a11b 100644
--- a/src/store/modules/app.ts
+++ b/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()) || {};
diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts
index 4e90a723..c5fab8d8 100644
--- a/src/store/modules/event.ts
+++ b/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,
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 9a5a576d..d92bc21e 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/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 {
diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue
index 38e1e568..ba0deabd 100644
--- a/src/views/dashboard/related/event/Header.vue
+++ b/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;