diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index 4783f82..d500c36 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -18,7 +18,7 @@
                 @change-search="onChangeSearchInput"
                 @clear-search="onClearSearchInput"
               />
-              <div class="ml-sm-4">
+              <div class="ms-sm-4">
                 <table-cell-count
                   :filtered-items-count="filteredRows"
                   :total-number-of-cells="allDumps.length"
@@ -30,7 +30,7 @@
             </b-col>
           </b-row>
           <b-row>
-            <b-col class="text-right">
+            <b-col class="text-end">
               <table-filter
                 :filters="tableFilters"
                 @filter-change="onFilterChange"
@@ -38,7 +38,9 @@
             </b-col>
           </b-row>
           <table-toolbar
-            :selected-items-count="selectedRows.length"
+            :selected-items-count="
+              Array.isArray(selectedRows) ? selectedRows.length : 0
+            "
             :actions="batchActions"
             @clear-selected="clearSelectedRows($refs.table)"
             @batch-action="onTableBatchAction"
@@ -48,12 +50,13 @@
             show-empty
             hover
             sort-icon-left
-            no-sort-reset
-            sort-desc
+            must-sort
+            thead-class="table-light"
+            :sort-desc="[true]"
             selectable
             no-select-on-click
             responsive="md"
-            sort-by="dateTime"
+            :sort-by="['dateTime']"
             :fields="fields"
             :items="filteredDumps"
             :empty-text="$t('global.table.emptyMessage')"
@@ -61,16 +64,18 @@
             :filter="searchFilter"
             :busy="isBusy"
             @filtered="onFiltered"
-            @row-selected="onRowSelected($event, filteredTableItems.length)"
+            @row-selected="onRowSelected($event, filteredRows)"
           >
             <!-- Checkbox column -->
             <template #head(checkbox)>
               <b-form-checkbox
                 v-model="tableHeaderCheckboxModel"
                 :indeterminate="tableHeaderCheckboxIndeterminate"
-                @change="onChangeHeaderCheckbox($refs.table)"
+                @change="onChangeHeaderCheckbox($refs.table, $event)"
               >
-                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+                <span class="visually-hidden-focusable">
+                  {{ $t('global.table.selectAll') }}
+                </span>
               </b-form-checkbox>
             </template>
             <template #cell(checkbox)="row">
@@ -78,7 +83,9 @@
                 v-model="row.rowSelected"
                 @change="toggleSelectRow($refs.table, row.index)"
               >
-                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+                <span class="visually-hidden-focusable">
+                  {{ $t('global.table.selectItem') }}
+                </span>
               </b-form-checkbox>
             </template>
 
@@ -135,7 +142,7 @@
           first-number
           last-number
           :per-page="perPage"
-          :total-rows="getTotalRowCount()"
+          :total-rows="getTotalRowCount(filteredRows)"
           aria-controls="table-dump-entries"
         />
       </b-col>
@@ -173,6 +180,7 @@
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
 import i18n from '@/i18n';
 import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   components: {
@@ -202,6 +210,10 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
@@ -235,7 +247,7 @@
           key: 'actions',
           sortable: false,
           label: '',
-          tdClass: 'text-right text-nowrap',
+          tdClass: 'text-end text-nowrap',
         },
       ],
       batchActions: [
@@ -328,78 +340,60 @@
       this.filterStartDate = fromDate;
       this.filterEndDate = toDate;
     },
