All files / app/assets/javascripts/logs/components log_advanced_filters.vue

100% Statements 17/17
100% Branches 4/4
100% Functions 8/8
100% Lines 17/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100  2x 2x 2x 2x 2x 2x 2x 2x                             14x                 14x     1x                 14x 40x   6x       14x                                     2x         49x                                                
<script>
import { GlFilteredSearch } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { s__ } from '~/locale';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
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: OPERATOR_IS_ONLY,
          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>