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

add label

Browse Source
This commit is contained in:
Qiuxia Fan 2022-04-01 11:03:12 +08:00
parent b51e423c2b
commit 9e21364a65
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,7 @@ limitations under the License. -->
" "
/> />
</div> </div>
<div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'"> <div class="item mb-10" v-if="hasLabel">
<span class="label">{{ t("labels") }}</span> <span class="label">{{ t("labels") }}</span>
<el-input <el-input
class="input" class="input"
@ -40,7 +40,7 @@ limitations under the License. -->
" "
/> />
</div> </div>
<div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'"> <div class="item mb-10" v-if="metricType === 'readLabeledMetricsValues'">
<span class="label">{{ t("labelsIndex") }}</span> <span class="label">{{ t("labelsIndex") }}</span>
<el-input <el-input
class="input" class="input"
@ -95,6 +95,7 @@ import { useI18n } from "vue-i18n";
import { SortOrder, CalculationOpts } from "../../../data"; import { SortOrder, CalculationOpts } from "../../../data";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { MetricConfigOpt } from "@/types/dashboard"; import { MetricConfigOpt } from "@/types/dashboard";
import { ListChartTypes } from "../../../data";
/*global defineEmits, defineProps */ /*global defineEmits, defineProps */
const props = defineProps({ const props = defineProps({
@ -113,6 +114,13 @@ const currentMetric = ref<MetricConfigOpt>({
}); });
const metricTypes = dashboardStore.selectedGrid.metricTypes || []; const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
const metricType = ref<string>(metricTypes[props.index]); const metricType = ref<string>(metricTypes[props.index]);
const hasLabel = computed(() => {
const graph = dashboardStore.selectedGrid.graph || {};
return (
ListChartTypes.includes(graph.type) ||
metricType.value === "readLabeledMetricsValues"
);
});
const isTopn = computed(() => const isTopn = computed(() =>
["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index]) ["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index])
); );
@ -121,7 +129,7 @@ function updateConfig(index: number, param: { [key: string]: string }) {
if (!key) { if (!key) {
return; return;
} }
changeConfigs(index, { key: decodeURIComponent(param[key]) }); changeConfigs(index, { [key]: decodeURIComponent(param[key]) });
} }
function changeConfigs( function changeConfigs(
index: number, index: number,
@ -130,7 +138,6 @@ function changeConfigs(
const metricConfig = dashboardStore.selectedGrid.metricConfig || []; const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
metricConfig[index] = { ...metricConfig[index], ...param }; metricConfig[index] = { ...metricConfig[index], ...param };
currentMetric.value = metricConfig[index];
dashboardStore.selectWidget({ dashboardStore.selectWidget({
...dashboardStore.selectedGrid, ...dashboardStore.selectedGrid,
metricConfig, metricConfig,

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

@ -56,7 +56,9 @@ limitations under the License. -->
</el-table-column> </el-table-column>
<el-table-column <el-table-column
v-for="(metric, index) in colMetrics" v-for="(metric, index) in colMetrics"
:label="`${metric} ${decodeURIComponent(getUnit(index))}`" :label="`${decodeURIComponent(
getLabel(metric, index)
)} ${decodeURIComponent(getUnit(index))}`"
:key="metric + index" :key="metric + index"
> >
<template #default="scope"> <template #default="scope">
@ -276,15 +278,24 @@ function searchList() {
} }
function getUnit(index: number) { function getUnit(index: number) {
const u = const u =
(props.config.metricConfig && props.config.metricConfig &&
props.config.metricConfig[index] && props.config.metricConfig[index] &&
props.config.metricConfig[index].unit) || props.config.metricConfig[index].unit;
"";
if (u) { if (u) {
return `(${encodeURIComponent(u)})`; return `(${encodeURIComponent(u)})`;
} }
return encodeURIComponent(""); return encodeURIComponent("");
} }
function getLabel(metric: string, index: number) {
const label =
props.config.metricConfig &&
props.config.metricConfig[index] &&
props.config.metricConfig[index].label;
if (label) {
return encodeURIComponent(label);
}
return encodeURIComponent(metric);
}
watch( watch(
() => [props.config.metricTypes, props.config.metrics], () => [props.config.metricTypes, props.config.metrics],
() => { () => {