mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-12 15:52:57 +00:00
feat: use useDashboardQueryProcessor instead useExpressionsQueryProcessor
This commit is contained in:
parent
7ca5eda863
commit
bdc9b14f7a
@ -183,137 +183,6 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
|
||||
}
|
||||
}
|
||||
|
||||
export async function useExpressionsQueryProcessor(config: Indexable) {
|
||||
function expressionsGraphqlPods() {
|
||||
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 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;
|
||||
const entity = {
|
||||
serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
|
||||
normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
|
||||
serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation", "Process"].includes(
|
||||
dashboardStore.entity,
|
||||
)
|
||||
? selectorStore.currentPod && selectorStore.currentPod.value
|
||||
: undefined,
|
||||
endpointName: dashboardStore.entity.includes("Endpoint")
|
||||
? selectorStore.currentPod && selectorStore.currentPod.value
|
||||
: undefined,
|
||||
processName: dashboardStore.entity.includes("Process")
|
||||
? selectorStore.currentProcess && selectorStore.currentProcess.value
|
||||
: undefined,
|
||||
destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
|
||||
destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
|
||||
destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
|
||||
? selectorStore.currentDestPod && selectorStore.currentDestPod.value
|
||||
: undefined,
|
||||
destEndpointName:
|
||||
dashboardStore.entity === "EndpointRelation"
|
||||
? selectorStore.currentDestPod && selectorStore.currentDestPod.value
|
||||
: undefined,
|
||||
destProcessName: dashboardStore.entity.includes("ProcessRelation")
|
||||
? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
|
||||
: undefined,
|
||||
};
|
||||
conditions[`entity${index}`] = entity;
|
||||
|
||||
return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
|
||||
});
|
||||
const queryStr = `query queryData(${variables}) {${fragment}}`;
|
||||
|
||||
return {
|
||||
queryStr,
|
||||
conditions,
|
||||
};
|
||||
}
|
||||
|
||||
function expressionsSource(resp: { errors: string; data: Indexable }) {
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return { source: {}, tips: [], typesOfMQE: [] };
|
||||
}
|
||||
if (!resp.data) {
|
||||
ElMessage.error("The query is wrong");
|
||||
return { source: {}, tips: [], typesOfMQE: [] };
|
||||
}
|
||||
const tips: string[] = [];
|
||||
const source: { [key: string]: unknown } = {};
|
||||
const keys = Object.keys(resp.data);
|
||||
const typesOfMQE: string[] = [];
|
||||
|
||||
for (let i = 0; i < config.metrics.length; i++) {
|
||||
const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
|
||||
const obj = resp.data[keys[i]] || {};
|
||||
const results = obj.results || [];
|
||||
const name = config.metrics[i];
|
||||
const type = obj.type;
|
||||
|
||||
tips.push(obj.error);
|
||||
typesOfMQE.push(type);
|
||||
if (!obj.error) {
|
||||
if ([ExpressionResultType.SINGLE_VALUE, ExpressionResultType.TIME_SERIES_VALUES].includes(type)) {
|
||||
for (const item of results) {
|
||||
const label =
|
||||
item.metric &&
|
||||
item.metric.labels.map((d: { key: string; value: string }) => `${d.key}=${d.value}`).join(",");
|
||||
const values = item.values.map((d: { value: unknown }) => d.value) || [];
|
||||
if (results.length === 1) {
|
||||
source[label || c.label || name] = values;
|
||||
} else {
|
||||
source[label] = values;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) {
|
||||
source[name] = results[0].values;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { source, tips, typesOfMQE };
|
||||
}
|
||||
|
||||
const params = await expressionsGraphqlPods();
|
||||
if (!params) {
|
||||
return { source: {}, tips: [], typesOfMQE: [] };
|
||||
}
|
||||
|
||||
const dashboardStore = useDashboardStore();
|
||||
const json = await dashboardStore.fetchMetricValue(params);
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
return { source: {}, tips: [], typesOfMQE: [] };
|
||||
}
|
||||
try {
|
||||
const data = expressionsSource(json);
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return { source: {}, tips: [], typesOfMQE: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function useExpressionsQueryPodsMetrics(
|
||||
allPods: Array<(Instance | Endpoint | Service) & Indexable>,
|
||||
config: {
|
||||
|
@ -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,15 @@ limitations under the License. -->
|
||||
}
|
||||
async function queryMetrics() {
|
||||
loading.value = true;
|
||||
const params = await useExpressionsQueryProcessor({
|
||||
const metrics = 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;
|
||||
|
@ -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({
|
||||
|
@ -130,7 +130,7 @@ 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: {
|
||||
@ -264,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 || ""]) &&
|
||||
|
@ -110,7 +110,6 @@ limitations under the License. -->
|
||||
const dashboardStore = useDashboardStore();
|
||||
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[]>([]);
|
||||
|
||||
async function queryMetrics() {
|
||||
@ -120,8 +119,8 @@ limitations under the License. -->
|
||||
metricConfig: props.data.metricConfig || [],
|
||||
id: props.data.i,
|
||||
};
|
||||
const values = (await useDashboardQueryProcessor([config])) || {};
|
||||
const params = values[data.value.i];
|
||||
const metrics = (await useDashboardQueryProcessor([config])) || {};
|
||||
const params = metrics[data.value.i];
|
||||
loading.value = false;
|
||||
state.source = params.source || {};
|
||||
typesOfMQE.value = params.typesOfMQE;
|
||||
@ -160,7 +159,7 @@ limitations under the License. -->
|
||||
dashboardStore.selectWidget(props.data);
|
||||
}
|
||||
watch(
|
||||
() => props.data.expressions,
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!dashboardStore.selectedGrid) {
|
||||
return;
|
||||
@ -169,7 +168,7 @@ limitations under the License. -->
|
||||
return;
|
||||
}
|
||||
const chart = dashboardStore.selectedGrid.graph || {};
|
||||
if (ListChartTypes.includes(chart.type) || isList.value) {
|
||||
if (ListChartTypes.includes(chart.type)) {
|
||||
return;
|
||||
}
|
||||
queryMetrics();
|
||||
|
Loading…
Reference in New Issue
Block a user