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

Browse Source
This commit is contained in:
Fine 2023-06-03 23:17:12 +08:00
parent d46a6a189e
commit 7936403e5e
5 changed files with 134 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/hooks/useExpressionsProcessor.ts
View File

@ -148,16 +148,26 @@ export async function useExpressionsQueryPodsMetrics(
config: { config: {
expressions: string[]; expressions: string[];
typesOfMQE: string[]; typesOfMQE: string[];
subExpressions: string[];
metricConfig: MetricConfigOpt[]; metricConfig: MetricConfigOpt[];
}, },
scope: string, scope: string,
) { ) {
function expressionsGraphqlPods() { function expressionsGraphqlPods() {
const metricTypes = (config.typesOfMQE || []).filter((m: string) => m); const metrics: string[] = [];
if (!metricTypes.length) { const subMetrics: string[] = [];
return; const metricTypes: string[] = [];
config.expressions = config.expressions || [];
config.subExpressions = config.subExpressions || [];
config.typesOfMQE = config.typesOfMQE || [];
for (let i = 0; i < config.expressions.length; i++) {
if (config.expressions[i]) {
metrics.push(config.expressions[i]);
subMetrics.push(config.subExpressions[i]);
metricTypes.push(config.typesOfMQE[i]);
}
} }
const metrics = (config.expressions || []).filter((m: string) => m);
if (!metrics.length) { if (!metrics.length) {
return; return;
} }
@ -175,12 +185,22 @@ export async function useExpressionsQueryPodsMetrics(
endpointName: scope === "Endpoint" ? d.label : undefined, endpointName: scope === "Endpoint" ? d.label : undefined,
normal: scope === "Service" ? d.normal : currentService.normal, normal: scope === "Service" ? d.normal : currentService.normal,
}; };
variables.push(`$entity${index}: Entity!`);
conditions[`entity${index}`] = entity;
const f = metrics.map((name: string, idx: number) => { const f = metrics.map((name: string, idx: number) => {
variables.push(`$expression${index}${idx}: String!`, `$entity${index}${idx}: Entity!`); variables.push(`$expression${index}${idx}: String!`);
conditions[`entity${index}${idx}`] = entity;
conditions[`expression${index}${idx}`] = name; conditions[`expression${index}${idx}`] = name;
let str = "";
if (config.subExpressions[idx]) {
variables.push(`$subExpression${index}${idx}: String!`);
conditions[`subExpression${index}${idx}`] = config.subExpressions[idx];
str = `subexpression${index}${idx}: execExpression(expression: $subExpression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
}
return `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}${idx}, duration: $duration)${RespFields.execExpression}`; return (
str +
`expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`
);
}); });
return f; return f;
}); });
@ -199,28 +219,19 @@ export async function useExpressionsQueryPodsMetrics(
const metricConfigArr: MetricConfigOpt[] = []; const metricConfigArr: MetricConfigOpt[] = [];
const metricTypesArr: string[] = []; const metricTypesArr: string[] = [];
const data = pods.map((d: any, idx: number) => { const data = pods.map((d: any, idx: number) => {
const map: any = {};
for (let index = 0; index < config.expressions.length; index++) { for (let index = 0; index < config.expressions.length; index++) {
let c: any = (config.metricConfig && config.metricConfig[index]) || {}; const c: any = (config.metricConfig && config.metricConfig[index]) || {};
const k = "expression" + idx + index; const k = "expression" + idx + index;
const sub = "subexpression" + idx + index;
const results = (resp.data[k] && resp.data[k].results) || []; const results = (resp.data[k] && resp.data[k].results) || [];
const n = results[0] && results[0].metric.name; const subResults = (resp.data[sub] && resp.data[sub].results) || [];
if (map[n]) {
map[n] = {
...c,
...map[n],
};
c = map[n];
} else {
map[n] = c;
}
if (results.length > 1) { if (results.length > 1) {
const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, "")); const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
for (let i = 0; i < results.length; i++) { for (let i = 0; i < results.length; i++) {
let name = results[i].metric.labels[0].value || ""; let name = results[i].metric.labels[0].value || "";
const values = results[i].values.map((d: { value: unknown }) => d.value); const subValues = subResults[i] && subResults[i].values.map((d: { value: unknown }) => d.value);
const num = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value); const num = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value);
if (labels[num]) { if (labels[num]) {
@ -229,20 +240,17 @@ export async function useExpressionsQueryPodsMetrics(
if (!d[name]) { if (!d[name]) {
d[name] = {}; d[name] = {};
} }
if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) { if (subValues) {
d[name]["avg"] = results[i].values[0].value; d[name]["values"] = subValues;
} else {
d[name]["values"] = values;
} }
d[name]["avg"] = results[i].values[0].value;
const j = names.findIndex((d: string) => d === name); const j = names.find((d: string) => d === name);
if (j < 0) { if (!j) {
names.push(name); names.push(name);
metricConfigArr.push({ ...c, index: i }); metricConfigArr.push({ ...c, index: i });
metricTypesArr.push(config.typesOfMQE[index]); metricTypesArr.push(config.typesOfMQE[index]);
} else {
metricConfigArr[j] = { ...metricConfigArr[j], ...c };
} }
} }
} else { } else {
@ -253,19 +261,13 @@ export async function useExpressionsQueryPodsMetrics(
if (!d[name]) { if (!d[name]) {
d[name] = {}; d[name] = {};
} }
if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) { d[name]["avg"] = [results[0].values[0].value];
d[name]["avg"] = [results[0].values[0].value]; d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
} const j = names.find((d: string) => d === name);
if (config.typesOfMQE[index] === ExpressionResultType.TIME_SERIES_VALUES) { if (!j) {
d[name]["values"] = results[0].values.map((d: { value: number }) => d.value);
}
const j = names.findIndex((d: string) => d === name);
if (j < 0) {
names.push(name); names.push(name);
metricConfigArr.push(c); metricConfigArr.push(c);
metricTypesArr.push(config.typesOfMQE[index]); metricTypesArr.push(config.typesOfMQE[index]);
} else {
metricConfigArr[j] = { ...metricConfigArr[j], ...c };
} }
} }
} }

9
src/views/dashboard/configuration/Widget.vue
View File

@ -33,14 +33,7 @@ limitations under the License. -->
:config="{ :config="{
...graph, ...graph,
legend: (dashboardStore.selectedGrid.graph || {}).legend, legend: (dashboardStore.selectedGrid.graph || {}).legend,
i: dashboardStore.selectedGrid.i, ...dashboardStore.selectedGrid,
metrics: dashboardStore.selectedGrid.metrics,
metricTypes: dashboardStore.selectedGrid.metricTypes,
metricConfig: dashboardStore.selectedGrid.metricConfig,
relatedTrace: dashboardStore.selectedGrid.relatedTrace,
metricMode: dashboardStore.selectedGrid.metricMode,
expressions: dashboardStore.selectedGrid.expressions || [],
typesOfMQE: dashboardStore.selectedGrid.typesOfMQE || [],
}" }"
:needQuery="true" :needQuery="true"
/> />

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

@ -28,16 +28,26 @@ limitations under the License. -->
<div>{{ t("metrics") }}</div> <div>{{ t("metrics") }}</div>
<el-switch <el-switch
v-model="isExpression" v-model="isExpression"
class="mb-5 mt-5" class="mb-5"
active-text="Expressions" active-text="Expressions"
inactive-text="General" inactive-text="General"
size="small" size="small"
@change="changeMetricMode" @change="changeMetricMode"
/> />
<div v-for="(metric, index) in states.metrics" :key="index" class="metric-item"> <div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
<div v-if="isExpression" id="expression-param" contenteditable="true" @blur="changeExpression($event, index)"> <span v-if="isExpression">
{{ metric }} <div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
</div> {{ metric }}
</div>
<div
v-if="states.isList"
class="expression-param"
contenteditable="true"
@blur="changeSubExpression($event, index)"
>
{{ states.subMetrics[index] }}
</div>
</span>
<span v-else> <span v-else>
<Selector <Selector
:value="metric" :value="metric"
@ -79,7 +89,8 @@ 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] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</span> <div v-if="states.tips[index] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</div>
<div v-if="states.tips[index] && isExpression" class="ml-10 red sm">{{ states.tips[index] }}</div>
</div> </div>
<div>{{ t("visualization") }}</div> <div>{{ t("visualization") }}</div>
<div class="chart-types"> <div class="chart-types">
@ -127,12 +138,16 @@ limitations under the License. -->
const metrics = computed( const metrics = computed(
() => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [], () => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [],
); );
const subMetrics = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subExpressions : []) || []);
const subMetricTypes = computed(() => (isExpression.value ? dashboardStore.selectedGrid.subTypesOfMQE : []) || []);
const graph = computed(() => dashboardStore.selectedGrid.graph || {}); const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const metricTypes = computed( const metricTypes = computed(
() => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [], () => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
); );
const states = reactive<{ const states = reactive<{
metrics: string[]; metrics: string[];
subMetrics: string[];
subMetricTypes: string[];
metricTypes: string[]; metricTypes: string[];
metricTypeList: Option[][]; metricTypeList: Option[][];
isList: boolean; isList: boolean;
@ -140,6 +155,7 @@ limitations under the License. -->
dashboardName: string; dashboardName: string;
dashboardList: ((DashboardItem & { label: string; value: string }) | any)[]; dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
tips: string[]; tips: string[];
subTips: 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 : [""],
@ -149,6 +165,9 @@ limitations under the License. -->
dashboardName: graph.value.dashboardName, dashboardName: graph.value.dashboardName,
dashboardList: [{ label: "", value: "" }], dashboardList: [{ label: "", value: "" }],
tips: [], tips: [],
subTips: [],
subMetrics: subMetrics.value.length ? subMetrics.value : [""],
subMetricTypes: subMetricTypes.value.length ? subMetricTypes.value : [""],
}); });
const currentMetricConfig = ref<MetricConfigOpt>({ const currentMetricConfig = ref<MetricConfigOpt>({
unit: "", unit: "",
@ -415,6 +434,11 @@ limitations under the License. -->
function addMetric() { function addMetric() {
states.metrics.push(""); states.metrics.push("");
states.tips.push(""); states.tips.push("");
if (isExpression.value && states.isList) {
states.subMetrics.push("");
states.subTips.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) {
@ -423,6 +447,9 @@ limitations under the License. -->
return; return;
} }
states.metricTypes.push(""); states.metricTypes.push("");
if (isExpression.value && states.isList) {
states.subMetricTypes.push("");
}
} }
function deleteMetric(index: number) { function deleteMetric(index: number) {
if (states.metrics.length === 1) { if (states.metrics.length === 1) {
@ -432,6 +459,16 @@ limitations under the License. -->
let v = {}; let v = {};
if (isExpression.value) { if (isExpression.value) {
v = { typesOfMQE: states.metricTypes, expressions: states.metrics }; v = { typesOfMQE: states.metricTypes, expressions: states.metrics };
if (states.isList) {
states.subMetrics = [""];
states.subMetricTypes = [""];
states.subTips = [""];
v = {
...v,
subTypesOfMQE: states.subMetricTypes,
subExpressions: states.subMetrics,
};
}
} else { } else {
v = { metricTypes: states.metricTypes, metrics: states.metrics }; v = { metricTypes: states.metricTypes, metrics: states.metrics };
} }
@ -450,6 +487,16 @@ limitations under the License. -->
let p = {}; let p = {};
if (isExpression.value) { if (isExpression.value) {
p = { typesOfMQE: states.metricTypes, expressions: states.metrics }; p = { typesOfMQE: states.metricTypes, expressions: states.metrics };
if (states.isList) {
states.subMetrics = [""];
states.subMetricTypes = [""];
states.subTips = [""];
p = {
...p,
subTypesOfMQE: states.subMetricTypes,
subExpressions: states.subMetrics,
};
}
} else { } else {
p = { metricTypes: states.metricTypes, metrics: states.metrics }; p = { metricTypes: states.metricTypes, metrics: states.metrics };
} }
@ -487,7 +534,9 @@ limitations under the License. -->
} }
function changeMetricMode() { function changeMetricMode() {
states.metrics = metrics.value.length ? metrics.value : [""]; states.metrics = metrics.value.length ? metrics.value : [""];
states.subMetrics = subMetrics.value.length ? subMetrics.value : [""];
states.metricTypes = metricTypes.value.length ? metricTypes.value : [""]; states.metricTypes = metricTypes.value.length ? metricTypes.value : [""];
states.subMetricTypes = subMetricTypes.value.length ? subMetricTypes.value : [""];
const config = dashboardStore.selectedGrid.metricConfig; const config = dashboardStore.selectedGrid.metricConfig;
dashboardStore.selectWidget({ dashboardStore.selectWidget({
...dashboardStore.selectedGrid, ...dashboardStore.selectedGrid,
@ -520,6 +569,29 @@ limitations under the License. -->
await queryMetrics(); await queryMetrics();
} }
} }
async function changeSubExpression(event: any, index: number) {
const params = (event.target.textContent || "").replace(/\s+/g, "");
if (params) {
const resp = await dashboardStore.getTypeOfMQE(params);
states.subMetrics[index] = params;
states.subMetricTypes[index] = resp.data.metricType.type;
states.subTips[index] = resp.data.metricType.error || "";
} else {
states.subMetrics[index] = params;
states.subMetricTypes[index] = "";
states.subTips[index] = "";
}
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
subExpressions: states.subMetrics,
subTypesOfMQE: states.subMetricTypes,
});
if (params) {
await queryMetrics();
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ds-name { .ds-name {
@ -527,7 +599,7 @@ limitations under the License. -->
} }
.selectors { .selectors {
width: 500px; width: 400px;
margin-right: 10px; margin-right: 10px;
} }
@ -555,9 +627,9 @@ limitations under the License. -->
color: #fff; color: #fff;
} }
#expression-param { .expression-param {
display: inline-block; display: inline-block;
width: 500px; width: 400px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
cursor: text; cursor: text;
padding: 0 5px; padding: 0 5px;

6
src/views/dashboard/graphs/InstanceList.vue
View File

@ -107,6 +107,8 @@ limitations under the License. -->
metricMode: string; metricMode: string;
expressions: string[]; expressions: string[];
typesOfMQE: string[]; typesOfMQE: string[];
subExpressions: string[];
subTypesOfMQE: string[];
} & { metricConfig: MetricConfigOpt[] } } & { metricConfig: MetricConfigOpt[] }
>, >,
default: () => ({ default: () => ({
@ -201,11 +203,13 @@ limitations under the License. -->
async function queryInstanceExpressions(currentInstances: Instance[]) { async function queryInstanceExpressions(currentInstances: Instance[]) {
const expressions = props.config.expressions || []; const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || []; const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
const subTypesOfMQE = props.config.subTypesOfMQE || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) { if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
const params = await useExpressionsQueryPodsMetrics( const params = await useExpressionsQueryPodsMetrics(
currentInstances, currentInstances,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions }, { ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
EntityType[3].value, EntityType[3].value,
); );
instances.value = params.data; instances.value = params.data;

9
src/views/dashboard/graphs/ServiceList.vue
View File

@ -105,6 +105,8 @@ limitations under the License. -->
metricMode: string; metricMode: string;
expressions: string[]; expressions: string[];
typesOfMQE: string[]; typesOfMQE: string[];
subExpressions: string[];
subTypesOfMQE: string[];
} }
>, >,
default: () => ({ dashboardName: "", fontSize: 12 }), default: () => ({ dashboardName: "", fontSize: 12 }),
@ -249,18 +251,20 @@ limitations under the License. -->
async function queryServiceExpressions(currentServices: Service[]) { async function queryServiceExpressions(currentServices: Service[]) {
const expressions = props.config.expressions || []; const expressions = props.config.expressions || [];
const typesOfMQE = props.config.typesOfMQE || []; const typesOfMQE = props.config.typesOfMQE || [];
const subExpressions = props.config.subExpressions || [];
const subTypesOfMQE = props.config.subTypesOfMQE || [];
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) { if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
const params = await useExpressionsQueryPodsMetrics( const params = await useExpressionsQueryPodsMetrics(
currentServices, currentServices,
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions }, { ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
EntityType[0].value, EntityType[0].value,
); );
services.value = params.data; services.value = params.data;
colMetrics.value = params.names; colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr; metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr; metricConfig.value = params.metricConfigArr;
console.log(colMetrics.value);
return; return;
} }
services.value = currentServices; services.value = currentServices;
@ -304,6 +308,7 @@ limitations under the License. -->
...(props.config.metrics || []), ...(props.config.metrics || []),
...(props.config.metricConfig || []), ...(props.config.metricConfig || []),
...(props.config.expressions || []), ...(props.config.expressions || []),
...(props.config.subExpressions || []),
props.config.metricMode, props.config.metricMode,
], ],
(data, old) => { (data, old) => {