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 2faeeceb Fix: refresh nodes/calls metrics as global duration changes
for Topology widget, change date picker theme (#374)
2faeeceb is described below
commit 2faeecebcc0b694d8447762d68cd390f4cfafbd9
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Mon Mar 4 11:48:55 2024 +0800
Fix: refresh nodes/calls metrics as global duration changes for Topology
widget, change date picker theme (#374)
---
src/components/DateCalendar.vue | 6 +++---
src/components/TimePicker.vue | 6 +++---
.../dashboard/related/topology/service/ServiceMap.vue | 15 ++-------------
3 files changed, 8 insertions(+), 19 deletions(-)
diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index 822ac88d..0ea3e13b 100755
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -451,7 +451,7 @@ limitations under the License. -->
}
.calendar + .calendar {
- border-left: solid 1px #eaeaea;
+ border-left: solid 1px var(--sw-border-color-light);
margin-left: 5px;
padding-left: 5px;
}
@@ -464,7 +464,7 @@ limitations under the License. -->
}
.calendar-head a {
- color: #666;
+ color: var(--sw-topology-color);
cursor: pointer;
display: inline-block;
text-align: center;
@@ -568,7 +568,7 @@ limitations under the License. -->
.calendar-hour {
display: inline-block;
- border: 1px solid #e6e5e5;
+ border: 1px solid var(--sw-border-color-light);
color: #9e9e9e;
}
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index b7d71b3e..f3ff4bc4 100755
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -447,7 +447,7 @@ limitations under the License. -->
width: 100px;
height: 100%;
padding: 5px;
- border-right: solid 1px #eaeaea;
+ border-right: solid 1px var(--sw-border-color-light);
}
&__shortcut {
@@ -457,7 +457,7 @@ limitations under the License. -->
background-color: transparent;
line-height: 34px;
font-size: $font-size-smaller;
- color: #666;
+ color: var(--sw-topology-color);
text-align: left;
outline: none;
cursor: pointer;
@@ -532,6 +532,6 @@ limitations under the License. -->
}
.datepicker__buttons .datepicker__button-cancel {
- background: #666;
+ background: var(--sw-topology-color);
}
</style>
diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue
b/src/views/dashboard/related/topology/service/ServiceMap.vue
index 111f2380..e6bb226e 100644
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -13,13 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
- <div
- ref="chart"
- class="micro-topo-chart"
- v-loading="loading"
- element-loading-background="rgba(0, 0, 0, 0)"
- :style="`height: ${height}px`"
- >
+ <div ref="chart" class="micro-topo-chart" v-loading="loading"
:style="`height: ${height}px`">
<svg class="svg-topology" :width="width - 100" :height="height"
@click="svgEvent">
<g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
<g
@@ -224,6 +218,7 @@ limitations under the License. -->
svg.value.call(zoom(d3, graph.value, diff.value));
}
async function freshNodes() {
+ loading.value = true;
topologyStore.setNode(null);
topologyStore.setLink(null);
const resp = await getTopology();
@@ -637,12 +632,6 @@ limitations under the License. -->
if (!(oldVal[0] && newVal[0])) {
return;
}
- if (oldVal[0].id === newVal[0].id && !oldVal[1]) {
- return;
- }
- if (oldVal[0].id === newVal[0].id && oldVal[1].id === newVal[1].id) {
- return;
- }
freshNodes();
hierarchyRelated.value = false;
},
