mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-13 08:17:33 +00:00
feat: update
This commit is contained in:
Fine
parent
d46a6a189e
commit
7936403e5e
@ -148,16 +148,26 @@ export async function useExpressionsQueryPodsMetrics(
|
||||
config: {
|
||||
expressions: string[];
|
||||
typesOfMQE: string[];
|
||||
subExpressions: string[];
|
||||
metricConfig: MetricConfigOpt[];
|
||||
},
|
||||
scope: string,
|
||||
) {
|
||||
function expressionsGraphqlPods() {
|
||||
const metricTypes = (config.typesOfMQE || []).filter((m: string) => m);
|
||||
if (!metricTypes.length) {
|
||||
return;
|
||||
const metrics: string[] = [];
|
||||
const subMetrics: string[] = [];
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
@ -175,12 +185,22 @@ export async function useExpressionsQueryPodsMetrics(
|
||||
endpointName: scope === "Endpoint" ? d.label : undefined,
|
||||
normal: scope === "Service" ? d.normal : currentService.normal,
|
||||
};
|
||||
variables.push(`$entity${index}: Entity!`);
|
||||
conditions[`entity${index}`] = entity;
|
||||
const f = metrics.map((name: string, idx: number) => {
|
||||
variables.push(`$expression${index}${idx}: String!`, `$entity${index}${idx}: Entity!`);
|
||||
conditions[`entity${index}${idx}`] = entity;
|
||||
variables.push(`$expression${index}${idx}: String!`);
|
||||
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;
|
||||
});
|
||||
@ -199,28 +219,19 @@ export async function useExpressionsQueryPodsMetrics(
|
||||
const metricConfigArr: MetricConfigOpt[] = [];
|
||||
const metricTypesArr: string[] = [];
|
||||
const data = pods.map((d: any, idx: number) => {
|
||||
const map: any = {};
|
||||
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 sub = "subexpression" + idx + index;
|
||||
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) {
|
||||
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, ""));
|
||||
for (let i = 0; i < results.length; i++) {
|
||||
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);
|
||||
|
||||
if (labels[num]) {
|
||||
@ -229,20 +240,17 @@ export async function useExpressionsQueryPodsMetrics(
|
||||
if (!d[name]) {
|
||||
d[name] = {};
|
||||
}
|
||||
if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
|
||||
d[name]["avg"] = results[i].values[0].value;
|
||||
} else {
|
||||
d[name]["values"] = values;
|
||||
if (subValues) {
|
||||
d[name]["values"] = subValues;
|
||||
}
|
||||
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);
|
||||
metricConfigArr.push({ ...c, index: i });
|
||||
metricTypesArr.push(config.typesOfMQE[index]);
|
||||
} else {
|
||||
metricConfigArr[j] = { ...metricConfigArr[j], ...c };
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -253,19 +261,13 @@ export async function useExpressionsQueryPodsMetrics(
|
||||
if (!d[name]) {
|
||||
d[name] = {};
|
||||
}
|
||||
if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
|
||||
d[name]["avg"] = [results[0].values[0].value];
|
||||
}
|
||||
if (config.typesOfMQE[index] === ExpressionResultType.TIME_SERIES_VALUES) {
|
||||
d[name]["values"] = results[0].values.map((d: { value: number }) => d.value);
|
||||
}
|
||||
const j = names.findIndex((d: string) => d === name);
|
||||
if (j < 0) {
|
||||
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 (!j) {
|
||||
names.push(name);
|
||||
metricConfigArr.push(c);
|
||||
metricTypesArr.push(config.typesOfMQE[index]);
|
||||
} else {
|
||||
metricConfigArr[j] = { ...metricConfigArr[j], ...c };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,14 +33,7 @@ limitations under the License. -->
|
||||
:config="{
|
||||
...graph,
|
||||
legend: (dashboardStore.selectedGrid.graph || {}).legend,
|
||||
i: dashboardStore.selectedGrid.i,
|
||||
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 || [],
|
||||
...dashboardStore.selectedGrid,
|
||||
}"
|
||||
:needQuery="true"
|
||||
/>
|
||||
|
||||
@ -28,16 +28,26 @@ limitations under the License. -->
|
||||
<div>{{ t("metrics") }}</div>
|
||||
<el-switch
|
||||
v-model="isExpression"
|
||||
class="mb-5 mt-5"
|
||||
class="mb-5"
|
||||
active-text="Expressions"
|
||||
inactive-text="General"
|
||||
size="small"
|
||||
@change="changeMetricMode"
|
||||
/>
|
||||
<div v-for="(metric, index) in states.metrics" :key="index" class="metric-item">
|
||||
<div v-if="isExpression" id="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
|
||||
{{ metric }}
|
||||
</div>
|
||||
<div v-for="(metric, index) in states.metrics" :key="index" class="mb-10">
|
||||
<span v-if="isExpression">
|
||||
<div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
|
||||
{{ metric }}
|
||||
</div>
|
||||
<div
|
||||
v-if="states.isList"
|
||||
class="expression-param"
|
||||
contenteditable="true"
|
||||
@blur="changeSubExpression($event, index)"
|
||||
>
|
||||
{{ states.subMetrics[index] }}
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<Selector
|
||||
:value="metric"
|
||||
@ -79,7 +89,8 @@ limitations under the License. -->
|
||||
/>
|
||||
<Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
|
||||
</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>{{ t("visualization") }}</div>
|
||||
<div class="chart-types">
|
||||
@ -127,12 +138,16 @@ limitations under the License. -->
|
||||
const metrics = computed(
|
||||
() => (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 metricTypes = computed(
|
||||
() => (isExpression.value ? dashboardStore.selectedGrid.typesOfMQE : dashboardStore.selectedGrid.metricTypes) || [],
|
||||
);
|
||||
const states = reactive<{
|
||||
metrics: string[];
|
||||
subMetrics: string[];
|
||||
subMetricTypes: string[];
|
||||
metricTypes: string[];
|
||||
metricTypeList: Option[][];
|
||||
isList: boolean;
|
||||
@ -140,6 +155,7 @@ limitations under the License. -->
|
||||
dashboardName: string;
|
||||
dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
|
||||
tips: string[];
|
||||
subTips: string[];
|
||||
}>({
|
||||
metrics: metrics.value.length ? metrics.value : [""],
|
||||
metricTypes: metricTypes.value.length ? metricTypes.value : [""],
|
||||
@ -149,6 +165,9 @@ limitations under the License. -->
|
||||
dashboardName: graph.value.dashboardName,
|
||||
dashboardList: [{ label: "", value: "" }],
|
||||
tips: [],
|
||||
subTips: [],
|
||||
subMetrics: subMetrics.value.length ? subMetrics.value : [""],
|
||||
subMetricTypes: subMetricTypes.value.length ? subMetricTypes.value : [""],
|
||||
});
|
||||
const currentMetricConfig = ref<MetricConfigOpt>({
|
||||
unit: "",
|
||||
@ -415,6 +434,11 @@ limitations under the License. -->
|
||||
function addMetric() {
|
||||
states.metrics.push("");
|
||||
states.tips.push("");
|
||||
if (isExpression.value && states.isList) {
|
||||
states.subMetrics.push("");
|
||||
states.subTips.push("");
|
||||
}
|
||||
|
||||
if (!states.isList) {
|
||||
states.metricTypes.push(states.metricTypes[0]);
|
||||
if (!isExpression.value) {
|
||||
@ -423,6 +447,9 @@ limitations under the License. -->
|
||||
return;
|
||||
}
|
||||
states.metricTypes.push("");
|
||||
if (isExpression.value && states.isList) {
|
||||
states.subMetricTypes.push("");
|
||||
}
|
||||
}
|
||||
function deleteMetric(index: number) {
|
||||
if (states.metrics.length === 1) {
|
||||
@ -432,6 +459,16 @@ limitations under the License. -->
|
||||
let v = {};
|
||||
if (isExpression.value) {
|
||||
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 {
|
||||
v = { metricTypes: states.metricTypes, metrics: states.metrics };
|
||||
}
|
||||
@ -450,6 +487,16 @@ limitations under the License. -->
|
||||
let p = {};
|
||||
if (isExpression.value) {
|
||||
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 {
|
||||
p = { metricTypes: states.metricTypes, metrics: states.metrics };
|
||||
}
|
||||
@ -487,7 +534,9 @@ limitations under the License. -->
|
||||
}
|
||||
function changeMetricMode() {
|
||||
states.metrics = metrics.value.length ? metrics.value : [""];
|
||||
states.subMetrics = subMetrics.value.length ? subMetrics.value : [""];
|
||||
states.metricTypes = metricTypes.value.length ? metricTypes.value : [""];
|
||||
states.subMetricTypes = subMetricTypes.value.length ? subMetricTypes.value : [""];
|
||||
const config = dashboardStore.selectedGrid.metricConfig;
|
||||
dashboardStore.selectWidget({
|
||||
...dashboardStore.selectedGrid,
|
||||
@ -520,6 +569,29 @@ limitations under the License. -->
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.ds-name {
|
||||
@ -527,7 +599,7 @@ limitations under the License. -->
|
||||
}
|
||||
|
||||
.selectors {
|
||||
width: 500px;
|
||||
width: 400px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -555,9 +627,9 @@ limitations under the License. -->
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#expression-param {
|
||||
.expression-param {
|
||||
display: inline-block;
|
||||
width: 500px;
|
||||
width: 400px;
|
||||
border: 1px solid #dcdfe6;
|
||||
cursor: text;
|
||||
padding: 0 5px;
|
||||
|
||||
@ -107,6 +107,8 @@ limitations under the License. -->
|
||||
metricMode: string;
|
||||
expressions: string[];
|
||||
typesOfMQE: string[];
|
||||
subExpressions: string[];
|
||||
subTypesOfMQE: string[];
|
||||
} & { metricConfig: MetricConfigOpt[] }
|
||||
>,
|
||||
default: () => ({
|
||||
@ -201,11 +203,13 @@ limitations under the License. -->
|
||||
async function queryInstanceExpressions(currentInstances: Instance[]) {
|
||||
const expressions = props.config.expressions || [];
|
||||
const typesOfMQE = props.config.typesOfMQE || [];
|
||||
const subExpressions = props.config.subExpressions || [];
|
||||
const subTypesOfMQE = props.config.subTypesOfMQE || [];
|
||||
|
||||
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
|
||||
const params = await useExpressionsQueryPodsMetrics(
|
||||
currentInstances,
|
||||
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions },
|
||||
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
|
||||
EntityType[3].value,
|
||||
);
|
||||
instances.value = params.data;
|
||||
|
||||
@ -105,6 +105,8 @@ limitations under the License. -->
|
||||
metricMode: string;
|
||||
expressions: string[];
|
||||
typesOfMQE: string[];
|
||||
subExpressions: string[];
|
||||
subTypesOfMQE: string[];
|
||||
}
|
||||
>,
|
||||
default: () => ({ dashboardName: "", fontSize: 12 }),
|
||||
@ -249,18 +251,20 @@ limitations under the License. -->
|
||||
async function queryServiceExpressions(currentServices: Service[]) {
|
||||
const expressions = props.config.expressions || [];
|
||||
const typesOfMQE = props.config.typesOfMQE || [];
|
||||
const subExpressions = props.config.subExpressions || [];
|
||||
const subTypesOfMQE = props.config.subTypesOfMQE || [];
|
||||
|
||||
if (expressions.length && expressions[0] && typesOfMQE.length && typesOfMQE[0]) {
|
||||
const params = await useExpressionsQueryPodsMetrics(
|
||||
currentServices,
|
||||
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions },
|
||||
{ ...props.config, metricConfig: metricConfig.value || [], typesOfMQE, expressions, subExpressions },
|
||||
EntityType[0].value,
|
||||
);
|
||||
services.value = params.data;
|
||||
colMetrics.value = params.names;
|
||||
metricTypes.value = params.metricTypesArr;
|
||||
metricConfig.value = params.metricConfigArr;
|
||||
|
||||
console.log(colMetrics.value);
|
||||
return;
|
||||
}
|
||||
services.value = currentServices;
|
||||
@ -304,6 +308,7 @@ limitations under the License. -->
|
||||
...(props.config.metrics || []),
|
||||
...(props.config.metricConfig || []),
|
||||
...(props.config.expressions || []),
|
||||
...(props.config.subExpressions || []),
|
||||
props.config.metricMode,
|
||||
],
|
||||
(data, old) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user