diff options
Diffstat (limited to 'app/assets/javascripts/logs')
-rw-r--r-- | app/assets/javascripts/logs/components/environment_logs.vue | 84 |
1 files changed, 60 insertions, 24 deletions
diff --git a/app/assets/javascripts/logs/components/environment_logs.vue b/app/assets/javascripts/logs/components/environment_logs.vue index 03019e4c25e..92d4be81c75 100644 --- a/app/assets/javascripts/logs/components/environment_logs.vue +++ b/app/assets/javascripts/logs/components/environment_logs.vue @@ -3,8 +3,10 @@ import { throttle } from 'lodash'; import { mapActions, mapState, mapGetters } from 'vuex'; import { GlSprintf, + GlIcon, GlAlert, GlDropdown, + GlDropdownHeader, GlDropdownDivider, GlDropdownItem, GlFormGroup, @@ -22,8 +24,10 @@ import { formatDate } from '../utils'; export default { components: { GlSprintf, + GlIcon, GlAlert, GlDropdown, + GlDropdownHeader, GlDropdownDivider, GlDropdownItem, GlFormGroup, @@ -124,6 +128,12 @@ export default { 'fetchMoreLogsPrepend', ]), + isCurrentEnvironment(envName) { + return envName === this.environments.current; + }, + isCurrentPod(podName) { + return podName === this.pods.current; + }, topReached() { if (!this.logs.isLoading) { this.fetchMoreLogsPrepend(); @@ -161,7 +171,6 @@ export default { <div class="row mx-n1"> <gl-form-group id="environments-dropdown-fg" - :label="s__('Environments|Environment')" label-size="sm" label-for="environments-dropdown" class="col-3 px-1" @@ -173,18 +182,27 @@ export default { 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)" > - {{ 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="s__('Environments|Logs from')" label-size="sm" label-for="pods-dropdown" class="col-3 px-1" @@ -196,24 +214,58 @@ export default { 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)"> - {{ s__('Environments|All pods') }} + <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)" > - {{ 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="s__('Environments|Show last')" label-size="sm" label-for="time-window-dropdown" class="col-3 px-1" @@ -222,32 +274,16 @@ export default { ref="dateTimePicker" v-model="timeRangeModel" class="w-100 gl-h-32" + right :disabled="disableAdvancedControls" :options="timeRanges" /> </gl-form-group> - <gl-form-group - id="search-fg" - :label="s__('Environments|Search')" - 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> </div> <log-control-buttons ref="scrollButtons" - class="controllers align-self-end mb-1" + class="controllers" :scroll-down-button-disabled="scrollDownButtonDisabled" @refresh="showPodLogs(pods.current)" @scrollDown="scrollDown" |