github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
Fine 2024-04-10 13:40:26 +08:00
parent 8bc6761468
commit f8a16501df
2 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/hooks/useExpressionsProcessor.ts
View File

@ -117,16 +117,11 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value; const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value;
source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || []; source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
} else { } else {
const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
for (const item of results) { for (const item of results) {
const values = item.values.map((d: { value: unknown }) => d.value) || []; const values = item.values.map((d: { value: unknown }) => d.value) || [];
const index = item.metric.labels[0].value; const label = item.metric.labels.map((d: any) => `${d.key}=${d.value}`).join(",");
const indexNum = labels.findIndex((_, i: number) => i === Number(index));
if (labels[indexNum] && indexNum > -1) { source[label] = values;
source[labels[indexNum]] = values;
} else {
source[index] = values;
}
} }
} }
} }

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

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