github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove returnTypeOfMQE

Browse Source
This commit is contained in:
Fine 2023-06-08 16:21:24 +08:00
parent 31987e978e
commit 55e38b85d4
4 changed files with 164 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
src/hooks/useExpressionsProcessor.ts
View File

@ -23,122 +23,136 @@ import { useAppStoreWithOut } from "@/store/modules/app";
import type { MetricConfigOpt } from "@/types/dashboard"; import type { MetricConfigOpt } from "@/types/dashboard";
import type { Instance, Endpoint, Service } from "@/types/selector"; import type { Instance, Endpoint, Service } from "@/types/selector";
export function useExpressionsQueryProcessor(config: Indexable) { export async function useExpressionsQueryProcessor(config: Indexable) {
if (!(config.metrics && config.metrics[0])) { function expressionsGraphqlPods() {
return; if (!(config.metrics && config.metrics[0])) {
} return;
if (!(config.metricTypes && config.metricTypes[0])) { }
return; const appStore = useAppStoreWithOut();
} const dashboardStore = useDashboardStore();
const appStore = useAppStoreWithOut(); const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
if (!selectorStore.currentService && dashboardStore.entity !== "All") { if (!selectorStore.currentService && dashboardStore.entity !== "All") {
return; return;
} }
const conditions: Recordable = { const conditions: Recordable = {
duration: appStore.durationTime, duration: appStore.durationTime,
}; };
const variables: string[] = [`$duration: Duration!`]; const variables: string[] = [`$duration: Duration!`];
const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes( const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
dashboardStore.entity, dashboardStore.entity,
); );
if (isRelation && !selectorStore.currentDestService) { if (isRelation && !selectorStore.currentDestService) {
return; return;
} }
const fragment = config.metrics.map((name: string, index: number) => { const fragment = config.metrics.map((name: string, index: number) => {
variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`); variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`);
conditions[`expression${index}`] = name; conditions[`expression${index}`] = name;
const entity = { const entity = {
serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal, normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes( serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
dashboardStore.entity, dashboardStore.entity,
) )
? selectorStore.currentPod && selectorStore.currentPod.value ? selectorStore.currentPod && selectorStore.currentPod.value
: undefined, : undefined,
endpointName: dashboardStore.entity.includes("Endpoint") endpointName: dashboardStore.entity.includes("Endpoint")
? selectorStore.currentPod && selectorStore.currentPod.value ? selectorStore.currentPod && selectorStore.currentPod.value
: undefined, : undefined,
processName: dashboardStore.entity.includes("Process") processName: dashboardStore.entity.includes("Process")
? selectorStore.currentProcess && selectorStore.currentProcess.value ? selectorStore.currentProcess && selectorStore.currentProcess.value
: undefined, : undefined,
destNormal: isRelation ? selectorStore.currentDestService.normal : undefined, destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
destServiceName: isRelation ? selectorStore.currentDestService.value : undefined, destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity) destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
? selectorStore.currentDestPod && selectorStore.currentDestPod.value
: undefined,
destEndpointName:
dashboardStore.entity === "EndpointRelation"
? selectorStore.currentDestPod && selectorStore.currentDestPod.value ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
: undefined, : undefined,
destProcessName: dashboardStore.entity.includes("ProcessRelation") destEndpointName:
? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value dashboardStore.entity === "EndpointRelation"
: undefined, ? 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,
}; };
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,
};
}
export function useExpressionsSourceProcessor(
resp: { errors: string; data: Indexable },
config: {
metrics: string[];
metricTypes: string[];
metricConfig: MetricConfigOpt[];
},
) {
if (resp.errors) {
ElMessage.error(resp.errors);
return {};
} }
if (!resp.data) {
ElMessage.error("The query is wrong");
return {};
}
const source: { [key: string]: unknown } = {};
const keys = Object.keys(resp.data);
for (let i = 0; i < config.metrics.length; i++) {
const type = config.metricTypes[i];
const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
const results = (resp.data[keys[i]] && resp.data[keys[i]].results) || [];
const name = config.metrics[i];
if (type === ExpressionResultType.TIME_SERIES_VALUES) { function expressionsSource(resp: { errors: string; data: Indexable }) {
if (results.length === 1) { if (resp.errors) {
source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || []; ElMessage.error(resp.errors);
} else { return { source: {}, tips: [], typesOfMQE: [] };
const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); }
for (const item of results) { if (!resp.data) {
const values = item.values.map((d: { value: unknown }) => d.value) || []; ElMessage.error("The query is wrong");
const index = item.metric.labels[0].value; return { source: {}, tips: [], typesOfMQE: [] };
const indexNum = labels.findIndex((_, i: number) => i === Number(index)); }
if (labels[indexNum] && indexNum > -1) { const tips: string[] = [];
source[labels[indexNum]] = values; 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 (type === ExpressionResultType.TIME_SERIES_VALUES) {
if (results.length === 1) {
source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
} else { } else {
source[index] = values; const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
for (const item of results) {
const values = item.values.map((d: { value: unknown }) => d.value) || [];
const index = item.metric.labels[0].value;
const indexNum = labels.findIndex((_, i: number) => i === Number(index));
if (labels[indexNum] && indexNum > -1) {
source[labels[indexNum]] = values;
} else {
source[index] = values;
}
}
} }
} }
if (type === ExpressionResultType.SINGLE_VALUE) {
source[c.label || name] = results[0].values[0].value;
}
if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) {
source[name] = results[0].values;
}
} }
} }
if (type === ExpressionResultType.SINGLE_VALUE) {
source[c.label || name] = results[0].values[0].value; return { source, tips, typesOfMQE };
} }
if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) { const params = await expressionsGraphqlPods();
source[name] = results[0].values; if (!params) {
} return { source: {}, tips: [], typesOfMQE: [] };
} }
return source; const dashboardStore = useDashboardStore();
const json = await dashboardStore.fetchMetricValue(params);
if (json.errors) {
ElMessage.error(json.errors);
return { source: {}, tips: [], typesOfMQE: [] };
}
const data = expressionsSource(json);
return data;
} }
export async function useExpressionsQueryPodsMetrics( export async function useExpressionsQueryPodsMetrics(

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

@ -57,7 +57,7 @@ limitations under the License. -->
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor"; import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor"; import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import graphs from "./graphs"; import graphs from "./graphs";
import { EntityType } from "./data"; import { EntityType } from "./data";
import timeFormat from "@/utils/timeFormat"; import timeFormat from "@/utils/timeFormat";
@ -130,11 +130,18 @@ limitations under the License. -->
} }
async function queryMetrics() { async function queryMetrics() {
const isExpression = config.value.metricMode === MetricModes.Expression; const isExpression = config.value.metricMode === MetricModes.Expression;
const params = isExpression if (isExpression) {
? await useExpressionsQueryProcessor({ loading.value = true;
...config.value, const params = await useExpressionsQueryProcessor({
}) metrics: config.value.expressions || [],
: await useQueryProcessor({ ...config.value }); metricConfig: config.value.metricConfig || [],
subExpressions: config.value.subExpressions || [],
});
loading.value = false;
source.value = params.source || {};
return;
}
const params = await useQueryProcessor({ ...config.value });
if (!params) { if (!params) {
source.value = {}; source.value = {};
return; return;
@ -149,9 +156,8 @@ limitations under the License. -->
metrics: config.value.metrics || [], metrics: config.value.metrics || [],
metricTypes: config.value.metricTypes || [], metricTypes: config.value.metricTypes || [],
metricConfig: config.value.metricConfig || [], metricConfig: config.value.metricConfig || [],
subExpressions: config.value.subExpressions || [],
}; };
source.value = isExpression ? await useExpressionsSourceProcessor(json, d) : await useSourceProcessor(json, d); source.value = await useSourceProcessor(json, d);
} }
watch( watch(
() => appStoreWithOut.durationTime, () => appStoreWithOut.durationTime,
@ -181,7 +187,7 @@ limitations under the License. -->
.widget-chart { .widget-chart {
background: #fff; background: #fff;
box-shadow: 0px 1px 4px 0px #00000029; box-shadow: 0 1px 4px 0 #00000029;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
width: 100%; width: 100%;

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

@ -127,12 +127,12 @@ limitations under the License. -->
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Icon from "@/components/Icon.vue"; import Icon from "@/components/Icon.vue";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor"; import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor"; import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard"; import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
import Standard from "./Standard.vue"; import Standard from "./Standard.vue";
/*global defineEmits */ /*global defineEmits, Indexable */
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(["update", "loading"]); const emit = defineEmits(["update", "loading"]);
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
@ -396,26 +396,20 @@ limitations under the License. -->
} }
async function queryMetricsWithExpressions() { async function queryMetricsWithExpressions() {
const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid; const { expressions, metricConfig } = dashboardStore.selectedGrid;
if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) { if (!(expressions && expressions[0])) {
return emit("update", {}); return emit("update", {});
} }
const params = useExpressionsQueryProcessor({ ...states, metricConfig }); const params: Indexable = (await useExpressionsQueryProcessor({ ...states, metricConfig })) || {};
if (!params) { states.tips = params.tips || [];
emit("update", {}); states.metricTypes = params.typesOfMQE || [];
return; dashboardStore.selectWidget({
} ...dashboardStore.selectedGrid,
typesOfMQE: states.metricTypes,
});
emit("loading", true); emit("update", params.source || {});
const json = await dashboardStore.fetchMetricValue(params);
emit("loading", false);
if (json.errors) {
ElMessage.error(json.errors);
return;
}
const source = useExpressionsSourceProcessor(json, { ...states, metricConfig });
emit("update", source);
} }
function changeDashboard(opt: any) { function changeDashboard(opt: any) {
@ -551,23 +545,22 @@ limitations under the License. -->
} }
async function changeExpression(event: any, index: number) { async function changeExpression(event: any, index: number) {
const params = (event.target.textContent || "").replace(/\s+/g, ""); const params = (event.target.textContent || "").replace(/\s+/g, "");
console.log(params);
if (params) { if (params) {
const resp = await dashboardStore.getTypeOfMQE(params); // const resp = await dashboardStore.getTypeOfMQE(params);
states.metrics[index] = params; states.metrics[index] = params;
states.metricTypes[index] = resp.data.metricType.type; // states.metricTypes[index] = resp.data.metricType.type;
states.tips[index] = resp.data.metricType.error || ""; // states.tips[index] = resp.data.metricType.error || "";
} else { } else {
states.metrics[index] = params; states.metrics[index] = params;
states.metricTypes[index] = ""; // states.metricTypes[index] = "";
states.tips[index] = ""; // states.tips[index] = "";
} }
dashboardStore.selectWidget({ dashboardStore.selectWidget({
...dashboardStore.selectedGrid, ...dashboardStore.selectedGrid,
expressions: states.metrics, expressions: states.metrics,
typesOfMQE: states.metricTypes, // typesOfMQE: states.metricTypes,
}); });
if (params) { if (params) {
await queryMetrics(); await queryMetrics();

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

@ -82,7 +82,7 @@ limitations under the License. -->
import graphs from "../graphs"; import graphs from "../graphs";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor"; import { useQueryProcessor, useSourceProcessor } from "@/hooks/useMetricsProcessor";
import { useExpressionsQueryProcessor, useExpressionsSourceProcessor } from "@/hooks/useExpressionsProcessor"; import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { EntityType, ListChartTypes } from "../data"; import { EntityType, ListChartTypes } from "../data";
import type { EventParams } from "@/types/dashboard"; import type { EventParams } from "@/types/dashboard";
import getDashboard from "@/hooks/useDashboardsSession"; import getDashboard from "@/hooks/useDashboardsSession";
@ -121,13 +121,18 @@ limitations under the License. -->
async function queryMetrics() { async function queryMetrics() {
const isExpression = props.data.metricMode === MetricModes.Expression; const isExpression = props.data.metricMode === MetricModes.Expression;
const params = isExpression if (isExpression) {
? await useExpressionsQueryProcessor({ loading.value = true;
metrics: props.data.expressions, const e = {
metricTypes: props.data.typesOfMQE, metrics: props.data.expressions || [],
metricConfig: props.data.metricConfig, metricConfig: props.data.metricConfig || [],
}) };
: await useQueryProcessor({ ...props.data }); const params = (await useExpressionsQueryProcessor(e)) || {};
loading.value = false;
state.source = params.source || {};
return;
}
const params = await useQueryProcessor({ ...props.data });
if (!params) { if (!params) {
state.source = {}; state.source = {};
@ -144,12 +149,7 @@ limitations under the License. -->
metricTypes: props.data.metricTypes || [], metricTypes: props.data.metricTypes || [],
metricConfig: props.data.metricConfig || [], metricConfig: props.data.metricConfig || [],
}; };
const e = { state.source = await useSourceProcessor(json, d);
metrics: props.data.expressions || [],
metricTypes: props.data.typesOfMQE || [],
metricConfig: props.data.metricConfig || [],
};
state.source = isExpression ? await useExpressionsSourceProcessor(json, e) : await useSourceProcessor(json, d);
} }
function removeWidget() { function removeWidget() {