From 8404da29a3a0172b1b460c969be6fd9961ef0aa9 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sun, 20 Mar 2022 16:11:38 +0800
Subject: [PATCH] update graph

---
 src/locales/lang/en.ts                        |  1 +
 src/locales/lang/zh.ts                        |  1 +
 src/store/modules/dashboard.ts                | 10 ++------
 src/views/dashboard/List.vue                  | 14 ++---------
 src/views/dashboard/controls/Topology.vue     |  3 ++-
 .../related/topology/components/Graph.vue     | 24 +++++++++++--------
 .../related/topology/utils/legend.ts          |  4 ++--
 7 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 2c56f8b4..56a8dc20 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -112,6 +112,7 @@ const msg = {
   showGroup: "Show Group",
   noRoot: "Please set a root dashboard for",
   noWidget: "Please add widgets.",
+  rename: "Rename",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 36c4a195..3cec3c16 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -112,6 +112,7 @@ const msg = {
   noRoot: "请设置根仪表板，为",
   showGroup: "显示分组",
   noWidget: "请添加组件",
+  rename: "重命名",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 64727a09..fba942a1 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -143,19 +143,13 @@ export const dashboardStore = defineStore({
         metrics: [""],
       };
       if (type === "Topology") {
-        newItem.w = 4;
-        newItem.h = 6;
+        newItem.h = 32;
         newItem.graph = {
-          fontColor: "white",
-          backgroundColor: "green",
-          iconTheme: true,
-          content: "Topology",
-          fontSize: 18,
           showDepth: true,
         };
       }
       if (type === "Trace" || type === "Profile" || type === "Log") {
-        newItem.h = 24;
+        newItem.h = 32;
       }
       if (this.layout[idx].children) {
         const items = children.map((d: LayoutConfig) => {
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 02d4edcb..87608495 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -60,7 +60,7 @@ limitations under the License. -->
               {{ t("view") }}
             </el-button>
             <el-button size="small" @click="handleEdit(scope.row)">
-              {{ t("edit") }}
+              {{ t("rename") }}
             </el-button>
             <el-popconfirm
               title="Are you sure to delete this?"
@@ -133,17 +133,7 @@ const loading = ref<boolean>(false);
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 const multipleSelection = ref<DashboardItem[]>([]);
 const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
-//  # - os-linux
-//  # - k8s
-//  # - general(agent-installed)
-//  # - faas
-//  # - mesh
-//  # - mesh-cp
-//  # - mesh-dp
-//  # - database
-//  # - cache
-//  # - browser
-//  # - skywalking
+
 appStore.setPageTitle("Dashboard List");
 const handleSelectionChange = (val: DashboardItem[]) => {
   multipleSelection.value = val;
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index 12d0c5fb..d34ee819 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -38,6 +38,7 @@ import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Topology from "../related/topology/Index.vue";
+
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -56,9 +57,9 @@ function removeTopo() {
 </script>
 <style lang="scss" scoped>
 .topology {
-  height: 100%;
   background-color: #333840;
   width: 100%;
+  height: 100%;
   font-size: 12px;
   position: relative;
 }
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 113e9219..35946a0c 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -119,19 +119,23 @@ onMounted(async () => {
   if (resp && resp.errors) {
     ElMessage.error(resp.errors);
   }
+  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+    height: 0,
+    width: 0,
+  };
+  height.value = dom.height;
+  width.value = dom.width;
   window.addEventListener("resize", resize);
-  svg.value = d3
-    .select(chart.value)
-    .append("svg")
-    .attr("class", "topo-svg")
-    .attr("height", height.value)
-    .attr("width", width.value);
+  svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
   await init();
   update();
 });
 async function init() {
   tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
-  graph.value = svg.value.append("g").attr("class", "topo-svg-graph");
+  graph.value = svg.value
+    .append("g")
+    .attr("class", "topo-svg-graph")
+    .attr("transform", `translate(0, -100)`);
   graph.value.call(tip.value);
   simulation.value = simulationInit(
     d3,
@@ -464,14 +468,14 @@ onBeforeUnmount(() => {
 </script>
 <style lang="scss">
 .topo-svg {
-  display: block;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 5px);
+  cursor: move;
 }
 
 .micro-topo-chart {
   position: relative;
-  height: calc(100% - 40px);
+  height: 100%;
   overflow: auto;
 
   .setting {
diff --git a/src/views/dashboard/related/topology/utils/legend.ts b/src/views/dashboard/related/topology/utils/legend.ts
index a5b0c957..b3550af9 100644
--- a/src/views/dashboard/related/topology/utils/legend.ts
+++ b/src/views/dashboard/related/topology/utils/legend.ts
@@ -28,14 +28,14 @@ export default function topoLegend(
       .attr("width", 30)
       .attr("height", 30)
       .attr("x", clientWidth - (item === "CUBEERROR" ? 340 : 440))
-      .attr("y", clientHeight - 50)
+      .attr("y", clientHeight + 50)
       .attr("xlink:href", () =>
         item === "CUBEERROR" ? icons.CUBEERROR : icons.CUBE
       );
     graph
       .append("text")
       .attr("x", clientWidth - (item === "CUBEERROR" ? 310 : 410))
-      .attr("y", clientHeight - 30)
+      .attr("y", clientHeight + 70)
       .text(() => {
         const l = config || [];
         const str = l