feat: support trace v1 in trace single page (#549)

src/store/modules/trace.ts

@@ -177,10 +177,10 @@ export const traceStore = defineStore({
       return response;
     },
     async getTraces() {
+      this.loading = true;
       if (this.hasQueryTracesV2Support) {
         return this.fetchV2Traces();
       }
-      this.loading = true;
       const response = await graphql.query("queryTraces").params({ condition: this.conditions });
       if (response.errors) {
         this.loading = false;
@@ -193,14 +193,15 @@ export const traceStore = defineStore({
         this.loading = false;
         return response;
       }
-      this.getTraceSpans({ traceId: response.data.data.traces[0].traceIds[0] });
       this.traceList = response.data.data.traces.map((d: Trace) => {
         d.traceIds = d.traceIds.map((id: string) => {
           return { value: id, label: id };
         });
         return d;
       });
-      this.setCurrentTrace(response.data.data.traces[0] || {});
+      const currentTrace = this.traceList[0] || {};
+      this.setCurrentTrace(currentTrace);
+      await this.getTraceSpans({ traceId: currentTrace.traceIds?.[0]?.value || "" });
       return response;
     },
     async getTraceSpans(params: { traceId: string }) {
@@ -301,6 +302,27 @@ export const traceStore = defineStore({
       this.setCurrentTrace(trace || {});
       return response;
     },
+
+    async getTraceByTraceId(traceId: string) {
+      this.loading = true;
+      this.setTraceCondition({
+        traceId: traceId,
+      });
+      await this.getHasQueryTracesV2Support();
+      if (this.hasQueryTracesV2Support) {
+        await this.fetchV2Traces();
+        this.loading = false;
+        return;
+      }
+      this.setCurrentTrace({
+        traceIds: [{ value: traceId, label: traceId }],
+        traceId: traceId,
+        endpointNames: [],
+        spans: [],
+      });
+      await this.getTraceSpans({ traceId });
+      this.loading = false;
+    },
   },
 });
 

src/views/dashboard/Trace.vue

@@ -14,10 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div style="padding: 20px">
-    <TraceContent v-if="traceStore.currentTrace" :trace="traceStore.currentTrace" />
-    <div style="text-align: center; padding: 20px" v-if="!traceStore.loading && !traceStore.currentTrace"
-      >No trace found</div
-    >
+    <div v-if="traceStore.traceSpans.length">
+      <TraceContent
+        v-if="traceStore.hasQueryTracesV2Support && traceStore.currentTrace"
+        :trace="traceStore.currentTrace"
+      />
+      <SpanList v-if="!traceStore.hasQueryTracesV2Support" />
+    </div>
+    <div style="text-align: center; padding: 20px" v-else> No trace found </div>
   </div>
 </template>
 
@@ -26,17 +30,16 @@ limitations under the License. -->
   import { computed, onMounted, provide } from "vue";
   import { useTraceStore } from "@/store/modules/trace";
   import TraceContent from "@/views/dashboard/related/trace/components/TraceQuery/TraceContent.vue";
+  import SpanList from "@/views/dashboard/related/trace/components/TraceList/SpanList.vue";
 
   const route = useRoute();
   const traceStore = useTraceStore();
   const traceId = computed(() => route.params.traceId as string);
   provide("options", {});
   onMounted(() => {
-    if (traceId.value) {
-      traceStore.setTraceCondition({
-        traceId: traceId.value,
-      });
-      traceStore.fetchV2Traces();
+    if (!traceId.value) {
+      return;
     }
+    traceStore.getTraceByTraceId(traceId.value);
   });
 </script>

src/views/dashboard/related/trace/components/TraceList/SpanList.vue

@@ -67,6 +67,8 @@ limitations under the License. -->
         :traceId="traceStore.currentTrace?.traceIds?.[0]?.value"
         :showBtnDetail="false"
         :headerType="WidgetType.Trace"
+        :minTimestamp="NaN"
+        :maxTimestamp="NaN"
       />
     </div>
   </div>