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

fix: update topList

Browse Source
This commit is contained in:
Qiuxia Fan 2022-01-22 14:11:52 +08:00
parent 57faac6ddc
commit 84d689e5d4
3 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/dashboard/configuration/ConfigEdit.vue
View File

@ -226,6 +226,7 @@ export default defineComponent({
return { return {
states, states,
loading,
changeChartType, changeChartType,
t, t,
appStoreWithOut, appStoreWithOut,

3
src/views/dashboard/configuration/MetricOptions.vue
View File

@ -80,7 +80,8 @@ const props = defineProps({
}); });
const emit = defineEmits(["update", "apply", "loading"]); const emit = defineEmits(["update", "apply", "loading"]);
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const { selectedGrid, entity, metrics, metricTypes } = dashboardStore; const { selectedGrid, entity } = dashboardStore;
const { metrics, metricTypes } = selectedGrid;
const states = reactive<{ const states = reactive<{
metrics: string[]; metrics: string[];
metricTypes: string[]; metricTypes: string[];

37
src/views/dashboard/graphs/TopList.vue
View File

@ -16,21 +16,27 @@ limitations under the License. -->
<template> <template>
<div class="top-list"> <div class="top-list">
<div class="chart-slow-i" v-for="(i, index) in datas" :key="index"> <div class="chart-slow-i" v-for="(i, index) in datas" :key="index">
<Icon <div class="ell tools flex-h">
iconName="review-list" <div>
size="sm" <span class="calls mr-10">{{ i.value }}</span>
@click="handleClick((i.traceIds && i.traceIds[0]) || i.name)" <span class="cp mr-20">
/>
<div class="mb-5 ell">
<span class="calls sm mr-10">{{ i.value }}</span>
<span class="cp link-hover">
{{ i.name + getTraceId(i) }} {{ i.name + getTraceId(i) }}
</span> </span>
</div> </div>
<div>
<Icon
iconName="review-list"
size="middle"
class="cp"
@click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
/>
</div>
</div>
<el-progress <el-progress
:stroke-width="10" :stroke-width="6"
:percentage="(i.value / maxValue) * 100" :percentage="(i.value / maxValue) * 100"
color="#bf99f8" color="#bf99f8"
:show-text="false"
/> />
</div> </div>
</div> </div>
@ -55,7 +61,7 @@ const props = defineProps({
}); });
const key = computed(() => Object.keys(props.data)[0]); const key = computed(() => Object.keys(props.data)[0]);
const maxValue = computed(() => { const maxValue = computed(() => {
if (!props.data[key.value].length) { if (!(props.data[key.value] && props.data[key.value].length)) {
return 0; return 0;
} }
const temp: number[] = props.data[key.value].map((i: any) => i.value); const temp: number[] = props.data[key.value].map((i: any) => i.value);
@ -65,7 +71,7 @@ const getTraceId = (i: { [key: string]: (number | string)[] }): string => {
return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : ""; return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
}; };
const datas = computed(() => { const datas = computed(() => {
if (!props.data[key.value].length) { if (!(props.data[key.value] && props.data[key.value].length)) {
return []; return [];
} }
const { sortOrder } = props.config; const { sortOrder } = props.config;
@ -96,6 +102,10 @@ function handleClick(i: string) {
padding: 10px; padding: 10px;
} }
.tools {
justify-content: space-between;
}
.progress-bar { .progress-bar {
font-size: 12px; font-size: 12px;
color: #333; color: #333;
@ -107,14 +117,15 @@ function handleClick(i: string) {
.chart-slow { .chart-slow {
height: 100%; height: 100%;
}
.calls { .calls {
font-size: 12px;
padding: 0 5px; padding: 0 5px;
display: inline-block; display: inline-block;
background-color: #40454e; background-color: #40454e;
color: #eee; color: #eee;
border-radius: 4px; border-radius: 4px;
}
} }
.chart-slow-link { .chart-slow-link {