github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +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
10 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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) {