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
commit f4c1c81c095a4b316a8aa754d1f129e71a576428 Author: Qiuxia Fan <[email protected]> AuthorDate: Wed Dec 15 20:42:50 2021 +0800 feat: add event stack --- src/store/modules/app.ts | 31 +++++- src/views/dashboard/data.ts | 228 -------------------------------------------- 2 files changed, 29 insertions(+), 230 deletions(-) diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index e3bc570..64d7554 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -26,6 +26,8 @@ interface AppState { utc: string; utcHour: number; utcMin: number; + eventStack: (() => unknown)[]; + timer: ReturnType<typeof setInterval> | null; } export const appStore = defineStore({ @@ -35,6 +37,8 @@ export const appStore = defineStore({ utc: "", utcHour: 0, utcMin: 0, + eventStack: [], + timer: null, }), getters: { duration(): Duration { @@ -92,15 +96,38 @@ export const appStore = defineStore({ }, }, actions: { - setDuration(data: Duration) { + setDuration(data: Duration): void { this.durationRow = data; + if ((window as any).axiosCancel.length !== 0) { + for (const event of (window as any).axiosCancel) { + setTimeout(event(), 0); + } + (window as any).axiosCancel = []; + } + this.runEventStack(); }, - setUTC(utcHour: number, utcMin: number) { + setUTC(utcHour: number, utcMin: number): void { + this.runEventStack(); this.utcMin = utcMin; this.utcHour = utcHour; this.utc = `${utcHour}:${utcMin}`; localStorage.setItem("utc", this.utc); }, + setEventStack(funcs: (() => void)[]): void { + this.eventStack = funcs; + }, + runEventStack() { + if (this.timer) { + clearTimeout(this.timer); + } + this.timer = setTimeout( + () => + this.eventStack.forEach((event: any) => { + setTimeout(event(), 0); + }), + 500 + ); + }, }, }); export function useAppStoreWithOut(): any { diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 9e521e8..d13455c 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -44,10 +44,6 @@ export const SelectOpt = [ value: "efficiency", label: "Efficiency", }, - { - value: "controllability", - label: "Controllability", - }, ], }, { @@ -66,230 +62,6 @@ export const SelectOpt = [ }, ], }, - { - value: "component", - label: "Component", - children: [ - { - value: "basic", - label: "Basic", - children: [ - { - value: "layout", - label: "Layout", - }, - { - value: "color", - label: "Color", - }, - { - value: "typography", - label: "Typography", - }, - { - value: "icon", - label: "Icon", - }, - { - value: "button", - label: "Button", - }, - ], - }, - { - value: "form", - label: "Form", - children: [ - { - value: "radio", - label: "Radio", - }, - { - value: "checkbox", - label: "Checkbox", - }, - { - value: "input", - label: "Input", - }, - { - value: "input-number", - label: "InputNumber", - }, - { - value: "select", - label: "Select", - }, - { - value: "cascader", - label: "Cascader", - }, - { - value: "switch", - label: "Switch", - }, - { - value: "slider", - label: "Slider", - }, - { - value: "time-picker", - label: "TimePicker", - }, - { - value: "date-picker", - label: "DatePicker", - }, - { - value: "datetime-picker", - label: "DateTimePicker", - }, - { - value: "upload", - label: "Upload", - }, - { - value: "rate", - label: "Rate", - }, - { - value: "form", - label: "Form", - }, - ], - }, - { - value: "data", - label: "Data", - children: [ - { - value: "table", - label: "Table", - }, - { - value: "tag", - label: "Tag", - }, - { - value: "progress", - label: "Progress", - }, - { - value: "tree", - label: "Tree", - }, - { - value: "pagination", - label: "Pagination", - }, - { - value: "badge", - label: "Badge", - }, - ], - }, - { - value: "notice", - label: "Notice", - children: [ - { - value: "alert", - label: "Alert", - }, - { - value: "loading", - label: "Loading", - }, - { - value: "message", - label: "Message", - }, - { - value: "message-box", - label: "MessageBox", - }, - { - value: "notification", - label: "Notification", - }, - ], - }, - { - value: "navigation", - label: "Navigation", - children: [ - { - value: "menu", - label: "Menu", - }, - { - value: "tabs", - label: "Tabs", - }, - { - value: "breadcrumb", - label: "Breadcrumb", - }, - { - value: "dropdown", - label: "Dropdown", - }, - { - value: "steps", - label: "Steps", - }, - ], - }, - { - value: "others", - label: "Others", - children: [ - { - value: "dialog", - label: "Dialog", - }, - { - value: "tooltip", - label: "Tooltip", - }, - { - value: "popover", - label: "Popover", - }, - { - value: "card", - label: "Card", - }, - { - value: "carousel", - label: "Carousel", - }, - { - value: "collapse", - label: "Collapse", - }, - ], - }, - ], - }, - { - value: "resource", - label: "Resource", - children: [ - { - value: "axure", - label: "Axure Components", - }, - { - value: "sketch", - label: "Sketch Templates", - }, - { - value: "docs", - label: "Design Documentation", - }, - ], - }, ]; export const Options = [ {