-    onTableRowAction(action, dump) {
+    async onTableRowAction(action, item) {
       if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(
-            i18n.global.t('pageDumps.modal.deleteDumpConfirmation'),
-            {
-              title: i18n.global.t('pageDumps.modal.deleteDump'),
-              okTitle: i18n.global.t('pageDumps.modal.deleteDump'),
-              cancelTitle: i18n.global.t('global.action.cancel'),
-              autoFocusButton: 'ok',
-            },
-          )
-          .then((deleteConfrimed) => {
-            if (deleteConfrimed) {
-              this.$store
-                .dispatch('dumps/deleteDumps', [dump])
-                .then((messages) => {
-                  messages.forEach(({ type, message }) => {
-                    if (type === 'success') {
-                      this.successToast(message);
-                    } else if (type === 'error') {
-                      this.errorToast(message);
-                    }
-                  });
-                });
-            }
+        const ok = await this.confirmDialog(
+          i18n.global.t('pageDumps.modal.deleteDumpConfirmation', 1),
+          {
+            title: i18n.global.t('pageDumps.modal.deleteDump', 1),
+            okTitle: i18n.global.t('pageDumps.modal.deleteDump', 1),
+            cancelTitle: i18n.global.t('global.action.cancel'),
+          },
+        );
+        if (ok)
+          this.$store.dispatch('dumps/deleteDumps', [item]).then((messages) => {
+            messages.forEach(({ type, message }) => {
+              if (type === 'success') {
+                this.successToast(message);
+              } else if (type === 'error') {
+                this.errorToast(message);
+              }
+            });
           });
       }
     },
-    onTableBatchAction(action) {
+    async onTableBatchAction(action) {
       if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(
-            i18n.global.t(
-              'pageDumps.modal.deleteDumpConfirmation',
-              this.selectedRows.length,
-            ),
-            {
-              title: i18n.global.t(
-                'pageDumps.modal.deleteDump',
-                this.selectedRows.length,
-              ),
-              okTitle: i18n.global.t(
-                'pageDumps.modal.deleteDump',
-                this.selectedRows.length,
-              ),
-              cancelTitle: i18n.global.t('global.action.cancel'),
-              autoFocusButton: 'ok',
-            },
-          )
-          .then((deleteConfrimed) => {
-            if (deleteConfrimed) {
-              if (this.selectedRows.length === this.dumps.length) {
-                this.$store
-                  .dispatch('dumps/deleteAllDumps')
-                  .then((success) => this.successToast(success))
-                  .catch(({ message }) => this.errorToast(message));
-              } else {
-                this.$store
-                  .dispatch('dumps/deleteDumps', this.selectedRows)
-                  .then((messages) => {
-                    messages.forEach(({ type, message }) => {
-                      if (type === 'success') {
-                        this.successToast(message);
-                      } else if (type === 'error') {
-                        this.errorToast(message);
-                      }
-                    });
-                  });
-              }
-            }
-          });
+        const ids = (this.selectedRows || []).map((r) => r.Id);
+        const count = ids.length;
+        const ok = await this.confirmDialog(
+          i18n.global.t('pageDumps.modal.deleteDumpConfirmation', count),
+          {
+            title: i18n.global.t('pageDumps.modal.deleteDump', count),
+            okTitle: i18n.global.t('pageDumps.modal.deleteDump', count),
+            cancelTitle: i18n.global.t('global.action.cancel'),
+          },
+        );
+        if (ok) {
+          if (this.selectedRows.length === this.dumps.length) {
+            this.$store
+              .dispatch('dumps/deleteAllDumps')
+              .then((success) => this.successToast(success))
+              .catch(({ message }) => this.errorToast(message));
+          } else {
+            this.$store
+              .dispatch('dumps/deleteDumps', this.selectedRows)
+              .then((messages) => {
+                messages.forEach(({ type, message }) => {
+                  if (type === 'success') {
+                    this.successToast(message);
+                  } else if (type === 'error') {
+                    this.errorToast(message);
+                  }
+                });
+              });
+          }
+        }
       }
     },
     exportFileName(row) {
@@ -407,6 +401,9 @@
       filename = filename.replace(RegExp(' ', 'g'), '_');
       return filename;
     },
+    confirmDialog(message, options = {}) {
+      return this.$confirm({ message, ...options });
+    },
   },
 };
 </script>
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index b27aeba..af9df83 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -24,14 +24,16 @@
       <alert variant="info" class="mb-3" :show="selectedDumpType === 'system'">
         {{ $t('pageDumps.form.systemDumpInfo') }}
       </alert>
-      <b-button variant="primary" type="submit" form="form-new-dump">
+      <b-button
+        variant="primary"
+        type="submit"
+        form="form-new-dump"
+        class="mt-3"
+      >
         {{ $t('pageDumps.form.initiateDump') }}
       </b-button>
     </b-form>
-    <modal-confirmation
-      :require-confirmation="selectedDumpType === 'system'"
-      @ok="createSystemDump"
-    />
+    <modal-confirmation v-model="showConfirmation" @ok="createSystemDump" />
   </div>
 </template>
 
