fix: UI support for uuid-v7 timestamp traceid's in traces (#8286)

### **PR Type** Bug fix, Enhancement ___ ### **Description** - Auto-adjust time range from trace bounds - Sync URL params with trace start/end - Expose method to update SearchBar datetime - Minor cleanup and inline documentation ___ ### Diagram Walkthrough ```mermaid flowchart LR query["Trace query result"] --> check["Has single hit with start/end?"] check -- "yes" --> compute["Compute seconds (floor/ceil)"] compute -- "Index.vue" --> updateSB["SearchBar.updateNewDateTime()"] compute -- "TraceDetails.vue" --> urlUpdate["Update URL from/to"] urlUpdate --> detailsFetch["Fetch trace details with new range"] ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>Index.vue</strong><dd><code>Auto-update time range after single trace query</code>                    </dd></summary> <hr> web/src/plugins/traces/Index.vue <ul><li>Detect single-trace queries with bounds.<br> <li> Update SearchBar datetime via new helper.<br> <li> Add <code>updateNewDateTime</code> wrapper with docs.<br> <li> Remove redundant filter expansion call.</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8286/files#diff-952e26660e4d6aadd292ea2ef7b314e139a4f516d0b3931e20d42d6394700d07">+25/-1</a>    </td> </tr> <tr> <td> <details> <summary><strong>SearchBar.vue</strong><dd><code>Expose API to programmatically set absolute datetime</code>          </dd></summary> <hr> web/src/plugins/traces/SearchBar.vue <ul><li>Add <code>updateNewDateTime</code> method to set absolute range.<br> <li> Ensure datetime ref updates consistently.<br> <li> Minor formatting and comments.<br> <li> Export new method from setup.</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8286/files#diff-43405981dab6359bdfba1ef176d74d3c557fc349f98cf6b1662fd4a021448eb1">+14/-0</a>    </td> </tr> </table></td></tr><tr><td><strong>Bug fix</strong></td><td><table> <tr> <td> <details> <summary><strong>TraceDetails.vue</strong><dd><code>Sync URL and fetch window with trace time bounds</code>                  </dd></summary> <hr> web/src/plugins/traces/TraceDetails.vue <ul><li>Derive start/end from trace meta when available.<br> <li> Normalize to seconds and update URL query.<br> <li> Use updated range for details fetch.<br> <li> Add <code>updateUrlQueryParams</code> helper with docs.</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8286/files#diff-bc7fe6b6339ee2cde6494c0982d4b860847447e79f7431f07d598e0446df06f2">+31/-2</a>    </td> </tr> </table></td></tr></tr></tbody></table> </details> ___
2026-11-05 00:09:35 +00:00 · 2025-09-12 10:33:35 +05:30
parent b72e85e0fe
commit 976fced81a
3 changed files with 93 additions and 3 deletions
@@ -664,6 +664,27 @@ async function getQueryData() {
      })
      .then(async (res) => {
        searchObj.loading = false;
+
+        if (
+          filter &&
+          filter.includes("trace_id") &&
+          res.data.hits.length === 1 &&
+          res.data.hits[0].start_time &&
+          res.data.hits[0].end_time
+        ) {
+          const startTime = Math.floor(res.data.hits[0].start_time / 1000);
+          const endTime = Math.ceil(res.data.hits[0].end_time / 1000);
+          // If the trace is not in the current time range, update the time range
+          if (
+            !(
+              startTime >= queryReq.query.start_time &&
+              endTime <= queryReq.query.end_time
+            )
+          ) {
+            updateNewDateTime(startTime, endTime);
+          }
+        }
+
        const formattedHits = getTracesMetaData(res.data.hits);
        if (res.data.from > 0) {
          searchObj.data.queryResults.from = res.data.from;
@@ -730,6 +751,24 @@ async function getQueryData() {
  }
 }

+/**
+ *
+ * @param startTime - start time in microseconds
+ * @param endTime - end time in microseconds
+ */
+const updateNewDateTime = (startTime: number, endTime: number) => {
+  searchBarRef.value?.updateNewDateTime({
+    startTime: startTime,
+    endTime: endTime,
+  });
+  $q.notify({
+    type: "positive",
+    message:
+      "The selected time range did not include this trace. The time range has been updated to match the trace’s timestamp.",
+    timeout: 5000,
+  });
+};
+
 const getTracesMetaData = (traces) => {
  if (!traces.length) return [];

@@ -1158,7 +1197,6 @@ const searchData = () => {
  }

  runQueryFn();
-  indexListRef.value.filterExpandedFieldValues();

  if (config.isCloud == "true") {
    segment.track("Button Click", {
@@ -317,6 +317,7 @@ export default defineComponent({
          dateTimeRef.value.setDateType("absolute");
        }
      }
+
      searchObj.data.datetime = {
        startTime: value.startTime,
        endTime: value.endTime,
@@ -407,6 +408,18 @@ export default defineComponent({
      emit("shareLink");
    };

+    /**
+     * Update the date time in the date time component
+     * @param value - object containing start time and end time
+     * @param value.startTime - start time in microseconds
+     * @param value.endTime - end time in microseconds
+     */
+    const updateNewDateTime = (value: object) => {
+      if (!value.startTime || !value.endTime) return;
+      dateTimeRef.value?.setAbsoluteTime(value.startTime, value.endTime);
+      dateTimeRef.value?.setDateType("absolute");
+    };
+
    return {
      t,
      router,
@@ -425,6 +438,7 @@ export default defineComponent({
      dateTimeRef,
      resetFilters,
      shareLink,
+      updateNewDateTime,
    };
  },
  computed: {
@@ -706,11 +706,36 @@ export default defineComponent({
              return;
            }
            searchObj.data.traceDetails.selectedTrace = trace;
+
+            let startTime = Number(router.currentRoute.value.query.from);
+            let endTime = Number(router.currentRoute.value.query.to);
+            if (
+              res.data.hits.length === 1 &&
+              res.data.hits[0].start_time &&
+              res.data.hits[0].end_time
+            ) {
+              startTime = Math.floor(res.data.hits[0].start_time / 1000);
+              endTime = Math.ceil(res.data.hits[0].end_time / 1000);
+
+              // If the trace is not in the current time range, update the time range
+              if (
+                !(
+                  startTime >= Number(router.currentRoute.value.query.from) &&
+                  endTime <= Number(router.currentRoute.value.query.to)
+                )
+              ) {
+                updateUrlQueryParams({
+                  from: startTime,
+                  to: endTime,
+                });
+              }
+            }
+
            getTraceDetails({
              stream: streamName,
              trace_id: trace.trace_id,
-              from: Number(router.currentRoute.value.query.from),
-              to: Number(router.currentRoute.value.query.to),
+              from: startTime,
+              to: endTime,
            });
          })
          .catch(() => {
@@ -726,6 +751,19 @@ export default defineComponent({
      }
    };

+    /**
+     * Update the query parameters in the URL
+     * @param newParams - object containing new parameters
+     */
+    const updateUrlQueryParams = (newParams: any) => {
+      router.replace({
+        query: {
+          ...router.currentRoute.value.query, // keep existing params
+          ...newParams, // overwrite with new ones
+        },
+      });
+    };
+
    const getDefaultRequest = () => {
      return {
        query: {