diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-24 18:07:55 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-24 18:07:55 +0000 |
commit | 603c7d4cac5e28bc1c75e50c23ed2cbe56f1aafc (patch) | |
tree | 907f5b8ee1b6f5aad396e95e3327a08400b9e8ea /app/assets/javascripts/logs | |
parent | 120f4aaedc8fe830a3f572491d240d8ee6addefb (diff) | |
download | gitlab-ce-603c7d4cac5e28bc1c75e50c23ed2cbe56f1aafc.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/logs')
4 files changed, 255 insertions, 159 deletions
diff --git a/app/assets/javascripts/logs/components/environment_logs.vue b/app/assets/javascripts/logs/components/environment_logs.vue index 92d4be81c75..70b3af8dc75 100644 --- a/app/assets/javascripts/logs/components/environment_logs.vue +++ b/app/assets/javascripts/logs/components/environment_logs.vue @@ -7,17 +7,15 @@ import { GlAlert, GlDropdown, GlDropdownHeader, - GlDropdownDivider, GlDropdownItem, - GlFormGroup, - GlSearchBoxByClick, GlInfiniteScroll, } from '@gitlab/ui'; -import { s__ } from '~/locale'; -import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; + +import LogSimpleFilters from './log_simple_filters.vue'; +import LogAdvancedFilters from './log_advanced_filters.vue'; import LogControlButtons from './log_control_buttons.vue'; -import { timeRanges, defaultTimeRange } from '~/vue_shared/constants'; +import { defaultTimeRange } from '~/vue_shared/constants'; import { timeRangeFromUrl } from '~/monitoring/utils'; import { formatDate } from '../utils'; @@ -28,12 +26,10 @@ export default { GlAlert, GlDropdown, GlDropdownHeader, - GlDropdownDivider, GlDropdownItem, - GlFormGroup, - GlSearchBoxByClick, GlInfiniteScroll, - DateTimePicker, + LogSimpleFilters, + LogAdvancedFilters, LogControlButtons, }, filters: { @@ -63,49 +59,22 @@ export default { traceHeight: 600, data() { return { - searchQuery: '', - timeRanges, isElasticStackCalloutDismissed: false, scrollDownButtonDisabled: true, }; }, computed: { ...mapState('environmentLogs', ['environments', 'timeRange', 'logs', 'pods']), - ...mapGetters('environmentLogs', ['trace']), - - timeRangeModel: { - get() { - return this.timeRange.selected; - }, - set(val) { - this.setTimeRange(val); - }, - }, + ...mapGetters('environmentLogs', ['trace', 'showAdvancedFilters']), showLoader() { return this.logs.isLoading; }, - advancedFeaturesEnabled() { - const environment = this.environments.options.find( - ({ name }) => name === this.environments.current, - ); - return environment && environment.enable_advanced_logs_querying; - }, - disableAdvancedControls() { - return this.environments.isLoading || !this.advancedFeaturesEnabled; - }, shouldShowElasticStackCallout() { - return !this.isElasticStackCalloutDismissed && this.disableAdvancedControls; - }, - - podDropdownText() { - if (this.pods.current) { - return this.pods.current; - } else if (this.advancedFeaturesEnabled) { - // "All pods" is a valid option when advanced querying is available - return s__('Environments|All pods'); - } - return s__('Environments|No pod selected'); + return ( + !this.isElasticStackCalloutDismissed && + (this.environments.isLoading || !this.showAdvancedFilters) + ); }, }, mounted() { @@ -121,7 +90,6 @@ export default { ...mapActions('environmentLogs', [ 'setInitData', 'setSearch', - 'setTimeRange', 'showPodLogs', 'showEnvironment', 'fetchEnvironments', @@ -131,9 +99,6 @@ export default { isCurrentEnvironment(envName) { return envName === this.environments.current; }, - isCurrentPod(podName) { - return podName === this.pods.current; - }, topReached() { if (!this.logs.isLoading) { this.fetchMoreLogsPrepend(); @@ -167,123 +132,49 @@ export default { </strong> </a> </gl-alert> - <div class="top-bar js-top-bar d-flex"> - <div class="row mx-n1"> - <gl-form-group - id="environments-dropdown-fg" - label-size="sm" - label-for="environments-dropdown" - class="col-3 px-1" + <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 + id="environments-dropdown" + :text="environments.current" + :disabled="environments.isLoading" + class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown" > - <gl-dropdown - id="environments-dropdown" - :text="environments.current" - :disabled="environments.isLoading" - class="d-flex gl-h-32 js-environments-dropdown" - toggle-class="dropdown-menu-toggle" + <gl-dropdown-header class="text-center"> + {{ s__('Environments|Select environment') }} + </gl-dropdown-header> + <gl-dropdown-item + v-for="env in environments.options" + :key="env.id" + @click="showEnvironment(env.name)" > - <gl-dropdown-header class="text-center"> - {{ s__('Environments|Select environment') }} - </gl-dropdown-header> - <gl-dropdown-item - v-for="env in environments.options" - :key="env.id" - @click="showEnvironment(env.name)" - > - <div class="d-flex"> - <gl-icon - :class="{ invisible: !isCurrentEnvironment(env.name) }" - name="status_success_borderless" - /> - <div class="flex-grow-1">{{ env.name }}</div> - </div> - </gl-dropdown-item> - </gl-dropdown> - </gl-form-group> - - <gl-form-group - id="pods-dropdown-fg" - label-size="sm" - label-for="pods-dropdown" - class="col-3 px-1" - > - <gl-dropdown - id="pods-dropdown" - :text="podDropdownText" - :disabled="environments.isLoading" - class="d-flex gl-h-32 js-pods-dropdown" - toggle-class="dropdown-menu-toggle" - > - <gl-dropdown-header class="text-center"> - {{ s__('Environments|Filter by pod') }} - </gl-dropdown-header> - - <template v-if="advancedFeaturesEnabled"> - <gl-dropdown-item key="all-pods" @click="showPodLogs(null)"> - <div class="d-flex"> - <gl-icon - :class="{ invisible: !isCurrentPod(null) }" - name="status_success_borderless" - /> - <div class="flex-grow-1">{{ s__('Environments|All pods') }}</div> - </div> - </gl-dropdown-item> - <gl-dropdown-divider /> - </template> - - <gl-dropdown-item v-if="!pods.options.length" :disabled="true"> - <span class="text-muted"> - {{ s__('Environments|No pods to display') }} - </span> - </gl-dropdown-item> - <gl-dropdown-item - v-for="podName in pods.options" - :key="podName" - class="text-nowrap" - @click="showPodLogs(podName)" - > - <div class="d-flex"> - <gl-icon - :class="{ invisible: !isCurrentPod(podName) }" - name="status_success_borderless" - /> - <div class="flex-grow-1">{{ podName }}</div> - </div> - </gl-dropdown-item> - </gl-dropdown> - </gl-form-group> - <gl-form-group id="search-fg" label-size="sm" label-for="search" class="col-3 px-1"> - <gl-search-box-by-click - v-model.trim="searchQuery" - :disabled="disableAdvancedControls" - :placeholder="s__('Environments|Search')" - class="js-logs-search" - type="search" - autofocus - @submit="setSearch(searchQuery)" - /> - </gl-form-group> - - <gl-form-group - id="dates-fg" - label-size="sm" - label-for="time-window-dropdown" - class="col-3 px-1" - > - <date-time-picker - ref="dateTimePicker" - v-model="timeRangeModel" - class="w-100 gl-h-32" - right - :disabled="disableAdvancedControls" - :options="timeRanges" - /> - </gl-form-group> + <div class="d-flex"> + <gl-icon + :class="{ invisible: !isCurrentEnvironment(env.name) }" + name="status_success_borderless" + /> + <div class="flex-grow-1">{{ env.name }}</div> + </div> + </gl-dropdown-item> + </gl-dropdown> </div> + <log-advanced-filters + v-if="showAdvancedFilters" + ref="log-advanced-filters" + class="d-md-flex flex-grow-1" + :disabled="environments.isLoading" + /> + <log-simple-filters + v-else + ref="log-simple-filters" + class="d-md-flex flex-grow-1" + :disabled="environments.isLoading" + /> + <log-control-buttons ref="scrollButtons" - class="controllers" + class="flex-grow-0 pr-2 mb-2 controllers" :scroll-down-button-disabled="scrollDownButtonDisabled" @refresh="showPodLogs(pods.current)" @scrollDown="scrollDown" diff --git a/app/assets/javascripts/logs/components/log_advanced_filters.vue b/app/assets/javascripts/logs/components/log_advanced_filters.vue new file mode 100644 index 00000000000..dfbd858bf18 --- /dev/null +++ b/app/assets/javascripts/logs/components/log_advanced_filters.vue @@ -0,0 +1,128 @@ +<script> +import { s__ } from '~/locale'; +import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; +import { mapActions, mapState } from 'vuex'; +import { + GlIcon, + GlDropdown, + GlDropdownHeader, + GlDropdownDivider, + GlDropdownItem, + GlSearchBoxByClick, +} from '@gitlab/ui'; +import { timeRanges } from '~/vue_shared/constants'; + +export default { + components: { + GlIcon, + GlDropdown, + GlDropdownHeader, + GlDropdownDivider, + GlDropdownItem, + GlSearchBoxByClick, + DateTimePicker, + }, + props: { + disabled: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + timeRanges, + searchQuery: '', + }; + }, + computed: { + ...mapState('environmentLogs', ['timeRange', 'pods']), + + timeRangeModel: { + get() { + return this.timeRange.selected; + }, + set(val) { + this.setTimeRange(val); + }, + }, + + podDropdownText() { + return this.pods.current || s__('Environments|All pods'); + }, + }, + methods: { + ...mapActions('environmentLogs', ['setSearch', 'showPodLogs', 'setTimeRange']), + isCurrentPod(podName) { + return podName === this.pods.current; + }, + }, +}; +</script> +<template> + <div> + <gl-dropdown + ref="podsDropdown" + :text="podDropdownText" + :disabled="disabled" + class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown" + > + <gl-dropdown-header class="text-center"> + {{ s__('Environments|Filter by pod') }} + </gl-dropdown-header> + + <gl-dropdown-item v-if="!pods.options.length" disabled> + <span ref="noPodsMsg" class="text-muted"> + {{ s__('Environments|No pods to display') }} + </span> + </gl-dropdown-item> + + <template v-else> + <gl-dropdown-item ref="allPodsOption" key="all-pods" @click="showPodLogs(null)"> + <div class="d-flex"> + <gl-icon + :class="{ invisible: pods.current !== null }" + name="status_success_borderless" + /> + <div class="flex-grow-1">{{ s__('Environments|All pods') }}</div> + </div> + </gl-dropdown-item> + <gl-dropdown-divider /> + <gl-dropdown-item + v-for="podName in pods.options" + :key="podName" + class="text-nowrap" + @click="showPodLogs(podName)" + > + <div class="d-flex"> + <gl-icon + :class="{ invisible: !isCurrentPod(podName) }" + name="status_success_borderless" + /> + <div class="flex-grow-1">{{ podName }}</div> + </div> + </gl-dropdown-item> + </template> + </gl-dropdown> + + <gl-search-box-by-click + ref="searchBox" + v-model.trim="searchQuery" + :disabled="disabled" + :placeholder="s__('Environments|Search')" + class="mb-2 pr-2 flex-grow-1" + type="search" + autofocus + @submit="setSearch(searchQuery)" + /> + + <date-time-picker + ref="dateTimePicker" + v-model="timeRangeModel" + :disabled="disabled" + :options="timeRanges" + class="mb-2 gl-h-32 pr-2 d-block date-time-picker-wrapper" + right + /> + </div> +</template> diff --git a/app/assets/javascripts/logs/components/log_simple_filters.vue b/app/assets/javascripts/logs/components/log_simple_filters.vue new file mode 100644 index 00000000000..21fe1695624 --- /dev/null +++ b/app/assets/javascripts/logs/components/log_simple_filters.vue @@ -0,0 +1,73 @@ +<script> +import { s__ } from '~/locale'; +import { mapActions, mapState } from 'vuex'; +import { GlIcon, GlDropdown, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui'; + +export default { + components: { + GlIcon, + GlDropdown, + GlDropdownHeader, + GlDropdownItem, + }, + props: { + disabled: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + searchQuery: '', + }; + }, + computed: { + ...mapState('environmentLogs', ['pods']), + + podDropdownText() { + return this.pods.current || s__('Environments|No pod selected'); + }, + }, + methods: { + ...mapActions('environmentLogs', ['showPodLogs']), + isCurrentPod(podName) { + return podName === this.pods.current; + }, + }, +}; +</script> +<template> + <div> + <gl-dropdown + ref="podsDropdown" + :text="podDropdownText" + :disabled="disabled" + class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown" + > + <gl-dropdown-header class="text-center"> + {{ s__('Environments|Select pod') }} + </gl-dropdown-header> + + <gl-dropdown-item v-if="!pods.options.length" disabled> + <span ref="noPodsMsg" class="text-muted"> + {{ s__('Environments|No pods to display') }} + </span> + </gl-dropdown-item> + <gl-dropdown-item + v-for="podName in pods.options" + :key="podName" + class="text-nowrap" + @click="showPodLogs(podName)" + > + <div class="d-flex"> + <gl-icon + :class="{ invisible: !isCurrentPod(podName) }" + name="status_success_borderless" + /> + <div class="flex-grow-1">{{ podName }}</div> + </div> + </gl-dropdown-item> + </gl-dropdown> + </div> +</template> diff --git a/app/assets/javascripts/logs/stores/getters.js b/app/assets/javascripts/logs/stores/getters.js index 8770306fdd6..d92969c5389 100644 --- a/app/assets/javascripts/logs/stores/getters.js +++ b/app/assets/javascripts/logs/stores/getters.js @@ -5,5 +5,9 @@ const mapTrace = ({ timestamp = null, pod = '', message = '' }) => export const trace = state => state.logs.lines.map(mapTrace).join('\n'); -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; +export const showAdvancedFilters = state => { + const environment = state.environments.options.find( + ({ name }) => name === state.environments.current, + ); + return Boolean(environment?.enable_advanced_logs_querying); +}; |