From aa5e950b219343fff77ddde855088e694806edf8 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 23 Feb 2021 11:23:52 -0800
Subject: Move Dumps page components to main view and store directories

This commit will move away from storing env specific component views
and store modules in the env directory. This will help simplify the
file structure for dotenv customizations. The env directory will only
store modifications to the main store register, router definitions,
and app navigation.

Pages that are "hidden" by default, like dumps, would still need to be
imported and registered in the specific environments.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ia5ad76235e00127281f3fa564cb89ec2ca2e0f25
---
 src/env/components/Dumps/Dumps.vue                 | 332 ---------------------
 src/env/components/Dumps/DumpsForm.vue             |  95 ------
 .../components/Dumps/DumpsModalConfirmation.vue    |  75 -----
 src/env/components/Dumps/index.js                  |   2 -
 src/env/router/ibm.js                              |   2 +-
 src/env/store/Dumps/DumpsStore.js                  | 117 --------
 src/env/store/ibm.js                               |   2 +-
 src/store/modules/Health/DumpsStore.js             | 117 ++++++++
 src/views/Health/Dumps/Dumps.vue                   | 332 +++++++++++++++++++++
 src/views/Health/Dumps/DumpsForm.vue               |  95 ++++++
 src/views/Health/Dumps/DumpsModalConfirmation.vue  |  75 +++++
 src/views/Health/Dumps/index.js                    |   2 +
 12 files changed, 623 insertions(+), 623 deletions(-)
 delete mode 100644 src/env/components/Dumps/Dumps.vue
 delete mode 100644 src/env/components/Dumps/DumpsForm.vue
 delete mode 100644 src/env/components/Dumps/DumpsModalConfirmation.vue
 delete mode 100644 src/env/components/Dumps/index.js
 delete mode 100644 src/env/store/Dumps/DumpsStore.js
 create mode 100644 src/store/modules/Health/DumpsStore.js
 create mode 100644 src/views/Health/Dumps/Dumps.vue
 create mode 100644 src/views/Health/Dumps/DumpsForm.vue
 create mode 100644 src/views/Health/Dumps/DumpsModalConfirmation.vue
 create mode 100644 src/views/Health/Dumps/index.js

(limited to 'src')

