remove svg legend

src/views/dashboard/related/topology/components/Graph.vue

@@ -98,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";
@@ -139,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 });
@@ -189,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();
@@ -585,18 +575,18 @@ watch(
     color: #ccc;
 
     div {
-      margin-bottom: 5px;
+      margin-bottom: 8px;
     }
 
     img {
       width: 32px;
+      float: left;
     }
 
     span {
       display: inline-block;
       height: 32px;
       line-height: 32px;
-      float: right;
       margin-left: 5px;
     }
   }

src/views/dashboard/related/topology/utils/legend.ts

@@ -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");
-  }
-}