Add latest changes from gitlab-org/gitlab@master

7 files changed, 1100 insertions, 0 deletions

diff --git a/spec/frontend/logs/components/environment_logs_spec.js b/spec/frontend/logs/components/environment_logs_spec.js
new file mode 100644
index 00000000000..26542c3d046
--- /dev/null
+++ b/spec/frontend/logs/components/environment_logs_spec.js
@@ -0,0 +1,334 @@
+import Vue from 'vue';
+import { GlDropdown, GlDropdownItem, GlSearchBoxByClick } 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';
+import { scrollDown } from '~/lib/utils/scroll_utils';
+import {
+  mockEnvName,
+  mockEnvironments,
+  mockPods,
+  mockLogsResult,
+  mockTrace,
+  mockPodName,
+  mockSearch,
+  mockEnvironmentsEndpoint,
+  mockDocumentationPath,
+} from '../mock_data';
+
+jest.mock('~/lib/utils/scroll_utils');
+
+describe('EnvironmentLogs', () => {
+  let EnvironmentLogsComponent;
+  let store;
+  let wrapper;
+  let state;
+
+  const propsData = {
+    environmentName: mockEnvName,
+    environmentsPath: mockEnvironmentsEndpoint,
+    clusterApplicationsDocumentationPath: mockDocumentationPath,
+  };
+
+  const actionMocks = {
+    setInitData: jest.fn(),
+    setSearch: jest.fn(),
+    showPodLogs: jest.fn(),
+    showEnvironment: jest.fn(),
+    fetchEnvironments: jest.fn(),
+  };
+
+  const updateControlBtnsMock = jest.fn();
+
+  const findEnvironmentsDropdown = () => wrapper.find('.js-environments-dropdown');
+  const findPodsDropdown = () => wrapper.find('.js-pods-dropdown');
+  const findSearchBar = () => wrapper.find('.js-logs-search');
+  const findTimeRangePicker = () => wrapper.find({ ref: 'dateTimePicker' });
+  const findInfoAlert = () => wrapper.find('.js-elasticsearch-alert');
+
+  const findLogControlButtons = () => wrapper.find({ name: 'log-control-buttons-stub' });
+  const findLogTrace = () => wrapper.find('.js-log-trace');
+
+  const mockSetInitData = () => {
+    state.pods.options = mockPods;
+    state.environments.current = mockEnvName;
+    [state.pods.current] = state.pods.options;
+
+    state.logs.isComplete = false;
+    state.logs.lines = mockLogsResult;
+  };
+
+  const mockShowPodLogs = podName => {
+    state.pods.options = mockPods;
+    [state.pods.current] = podName;
+
+    state.logs.isComplete = false;
+    state.logs.lines = mockLogsResult;
+  };
+
+  const mockFetchEnvs = () => {
+    state.environments.options = mockEnvironments;
+  };
+
+  const initWrapper = () => {
+    wrapper = shallowMount(EnvironmentLogsComponent, {
+      propsData,
+      store,
+      stubs: {
+        LogControlButtons: {
+          name: 'log-control-buttons-stub',
+          template: '<div/>',
+          methods: {
+            update: updateControlBtnsMock,
+          },
+        },
+      },
+      methods: {
+        ...actionMocks,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    state = store.state.environmentLogs;
+    EnvironmentLogsComponent = Vue.extend(EnvironmentLogs);
+  });
+
+  afterEach(() => {
+    actionMocks.setInitData.mockReset();
+    actionMocks.showPodLogs.mockReset();
+    actionMocks.fetchEnvironments.mockReset();
+
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('displays UI elements', () => {
+    initWrapper();
+
+    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(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(findLogTrace().isEmpty()).toBe(false);
+  });
+
+  it('mounted inits data', () => {
+    initWrapper();
+
+    expect(actionMocks.setInitData).toHaveBeenCalledTimes(1);
+    expect(actionMocks.setInitData).toHaveBeenLastCalledWith({
+      timeRange: expect.objectContaining({
+        default: true,
+      }),
+      environmentName: mockEnvName,
+      podName: null,
+    });
+
+    expect(actionMocks.fetchEnvironments).toHaveBeenCalledTimes(1);
+    expect(actionMocks.fetchEnvironments).toHaveBeenLastCalledWith(mockEnvironmentsEndpoint);
+  });
+
+  describe('loading state', () => {
+    beforeEach(() => {
+      state.pods.options = [];
+
+      state.logs = {
+        lines: [],
+        isLoading: true,
+      };
+
+      state.environments = {
+        options: [],
+        isLoading: true,
+      };
+
+      initWrapper();
+    });
+
+    it('displays a disabled environments dropdown', () => {
+      expect(findEnvironmentsDropdown().attributes('disabled')).toBe('true');
+      expect(findEnvironmentsDropdown().findAll(GlDropdownItem).length).toBe(0);
+    });
+
+    it('displays a disabled pods dropdown', () => {
+      expect(findPodsDropdown().attributes('disabled')).toBe('true');
+      expect(findPodsDropdown().findAll(GlDropdownItem).length).toBe(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();
+    });
+
+    it('shows a logs trace', () => {
+      expect(findLogTrace().text()).toBe('');
+      expect(
+        findLogTrace()
+          .find('.js-build-loader-animation')
+          .isVisible(),
+      ).toBe(true);
+    });
+  });
+
+  describe('legacy environment', () => {
+    beforeEach(() => {
+      state.pods.options = [];
+
+      state.logs = {
+        lines: [],
+        isLoading: false,
+      };
+
+      state.environments = {
+        options: mockEnvironments,
+        current: 'staging',
+        isLoading: false,
+      };
+
+      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);
+    });
+  });
+
+  describe('state with data', () => {
+    beforeEach(() => {
+      actionMocks.setInitData.mockImplementation(mockSetInitData);
+      actionMocks.showPodLogs.mockImplementation(mockShowPodLogs);
+      actionMocks.fetchEnvironments.mockImplementation(mockFetchEnvs);
+
+      initWrapper();
+    });
+
+    afterEach(() => {
+      scrollDown.mockReset();
+      updateControlBtnsMock.mockReset();
+
+      actionMocks.setInitData.mockReset();
+      actionMocks.showPodLogs.mockReset();
+      actionMocks.fetchEnvironments.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(actionMocks.setSearch).toHaveBeenCalledTimes(1);
+      expect(actionMocks.setSearch).toHaveBeenCalledWith(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);
+    });
+
+    it('populates environments dropdown', () => {
+      const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
+      expect(findEnvironmentsDropdown().props('text')).toBe(mockEnvName);
+      expect(items.length).toBe(mockEnvironments.length);
+      mockEnvironments.forEach((env, i) => {
+        const item = items.at(i);
+        expect(item.text()).toBe(env.name);
+      });
+    });
+
+    it('populates pods dropdown', () => {
+      const items = findPodsDropdown().findAll(GlDropdownItem);
+
+      expect(findPodsDropdown().props('text')).toBe(mockPodName);
+      expect(items.length).toBe(mockPods.length);
+      mockPods.forEach((pod, i) => {
+        const item = items.at(i);
+        expect(item.text()).toBe(pod);
+      });
+    });
+
+    it('populates logs trace', () => {
+      const trace = findLogTrace();
+      expect(trace.text().split('\n').length).toBe(mockTrace.length);
+      expect(trace.text().split('\n')).toEqual(mockTrace);
+    });
+
+    it('update control buttons state', () => {
+      expect(updateControlBtnsMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('scrolls to bottom when loaded', () => {
+      expect(scrollDown).toHaveBeenCalledTimes(1);
+    });
+
+    describe('when user clicks', () => {
+      it('environment name, trace is refreshed', () => {
+        const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
+        const index = 1; // any env
+
+        expect(actionMocks.showEnvironment).toHaveBeenCalledTimes(0);
+
+        items.at(index).vm.$emit('click');
+
+        expect(actionMocks.showEnvironment).toHaveBeenCalledTimes(1);
+        expect(actionMocks.showEnvironment).toHaveBeenLastCalledWith(mockEnvironments[index].name);
+      });
+
+      it('pod name, trace is refreshed', () => {
+        const items = findPodsDropdown().findAll(GlDropdownItem);
+        const index = 2; // any pod
+
+        expect(actionMocks.showPodLogs).toHaveBeenCalledTimes(0);
+
+        items.at(index).vm.$emit('click');
+
+        expect(actionMocks.showPodLogs).toHaveBeenCalledTimes(1);
+        expect(actionMocks.showPodLogs).toHaveBeenLastCalledWith(mockPods[index]);
+      });
+
+      it('refresh button, trace is refreshed', () => {
+        expect(actionMocks.showPodLogs).toHaveBeenCalledTimes(0);
+
+        findLogControlButtons().vm.$emit('refresh');
+
+        expect(actionMocks.showPodLogs).toHaveBeenCalledTimes(1);
+        expect(actionMocks.showPodLogs).toHaveBeenLastCalledWith(mockPodName);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/logs/components/log_control_buttons_spec.js b/spec/frontend/logs/components/log_control_buttons_spec.js
new file mode 100644
index 00000000000..f344e8189c3
--- /dev/null
+++ b/spec/frontend/logs/components/log_control_buttons_spec.js
@@ -0,0 +1,108 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import LogControlButtons from '~/logs/components/log_control_buttons.vue';
+import {
+  canScroll,
+  isScrolledToTop,
+  isScrolledToBottom,
+  scrollDown,
+  scrollUp,
+} from '~/lib/utils/scroll_utils';
+
+jest.mock('~/lib/utils/scroll_utils');
+
+describe('LogControlButtons', () => {
+  let wrapper;
+
+  const findScrollToTop = () => wrapper.find('.js-scroll-to-top');
+  const findScrollToBottom = () => wrapper.find('.js-scroll-to-bottom');
+  const findRefreshBtn = () => wrapper.find('.js-refresh-log');
+
+  const initWrapper = () => {
+    wrapper = shallowMount(LogControlButtons);
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('displays UI elements', () => {
+    initWrapper();
+
+    expect(wrapper.isVueInstance()).toBe(true);
+    expect(wrapper.isEmpty()).toBe(false);
+
+    expect(findScrollToTop().is(GlButton)).toBe(true);
+    expect(findScrollToBottom().is(GlButton)).toBe(true);
+    expect(findRefreshBtn().is(GlButton)).toBe(true);
+  });
+
+  it('emits a `refresh` event on click on `refresh` button', () => {
+    initWrapper();
+
+    // An `undefined` value means no event was emitted
+    expect(wrapper.emitted('refresh')).toBe(undefined);
+
+    findRefreshBtn().vm.$emit('click');
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.emitted('refresh')).toHaveLength(1);
+    });
+  });
+
+  describe('when scrolling actions are enabled', () => {
+    beforeEach(() => {
+      // mock scrolled to the middle of a long page
+      canScroll.mockReturnValue(true);
+      isScrolledToBottom.mockReturnValue(false);
+      isScrolledToTop.mockReturnValue(false);
+
+      initWrapper();
+      wrapper.vm.update();
+      return wrapper.vm.$nextTick();
+    });
+
+    afterEach(() => {
+      canScroll.mockReset();
+      isScrolledToTop.mockReset();
+      isScrolledToBottom.mockReset();
+    });
+
+    it('click on "scroll to top" scrolls up', () => {
+      expect(findScrollToTop().is('[disabled]')).toBe(false);
+
+      findScrollToTop().vm.$emit('click');
+
+      expect(scrollUp).toHaveBeenCalledTimes(1);
+    });
+
+    it('click on "scroll to bottom" scrolls down', () => {
+      expect(findScrollToBottom().is('[disabled]')).toBe(false);
+
+      findScrollToBottom().vm.$emit('click');
+
+      expect(scrollDown).toHaveBeenCalledTimes(1); // plus one time when trace was loaded
+    });
+  });
+
+  describe('when scrolling actions are disabled', () => {
+    beforeEach(() => {
+      // mock a short page without a scrollbar
+      canScroll.mockReturnValue(false);
+      isScrolledToBottom.mockReturnValue(true);
+      isScrolledToTop.mockReturnValue(true);
+
+      initWrapper();
+    });
+
+    it('buttons are disabled', () => {
+      wrapper.vm.update();
+      return wrapper.vm.$nextTick(() => {
+        expect(findScrollToTop().is('[disabled]')).toBe(true);
+        expect(findScrollToBottom().is('[disabled]')).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/logs/mock_data.js b/spec/frontend/logs/mock_data.js
new file mode 100644
index 00000000000..4c092a84b36
--- /dev/null
+++ b/spec/frontend/logs/mock_data.js
@@ -0,0 +1,85 @@
+export const mockProjectPath = 'root/autodevops-deploy';
+export const mockEnvName = 'production';
+export const mockEnvironmentsEndpoint = `${mockProjectPath}/environments.json`;
+export const mockEnvId = '99';
+export const mockDocumentationPath = '/documentation.md';
+
+const makeMockEnvironment = (id, name, advancedQuerying) => ({
+  id,
+  project_path: mockProjectPath,
+  name,
+  logs_api_path: '/dummy_logs_path.json',
+  enable_advanced_logs_querying: advancedQuerying,
+});
+
+export const mockEnvironment = makeMockEnvironment(mockEnvId, mockEnvName, true);
+export const mockEnvironments = [
+  mockEnvironment,
+  makeMockEnvironment(101, 'staging', false),
+  makeMockEnvironment(102, 'review/a-feature', false),
+];
+
+export const mockPodName = 'production-764c58d697-aaaaa';
+export const mockPods = [
+  mockPodName,
+  'production-764c58d697-bbbbb',
+  'production-764c58d697-ccccc',
+  'production-764c58d697-ddddd',
+];
+
+export const mockLogsResult = [
+  {
+    timestamp: '2019-12-13T13:43:18.2760123Z',
+    message: '10.36.0.1 - - [16/Oct/2019:06:29:48 UTC] "GET / HTTP/1.1" 200 13',
+  },
+  { timestamp: '2019-12-13T13:43:18.2760123Z', message: '- -> /' },
+  {
+    timestamp: '2019-12-13T13:43:26.8420123Z',
+    message: '10.36.0.1 - - [16/Oct/2019:06:29:57 UTC] "GET / HTTP/1.1" 200 13',
+  },
+  { timestamp: '2019-12-13T13:43:26.8420123Z', message: '- -> /' },
+  {
+    timestamp: '2019-12-13T13:43:28.3710123Z',
+    message: '10.36.0.1 - - [16/Oct/2019:06:29:58 UTC] "GET / HTTP/1.1" 200 13',
+  },
+  { timestamp: '2019-12-13T13:43:28.3710123Z', message: '- -> /' },
+  {
+    timestamp: '2019-12-13T13:43:36.8860123Z',
+    message: '10.36.0.1 - - [16/Oct/2019:06:30:07 UTC] "GET / HTTP/1.1" 200 13',
+  },
+  { timestamp: '2019-12-13T13:43:36.8860123Z', message: '- -> /' },
+  {
+    timestamp: '2019-12-13T13:43:38.4000123Z',
+    message: '10.36.0.1 - - [16/Oct/2019:06:30:08 UTC] "GET / HTTP/1.1" 200 13',
+  },
+  { timestamp: '2019-12-13T13:43:38.4000123Z', message: '- -> /' },
+  {
+    timestamp: '2019-12-13T13:43:46.8420123Z',
+    message: '10.36.0.1 - - [16/Oct/2019:06:30:17 UTC] "GET / HTTP/1.1" 200 13',
+  },
+  { timestamp: '2019-12-13T13:43:46.8430123Z', message: '- -> /' },
+  {
+    timestamp: '2019-12-13T13:43:48.3240123Z',
+    message: '10.36.0.1 - - [16/Oct/2019:06:30:18 UTC] "GET / HTTP/1.1" 200 13',
+  },
+  { timestamp: '2019-12-13T13:43:48.3250123Z', message: '- -> /' },
+];
+
+export const mockTrace = [
+  'Dec 13 13:43:18.276Z | 10.36.0.1 - - [16/Oct/2019:06:29:48 UTC] "GET / HTTP/1.1" 200 13',
+  'Dec 13 13:43:18.276Z | - -> /',
+  'Dec 13 13:43:26.842Z | 10.36.0.1 - - [16/Oct/2019:06:29:57 UTC] "GET / HTTP/1.1" 200 13',
+  'Dec 13 13:43:26.842Z | - -> /',
+  'Dec 13 13:43:28.371Z | 10.36.0.1 - - [16/Oct/2019:06:29:58 UTC] "GET / HTTP/1.1" 200 13',
+  'Dec 13 13:43:28.371Z | - -> /',
+  'Dec 13 13:43:36.886Z | 10.36.0.1 - - [16/Oct/2019:06:30:07 UTC] "GET / HTTP/1.1" 200 13',
+  'Dec 13 13:43:36.886Z | - -> /',
+  'Dec 13 13:43:38.400Z | 10.36.0.1 - - [16/Oct/2019:06:30:08 UTC] "GET / HTTP/1.1" 200 13',
+  'Dec 13 13:43:38.400Z | - -> /',
+  'Dec 13 13:43:46.842Z | 10.36.0.1 - - [16/Oct/2019:06:30:17 UTC] "GET / HTTP/1.1" 200 13',
+  'Dec 13 13:43:46.843Z | - -> /',
+  'Dec 13 13:43:48.324Z | 10.36.0.1 - - [16/Oct/2019:06:30:18 UTC] "GET / HTTP/1.1" 200 13',
+  'Dec 13 13:43:48.325Z | - -> /',
+];
+
+export const mockSearch = 'foo +bar';
diff --git a/spec/frontend/logs/stores/actions_spec.js b/spec/frontend/logs/stores/actions_spec.js
new file mode 100644
index 00000000000..6309126159e
--- /dev/null
+++ b/spec/frontend/logs/stores/actions_spec.js
@@ -0,0 +1,324 @@
+import MockAdapter from 'axios-mock-adapter';
+
+import testAction from 'helpers/vuex_action_helper';
+import * as types from '~/logs/stores/mutation_types';
+import { convertToFixedRange } from '~/lib/utils/datetime_range';
+import logsPageState from '~/logs/stores/state';
+import {
+  setInitData,
+  setSearch,
+  showPodLogs,
+  fetchEnvironments,
+  fetchLogs,
+} from '~/logs/stores/actions';
+
+import { defaultTimeRange } from '~/monitoring/constants';
+
+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+
+import {
+  mockProjectPath,
+  mockPodName,
+  mockEnvironmentsEndpoint,
+  mockEnvironments,
+  mockPods,
+  mockLogsResult,
+  mockEnvName,
+  mockSearch,
+} from '../mock_data';
+
+jest.mock('~/flash');
+jest.mock('~/lib/utils/datetime_range');
+jest.mock('~/logs/utils');
+
+const mockDefaultRange = {
+  start: '2020-01-10T18:00:00.000Z',
+  end: '2020-01-10T10:00:00.000Z',
+};
+const mockFixedRange = {
+  start: '2020-01-09T18:06:20.000Z',
+  end: '2020-01-09T18:36:20.000Z',
+};
+const mockRollingRange = {
+  duration: 120,
+};
+const mockRollingRangeAsFixed = {
+  start: '2020-01-10T18:00:00.000Z',
+  end: '2020-01-10T17:58:00.000Z',
+};
+
+describe('Logs Store actions', () => {
+  let state;
+  let mock;
+
+  convertToFixedRange.mockImplementation(range => {
+    if (range === defaultTimeRange) {
+      return { ...mockDefaultRange };
+    }
+    if (range === mockFixedRange) {
+      return { ...mockFixedRange };
+    }
+    if (range === mockRollingRange) {
+      return { ...mockRollingRangeAsFixed };
+    }
+    throw new Error('Invalid time range');
+  });
+
+  beforeEach(() => {
+    state = logsPageState();
+  });
+
+  afterEach(() => {
+    flash.mockClear();
+  });
+
+  describe('setInitData', () => {
+    it('should commit environment and pod name mutation', () =>
+      testAction(setInitData, { environmentName: mockEnvName, podName: mockPodName }, state, [
+        { type: types.SET_PROJECT_ENVIRONMENT, payload: mockEnvName },
+        { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
+      ]));
+  });
+
+  describe('setSearch', () => {
+    it('should commit search mutation', () =>
+      testAction(
+        setSearch,
+        mockSearch,
+        state,
+        [{ type: types.SET_SEARCH, payload: mockSearch }],
+        [{ type: 'fetchLogs' }],
+      ));
+  });
+
+  describe('showPodLogs', () => {
+    it('should commit pod name', () =>
+      testAction(
+        showPodLogs,
+        mockPodName,
+        state,
+        [{ type: types.SET_CURRENT_POD_NAME, payload: mockPodName }],
+        [{ type: 'fetchLogs' }],
+      ));
+  });
+
+  describe('fetchEnvironments', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    it('should commit RECEIVE_ENVIRONMENTS_DATA_SUCCESS mutation on correct data', () => {
+      mock.onGet(mockEnvironmentsEndpoint).replyOnce(200, { environments: mockEnvironments });
+      return testAction(
+        fetchEnvironments,
+        mockEnvironmentsEndpoint,
+        state,
+        [
+          { type: types.REQUEST_ENVIRONMENTS_DATA },
+          { type: types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, payload: mockEnvironments },
+        ],
+        [{ type: 'fetchLogs' }],
+      );
+    });
+
+    it('should commit RECEIVE_ENVIRONMENTS_DATA_ERROR on wrong data', () => {
+      mock.onGet(mockEnvironmentsEndpoint).replyOnce(500);
+      return testAction(
+        fetchEnvironments,
+        mockEnvironmentsEndpoint,
+        state,
+        [
+          { type: types.REQUEST_ENVIRONMENTS_DATA },
+          { type: types.RECEIVE_ENVIRONMENTS_DATA_ERROR },
+        ],
+        [],
+        () => {
+          expect(flash).toHaveBeenCalledTimes(1);
+        },
+      );
+    });
+  });
+
+  describe('fetchLogs', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.reset();
+    });
+
+    it('should commit logs and pod data when there is pod name defined', () => {
+      state.environments.options = mockEnvironments;
+      state.environments.current = mockEnvName;
+      state.pods.current = mockPodName;
+
+      const endpoint = '/dummy_logs_path.json';
+
+      mock
+        .onGet(endpoint, {
+          params: {
+            pod_name: mockPodName,
+            ...mockDefaultRange,
+          },
+        })
+        .reply(200, {
+          pod_name: mockPodName,
+          pods: mockPods,
+          logs: mockLogsResult,
+        });
+
+      mock.onGet(endpoint).replyOnce(202); // mock reactive cache
+
+      return testAction(
+        fetchLogs,
+        null,
+        state,
+        [
+          { type: types.REQUEST_PODS_DATA },
+          { type: types.REQUEST_LOGS_DATA },
+          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
+          { type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods },
+          { type: types.RECEIVE_LOGS_DATA_SUCCESS, payload: mockLogsResult },
+        ],
+        [],
+      );
+    });
+
+    it('should commit logs and pod data when there is pod name defined and a non-default date range', () => {
+      state.projectPath = mockProjectPath;
+      state.environments.options = mockEnvironments;
+      state.environments.current = mockEnvName;
+      state.pods.current = mockPodName;
+      state.timeRange.current = mockFixedRange;
+
+      const endpoint = '/dummy_logs_path.json';
+
+      mock
+        .onGet(endpoint, {
+          params: {
+            pod_name: mockPodName,
+            start: mockFixedRange.start,
+            end: mockFixedRange.end,
+          },
+        })
+        .reply(200, {
+          pod_name: mockPodName,
+          pods: mockPods,
+          logs: mockLogsResult,
+        });
+
+      return testAction(
+        fetchLogs,
+        null,
+        state,
+        [
+          { type: types.REQUEST_PODS_DATA },
+          { type: types.REQUEST_LOGS_DATA },
+          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
+          { type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods },
+          { type: types.RECEIVE_LOGS_DATA_SUCCESS, payload: mockLogsResult },
+        ],
+        [],
+      );
+    });
+
+    it('should commit logs and pod data when there is pod name and search and a faulty date range', () => {
+      state.environments.options = mockEnvironments;
+      state.environments.current = mockEnvName;
+      state.pods.current = mockPodName;
+      state.search = mockSearch;
+      state.timeRange.current = 'INVALID_TIME_RANGE';
+
+      const endpoint = '/dummy_logs_path.json';
+
+      mock
+        .onGet(endpoint, {
+          params: {
+            pod_name: mockPodName,
+            search: mockSearch,
+          },
+        })
+        .reply(200, {
+          pod_name: mockPodName,
+          pods: mockPods,
+          logs: mockLogsResult,
+        });
+
+      mock.onGet(endpoint).replyOnce(202); // mock reactive cache
+
+      return testAction(
+        fetchLogs,
+        null,
+        state,
+        [
+          { type: types.REQUEST_PODS_DATA },
+          { type: types.REQUEST_LOGS_DATA },
+          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
+          { type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods },
+          { type: types.RECEIVE_LOGS_DATA_SUCCESS, payload: mockLogsResult },
+        ],
+        [],
+        () => {
+          // Warning about time ranges was issued
+          expect(flash).toHaveBeenCalledTimes(1);
+          expect(flash).toHaveBeenCalledWith(expect.any(String), 'warning');
+        },
+      );
+    });
+
+    it('should commit logs and pod data when no pod name defined', done => {
+      state.environments.options = mockEnvironments;
+      state.environments.current = mockEnvName;
+
+      const endpoint = '/dummy_logs_path.json';
+
+      mock.onGet(endpoint, { params: { ...mockDefaultRange } }).reply(200, {
+        pod_name: mockPodName,
+        pods: mockPods,
+        logs: mockLogsResult,
+      });
+      mock.onGet(endpoint).replyOnce(202); // mock reactive cache
+
+      testAction(
+        fetchLogs,
+        null,
+        state,
+        [
+          { type: types.REQUEST_PODS_DATA },
+          { type: types.REQUEST_LOGS_DATA },
+          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
+          { type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods },
+          { type: types.RECEIVE_LOGS_DATA_SUCCESS, payload: mockLogsResult },
+        ],
+        [],
+        done,
+      );
+    });
+
+    it('should commit logs and pod errors when backend fails', () => {
+      state.environments.options = mockEnvironments;
+      state.environments.current = mockEnvName;
+
+      const endpoint = `/${mockProjectPath}/-/logs/elasticsearch.json?environment_name=${mockEnvName}`;
+      mock.onGet(endpoint).replyOnce(500);
+
+      return testAction(
+        fetchLogs,
+        null,
+        state,
+        [
+          { type: types.REQUEST_PODS_DATA },
+          { type: types.REQUEST_LOGS_DATA },
+          { type: types.RECEIVE_PODS_DATA_ERROR },
+          { type: types.RECEIVE_LOGS_DATA_ERROR },
+        ],
+        [],
+        () => {
+          expect(flash).toHaveBeenCalledTimes(1);
+        },
+      );
+    });
+  });
+});
diff --git a/spec/frontend/logs/stores/getters_spec.js b/spec/frontend/logs/stores/getters_spec.js
new file mode 100644
index 00000000000..fdce575fa97
--- /dev/null
+++ b/spec/frontend/logs/stores/getters_spec.js
@@ -0,0 +1,40 @@
+import * as getters from '~/logs/stores/getters';
+import logsPageState from '~/logs/stores/state';
+
+import { mockLogsResult, mockTrace } from '../mock_data';
+
+describe('Logs Store getters', () => {
+  let state;
+
+  beforeEach(() => {
+    state = logsPageState();
+  });
+
+  describe('trace', () => {
+    describe('when state is initialized', () => {
+      it('returns an empty string', () => {
+        expect(getters.trace(state)).toEqual('');
+      });
+    });
+
+    describe('when state logs are empty', () => {
+      beforeEach(() => {
+        state.logs.lines = [];
+      });
+
+      it('returns an empty string', () => {
+        expect(getters.trace(state)).toEqual('');
+      });
+    });
+
+    describe('when state logs are set', () => {
+      beforeEach(() => {
+        state.logs.lines = mockLogsResult;
+      });
+
+      it('returns an empty string', () => {
+        expect(getters.trace(state)).toEqual(mockTrace.join('\n'));
+      });
+    });
+  });
+});
diff --git a/spec/frontend/logs/stores/mutations_spec.js b/spec/frontend/logs/stores/mutations_spec.js
new file mode 100644
index 00000000000..dcb358c7d5b
--- /dev/null
+++ b/spec/frontend/logs/stores/mutations_spec.js
@@ -0,0 +1,171 @@
+import mutations from '~/logs/stores/mutations';
+import * as types from '~/logs/stores/mutation_types';
+
+import logsPageState from '~/logs/stores/state';
+import {
+  mockEnvName,
+  mockEnvironments,
+  mockPods,
+  mockPodName,
+  mockLogsResult,
+  mockSearch,
+} from '../mock_data';
+
+describe('Logs Store Mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = logsPageState();
+  });
+
+  it('ensures mutation types are correctly named', () => {
+    Object.keys(types).forEach(k => {
+      expect(k).toEqual(types[k]);
+    });
+  });
+
+  describe('SET_PROJECT_ENVIRONMENT', () => {
+    it('sets the environment', () => {
+      mutations[types.SET_PROJECT_ENVIRONMENT](state, mockEnvName);
+      expect(state.environments.current).toEqual(mockEnvName);
+    });
+  });
+
+  describe('SET_SEARCH', () => {
+    it('sets the search', () => {
+      mutations[types.SET_SEARCH](state, mockSearch);
+      expect(state.search).toEqual(mockSearch);
+    });
+  });
+
+  describe('REQUEST_ENVIRONMENTS_DATA', () => {
+    it('inits data', () => {
+      mutations[types.REQUEST_ENVIRONMENTS_DATA](state);
+      expect(state.environments.options).toEqual([]);
+      expect(state.environments.isLoading).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_ENVIRONMENTS_DATA_SUCCESS', () => {
+    it('receives environments data and stores it as options', () => {
+      expect(state.environments.options).toEqual([]);
+
+      mutations[types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS](state, mockEnvironments);
+
+      expect(state.environments.options).toEqual(mockEnvironments);
+      expect(state.environments.isLoading).toEqual(false);
+    });
+  });
+
+  describe('RECEIVE_ENVIRONMENTS_DATA_ERROR', () => {
+    it('captures an error loading environments', () => {
+      mutations[types.RECEIVE_ENVIRONMENTS_DATA_ERROR](state);
+
+      expect(state.environments).toEqual({
+        options: [],
+        isLoading: false,
+        current: null,
+      });
+    });
+  });
+
+  describe('REQUEST_LOGS_DATA', () => {
+    it('starts loading for logs', () => {
+      mutations[types.REQUEST_LOGS_DATA](state);
+
+      expect(state.logs).toEqual(
+        expect.objectContaining({
+          lines: [],
+          isLoading: true,
+          isComplete: false,
+        }),
+      );
+    });
+  });
+
+  describe('RECEIVE_LOGS_DATA_SUCCESS', () => {
+    it('receives logs lines', () => {
+      mutations[types.RECEIVE_LOGS_DATA_SUCCESS](state, mockLogsResult);
+
+      expect(state.logs).toEqual(
+        expect.objectContaining({
+          lines: mockLogsResult,
+          isLoading: false,
+          isComplete: true,
+        }),
+      );
+    });
+  });
+
+  describe('RECEIVE_LOGS_DATA_ERROR', () => {
+    it('receives log data error and stops loading', () => {
+      mutations[types.RECEIVE_LOGS_DATA_ERROR](state);
+
+      expect(state.logs).toEqual(
+        expect.objectContaining({
+          lines: [],
+          isLoading: false,
+          isComplete: true,
+        }),
+      );
+    });
+  });
+
+  describe('SET_CURRENT_POD_NAME', () => {
+    it('set current pod name', () => {
+      mutations[types.SET_CURRENT_POD_NAME](state, mockPodName);
+
+      expect(state.pods.current).toEqual(mockPodName);
+    });
+  });
+
+  describe('SET_TIME_RANGE', () => {
+    it('sets a default range', () => {
+      expect(state.timeRange.current).toEqual(expect.any(Object));
+    });
+
+    it('sets a time range', () => {
+      const mockRange = {
+        start: '2020-01-10T18:00:00.000Z',
+        end: '2020-01-10T10:00:00.000Z',
+      };
+      mutations[types.SET_TIME_RANGE](state, mockRange);
+
+      expect(state.timeRange.current).toEqual(mockRange);
+    });
+  });
+
+  describe('REQUEST_PODS_DATA', () => {
+    it('receives log data error and stops loading', () => {
+      mutations[types.REQUEST_PODS_DATA](state);
+
+      expect(state.pods).toEqual(
+        expect.objectContaining({
+          options: [],
+        }),
+      );
+    });
+  });
+  describe('RECEIVE_PODS_DATA_SUCCESS', () => {
+    it('receives pods data success', () => {
+      mutations[types.RECEIVE_PODS_DATA_SUCCESS](state, mockPods);
+
+      expect(state.pods).toEqual(
+        expect.objectContaining({
+          options: mockPods,
+        }),
+      );
+    });
+  });
+  describe('RECEIVE_PODS_DATA_ERROR', () => {
+    it('receives pods data error', () => {
+      mutations[types.RECEIVE_PODS_DATA_ERROR](state);
+
+      expect(state.pods).toEqual(
+        expect.objectContaining({
+          options: [],
+        }),
+      );
+    });
+  });
+});
diff --git a/spec/frontend/logs/utils_spec.js b/spec/frontend/logs/utils_spec.js
new file mode 100644
index 00000000000..986fe320363
--- /dev/null
+++ b/spec/frontend/logs/utils_spec.js
@@ -0,0 +1,38 @@
+import { getTimeRange } from '~/logs/utils';
+
+describe('logs/utils', () => {
+  describe('getTimeRange', () => {
+    const nowTimestamp = 1577836800000;
+    const nowString = '2020-01-01T00:00:00.000Z';
+
+    beforeEach(() => {
+      jest.spyOn(Date, 'now').mockImplementation(() => nowTimestamp);
+    });
+
+    afterEach(() => {
+      Date.now.mockRestore();
+    });
+
+    it('returns the right values', () => {
+      expect(getTimeRange(0)).toEqual({
+        start: '2020-01-01T00:00:00.000Z',
+        end: nowString,
+      });
+
+      expect(getTimeRange(60 * 30)).toEqual({
+        start: '2019-12-31T23:30:00.000Z',
+        end: nowString,
+      });
+
+      expect(getTimeRange(60 * 60 * 24 * 7 * 1)).toEqual({
+        start: '2019-12-25T00:00:00.000Z',
+        end: nowString,
+      });
+
+      expect(getTimeRange(60 * 60 * 24 * 7 * 4)).toEqual({
+        start: '2019-12-04T00:00:00.000Z',
+        end: nowString,
+      });
+    });
+  });
+});