Fix tracing list sorting order

What does this MR do and why?

• Sorting by date or service name is broken because the key name was wrong. Fixed that.
• Added default sorting order by timestamp
• Updated mocks (just used for dev/tests)

Screenshots or screen recordings

How to set up and validate locally

As running the whole tracing stack is not trivial, you can apply this patch to just use mock data:

diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 251c165e7dd7..92479a593ba6 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
@@ -20,10 +21,11 @@ function isTracingEnabled() {
 }
 
 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);

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.