github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 18:03:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove metric name from queries (#275)

Browse Source
This commit is contained in:
Fine0830 2023-06-07 16:58:30 +08:00 committed by GitHub
parent b293f4ddb5
commit d662a0fb54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/hooks/useExpressionsProcessor.ts
View File

@ -107,11 +107,11 @@ export function useExpressionsSourceProcessor(
}
const source: { [key: string]: unknown } = {};
const keys = Object.keys(resp.data);
for (let i = 0; i < config.metricTypes.length; i++) {
for (let i = 0; i < config.metrics.length; i++) {
const type = config.metricTypes[i];
const c = (config.metricConfig && config.metricConfig[i]) || {};
const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
const results = (resp.data[keys[i]] && resp.data[keys[i]].results) || [];
const name = ((results[0] || {}).metric || {}).name;
const name = config.metrics[i];
if (type === ExpressionResultType.TIME_SERIES_VALUES) {
if (results.length === 1) {
@ -214,11 +214,12 @@ export async function useExpressionsQueryPodsMetrics(
return {};
}
const names: string[] = [];
const subNames: string[] = [];
const metricConfigArr: MetricConfigOpt[] = [];
const metricTypesArr: string[] = [];
const data = pods.map((d: any, idx: number) => {
for (let index = 0; index < config.expressions.length; index++) {
const c: any = (config.metricConfig && config.metricConfig[index]) || {};
const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[index]) || {};
const k = "expression" + idx + index;
const sub = "subexpression" + idx + index;
const results = (resp.data[k] && resp.data[k].results) || [];
@ -255,17 +256,22 @@ export async function useExpressionsQueryPodsMetrics(
if (!results[0]) {
return d;
}
const name = results[0].metric.name || "";
const name = config.expressions[index] || "";
const subName = config.subExpressions[index] || "";
if (!d[name]) {
d[name] = {};
}
d[name]["avg"] = [results[0].values[0].value];
if (subResults[0]) {
d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
if (!d[subName]) {
d[subName] = {};
}
d[subName]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
}
const j = names.find((d: string) => d === name);
if (!j) {
names.push(name);
subNames.push(subName);
metricConfigArr.push(c);
metricTypesArr.push(config.typesOfMQE[index]);
}
@ -274,7 +280,7 @@ export async function useExpressionsQueryPodsMetrics(
return d;
});
return { data, names, metricConfigArr, metricTypesArr };
return { data, names, subNames, metricConfigArr, metricTypesArr };
}
const dashboardStore = useDashboardStore();
const params = await expressionsGraphqlPods();
@ -284,7 +290,7 @@ export async function useExpressionsQueryPodsMetrics(
ElMessage.error(json.errors);
return {};
}
const { data, names, metricTypesArr, metricConfigArr } = expressionsPodsSource(json);
const expressionParams = expressionsPodsSource(json);
return { data, names, metricTypesArr, metricConfigArr };
return expressionParams;
}

2
src/hooks/useListConfig.ts
View File

@ -17,7 +17,7 @@
import { MetricQueryTypes, Calculations } from "./data";
import { MetricModes } from "@/views/dashboard/data";
export function useListConfig(config: Indexable, index: string) {
export function useListConfig(config: Indexable, index: number) {
if (config.metricModes === MetricModes.Expression) {
return {
isLinear: false,

3
src/types/app.d.ts vendored
View File

@ -42,8 +42,7 @@ export type EventParams = {
dataIndex: number;
data: unknown;
dataType: string;
value: number | Array;
value: number | any[];
color: string;
event: any;
dataIndex: number;
};

6
src/types/dashboard.d.ts vendored
View File

@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DurationTime } from "./app";
export type DashboardItem = {
id?: string;
entity: string;
@ -75,8 +75,8 @@ export type MetricConfigOpt = {
unit?: string;
label?: string;
calculation?: string;
labelsIndex: string;
sortOrder: string;
labelsIndex?: string;
sortOrder?: string;
topN?: number;
index?: number;
};

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

@ -490,13 +490,14 @@ limitations under the License. -->
const metricConfig = config[index] ? config.splice(index, 1) : config;
let p = {};
if (isExpression.value) {
p = { typesOfMQE: states.metricTypes, expressions: states.metrics };
if (states.isList) {
states.subMetrics = [""];
states.subMetricTypes = [""];
states.subTips = [""];
states.subMetrics.splice(index, 1);
states.subMetricTypes.splice(index, 1);
states.subTips.splice(index, 1);
p = {
...p,
typesOfMQE: states.metricTypes,
expressions: states.metrics,
subTypesOfMQE: states.subMetricTypes,
subExpressions: states.subMetrics,
};

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

@ -57,7 +57,7 @@ limitations under the License. -->
placeholder="auto"
@change="
updateConfig(index, {
labelsIndex: encodeURIComponent(currentMetric.labelsIndex),
labelsIndex: encodeURIComponent(currentMetric.labelsIndex || ''),
})
"
/>

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

@ -36,9 +36,9 @@ limitations under the License. -->
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:colSubMetrics="colSubMetrics"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@ -103,6 +103,7 @@ limitations under the License. -->
const endpoints = ref<Endpoint[]>([]);
const searchText = ref<string>("");
const colMetrics = ref<string[]>([]);
const colSubMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
const metricMode = ref<string>(props.config.metricMode);
@ -180,11 +181,13 @@ limitations under the License. -->
colMetrics.value = params.names;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
colSubMetrics.value = params.colSubMetrics;
return;
}
endpoints.value = currentPods;
colMetrics.value = [];
colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
@ -230,9 +233,9 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
.tips {
color: rgba(255, 0, 0, 0.5);
color: rgb(255 0 0 / 50%);
}
</style>

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

@ -35,9 +35,9 @@ limitations under the License. -->
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:colSubMetrics="colSubMetrics"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@ -130,6 +130,7 @@ limitations under the License. -->
const pageSize = 10;
const searchText = ref<string>("");
const colMetrics = ref<string[]>([]);
const colSubMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const metricTypes = ref<string[]>(props.config.metricTypes || []);
const pods = ref<Instance[]>([]); // all instances
@ -213,12 +214,14 @@ limitations under the License. -->
);
instances.value = params.data;
colMetrics.value = params.names;
colSubMetrics.value = params.colSubMetrics;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
instances.value = currentInstances;
colSubMetrics.value = [];
colMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
@ -281,7 +284,7 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
.attributes {
max-height: 400px;

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

@ -47,9 +47,9 @@ limitations under the License. -->
<ColumnGraph
:intervalTime="intervalTime"
:colMetrics="colMetrics"
:colSubMetrics="colSubMetrics"
:config="{
...config,
metrics: colMetrics,
metricConfig,
metricTypes,
metricMode,
@ -121,6 +121,7 @@ limitations under the License. -->
const pageSize = 10;
const services = ref<Service[]>([]);
const colMetrics = ref<string[]>([]);
const colSubMetrics = ref<string[]>([]);
const searchText = ref<string>("");
const groups = ref<any>({});
const sortServices = ref<(Service & { merge: boolean })[]>([]);
@ -261,12 +262,14 @@ limitations under the License. -->
);
services.value = params.data;
colMetrics.value = params.names;
colSubMetrics.value = params.subNames;
metricTypes.value = params.metricTypesArr;
metricConfig.value = params.metricConfigArr;
return;
}
services.value = currentServices;
colMetrics.value = [];
colSubMetrics.value = [];
metricTypes.value = [];
metricConfig.value = [];
}
@ -329,5 +332,5 @@ limitations under the License. -->
);
</script>
<style lang="scss" scoped>
@import "./style.scss";
@import url("./style.scss");
</style>

11
src/views/dashboard/graphs/components/ColumnGraph.vue
View File

@ -48,7 +48,8 @@ limitations under the License. -->
<div class="view-line">
<Line
:data="{
[metric]: scope.row[metric] && scope.row[metric].values,
[colSubMetrics[index] || metric]:
scope.row[colSubMetrics[index] || metric] && scope.row[colSubMetrics[index] || metric].values,
}"
:intervalTime="intervalTime"
:config="{
@ -86,11 +87,11 @@ limitations under the License. -->
/*global defineProps */
const props = defineProps({
colMetrics: { type: Object },
colMetrics: { type: Array as PropType<string[]>, default: () => [] },
colSubMetrics: { type: Array as PropType<string[]>, default: () => [] },
config: {
type: Object as PropType<{
i: string;
metrics: string[];
metricTypes: string[];
metricConfig: MetricConfigOpt[];
metricMode: string;
@ -100,7 +101,7 @@ limitations under the License. -->
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
});
function getUnit(index: string) {
function getUnit(index: number) {
const i = Number(index);
const u = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].unit;
if (u) {
@ -108,7 +109,7 @@ limitations under the License. -->
}
return encodeURIComponent("");
}
function getLabel(metric: string, index: string) {
function getLabel(metric: string, index: number) {
const i = Number(index);
const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
if (label) {