Resolve "Integrate new vue+vuex code base with new API and remove old haml code"

5 files changed, 154 insertions, 83 deletions

diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index d0040161dc3..54ed217572a 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -1,17 +1,32 @@
 import Visibility from 'visibilityjs';
 import * as types from './mutation_types';
-import axios from '../../lib/utils/axios_utils';
-import Poll from '../../lib/utils/poll';
-import { setCiStatusFavicon } from '../../lib/utils/common_utils';
-import flash from '../../flash';
-import { __ } from '../../locale';
+import axios from '~/lib/utils/axios_utils';
+import Poll from '~/lib/utils/poll';
+import { setFaviconOverlay, resetFavicon } from '~/lib/utils/common_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
+import {
+  canScroll,
+  isScrolledToBottom,
+  isScrolledToTop,
+  isScrolledToMiddle,
+  scrollDown,
+  scrollUp,
+} from '~/lib/utils/scroll_utils';
 
 export const setJobEndpoint = ({ commit }, endpoint) => commit(types.SET_JOB_ENDPOINT, endpoint);
-export const setTraceEndpoint = ({ commit }, endpoint) =>
-  commit(types.SET_TRACE_ENDPOINT, endpoint);
-export const setStagesEndpoint = ({ commit }, endpoint) =>
-  commit(types.SET_STAGES_ENDPOINT, endpoint);
-export const setJobsEndpoint = ({ commit }, endpoint) => commit(types.SET_JOBS_ENDPOINT, endpoint);
+export const setTraceOptions = ({ commit }, options) => commit(types.SET_TRACE_OPTIONS, options);
+
+export const hideSidebar = ({ commit }) => commit(types.HIDE_SIDEBAR);
+export const showSidebar = ({ commit }) => commit(types.SHOW_SIDEBAR);
+
+export const toggleSidebar = ({ dispatch, state }) => {
+  if (state.isSidebarOpen) {
+    dispatch('hideSidebar');
+  } else {
+    dispatch('showSidebar');
+  }
+};
 
 let eTagPoll;
 
@@ -62,41 +77,84 @@ export const fetchJob = ({ state, dispatch }) => {
   });
 };
 