diff --git a/src/env/components/Dumps/Dumps.vue b/src/env/components/Dumps/Dumps.vue
deleted file mode 100644
index 8181c5ba..00000000
--- a/src/env/components/Dumps/Dumps.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<template>
-  <b-container fluid="xl">
-    <page-title />
-    <b-row>
-      <b-col sm="6" lg="5" xl="4">
-        <page-section :section-title="$t('pageDumps.initiateDump')">
-          <dumps-form />
-        </page-section>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="10">
-        <page-section :section-title="$t('pageDumps.dumpsAvailableOnBmc')">
-          <b-row class="align-items-start">
-            <b-col sm="8" xl="6" class="d-sm-flex align-items-end">
-              <search
-                :placeholder="$t('pageDumps.table.searchDumps')"
-                @change-search="onChangeSearchInput"
-                @clear-search="onClearSearchInput"
-              />
-              <div class="ml-sm-4">
-                <table-cell-count
-                  :filtered-items-count="filteredItemCount"
-                  :total-number-of-cells="tableItems.length"
-                ></table-cell-count>
-              </div>
-            </b-col>
-            <b-col sm="8" md="7" xl="6">
-              <table-date-filter @change="onChangeDateTimeFilter" />
-            </b-col>
-          </b-row>
-          <table-toolbar
-            :selected-items-count="selectedRows.length"
-            :actions="batchActions"
-            @clear-selected="clearSelectedRows($refs.table)"
-            @batch-action="onTableBatchAction"
-          />
-          <b-table
-            ref="table"
-            show-empty
-            hover
-            sort-icon-left
-            no-sort-reset
-            sort-desc
-            selectable
-            no-select-on-click
-            responsive="md"
-            sort-by="dateTime"
-            :fields="fields"
-            :items="filteredTableItems"
-            :empty-text="$t('global.table.emptyMessage')"
-            :empty-filtered-text="$t('global.table.emptySearchMessage')"
-            :filter="searchFilter"
-            @filtered="onChangeSearchFilter"
-            @row-selected="onRowSelected($event, filteredTableItems.length)"
-          >
-            <!-- Checkbox column -->
-            <template #head(checkbox)>
-              <b-form-checkbox
-                v-model="tableHeaderCheckboxModel"
-                :indeterminate="tableHeaderCheckboxIndeterminate"
-                @change="onChangeHeaderCheckbox($refs.table)"
-              >
-                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-              </b-form-checkbox>
-            </template>
-            <template #cell(checkbox)="row">
-              <b-form-checkbox
-                v-model="row.rowSelected"
-                @change="toggleSelectRow($refs.table, row.index)"
-              >
-                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-              </b-form-checkbox>
-            </template>
-
-            <!-- Date and Time column -->
-            <template #cell(dateTime)="{ value }">
-              <p class="mb-0">{{ value | formatDate }}</p>
-              <p class="mb-0">{{ value | formatTime }}</p>
-            </template>
-
-            <!-- Size column -->
-            <template #cell(size)="{ value }">
-              {{ convertBytesToMegabytes(value) }} MB
-            </template>
-
-            <!-- Actions column -->
-            <template #cell(actions)="row">
-              <table-row-action
-                v-for="(action, index) in row.item.actions"
-                :key="index"
-                :value="action.value"
-                :title="action.title"
-                :download-location="row.item.data"
-                :export-name="`${row.item.dumpType} ${row.item.id}`"
-                @click-table-action="onTableRowAction($event, row.item)"
-              >
-                <template #icon>
-                  <icon-download v-if="action.value === 'download'" />
-                  <icon-delete v-if="action.value === 'delete'" />
-                </template>
-              </table-row-action>
-            </template>
-          </b-table>
-        </page-section>
-      </b-col>
-    </b-row>
-  </b-container>
-</template>
-
-<script>
-import IconDelete from '@carbon/icons-vue/es/trash-can/20';
-import IconDownload from '@carbon/icons-vue/es/download/20';
-
-import DumpsForm from './DumpsForm';
-import PageSection from '@/components/Global/PageSection';
-import PageTitle from '@/components/Global/PageTitle';
-import Search from '@/components/Global/Search';
-import TableCellCount from '@/components/Global/TableCellCount';
-import TableDateFilter from '@/components/Global/TableDateFilter';
-import TableRowAction from '@/components/Global/TableRowAction';
-import TableToolbar from '@/components/Global/TableToolbar';
-
-import BVTableSelectableMixin, {
-  selectedRows,
-  tableHeaderCheckboxModel,
-  tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
-
-export default {
-  components: {
-    DumpsForm,
-    IconDelete,
-    IconDownload,
-    PageSection,
-    PageTitle,
-    Search,
-    TableCellCount,
-    TableDateFilter,
-    TableRowAction,
-    TableToolbar,
-  },
-  mixins: [
-    BVTableSelectableMixin,
-    BVToastMixin,
-    LoadingBarMixin,
-    SearchFilterMixin,
-    TableFilterMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      fields: [
-        {
-          key: 'checkbox',
-          sortable: false,
-        },
-        {
-          key: 'dateTime',
-          label: this.$t('pageDumps.table.dateAndTime'),
-          sortable: true,
-        },
-        {
-          key: 'dumpType',
-          label: this.$t('pageDumps.table.dumpType'),
-          sortable: true,
-        },
-        {
-          key: 'id',
-          label: this.$t('pageDumps.table.id'),
-          sortable: true,
-        },
-        {
-          key: 'size',
-          label: this.$t('pageDumps.table.size'),
-          sortable: true,
-        },
-        {
-          key: 'actions',
-          sortable: false,
-          label: '',
-          tdClass: 'text-right text-nowrap',
-        },
-      ],
-      batchActions: [
-        {
-          value: 'delete',
-          label: this.$t('global.action.delete'),
-        },
-      ],
-      filterEndDate: null,
-      filterStartDate: null,
-      searchFilter,
-      searchFilteredItemsCount: 0,
-      selectedRows,
-      tableHeaderCheckboxIndeterminate,
-      tableHeaderCheckboxModel,
-    };
-  },
-  computed: {
-    dumps() {
-      return this.$store.getters['dumps/bmcDumps'];
-    },
-    tableItems() {
-      return this.dumps.map((item) => {
-        return {
-          ...item,
-          actions: [
-            {
-              value: 'download',
-              title: this.$t('global.action.download'),
-            },
-            {
-              value: 'delete',
-              title: this.$t('global.action.delete'),
-            },
-          ],
-        };
-      });
-    },
-    filteredTableItems() {
-      return this.getFilteredTableDataByDate(
-        this.tableItems,
-        this.filterStartDate,
-        this.filterEndDate,
-        'dateTime'
-      );
-    },
-    filteredItemCount() {
-      return this.searchFilter
-        ? this.searchFilteredItemsCount
-        : this.filteredTableItems.length;
-    },
-  },
-  created() {
-    this.startLoader();
-    this.$store.dispatch('dumps/getBmcDumps').finally(() => this.endLoader());
-  },
-  methods: {
-    convertBytesToMegabytes(bytes) {
-      return parseFloat((bytes / 1000000).toFixed(3));
-    },
-    onChangeSearchFilter(items) {
-      this.searchFilteredItemsCount = items.length;
-    },
-    onChangeDateTimeFilter({ fromDate, toDate }) {
-      this.filterStartDate = fromDate;
-      this.filterEndDate = toDate;
-    },
-    onTableRowAction(action, dump) {
-      if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), {
-            title: this.$tc('pageDumps.modal.deleteDump'),
-            okTitle: this.$tc('pageDumps.modal.deleteDump'),
-            cancelTitle: this.$t('global.action.cancel'),
-          })
-          .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);
-                    }
-                  });
-                });
-            }
-          });
-      }
-    },
-    onTableBatchAction(action) {
-      if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(
-            this.$tc(
-              'pageDumps.modal.deleteDumpConfirmation',
-              this.selectedRows.length
-            ),
-            {
-              title: this.$tc(
-                'pageDumps.modal.deleteDump',
-                this.selectedRows.length
-              ),
-              okTitle: this.$tc(
-                'pageDumps.modal.deleteDump',
-                this.selectedRows.length
-              ),
-              cancelTitle: this.$t('global.action.cancel'),
-            }
-          )
-          .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);
-                      }
-                    });
-                  });
-              }
-            }
-          });
-      }
-    },
-  },
-};
-</script>
diff --git a/src/env/components/Dumps/DumpsForm.vue b/src/env/components/Dumps/DumpsForm.vue
deleted file mode 100644
index 02ec1864..00000000
--- a/src/env/components/Dumps/DumpsForm.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="form-background p-3">
-    <b-form id="form-new-dump" novalidate @submit.prevent="handleSubmit">
-      <b-form-group
-        :label="$t('pageDumps.form.selectDumpType')"
-        label-for="selectDumpType"
-      >
-        <b-form-select
-          id="selectDumpType"
-          v-model="selectedDumpType"
-          :options="dumpTypeOptions"
-          :state="getValidationState($v.selectedDumpType)"
-        >
-          <template #first>
-            <b-form-select-option :value="null" disabled>
-              {{ $t('global.form.selectAnOption') }}
-            </b-form-select-option>
-          </template>
-        </b-form-select>
-        <b-form-invalid-feedback role="alert">
-          {{ $t('global.form.required') }}
-        </b-form-invalid-feedback>
-      </b-form-group>
-      <alert variant="info" class="mb-3" :show="selectedDumpType === 'system'">
-        {{ $t('pageDumps.form.systemDumpInfo') }}
-      </alert>
-      <b-button variant="primary" type="submit" form="form-new-dump">
-        {{ $t('pageDumps.form.initiateDump') }}
-      </b-button>
-    </b-form>
-    <modal-confirmation @ok="createSystemDump" />
-  </div>
-</template>
-
-<script>
-import { required } from 'vuelidate/lib/validators';
-
-import ModalConfirmation from './DumpsModalConfirmation';
-import Alert from '@/components/Global/Alert';
-
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-
-export default {
-  components: { Alert, ModalConfirmation },
-  mixins: [BVToastMixin, VuelidateMixin],
-  data() {
-    return {
-      selectedDumpType: null,
-      dumpTypeOptions: [
-        { value: 'bmc', text: this.$t('pageDumps.form.bmcDump') },
-        { value: 'system', text: this.$t('pageDumps.form.systemDump') },
-      ],
-    };
-  },
-  validations() {
-    return {
-      selectedDumpType: { required },
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      if (this.selectedDumpType === 'system') {
-        this.showConfirmationModal();
-      } else {
-        this.$store
-          .dispatch('dumps/createBmcDump')
-          .then(() =>
-            this.infoToast(this.$t('pageDumps.toast.successStartBmcDump'), {
-              title: this.$t('pageDumps.toast.successStartBmcDumpTitle'),
-              timestamp: true,
-            })
-          )
-          .catch(({ message }) => this.errorToast(message));
-      }
-    },
-    showConfirmationModal() {
-      this.$bvModal.show('modal-confirmation');
-    },
-    createSystemDump() {
-      this.$store
-        .dispatch('dumps/createSystemDump')
-        .then(() =>
-          this.infoToast(this.$t('pageDumps.toast.successStartSystemDump'), {
-            title: this.$t('pageDumps.toast.successStartSystemDumpTitle'),
-            timestamp: true,
-          })
-        )
-        .catch(({ message }) => this.errorToast(message));
-    },
-  },
-};
-</script>
diff --git a/src/env/components/Dumps/DumpsModalConfirmation.vue b/src/env/components/Dumps/DumpsModalConfirmation.vue
deleted file mode 100644
index f8e20cfd..00000000
--- a/src/env/components/Dumps/DumpsModalConfirmation.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <b-modal
-    id="modal-confirmation"
-    ref="modal"
-    :title="$t('pageDumps.modal.initiateSystemDump')"
-    @hidden="resetForm"
-  >
-    <p>
-      <strong>
-        {{ $t('pageDumps.modal.initiateSystemDumpMessage1') }}
-      </strong>
-    </p>
-    <p>
-      {{ $t('pageDumps.modal.initiateSystemDumpMessage2') }}
-    </p>
-    <p>
-      <status-icon status="danger" />
-      {{ $t('pageDumps.modal.initiateSystemDumpMessage3') }}
-    </p>
-    <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()">
-      {{ $t('pageDumps.modal.initiateSystemDumpMessage4') }}
-    </b-form-checkbox>
-    <b-form-invalid-feedback
-      :state="getValidationState($v.confirmed)"
-      role="alert"
-    >
-      {{ $t('global.form.required') }}
-    </b-form-invalid-feedback>
-    <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
-        {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button variant="danger" @click="handleSubmit">
-        {{ $t('pageDumps.form.initiateDump') }}
-      </b-button>
-    </template>
-  </b-modal>
-</template>
-
-<script>
-import StatusIcon from '@/components/Global/StatusIcon';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-
-export default {
-  components: { StatusIcon },
-  mixins: [VuelidateMixin],
-  data() {
-    return {
-      confirmed: false,
-    };
-  },
-  validations: {
-    confirmed: {
-      mustBeTrue: (value) => value === true,
-    },
-  },
-  methods: {
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok');
-      this.closeModal();
-    },
-    resetForm() {
-      this.confirmed = false;
-      this.$v.$reset();
-    },
-  },
-};
-</script>
diff --git a/src/env/components/Dumps/index.js b/src/env/components/Dumps/index.js
deleted file mode 100644
index 65525fb0..00000000
--- a/src/env/components/Dumps/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Dumps from './Dumps.vue';
-export default Dumps;
diff --git a/src/env/router/ibm.js b/src/env/router/ibm.js
index c4e1a698..317125e2 100644
--- a/src/env/router/ibm.js
+++ b/src/env/router/ibm.js
@@ -27,7 +27,7 @@ import SslCertificates from '@/views/AccessControl/SslCertificates';
 import i18n from '@/i18n';
 
 // Custom components
