From 8047ae3d83ba0718fb7a42907036157e5c680b85 Mon Sep 17 00:00:00 2001
From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
Date: Mon, 4 Jul 2022 23:59:32 +0300
Subject: IBS: _sila UI theme

---
 src/views/_sila/Logs/Dumps/Dumps.vue               | 404 +++++++++++++++++++++
 src/views/_sila/Logs/Dumps/DumpsForm.vue           |  97 +++++
 .../_sila/Logs/Dumps/DumpsModalConfirmation.vue    |  75 ++++
 src/views/_sila/Logs/Dumps/index.js                |   2 +
 4 files changed, 578 insertions(+)
 create mode 100644 src/views/_sila/Logs/Dumps/Dumps.vue
 create mode 100644 src/views/_sila/Logs/Dumps/DumpsForm.vue
 create mode 100644 src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue
 create mode 100644 src/views/_sila/Logs/Dumps/index.js

(limited to 'src/views/_sila/Logs/Dumps')

diff --git a/src/views/_sila/Logs/Dumps/Dumps.vue b/src/views/_sila/Logs/Dumps/Dumps.vue
new file mode 100644
index 00000000..81c9de04
--- /dev/null
+++ b/src/views/_sila/Logs/Dumps/Dumps.vue
@@ -0,0 +1,404 @@
+<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="filteredRows"
+                  :total-number-of-cells="allDumps.length"
+                ></table-cell-count>
+              </div>
+            </b-col>
+            <b-col sm="8" md="7" xl="6">
+              <table-date-filter @change="onChangeDateTimeFilter" />
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col class="text-right">
+              <table-filter
+                :filters="tableFilters"
+                @filter-change="onFilterChange"
+              />
+            </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="filteredDumps"
+            :empty-text="$t('global.table.emptyMessage')"
+            :empty-filtered-text="$t('global.table.emptySearchMessage')"
+            :filter="searchFilter"
+            :busy="isBusy"
+            @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="exportFileName(row)"
+                @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>
+    <!-- Table pagination -->
+    <b-row>
+      <b-col sm="6" xl="5">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col sm="6" xl="5">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount()"
+          aria-controls="table-dump-entries"
+        />
+      </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 BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+import TableFilter from '@/components/Global/TableFilter';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+
+export default {
+  components: {
+    DumpsForm,
+    IconDelete,
+    IconDownload,
+    PageSection,
+    PageTitle,
+    Search,
+    TableCellCount,
+    TableDateFilter,
+    TableRowAction,
+    TableToolbar,
+    TableFilter,
+  },
+  mixins: [
+    BVTableSelectableMixin,
+    BVToastMixin,
+    BVPaginationMixin,
+    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 {
+      isBusy: true,
+      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'),
+        },
+      ],
+      tableFilters: [
+        {
+          key: 'dumpType',
+          label: this.$t('pageDumps.table.dumpType'),
+          values: [
+            'BMC Dump Entry',
+            'Hostboot Dump Entry',
+            'Resource Dump Entry',
+            'System Dump Entry',
+          ],
+        },
+      ],
+      activeFilters: [],
+      currentPage: currentPage,
+      filterEndDate: null,
+      filterStartDate: null,
+      itemsPerPageOptions: itemsPerPageOptions,
+      perPage: perPage,
+      searchFilter,
+      searchTotalFilteredRows: 0,
+      selectedRows,
+      tableHeaderCheckboxIndeterminate,
+      tableHeaderCheckboxModel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.filteredDumps.length;
+    },
+    allDumps() {
+      return this.$store.getters['dumps/allDumps'].map((item) => {
+        return {
+          ...item,
+          actions: [
+            {
+              value: 'download',
+              title: this.$t('global.action.download'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        };
+      });
+    },
+    filteredDumpsByDate() {
+      return this.getFilteredTableDataByDate(
+        this.allDumps,
+        this.filterStartDate,
+        this.filterEndDate,
+        'dateTime'
+      );
+    },
+    filteredDumps() {
+      return this.getFilteredTableData(
+        this.filteredDumpsByDate,
+        this.activeFilters
+      );
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('dumps/getBmcDumpEntries').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    convertBytesToMegabytes(bytes) {
+      return parseFloat((bytes / 1000000).toFixed(3));
+    },
+    onFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.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);
+                      }
+                    });
+                  });
+              }
+            }
+          });
+      }
+    },
+    exportFileName(row) {
+      let filename = row.item.dumpType + '_' + row.item.id + '.tar.xz';
+      filename = filename.replace(RegExp(' ', 'g'), '_');
+      return filename;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Logs/Dumps/DumpsForm.vue b/src/views/_sila/Logs/Dumps/DumpsForm.vue
new file mode 100644
index 00000000..07f4a060
--- /dev/null
+++ b/src/views/_sila/Logs/Dumps/DumpsForm.vue
@@ -0,0 +1,97 @@
+<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;
+
+      // System dump initiation
+      if (this.selectedDumpType === 'system') {
+        this.showConfirmationModal();
+      }
+      // BMC dump initiation
+      else if (this.selectedDumpType === 'bmc') {
+        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/_sila/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue
new file mode 100644
index 00000000..f8e20cfd
--- /dev/null
+++ b/src/views/_sila/Logs/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/_sila/Logs/Dumps/index.js b/src/views/_sila/Logs/Dumps/index.js
new file mode 100644
index 00000000..65525fb0
--- /dev/null
+++ b/src/views/_sila/Logs/Dumps/index.js
@@ -0,0 +1,2 @@
+import Dumps from './Dumps.vue';
+export default Dumps;
-- 
cgit v1.2.3