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

fix: polish (#390)

Browse Source
This commit is contained in:
Fine0830 2024-04-16 17:52:51 +08:00 committed by GitHub
parent 7f6e4d09c0
commit 731d652a7d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Graph.vue
View File

@ -235,12 +235,10 @@ limitations under the License. -->
.no-data {
font-size: $font-size-smaller;
height: 100%;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
color: #666;
align-items: center;
justify-content: center;
display: flex;
color: var(--text-color-placeholder);
}
.chart {

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

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="chart-table">
<div class="chart-table" v-if="dataKeys.length">
<div class="row header flex-h">
<div
v-for="key in dataKeys[0]"
@ -41,6 +41,7 @@ limitations under the License. -->
</div>
</div>
</div>
<div class="no-data" v-else>No Data</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
@ -131,4 +132,13 @@ limitations under the License. -->
width: 50%;
}
}
.no-data {
font-size: $font-size-smaller;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
color: var(--text-color-placeholder);
}
</style>

6
src/views/dashboard/related/topology/pod/InstanceMap.vue
View File

@ -125,11 +125,13 @@ limitations under the License. -->
const html = exprssions.map((m: string, index: number) => {
const metric =
topologyStore.hierarchyInstanceNodeMetrics[data.layer || ""][m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id,
(val: { id: string; value: string }) => val.id === data.id,
) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
});
const tipHtml = [
`<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,

6
src/views/dashboard/related/topology/service/HierarchyMap.vue
View File

@ -133,10 +133,12 @@ limitations under the License. -->
const html = exprssions.map((m: string, index: number) => {
const metric =
topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id,
(val: { id: string; value: string }) => val.id === data.id,
) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
});
const tipHtml = [
`<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,

6
src/views/dashboard/related/topology/service/ServiceMap.vue
View File

@ -314,7 +314,7 @@ limitations under the License. -->
const html = nodeMetrics.map((m, index) => {
const metric =
(topologyStore.nodeMetricValue[m] &&
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id)) ||
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: string }) => val.id === data.id)) ||
{};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
@ -344,7 +344,7 @@ limitations under the License. -->
);
if (metric) {
const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
}
@ -355,7 +355,7 @@ limitations under the License. -->
(val: { id: string; value: unknown }) => val.id === data.id,
);
if (metric) {
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
}