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: update exprssion processor

Browse Source
This commit is contained in:
Fine 2023-06-02 15:56:00 +08:00
parent 8f919b4583
commit 980f8fa650
4 changed files with 73 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/hooks/useExpressionsProcessor.ts
View File

@ -55,65 +55,36 @@ export function useExpressionsQueryProcessor(config: {
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!`);
const metricType = config.metricTypes[index] || "";
const c = (config.metricConfig && config.metricConfig[index]) || {};
conditions[`expression${index}`] = name; conditions[`expression${index}`] = name;
if ([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST as string].includes(metricType)) { const entity = {
conditions[`entity${index}`] = { serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value, normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
normal: selectorStore.currentService ? selectorStore.currentService.normal : true, serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
topN: Number(c.topN) || 10, dashboardStore.entity,
order: c.sortOrder || "DES", )
}; ? selectorStore.currentPod && selectorStore.currentPod.value
} else { : undefined,
const entity = { endpointName: dashboardStore.entity.includes("Endpoint")
serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value, ? selectorStore.currentPod && selectorStore.currentPod.value
normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal, : undefined,
serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes( processName: dashboardStore.entity.includes("Process")
dashboardStore.entity, ? selectorStore.currentProcess && selectorStore.currentProcess.value
) : undefined,
? selectorStore.currentPod && selectorStore.currentPod.value destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
: undefined, destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
endpointName: dashboardStore.entity.includes("Endpoint") destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
? selectorStore.currentPod && selectorStore.currentPod.value ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
: undefined, : undefined,
processName: dashboardStore.entity.includes("Process") destEndpointName:
? selectorStore.currentProcess && selectorStore.currentProcess.value dashboardStore.entity === "EndpointRelation"
: undefined,
destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
? selectorStore.currentDestPod && selectorStore.currentDestPod.value ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
: undefined, : undefined,
destEndpointName: destProcessName: dashboardStore.entity.includes("ProcessRelation")
dashboardStore.entity === "EndpointRelation" ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
? selectorStore.currentDestPod && selectorStore.currentDestPod.value : undefined,
: undefined, };
destProcessName: dashboardStore.entity.includes("ProcessRelation") conditions[`entity${index}`] = entity;
? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
: undefined,
};
if ([ExpressionResultType.RECORD_LIST as string].includes(metricType)) {
conditions[`entity${index}`] = {
parentEntity: entity,
topN: Number(c.topN) || 10,
order: c.sortOrder || "DES",
};
} else {
// if (metricType === ExpressionResultType.TIME_SERIES_VALUES) {
// const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
// variables.push(`$labels${index}: [String!]!`);
// conditions[`labels${index}`] = labels;
// }
conditions[`entity${index}`] = {
entity,
};
}
}
// if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
// return `${name}${index}: ${metricType}(condition: $condition${index}, labels: $labels${index}, duration: $duration)${RespFields[metricType]}`;
// }
return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`; return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
}); });
@ -145,22 +116,20 @@ export function useExpressionsSourceProcessor(
const keys = Object.keys(resp.data); const keys = Object.keys(resp.data);
config.metricTypes.forEach((type: string, index) => { config.metricTypes.forEach((type: string, index) => {
const m = config.metrics[index];
const c = (config.metricConfig && config.metricConfig[index]) || {}; const c = (config.metricConfig && config.metricConfig[index]) || {};
const results = (resp.data[keys[index]] && resp.data[keys[index]].results) || [];
const name = ((results[0] || {}).metric || {}).name;
if (type === ExpressionResultType.TIME_SERIES_VALUES) { if (type === ExpressionResultType.TIME_SERIES_VALUES) {
source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data.results[keys[index]].values, c)) || []; source[c.label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
return;
} }
if (type === ExpressionResultType.SINGLE_VALUE) { if (type === ExpressionResultType.SINGLE_VALUE) {
const v = Object.values(resp.data)[0] || {}; source[c.label || name] = results[0].values[0].value;
source[m] = v.isEmptyValue ? NaN : aggregation(Number(v.value), c); return;
} }
if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) { if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) {
source[m] = (Object.values(resp.data)[0] || []).map((d: { value: unknown; name: string }) => { source[name] = results[0].values;
d.value = aggregation(Number(d.value), c);
return d;
});
} }
}); });

