Add latest changes from gitlab-org/gitlab@master

3 files changed, 339 insertions, 96 deletions

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]);
+    });
+  });
+});