github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve dashboard queries to make page opening brisker (#410)

Browse Source
This commit is contained in:
Fine0830
2024-08-22 16:47:50 +08:00
committed by GitHub
parent d9f819d143
commit ae63538baf
7 changed files with 221 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/dashboard/Widget.vue
View File

@@ -53,7 +53,7 @@ limitations under the License. -->
import { useRoute } from "vue-router";
import { useSelectorStore } from "@/store/modules/selectors";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
import graphs from "./graphs";
import { EntityType } from "./data";
import timeFormat from "@/utils/timeFormat";
@@ -128,12 +128,16 @@ limitations under the License. -->
}
async function queryMetrics() {
loading.value = true;
const params = await useExpressionsQueryProcessor({
metrics: config.value.expressions || [],
metricConfig: config.value.metricConfig || [],
subExpressions: config.value.subExpressions || [],
});
const metrics: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } =
await useDashboardQueryProcessor([
{
metrics: config.value.expressions || [],
metricConfig: config.value.metricConfig || [],
subExpressions: config.value.subExpressions || [],
id: config.value.i,
},
]);
const params = metrics[config.value.i];
loading.value = false;
source.value = params.source || {};
typesOfMQE.value = params.typesOfMQE;

7
src/views/dashboard/configuration/widget/metric/Index.vue
View File

