This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 731d652a fix: polish (#390)
731d652a is described below
commit 731d652a7d6250d613b2ea1668171ade4f6afed9
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Tue Apr 16 17:52:51 2024 +0800
fix: polish (#390)
---
src/components/Graph.vue | 10 ++++------
src/views/dashboard/graphs/Table.vue | 12 +++++++++++-
src/views/dashboard/related/topology/pod/InstanceMap.vue | 6 ++++--
.../dashboard/related/topology/service/HierarchyMap.vue | 6 ++++--
src/views/dashboard/related/topology/service/ServiceMap.vue | 6 +++---
5 files changed, 26 insertions(+), 14 deletions(-)
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 174d6de4..280bac4f 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -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 {
diff --git a/src/views/dashboard/graphs/Table.vue
b/src/views/dashboard/graphs/Table.vue
index baaf2190..df563ac5 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -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>
diff --git a/src/views/dashboard/related/topology/pod/InstanceMap.vue
b/src/views/dashboard/related/topology/pod/InstanceMap.vue
index 9e389d86..a192745b 100644
--- a/src/views/dashboard/related/topology/pod/InstanceMap.vue
+++ b/src/views/dashboard/related/topology/pod/InstanceMap.vue
@@ -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>`,
diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue
b/src/views/dashboard/related/topology/service/HierarchyMap.vue
index 6eb8c33d..0032832d 100644
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -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>`,
diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue
b/src/views/dashboard/related/topology/service/ServiceMap.vue
index 72547435..eba245d6 100644
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -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>`;
}
