diff options
Diffstat (limited to 'app/assets/javascripts/logs')
-rw-r--r-- | app/assets/javascripts/logs/components/environment_logs.vue | 40 | ||||
-rw-r--r-- | app/assets/javascripts/logs/stores/actions.js | 35 | ||||
-rw-r--r-- | app/assets/javascripts/logs/stores/mutation_types.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/logs/stores/mutations.js | 15 | ||||
-rw-r--r-- | app/assets/javascripts/logs/stores/state.js | 5 |
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, }, /** |