feat: associate metrics with trace widget on dashboards (#174)

src/store/modules/app.ts

@@ -71,7 +71,7 @@ export const appStore = defineStore({
         step: this.duration.step,
       };
     },
-    intervalTime(): string[] {
+    intervalUnix(): number[] {
       let interval = 946080000000;
       switch (this.duration.step) {
         case "MINUTE":
@@ -97,12 +97,17 @@ export const appStore = defineStore({
         this.utcMin * 60000;
       const startUnix: number = this.duration.start.getTime();
       const endUnix: number = this.duration.end.getTime();
-      const timeIntervals: string[] = [];
+      const timeIntervals: number[] = [];
       for (let i = 0; i <= endUnix - startUnix; i += interval) {
-        const temp: string = dateFormatTime(
-          new Date(startUnix + i - utcSpace),
-          this.duration.step
-        );
+        timeIntervals.push(startUnix + i - utcSpace);
+      }
+      return timeIntervals;
+    },
+    intervalTime(): string[] {
+      const arr = this.intervalUnix;
+      const timeIntervals: string[] = [];
+      for (const item of arr) {
+        const temp: string = dateFormatTime(new Date(item), this.duration.step);
         timeIntervals.push(temp);
       }
       return timeIntervals;

src/store/modules/trace.ts

@@ -22,6 +22,7 @@ import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
+import { QueryOrders } from "@/views/dashboard/data";
 
 interface TraceState {
   services: Service[];
@@ -47,7 +48,7 @@ export const traceStore = defineStore({
     conditions: {
       queryDuration: useAppStoreWithOut().durationTime,
       traceState: "ALL",
-      queryOrder: "BY_START_TIME",
+      queryOrder: QueryOrders[0].value,
       paging: { pageNum: 1, pageSize: 20 },
     },
     traceSpanLogs: [],
@@ -71,7 +72,7 @@ export const traceStore = defineStore({
         queryDuration: useAppStoreWithOut().durationTime,
         paging: { pageNum: 1, pageSize: 20 },
         traceState: "ALL",
-        queryOrder: "BY_START_TIME",
+        queryOrder: QueryOrders[0].value,
       };
     },
     async getServices(layer: string) {
@@ -84,6 +85,36 @@ export const traceStore = defineStore({
       this.services = res.data.data.services;
       return res.data;
     },
+    async getService(serviceId: string) {
+      if (!serviceId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryService").params({
+        serviceId,
+      });
+
+      return res.data;
+    },
+    async getInstance(instanceId: string) {
+      if (!instanceId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryInstance").params({
+        instanceId,
+      });
+
+      return res.data;
+    },
+    async getEndpoint(endpointId: string) {
+      if (!endpointId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryEndpoint").params({
+        endpointId,
+      });
+
+      return res.data;
+    },
     async getInstances(id: string) {
       const serviceId = this.selectorStore.currentService
         ? this.selectorStore.currentService.id