-export const receiveJobSuccess = ({ commit }, data) => {
+export const receiveJobSuccess = ({ commit }, data = {}) => {
   commit(types.RECEIVE_JOB_SUCCESS, data);
+
+  if (data.favicon) {
+    setFaviconOverlay(data.favicon);
+  } else {
+    resetFavicon();
+  }
 };
 export const receiveJobError = ({ commit }) => {
   commit(types.RECEIVE_JOB_ERROR);
   flash(__('An error occurred while fetching the job.'));
+  resetFavicon();
 };
 
 /**
  * Job's Trace
  */
-export const scrollTop = ({ commit }) => {
-  commit(types.SCROLL_TO_TOP);
-  window.scrollTo({ top: 0 });
+export const scrollTop = ({ dispatch }) => {
+  scrollUp();
+  dispatch('toggleScrollButtons');
 };
 
-export const scrollBottom = ({ commit }) => {
-  commit(types.SCROLL_TO_BOTTOM);
-  window.scrollTo({ top: document.height });
+export const scrollBottom = ({ dispatch }) => {
+  scrollDown();
+  dispatch('toggleScrollButtons');
+};
+
+/**
+ * Responsible for toggling the disabled state of the scroll buttons
+ */
+export const toggleScrollButtons = ({ dispatch }) => {
+  if (canScroll()) {
+    if (isScrolledToMiddle()) {
+      dispatch('enableScrollTop');
+      dispatch('enableScrollBottom');
+    } else if (isScrolledToTop()) {
+      dispatch('disableScrollTop');
+      dispatch('enableScrollBottom');
+    } else if (isScrolledToBottom()) {
+      dispatch('disableScrollBottom');
+      dispatch('enableScrollTop');
+    }
+  } else {
+    dispatch('disableScrollBottom');
+    dispatch('disableScrollTop');
+  }
+};
+
+export const disableScrollBottom = ({ commit }) => commit(types.DISABLE_SCROLL_BOTTOM);
+export const disableScrollTop = ({ commit }) => commit(types.DISABLE_SCROLL_TOP);
+export const enableScrollBottom = ({ commit }) => commit(types.ENABLE_SCROLL_BOTTOM);
+export const enableScrollTop = ({ commit }) => commit(types.ENABLE_SCROLL_TOP);
+
+/**
+ * While the automatic scroll down is active,
+ * we show the scroll down button with an animation
+ */
+export const toggleScrollAnimation = ({ commit }, toggle) =>
+  commit(types.TOGGLE_SCROLL_ANIMATION, toggle);
+
+/**
+ * Responsible to handle automatic scroll
+ */
+export const toggleScrollisInBottom = ({ commit }, toggle) => {
+  commit(types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE, toggle);
 };
 
 export const requestTrace = ({ commit }) => commit(types.REQUEST_TRACE);
 
 let traceTimeout;
-export const fetchTrace = ({ dispatch, state }) => {
-  dispatch('requestTrace');
-
+export const fetchTrace = ({ dispatch, state }) =>
   axios
     .get(`${state.traceEndpoint}/trace.json`, {
       params: { state: state.traceState },
     })
     .then(({ data }) => {
-      if (!state.fetchingStatusFavicon) {
-        dispatch('fetchFavicon');
-      }
+      dispatch('toggleScrollisInBottom', isScrolledToBottom());
       dispatch('receiveTraceSuccess', data);
 
       if (!data.complete) {
@@ -108,7 +166,7 @@ export const fetchTrace = ({ dispatch, state }) => {
       }
     })
     .catch(() => dispatch('receiveTraceError'));
-};
+
 export const stopPollingTrace = ({ commit }) => {
   commit(types.STOP_POLLING_TRACE);
   clearTimeout(traceTimeout);
@@ -120,17 +178,6 @@ export const receiveTraceError = ({ commit }) => {
   flash(__('An error occurred while fetching the job log.'));
 };
 
-export const fetchFavicon = ({ state, dispatch }) => {
-  dispatch('requestStatusFavicon');
-  setCiStatusFavicon(`${state.pagePath}/status.json`)
-    .then(() => dispatch('receiveStatusFaviconSuccess'))
-    .catch(() => dispatch('requestStatusFaviconError'));
-};
-export const requestStatusFavicon = ({ commit }) => commit(types.REQUEST_STATUS_FAVICON);
-export const receiveStatusFaviconSuccess = ({ commit }) =>
-  commit(types.RECEIVE_STATUS_FAVICON_SUCCESS);
-export const requestStatusFaviconError = ({ commit }) => commit(types.RECEIVE_STATUS_FAVICON_ERROR);
-
 /**
  * Stages dropdown on sidebar
  */
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index 9f4f372e3d2..4ce395a9106 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -1,5 +1,6 @@
 import _ from 'underscore';
 import { __ } from '~/locale';
+import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 
 export const headerActions = state => {
   if (state.job.new_issue_path) {
@@ -34,11 +35,12 @@ export const hasEnvironment = state => !_.isEmpty(state.job.deployment_status);
  * Used to check if it should render the job log or the empty state
  * @returns {Boolean}
  */
-export const hasTrace = state => state.job.has_trace || state.job.status.group === 'running';
+export const hasTrace = state => state.job.has_trace || (!_.isEmpty(state.job.status) && state.job.status.group === 'running');
 
 export const emptyStateIllustration = state =>
   (state.job && state.job.status && state.job.status.illustration) || {};
 
+export const emptyStateAction = state =>  (state.job && state.job.status && state.job.status.action) || {};
 /**
  * When the job is pending and there are no available runners
  * we need to render the stuck block;
@@ -46,8 +48,10 @@ export const emptyStateIllustration = state =>
  * @returns {Boolean}
  */
 export const isJobStuck = state =>
-  state.job.status.group === 'pending' &&
+  (!_.isEmpty(state.job.status) && state.job.status.group === 'pending') &&
   (!_.isEmpty(state.job.runners) && state.job.runners.available === false);
 
+export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/jobs/store/mutation_types.js b/app/assets/javascripts/jobs/store/mutation_types.js
index e66e1d4f116..fd098f13e90 100644
--- a/app/assets/javascripts/jobs/store/mutation_types.js
+++ b/app/assets/javascripts/jobs/store/mutation_types.js
@@ -1,10 +1,19 @@
 export const SET_JOB_ENDPOINT = 'SET_JOB_ENDPOINT';
-export const SET_TRACE_ENDPOINT = 'SET_TRACE_ENDPOINT';
-export const SET_STAGES_ENDPOINT = 'SET_STAGES_ENDPOINT';
-export const SET_JOBS_ENDPOINT = 'SET_JOBS_ENDPOINT';
+export const SET_TRACE_OPTIONS = 'SET_TRACE_OPTIONS';
+
+export const HIDE_SIDEBAR = 'HIDE_SIDEBAR';
+export const SHOW_SIDEBAR = 'SHOW_SIDEBAR';
 
 export const SCROLL_TO_TOP = 'SCROLL_TO_TOP';
 export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM';
+export const DISABLE_SCROLL_BOTTOM = 'DISABLE_SCROLL_BOTTOM';
+export const DISABLE_SCROLL_TOP = 'DISABLE_SCROLL_TOP';
+export const ENABLE_SCROLL_BOTTOM = 'ENABLE_SCROLL_BOTTOM';
+export const ENABLE_SCROLL_TOP = 'ENABLE_SCROLL_TOP';
+// TODO
+export const TOGGLE_SCROLL_ANIMATION = 'TOGGLE_SCROLL_ANIMATION';
+
+export const TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE = 'TOGGLE_IS_SCROLL_IN_BOTTOM';
 
 export const REQUEST_JOB = 'REQUEST_JOB';
 export const RECEIVE_JOB_SUCCESS = 'RECEIVE_JOB_SUCCESS';
@@ -15,10 +24,6 @@ export const STOP_POLLING_TRACE = 'STOP_POLLING_TRACE';
 export const RECEIVE_TRACE_SUCCESS = 'RECEIVE_TRACE_SUCCESS';
 export const RECEIVE_TRACE_ERROR = 'RECEIVE_TRACE_ERROR';
 
-export const REQUEST_STATUS_FAVICON = 'REQUEST_STATUS_FAVICON';
-export const RECEIVE_STATUS_FAVICON_SUCCESS = 'RECEIVE_STATUS_FAVICON_SUCCESS';
-export const RECEIVE_STATUS_FAVICON_ERROR = 'RECEIVE_STATUS_FAVICON_ERROR';
-
 export const REQUEST_STAGES = 'REQUEST_STAGES';
 export const RECEIVE_STAGES_SUCCESS = 'RECEIVE_STAGES_SUCCESS';
 export const RECEIVE_STAGES_ERROR = 'RECEIVE_STAGES_ERROR';
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index f00e06e1a6c..4195d787f12 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -4,14 +4,17 @@ export default {
   [types.SET_JOB_ENDPOINT](state, endpoint) {
     state.jobEndpoint = endpoint;
   },
-  [types.REQUEST_STATUS_FAVICON](state) {
-    state.fetchingStatusFavicon = true;
+
+  [types.SET_TRACE_OPTIONS](state, options = {}) {
+    state.traceEndpoint = options.pagePath;
+    state.traceState = options.logState;
   },
-  [types.RECEIVE_STATUS_FAVICON_SUCCESS](state) {
-    state.fetchingStatusFavicon = false;
+
+  [types.HIDE_SIDEBAR](state) {
+    state.isSidebarOpen = false;
   },
-  [types.RECEIVE_STATUS_FAVICON_ERROR](state) {
-    state.fetchingStatusFavicon = false;
+  [types.SHOW_SIDEBAR](state) {
+    state.isSidebarOpen = true;
   },
 
   [types.RECEIVE_TRACE_SUCCESS](state, log) {
@@ -23,8 +26,12 @@ export default {
       state.trace += log.html;
       state.traceSize += log.size;
     } else {
-      state.trace = log.html;
-      state.traceSize = log.size;
+      // When the job still does not have a trace
+      // the trace response will not have a defined
+      // html or size. We keep the old value otherwise these
+      // will be set to `undefined`
+      state.trace = log.html || state.trace;
+      state.traceSize = log.size || state.traceSize;
     }
 
     if (state.traceSize < log.total) {
@@ -33,25 +40,29 @@ export default {
       state.isTraceSizeVisible = false;
     }
 
-    state.isTraceComplete = log.complete;
-    state.hasTraceError = false;
+    state.isTraceComplete = log.complete || state.isTraceComplete;
   },
+
+  /**
+   * Will remove loading animation
+   */
   [types.STOP_POLLING_TRACE](state) {
     state.isTraceComplete = true;
   },
-  // todo_fl: check this.
+
+  /**
+   * Will remove loading animation
+   */
   [types.RECEIVE_TRACE_ERROR](state) {
-    state.isLoadingTrace = false;
     state.isTraceComplete = true;
-    state.hasTraceError = true;
   },
 
   [types.REQUEST_JOB](state) {
     state.isLoading = true;
   },
   [types.RECEIVE_JOB_SUCCESS](state, job) {
-    state.isLoading = false;
     state.hasError = false;
+    state.isLoading = false;
     state.job = job;
 
     /**
@@ -66,17 +77,28 @@ export default {
   },
   [types.RECEIVE_JOB_ERROR](state) {
     state.isLoading = false;
-    state.hasError = true;
     state.job = {};
+    state.hasError = true;
   },
 
-  [types.SCROLL_TO_TOP](state) {
-    state.isTraceScrolledToBottom = false;
-    state.hasBeenScrolled = true;
+  [types.ENABLE_SCROLL_TOP](state) {
+    state.isScrollTopDisabled = false;
+  },
+  [types.DISABLE_SCROLL_TOP](state) {
+    state.isScrollTopDisabled = true;
+  },
+  [types.ENABLE_SCROLL_BOTTOM](state) {
+    state.isScrollBottomDisabled = false;
   },
-  [types.SCROLL_TO_BOTTOM](state) {
-    state.isTraceScrolledToBottom = true;
-    state.hasBeenScrolled = true;
+  [types.DISABLE_SCROLL_BOTTOM](state) {
+    state.isScrollBottomDisabled = true;
+  },
+  [types.TOGGLE_SCROLL_ANIMATION](state, toggle) {
+    state.isScrollingDown = toggle;
+  },
+
+  [types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE](state, toggle) {
+    state.isScrolledToBottomBeforeReceivingTrace = toggle;
   },
 
   [types.REQUEST_STAGES](state) {
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index afbc959bb71..0eb269ca38f 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -4,36 +4,29 @@ export default () => ({
   jobEndpoint: null,
   traceEndpoint: null,
 
-  // dropdown options
-  stagesEndpoint: null,
-  // list of jobs on sidebard
-  stageJobsEndpoint: null,
+  // sidebar
+  isSidebarOpen: true,
 
-  // job log
   isLoading: false,
   hasError: false,
   job: {},
 
-  // trace
-  isLoadingTrace: false,
-  hasTraceError: false,
+  // scroll buttons state
+  isScrollBottomDisabled: true,
+  isScrollTopDisabled: true,
 
-  trace: '',
-
-  isTraceScrolledToBottom: false,
-  hasBeenScrolled: false,
+  // Used to check if we should keep the automatic scroll
+  isScrolledToBottomBeforeReceivingTrace: true,
 
+  trace: '',
   isTraceComplete: false,
-  traceSize: 0, // todo_fl: needs to be converted into human readable format in components
+  traceSize: 0,
   isTraceSizeVisible: false,
 
-  fetchingStatusFavicon: false,
-  // used as a query parameter
+  // used as a query parameter to fetch the trace
   traceState: null,
-  // used to check if we need to redirect the user - todo_fl:  check if actually needed
-  traceStatus: null,
 
-  // sidebar dropdown
+  // sidebar dropdown & list of jobs
   isLoadingStages: false,
   isLoadingJobs: false,
   selectedStage: __('More'),