@@ -44,19 +46,23 @@
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import i18n from '@/i18n';
 import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   components: { Alert, ModalConfirmation },
   mixins: [BVToastMixin, VuelidateMixin],
   setup() {
+    const bvModal = useModal();
     return {
       v$: useVuelidate(),
+      bvModal,
     };
   },
   data() {
     return {
       $t: useI18n().t,
       selectedDumpType: null,
+      showConfirmation: false,
       dumpTypeOptions: [
         { value: 'bmc', text: i18n.global.t('pageDumps.dumpTypes.bmcDump') },
         {
@@ -99,7 +105,7 @@
       }
     },
     showConfirmationModal() {
-      this.$bvModal.show('modal-confirmation');
+      this.showConfirmation = true;
     },
     createSystemDump() {
       this.$store
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index 77f03b0..466f6ce 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -26,7 +26,7 @@
     >
       {{ $t('global.form.required') }}
     </b-form-invalid-feedback>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 392125c..e149739 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -9,7 +9,7 @@
           @change-search="onChangeSearchInput"
           @clear-search="onClearSearchInput"
         />
-        <div class="ml-sm-4">
+        <div class="ms-sm-4">
           <table-cell-count
             :filtered-items-count="filteredRows"
             :total-number-of-cells="allLogs.length"
@@ -21,7 +21,7 @@
       </b-col>
     </b-row>
     <b-row>
-      <b-col class="text-right">
+      <b-col class="text-end">
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
         <b-button
           variant="link"
@@ -74,13 +74,13 @@
           no-select-on-click
           sort-icon-left
           hover
-          no-sort-reset
-          sort-desc
+          must-sort
+          thead-class="table-light"
+          :sort-desc="[true]"
           show-empty
-          sort-by="id"
+          :sort-by="['id']"
           :fields="fields"
           :items="filteredLogs"
-          :sort-compare="onSortCompare"
           :empty-text="$t('global.table.emptyMessage')"
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
           :per-page="perPage"
@@ -96,9 +96,11 @@
               v-model="tableHeaderCheckboxModel"
               data-test-id="eventLogs-checkbox-selectAll"
               :indeterminate="tableHeaderCheckboxIndeterminate"
-              @change="onChangeHeaderCheckbox($refs.table)"
+              @change="onChangeHeaderCheckbox($refs.table, $event)"
             >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+              <span class="visually-hidden-focusable">
+                {{ $t('global.table.selectAll') }}
+              </span>
             </b-form-checkbox>
           </template>
           <template #cell(checkbox)="row">
@@ -107,7 +109,9 @@
               :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
               @change="toggleSelectRow($refs.table, row.index)"
             >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              <span class="visually-hidden-focusable">
+                {{ $t('global.table.selectItem') }}
+              </span>
             </b-form-checkbox>
           </template>
 
@@ -120,7 +124,8 @@
               class="btn-icon-only"
               @click="toggleRowDetails(row)"
             >
-              <icon-chevron />
+              <icon-chevron v-if="!row.detailsShowing" />
+              <icon-chevron-up v-else />
             </b-button>
           </template>
 
@@ -181,7 +186,9 @@
               <span v-if="row.item.status">
                 {{ $t('pageEventLogs.resolved') }}
               </span>
-              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+              <span v-else>
+                {{ $t('pageEventLogs.unresolved') }}
+              </span>
             </b-form-checkbox>
           </template>
           <template #cell(filterByStatus)="{ value }">
@@ -244,6 +251,7 @@
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
 import IconExport from '@carbon/icons-vue/es/document--export/20';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import IconChevronUp from '@carbon/icons-vue/es/chevron--up/20';
 import IconDownload from '@carbon/icons-vue/es/download/20';
 import { omit } from 'lodash';
 
@@ -280,6 +288,7 @@
 } from '@/components/Mixins/SearchFilterMixin';
 import { useI18n } from 'vue-i18n';
 import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   components: {
@@ -287,6 +296,7 @@
     IconExport,
     IconTrashcan,
     IconChevron,
+    IconChevronUp,
     IconDownload,
     PageTitle,
     Search,
@@ -315,6 +325,10 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
@@ -361,7 +375,7 @@
           key: 'actions',
           sortable: false,
           label: '',
-          tdClass: 'text-right text-nowrap',
+          tdClass: 'text-end text-nowrap',
         },
       ],
       tableFilters:
@@ -495,23 +509,23 @@
         })
         .catch(({ message }) => this.errorToast(message));
     },
