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

92.31% Statements 12/13
100% Branches 8/8
85.71% Functions 6/7
92.31% Lines 12/13

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 101 102 103 104 105 106 107 108 109 110 111  2x   2x 2x   2x 2x   2x                                           14x           16x     14x     15x         28x                                                                           1217x                                                
<script>
import { GlPagination, GlTable } from '@gitlab/ui';
 
import { getParameterValues, setUrlParams } from '~/lib/utils/url_utility';
import { s__ } from '~/locale';
 
import HtmlTableCell from './table_cells/html_table_cell.vue';
import UrlTableCell from './table_cells/url_table_cell.vue';
 
const TABLE_HEADER_CLASSES = 'bg-transparent border-bottom p-3';
 
export default {
  components: {
    HtmlTableCell,
    GlTable,
    GlPagination,
    UrlTableCell,
  },
  props: {
    events: {
      type: Array,
      required: false,
      default: () => [],
    },
    isLastPage: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      page: parseInt(getParameterValues('page')[0], 10) || 1,
    };
  },
  computed: {
    displayPagination() {
      return this.events.length > 0;
    },
    prevPage() {
      return this.page > 1 ? this.page - 1 : null;
    },
    nextPage() {
      return !this.isLastPage ? this.page + 1 : null;
    },
  },
  methods: {
    generateLink(page) {
      return setUrlParams({ page });
    },
  },
  fields: [
    {
      key: 'author',
      label: s__('AuditLogs|Author'),
      thClass: TABLE_HEADER_CLASSES,
    },
    {
      key: 'object',
      label: s__('AuditLogs|Object'),
      thClass: TABLE_HEADER_CLASSES,
    },
    {
      key: 'action',
      label: s__('AuditLogs|Action'),
      thClass: TABLE_HEADER_CLASSES,
    },
    {
      key: 'target',
      label: s__('AuditLogs|Target'),
      thClass: TABLE_HEADER_CLASSES,
    },
    {
      key: 'ip_address',
      label: s__('AuditLogs|IP Address'),
      thClass: TABLE_HEADER_CLASSES,
    },
    {
      key: 'date',
      label: s__('AuditLogs|Date'),
      thClass: TABLE_HEADER_CLASSES,
    },
  ],
};
</script>
 
<template>
  <div class="audit-log-table" data-qa-selector="audit_log_table">
    <gl-table class="gl-mt-5" :fields="$options.fields" :items="events" show-empty stacked="md">
      <template #cell(author)="{ value: { url, name } }">
        <url-table-cell :url="url" :name="name" />
      </template>
      <template #cell(object)="{ value: { url, name } }">
        <url-table-cell :url="url" :name="name" />
      </template>
      <template #cell(action)="{ value }">
        <html-table-cell :html="value" />
      </template>
    </gl-table>
    <gl-pagination
      v-if="displayPagination"
      v-model="page"
      :prev-page="prevPage"
      :next-page="nextPage"
      :link-gen="generateLink"
      align="center"
      class="w-100"
    />
  </div>
</template>