Add latest changes from gitlab-org/gitlab@master

9 files changed, 412 insertions, 135 deletions

diff --git a/spec/frontend/code_navigation/components/app_spec.js b/spec/frontend/code_navigation/components/app_spec.js
index cfdc0dcc6cc..d5693cc4173 100644
--- a/spec/frontend/code_navigation/components/app_spec.js
+++ b/spec/frontend/code_navigation/components/app_spec.js
@@ -16,6 +16,7 @@ function factory(initialState = {}) {
     state: {
       ...createState(),
       ...initialState,
+      definitionPathPrefix: 'https://test.com/blob/master',
     },
     actions: {
       fetchData,
diff --git a/spec/frontend/code_navigation/components/popover_spec.js b/spec/frontend/code_navigation/components/popover_spec.js
index ad05504a224..df3bbc7c1c6 100644
--- a/spec/frontend/code_navigation/components/popover_spec.js
+++ b/spec/frontend/code_navigation/components/popover_spec.js
@@ -1,6 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import Popover from '~/code_navigation/components/popover.vue';
 
+const DEFINITION_PATH_PREFIX = 'http:/';
+
 const MOCK_CODE_DATA = Object.freeze({
   hover: [
     {
@@ -8,7 +10,7 @@ const MOCK_CODE_DATA = Object.freeze({
       value: 'console.log',
     },
   ],
-  definition_url: 'http://test.com',
+  definition_path: 'test.com',
 });
 
 const MOCK_DOCS_DATA = Object.freeze({
@@ -18,13 +20,13 @@ const MOCK_DOCS_DATA = Object.freeze({
       value: 'console.log',
     },
   ],
-  definition_url: 'http://test.com',
+  definition_path: 'test.com',
 });
 
 let wrapper;
 
-function factory(position, data) {
-  wrapper = shallowMount(Popover, { propsData: { position, data } });
+function factory(position, data, definitionPathPrefix) {
+  wrapper = shallowMount(Popover, { propsData: { position, data, definitionPathPrefix } });
 }
 
 describe('Code navigation popover component', () => {
@@ -33,14 +35,14 @@ describe('Code navigation popover component', () => {
   });
 
   it('renders popover', () => {
-    factory({ x: 0, y: 0, height: 0 }, MOCK_CODE_DATA);
+    factory({ x: 0, y: 0, height: 0 }, MOCK_CODE_DATA, DEFINITION_PATH_PREFIX);
 
     expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('code output', () => {
     it('renders code output', () => {
-      factory({ x: 0, y: 0, height: 0 }, MOCK_CODE_DATA);
+      factory({ x: 0, y: 0, height: 0 }, MOCK_CODE_DATA, DEFINITION_PATH_PREFIX);
 
       expect(wrapper.find({ ref: 'code-output' }).exists()).toBe(true);
       expect(wrapper.find({ ref: 'doc-output' }).exists()).toBe(false);
@@ -49,7 +51,7 @@ describe('Code navigation popover component', () => {
 
   describe('documentation output', () => {
     it('renders code output', () => {
-      factory({ x: 0, y: 0, height: 0 }, MOCK_DOCS_DATA);
+      factory({ x: 0, y: 0, height: 0 }, MOCK_DOCS_DATA, DEFINITION_PATH_PREFIX);
 
       expect(wrapper.find({ ref: 'code-output' }).exists()).toBe(false);
       expect(wrapper.find({ ref: 'doc-output' }).exists()).toBe(true);
diff --git a/spec/frontend/code_navigation/store/actions_spec.js b/spec/frontend/code_navigation/store/actions_spec.js
index 9c44480ca67..f58dc283ada 100644
--- a/spec/frontend/code_navigation/store/actions_spec.js
+++ b/spec/frontend/code_navigation/store/actions_spec.js
@@ -27,12 +27,10 @@ describe('Code navigation actions', () => {
 
   describe('fetchData', () => {
     let mock;
-    const state = {
-      projectPath: 'gitlab-org/gitlab',
-      commitId: '123',
-      blobPath: 'index',
-    };
-    const apiUrl = '/api/1/projects/gitlab-org%2Fgitlab/commits/123/lsif/info';
+
+    const codeNavUrl =
+      'gitlab-org/gitlab-shell/-/jobs/1114/artifacts/raw/lsif/cmd/check/main.go.json';
+    const state = { codeNavUrl };
 
     beforeEach(() => {
       window.gon = { api_version: '1' };
@@ -45,20 +43,18 @@ describe('Code navigation actions', () => {
 
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(apiUrl).replyOnce(200, {
-          index: [
-            {
-              start_line: 0,
-              start_char: 0,
-              hover: { value: '123' },
-            },
-            {
-              start_line: 1,
-              start_char: 0,
-              hover: null,
-            },
-          ],
-        });
+        mock.onGet(codeNavUrl).replyOnce(200, [
+          {
+            start_line: 0,
+            start_char: 0,
+            hover: { value: '123' },
+          },
+          {
+            start_line: 1,
+            start_char: 0,
+            hover: null,
+          },
+        ]);
       });
 
       it('commits REQUEST_DATA_SUCCESS with normalized data', done => {
@@ -106,7 +102,7 @@ describe('Code navigation actions', () => {
 
     describe('error', () => {
       beforeEach(() => {
-        mock.onGet(apiUrl).replyOnce(500);
+        mock.onGet(codeNavUrl).replyOnce(500);
       });
 
       it('dispatches requestDataError', done => {
diff --git a/spec/frontend/code_navigation/store/mutations_spec.js b/spec/frontend/code_navigation/store/mutations_spec.js
index 117a2ed2f14..305386f4d0b 100644
--- a/spec/frontend/code_navigation/store/mutations_spec.js
+++ b/spec/frontend/code_navigation/store/mutations_spec.js
@@ -11,14 +11,12 @@ describe('Code navigation mutations', () => {
   describe('SET_INITIAL_DATA', () => {
     it('sets initial data', () => {
       mutations.SET_INITIAL_DATA(state, {
-        projectPath: 'test',
-        commitId: '123',
-        blobPath: 'index.js',
+        codeNavUrl: 'https://test.com/builds/1005',
+        definitionPathPrefix: 'https://test.com/blob/master',
       });
 
-      expect(state.projectPath).toBe('test');
-      expect(state.commitId).toBe('123');
-      expect(state.blobPath).toBe('index.js');
+      expect(state.codeNavUrl).toBe('https://test.com/builds/1005');
+      expect(state.definitionPathPrefix).toBe('https://test.com/blob/master');
     });
   });
 
diff --git a/spec/frontend/ide/components/branches/search_list_spec.js b/spec/frontend/ide/components/branches/search_list_spec.js
index fe142d70698..826d51b24f1 100644
--- a/spec/frontend/ide/components/branches/search_list_spec.js
+++ b/spec/frontend/ide/components/branches/search_list_spec.js
@@ -9,6 +9,8 @@ import { branches } from '../../mock_data';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
+jest.mock('lodash/debounce', () => jest.fn);
+
 describe('IDE branches search list', () => {
   let wrapper;
   const fetchBranchesMock = jest.fn();
diff --git a/spec/frontend/logs/components/environment_logs_spec.js b/spec/frontend/logs/components/environment_logs_spec.js
index 49642153c69..4da987725a1 100644
--- a/spec/frontend/logs/components/environment_logs_spec.js
+++ b/spec/frontend/logs/components/environment_logs_spec.js
@@ -1,7 +1,5 @@
-import Vue from 'vue';
-import { GlSprintf, GlIcon, GlDropdown, GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui';
+import { GlSprintf, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import EnvironmentLogs from '~/logs/components/environment_logs.vue';
 
 import { createStore } from '~/logs/stores';
@@ -13,7 +11,6 @@ import {
   mockLogsResult,
   mockTrace,
   mockPodName,
-  mockSearch,
   mockEnvironmentsEndpoint,
   mockDocumentationPath,
 } from '../mock_data';
@@ -29,7 +26,6 @@ jest.mock('lodash/throttle', () =>
 );
 
 describe('EnvironmentLogs', () => {
-  let EnvironmentLogsComponent;
   let store;
   let dispatch;
   let wrapper;
@@ -44,13 +40,9 @@ describe('EnvironmentLogs', () => {
   const updateControlBtnsMock = jest.fn();
 
   const findEnvironmentsDropdown = () => wrapper.find('.js-environments-dropdown');
-  const findPodsDropdown = () => wrapper.find('.js-pods-dropdown');
-  const findPodsDropdownItems = () =>
-    findPodsDropdown()
-      .findAll(GlDropdownItem)
-      .filter(itm => !itm.attributes('disabled'));
-  const findSearchBar = () => wrapper.find('.js-logs-search');
-  const findTimeRangePicker = () => wrapper.find({ ref: 'dateTimePicker' });
+
+  const findSimpleFilters = () => wrapper.find({ ref: 'log-simple-filters' });
+  const findAdvancedFilters = () => wrapper.find({ ref: 'log-advanced-filters' });
   const findInfoAlert = () => wrapper.find('.js-elasticsearch-alert');
   const findLogControlButtons = () => wrapper.find({ name: 'log-control-buttons-stub' });
 
@@ -79,7 +71,7 @@ describe('EnvironmentLogs', () => {
   };
 
   const initWrapper = () => {
-    wrapper = shallowMount(EnvironmentLogsComponent, {
+    wrapper = shallowMount(EnvironmentLogs, {
       propsData,
       store,
       stubs: {
@@ -111,7 +103,6 @@ describe('EnvironmentLogs', () => {
   beforeEach(() => {
     store = createStore();
     state = store.state.environmentLogs;
-    EnvironmentLogsComponent = Vue.extend(EnvironmentLogs);
 
     jest.spyOn(store, 'dispatch').mockResolvedValue();
 
@@ -132,17 +123,10 @@ describe('EnvironmentLogs', () => {
     expect(wrapper.isVueInstance()).toBe(true);
     expect(wrapper.isEmpty()).toBe(false);
 
-    // top bar
     expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true);
-    expect(findPodsDropdown().is(GlDropdown)).toBe(true);
+    expect(findSimpleFilters().exists()).toBe(true);
     expect(findLogControlButtons().exists()).toBe(true);
 
-    expect(findSearchBar().exists()).toBe(true);
-    expect(findSearchBar().is(GlSearchBoxByClick)).toBe(true);
-    expect(findTimeRangePicker().exists()).toBe(true);
-    expect(findTimeRangePicker().is(DateTimePicker)).toBe(true);
-
-    // log trace
     expect(findInfiniteScroll().exists()).toBe(true);
     expect(findLogTrace().exists()).toBe(true);
   });
@@ -181,20 +165,6 @@ describe('EnvironmentLogs', () => {
       expect(findEnvironmentsDropdown().findAll(GlDropdownItem).length).toBe(0);
     });
 
-    it('displays a disabled pods dropdown', () => {
-      expect(findPodsDropdown().attributes('disabled')).toBe('true');
-      expect(findPodsDropdownItems()).toHaveLength(0);
-    });
-
-    it('displays a disabled search bar', () => {
-      expect(findSearchBar().exists()).toBe(true);
-      expect(findSearchBar().attributes('disabled')).toBe('true');
-    });
-
-    it('displays a disabled time window dropdown', () => {
-      expect(findTimeRangePicker().attributes('disabled')).toBe('true');
-    });
-
     it('does not update buttons state', () => {
       expect(updateControlBtnsMock).not.toHaveBeenCalled();
     });
@@ -237,17 +207,14 @@ describe('EnvironmentLogs', () => {
       initWrapper();
     });
 
-    it('displays a disabled time window dropdown', () => {
-      expect(findTimeRangePicker().attributes('disabled')).toBe('true');
-    });
-
-    it('displays a disabled search bar', () => {
-      expect(findSearchBar().attributes('disabled')).toBe('true');
-    });
-
     it('displays an alert to upgrade to ES', () => {
       expect(findInfoAlert().exists()).toBe(true);
     });
+
+    it('displays simple filters for kubernetes logs API', () => {
+      expect(findSimpleFilters().exists()).toBe(true);
+      expect(findAdvancedFilters().exists()).toBe(false);
+    });
   });
 
   describe('state with data', () => {
@@ -271,21 +238,6 @@ describe('EnvironmentLogs', () => {
       updateControlBtnsMock.mockReset();
     });
 
-    it('displays an enabled search bar', () => {
-      expect(findSearchBar().attributes('disabled')).toBeFalsy();
-
-      // input a query and click `search`
-      findSearchBar().vm.$emit('input', mockSearch);
-      findSearchBar().vm.$emit('submit');
-
-      expect(dispatch).toHaveBeenCalledWith(`${module}/setInitData`, expect.any(Object));
-      expect(dispatch).toHaveBeenCalledWith(`${module}/setSearch`, mockSearch);
-    });
-
-    it('displays an enabled time window dropdown', () => {
-      expect(findTimeRangePicker().attributes('disabled')).toBeFalsy();
-    });
-
     it('does not display an alert to upgrade to ES', () => {
       expect(findInfoAlert().exists()).toBe(false);
     });
@@ -306,24 +258,16 @@ describe('EnvironmentLogs', () => {
         const item = items.at(i);
 
         if (item.text() !== mockEnvName) {
-          expect(item.find(GlIcon).classes()).toContain('invisible');
+          expect(item.find(GlIcon).classes('invisible')).toBe(true);
         } else {
-          // selected
-          expect(item.find(GlIcon).classes()).not.toContain('invisible');
+          expect(item.find(GlIcon).classes('invisible')).toBe(false);
         }
       });
     });
 
-    it('populates pods dropdown', () => {
-      const items = findPodsDropdownItems();
-
-      expect(findPodsDropdown().props('text')).toBe(mockPodName);
-      expect(items.length).toBe(mockPods.length + 1);
-      expect(items.at(0).text()).toBe('All pods');
-      mockPods.forEach((pod, i) => {
-        const item = items.at(i + 1);
-        expect(item.text()).toBe(pod);
-      });
+    it('displays advanced filters for elasticsearch logs API', () => {
+      expect(findSimpleFilters().exists()).toBe(false);
+      expect(findAdvancedFilters().exists()).toBe(true);
     });
 
     it('shows infinite scroll with height and no content', () => {
@@ -331,19 +275,6 @@ describe('EnvironmentLogs', () => {
       expect(getInfiniteScrollAttr('fetched-items')).toBe(mockTrace.length);
     });
 
-    it('dropdown has one pod selected', () => {
-      const items = findPodsDropdownItems();
-      mockPods.forEach((pod, i) => {
-        const item = items.at(i);
-        if (item.text() !== mockPodName) {
-          expect(item.find(GlIcon).classes()).toContain('invisible');
-        } else {
-          // selected
-          expect(item.find(GlIcon).classes()).not.toContain('invisible');
-        }
-      });
-    });
-
     it('populates logs trace', () => {
       const trace = findLogTrace();
       expect(trace.text().split('\n').length).toBe(mockTrace.length);
@@ -371,17 +302,6 @@ describe('EnvironmentLogs', () => {
         );
       });
 
-      it('pod name, trace is refreshed', () => {
-        const items = findPodsDropdownItems();
-        const index = 2; // any pod
-
-        expect(dispatch).not.toHaveBeenCalledWith(`${module}/showPodLogs`, expect.anything());
-
-        items.at(index + 1).vm.$emit('click');
-
-        expect(dispatch).toHaveBeenCalledWith(`${module}/showPodLogs`, mockPods[index]);
-      });
-
       it('refresh button, trace is refreshed', () => {
         expect(dispatch).not.toHaveBeenCalledWith(`${module}/showPodLogs`, expect.anything());
 
diff --git a/spec/frontend/logs/components/log_advanced_filters_spec.js b/spec/frontend/logs/components/log_advanced_filters_spec.js
new file mode 100644
index 00000000000..a6fbc40c2c6
--- /dev/null
+++ b/spec/frontend/logs/components/log_advanced_filters_spec.js
@@ -0,0 +1,185 @@
+import { GlIcon, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { defaultTimeRange } from '~/vue_shared/constants';
+import { convertToFixedRange } from '~/lib/utils/datetime_range';
+import { createStore } from '~/logs/stores';
+import { mockPods, mockSearch } from '../mock_data';
+
+import LogAdvancedFilters from '~/logs/components/log_advanced_filters.vue';
+
+const module = 'environmentLogs';
+
+describe('LogAdvancedFilters', () => {
+  let store;
+  let dispatch;
+  let wrapper;
+  let state;
+
+  const findPodsDropdown = () => wrapper.find({ ref: 'podsDropdown' });
+  const findPodsNoPodsText = () => wrapper.find({ ref: 'noPodsMsg' });
+  const findPodsDropdownItems = () =>
+    findPodsDropdown()
+      .findAll(GlDropdownItem)
+      .filter(item => !item.is('[disabled]'));
+  const findPodsDropdownItemsSelected = () =>
+    findPodsDropdownItems()
+      .filter(item => {
+        return !item.find(GlIcon).classes('invisible');
+      })
+      .at(0);
+  const findSearchBox = () => wrapper.find({ ref: 'searchBox' });
+  const findTimeRangePicker = () => wrapper.find({ ref: 'dateTimePicker' });
+
+  const mockStateLoading = () => {
+    state.timeRange.selected = defaultTimeRange;
+    state.timeRange.current = convertToFixedRange(defaultTimeRange);
+    state.pods.options = [];
+    state.pods.current = null;
+  };
+
+  const mockStateWithData = () => {
+    state.timeRange.selected = defaultTimeRange;
+    state.timeRange.current = convertToFixedRange(defaultTimeRange);
+    state.pods.options = mockPods;
+    state.pods.current = null;
+  };
+
+  const initWrapper = (propsData = {}) => {
+    wrapper = shallowMount(LogAdvancedFilters, {
+      propsData: {
+        ...propsData,
+      },
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    state = store.state.environmentLogs;
+
+    jest.spyOn(store, 'dispatch').mockResolvedValue();
+
+    dispatch = store.dispatch;
+  });
+
+  afterEach(() => {
+    store.dispatch.mockReset();
+
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('displays UI elements', () => {
+    initWrapper();
+
+    expect(wrapper.isVueInstance()).toBe(true);
+    expect(wrapper.isEmpty()).toBe(false);
+
+    expect(findPodsDropdown().exists()).toBe(true);
+    expect(findSearchBox().exists()).toBe(true);
+    expect(findTimeRangePicker().exists()).toBe(true);
+  });
+
+  describe('disabled state', () => {
+    beforeEach(() => {
+      mockStateLoading();
+      initWrapper({
+        disabled: true,
+      });
+    });
+
+    it('displays disabled filters', () => {
+      expect(findPodsDropdown().props('text')).toBe('All pods');
+      expect(findPodsDropdown().attributes('disabled')).toBeTruthy();
+      expect(findSearchBox().attributes('disabled')).toBeTruthy();
+      expect(findTimeRangePicker().attributes('disabled')).toBeTruthy();
+    });
+  });
+
+  describe('when the state is loading', () => {
+    beforeEach(() => {
+      mockStateLoading();
+      initWrapper();
+    });
+
+    it('displays a enabled filters', () => {
+      expect(findPodsDropdown().props('text')).toBe('All pods');
+      expect(findPodsDropdown().attributes('disabled')).toBeFalsy();
+      expect(findSearchBox().attributes('disabled')).toBeFalsy();
+      expect(findTimeRangePicker().attributes('disabled')).toBeFalsy();
+    });
+
+    it('displays an empty pods dropdown', () => {
+      expect(findPodsNoPodsText().exists()).toBe(true);
+      expect(findPodsDropdownItems()).toHaveLength(0);
+    });
+  });
+
+  describe('when the state has data', () => {
+    beforeEach(() => {
+      mockStateWithData();
+      initWrapper();
+    });
+
+    it('displays an enabled pods dropdown', () => {
+      expect(findPodsDropdown().attributes('disabled')).toBeFalsy();
+      expect(findPodsDropdown().props('text')).toBe('All pods');
+    });
+
+    it('displays options in a pods dropdown', () => {
+      const items = findPodsDropdownItems();
+      expect(items).toHaveLength(mockPods.length + 1);
+    });
+
+    it('displays "all pods" selected in a pods dropdown', () => {
+      const selected = findPodsDropdownItemsSelected();
+
+      expect(selected.text()).toBe('All pods');
+    });
+
+    it('displays options in date time picker', () => {
+      const options = findTimeRangePicker().props('options');
+
+      expect(options).toEqual(expect.any(Array));
+      expect(options.length).toBeGreaterThan(0);
+    });
+
+    describe('when the user interacts', () => {
+      it('clicks on a all options, showPodLogs is dispatched with null', () => {
+        const items = findPodsDropdownItems();
+        items.at(0).vm.$emit('click');
+
+        expect(dispatch).toHaveBeenCalledWith(`${module}/showPodLogs`, null);
+      });
+
+      it('clicks on a pod name, showPodLogs is dispatched with pod name', () => {
+        const items = findPodsDropdownItems();
+        const index = 2; // any pod
+
+        items.at(index + 1).vm.$emit('click'); // skip "All pods" option
+
+        expect(dispatch).toHaveBeenCalledWith(`${module}/showPodLogs`, mockPods[index]);
+      });
+
+      it('clicks on search, a serches is done', () => {
+        expect(findSearchBox().attributes('disabled')).toBeFalsy();
+
+        // input a query and click `search`
+        findSearchBox().vm.$emit('input', mockSearch);
+        findSearchBox().vm.$emit('submit');
+
+        expect(dispatch).toHaveBeenCalledWith(`${module}/setSearch`, mockSearch);
+      });
+
+      it('selects a new time range', () => {
+        expect(findTimeRangePicker().attributes('disabled')).toBeFalsy();
+
+        const mockRange = { start: 'START_DATE', end: 'END_DATE' };
+        findTimeRangePicker().vm.$emit('input', mockRange);
+
+        expect(dispatch).toHaveBeenCalledWith(`${module}/setTimeRange`, mockRange);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/logs/components/log_simple_filters_spec.js b/spec/frontend/logs/components/log_simple_filters_spec.js
new file mode 100644
index 00000000000..13504a2b1fc
--- /dev/null
+++ b/spec/frontend/logs/components/log_simple_filters_spec.js
@@ -0,0 +1,138 @@
+import { GlIcon, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from '~/logs/stores';
+import { mockPods, mockPodName } from '../mock_data';
+
+import LogSimpleFilters from '~/logs/components/log_simple_filters.vue';
+
+const module = 'environmentLogs';
+
+describe('LogSimpleFilters', () => {
+  let store;
+  let dispatch;
+  let wrapper;
+  let state;
+
+  const findPodsDropdown = () => wrapper.find({ ref: 'podsDropdown' });
+  const findPodsNoPodsText = () => wrapper.find({ ref: 'noPodsMsg' });
+  const findPodsDropdownItems = () =>
+    findPodsDropdown()
+      .findAll(GlDropdownItem)
+      .filter(item => !item.is('[disabled]'));
+
+  const mockPodsLoading = () => {
+    state.pods.options = [];
+    state.pods.current = null;
+  };
+
+  const mockPodsLoaded = () => {
+    state.pods.options = mockPods;
+    state.pods.current = mockPodName;
+  };
+
+  const initWrapper = (propsData = {}) => {
+    wrapper = shallowMount(LogSimpleFilters, {
+      propsData: {
+        ...propsData,
+      },
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    state = store.state.environmentLogs;
+
+    jest.spyOn(store, 'dispatch').mockResolvedValue();
+
+    dispatch = store.dispatch;
+  });
+
+  afterEach(() => {
+    store.dispatch.mockReset();
+
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('displays UI elements', () => {
+    initWrapper();
+
+    expect(wrapper.isVueInstance()).toBe(true);
+    expect(wrapper.isEmpty()).toBe(false);
+
+    expect(findPodsDropdown().exists()).toBe(true);
+  });
+
+  describe('disabled state', () => {
+    beforeEach(() => {
+      mockPodsLoading();
+      initWrapper({
+        disabled: true,
+      });
+    });
+
+    it('displays a disabled pods dropdown', () => {
+      expect(findPodsDropdown().props('text')).toBe('No pod selected');
+      expect(findPodsDropdown().attributes('disabled')).toBeTruthy();
+    });
+  });
+
+  describe('loading state', () => {
+    beforeEach(() => {
+      mockPodsLoading();
+      initWrapper();
+    });
+
+    it('displays an enabled pods dropdown', () => {
+      expect(findPodsDropdown().attributes('disabled')).toBeFalsy();
+      expect(findPodsDropdown().props('text')).toBe('No pod selected');
+    });
+
+    it('displays an empty pods dropdown', () => {
+      expect(findPodsNoPodsText().exists()).toBe(true);
+      expect(findPodsDropdownItems()).toHaveLength(0);
+    });
+  });
+
+  describe('pods available state', () => {
+    beforeEach(() => {
+      mockPodsLoaded();
+      initWrapper();
+    });
+
+    it('displays an enabled pods dropdown', () => {
+      expect(findPodsDropdown().attributes('disabled')).toBeFalsy();
+      expect(findPodsDropdown().props('text')).toBe(mockPods[0]);
+    });
+
+    it('displays a pods dropdown with items', () => {
+      expect(findPodsNoPodsText().exists()).toBe(false);
+      expect(findPodsDropdownItems()).toHaveLength(mockPods.length);
+    });
+
+    it('dropdown has one pod selected', () => {
+      const items = findPodsDropdownItems();
+      mockPods.forEach((pod, i) => {
+        const item = items.at(i);
+        if (item.text() !== mockPodName) {
+          expect(item.find(GlIcon).classes('invisible')).toBe(true);
+        } else {
+          expect(item.find(GlIcon).classes('invisible')).toBe(false);
+        }
+      });
+    });
+
+    it('when the user clicks on a pod, showPodLogs is dispatched', () => {
+      const items = findPodsDropdownItems();
+      const index = 2; // any pod
+
+      expect(dispatch).not.toHaveBeenCalledWith(`${module}/showPodLogs`, expect.anything());
+
+      items.at(index).vm.$emit('click');
+
+      expect(dispatch).toHaveBeenCalledWith(`${module}/showPodLogs`, mockPods[index]);
+    });
+  });
+});
diff --git a/spec/frontend/logs/stores/getters_spec.js b/spec/frontend/logs/stores/getters_spec.js
index fdce575fa97..9d213d8c01f 100644
--- a/spec/frontend/logs/stores/getters_spec.js
+++ b/spec/frontend/logs/stores/getters_spec.js
@@ -1,7 +1,7 @@
-import * as getters from '~/logs/stores/getters';
+import { trace, showAdvancedFilters } from '~/logs/stores/getters';
 import logsPageState from '~/logs/stores/state';
 
-import { mockLogsResult, mockTrace } from '../mock_data';
+import { mockLogsResult, mockTrace, mockEnvName, mockEnvironments } from '../mock_data';
 
 describe('Logs Store getters', () => {
   let state;
@@ -13,7 +13,7 @@ describe('Logs Store getters', () => {
   describe('trace', () => {
     describe('when state is initialized', () => {
       it('returns an empty string', () => {
-        expect(getters.trace(state)).toEqual('');
+        expect(trace(state)).toEqual('');
       });
     });
 
@@ -23,7 +23,7 @@ describe('Logs Store getters', () => {
       });
 
       it('returns an empty string', () => {
-        expect(getters.trace(state)).toEqual('');
+        expect(trace(state)).toEqual('');
       });
     });
 
@@ -33,7 +33,42 @@ describe('Logs Store getters', () => {
       });
 
       it('returns an empty string', () => {
-        expect(getters.trace(state)).toEqual(mockTrace.join('\n'));
+        expect(trace(state)).toEqual(mockTrace.join('\n'));
+      });
+    });
+  });
+
+  describe('showAdvancedFilters', () => {
+    describe('when no environments are set', () => {
+      beforeEach(() => {
+        state.environments.current = mockEnvName;
+        state.environments.options = [];
+      });
+
+      it('returns false', () => {
+        expect(showAdvancedFilters(state)).toBe(false);
+      });
+    });
+
+    describe('when the environment supports filters', () => {
+      beforeEach(() => {
+        state.environments.current = mockEnvName;
+        state.environments.options = mockEnvironments;
+      });
+
+      it('returns true', () => {
+        expect(showAdvancedFilters(state)).toBe(true);
+      });
+    });
+
+    describe('when the environment does not support filters', () => {
+      beforeEach(() => {
+        state.environments.options = mockEnvironments;
+        state.environments.current = mockEnvironments[1].name;
+      });
+
+      it('returns true', () => {
+        expect(showAdvancedFilters(state)).toBe(false);
       });
     });
   });