98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<script>
|
|
import { mapActions, mapState } from 'vuex';
|
|
import { GlFilteredSearch } from '@gitlab/ui';
|
|
import { __, s__ } from '~/locale';
|
|
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
|
|
import { timeRanges } from '~/vue_shared/constants';
|
|
import { TOKEN_TYPE_POD_NAME } from '../constants';
|
|
import TokenWithLoadingState from './tokens/token_with_loading_state.vue';
|
|
|
|
export default {
|
|
components: {
|
|
GlFilteredSearch,
|
|
DateTimePicker,
|
|
},
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
timeRanges,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('environmentLogs', ['timeRange', 'pods', 'logs']),
|
|
|
|
timeRangeModel: {
|
|
get() {
|
|
return this.timeRange.selected;
|
|
},
|
|
set(val) {
|
|
this.setTimeRange(val);
|
|
},
|
|
},
|
|
/**
|
|
* Token options.
|
|
*
|
|
* Returns null when no pods are present, so suggestions are displayed in the token
|
|
*/
|
|
podOptions() {
|
|
if (this.pods.options.length) {
|
|
return this.pods.options.map(podName => ({ value: podName, title: podName }));
|
|
}
|
|
return null;
|
|
},
|
|
|
|
tokens() {
|
|
return [
|
|
{
|
|
icon: 'pod',
|
|
type: TOKEN_TYPE_POD_NAME,
|
|
title: s__('Environments|Pod name'),
|
|
token: TokenWithLoadingState,
|
|
operators: [{ value: '=', description: __('is'), default: 'true' }],
|
|
unique: true,
|
|
options: this.podOptions,
|
|
loading: this.logs.isLoading,
|
|
noOptionsText: s__('Environments|No pods to display'),
|
|
},
|
|
];
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions('environmentLogs', ['showFilteredLogs', 'setTimeRange']),
|
|
|
|
filteredSearchSubmit(filters) {
|
|
this.showFilteredLogs(filters);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="mb-2 pr-2 flex-grow-1 min-width-0">
|
|
<gl-filtered-search
|
|
:placeholder="__('Search')"
|
|
:clear-button-title="__('Clear')"
|
|
:close-button-title="__('Close')"
|
|
class="gl-h-32"
|
|
:disabled="disabled || logs.isLoading"
|
|
:available-tokens="tokens"
|
|
@submit="filteredSearchSubmit"
|
|
/>
|
|
</div>
|
|
|
|
<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>
|