feat: add call expressions

src/hooks/useExpressionsProcessor.ts

@@ -23,6 +23,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import type { MetricConfigOpt } from "@/types/dashboard";
 import type { Instance, Endpoint, Service } from "@/types/selector";
 import type { Node, Call } from "@/types/topology";
+import { MetricCatalog } from "@/views/dashboard/data";
 
 export async function useExpressionsQueryProcessor(config: Indexable) {
   function expressionsGraphqlPods() {
@@ -314,18 +315,20 @@ export async function useExpressionsQueryPodsMetrics(
   return expressionParams;
 }
 
-export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: Node[]) {
+export function useQueryTopologyExpressionsProcessor(metrics: string[], source: any[], scope: string) {
   const appStore = useAppStoreWithOut();
 
-  function getNodeExpressions() {
+  function getNodeExpressionQuery() {
     const conditions: { [key: string]: unknown } = {
       duration: appStore.durationTime,
     };
     const variables: string[] = [`$duration: Duration!`];
-    const fragmentList = nodes.map((d: Node, index: number) => {
+    const fragmentList = source.map((d: any, index: number) => {
       const entity = {
-        serviceName: d.name,
+        serviceName: d.sourceObj ? d.sourceObj.name : d.name,
         normal: true,
+        destNormal: true,
+        destServiceName: (d.targetObj && d.targetObj.name) || undefined,
       };
       variables.push(`$entity${index}: Entity!`);
       conditions[`entity${index}`] = entity;
@@ -343,9 +346,9 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: N
 
     return { queryStr, conditions };
   }
-  function handleExpressionValues(resp: any) {
+  function handleExpressionValues(resp: { [key: string]: any }) {
     const obj: any = {};
-    for (let idx = 0; idx < nodes.length; idx++) {
+    for (let idx = 0; idx < source.length; idx++) {
       for (let index = 0; index < metrics.length; index++) {
         const k = "expression" + idx + index;
         if (metrics[index]) {
@@ -354,12 +357,12 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: N
               values: [],
             };
           }
-          obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: nodes[idx].id });
+          obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: source[idx].id });
         }
       }
     }
     return obj;
   }
 
-  return { getNodeExpressions, handleExpressionValues };
+  return { getNodeExpressionQuery, handleExpressionValues };
 }

src/store/modules/topology.ts

@@ -26,6 +26,7 @@ import query from "@/graphql/fetch";
 import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
 import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
 import { ElMessage } from "element-plus";
+import { MetricCatalog } from "@/views/dashboard/data";
 
 interface MetricVal {
   [key: string]: { values: { id: string; value: unknown }[] };
@@ -352,6 +353,7 @@ export const topologyStore = defineStore({
         this.setLinkServerMetrics({});
         return;
       }
+      console.log(this.calls);
       const idsS = this.calls.filter((i: Call) => i.detectPoints.includes("SERVER")).map((b: Call) => b.id);
       if (!idsS.length) {
         return;
@@ -363,6 +365,33 @@ export const topologyStore = defineStore({
         ElMessage.error(res.errors);
       }
     },
+    async getLinkExpressions(expressions: string[], type: string) {
+      if (!expressions.length) {
+        this.setLinkServerMetrics({});
+        return;
+      }
+      const calls = this.calls.filter((i: Call) => i.detectPoints.includes(type));
+      if (!calls.length) {
+        return;
+      }
+      const { getNodeExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
+        expressions,
+        calls,
+        MetricCatalog.SERVICE_RELATION,
+      );
+      const param = getNodeExpressionQuery();
+      const res = await this.getNodeExpressionValue(param);
+      if (res.errors) {
+        ElMessage.error(res.errors);
+        return;
+      }
+      const metrics = handleExpressionValues(res.data);
+      if (type === "SERVER") {
+        this.setLinkServerMetrics(metrics);
+      } else {
+        this.setLinkClientMetrics(metrics);
+      }
+    },
     async queryNodeMetrics(nodeMetrics: string[]) {
       if (!nodeMetrics.length) {
         this.setNodeMetricValue({});
@@ -388,11 +417,12 @@ export const topologyStore = defineStore({
         this.setNodeMetricValue({});
         return;
       }
-      const { getNodeExpressions, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
+      const { getNodeExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
         expressions,
         this.nodes,
+        "",
       );
-      const param = getNodeExpressions();
+      const param = getNodeExpressionQuery();
       const res = await this.getNodeExpressionValue(param);
       if (res.errors) {
         ElMessage.error(res.errors);
@@ -427,6 +457,7 @@ export const topologyStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
+      console.log(res.data.data);
       this.setLinkServerMetrics(res.data.data);
       return res.data;
     },

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

@@ -415,10 +415,16 @@ limitations under the License. -->
       .html(tipHtml);
   }
   function showLinkTip(event: MouseEvent, data: Call) {
-    const linkClientMetrics: string[] = settings.value.linkClientMetrics || [];
+    const linkClientMetrics: string[] =
+      settings.value.metricMode === MetricModes.Expression
+        ? settings.value.linkClientExpressions
+        : settings.value.linkClientMetrics || [];
     const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || [];
     const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || [];
-    const linkServerMetrics: string[] = settings.value.linkServerMetrics || [];
+    const linkServerMetrics: string[] =
+      settings.value.metricMode === MetricModes.Expression
+        ? settings.value.linkServerExpressions
+        : settings.value.linkServerMetrics || [];
     const htmlServer = linkServerMetrics.map((m, index) => {
       const metric = topologyStore.linkServerMetrics[m].values.find(
         (val: { id: string; value: unknown }) => val.id === data.id,

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

@@ -52,7 +52,7 @@ limitations under the License. -->
         :tags="states.linkServerExpressions"
         :vertical="true"
         :text="t('addExpressions')"
-        @change="(param) => changeExpressions({ linkServerExpressions: param })"
+        @change="(param) => changeLinkServerExpressions({ linkServerExpressions: param })"
       />
     </div>
     <Selector
@@ -82,7 +82,7 @@ limitations under the License. -->
           :tags="states.linkClientExpressions"
           :vertical="true"
           :text="t('addExpressions')"
-          @change="(param) => changeExpressions({ linkClientExpressions: param })"
+          @change="(param) => changeLinkClientExpressions({ linkClientExpressions: param })"
         />
       </div>
       <Selector
@@ -222,12 +222,19 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useTopologyStore } from "@/store/modules/topology";
   import { ElMessage } from "element-plus";
-  import { MetricCatalog, ScopeType, MetricConditions } from "../../../data";
+  import {
+    MetricCatalog,
+    ScopeType,
+    MetricConditions,
+    EntityType,
+    LegendOpt,
+    MetricsType,
+    MetricModes,
+  } from "../../../data";
   import type { Option } from "@/types/app";
   import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
   import type { Node } from "@/types/topology";
   import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
-  import { EntityType, LegendOpt, MetricsType, MetricModes } from "../../../data";
   import Metrics from "./Metrics.vue";
 
   /*global defineEmits */
@@ -427,6 +434,30 @@ limitations under the License. -->
     }
     topologyStore.getLinkServerMetrics(states.linkServerMetrics);
   }
+  function changeLinkServerExpressions(params: { [key: string]: string[] }) {
+    if (!isExpression.value) {
+      return;
+    }
+    states.linkServerExpressions = params.linkServerExpressions;
+    updateSettings();
+    if (!states.linkServerExpressions.length) {
+      topologyStore.setLinkServerMetrics({});
+      return;
+    }
+    topologyStore.getLinkExpressions(states.linkServerExpressions, "SERVER");
+  }
+  function changeLinkClientExpressions(params: { [key: string]: string[] }) {
+    if (!isExpression.value) {
+      return;
+    }
+    states.linkClientExpressions = params.linkClientExpressions;
+    updateSettings();
+    if (!states.linkClientExpressions.length) {
+      topologyStore.changeLinkClientMetrics({});
+      return;
+    }
+    topologyStore.getLinkExpressions(states.linkClientExpressions, "CLIENT");
+  }
   function updateLinkClientMetrics(options: Option[] | any) {
     const opt = options.map((d: Option) => d.value);
     const index = states.linkClientMetrics.findIndex((d: any) => !opt.includes(d));