-import Dumps from '../components/Dumps';
+import Dumps from '@/views/Health/Dumps';
 
 const routes = [
   {
diff --git a/src/env/store/Dumps/DumpsStore.js b/src/env/store/Dumps/DumpsStore.js
deleted file mode 100644
index 3b91354b..00000000
--- a/src/env/store/Dumps/DumpsStore.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import api, { getResponseCount } from '@/store/api';
-import i18n from '@/i18n';
-
-const DumpsStore = {
-  namespaced: true,
-  state: {
-    bmcDumps: [],
-  },
-  getters: {
-    bmcDumps: (state) => state.bmcDumps,
-  },
-  mutations: {
-    setBmcDumps: (state, dumps) => {
-      state.bmcDumps = dumps.map((dump) => ({
-        data: dump.AdditionalDataURI,
-        dateTime: new Date(dump.Created),
-        dumpType: dump.Name,
-        id: dump.Id,
-        location: dump['@odata.id'],
-        size: dump.AdditionalDataSizeBytes,
-      }));
-    },
-  },
-  actions: {
-    async getBmcDumps({ commit }) {
-      return await api
-        .get('/redfish/v1/Managers/bmc/LogServices/Dump/Entries')
-        .then(({ data = {} }) => commit('setBmcDumps', data.Members || []))
-        .catch((error) => console.log(error));
-    },
-    async createBmcDump() {
-      return await api
-        .post(
-          '/redfish/v1/Managers/bmc/LogServices/Dump/Actions/LogService.CollectDiagnosticData',
-          {
-            DiagnosticDataType: 'Manager',
-            OEMDiagnosticDataType: '',
-          }
-        )
-        .catch((error) => {
-          console.log(error);
-          throw new Error(i18n.t('pageDumps.toast.errorStartBmcDump'));
-        });
-    },
-    async createSystemDump() {
-      return await api
-        .post(
-          '/redfish/v1/Systems/system/LogServices/Dump/Actions/LogService.CollectDiagnosticData',
-          {
-            DiagnosticDataType: 'OEM',
-            OEMDiagnosticDataType: 'System',
-          }
-        )
-        .catch((error) => {
-          console.log(error);
-          throw new Error(i18n.t('pageDumps.toast.errorStartSystemDump'));
-        });
-    },
-    async deleteDumps({ dispatch }, dumps) {
-      const promises = dumps.map(({ location }) =>
-        api.delete(location).catch((error) => {
-          console.log(error);
-          return error;
-        })
-      );
-      return await api
-        .all(promises)
-        .then((response) => {
-          dispatch('getBmcDumps');
-          return response;
-        })
-        .then(
-          api.spread((...responses) => {
-            const { successCount, errorCount } = getResponseCount(responses);
-            const toastMessages = [];
-
-            if (successCount) {
-              const message = i18n.tc(
-                'pageDumps.toast.successDeleteDump',
-                successCount
-              );
-              toastMessages.push({ type: 'success', message });
-            }
-
-            if (errorCount) {
-              const message = i18n.tc(
-                'pageDumps.toast.errorDeleteDump',
-                errorCount
-              );
-              toastMessages.push({ type: 'error', message });
-            }
-
-            return toastMessages;
-          })
-        );
-    },
-    async deleteAllDumps({ commit, state }) {
-      const totalDumpCount = state.bmcDumps.length;
-      return await api
-        .post(
-          '/redfish/v1/Managers/bmc/LogServices/Dump/Actions/LogService.ClearLog'
-        )
-        .then(() => {
-          commit('setBmcDumps', []);
-          return i18n.tc('pageDumps.toast.successDeleteDump', totalDumpCount);
-        })
-        .catch((error) => {
-          console.log(error);
-          throw new Error(
-            i18n.tc('pageDumps.toast.errorDeleteDump', totalDumpCount)
-          );
-        });
-    },
-  },
-};
-
-export default DumpsStore;
diff --git a/src/env/store/ibm.js b/src/env/store/ibm.js
index 980236fc..ff20b9cf 100644
--- a/src/env/store/ibm.js
+++ b/src/env/store/ibm.js
@@ -1,5 +1,5 @@
 import store from '@/store';
-import DumpsStore from './Dumps/DumpsStore';
+import DumpsStore from '@/store/modules/Health/DumpsStore';
 
 store.unregisterModule('virtualMedia');
 
diff --git a/src/store/modules/Health/DumpsStore.js b/src/store/modules/Health/DumpsStore.js
new file mode 100644
index 00000000..3b91354b
--- /dev/null
+++ b/src/store/modules/Health/DumpsStore.js
@@ -0,0 +1,117 @@
+import api, { getResponseCount } from '@/store/api';
+import i18n from '@/i18n';
+
+const DumpsStore = {
+  namespaced: true,
+  state: {
+    bmcDumps: [],
+  },
+  getters: {
+    bmcDumps: (state) => state.bmcDumps,
+  },
+  mutations: {
+    setBmcDumps: (state, dumps) => {
+      state.bmcDumps = dumps.map((dump) => ({
+        data: dump.AdditionalDataURI,
+        dateTime: new Date(dump.Created),
+        dumpType: dump.Name,
+        id: dump.Id,
+        location: dump['@odata.id'],
+        size: dump.AdditionalDataSizeBytes,
+      }));
+    },
+  },
+  actions: {
+    async getBmcDumps({ commit }) {
+      return await api
+        .get('/redfish/v1/Managers/bmc/LogServices/Dump/Entries')
+        .then(({ data = {} }) => commit('setBmcDumps', data.Members || []))
+        .catch((error) => console.log(error));
+    },
+    async createBmcDump() {
+      return await api
+        .post(
+          '/redfish/v1/Managers/bmc/LogServices/Dump/Actions/LogService.CollectDiagnosticData',
+          {
+            DiagnosticDataType: 'Manager',
+            OEMDiagnosticDataType: '',
+          }
+        )
+        .catch((error) => {
+          console.log(error);
+          throw new Error(i18n.t('pageDumps.toast.errorStartBmcDump'));
+        });
+    },
+    async createSystemDump() {
+      return await api
+        .post(
+          '/redfish/v1/Systems/system/LogServices/Dump/Actions/LogService.CollectDiagnosticData',
+          {
+            DiagnosticDataType: 'OEM',
+            OEMDiagnosticDataType: 'System',
+          }
+        )
+        .catch((error) => {
+          console.log(error);
+          throw new Error(i18n.t('pageDumps.toast.errorStartSystemDump'));
+        });
+    },
+    async deleteDumps({ dispatch }, dumps) {
+      const promises = dumps.map(({ location }) =>
+        api.delete(location).catch((error) => {
+          console.log(error);
+          return error;
+        })
+      );
+      return await api
+        .all(promises)
+        .then((response) => {
+          dispatch('getBmcDumps');
+          return response;
+        })
+        .then(
+          api.spread((...responses) => {
+            const { successCount, errorCount } = getResponseCount(responses);
+            const toastMessages = [];
+
+            if (successCount) {
+              const message = i18n.tc(
+                'pageDumps.toast.successDeleteDump',
+                successCount
+              );
+              toastMessages.push({ type: 'success', message });
+            }
+
+            if (errorCount) {
+              const message = i18n.tc(
+                'pageDumps.toast.errorDeleteDump',
+                errorCount
+              );
+              toastMessages.push({ type: 'error', message });
+            }
+
+            return toastMessages;
+          })
+        );
+    },
+    async deleteAllDumps({ commit, state }) {
+      const totalDumpCount = state.bmcDumps.length;
+      return await api
+        .post(
+          '/redfish/v1/Managers/bmc/LogServices/Dump/Actions/LogService.ClearLog'
+        )
+        .then(() => {
+          commit('setBmcDumps', []);
+          return i18n.tc('pageDumps.toast.successDeleteDump', totalDumpCount);
+        })
+        .catch((error) => {
+          console.log(error);
+          throw new Error(
+            i18n.tc('pageDumps.toast.errorDeleteDump', totalDumpCount)
+          );
+        });
+    },
+  },
+};
+
+export default DumpsStore;
diff --git a/src/views/Health/Dumps/Dumps.vue b/src/views/Health/Dumps/Dumps.vue
new file mode 100644
index 00000000..8181c5ba
--- /dev/null
+++ b/src/views/Health/Dumps/Dumps.vue
@@ -0,0 +1,332 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col sm="6" lg="5" xl="4">
+        <page-section :section-title="$t('pageDumps.initiateDump')">
+          <dumps-form />
+        </page-section>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="10">
+        <page-section :section-title="$t('pageDumps.dumpsAvailableOnBmc')">
+          <b-row class="align-items-start">
+            <b-col sm="8" xl="6" class="d-sm-flex align-items-end">
+              <search
+                :placeholder="$t('pageDumps.table.searchDumps')"
+                @change-search="onChangeSearchInput"
+                @clear-search="onClearSearchInput"
+              />
+              <div class="ml-sm-4">
+                <table-cell-count
+                  :filtered-items-count="filteredItemCount"
+                  :total-number-of-cells="tableItems.length"
+                ></table-cell-count>
+              </div>
+            </b-col>
+            <b-col sm="8" md="7" xl="6">
+              <table-date-filter @change="onChangeDateTimeFilter" />
+            </b-col>
+          </b-row>
+          <table-toolbar
+            :selected-items-count="selectedRows.length"
+            :actions="batchActions"
+            @clear-selected="clearSelectedRows($refs.table)"
+            @batch-action="onTableBatchAction"
+          />
+          <b-table
+            ref="table"
+            show-empty
+            hover
+            sort-icon-left
+            no-sort-reset
+            sort-desc
+            selectable
+            no-select-on-click
+            responsive="md"
+            sort-by="dateTime"
+            :fields="fields"
+            :items="filteredTableItems"
+            :empty-text="$t('global.table.emptyMessage')"
+            :empty-filtered-text="$t('global.table.emptySearchMessage')"
+            :filter="searchFilter"
+            @filtered="onChangeSearchFilter"
+            @row-selected="onRowSelected($event, filteredTableItems.length)"
+          >
+            <!-- Checkbox column -->
+            <template #head(checkbox)>
+              <b-form-checkbox
+                v-model="tableHeaderCheckboxModel"
+                :indeterminate="tableHeaderCheckboxIndeterminate"
+                @change="onChangeHeaderCheckbox($refs.table)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+              </b-form-checkbox>
+            </template>
+            <template #cell(checkbox)="row">
+              <b-form-checkbox
+                v-model="row.rowSelected"
+                @change="toggleSelectRow($refs.table, row.index)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              </b-form-checkbox>
+            </template>
+
+            <!-- Date and Time column -->
+            <template #cell(dateTime)="{ value }">
+              <p class="mb-0">{{ value | formatDate }}</p>
+              <p class="mb-0">{{ value | formatTime }}</p>
+            </template>
+
+            <!-- Size column -->
+            <template #cell(size)="{ value }">
+              {{ convertBytesToMegabytes(value) }} MB
+            </template>
+
+            <!-- Actions column -->
+            <template #cell(actions)="row">
+              <table-row-action
+                v-for="(action, index) in row.item.actions"
+                :key="index"
+                :value="action.value"
+                :title="action.title"
+                :download-location="row.item.data"
+                :export-name="`${row.item.dumpType} ${row.item.id}`"
+                @click-table-action="onTableRowAction($event, row.item)"
+              >
+                <template #icon>
+                  <icon-download v-if="action.value === 'download'" />
+                  <icon-delete v-if="action.value === 'delete'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
+        </page-section>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import IconDelete from '@carbon/icons-vue/es/trash-can/20';
+import IconDownload from '@carbon/icons-vue/es/download/20';
+
+import DumpsForm from './DumpsForm';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import TableDateFilter from '@/components/Global/TableDateFilter';
+import TableRowAction from '@/components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+
+export default {
+  components: {
+    DumpsForm,
+    IconDelete,
+    IconDownload,
+    PageSection,
+    PageTitle,
+    Search,
+    TableCellCount,
+    TableDateFilter,
+    TableRowAction,
+    TableToolbar,
+  },
+  mixins: [
+    BVTableSelectableMixin,
+    BVToastMixin,
+    LoadingBarMixin,
+    SearchFilterMixin,
+    TableFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      fields: [
+        {
+          key: 'checkbox',
+          sortable: false,
+        },
+        {
+          key: 'dateTime',
+          label: this.$t('pageDumps.table.dateAndTime'),
+          sortable: true,
+        },
+        {
+          key: 'dumpType',
+          label: this.$t('pageDumps.table.dumpType'),
+          sortable: true,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageDumps.table.id'),
+          sortable: true,
+        },
+        {
+          key: 'size',
+          label: this.$t('pageDumps.table.size'),
+          sortable: true,
+        },
+        {
+          key: 'actions',
+          sortable: false,
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
+      batchActions: [
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete'),
+        },
+      ],
+      filterEndDate: null,
+      filterStartDate: null,
+      searchFilter,
+      searchFilteredItemsCount: 0,
+      selectedRows,
+      tableHeaderCheckboxIndeterminate,
+      tableHeaderCheckboxModel,
+    };
+  },
+  computed: {
+    dumps() {
+      return this.$store.getters['dumps/bmcDumps'];
+    },
+    tableItems() {
+      return this.dumps.map((item) => {
+        return {
+          ...item,
+          actions: [
+            {
+              value: 'download',
+              title: this.$t('global.action.download'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        };
+      });
+    },
+    filteredTableItems() {
+      return this.getFilteredTableDataByDate(
+        this.tableItems,
+        this.filterStartDate,
+        this.filterEndDate,
+        'dateTime'
+      );
+    },
+    filteredItemCount() {
+      return this.searchFilter
+        ? this.searchFilteredItemsCount
+        : this.filteredTableItems.length;
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('dumps/getBmcDumps').finally(() => this.endLoader());
+  },
+  methods: {
+    convertBytesToMegabytes(bytes) {
+      return parseFloat((bytes / 1000000).toFixed(3));
+    },
+    onChangeSearchFilter(items) {
+      this.searchFilteredItemsCount = items.length;
+    },
+    onChangeDateTimeFilter({ fromDate, toDate }) {
+      this.filterStartDate = fromDate;
+      this.filterEndDate = toDate;
+    },
+    onTableRowAction(action, dump) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), {
+            title: this.$tc('pageDumps.modal.deleteDump'),
+            okTitle: this.$tc('pageDumps.modal.deleteDump'),
+            cancelTitle: this.$t('global.action.cancel'),
+          })
+          .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);
+                    }
+                  });
+                });
+            }
+          });
+      }
+    },
+    onTableBatchAction(action) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(
+            this.$tc(
+              'pageDumps.modal.deleteDumpConfirmation',
+              this.selectedRows.length
+            ),
+            {
+              title: this.$tc(
+                'pageDumps.modal.deleteDump',
+                this.selectedRows.length
+              ),
+              okTitle: this.$tc(
+                'pageDumps.modal.deleteDump',
+                this.selectedRows.length
+              ),
+              cancelTitle: this.$t('global.action.cancel'),
+            }
+          )
+          .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);
+                      }
+                    });
+                  });
+              }
+            }
+          });
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/Health/Dumps/DumpsForm.vue b/src/views/Health/Dumps/DumpsForm.vue
new file mode 100644
index 00000000..02ec1864
--- /dev/null
+++ b/src/views/Health/Dumps/DumpsForm.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="form-background p-3">
+    <b-form id="form-new-dump" novalidate @submit.prevent="handleSubmit">
+      <b-form-group
+        :label="$t('pageDumps.form.selectDumpType')"
+        label-for="selectDumpType"
+      >
+        <b-form-select
+          id="selectDumpType"
+          v-model="selectedDumpType"
+          :options="dumpTypeOptions"
+          :state="getValidationState($v.selectedDumpType)"
+        >
+          <template #first>
+            <b-form-select-option :value="null" disabled>
+              {{ $t('global.form.selectAnOption') }}
+            </b-form-select-option>
+          </template>
+        </b-form-select>
+        <b-form-invalid-feedback role="alert">
+          {{ $t('global.form.required') }}
+        </b-form-invalid-feedback>
+      </b-form-group>
+      <alert variant="info" class="mb-3" :show="selectedDumpType === 'system'">
+        {{ $t('pageDumps.form.systemDumpInfo') }}
+      </alert>
+      <b-button variant="primary" type="submit" form="form-new-dump">
+        {{ $t('pageDumps.form.initiateDump') }}
+      </b-button>
+    </b-form>
+    <modal-confirmation @ok="createSystemDump" />
+  </div>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/validators';
+
+import ModalConfirmation from './DumpsModalConfirmation';
+import Alert from '@/components/Global/Alert';
+
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  components: { Alert, ModalConfirmation },
+  mixins: [BVToastMixin, VuelidateMixin],
+  data() {
+    return {
+      selectedDumpType: null,
+      dumpTypeOptions: [
+        { value: 'bmc', text: this.$t('pageDumps.form.bmcDump') },
+        { value: 'system', text: this.$t('pageDumps.form.systemDump') },
+      ],
+    };
+  },
+  validations() {
+    return {
+      selectedDumpType: { required },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      if (this.selectedDumpType === 'system') {
+        this.showConfirmationModal();
+      } else {
+        this.$store
+          .dispatch('dumps/createBmcDump')
+          .then(() =>
+            this.infoToast(this.$t('pageDumps.toast.successStartBmcDump'), {
+              title: this.$t('pageDumps.toast.successStartBmcDumpTitle'),
+              timestamp: true,
+            })
+          )
+          .catch(({ message }) => this.errorToast(message));
+      }
+    },
+    showConfirmationModal() {
+      this.$bvModal.show('modal-confirmation');
+    },
+    createSystemDump() {
+      this.$store
+        .dispatch('dumps/createSystemDump')
+        .then(() =>
+          this.infoToast(this.$t('pageDumps.toast.successStartSystemDump'), {
+            title: this.$t('pageDumps.toast.successStartSystemDumpTitle'),
+            timestamp: true,
+          })
+        )
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/Health/Dumps/DumpsModalConfirmation.vue b/src/views/Health/Dumps/DumpsModalConfirmation.vue
new file mode 100644
index 00000000..f8e20cfd
--- /dev/null
+++ b/src/views/Health/Dumps/DumpsModalConfirmation.vue
@@ -0,0 +1,75 @@
+<template>
+  <b-modal
+    id="modal-confirmation"
+    ref="modal"
+    :title="$t('pageDumps.modal.initiateSystemDump')"
+    @hidden="resetForm"
+  >
+    <p>
+      <strong>
+        {{ $t('pageDumps.modal.initiateSystemDumpMessage1') }}
+      </strong>
+    </p>
+    <p>
+      {{ $t('pageDumps.modal.initiateSystemDumpMessage2') }}
+    </p>
+    <p>
+      <status-icon status="danger" />
+      {{ $t('pageDumps.modal.initiateSystemDumpMessage3') }}
+    </p>
+    <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()">
+      {{ $t('pageDumps.modal.initiateSystemDumpMessage4') }}
+    </b-form-checkbox>
+    <b-form-invalid-feedback
+      :state="getValidationState($v.confirmed)"
+      role="alert"
+    >
+      {{ $t('global.form.required') }}
+    </b-form-invalid-feedback>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button variant="danger" @click="handleSubmit">
+        {{ $t('pageDumps.form.initiateDump') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import StatusIcon from '@/components/Global/StatusIcon';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  components: { StatusIcon },
+  mixins: [VuelidateMixin],
+  data() {
+    return {
+      confirmed: false,
+    };
+  },
+  validations: {
+    confirmed: {
+      mustBeTrue: (value) => value === true,
+    },
+  },
+  methods: {
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok');
+      this.closeModal();
+    },
+    resetForm() {
+      this.confirmed = false;
+      this.$v.$reset();
+    },
+  },
+};
+</script>
diff --git a/src/views/Health/Dumps/index.js b/src/views/Health/Dumps/index.js
new file mode 100644
index 00000000..65525fb0
--- /dev/null
+++ b/src/views/Health/Dumps/index.js
@@ -0,0 +1,2 @@
+import Dumps from './Dumps.vue';
+export default Dumps;
-- 
cgit v1.2.3