github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance metric labels (#382)

Browse Source
This commit is contained in:
Fine0830
2024-04-10 16:40:14 +08:00
committed by GitHub
parent 8bc6761468
commit fd2c7ca716
9 changed files with 44 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/dashboard/graphs/Table.vue
View File

@@ -16,17 +16,33 @@ limitations under the License. -->
<template>
<div class="chart-table">
<div class="row header flex-h">
<div class="name" :style="`width: ${nameWidth}`">
{{ config.tableHeaderCol1 || t("name") }}
<div
v-for="key in dataKeys[0]"
:key="key"
class="name"
:style="`width: ${dataKeys[0].length > 1 ? (nameWidth as number) / (dataKeys[0].length || 1) : nameWidth}%`"
>
{{ key.split("=")[0] || t("name") }}
</div>
<div class="value-col" v-if="config.showTableValues">
{{ config.tableHeaderCol2 || t("value") }}
</div>
</div>
<div class="row flex-h" v-for="key in dataKeys" :key="key">
<div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
<div class="row flex-h" v-for="(keys, index) in dataKeys" :key="index">
<div
v-for="k in keys"
class="name"
:style="`width: ${keys.length > 1 ? (nameWidth as number) / (keys.length || 1) : nameWidth}%`"
:key="k"
>{{ k.split("=")[1] }}</div
>
<div class="value-col" v-if="config.showTableValues">
{{ config.metricTypes[0] === "readMetricsValue" ? data[key] : data[key][data[key].length - 1 || 0] }}
{{
(config.metricTypes && config.metricTypes[0] === "readMetricsValue") ||
(props.config.typesOfMQE && props.config.typesOfMQE[0] === ExpressionResultType.SINGLE_VALUE)
? data[keys[0]]
: data[(keys as string[]).join(",")][data[(keys as string[]).join(",")].length - 1 || 0]
}}
</div>
</div>
</div>
@@ -35,6 +51,7 @@ limitations under the License. -->
import { computed } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import { ExpressionResultType } from "@/views/dashboard/data";
/*global defineProps */
const props = defineProps({
data: {
@@ -45,24 +62,30 @@ limitations under the License. -->
type: Object as PropType<{
showTableValues: boolean;
tableHeaderCol2: string;
tableHeaderCol1: string;
metricTypes: string[];
typesOfMQE: string[];
}>,
default: () => ({ showTableValues: true }),
},
});
const { t } = useI18n();
const nameWidth = computed(() => (props.config.showTableValues ? "80%" : "100%"));
const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100));
const dataKeys = computed(() => {
if (props.config.metricTypes[0] === "readMetricsValue") {
if (props.config.metricTypes && props.config.metricTypes[0] === "readMetricsValue") {
const keys = Object.keys(props.data || {});
return keys;
}
if (props.config.typesOfMQE && props.config.typesOfMQE[0] === ExpressionResultType.SINGLE_VALUE) {
const keys = Object.keys(props.data || {});
return keys;
}
const keys = Object.keys(props.data || {}).filter(
(i: string) => Array.isArray(props.data[i]) && props.data[i].length,
);
return keys;
const list = keys.map((d: string) => d.split(","));
return list;
});
</script>
<style lang="scss" scoped>
@@ -94,6 +117,10 @@ limitations under the License. -->
border-bottom: 1px solid $disabled-color;
}
div:first-child {
border-bottom: 1px solid $disabled-color;
}
div:nth-last-child(2) {
border-bottom: 1px solid $disabled-color;
}