feat: set metrics for instance and endpoint topology

src/components/Graph.vue

@@ -21,11 +21,13 @@ import type { PropType } from "vue";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
 
-/*global Nullable, defineProps*/
+/*global Nullable, defineProps, defineEmits*/
+const emits = defineEmits(["select"]);
 const chartRef = ref<Nullable<HTMLDivElement>>(null);
-const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
+const { setOptions, resize, getInstance } = useECharts(
+  chartRef as Ref<HTMLDivElement>
+);
 const props = defineProps({
-  clickEvent: { type: Function as PropType<(param: unknown) => void> },
   height: { type: String, default: "100%" },
   width: { type: String, default: "100%" },
   option: {
@@ -35,6 +37,10 @@ const props = defineProps({
 });
 
 onMounted(() => {
+  const instance = getInstance();
+  instance.on("click", (params: any) => {
+    emits("select", params);
+  });
   setOptions(props.option);
   addResizeListener(unref(chartRef), resize);
 });

src/store/modules/topology.ts

@@ -129,6 +129,7 @@ export const topologyStore = defineStore({
     },
     setLinkServerMetrics(m: { id: string; value: unknown }[]) {
       this.linkServerMetrics = m;
+      console.log(m);
     },
     setLinkClientMetrics(m: { id: string; value: unknown }[]) {
       this.linkClientMetrics = m;
@@ -294,7 +295,6 @@ export const topologyStore = defineStore({
       }
     },
     async getEndpointTopology(endpointIds: string[]) {
-      // const endpointId = useSelectorStore().currentPod.id;
       const duration = useAppStoreWithOut().durationTime;
       const variables = ["$duration: Duration!"];
       const fragment = endpointIds.map((id: string, index: number) => {

src/types/topology.d.ts

@@ -30,4 +30,5 @@ export interface Node {
   type: string;
   isReal: boolean;
   layer?: string;
+  serviceName?: string;
 }

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

@@ -14,15 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="tool">
+    <span v-show="dashboardStore.entity === EntityType[2].value">
       <span class="label">{{ t("currentDepth") }}</span>
       <Selector
         class="inputs"
         :value="depth"
         :options="depthList"
-      placeholder="Select metrics"
+        placeholder="Select a option"
         @change="changeDepth"
-      :style="`background: '#2b3037';`"
       />
+    </span>
     <span class="switch-icon ml-5" title="Settings">
       <Icon @click="setConfig" size="middle" iconName="settings" />
     </span>
@@ -55,7 +56,7 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const topologyStore = useTopologyStore();
 const loading = ref<boolean>(false);
-const height = ref<number>(document.body.clientHeight - 110);
+const height = ref<number>(document.body.clientHeight - 150);
 const width = ref<number>(document.body.clientWidth - 40);
 const showSettings = ref<boolean>(false);
 const depth = ref<string>("2");

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

@@ -14,11 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <Graph :option="option" />
+  <Graph :option="option" @select="clickChart" />
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useTopologyStore } from "@/store/modules/topology";
+import { Node, Call } from "@/types/topology";
 
 const topologyStore = useTopologyStore();
 const option = computed(() => getOption());
@@ -63,14 +64,59 @@ function getOption() {
         position: "bottom",
         formatter: (param: { data: any; dataType: string }) => {
           if (param.dataType === "edge") {
-            return `${param.data.sourceObj.serviceName} -> ${param.data.targetObj.serviceName}`;
+            return linkTooltip(param.data);
           }
-          return param.data.serviceName;
+          return nodeTooltip(param.data);
         },
       },
     },
   };
 }
+function linkTooltip(data: Call) {
+  const clientMetrics: string[] = Object.keys(topologyStore.linkClientMetrics);
+  const serverMetrics: string[] = Object.keys(topologyStore.linkServerMetrics);
+  const htmlServer = serverMetrics.map((m) => {
+    const metric = topologyStore.linkServerMetrics[m].values.filter(
+      (val: { id: string; value: unknown }) => val.id === data.id
+    )[0];
+    if (metric) {
+      return ` <div><span>${m}: </span>${metric.value}</div>`;
+    }
+  });
+  const htmlClient = clientMetrics.map((m) => {
+    const metric = topologyStore.linkClientMetrics[m].values.filter(
+      (val: { id: string; value: unknown }) => val.id === data.id
+    )[0];
+    if (metric) {
+      return ` <div><span>${m}: </span>${metric.value}</div>`;
+    }
+  });
+  const html = [
+    `<div>${data.sourceObj.serviceName} -> ${data.targetObj.serviceName}</div>`,
+    ...htmlServer,
+    ...htmlClient,
+  ].join(" ");
+
+  return html;
+}
+
+function nodeTooltip(data: Node) {
+  const nodeMetrics: string[] = Object.keys(topologyStore.nodeMetrics);
+  const html = nodeMetrics.map((m) => {
+    const metric =
+      topologyStore.nodeMetrics[m].values.filter(
+        (val: { id: string; value: unknown }) => val.id === data.id
+      )[0] || {};
+    return ` <div><span>${m}: </span>${metric.value}</div>`;
+  });
+  return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(
+    " "
+  );
+}
+
+function clickChart(param: any) {
+  console.log(param);
+}
 </script>
 <style lang="scss" scoped>
 .sankey {

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

@@ -144,6 +144,8 @@ async function getMetricList() {
   const e =
     dashboardStore.entity === EntityType[1].value
       ? EntityType[0].value
+      : dashboardStore.entity === EntityType[4].value
+      ? EntityType[3].value
       : dashboardStore.entity;
   states.linkMetricList = (json.data.metrics || []).filter(
     (d: { catalog: string }) =>