-    deleteAllLogs() {
-      this.$bvModal
-        .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), {
+    async deleteAllLogs() {
+      const ok = await this.confirmDialog(
+        i18n.global.t('pageEventLogs.modal.deleteAllMessage'),
+        {
           title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'),
           okTitle: i18n.global.t('global.action.delete'),
           okVariant: 'danger',
           cancelTitle: i18n.global.t('global.action.cancel'),
           autoFocusButton: 'cancel',
-        })
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
+        },
+      );
+      if (ok) {
+        this.$store
+          .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+          .then((message) => this.successToast(message))
+          .catch(({ message }) => this.errorToast(message));
+      }
     },
     deleteLogs(uris) {
       this.$store
@@ -537,66 +551,48 @@
     onFilterChange({ activeFilters }) {
       this.activeFilters = activeFilters;
     },
-    onSortCompare(a, b, key) {
-      if (key === 'severity') {
-        return this.sortStatus(a, b, key);
-      }
-    },
     onTableRowAction(action, { uri }) {
       if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteMessage'), {
-            title: i18n.global.t('pageEventLogs.modal.deleteTitle'),
+        this.confirmDialog(i18n.global.t('pageEventLogs.modal.deleteMessage'), {
+          title: i18n.global.t('pageEventLogs.modal.deleteTitle'),
+          okTitle: i18n.global.t('global.action.delete'),
+          cancelTitle: i18n.global.t('global.action.cancel'),
+          autoFocusButton: 'ok',
+        }).then((deleteConfirmed) => {
+          if (deleteConfirmed) this.deleteLogs([uri]);
+        });
+      }
+    },
+    async onBatchAction(action) {
+      if (action === 'delete') {
+        const uris = this.selectedRows.map((row) => row.uri);
+        const count = this.selectedRows.length;
+        const ok = await this.confirmDialog(
+          i18n.global.t('pageEventLogs.modal.deleteMessage', count),
+          {
+            title: i18n.global.t('pageEventLogs.modal.deleteTitle', count),
             okTitle: i18n.global.t('global.action.delete'),
             cancelTitle: i18n.global.t('global.action.cancel'),
             autoFocusButton: 'ok',
-          })
-          .then((deleteConfirmed) => {
-            if (deleteConfirmed) this.deleteLogs([uri]);
-          });
-      }
-    },
-    onBatchAction(action) {
-      if (action === 'delete') {
-        const uris = this.selectedRows.map((row) => row.uri);
-        this.$bvModal
-          .msgBoxConfirm(
-            i18n.global.t(
-              'pageEventLogs.modal.deleteMessage',
-              this.selectedRows.length,
-            ),
-            {
-              title: i18n.global.t(
-                'pageEventLogs.modal.deleteTitle',
-                this.selectedRows.length,
-              ),
-              okTitle: i18n.global.t('global.action.delete'),
-              cancelTitle: i18n.global.t('global.action.cancel'),
-              autoFocusButton: 'ok',
-            },
-          )
-          .then((deleteConfirmed) => {
-            if (deleteConfirmed) {
-              if (this.selectedRows.length === this.allLogs.length) {
-                this.$store
-                  .dispatch(
-                    'eventLog/deleteAllEventLogs',
-                    this.selectedRows.length,
-                  )
-                  .then(() => {
-                    this.successToast(
-                      i18n.global.t(
-                        'pageEventLogs.toast.successDelete',
-                        uris.length,
-                      ),
-                    );
-                  })
-                  .catch(({ message }) => this.errorToast(message));
-              } else {
-                this.deleteLogs(uris);
-              }
-            }
-          });
+          },
+        );
+        if (ok) {
+          if (this.selectedRows.length === this.allLogs.length) {
+            this.$store
+              .dispatch('eventLog/deleteAllEventLogs', this.selectedRows.length)
+              .then(() => {
+                this.successToast(
+                  i18n.global.t(
+                    'pageEventLogs.toast.successDelete',
+                    uris.length,
+                  ),
+                );
+              })
+              .catch(({ message }) => this.errorToast(message));
+          } else {
+            this.deleteLogs(uris);
+          }
+        }
       }
     },
     onChangeDateTimeFilter({ fromDate, toDate }) {
@@ -647,6 +643,9 @@
           });
         });
     },
+    confirmDialog(message, options = {}) {
+      return this.$confirm({ message, ...options });
+    },
   },
 };
 </script>
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index 6d8ff90..62caccf 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -8,7 +8,7 @@
           @change-search="onChangeSearchInput"
           @clear-search="onClearSearchInput"
         />
-        <div class="ml-sm-4">
+        <div class="ms-sm-4">
           <table-cell-count
             :filtered-items-count="filteredRows"
             :total-number-of-cells="allLogs.length"
@@ -20,7 +20,7 @@
       </b-col>
     </b-row>
     <b-row>
-      <b-col xl="12" class="text-right">
+      <b-col xl="12" class="text-end">
         <b-button
           variant="link"
           :disabled="allLogs.length === 0"
@@ -34,7 +34,8 @@
           :download="exportFileNameByDate()"
           :href="href"
         >
-          <icon-export /> {{ $t('pagePostCodeLogs.button.exportAll') }}
+          <icon-export />
+          {{ $t('pagePostCodeLogs.button.exportAll') }}
         </b-button>
       </b-col>
     </b-row>
