xref: /openbmc/webui-vue/src/views/Logs/PostCodeLogs/PostCodeLogs.vue (revision ce7db82c9582c4dac04ac81d9af6b557ae7965e3)
1<template>
2  <b-container fluid="xl">
3    <page-title />
4    <b-row class="align-items-start">
5      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
6        <search
7          :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
8          @change-search="onChangeSearchInput"
9          @clear-search="onClearSearchInput"
10        />
11        <div class="ml-sm-4">
12          <table-cell-count
13            :filtered-items-count="filteredRows"
14            :total-number-of-cells="allLogs.length"
15          ></table-cell-count>
16        </div>
17      </b-col>
18      <b-col sm="8" md="7" xl="6">
19        <table-date-filter @change="onChangeDateTimeFilter" />
20      </b-col>
21    </b-row>
22    <b-row>
23      <b-col xl="12" class="text-right">
24        <b-button
25          variant="link"
26          :disabled="allLogs.length === 0"
27          @click="deleteAllLogs"
28        >
29          <icon-delete /> {{ $t('global.action.deleteAll') }}
30        </b-button>
31        <b-button
32          variant="primary"
33          :disabled="allLogs.length === 0"
34          :download="exportFileNameByDate()"
35          :href="href"
36        >
37          <icon-export /> {{ $t('pagePostCodeLogs.button.exportAll') }}
38        </b-button>
39      </b-col>
40    </b-row>
41    <b-row>
42      <b-col>
43        <table-toolbar
44          ref="toolbar"
45          :selected-items-count="selectedRows.length"
46          @clear-selected="clearSelectedRows($refs.table)"
47        >
48          <template #toolbar-buttons>
49            <table-toolbar-export
50              :data="batchExportData"
51              :file-name="exportFileNameByDate()"
52            />
53          </template>
54        </table-toolbar>
55        <b-table
56          id="table-post-code-logs"
57          ref="table"
58          responsive="md"
59          selectable
60          no-select-on-click
61          sort-icon-left
62          hover
63          no-sort-reset
64          sort-desc
65          show-empty
66          sort-by="id"
67          :fields="fields"
68          :items="filteredLogs"
69          :empty-text="$t('global.table.emptyMessage')"
70          :empty-filtered-text="$t('global.table.emptySearchMessage')"
71          :per-page="perPage"
72          :current-page="currentPage"
73          :filter="searchFilter"
74          :busy="isBusy"
75          @filtered="onFiltered"
76          @row-selected="onRowSelected($event, filteredLogs.length)"
77        >
78          <!-- Checkbox column -->
79          <template #head(checkbox)>
80            <b-form-checkbox
81              v-model="tableHeaderCheckboxModel"
82              data-test-id="postCode-checkbox-selectAll"
83              :indeterminate="tableHeaderCheckboxIndeterminate"
84              @change="onChangeHeaderCheckbox($refs.table)"
85            >
86              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
87            </b-form-checkbox>
88          </template>
89          <template #cell(checkbox)="row">
90            <b-form-checkbox
91              v-model="row.rowSelected"
92              :data-test-id="`postCode-checkbox-selectRow-${row.index}`"
93              @change="toggleSelectRow($refs.table, row.index)"
94            >
95              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
96            </b-form-checkbox>
97          </template>
98          <!-- Date column -->
99          <template #cell(date)="{ value }">
100            <p class="mb-0">{{ $filters.formatDate(value) }}</p>
101            <p class="mb-0">{{ $filters.formatTime(value) }}</p>
102          </template>
103
104          <!-- Actions column -->
105          <template #cell(actions)="row">
106            <table-row-action
107              v-for="(action, index) in row.item.actions"
108              :key="index"
109              :value="action.value"
110              :title="action.title"
111              :row-data="row.item"
112              :btn-icon-only="true"
113              :export-name="exportFileNameByDate(action.value)"
114              :download-location="row.item.uri"
115              :download-in-new-tab="true"
116              :show-button="false"
117            >
118              <template #icon>
119                <icon-export v-if="action.value === 'export'" />
120                <icon-download v-if="action.value === 'download'" />
121              </template>
122            </table-row-action>
123          </template>
124        </b-table>
125      </b-col>
126    </b-row>
127
128    <!-- Table pagination -->
129    <b-row>
130      <b-col sm="6">
131        <b-form-group
132          class="table-pagination-select"
133          :label="$t('global.table.itemsPerPage')"
134          label-for="pagination-items-per-page"
135        >
136          <b-form-select
137            id="pagination-items-per-page"
138            v-model="perPage"
139            :options="itemsPerPageOptions"
140          />
141        </b-form-group>
142      </b-col>
143      <b-col sm="6">
144        <b-pagination
145          v-model="currentPage"
146          first-number
147          last-number
148          :per-page="perPage"
149          :total-rows="getTotalRowCount(filteredRows)"
150          aria-controls="table-post-code-logs"
151        />
152      </b-col>
153    </b-row>
154  </b-container>
155</template>
156
157<script>
158import IconDelete from '@carbon/icons-vue/es/trash-can/20';
159import IconDownload from '@carbon/icons-vue/es/download/20';
160import IconExport from '@carbon/icons-vue/es/document--export/20';
161import { omit } from 'lodash';
162import PageTitle from '@/components/Global/PageTitle';
163import Search from '@/components/Global/Search';
164import TableCellCount from '@/components/Global/TableCellCount';
165import TableDateFilter from '@/components/Global/TableDateFilter';
166import TableRowAction from '@/components/Global/TableRowAction';
167import TableToolbar from '@/components/Global/TableToolbar';
168import TableToolbarExport from '@/components/Global/TableToolbarExport';
169import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
170import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
171import BVPaginationMixin, {
172  currentPage,
173  perPage,
174  itemsPerPageOptions,
175} from '@/components/Mixins/BVPaginationMixin';
176import BVTableSelectableMixin, {
177  selectedRows,
178  tableHeaderCheckboxModel,
179  tableHeaderCheckboxIndeterminate,
180} from '@/components/Mixins/BVTableSelectableMixin';
181import BVToastMixin from '@/components/Mixins/BVToastMixin';
182import TableSortMixin from '@/components/Mixins/TableSortMixin';
183import TableRowExpandMixin, {
184  expandRowLabel,
185} from '@/components/Mixins/TableRowExpandMixin';
186import SearchFilterMixin, {
187  searchFilter,
188} from '@/components/Mixins/SearchFilterMixin';
189import { useI18n } from 'vue-i18n';
190import i18n from '@/i18n';
191
192export default {
193  components: {
194    IconDelete,
195    IconExport,
196    IconDownload,
197    PageTitle,
198    Search,
199    TableCellCount,
200    TableRowAction,
201    TableToolbar,
202    TableToolbarExport,
203    TableDateFilter,
204  },
205  mixins: [
206    BVPaginationMixin,
207    BVTableSelectableMixin,
208    BVToastMixin,
209    LoadingBarMixin,
210    TableFilterMixin,
211    TableSortMixin,
212    TableRowExpandMixin,
213    SearchFilterMixin,
214  ],
215  beforeRouteLeave(to, from, next) {
216    // Hide loader if the user navigates to another page
217    // before request is fulfilled.
218    this.hideLoader();
219    next();
220  },
221  data() {
222    return {
223      $t: useI18n().t,
224      isBusy: true,
225      fields: [
226        {
227          key: 'checkbox',
228          sortable: false,
229        },
230        {
231          key: 'date',
232          label: i18n.global.t('pagePostCodeLogs.table.created'),
233          sortable: true,
234        },
235        {
236          key: 'timeStampOffset',
237          label: i18n.global.t('pagePostCodeLogs.table.timeStampOffset'),
238        },
239        {
240          key: 'bootCount',
241          label: i18n.global.t('pagePostCodeLogs.table.bootCount'),
242        },
243        {
244          key: 'postCode',
245          label: i18n.global.t('pagePostCodeLogs.table.postCode'),
246        },
247        {
248          key: 'actions',
249          label: '',
250          tdClass: 'text-right text-nowrap',
251        },
252      ],
253      expandRowLabel,
254      activeFilters: [],
255      currentPage: currentPage,
256      filterStartDate: null,
257      filterEndDate: null,
258      itemsPerPageOptions: itemsPerPageOptions,
259      perPage: perPage,
260      searchFilter: searchFilter,
261      searchTotalFilteredRows: 0,
262      selectedRows: selectedRows,
263      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
264      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
265    };
266  },
267  computed: {
268    href() {
269      return `data:text/json;charset=utf-8,${this.exportAllLogsString()}`;
270    },
271    filteredRows() {
272      return this.searchFilter
273        ? this.searchTotalFilteredRows
274        : this.filteredLogs.length;
275    },
276    allLogs() {
277      return this.$store.getters['postCodeLogs/allPostCodes'].map(
278        (postCodes) => {
279          return {
280            ...postCodes,
281            actions: [
282              {
283                value: 'export',
284                title: i18n.global.t('pagePostCodeLogs.action.exportLogs'),
285              },
286              {
287                value: 'download',
288                title: i18n.global.t('pagePostCodeLogs.action.downloadDetails'),
289              },
290            ],
291          };
292        },
293      );
294    },
295    batchExportData() {
296      return this.selectedRows.map((row) => omit(row, 'actions'));
297    },
298    filteredLogsByDate() {
299      return this.getFilteredTableDataByDate(
300        this.allLogs,
301        this.filterStartDate,
302        this.filterEndDate,
303      );
304    },
305    filteredLogs() {
306      return this.getFilteredTableData(
307        this.filteredLogsByDate,
308        this.activeFilters,
309      );
310    },
311  },
312  created() {
313    this.startLoader();
314    this.$store.dispatch('postCodeLogs/getPostCodesLogData').finally(() => {
315      this.endLoader();
316      this.isBusy = false;
317    });
318  },
319  methods: {
320    deleteAllLogs() {
321      this.$bvModal
322        .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), {
323          title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'),
324          okTitle: i18n.global.t('global.action.delete'),
325          okVariant: 'danger',
326          cancelTitle: i18n.global.t('global.action.cancel'),
327          autoFocusButton: 'cancel',
328        })
329        .then((deleteConfirmed) => {
330          if (deleteConfirmed) {
331            this.$store
332              .dispatch('postCodeLogs/deleteAllPostCodeLogs', this.allLogs)
333              .then((message) => this.successToast(message))
334              .catch(({ message }) => this.errorToast(message));
335          }
336        });
337    },
338    exportAllLogsString() {
339      {
340        return this.$store.getters['postCodeLogs/allPostCodes'].map(
341          (postCodes) => {
342            const allLogsString = JSON.stringify(postCodes);
343            return allLogsString;
344          },
345        );
346      }
347    },
348    onFilterChange({ activeFilters }) {
349      this.activeFilters = activeFilters;
350    },
351    onChangeDateTimeFilter({ fromDate, toDate }) {
352      this.filterStartDate = fromDate;
353      this.filterEndDate = toDate;
354    },
355    onFiltered(filteredItems) {
356      this.searchTotalFilteredRows = filteredItems.length;
357    },
358    // Create export file name based on date and action
359    exportFileNameByDate(value) {
360      let date = new Date();
361      date =
362        date.toISOString().slice(0, 10) +
363        '_' +
364        date.toString().split(':').join('-').split(' ')[4];
365      let fileName;
366      if (value === 'download') {
367        fileName = i18n.global.t('pagePostCodeLogs.downloadFilePrefix');
368      } else if (value === 'export') {
369        fileName = i18n.global.t('pagePostCodeLogs.exportFilePrefix');
370      } else {
371        fileName = i18n.global.t('pagePostCodeLogs.allExportFilePrefix');
372      }
373      return fileName + date;
374    },
375  },
376};
377</script>
378