feat: add Settings in pod topology

src/store/modules/topology.ts

@@ -110,6 +110,17 @@ export const topologyStore = defineStore({
         }
         return prev;
       }, []);
+      for (const call of calls) {
+        for (const node of nodes) {
+          if (call.source === node.id) {
+            call.sourceObj = node;
+          }
+          if (call.target === node.id) {
+            call.targetObj = node;
+          }
+        }
+        call.value = call.value || 1;
+      }
       this.calls = calls;
       this.nodes = nodes;
     },

src/views/dashboard/related/topology/Index.vue

@@ -13,15 +13,13 @@ 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. -->
 <template>
-  <div :style="`height:${height}px;width:${width}px;`" v-if="isSankey">
+  <PodTopology v-if="isSankey" />
-    <Sankey />
-  </div>
   <Graph v-else />
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import Graph from "./Graph.vue";
+import Graph from "./components/Graph.vue";
-import Sankey from "./Sankey.vue";
+import PodTopology from "./components/PodTopology.vue";
 import { EntityType } from "../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
@@ -29,6 +27,4 @@ const dashboardStore = useDashboardStore();
 const isSankey = ref<boolean>(
   [EntityType[2].value, EntityType[4].value].includes(dashboardStore.entity)
 );
-const height = ref<number>(document.body.clientHeight - 90);
-const width = ref<number>(document.body.clientWidth - 40);
 </script>

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

@@ -53,16 +53,16 @@ import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
-import zoom from "./utils/zoom";
+import zoom from "../utils/zoom";
-import { simulationInit, simulationSkip } from "./utils/simulation";
+import { simulationInit, simulationSkip } from "../utils/simulation";
-import nodeElement from "./utils/nodeElement";
+import nodeElement from "../utils/nodeElement";
-import { linkElement, anchorElement, arrowMarker } from "./utils/linkElement";
+import { linkElement, anchorElement, arrowMarker } from "../utils/linkElement";
-import topoLegend from "./utils/legend";
+import topoLegend from "../utils/legend";
 import { Node, Call } from "@/types/topology";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useTopologyStore } from "@/store/modules/topology";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { EntityType } from "../../data";
+import { EntityType } from "../../../data";
 import router from "@/router";
 import { ElMessage } from "element-plus";
 import Settings from "./Settings.vue";

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

@@ -0,0 +1,84 @@
+<!-- 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. -->
+<template>
+  <div class="tool">
+    <span class="switch-icon ml-5" title="Settings">
+      <Icon @click="setConfig" size="middle" iconName="settings" />
+    </span>
+    <div class="settings" v-show="showSettings">
+      <Settings @update="updateConfig" />
+    </div>
+  </div>
+  <div class="sankey" :style="`height:${height}px;width:${width}px;`">
+    <Sankey />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import Sankey from "./Sankey.vue";
+import Settings from "./Settings.vue";
+
+const height = ref<number>(document.body.clientHeight - 110);
+const width = ref<number>(document.body.clientWidth - 40);
+const showSettings = ref<boolean>(false);
+
+function setConfig() {
+  showSettings.value = !showSettings.value;
+}
+
+function updateConfig(config: any) {
+  console.log(config);
+}
+</script>
+<style lang="scss" scoped>
+.sankey {
+  margin-top: 10px;
+}
+
+.settings {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  width: 360px;
+  height: 700px;
+  background-color: #2b3037;
+  overflow: auto;
+  padding: 0 15px;
+  border-radius: 3px;
+  color: #ccc;
+  transition: all 0.5ms linear;
+  z-index: 99;
+  text-align: left;
+}
+
+.tool {
+  text-align: right;
+  margin-top: 10px;
+  position: relative;
+}
+
+.switch-icon {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.5ms linear;
+  background-color: #252a2f99;
+  color: #ddd;
+  display: inline-block;
+  border-radius: 3px;
+}
+</style>

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

@@ -20,7 +20,7 @@ limitations under the License. -->
 import { ref, computed, onMounted } from "vue";
 import { useTopologyStore } from "@/store/modules/topology";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { EntityType } from "../../data";
+import { EntityType } from "../../../data";
 import { ElMessage } from "element-plus";
 
 const topologyStore = useTopologyStore();

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

@@ -33,17 +33,20 @@ limitations under the License. -->
       placeholder="Select metrics"
       @change="changeLinkServerMetrics"
     />
-    <div class="label">{{ t("linkClientMetrics") }}</div>
+    <span v-show="dashboardStore.entity !== EntityType[2].value">
-    <Selector
+      <div class="label">
-      class="inputs"
+        {{ t("linkClientMetrics") }}
-      v-show="dashboardStore.entity !== EntityType[2].value"
+      </div>
-      :multiple="true"
+      <Selector
-      :value="states.linkClientMetrics"
+        class="inputs"
-      :options="states.linkMetricList"
+        :multiple="true"
-      size="small"
+        :value="states.linkClientMetrics"
-      placeholder="Select metrics"
+        :options="states.linkMetricList"
-      @change="changeLinkClientMetrics"
+        size="small"
-    />
+        placeholder="Select metrics"
+        @change="changeLinkClientMetrics"
+      />
+    </span>
   </div>
   <div class="node-settings">
     <h5 class="title">{{ t("nodeSettings") }}</h5>
@@ -55,22 +58,24 @@ limitations under the License. -->
       size="small"
       class="inputs"
     />
-    <div class="label">{{ t("instanceDashboard") }}</div>
+    <span v-show="isService">
-    <el-input
+      <div class="label">{{ t("instanceDashboard") }}</div>
-      v-model="states.instanceDashboard"
+      <el-input
-      placeholder="Please input a dashboard name for service instances"
+        v-model="states.instanceDashboard"
-      @change="updateSettings"
+        placeholder="Please input a dashboard name for service instances"
-      size="small"
+        @change="updateSettings"
-      class="inputs"
+        size="small"
-    />
+        class="inputs"
-    <div class="label">{{ t("endpointDashboard") }}</div>
+      />
-    <el-input
+      <div class="label">{{ t("endpointDashboard") }}</div>
-      v-model="states.endpointDashboard"
+      <el-input
-      placeholder="Please input a dashboard name for endpoints"
+        v-model="states.endpointDashboard"
-      @change="updateSettings"
+        placeholder="Please input a dashboard name for endpoints"
-      size="small"
+        @change="updateSettings"
-      class="inputs"
+        size="small"
-    />
+        class="inputs"
+      />
+    </span>
     <div class="label">{{ t("nodeMetrics") }}</div>
     <Selector
       class="inputs"
@@ -84,16 +89,16 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useTopologyStore } from "@/store/modules/topology";
 import { ElMessage } from "element-plus";
-import { MetricCatalog } from "../../data";
+import { MetricCatalog } from "../../../data";
 import { Option } from "@/types/app";
 import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
 import { Node, Call } from "@/types/topology";
-import { EntityType } from "../../data";
+import { EntityType } from "../../../data";
 
 /*global defineEmits */
 const emit = defineEmits(["update"]);
@@ -121,6 +126,9 @@ const states = reactive<{
   nodeMetricList: [],
   linkMetricList: [],
 });
+const isService = ref(
+  [EntityType[1].value, EntityType[0].value].includes(dashboardStore.entity)
+);
 
 getMetricList();
 async function getMetricList() {