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

show metric config

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-26 18:03:47 +08:00
parent eca4f35d0c
commit d4a900fe7f
3 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/related/topology/components/PodTopology.vue
View File

@ -54,7 +54,7 @@ limitations under the License. -->
element-loading-background="rgba(0, 0, 0, 0)"
@click="handleClick"
>
<Sankey @click="selectNodeLink" />
<Sankey @click="selectNodeLink" :settings="settings" />
</div>
<div
class="operations-list"

65
src/views/dashboard/related/topology/components/Sankey.vue
View File

@ -17,11 +17,19 @@ limitations under the License. -->
<Graph :option="option" @select="clickChart" />
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { computed, PropType } from "vue";
import { useTopologyStore } from "@/store/modules/topology";
import { Node, Call } from "@/types/topology";
import { MetricConfigOpt } from "@/types/dashboard";
import { aggregation } from "@/hooks/useProcessor";
/*global defineEmits */
/*global defineEmits, defineProps */
const props = defineProps({
settings: {
type: Object as PropType<any>,
default: () => ({}),
},
});
const emit = defineEmits(["click"]);
const topologyStore = useTopologyStore();
const option = computed(() => getOption());
@ -77,23 +85,34 @@ function getOption() {
function linkTooltip(data: Call) {
const clientMetrics: string[] = Object.keys(topologyStore.linkClientMetrics);
const serverMetrics: string[] = Object.keys(topologyStore.linkServerMetrics);
const htmlServer = serverMetrics.map((m) => {
const metric = topologyStore.linkServerMetrics[m].values.filter(
(val: { id: string; value: unknown }) => val.id === data.id
)[0];
const linkServerMetricConfig: MetricConfigOpt[] =
props.settings.linkServerMetricConfig || [];
const linkClientMetricConfig: MetricConfigOpt[] =
props.settings.linkClientMetricConfig || [];
const htmlServer = serverMetrics.map((m, index) => {
const metric =
topologyStore.linkServerMetrics[m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id
) || {};
if (metric) {
const val = m.includes("_sla") ? metric.value / 100 : metric.value;
return ` <div><span>${m}: </span>${val}</div>`;
const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
const v = aggregation(metric.value, opt);
return ` <div class="mb-5"><span class="grey">${
opt.label || m
}: </span>${v} ${opt.unit || ""}</div>`;
}
});
const htmlClient = clientMetrics.map((m) => {
const metric = topologyStore.linkClientMetrics[m].values.filter(
(val: { id: string; value: unknown }) => val.id === data.id
)[0];
if (metric) {
const val = m.includes("_sla") ? metric.value / 100 : metric.value;
return ` <div><span>${m}: </span>${val}</div>`;
}
const htmlClient = clientMetrics.map((m, index) => {
const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
const metric =
topologyStore.linkClientMetrics[m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id
) || {};
const v = aggregation(metric.value, opt);
return ` <div class="mb-5"><span class="grey">${
opt.label || m
}: </span>${v} ${opt.unit || ""}</div>`;
});
const html = [
`<div>${data.sourceObj.serviceName} -> ${data.targetObj.serviceName}</div>`,
@ -106,13 +125,17 @@ function linkTooltip(data: Call) {
function nodeTooltip(data: Node) {
const nodeMetrics: string[] = Object.keys(topologyStore.nodeMetricValue);
const html = nodeMetrics.map((m) => {
const nodeMetricConfig = props.settings.nodeMetricConfig || [];
const html = nodeMetrics.map((m, index) => {
const metric =
topologyStore.nodeMetricValue[m].values.filter(
topologyStore.nodeMetricValue[m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id
)[0] || {};
const val = m.includes("_sla") ? metric.value / 100 : metric.value;
return ` <div><span>${m}: </span>${val}</div>`;
) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
const v = aggregation(metric.value, opt);
return ` <div class="mb-5"><span class="grey">${
opt.label || m
}: </span>${v} ${opt.unit || ""}</div>`;
});
return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(
" "

6
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -36,7 +36,7 @@ limitations under the License. -->
>
<template #reference>
<span @click="setConfigType('linkServerMetricConfig')">
<Icon class="cp mr-5" iconName="mode_edit" size="middle" />
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
</span>
</template>
<Metrics
@ -67,7 +67,7 @@ limitations under the License. -->
>
<template #reference>
<span @click="setConfigType('linkClientMetricConfig')">
<Icon class="cp mr-5" iconName="mode_edit" size="middle" />
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
</span>
</template>
<Metrics
@ -149,7 +149,7 @@ limitations under the License. -->
>
<template #reference>
<span @click="setConfigType('nodeMetricConfig')">
<Icon class="cp mr-5" iconName="mode_edit" size="middle" />
<Icon class="cp ml-5" iconName="mode_edit" size="middle" />
</span>
</template>
<Metrics