feat: update profile

src/graphql/fragments/profile.ts

@@ -22,6 +22,13 @@ export const ProfileSegment = {
     spans {
       spanId
       parentSpanId
+      segmentId
+      refs {
+        traceId
+        parentSegmentId
+        parentSpanId
+        type
+      }
       serviceCode
       startTime
       endTime
@@ -41,6 +48,7 @@ export const ProfileSegment = {
           value
         }
       }
+      profiled
     }
   }
   `,
@@ -79,23 +87,55 @@ export const GetProfileTaskList = {
   `,
 };
 export const GetProfileTaskSegmentList = {
-  variable: "$taskID: String",
+  variable: "$taskID: ID!",
   query: `
-  segmentList: getProfileTaskSegmentList(taskID: $taskID) {
-    segmentId
+  segmentList: getProfileTaskSegments(taskID: $taskID) {
+    traceId
+    instanceId
+    instanceName
     endpointNames
-    start
     duration
-    traceIds
+    start
+    spans {
+      spanId
+      parentSpanId
+      segmentId
+      refs {
+        traceId
+        parentSegmentId
+        parentSpanId
+        type
+      }
+      serviceCode
+      serviceInstanceName
+      startTime
+      endTime
+      endpointName
+      type
+      peer
+      component
       isError
+      layer
+      tags {
+        key value
+      }
+      logs {
+        time
+        data {
+          key
+          value
+        }
+      }
+      profiled
+    }
   }
   `,
 };
 
 export const GetProfileAnalyze = {
-  variable: "$segmentId: String!, $timeRanges: [ProfileAnalyzeTimeRange!]!",
+  variable: "$queries: [SegmentProfileAnalyzeQuery!]!",
   query: `
-  analyze: getProfileAnalyze(segmentId: $segmentId, timeRanges: $timeRanges) {
+  analyze: getSegmentsProfileAnalyze(queries: $queries) {
     tip
     trees {
       elements {

src/store/modules/profile.ts

@@ -65,6 +65,9 @@ export const profileStore = defineStore({
         ...data,
       };
     },
+    setSegmentSpans(spans: Recordable<SegmentSpan>[]) {
+      this.segmentSpans = spans;
+    },
     setCurrentSpan(span: Recordable<SegmentSpan>) {
       this.currentSpan = span;
     },
@@ -128,7 +131,7 @@ export const profileStore = defineStore({
       }
       const { segmentList } = res.data.data;
 
-      this.segmentList = segmentList;
+      this.segmentList = segmentList || [];
       if (!segmentList.length) {
         this.segmentSpans = [];
         this.analyzeTrees = [];
@@ -137,47 +140,28 @@ export const profileStore = defineStore({
       }
       if (segmentList[0]) {
         this.currentSegment = segmentList[0];
-        this.getSegmentSpans({ segmentId: segmentList[0].segmentId });
+        this.getSegmentSpans(segmentList[0].segmentId);
       } else {
         this.currentSegment = {};
       }
       return res.data;
     },
-    async getSegmentSpans(params: { segmentId: string }) {
-      if (!params.segmentId) {
-        return new Promise((resolve) => resolve({}));
-      }
-      const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
-      if (res.data.errors) {
-        this.segmentSpans = [];
-        return res.data;
-      }
-      const { segment } = res.data.data;
-      if (!segment) {
-        this.segmentSpans = [];
+    async getSegmentSpans() {
       this.analyzeTrees = [];
-        return res.data;
-      }
-      this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
+      this.segmentSpans = this.currentSegment.spans.map((d: SegmentSpan) => {
         return {
           ...d,
-          segmentId: this.currentSegment?.segmentId,
-          traceId: (this.currentSegment.traceIds as any)[0],
+          // traceId: (this.currentSegment.traceIds as any)[0],
         };
       });
-      if (!(segment.spans && segment.spans.length)) {
-        this.analyzeTrees = [];
-        return res.data;
-      }
-      const index = segment.spans.length - 1 || 0;
-      this.currentSpan = segment.spans[index];
-      return res.data;
+      const index = this.currentSegment.spans.length - 1 || 0;
+      this.currentSpan = this.currentSegment.spans[index];
     },
-    async getProfileAnalyze(params: { segmentId: string; timeRanges: Array<{ start: number; end: number }> }) {
-      if (!params.segmentId) {
-        return new Promise((resolve) => resolve({}));
-      }
-      if (!params.timeRanges.length) {
+    async getProfileAnalyze(params: Array<{ segmentId: string; timeRange: { start: number; end: number } }>) {
+      // if (!params.segmentId) {
+      //   return new Promise((resolve) => resolve({}));
+      // }
+      if (!params.length) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("getProfileAnalyze").params(params);

src/types/components.d.ts

@@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

src/types/trace.d.ts

@@ -22,6 +22,7 @@ export interface Trace {
   start: string;
   traceIds: Array<string | any>;
   segmentId: string;
+  spans: Span[];
 }
 
 export interface Span {

src/views/dashboard/related/profile/components/SegmentList.vue

@@ -51,7 +51,6 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useProfileStore } from "@/store/modules/profile";
   import type { Trace } from "@/types/trace";
-  import { ElMessage } from "element-plus";
   import { dateFormat } from "@/utils/dateFormat";
 
   const { t } = useI18n();
@@ -61,11 +60,7 @@ limitations under the License. -->
   async function selectTrace(item: Trace) {
     profileStore.setCurrentSegment(item);
     selectedKey.value = item.segmentId;
-    const res = await profileStore.getSegmentSpans({ segmentId: item.segmentId });
-
-    if (res.errors) {
-      ElMessage.error(res.errors);
-    }
+    profileStore.setSegmentSpans(item.spans);
   }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/related/profile/components/SpanTree.vue

@@ -88,10 +88,13 @@ limitations under the License. -->
   async function analyzeProfile() {
     emits("loading", true);
     updateTimeRange();
-    const res = await profileStore.getProfileAnalyze({
+    const param = timeRange.value.map((t: { start: number; end: number }) => {
+      return {
         segmentId: profileStore.currentSegment.segmentId,
-      timeRanges: timeRange.value,
+        timeRange: t,
+      };
     });
+    const res = await profileStore.getProfileAnalyze(param);
     emits("loading", false);
     if (res.errors) {
       ElMessage.error(res.errors);