You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by qi...@apache.org on 2022/04/01 09:42:52 UTC
[skywalking-booster-ui] branch main updated: refactor: update legend for topology (#51)
This is an automated email from the ASF dual-hosted git repository.
qiuxiafan 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 f62d0bd refactor: update legend for topology (#51)
f62d0bd is described below
commit f62d0bd22b7ff7d2c94bcdafe6fc3046e0b8fe31
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Fri Apr 1 17:42:48 2022 +0800
refactor: update legend for topology (#51)
---
src/views/dashboard/graphs/Bar.vue | 1 +
.../related/topology/components/Graph.vue | 48 +++++++++++++++++-----
.../related/topology/components/Sankey.vue | 1 +
.../dashboard/related/topology/utils/legend.ts | 46 ---------------------
4 files changed, 40 insertions(+), 56 deletions(-)
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 8a7012a..aed49ef 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -140,6 +140,7 @@ function getOption() {
zlevel: 1000,
z: 60,
backgroundColor: "rgb(50,50,50)",
+ confine: true,
textStyle: {
fontSize: 13,
color: "#ccc",
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index aed1c8a..c68a194 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -20,6 +20,20 @@ limitations under the License. -->
element-loading-background="rgba(0, 0, 0, 0)"
:style="`height: ${height}px`"
>
+ <div class="legend">
+ <div>
+ <img :src="icons.CUBE" />
+ <span>
+ {{ settings.description ? settings.description.healthy || "" : "" }}
+ </span>
+ </div>
+ <div>
+ <img :src="icons.CUBEERROR" />
+ <span>
+ {{ settings.description ? settings.description.unhealthy || "" : "" }}
+ </span>
+ </div>
+ </div>
<div class="setting" v-if="showSetting">
<Settings @update="updateSettings" @updateNodes="freshNodes" />
</div>
@@ -84,7 +98,6 @@ import zoom from "../utils/zoom";
import { simulationInit, simulationSkip } from "../utils/simulation";
import nodeElement from "../utils/nodeElement";
import { linkElement, anchorElement, arrowMarker } from "../utils/linkElement";
-import topoLegend from "../utils/legend";
import { Node, Call } from "@/types/topology";
import { useSelectorStore } from "@/store/modules/selectors";
import { useTopologyStore } from "@/store/modules/topology";
@@ -99,6 +112,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
import getDashboard from "@/hooks/useDashboardsSession";
import { MetricConfigOpt } from "@/types/dashboard";
import { aggregation } from "@/hooks/useProcessor";
+import icons from "@/assets/img/icons";
/*global Nullable, defineProps */
const props = defineProps({
@@ -124,7 +138,6 @@ const node = ref<any>(null);
const link = ref<any>(null);
const anchor = ref<any>(null);
const arrow = ref<any>(null);
-const legend = ref<any>(null);
const showSetting = ref<boolean>(false);
const settings = ref<any>(props.config);
const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
@@ -174,14 +187,6 @@ async function init() {
anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
arrow.value = graph.value.append("g").selectAll(".topo-line-arrow");
svg.value.call(zoom(d3, graph.value));
- // legend
- legend.value = graph.value.append("g").attr("class", "topo-legend");
- topoLegend(
- legend.value,
- height.value,
- width.value,
- settings.value.description
- );
svg.value.on("click", (event: any) => {
event.stopPropagation();
event.preventDefault();
@@ -563,6 +568,29 @@ watch(
overflow: auto;
margin-top: 30px;
+ .legend {
+ position: absolute;
+ top: 10px;
+ left: 15px;
+ color: #ccc;
+
+ div {
+ margin-bottom: 8px;
+ }
+
+ img {
+ width: 32px;
+ float: left;
+ }
+
+ span {
+ display: inline-block;
+ height: 32px;
+ line-height: 32px;
+ margin-left: 5px;
+ }
+ }
+
.setting {
position: absolute;
top: 80px;
diff --git a/src/views/dashboard/related/topology/components/Sankey.vue b/src/views/dashboard/related/topology/components/Sankey.vue
index e92257c..afa86d1 100644
--- a/src/views/dashboard/related/topology/components/Sankey.vue
+++ b/src/views/dashboard/related/topology/components/Sankey.vue
@@ -38,6 +38,7 @@ function getOption() {
return {
tooltip: {
trigger: "item",
+ confine: true,
},
series: {
type: "sankey",
diff --git a/src/views/dashboard/related/topology/utils/legend.ts b/src/views/dashboard/related/topology/utils/legend.ts
deleted file mode 100644
index 929f879..0000000
--- a/src/views/dashboard/related/topology/utils/legend.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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.
- */
-import icons from "@/assets/img/icons";
-
-export default function topoLegend(
- graph: any,
- clientHeight: number,
- clientWidth: number,
- description: any
-) {
- for (const item of ["CUBE", "CUBEERROR"]) {
- graph
- .append("image")
- .attr("width", 30)
- .attr("height", 30)
- .attr("x", clientWidth - 140)
- .attr("y", clientHeight + (item === "CUBEERROR" ? 50 : 0))
- .attr("xlink:href", () =>
- item === "CUBEERROR" ? icons.CUBEERROR : icons.CUBE
- );
- graph
- .append("text")
- .attr("x", clientWidth - 110)
- .attr("y", clientHeight + (item === "CUBEERROR" ? 70 : 20))
- .text(() => {
- const desc = description || {};
- return item === "CUBEERROR" ? desc.unhealthy || "" : desc.healthy || "";
- })
- .style("fill", "#efeff1")
- .style("font-size", "11px");
- }
-}