Add latest changes from gitlab-org/gitlab@master

5 files changed, 75 insertions, 26 deletions

diff --git a/app/assets/javascripts/logs/components/environment_logs.vue b/app/assets/javascripts/logs/components/environment_logs.vue
index 70b3af8dc75..487b4f30b5b 100644
--- a/app/assets/javascripts/logs/components/environment_logs.vue
+++ b/app/assets/javascripts/logs/components/environment_logs.vue
@@ -56,7 +56,6 @@ export default {
       required: true,
     },
   },
-  traceHeight: 600,
   data() {
     return {
       isElasticStackCalloutDismissed: false,
@@ -94,6 +93,9 @@ export default {
       'showEnvironment',
       'fetchEnvironments',
       'fetchMoreLogsPrepend',
+      'dismissRequestEnvironmentsError',
+      'dismissInvalidTimeRangeWarning',
+      'dismissRequestLogsError',
     ]),
 
     isCurrentEnvironment(envName) {
@@ -115,7 +117,7 @@ export default {
 };
 </script>
 <template>
-  <div class="environment-logs-viewer mt-3">
+  <div class="environment-logs-viewer d-flex flex-column py-3">
     <gl-alert
       v-if="shouldShowElasticStackCallout"
       class="mb-3 js-elasticsearch-alert"
@@ -132,6 +134,31 @@ export default {
         </strong>
       </a>
     </gl-alert>
+    <gl-alert
+      v-if="environments.fetchError"
+      class="mb-3"
+      variant="danger"
+      @dismiss="dismissRequestEnvironmentsError"
+    >
+      {{ s__('Metrics|There was an error fetching the environments data, please try again') }}
+    </gl-alert>
+    <gl-alert
+      v-if="timeRange.invalidWarning"
+      class="mb-3"
+      variant="warning"
+      @dismiss="dismissInvalidTimeRangeWarning"
+    >
+      {{ s__('Metrics|Invalid time range, please verify.') }}
+    </gl-alert>
+    <gl-alert
+      v-if="logs.fetchError"
+      class="mb-3"
+      variant="danger"
+      @dismiss="dismissRequestLogsError"
+    >
+      {{ s__('Environments|There was an error fetching the logs. Please try again.') }}
+    </gl-alert>
+
     <div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2">
       <div class="flex-grow-0">
         <gl-dropdown
@@ -183,16 +210,15 @@ export default {
 
     <gl-infinite-scroll
       ref="infiniteScroll"
-      class="log-lines"
-      :style="{ height: `${$options.traceHeight}px` }"
-      :max-list-height="$options.traceHeight"
+      class="log-lines overflow-auto flex-grow-1 min-height-0"
       :fetched-items="logs.lines.length"
       @topReached="topReached"
       @scroll="scroll"
     >
       <template #items>
         <pre
-          class="build-trace js-log-trace"
+          ref="logTrace"
+          class="build-trace"
         ><code class="bash js-build-output"><div v-if="showLoader" class="build-loader-animation js-build-loader-animation">
           <div class="dot"></div>
           <div class="dot"></div>
@@ -205,7 +231,7 @@ export default {
       ></template>
     </gl-infinite-scroll>
 
-    <div ref="logFooter" class="log-footer py-2 px-3">
+    <div ref="logFooter" class="py-2 px-3 text-white bg-secondary-900">
       <gl-sprintf :message="s__('Environments|Logs from %{start} to %{end}.')">
         <template #start>{{ timeRange.current.start | formatDate }}</template>
         <template #end>{{ timeRange.current.end | formatDate }}</template>
diff --git a/app/assets/javascripts/logs/stores/actions.js b/app/assets/javascripts/logs/stores/actions.js
index 1e71b2c7314..be847108a49 100644
--- a/app/assets/javascripts/logs/stores/actions.js
+++ b/app/assets/javascripts/logs/stores/actions.js
@@ -1,20 +1,10 @@
 import { backOff } from '~/lib/utils/common_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
-import flash from '~/flash';
-import { s__ } from '~/locale';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 
 import * as types from './mutation_types';
 
-const flashTimeRangeWarning = () => {
-  flash(s__('Metrics|Invalid time range, please verify.'), 'warning');
-};
-
-const flashLogsError = () => {
-  flash(s__('Metrics|There was an error fetching the logs, please try again'));
-};
-
 const requestUntilData = (url, params) =>
   backOff((next, stop) => {
     axios
@@ -31,7 +21,7 @@ const requestUntilData = (url, params) =>
       });
   });
 
-const requestLogsUntilData = state => {
+const requestLogsUntilData = ({ commit, state }) => {
   const params = {};
   const { logs_api_path } = state.environments.options.find(
     ({ name }) => name === state.environments.current,
@@ -49,7 +39,7 @@ const requestLogsUntilData = state => {
       params.start_time = start;
       params.end_time = end;
     } catch {
-      flashTimeRangeWarning();
+      commit(types.SHOW_TIME_RANGE_INVALID_WARNING);
     }
   }
   if (state.logs.cursor) {
@@ -101,26 +91,22 @@ export const fetchEnvironments = ({ commit, dispatch }, environmentsPath) => {
     })
     .catch(() => {
       commit(types.RECEIVE_ENVIRONMENTS_DATA_ERROR);
-      flash(s__('Metrics|There was an error fetching the environments data, please try again'));
     });
 };
 
 export const fetchLogs = ({ commit, state }) => {
   commit(types.REQUEST_LOGS_DATA);
 
-  return requestLogsUntilData(state)
+  return requestLogsUntilData({ commit, state })
     .then(({ data }) => {
       const { pod_name, pods, logs, cursor } = data;
       commit(types.RECEIVE_LOGS_DATA_SUCCESS, { logs, cursor });
-
       commit(types.SET_CURRENT_POD_NAME, pod_name);
-
       commit(types.RECEIVE_PODS_DATA_SUCCESS, pods);
     })
     .catch(() => {
       commit(types.RECEIVE_PODS_DATA_ERROR);
       commit(types.RECEIVE_LOGS_DATA_ERROR);
-      flashLogsError();
     });
 };
 
@@ -132,16 +118,27 @@ export const fetchMoreLogsPrepend = ({ commit, state }) => {
 
   commit(types.REQUEST_LOGS_DATA_PREPEND);
 
-  return requestLogsUntilData(state)
+  return requestLogsUntilData({ commit, state })
     .then(({ data }) => {
       const { logs, cursor } = data;
       commit(types.RECEIVE_LOGS_DATA_PREPEND_SUCCESS, { logs, cursor });
     })
     .catch(() => {
       commit(types.RECEIVE_LOGS_DATA_PREPEND_ERROR);
-      flashLogsError();
     });
 };
 
+export const dismissRequestEnvironmentsError = ({ commit }) => {
+  commit(types.HIDE_REQUEST_ENVIRONMENTS_ERROR);
+};
+
+export const dismissRequestLogsError = ({ commit }) => {
+  commit(types.HIDE_REQUEST_LOGS_ERROR);
+};
+
+export const dismissInvalidTimeRangeWarning = ({ commit }) => {
+  commit(types.HIDE_TIME_RANGE_INVALID_WARNING);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/logs/stores/mutation_types.js b/app/assets/javascripts/logs/stores/mutation_types.js
index 7e7771a9df8..c1cc7eca52e 100644
--- a/app/assets/javascripts/logs/stores/mutation_types.js
+++ b/app/assets/javascripts/logs/stores/mutation_types.js
@@ -1,11 +1,16 @@
 export const SET_PROJECT_ENVIRONMENT = 'SET_PROJECT_ENVIRONMENT';
 export const SET_SEARCH = 'SET_SEARCH';
+
 export const SET_TIME_RANGE = 'SET_TIME_RANGE';
+export const SHOW_TIME_RANGE_INVALID_WARNING = 'SHOW_TIME_RANGE_INVALID_WARNING';
+export const HIDE_TIME_RANGE_INVALID_WARNING = 'HIDE_TIME_RANGE_INVALID_WARNING';
+
 export const SET_CURRENT_POD_NAME = 'SET_CURRENT_POD_NAME';
 
 export const REQUEST_ENVIRONMENTS_DATA = 'REQUEST_ENVIRONMENTS_DATA';
 export const RECEIVE_ENVIRONMENTS_DATA_SUCCESS = 'RECEIVE_ENVIRONMENTS_DATA_SUCCESS';
 export const RECEIVE_ENVIRONMENTS_DATA_ERROR = 'RECEIVE_ENVIRONMENTS_DATA_ERROR';
+export const HIDE_REQUEST_ENVIRONMENTS_ERROR = 'HIDE_REQUEST_ENVIRONMENTS_ERROR';
 
 export const REQUEST_LOGS_DATA = 'REQUEST_LOGS_DATA';
 export const RECEIVE_LOGS_DATA_SUCCESS = 'RECEIVE_LOGS_DATA_SUCCESS';
@@ -13,6 +18,7 @@ export const RECEIVE_LOGS_DATA_ERROR = 'RECEIVE_LOGS_DATA_ERROR';
 export const REQUEST_LOGS_DATA_PREPEND = 'REQUEST_LOGS_DATA_PREPEND';
 export const RECEIVE_LOGS_DATA_PREPEND_SUCCESS = 'RECEIVE_LOGS_DATA_PREPEND_SUCCESS';
 export const RECEIVE_LOGS_DATA_PREPEND_ERROR = 'RECEIVE_LOGS_DATA_PREPEND_ERROR';
+export const HIDE_REQUEST_LOGS_ERROR = 'HIDE_REQUEST_LOGS_ERROR';
 
 export const RECEIVE_PODS_DATA_SUCCESS = 'RECEIVE_PODS_DATA_SUCCESS';
 export const RECEIVE_PODS_DATA_ERROR = 'RECEIVE_PODS_DATA_ERROR';
diff --git a/app/assets/javascripts/logs/stores/mutations.js b/app/assets/javascripts/logs/stores/mutations.js
index d77c2894a05..5e1c794c3a9 100644
--- a/app/assets/javascripts/logs/stores/mutations.js
+++ b/app/assets/javascripts/logs/stores/mutations.js
@@ -18,6 +18,12 @@ export default {
     state.timeRange.selected = timeRange;
     state.timeRange.current = convertToFixedRange(timeRange);
   },
+  [types.SHOW_TIME_RANGE_INVALID_WARNING](state) {
+    state.timeRange.invalidWarning = true;
+  },
+  [types.HIDE_TIME_RANGE_INVALID_WARNING](state) {
+    state.timeRange.invalidWarning = false;
+  },
 
   // Environments Data
   [types.SET_PROJECT_ENVIRONMENT](state, environmentName) {
@@ -38,6 +44,10 @@ export default {
   [types.RECEIVE_ENVIRONMENTS_DATA_ERROR](state) {
     state.environments.options = [];
     state.environments.isLoading = false;
+    state.environments.fetchError = true;
+  },
+  [types.HIDE_REQUEST_ENVIRONMENTS_ERROR](state) {
+    state.environments.fetchError = false;
   },
 
   // Logs data
@@ -63,6 +73,7 @@ export default {
   [types.RECEIVE_LOGS_DATA_ERROR](state) {
     state.logs.lines = [];
     state.logs.isLoading = false;
+    state.logs.fetchError = true;
   },
 
   [types.REQUEST_LOGS_DATA_PREPEND](state) {
@@ -80,6 +91,10 @@ export default {
   },
   [types.RECEIVE_LOGS_DATA_PREPEND_ERROR](state) {
     state.logs.isLoading = false;
+    state.logs.fetchError = true;
+  },
+  [types.HIDE_REQUEST_LOGS_ERROR](state) {
+    state.logs.fetchError = false;
   },
 
   // Pods data
diff --git a/app/assets/javascripts/logs/stores/state.js b/app/assets/javascripts/logs/stores/state.js
index 2c8f47294cc..11185c9ccf1 100644
--- a/app/assets/javascripts/logs/stores/state.js
+++ b/app/assets/javascripts/logs/stores/state.js
@@ -16,6 +16,8 @@ export default () => ({
     selected: defaultTimeRange,
     // Current time range, must be fixed
     current: convertToFixedRange(defaultTimeRange),
+
+    invalidWarning: false,
   },
 
   /**
@@ -25,6 +27,7 @@ export default () => ({
     options: [],
     isLoading: false,
     current: null,
+    fetchError: false,
   },
 
   /**
@@ -39,6 +42,8 @@ export default () => ({
      */
     cursor: null,
     isComplete: false,
+
+    fetchError: false,
   },
 
   /**