Tracing List UI - Filtered Search

What does this MR do and why?

• Add filtered search to tracing list
• Sync filters with URL query param
• Add support for custom (gt,lt) filters operators to url-sync
• (sneaked in this small change:) Replace prop with custom event for TracingEmptyState

Note that filters are not currently sent to the API call. Will do this next, as this MR is already big enough

Closes gitlab-org/opstrace/opstrace#2298 (closed) Part of gitlab-org/opstrace/opstrace#2254 (closed)

Screenshots or screen recordings

How to set up and validate locally

• Enable FF Feature.enable(:observability_tracing)

As running the whole stack is not trivial, apply this diff to just use mock data:

diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 4a05161b4eed..ebd328274728 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,4 +1,5 @@
 import axios from '~/lib/utils/axios_utils';
+import mockData from './mock_traces.json';
 
 function enableTraces() {
   // TODO remove mocks https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2271
@@ -18,12 +19,14 @@ function isTracingEnabled() {
     }, 1000);
   });
 }
-
 async function fetchTraces(tracingUrl) {
-  const { data } = await axios.get(tracingUrl, { withCredentials: true });
-  if (!Array.isArray(data.traces)) {
-    throw new Error('traces are missing/invalid in the response.'); // eslint-disable-line @gitlab/require-i18n-strings
-  }
+  // const { data } = await axios.get(tracingUrl, { withCredentials: true });
+  // if (!Array.isArray(data.traces)) {
+  //   throw new Error('traces are missing/invalid in the response.'); // eslint-disable-line @gitlab/require-i18n-strings
+  // }
+
+  const data = mockData;
+
   return data.traces.map((t) => {
     // aggregating duration on the client for now, but expecting to be coming from the backend
     const duration = t.spans.reduce((acc, cur) => acc + cur.duration_nano, 0);
diff --git a/app/assets/javascripts/observability/components/observability_container.vue b/app/assets/javascripts/observability/components/observability_container.vue
index 4306f531ab5e..2ded41463b87 100644
--- a/app/assets/javascripts/observability/components/observability_container.vue
+++ b/app/assets/javascripts/observability/components/observability_container.vue
@@ -33,12 +33,12 @@ export default {
 
     // TODO Remove once backend work done - just for testing
     // https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2270
-    // setTimeout(() => {
-    //   this.messageHandler({
-    //     data: { type: 'AUTH_COMPLETION', status: 'success' },
-    //     origin: new URL(this.oauthUrl).origin,
-    //   });
-    // }, 2000);
+    setTimeout(() => {
+      this.messageHandler({
+        data: { type: 'AUTH_COMPLETION', status: 'success' },
+        origin: new URL(this.oauthUrl).origin,
+      });
+    }, 2000);
   },
   destroyed() {
     window.removeEventListener('message', this.messageHandler);

• Go to https://local.gitlab.com:3443/flightjs/Flight/-/tracing
• Play around with the filters
• Copy n paste the URL and verify that the filters are correctly populated e.g. https://local.gitlab.com:3443/flightjs/Flight/-/tracing?gt%5Bduration%5D[]=100&lt%5Bduration%5D[]=1000

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.