Merge branch 'drosse/logs-details-drawer-open' into 'master'

Automatically open drawer when a log is shared

Closes gitlab-org/opstrace/opstrace#2816

See merge request gitlab-org/gitlab!152728



Merged-by: Illya Klymov <iklymov@gitlab.com>
Approved-by: Tomas Vik <tvik@gitlab.com>
Approved-by: Illya Klymov <iklymov@gitlab.com>
Co-authored-by: Daniele Rossetti <drossetti@gitlab.com>

ee/app/assets/javascripts/logs/list/logs_list.vue

@@ -4,6 +4,7 @@ import { s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import { contentTop } from '~/lib/utils/common_utils';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
+import { queryToObject } from '~/lib/utils/url_utility';
 import LogsTable from './logs_table.vue';
 import LogsDrawer from './logs_drawer.vue';
 import LogsFilteredSearch from './filter_bar/logs_filtered_search.vue';
@@ -12,6 +13,8 @@ import { queryToFilterObj, filterObjToQuery, selectedLogQueryObject } from './fi
 const LIST_V_PADDING = 100;
 const PAGE_SIZE = 100;
 
+const OPEN_DRAWER_QUERY_PARAM = 'drawerOpen';
+
 export default {
   components: {
     GlLoadingIcon,
@@ -32,13 +35,14 @@ export default {
     },
   },
   data() {
+    const { [OPEN_DRAWER_QUERY_PARAM]: shouldOpenDrawer } = queryToObject(window.location.search);
     return {
       loadingLogs: false,
       loadingMetadata: false,
       logs: [],
       metadata: {},
       filters: queryToFilterObj(window.location.search),
-      isDrawerOpen: false,
+      shouldOpenDrawer: shouldOpenDrawer === 'true',
       selectedLog: null,
       nextPageToken: null,
     };
@@ -49,9 +53,12 @@ export default {
     },
     query() {
       if (this.selectedLog) {
-        return selectedLogQueryObject(this.selectedLog);
+        return {
+          ...selectedLogQueryObject(this.selectedLog),
+          [OPEN_DRAWER_QUERY_PARAM]: true,
+        };
       }
-      return filterObjToQuery(this.filters);
+      return { ...filterObjToQuery(this.filters), [OPEN_DRAWER_QUERY_PARAM]: undefined };
     },
   },
   created() {
@@ -71,6 +78,13 @@ export default {
         if (nextPageToken) {
           this.nextPageToken = nextPageToken;
         }
+        if (this.shouldOpenDrawer) {
+          this.shouldOpenDrawer = false;
+          const [selectedFingerprint] = this.filters.attributes?.fingerprint || [];
+          if (selectedFingerprint?.value) {
+            this.selectLog(selectedFingerprint?.value);
+          }
+        }
       } catch {
         createAlert({
           message: s__('ObservabilityLogs|Failed to load logs.'),
@@ -97,10 +111,13 @@ export default {
       if (this.selectedLog?.fingerprint === fingerprint) {
         this.closeDrawer();
       } else {
-        const log = this.logs.find((s) => s.fingerprint === fingerprint);
-        this.selectedLog = log;
+        this.selectLog(fingerprint);
       }
     },
+    selectLog(fingerprint) {
+      const log = this.logs.find((s) => s.fingerprint === fingerprint);
+      this.selectedLog = log;
+    },
     closeDrawer() {
       this.selectedLog = null;
     },

ee/spec/frontend/logs/list/logs_list_spec.js

@@ -185,6 +185,7 @@ describe('LogsList', () => {
         traceFlags: null,
         traceId: [selectedLog.trace_id],
         timestamp: selectedLog.timestamp,
+        drawerOpen: true,
       });
     });
 
@@ -207,8 +208,45 @@ describe('LogsList', () => {
 
       expect(findUrlSync().props('query')).toMatchObject({
         fingerprint: ['fingerprint'],
+        drawerOpen: undefined,
       });
     });
+
+    it('automatically opens the drawer if drawerOpen is true', async () => {
+      setWindowLocation(`?fingerprint[]=${mockLogs[2].fingerprint}&drawerOpen=true`);
+
+      await mountComponent();
+
+      expect(isDrawerOpen()).toBe(true);
+      expect(getDrawerSelectedLog()).toEqual(mockLogs[2]);
+    });
+
+    it('does not automatically open the drawer if drawerOpen is not true', async () => {
+      setWindowLocation(`?fingerprint[]=${mockLogs[2].fingerprint}&drawerOpen=false`);
+
+      await mountComponent();
+
+      expect(isDrawerOpen()).toBe(false);
+      expect(getDrawerSelectedLog()).toBe(null);
+    });
+
+    it('does not automatically open the drawer if fingerprint is not set', async () => {
+      setWindowLocation(`?drawerOpen=true`);
+
+      await mountComponent();
+
+      expect(isDrawerOpen()).toBe(false);
+      expect(getDrawerSelectedLog()).toBe(null);
+    });
+
+    it('does not automatically open the drawer if fingerprint does not exist', async () => {
+      setWindowLocation(`?fingerprint[]=foo&drawerOpen=true`);
+
+      await mountComponent();
+
+      expect(isDrawerOpen()).toBe(false);
+      expect(getDrawerSelectedLog()).toBe(null);
+    });
   });
 
   describe('infinite scrolling / pagination', () => {