github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update node expressions

Browse Source
This commit is contained in:
Fine 2023-08-15 15:59:06 +08:00
parent 4cd8274ff2
commit 5007c01c3a
6 changed files with 62 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/hooks/useExpressionsProcessor.ts
View File

@ -314,10 +314,10 @@ export async function useExpressionsQueryPodsMetrics(
return expressionParams;
}
export function useQueryTopologyExpressionsProcessor(metrics: string[]) {
export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: Node[]) {
const appStore = useAppStoreWithOut();
function getNodeExpressions(nodes: Node[]) {
function getNodeExpressions() {
const conditions: { [key: string]: unknown } = {
duration: appStore.durationTime,
};
@ -330,9 +330,11 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[]) {
variables.push(`$entity${index}: Entity!`);
conditions[`entity${index}`] = entity;
const f = metrics.map((name: string, idx: number) => {
variables.push(`$expression${index}${idx}: String!`);
conditions[`expression${index}${idx}`] = name;
return `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
if (index === 0) {
variables.push(`$expression${idx}: String!`);
conditions[`expression${idx}`] = name;
}
return `expression${index}${idx}: execExpression(expression: $expression${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
});
return f;
});
@ -341,6 +343,23 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[]) {
return { queryStr, conditions };
}
function handleExpressionValues(resp: any) {
const obj: any = {};
for (let idx = 0; idx < nodes.length; idx++) {
for (let index = 0; index < metrics.length; index++) {
const k = "expression" + idx + index;
if (metrics[index]) {
if (!obj[metrics[index]]) {
obj[metrics[index]] = {
values: [],
};
}
obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: nodes[idx].id });
}
}
}
return obj;
}
return { getNodeExpressions };
return { getNodeExpressions, handleExpressionValues };
}

17
src/store/modules/topology.ts
View File

@ -319,7 +319,6 @@ export const topologyStore = defineStore({
if (res.data.errors) {
return res.data;
}
console.log(res.data.data);
this.setNodeMetricValue(res.data.data);
return res.data;
},
@ -329,8 +328,7 @@ export const topologyStore = defineStore({
if (res.data.errors) {
return res.data;
}
console.log(res.data.data);
// this.setNodeMetricValue(res.data.data);
return res.data;
},
async getLinkClientMetrics(linkClientMetrics: string[]) {
@ -370,7 +368,6 @@ export const topologyStore = defineStore({
this.setNodeMetricValue({});
return;
}
console.log(this.nodes);
const ids = this.nodes.map((d: Node) => d.id);
if (!ids.length) {
return;
@ -388,15 +385,21 @@ export const topologyStore = defineStore({
return;
}
if (!this.nodes.length) {
this.setNodeMetricValue({});
return;
}
const { getNodeExpressions } = useQueryTopologyExpressionsProcessor(expressions);
const param = getNodeExpressions(this.nodes);
const { getNodeExpressions, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
expressions,
this.nodes,
);
const param = getNodeExpressions();
const res = await this.getNodeExpressionValue(param);
if (res.errors) {
ElMessage.error(res.errors);
return;
}
const metrics = handleExpressionValues(res.data);
this.setNodeMetricValue(metrics);
},
async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
const res: AxiosResponse = await query(param);

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

@ -160,7 +160,7 @@ limitations under the License. -->
},
});
const dashboardStore = useDashboardStore();
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
const metrics = computed(
() => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [],
);

11
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -184,7 +184,7 @@ limitations under the License. -->
const currentNode = ref<Nullable<Node>>();
const diff = computed(() => [(width.value - graphWidth.value - 130) / 2, 100]);
const radius = 8;
const isExpression = ref<boolean>(settings.value.metricMode === MetricModes.Expression ? true : false);
const isExpression = computed(() => settings.value.metricMode === MetricModes.Expression);
onMounted(async () => {
await nextTick();
@ -222,7 +222,7 @@ limitations under the License. -->
async function update() {
if (isExpression.value) {
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
} else {
@ -240,7 +240,7 @@ limitations under the License. -->
function draw() {
const node = findMostFrequent(topologyStore.calls);
const levels = [];
const nodes = topologyStore.nodes.sort((a: Node, b: Node) => {
const nodes = JSON.parse(JSON.stringify(topologyStore.nodes)).sort((a: Node, b: Node) => {
if (a.name.toLowerCase() < b.name.toLowerCase()) {
return -1;
}
@ -389,7 +389,10 @@ limitations under the License. -->
return c && d.isReal ? icons.CUBEERROR : icons.CUBE;
}
function showNodeTip(event: MouseEvent, data: Node) {
const nodeMetrics: string[] = settings.value.nodeMetrics || [];
const nodeMetrics: string[] =
(settings.value.metricMode === MetricModes.Expression
? settings.value.nodeExpressions
: settings.value.nodeMetrics) || [];
const nodeMetricConfig = settings.value.nodeMetricConfig || [];
const html = nodeMetrics.map((m, index) => {
const metric =

5
src/views/dashboard/related/topology/components/Metrics.vue
View File

@ -56,15 +56,10 @@ limitations under the License. -->
import { useI18n } from "vue-i18n";
import { CalculationOpts } from "../../../data";
import { useDashboardStore } from "@/store/modules/dashboard";
import type { MetricConfigOpt } from "@/types/dashboard";
import type { Option } from "element-plus/es/components/select-v2/src/select.types";
/*global defineEmits, defineProps */
const props = defineProps({
currentMetricConfig: {
type: Object as PropType<MetricConfigOpt>,
default: () => ({ unit: "" }),
},
type: { type: String, default: "" },
metrics: { type: Array as PropType<string[]>, default: () => [] },
});

24
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -153,7 +153,7 @@ limitations under the License. -->
:tags="states.nodeExpressions"
:vertical="true"
:text="t('addExpressions')"
@change="(param) => changeExpressions({ nodeExpressions: param })"
@change="(param) => changeNodeExpressions({ nodeExpressions: param })"
/>
</div>
<Selector
@ -236,7 +236,7 @@ limitations under the License. -->
const dashboardStore = useDashboardStore();
const topologyStore = useTopologyStore();
const { selectedGrid } = dashboardStore;
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
const nodeDashboard =
selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : "";
const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity);
@ -398,6 +398,7 @@ limitations under the License. -->
linkServerExpressions: states.linkServerExpressions,
linkClientExpressions: states.linkClientExpressions,
nodeExpressions: states.nodeExpressions,
metricMode: isExpression.value ? MetricModes.Expression : MetricModes.General,
legend: metrics,
...metricConfig,
description,
@ -479,12 +480,25 @@ limitations under the License. -->
function setConfigType(type: string) {
configType.value = type;
}
function changeMetricMode() {
console.log(isExpression.value);
}
function changeExpressions(params: { [key: string]: string[] }) {
const key: string = Object.keys(params || {})[0];
(states as any)[key] = params && params[key];
updateSettings();
}
function changeNodeExpressions(params: { [key: string]: string[] }) {
if (!isExpression.value) {
return;
}
states.nodeExpressions = params.nodeExpressions;
updateSettings();
if (!states.nodeExpressions.length) {
topologyStore.setNodeMetricValue({});
return;
}
topologyStore.queryNodeExpressions(states.nodeExpressions);
}
function changeMetricMode() {
updateSettings();
}
</script>
<style lang="scss" scoped>