update legend

src/views/dashboard/configuration/Text.vue

@@ -91,12 +91,13 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const originConfig = dashboardStore.selectedGrid;
+const graph = originConfig.graph || {};
 const url = ref(originConfig.graph.url || "");
-const backgroundColor = ref(originConfig.graph.backgroundColor || "green");
+const backgroundColor = ref(graph.backgroundColor || "green");
-const fontColor = ref(originConfig.graph.fontColor || "white");
+const fontColor = ref(graph.fontColor || "white");
-const content = ref<string>(originConfig.graph.content || "");
+const content = ref<string>(graph.content || "");
-const fontSize = ref<number>(originConfig.graph.fontSize || 12);
+const fontSize = ref<number>(graph.fontSize || 12);
-const textAlign = ref(originConfig.graph.textAlign || "left");
+const textAlign = ref(graph.textAlign || "left");
 const Colors = [
   {
     label: "Green",

src/views/dashboard/configuration/Topology.vue

@@ -48,9 +48,9 @@ import { Option } from "@/types/app";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph || {};
-const showDepth = ref<boolean>(selectedGrid.graph.showDepth);
+const showDepth = ref<boolean>(graph.showDepth);
-const depth = ref<number>(selectedGrid.graph.depth || 2);
+const depth = ref<number>(graph.depth || 2);
 
 function applyConfig() {
   dashboardStore.setConfigs(dashboardStore.selectedGrid);

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

@@ -24,7 +24,7 @@ limitations under the License. -->
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
     <div class="tool">
-      <span v-show="config.graph.showDepth">
+      <span v-show="graphConfig.showDepth">
         <span class="label">{{ t("currentDepth") }}</span>
         <Selector
           class="inputs"
@@ -69,7 +69,14 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { ref, onMounted, onBeforeUnmount, reactive, watch } from "vue";
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  reactive,
+  watch,
+  computed,
+} from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
@@ -111,7 +118,7 @@ const loading = ref<boolean>(false);
 const simulation = ref<any>(null);
 const svg = ref<Nullable<any>>(null);
 const chart = ref<Nullable<HTMLDivElement>>(null);
-const tip = ref<any>(null);
+const tip = ref<Nullable<HTMLDivElement>>(null);
 const graph = ref<any>(null);
 const node = ref<any>(null);
 const link = ref<any>(null);
@@ -124,7 +131,8 @@ const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
 const items = ref<
   { id: string; title: string; func: any; dashboard?: string }[]
 >([]);
-const depth = ref<number>(props.config.graph.depth || 2);
+const graphConfig = computed(() => props.config.graph || {});
+const depth = ref<number>(graphConfig.value.depth || 2);
 
 onMounted(async () => {
   loading.value = true;

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

@@ -27,15 +27,15 @@ export default function topoLegend(
       .append("image")
       .attr("width", 30)
       .attr("height", 30)
-      .attr("x", clientWidth - (item === "CUBEERROR" ? 200 : 410))
+      .attr("x", clientWidth - 200)
-      .attr("y", clientHeight + 50)
+      .attr("y", clientHeight + (item === "CUBEERROR" ? 50 : 0))
       .attr("xlink:href", () =>
         item === "CUBEERROR" ? icons.CUBEERROR : icons.CUBE
       );
     graph
       .append("text")
-      .attr("x", clientWidth - (item === "CUBEERROR" ? 170 : 380))
+      .attr("x", clientWidth - 160)
-      .attr("y", clientHeight + 70)
+      .attr("y", clientHeight + (item === "CUBEERROR" ? 70 : 20))
       .text(() => {
         const desc = description || {};
         return item === "CUBEERROR" ? desc.unhealthy || "" : desc.healthy || "";