All files / ee/app/assets/javascripts/audit_events/components audit_events_app.vue

90% Statements 9/10
100% Branches 2/2
75% Functions 3/4
90% Lines 9/10

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  1x 1x 1x 1x 1x 1x                                                                               10x     11x                 36x                                                
<script>
import { mapActions, mapState, mapGetters } from 'vuex';
import AuditEventsExportButton from './audit_events_export_button.vue';
import AuditEventsFilter from './audit_events_filter.vue';
import AuditEventsTable from './audit_events_table.vue';
import DateRangeField from './date_range_field.vue';
import SortingField from './sorting_field.vue';
 
export default {
  components: {
    AuditEventsFilter,
    DateRangeField,
    SortingField,
    AuditEventsTable,
    AuditEventsExportButton,
  },
  props: {
    events: {
      type: Array,
      required: false,
      default: () => [],
    },
    isLastPage: {
      type: Boolean,
      required: false,
      default: false,
    },
    filterTokenOptions: {
      type: Array,
      required: true,
    },
    exportUrl: {
      type: String,
      required: false,
      default: '',
    },
    showFilter: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  computed: {
    ...mapState(['filterValue', 'startDate', 'endDate', 'sortBy']),
    ...mapGetters(['buildExportHref']),
    exportHref() {
      return this.buildExportHref(this.exportUrl);
    },
    hasExportUrl() {
      return this.exportUrl.length;
    },
  },
  methods: {
    ...mapActions(['setDateRange', 'setFilterValue', 'setSortBy', 'searchForAuditEvents']),
  },
};
</script>
 
<template>
  <div>
    <header>
      <div class="gl-my-5 gl-display-flex gl-flex-direction-row gl-justify-content-end">
        <audit-events-export-button v-if="hasExportUrl" :export-href="exportHref" />
      </div>
    </header>
    <div class="audit-log-filter row-content-block second-block gl-pb-0">
      <div class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row!">
        <audit-events-filter
          v-if="showFilter"
          :filter-token-options="filterTokenOptions"
          :value="filterValue"
          class="gl-mr-5 gl-mb-5"
          @selected="setFilterValue"
          @submit="searchForAuditEvents"
        />
        <sorting-field :sort-by="sortBy" @selected="setSortBy" />
      </div>
      <date-range-field :start-date="startDate" :end-date="endDate" @selected="setDateRange" />
    </div>
    <audit-events-table :events="events" :is-last-page="isLastPage" />
  </div>
</template>