@@ -110,7 +110,7 @@ limitations under the License. -->
ExpressionResultType,
} from "@/views/dashboard/data";
import Icon from "@/components/Icon.vue";
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { useI18n } from "vue-i18n";
import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
import Standard from "./Standard.vue";
@@ -240,12 +240,13 @@ limitations under the License. -->
}
async function queryMetricsWithExpressions() {
const { expressions, metricConfig } = dashboardStore.selectedGrid;
const { expressions, metricConfig, i } = dashboardStore.selectedGrid;
if (!(expressions && expressions[0])) {
return emit("update", {});
}
const params: Indexable = (await useExpressionsQueryProcessor({ ...states, metricConfig })) || {};
const metrics: Indexable = (await useDashboardQueryProcessor([{ ...states, metricConfig, id: i }])) || {};
const params = metrics[i];
states.tips = params.tips || [];
states.metricTypes = params.typesOfMQE || [];
dashboardStore.selectWidget({

11
src/views/dashboard/controls/Tab.vue
View File

@@ -113,6 +113,7 @@ limitations under the License. -->
:data="item"
:activeIndex="`${data.i}-${activeTabIndex}-${item.i}`"
:needQuery="needQuery"
:metricsValues="metricsValues"
/>
</grid-item>
</grid-layout>
@@ -129,13 +130,17 @@ limitations under the License. -->
import controls from "./tab";
import { dragIgnoreFrom, WidgetType } from "../data";
import copy from "@/utils/copy";
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
const props = {
data: {
type: Object as PropType<LayoutConfig>,
default: () => ({ children: [] }),
},
metricsValues: {
type: Object as PropType<any>,
default: () => ({}),
},
active: { type: Boolean, default: false },
};
export default defineComponent({
@@ -259,8 +264,10 @@ limitations under the License. -->
if (!metrics.length) {
return;
}
const params: { [key: string]: any } = (await useExpressionsQueryProcessor({ metrics })) || {};
const values: { [key: string]: any } =
(await useDashboardQueryProcessor([{ metrics, id: props.data.i }])) || {};
for (const child of tabsProps.children || []) {
const params = values[props.data.i];
if (params.source[child.expression || ""]) {
child.enable =
!!Number(params.source[child.expression || ""]) &&

71
src/views/dashboard/controls/Widget.vue
View File

@@ -75,11 +75,10 @@ limitations under the License. -->
import type { LayoutConfig } from "@/types/dashboard";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useSelectorStore } from "@/store/modules/selectors";
import graphs from "../graphs";
import { useI18n } from "vue-i18n";
import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { EntityType, ListChartTypes } from "../data";
import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { ListChartTypes } from "../data";
import type { EventParams } from "@/types/dashboard";
import getDashboard from "@/hooks/useDashboardsSession";
@@ -88,6 +87,10 @@ limitations under the License. -->
type: Object as PropType<LayoutConfig>,
default: () => ({ widget: {}, graph: {} }),
},
metricsValues: {
type: Object as PropType<{ [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } }>,
default: () => ({}),
},
activeIndex: { type: String, default: "" },
needQuery: { type: Boolean, default: false },
};
@@ -105,23 +108,20 @@ limitations under the License. -->
const { data } = toRefs(props);
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
const graph = computed(() => props.data.graph || {});
const widget = computed(() => props.data.widget || {});
const isList = computed(() => ListChartTypes.includes((props.data.graph && props.data.graph.type) || ""));
const typesOfMQE = ref<string[]>([]);
if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList.value) {
queryMetrics();
}
async function queryMetrics() {
loading.value = true;
const e = {
const config = {
metrics: props.data.expressions || [],
metricConfig: props.data.metricConfig || [],
id: props.data.i,
};
const params = (await useExpressionsQueryProcessor(e)) || {};
const metrics: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } =
(await useDashboardQueryProcessor([config])) || {};
const params = metrics[data.value.i];
loading.value = false;
state.source = params.source || {};
typesOfMQE.value = params.typesOfMQE;
@@ -160,7 +160,7 @@ limitations under the License. -->
dashboardStore.selectWidget(props.data);
}
watch(
() => props.data.expressions,
() => props.data,
() => {
if (!dashboardStore.selectedGrid) {
return;
@@ -169,54 +169,19 @@ limitations under the License. -->
return;
}
const chart = dashboardStore.selectedGrid.graph || {};
if (ListChartTypes.includes(chart.type) || isList.value) {
if (ListChartTypes.includes(chart.type)) {
return;
}
queryMetrics();
},
);
watch(
() => [selectorStore.currentService, selectorStore.currentDestService],
() => props.metricsValues,
() => {
if (isList.value) {
return;
}
if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) {
queryMetrics();
}
},
);
watch(
() => [selectorStore.currentPod, selectorStore.currentDestPod],
() => {
if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
return;
}
if (isList.value) {
return;
}
queryMetrics();
},
);
watch(
() => [selectorStore.currentProcess, selectorStore.currentDestProcess],
() => {
if (isList.value) {
return;
}
if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
queryMetrics();
}
},
);
watch(
() => appStore.durationTime,
() => {
if (isList.value) {
return;
}
if (dashboardStore.entity === EntityType[1].value) {
queryMetrics();
const params = props.metricsValues[data.value.i];
if (params) {
state.source = params.source || {};
typesOfMQE.value = params.typesOfMQE;
}
},
);

102
src/views/dashboard/panel/Layout.vue
View File

@@ -14,12 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<grid-layout
v-if="dashboardStore.layout.length"
v-model:layout="dashboardStore.layout"
:col-num="24"
:row-height="10"
:is-draggable="dashboardStore.editMode"
:is-resizable="dashboardStore.editMode"
v-if="dashboardStore.layout.length"
v-loading.fullscreen.lock="loading"
element-loading-text="Loading..."
element-loading-background="rgba(122, 122, 122, 0.8)"
>
<grid-item
v-for="item in dashboardStore.layout"
@@ -33,33 +36,39 @@ limitations under the License. -->
:class="{ active: dashboardStore.activedGridItem === item.i }"
:drag-ignore-from="dragIgnoreFrom"
>
<component :is="item.type" :data="item" />
<component :is="item.type" :data="item" :metricsValues="metricsValues" />
</grid-item>
</grid-layout>
<div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount } from "vue";
import { defineComponent, onBeforeUnmount, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useSelectorStore } from "@/store/modules/selectors";
import type { LayoutConfig } from "@/types/dashboard";
import controls from "../controls/index";
import { dragIgnoreFrom } from "../data";
import { dragIgnoreFrom, ListChartTypes, WidgetType } from "../data";
import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { EntityType } from "../data";
export default defineComponent({
name: "Layout",
components: { ...controls },
setup() {
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
const metricsValues = ref();
const loading = ref<boolean>(false);
function clickGrid(item: LayoutConfig, event: Event) {
dashboardStore.activeGridItem(item.i);
dashboardStore.selectWidget(item);
if (
item.type === "Tab" &&
item.type === WidgetType.Tab &&
!["operations", "tab-layout"].includes((event.target as HTMLDivElement)?.className) &&
(event.target as HTMLDivElement)?.classList[2] !== "icon-tool" &&
(event.target as HTMLDivElement)?.nodeName !== "use"
@@ -67,6 +76,47 @@ limitations under the License. -->
dashboardStore.setActiveTabIndex(0);
}
}
async function queryMetrics() {
const widgets = [];
for (const item of dashboardStore.layout) {
const isList = ListChartTypes.includes(item.type || "");
if (item.type === WidgetType.Widget && !isList) {
widgets.push(item);
}
if (item.type === WidgetType.Tab) {
const index = isNaN(item.activedTabIndex) ? 0 : item.activedTabIndex;
widgets.push(...item.children[index].children);
}
}
const configList = widgets.map((d: LayoutConfig) => ({
metrics: d.expressions || [],
metricConfig: d.metricConfig || [],
id: d.i,
}));
if (!widgets.length) {
return {};
}
loading.value = true;
metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
loading.value = false;
}
async function queryTabsMetrics() {
const configList = dashboardStore.currentTabItems
.filter((item: LayoutConfig) => item.type === WidgetType.Widget && !ListChartTypes.includes(item.type || ""))
.map((d: LayoutConfig) => ({
metrics: d.expressions || [],
metricConfig: d.metricConfig || [],
id: d.i,
}));
if (!configList.length) {
return {};
}
loading.value = true;
metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
loading.value = false;
}
onBeforeUnmount(() => {
dashboardStore.setLayout([]);
selectorStore.setCurrentService(null);
@@ -74,11 +124,53 @@ limitations under the License. -->
dashboardStore.setEntity("");
dashboardStore.setConfigPanel(false);
});
watch(
() => [selectorStore.currentService, selectorStore.currentDestService],
() => {
if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) {
queryMetrics();
}
},
);
watch(
() => [selectorStore.currentPod, selectorStore.currentDestPod],
() => {
if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
return;
}
queryMetrics();
},
);
watch(
() => [selectorStore.currentProcess, selectorStore.currentDestProcess],
() => {
if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
queryMetrics();
}
},
);
watch(
() => appStore.durationTime,
() => {
if (dashboardStore.entity === EntityType[1].value) {
queryMetrics();
}
},
);
watch(
() => dashboardStore.currentTabItems,
() => {
queryTabsMetrics();
},
);
return {
dashboardStore,
clickGrid,
t,
dragIgnoreFrom,
metricsValues,
loading,
};
},
});