Eeeros
/
skywalking-booster-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Fine0830 2024-08-22 16:47:50 +08:00 committed by GitHub
parent d9f819d143
commit ae63538baf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 221 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Selector.vue
View File

@ -28,8 +28,8 @@ limitations under the License. -->
:filterable="filterable"
>
<el-option
v-for="item in options"
:key="item.value || ''"
v-for="(item, index) in options"
:key="`${item.value}${index}`"
:label="item.label || ''"
:value="item.value || ''"
:disabled="item.disabled || false"

112
src/hooks/useExpressionsProcessor.ts
View File

@ -24,31 +24,27 @@ import type { MetricConfigOpt } from "@/types/dashboard";
import type { Instance, Endpoint, Service } from "@/types/selector";
import type { Node, Call } from "@/types/topology";
export async function useExpressionsQueryProcessor(config: Indexable) {
function expressionsGraphqlPods() {
export async function useDashboardQueryProcessor(configList: Indexable[]) {
function expressionsGraphql(config: Indexable, idx: number) {
if (!(config.metrics && config.metrics[0])) {
return;
}
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
if (!selectorStore.currentService && dashboardStore.entity !== "All") {
return;
}
const conditions: Recordable = {
duration: appStore.durationTime,
};
const variables: string[] = [`$duration: Duration!`];
const conditions: Recordable = {};
const variables: string[] = [];
const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
dashboardStore.entity,
);
if (isRelation && !selectorStore.currentDestService) {
return;
}
const fragment = config.metrics.map((name: string, index: number) => {
variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`);
conditions[`expression${index}`] = name;
if (idx === 0) {
variables.push(`$entity: Entity!`);
const entity = {
serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
@ -76,19 +72,21 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
: undefined,
};
conditions[`entity${index}`] = entity;
conditions[`entity`] = entity;
}
const fragment = config.metrics.map((name: string, index: number) => {
variables.push(`$expression${idx}${index}: String!`);
conditions[`expression${idx}${index}`] = name;
return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
return `expression${idx}${index}: execExpression(expression: $expression${idx}${index}, entity: $entity, duration: $duration)${RespFields.execExpression}`;
});
const queryStr = `query queryData(${variables}) {${fragment}}`;
return {
queryStr,
variables,
fragment,
conditions,
};
}
function expressionsSource(resp: { errors: string; data: Indexable }) {
function expressionsSource(config: Indexable, resp: { errors: string; data: Indexable | any }) {
if (resp.errors) {
ElMessage.error(resp.errors);
return { source: {}, tips: [], typesOfMQE: [] };
@ -97,6 +95,10 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
ElMessage.error("The query is wrong");
return { source: {}, tips: [], typesOfMQE: [] };
}
if (resp.data.error) {
ElMessage.error(resp.data.error);
return { source: {}, tips: [], typesOfMQE: [] };
}
const tips: string[] = [];
const source: { [key: string]: unknown } = {};
const keys = Object.keys(resp.data);
@ -133,26 +135,72 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
return { source, tips, typesOfMQE };
}
async function fetchMetrics(configArr: any) {
const appStore = useAppStoreWithOut();
const variables: string[] = [`$duration: Duration!`];
let fragments = "";
let conditions: Recordable = {
duration: appStore.durationTime,
};
for (let i = 0; i < configArr.length; i++) {
const params = await expressionsGraphql(configArr[i], i);
if (params) {
fragments += params?.fragment;
conditions = { ...conditions, ...params.conditions };
variables.push(...params.variables);
}
}
if (!fragments) {
return { 0: { source: {}, tips: [], typesOfMQE: [] } };
}
const queryStr = `query queryData(${variables}) {${fragments}}`;
const dashboardStore = useDashboardStore();
const json = await dashboardStore.fetchMetricValue({
queryStr,
conditions,
});
if (json.errors) {
ElMessage.error(json.errors);
return { 0: { source: {}, tips: [], typesOfMQE: [] } };
}
try {
const pageData: Recordable = {};
const params = await expressionsGraphqlPods();
if (!params) {
return { source: {}, tips: [], typesOfMQE: [] };
for (let i = 0; i < configArr.length; i++) {
const resp: any = {};
for (let m = 0; m < configArr[i].metrics.length; m++) {
resp[`expression${i}${m}`] = json.data[`expression${i}${m}`];
}
const data = expressionsSource(configArr[i], { ...json, data: resp });
const id = configArr[i].id;
pageData[id] = data;
}
return pageData;
} catch (error) {
console.error(error);
return { 0: { source: {}, tips: [], typesOfMQE: [] } };
}
}
function chunkArray(array: any[], chunkSize: number) {
const result = [];
for (let i = 0; i < array.length; i += chunkSize) {
result.push(array.slice(i, i + chunkSize));
}
return result;
}
const dashboardStore = useDashboardStore();
const json = await dashboardStore.fetchMetricValue(params);
if (json.errors) {
ElMessage.error(json.errors);
return { source: {}, tips: [], typesOfMQE: [] };
const partArr = chunkArray(configList, 6);
const promiseArr = partArr.map((d: Array<Indexable>) => fetchMetrics(d));
const responseList = await Promise.all(promiseArr);
let resp = {};
for (const item of responseList) {
resp = {
...resp,
...item,
};
}
try {
const data = expressionsSource(json);
return data;
} catch (error) {
console.error(error);
return { source: {}, tips: [], typesOfMQE: [] };
}
return resp;
}
export async function useExpressionsQueryPodsMetrics(

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,
};
},
});