From 4bf57ec7c5f7c5e1db69adfb26f2bdfef1e9ac5b Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Fri, 10 Oct 2025 15:35:48 +0800 Subject: [PATCH] feat: support collapsing and expanding for the event widget (#503) --- src/locales/lang/en.ts | 1 + src/locales/lang/es.ts | 1 + src/locales/lang/zh.ts | 1 + src/store/modules/dashboard.ts | 16 ++- src/store/modules/event.ts | 8 +- src/types/dashboard.ts | 1 + src/views/dashboard/configuration/Event.vue | 15 ++- src/views/dashboard/controls/Event.vue | 105 ++++++++++++++---- src/views/dashboard/controls/Tab.vue | 2 + src/views/dashboard/controls/Widget.vue | 4 +- src/views/dashboard/panel/Layout.vue | 2 + src/views/dashboard/related/event/Content.vue | 1 + src/views/dashboard/related/event/Header.vue | 16 +-- 13 files changed, 133 insertions(+), 40 deletions(-) diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 792a5ba3..eba15632 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -413,5 +413,6 @@ const msg = { spanName: "Span name", parentId: "Parent ID", shareTrace: "Share This Trace", + eventDefaultCollapse: "Default Collapse", }; export default msg; diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts index 156bdd43..de5505eb 100644 --- a/src/locales/lang/es.ts +++ b/src/locales/lang/es.ts @@ -413,5 +413,6 @@ const msg = { spanName: "Nombre de Lapso", parentId: "ID Padre", shareTrace: "Compartir Traza", + eventDefaultCollapse: "Default Collapse", }; export default msg; diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index c68a406d..22ffccd4 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -411,5 +411,6 @@ const msg = { spanName: "跨度名称", parentId: "父ID", shareTrace: "分享Trace", + eventDefaultCollapse: "默认折叠", }; export default msg; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 76ae8009..d2944104 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -253,9 +253,13 @@ export const dashboardStore = defineStore({ setTopology(show: boolean) { this.showTopology = show; }, - setConfigs(param: LayoutConfig) { - const actived = this.activedGridItem.split("-"); + setLayouts(param: LayoutConfig[]) { + this.layout = param; + }, + setConfigs(param: LayoutConfig, gridIndex?: string) { + const actived = gridIndex || this.activedGridItem.split("-"); const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i); + if (actived.length === 3) { const tabIndex = Number(actived[1]); const itemIndex = (this.layout[index].children || [])[tabIndex].children.findIndex( @@ -270,11 +274,13 @@ export const dashboardStore = defineStore({ this.setCurrentTabItems((this.layout[index].children || [])[tabIndex].children); return; } - this.layout[index] = { - ...this.layout[index], + const layout = JSON.parse(JSON.stringify(this.layout)); + layout[index] = { + ...layout[index], ...param, }; - this.selectedGrid = this.layout[index]; + this.setLayouts(layout); + this.selectedGrid = layout[index]; }, setWidget(param: LayoutConfig) { for (let i = 0; i < this.layout.length; i++) { diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts index b2a59c6c..9ced69ac 100644 --- a/src/store/modules/event.ts +++ b/src/store/modules/event.ts @@ -36,8 +36,8 @@ export const eventStore = defineStore({ state: (): eventState => ({ loading: false, events: [], - instances: [{ value: "", label: "All" }], - endpoints: [{ value: "", label: "All" }], + instances: [{ value: "0", label: "All" }], + endpoints: [{ value: "0", label: "All" }], condition: null, }), actions: { @@ -58,7 +58,7 @@ export const eventStore = defineStore({ if (response.errors) { return response; } - this.instances = [{ value: "", label: "All" }, ...response.data.pods]; + this.instances = [{ value: "0", label: "All" }, ...response.data.pods]; return response; }, async getEndpoints(keyword?: string) { @@ -75,7 +75,7 @@ export const eventStore = defineStore({ if (response.errors) { return response; } - this.endpoints = [{ value: "", label: "All" }, ...response.data.pods]; + this.endpoints = [{ value: "0", label: "All" }, ...response.data.pods]; return response; }, async getEvents() { diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index 0c966c76..ad8e68e0 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -48,6 +48,7 @@ export interface LayoutConfig { id?: string; associate?: { widgetId: string }[]; eventAssociate?: boolean; + eventDefaultCollapse?: boolean; filters?: Filters; relatedTrace?: RelatedTrace; subExpressions?: string[]; diff --git a/src/views/dashboard/configuration/Event.vue b/src/views/dashboard/configuration/Event.vue index a4489476..d521f0bb 100644 --- a/src/views/dashboard/configuration/Event.vue +++ b/src/views/dashboard/configuration/Event.vue @@ -15,6 +15,10 @@ limitations under the License. -->
{{ t("enableAssociate") }}
+
+
{{ t("eventDefaultCollapse") }}
+ +
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue index 618062dd..8a1dda3d 100644 --- a/src/views/dashboard/controls/Event.vue +++ b/src/views/dashboard/controls/Event.vue @@ -14,28 +14,37 @@ See the License for the specific language governing permissions and limitations under the License. --> diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 280a5524..7c1b7565 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -95,6 +95,8 @@ limitations under the License. --> :is-draggable="dashboardStore.editMode" :is-resizable="dashboardStore.editMode" @layout-updated="layoutUpdatedEvent" + :vertical-compact="true" + :auto-size="true" > }; const metrics: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } = (await useDashboardQueryProcessor([config])) || {}; - const params = metrics[data.value.i]; + const params = metrics[data.value.i] || {}; loading.value = false; state.source = params.source || {}; - typesOfMQE.value = params.typesOfMQE; + typesOfMQE.value = params.typesOfMQE || []; } function removeWidget() { diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index 883c763b..1ca3f954 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/src/views/dashboard/panel/Layout.vue @@ -23,6 +23,8 @@ limitations under the License. --> v-loading.fullscreen.lock="loading" element-loading-text="Loading..." element-loading-background="rgba(122, 122, 122, 0.8)" + :vertical-compact="true" + :auto-size="true" > width: 0, height: 0, }; + visTimeline(); useThrottleFn(resize, 500)(); }); diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue index 8af195bf..0b0ef9ce 100644 --- a/src/views/dashboard/related/event/Header.vue +++ b/src/views/dashboard/related/event/Header.vue @@ -86,8 +86,8 @@ limitations under the License. --> const pageSize = 20; const pageNum = ref(1); const state = reactive({ - instance: { value: "", label: "All", id: "" }, - endpoint: { value: "", label: "All", id: "" }, + instance: { value: "0", label: "All" }, + endpoint: { value: "0", label: "All" }, eventType: { value: "", label: "All" }, }); const total = computed(() => @@ -99,8 +99,8 @@ limitations under the License. --> async function init() { fetchSelectors(); await queryEvents(); - state.instance = { value: "", label: "All" }; - state.endpoint = { value: "", label: "All" }; + state.instance = { value: "0", label: "All" }; + state.endpoint = { value: "0", label: "All" }; } function fetchSelectors() { @@ -138,13 +138,13 @@ limitations under the License. --> state.instance = eventStore.instances[0]; } async function queryEvents() { - let endpoint = state.endpoint.value, - instance = state.instance.value; + let endpoint = state.endpoint.value === "0" ? undefined : state.endpoint.value, + instance = state.instance.value === "0" ? undefined : state.instance.value; if (dashboardStore.entity === EntityType[2].value) { - endpoint = selectorStore.currentPod && selectorStore.currentPod.id; + endpoint = selectorStore.currentPod?.id; } if (dashboardStore.entity === EntityType[3].value) { - instance = selectorStore.currentPod && selectorStore.currentPod.id; + instance = selectorStore.currentPod?.id; } if (!selectorStore.currentService) { return;