fix: update services topology

src/graphql/query/topology.ts

@@ -19,9 +19,11 @@ import {
   EndpointTopology,
   ServiceTopology,
   GlobalTopology,
+  ServicesTopology,
 } from "../fragments/topology";
 
 export const getGlobalTopology = `query queryData(${GlobalTopology.variable}) {${GlobalTopology.query}}`;
 export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
 export const getServiceTopology = `query queryData(${ServiceTopology.variable}) {${ServiceTopology.query}}`;
 export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`;
+export const getServicesTopology = `query queryData(${ServicesTopology.variable}) {${ServicesTopology.query}}`;

src/store/modules/topology.ts

@@ -16,6 +16,7 @@
  */
 import { defineStore } from "pinia";
 import { store } from "@/store";
+import { Service } from "@/types/selector";
 import { Node, Call } from "@/types/topology";
 import graphql from "@/graphql";
 import { useSelectorStore } from "@/store/modules/selectors";
@@ -23,14 +24,17 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import { AxiosResponse } from "axios";
 import query from "@/graphql/fetch";
 
+interface MetricVal {
+  [key: string]: { values: { id: string; value: unknown }[] };
+}
 interface TopologyState {
   node: Node | null;
   call: Call | null;
   calls: Call[];
   nodes: Node[];
-  nodeMetrics: { id: string; value: unknown }[];
-  linkServerMetrics: { id: string; value: unknown }[];
-  linkClientMetrics: { id: string; value: unknown }[];
+  nodeMetrics: MetricVal;
+  linkServerMetrics: MetricVal;
+  linkClientMetrics: MetricVal;
 }
 
 export const topologyStore = defineStore({
@@ -40,9 +44,9 @@ export const topologyStore = defineStore({
     nodes: [],
     node: null,
     call: null,
-    nodeMetrics: [],
-    linkServerMetrics: [],
-    linkClientMetrics: [],
+    nodeMetrics: {},
+    linkServerMetrics: {},
+    linkClientMetrics: {},
   }),
   actions: {
     setNode(node: Node) {
@@ -55,6 +59,15 @@ export const topologyStore = defineStore({
       this.nodes = data.nodes;
       this.calls = data.calls;
     },
+    setNodeMetrics(m: { id: string; value: unknown }[]) {
+      this.nodeMetrics = m;
+    },
+    setLinkServerMetrics(m: { id: string; value: unknown }[]) {
+      this.linkServerMetrics = m;
+    },
+    setLinkClientMetrics(m: { id: string; value: unknown }[]) {
+      this.linkClientMetrics = m;
+    },
     async getServiceTopology() {
       const serviceId = useSelectorStore().currentService.id;
       const duration = useAppStoreWithOut().durationTime;
@@ -69,6 +82,20 @@ export const topologyStore = defineStore({
       }
       return res.data;
     },
+    async getServicesTopology() {
+      const serviceIds = useSelectorStore().services.map((d: Service) => d.id);
+      const duration = useAppStoreWithOut().durationTime;
+      const res: AxiosResponse = await graphql
+        .query("getServicesTopology")
+        .params({
+          serviceIds,
+          duration,
+        });
+      if (!res.data.errors) {
+        this.setTopology(res.data.data.topology);
+      }
+      return res.data;
+    },
     async getGlobalTopology() {
       const duration = useAppStoreWithOut().durationTime;
       const res: AxiosResponse = await graphql
@@ -120,7 +147,7 @@ export const topologyStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.nodeMetrics = res.data.data;
+      this.setNodeMetrics(res.data.data);
       return res.data;
     },
     async getCallServerMetrics(param: {
@@ -132,7 +159,7 @@ export const topologyStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.linkServerMetrics = res.data.data;
+      this.setLinkServerMetrics(res.data.data);
       return res.data;
     },
     async getCallClientMetrics(param: {
@@ -144,7 +171,7 @@ export const topologyStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.linkClientMetrics = res.data.data;
+      this.setLinkClientMetrics(res.data.data);
       return res.data;
     },
   },

src/views/dashboard/controls/Widget.vue

@@ -93,6 +93,10 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
+    if (dashboardStore.entity === EntityType[1].value) {
+      queryMetrics();
+    }
+
     async function queryMetrics() {
       const params = await useQueryProcessor(props.data);
 

src/views/dashboard/panel/Tool.vue

@@ -179,14 +179,14 @@ async function getServices() {
   if (!dashboardStore.layerId) {
     return;
   }
-  if (dashboardStore.entity === EntityType[1].value) {
-    return;
-  }
   const json = await selectorStore.fetchServices(dashboardStore.layerId);
   if (json.errors) {
     ElMessage.error(json.errors);
     return;
   }
+  if (dashboardStore.entity === EntityType[1].value) {
+    return;
+  }
   selectorStore.setCurrentService(
     selectorStore.services.length ? selectorStore.services[0] : null
   );

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

@@ -80,12 +80,7 @@ const legend = ref<any>(null);
 const showSetting = ref<boolean>(false);
 const settings = ref<any>({});
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
-const items = [
-  { title: "Endpoint", func: handleGoEndpoint },
-  { title: "Instance", func: handleGoInstance },
-  { title: "Dashboard", func: handleGoDashboard },
-  { title: "Alarm", func: handleGoAlarm },
-];
+const items = ref([{ id: "alarm", title: "Alarm", func: handleGoAlarm }]);
 
 onMounted(async () => {
   loading.value = true;
@@ -177,7 +172,11 @@ function handleLinkClick(event: any, d: Call) {
   event.stopPropagation();
   topologyStore.setNode(null);
   topologyStore.setLink(d);
-  const path = `/dashboard/${dashboardStore.layerId}/${dashboardStore.entity}Relation/${d.source.id}/${d.target.id}/${settings.value.linkDashboard}`;
+  const e =
+    dashboardStore.entity === EntityType[1].value
+      ? EntityType[0].value
+      : dashboardStore.entity;
+  const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${d.source.id}/${d.target.id}/${settings.value.linkDashboard}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
 }
@@ -228,8 +227,10 @@ function update() {
     {
       handleLinkClick: handleLinkClick,
       tipHtml: (data: Call) => {
-        const linkClientMetrics: string[] = settings.value.linkClientMetrics;
-        const linkServerMetrics: string[] = settings.value.linkServerMetrics;
+        const linkClientMetrics: string[] =
+          settings.value.linkClientMetrics || [];
+        const linkServerMetrics: string[] =
+          settings.value.linkServerMetrics || [];
         const htmlServer = linkServerMetrics.map((m) => {
           const metric = topologyStore.linkServerMetrics[m].values.filter(
             (val: { id: string; value: unknown }) => val.id === data.id
@@ -315,7 +316,7 @@ async function getTopology() {
       resp = await topologyStore.getServiceTopology();
       break;
     case EntityType[1].value:
-      resp = await topologyStore.getGlobalTopology();
+      resp = await topologyStore.getServicesTopology();
       break;
     case EntityType[2].value:
       resp = await topologyStore.getEndpointTopology();
@@ -335,7 +336,29 @@ function resize() {
   svg.value.attr("height", height.value).attr("width", width.value);
 }
 function updateSettings(config: any) {
+  items.value = [{ id: "alarm", title: "Alarm", func: handleGoAlarm }];
   settings.value = config;
+  if (config.nodeDashboard) {
+    items.value.push({
+      id: "dashboard",
+      title: "Dashboard",
+      func: handleGoDashboard,
+    });
+  }
+  if (config.instanceDashboard) {
+    items.value.push({
+      id: "instance",
+      title: "Instance",
+      func: handleGoInstance,
+    });
+  }
+  if (config.endpointDashboard) {
+    items.value.push({
+      id: "endpoint",
+      title: "Endpoint",
+      func: handleGoEndpoint,
+    });
+  }
 }
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resize);

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

@@ -36,6 +36,7 @@ limitations under the License. -->
     <div class="label">{{ t("linkClientMetrics") }}</div>
     <Selector
       class="inputs"
+      v-show="dashboardStore.entity !== EntityType[2].value"
       :multiple="true"
       :value="states.linkClientMetrics"
       :options="states.linkMetricList"
@@ -92,6 +93,7 @@ import { MetricCatalog } from "../../data";
 import { Option } from "@/types/app";
 import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
 import { Node, Call } from "@/types/topology";
+import { EntityType } from "../../data";
 
 /*global defineEmits */
 const emit = defineEmits(["update"]);
@@ -131,9 +133,13 @@ async function getMetricList() {
     (d: { catalog: string }) =>
       dashboardStore.entity === (MetricCatalog as any)[d.catalog]
   );
+  const e =
+    dashboardStore.entity === EntityType[1].value
+      ? EntityType[0].value
+      : dashboardStore.entity;
   states.linkMetricList = (json.data.metrics || []).filter(
     (d: { catalog: string }) =>
-      dashboardStore.entity + "Relation" === (MetricCatalog as any)[d.catalog]
+      e + "Relation" === (MetricCatalog as any)[d.catalog]
   );
 }
 function updateSettings() {
@@ -150,6 +156,10 @@ function updateSettings() {
 async function changeLinkServerMetrics(options: Option[]) {
   states.linkServerMetrics = options.map((d: Option) => d.value);
   updateSettings();
+  if (!states.linkServerMetrics.length) {
+    topologyStore.setLinkServerMetrics({});
+    return;
+  }
   const idsS = topologyStore.calls
     .filter((i: Call) => i.detectPoints.includes("SERVER"))
     .map((b: Call) => b.id);
@@ -163,6 +173,10 @@ async function changeLinkServerMetrics(options: Option[]) {
 async function changeLinkClientMetrics(options: Option[]) {
   states.linkClientMetrics = options.map((d: Option) => d.value);
   updateSettings();
+  if (!states.linkClientMetrics.length) {
+    topologyStore.setLinkClientMetrics({});
+    return;
+  }
   const idsC = topologyStore.calls
     .filter((i: Call) => i.detectPoints.includes("CLIENT"))
     .map((b: Call) => b.id);
@@ -176,7 +190,10 @@ async function changeLinkClientMetrics(options: Option[]) {
 async function changeNodeMetrics(options: Option[]) {
   states.nodeMetrics = options.map((d: Option) => d.value);
   updateSettings();
-
+  if (!states.nodeMetrics.length) {
+    topologyStore.setNodeMetrics({});
+    return;
+  }
   const ids = topologyStore.nodes.map((d: Node) => d.id);
   const param = await useQueryTopologyMetrics(states.nodeMetrics, ids);
   const res = await topologyStore.getNodeMetrics(param);