@@ -42,7 +43,9 @@
       <b-col>
         <table-toolbar
           ref="toolbar"
-          :selected-items-count="selectedRows.length"
+          :selected-items-count="
+            Array.isArray(selectedRows) ? selectedRows.length : 0
+          "
           @clear-selected="clearSelectedRows($refs.table)"
         >
           <template #toolbar-buttons>
@@ -60,10 +63,11 @@
           no-select-on-click
           sort-icon-left
           hover
-          no-sort-reset
-          sort-desc
+          must-sort
+          thead-class="table-light"
+          :sort-desc="[true]"
           show-empty
-          sort-by="id"
+          :sort-by="['id']"
           :fields="fields"
           :items="filteredLogs"
           :empty-text="$t('global.table.emptyMessage')"
@@ -81,9 +85,11 @@
               v-model="tableHeaderCheckboxModel"
               data-test-id="postCode-checkbox-selectAll"
               :indeterminate="tableHeaderCheckboxIndeterminate"
-              @change="onChangeHeaderCheckbox($refs.table)"
+              @change="onChangeHeaderCheckbox($refs.table, $event)"
             >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+              <span class="visually-hidden-focusable">
+                {{ $t('global.table.selectAll') }}
+              </span>
             </b-form-checkbox>
           </template>
           <template #cell(checkbox)="row">
@@ -92,7 +98,9 @@
               :data-test-id="`postCode-checkbox-selectRow-${row.index}`"
               @change="toggleSelectRow($refs.table, row.index)"
             >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              <span class="visually-hidden-focusable">
+                {{ $t('global.table.selectItem') }}
+              </span>
             </b-form-checkbox>
           </template>
           <!-- Date column -->
@@ -111,9 +119,12 @@
               :row-data="row.item"
               :btn-icon-only="true"
               :export-name="exportFileNameByDate(action.value)"
-              :download-location="row.item.uri"
-              :download-in-new-tab="true"
-              :show-button="false"
+              :download-location="
+                action.value === 'download' ? '' : row.item.uri
+              "
+              :download-in-new-tab="false"
+              :show-button="action.value === 'download' ? true : false"
+              @click-table-action="onRowAction(action.value, row.item)"
             >
               <template #icon>
                 <icon-export v-if="action.value === 'export'" />
@@ -188,6 +199,7 @@
 } from '@/components/Mixins/SearchFilterMixin';
 import { useI18n } from 'vue-i18n';
 import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
 
 export default {
   components: {
@@ -218,6 +230,10 @@
     this.hideLoader();
     next();
   },
+  setup() {
+    const bvModal = useModal();
+    return { bvModal };
+  },
   data() {
     return {
       $t: useI18n().t,
@@ -247,7 +263,7 @@
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap',
+          tdClass: 'text-end text-nowrap',
         },
       ],
       expandRowLabel,
@@ -317,23 +333,37 @@
     });
   },
   methods: {
-    deleteAllLogs() {
-      this.$bvModal
-        .msgBoxConfirm(i18n.global.t('pageEventLogs.modal.deleteAllMessage'), {
+    onRowAction(action, item) {
+      if (action === 'download') {
+        this.$store
+          .dispatch('postCodeLogs/downloadEntry', item.uri)
+          .then((blob) => {
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = this.exportFileNameByDate('download');
+            link.click();
+            URL.revokeObjectURL(link.href);
+          })
+          .catch(({ message }) => this.errorToast(message));
+      }
+    },
+    async deleteAllLogs() {
+      const deleteConfirmed = await this.confirmDialog(
+        i18n.global.t('pageEventLogs.modal.deleteAllMessage'),
+        {
           title: i18n.global.t('pageEventLogs.modal.deleteAllTitle'),
           okTitle: i18n.global.t('global.action.delete'),
           okVariant: 'danger',
           cancelTitle: i18n.global.t('global.action.cancel'),
           autoFocusButton: 'cancel',
-        })
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch('postCodeLogs/deleteAllPostCodeLogs', this.allLogs)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
+        },
+      );
+      if (deleteConfirmed) {
+        this.$store
+          .dispatch('postCodeLogs/deleteAllPostCodeLogs', this.allLogs)
+          .then((message) => this.successToast(message))
+          .catch(({ message }) => this.errorToast(message));
+      }
     },
     exportAllLogsString() {
       {
@@ -372,6 +402,9 @@
       }
       return fileName + date;
     },
+    confirmDialog(message, options = {}) {
+      return this.$confirm({ message, ...options });
+    },
   },
 };
 </script>