fix: polish pages and validate data (#46)

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("y", clientHeight + 50)
+      .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 - (item === "CUBEERROR" ? 170 : 380))
-      .attr("y", clientHeight + 70)
+      .attr("x", clientWidth - 110)
+      .attr("y", clientHeight + (item === "CUBEERROR" ? 70 : 20))
       .text(() => {
         const desc = description || {};
         return item === "CUBEERROR" ? desc.unhealthy || "" : desc.healthy || "";