update graph

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",

src/locales/lang/zh.ts

@@ -112,6 +112,7 @@ const msg = {
   noRoot: "请设置根仪表板，为",
   showGroup: "显示分组",
   noWidget: "请添加组件",
+  rename: "重命名",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/modules/dashboard.ts

@@ -143,19 +143,13 @@ export const dashboardStore = defineStore({
         metrics: [""],
       };
       if (type === "Topology") {
-        newItem.w = 4;
+        newItem.h = 32;
-        newItem.h = 6;
         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) => {

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;

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;
 }

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
+  svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
-    .select(chart.value)
-    .append("svg")
-    .attr("class", "topo-svg")
-    .attr("height", height.value)
-    .attr("width", width.value);
   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 {

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