2
src/hooks/useMetricsProcessor.ts
View File

@ -22,7 +22,6 @@ import { useSelectorStore } from "@/store/modules/selectors";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import type { Instance, Endpoint, Service } from "@/types/selector"; import type { Instance, Endpoint, Service } from "@/types/selector";
import type { MetricConfigOpt } from "@/types/dashboard"; import type { MetricConfigOpt } from "@/types/dashboard";
import { MetricCatalog } from "@/views/dashboard/data";
export function useQueryProcessor(config: Indexable) { export function useQueryProcessor(config: Indexable) {
if (!(config.metrics && config.metrics[0])) { if (!(config.metrics && config.metrics[0])) {
@ -179,6 +178,7 @@ export function useSourceProcessor(
return d; return d;
}); });
console.log(source);
} }
if (type === MetricQueryTypes.READHEATMAP) { if (type === MetricQueryTypes.READHEATMAP) {
const resVal = Object.values(resp.data)[0] || {}; const resVal = Object.values(resp.data)[0] || {};

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

@ -42,7 +42,7 @@ limitations under the License. -->
placeholder="Please input a expression" placeholder="Please input a expression"
@change="changeExpression" @change="changeExpression"
/> --> /> -->
<div v-if="isExpression" id="expression-param" contenteditable="true" @input="changeExpression($event, index)"> <div v-if="isExpression" id="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
{{ metric }} {{ metric }}
</div> </div>
<span v-else> <span v-else>
@ -71,7 +71,12 @@ limitations under the License. -->
</template> </template>
<Standard @update="queryMetrics" :currentMetricConfig="currentMetricConfig" :index="index" /> <Standard @update="queryMetrics" :currentMetricConfig="currentMetricConfig" :index="index" />
</el-popover> </el-popover>
<span> <span
v-show="
states.isList ||
[ProtocolTypes.ReadMetricsValues, ExpressionResultType.TIME_SERIES_VALUES as string].includes(states.metricTypes[0])
"
>
<Icon <Icon
class="cp mr-5" class="cp mr-5"
v-if="index === states.metrics.length - 1 && states.metrics.length < defaultLen" v-if="index === states.metrics.length - 1 && states.metrics.length < defaultLen"
@ -81,6 +86,7 @@ limitations under the License. -->
/> />
<Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" /> <Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
</span> </span>
<span v-if="states.tips[index]" class="ml-10 red">{{ states.tips[index] }}</span>
</div> </div>
<div>{{ t("visualization") }}</div> <div>{{ t("visualization") }}</div>
<div class="chart-types"> <div class="chart-types">
@ -108,6 +114,8 @@ limitations under the License. -->
ChartTypes, ChartTypes,
PodsChartTypes, PodsChartTypes,
MetricsType, MetricsType,
ProtocolTypes,
ExpressionResultType,
} from "../../../data"; } from "../../../data";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Icon from "@/components/Icon.vue"; import Icon from "@/components/Icon.vue";
@ -137,6 +145,7 @@ limitations under the License. -->
metricList: (Option & { type: string })[]; metricList: (Option & { type: string })[];
dashboardName: string; dashboardName: string;
dashboardList: ((DashboardItem & { label: string; value: string }) | any)[]; dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
tips: string[];
}>({ }>({
metrics: metrics.value.length ? metrics.value : [""], metrics: metrics.value.length ? metrics.value : [""],
metricTypes: metricTypes.value.length ? metricTypes.value : [""], metricTypes: metricTypes.value.length ? metricTypes.value : [""],
@ -145,6 +154,7 @@ limitations under the License. -->
metricList: [], metricList: [],
dashboardName: graph.value.dashboardName, dashboardName: graph.value.dashboardName,
dashboardList: [{ label: "", value: "" }], dashboardList: [{ label: "", value: "" }],
tips: [],
}); });
const currentMetricConfig = ref<MetricConfigOpt>({ const currentMetricConfig = ref<MetricConfigOpt>({
unit: "", unit: "",
@ -322,11 +332,11 @@ limitations under the License. -->
queryMetrics(); queryMetrics();
} }
async function queryMetrics() { async function queryMetrics() {
if (isExpression.value) { if (states.isList) {
queryMetricsWithExpressions();
return; return;
} }
if (states.isList) { if (isExpression.value) {
queryMetricsWithExpressions();
return; return;
} }
const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid; const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
@ -351,9 +361,6 @@ limitations under the License. -->
} }
async function queryMetricsWithExpressions() { async function queryMetricsWithExpressions() {
if (states.isList) {
return;
}
const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid; const { metricConfig, typesOfMQE, expressions } = dashboardStore.selectedGrid;
if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) { if (!(expressions && expressions[0] && typesOfMQE && typesOfMQE[0])) {
return; return;
@ -393,6 +400,7 @@ limitations under the License. -->
} }
function addMetric() { function addMetric() {
states.metrics.push(""); states.metrics.push("");
states.tips.push("");
if (!states.isList) { if (!states.isList) {
states.metricTypes.push(states.metricTypes[0]); states.metricTypes.push(states.metricTypes[0]);
if (!isExpression.value) { if (!isExpression.value) {
@ -406,6 +414,7 @@ limitations under the License. -->
if (states.metrics.length === 1) { if (states.metrics.length === 1) {
states.metrics = [""]; states.metrics = [""];
states.metricTypes = [""]; states.metricTypes = [""];
states.tips = [""];
dashboardStore.selectWidget({ dashboardStore.selectWidget({
...dashboardStore.selectedGrid, ...dashboardStore.selectedGrid,
...{ metricTypes: states.metricTypes, metrics: states.metrics }, ...{ metricTypes: states.metricTypes, metrics: states.metrics },
@ -415,6 +424,7 @@ limitations under the License. -->
} }
states.metrics.splice(index, 1); states.metrics.splice(index, 1);
states.metricTypes.splice(index, 1); states.metricTypes.splice(index, 1);
states.tips.splice(index, 1);
const config = dashboardStore.selectedGrid.metricConfig || []; const config = dashboardStore.selectedGrid.metricConfig || [];
const metricConfig = config[index] ? config.splice(index, 1) : config; const metricConfig = config[index] ? config.splice(index, 1) : config;
dashboardStore.selectWidget({ dashboardStore.selectWidget({
@ -459,10 +469,25 @@ limitations under the License. -->
} }
async function changeExpression(event: any, index: number) { async function changeExpression(event: any, index: number) {
const params = event.target.textContent; const params = event.target.textContent;
states.metrics[index] = params; if (params) {
const resp = await dashboardStore.getTypeOfMQE(params); const resp = await dashboardStore.getTypeOfMQE(params);
console.log(resp); states.metrics[index] = params;
// states.metricTypes[index] = resp.data.metricType states.metricTypes[index] = resp.data.metricType.type;
states.tips[index] = resp.data.metricType.error || "";
} else {
states.metrics[index] = params;
states.metricTypes[index] = "";
states.tips[index] = "";
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
expressions: states.metrics,
typesOfMQE: states.metricTypes,
});
if (params) {
await queryMetrics();
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/views/dashboard/graphs/TopList.vue
View File

@ -20,7 +20,7 @@ limitations under the License. -->
<div class="desc"> <div class="desc">
<span class="calls mr-10">{{ i.value }}</span> <span class="calls mr-10">{{ i.value }}</span>
<span class="cp mr-20"> <span class="cp mr-20">
{{ i.name }} {{ i.name || i.id }}
</span> </span>
</div> </div>
<el-popover placement="bottom" trigger="click"> <el-popover placement="bottom" trigger="click">