From 0cbf1713dc23e0039653891fab1fa2c52b4bfaf3 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Wed, 1 Jun 2022 17:40:28 +0300
Subject: Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add
 reload BMC.

---
 src/views/SILA/EventLogs/EventLogs.vue | 548 +++++++++------------------------
 1 file changed, 153 insertions(+), 395 deletions(-)

(limited to 'src/views/SILA/EventLogs')

diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
index 36ec9802..aca17ac0 100644
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ b/src/views/SILA/EventLogs/EventLogs.vue
@@ -73,8 +73,10 @@
         description="pageEventLogs.clearLogs"
         popup="pageEventLogs.clearLogs_popup"
         button="pageEventLogs.clear"
+        placement="bottom"
         :isclear="true"
         class="clear-popover"
+        :action="deleteAllLogs"
       />
     </div>
     <table-toolbar
@@ -85,8 +87,9 @@
     >
       <template #toolbar-buttons>
         <b-button
-          variant="primary"
-          class="table-toolbar__resolved-button"
+          size="md"
+          variant="secondary"
+          style="margin-right: 1rem"
           @click="resolveLogs"
         >
           <img
@@ -96,8 +99,9 @@
           {{ $t('pageEventLogs.event_resolve') }}
         </b-button>
         <b-button
+          size="md"
           variant="primary"
-          class="table-toolbar__unresolved-button"
+          style="margin-right: 1rem"
           @click="unresolveLogs"
         >
           <img
@@ -106,15 +110,21 @@
           />
           {{ $t('pageEventLogs.archive') }}
         </b-button>
+        <table-toolbar-export
+          :data="batchExportData"
+          style="margin-right: 1rem"
+          :file-name="exportFileNameByDate()"
+        />
       </template>
     </table-toolbar>
-    <div id="event-logs-table-wrapper">
+    <div id="logs-table-wrapper">
       <b-table
-        id="event-logs-table"
+        id="logs-table"
         ref="table"
         responsive="md"
-        class="event-logs-table"
+        class="logs-table"
         selectable
+        :busy="isBusy"
         no-select-on-click
         sort-icon-left
         :sticky-header="stickyHeader"
@@ -122,6 +132,8 @@
         no-sort-reset
         :sort-desc="sortDesc"
         sort-by="id"
+        :current-page="currentPage"
+        :per-page="perPage"
         :fields="fields"
         :items="filteredLogs"
         :sort-compare="onSortCompare"
@@ -153,42 +165,26 @@
         </template>
         <template #cell(description)="data">
           <b-row class="semi-bold-16px tretiatry">
-            {{ data.item.description.name }}
+            {{ filteredLogs[data.index].name }}
           </b-row>
           <b-row
             class="regular-12px tretiatry pointer"
             @click="toggleRowDetails(data)"
           >
-            {{ data.item.description.description }}</b-row
-          >
-        </template>
-        <template #row-details="{ index }">
-          <b-container fluid>
-            <b-col class="mt-1 mb-2 regular-12px tretiatry">
-              <span class="row-details">
-                {{
-                  `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.
-                   Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.`
-                }}
-                {{ $t(filteredLogs[index].description.description) }}
-              </span>
-            </b-col>
-          </b-container>
+            {{ data.value }}
+          </b-row>
         </template>
         <!-- Severity column -->
         <template #cell(severity)="{ value }">
-          <span v-if="value === 'Критические'" class="bold-12px__caps errors">{{
-            value
-          }}</span>
           <span
-            v-else-if="value === 'Предупреждения'"
-            class="bold-12px__caps warning"
+            :class="`indicators-${value}`"
+            class="bold-12px__caps"
+            style="text-overflow: ellipsis; white-space: nowrap"
+          >
+            {{ value }}</span
           >
-            {{ value }}
-          </span>
-          <span v-else class="bold-12px__caps information">{{ value }}</span>
         </template>
-        <!-- Date column -->
+        <!-- Source column -->
         <template #cell(source)="{ value }">
           <b-row v-if="value === 'Процессоры'">
             <img
@@ -211,18 +207,26 @@
             />
             <span>{{ value }}</span>
           </b-row>
-          <b-row v-else>
+          <b-row v-else-if="value === 'Модули памяти'">
             <img
               src="@/assets/images/event-logs/memory-module.svg"
               class="sourse__img"
             />
             <span>{{ value }}</span>
           </b-row>
+          <b-row v-else>
+            <span>{{ value }}</span>
+          </b-row>
         </template>
-
+        <!-- Date column -->
         <template #cell(date)="{ value }">
           <img src="@/assets/images/event-logs/time.svg" class="sourse__img" />
-          <span class="regular-12px quaternary"> {{ value }} </span>
+          <span v-if="value" class="regular-12px quaternary">
+            {{ value | formatDate }}
+          </span>
+          <span v-if="value" class="regular-12px quaternary">
+            в {{ value | formatTimeShort }}
+          </span>
         </template>
 
         <!-- Status column -->
@@ -246,25 +250,50 @@
             >
           </b-row>
         </template>
+        <template #row-details="{ item }">
+          <b-container
+            fluid
+            style="border-bottom: 1px solid rgba(26, 62, 91, 0.2)"
+          >
+            <b-col class="mt-1 mb-2 regular-12px tretiatry">
+              <span class="row-details">
+                {{ item.description }}
+              </span>
+            </b-col>
+          </b-container>
+        </template>
       </b-table>
     </div>
     <div class="pagination-container">
       <div class="pagination-content">
-        <span class="semi-bold-16px"> Страница </span>
-        <img class="sourse__img" src="@/assets/images/arrow-left.svg" />
-        <span class="semi-bold-16px page-input"> 1 </span>
-        <span class="semi-bold-16px"> из </span>
-        <span class="semi-bold-16px"> 123 </span>
-        <img class="sourse__img" src="@/assets/images/arrow-right.svg" />
+        <span class="semi-bold-16px"> Страницы </span>
+        <b-pagination
+          v-model="currentPage"
+          class="mt-2"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredRows)"
+          aria-controls="table-event-logs"
+        />
       </div>
       <div class="pagination-items-limit">
         <span class="semi-bold-16px"> Показывать по </span>
         <b-form-select
-          v-model="itemsPerPage"
+          v-model="perPage"
           :options="itemsPerPageOptions"
           class="event-logs__filter items-per-page semi-bold-16px"
         />
         <span class="semi-bold-16px"> записей на странице </span>
+        <b-button
+          size="md"
+          variant="primary"
+          :class="{ disabled: allLogs.length === 0 }"
+          :download="exportFileNameByDate()"
+          :href="href"
+        >
+          <icon-export /> {{ $t('global.action.exportAll') }}
+        </b-button>
       </div>
     </div>
   </b-container>
@@ -272,19 +301,28 @@
 
 <script>
 import { omit } from 'lodash';
+import IconExport from '@carbon/icons-vue/es/document--export/20';
 import PageTitle from '@/components/Global/PageTitle';
 import Popover from '@/components/Global/Popover';
 import TableToolbar from '@/components/Global/TableToolbar';
+import TableToolbarExport from '@/components/Global/TableToolbarExport';
+
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+
 import BVTableSelectableMixin, {
   selectedRows,
   tableHeaderCheckboxModel,
   tableHeaderCheckboxIndeterminate,
 } from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
@@ -297,6 +335,8 @@ export default {
     PageTitle,
     Popover,
     TableToolbar,
+    TableToolbarExport,
+    IconExport,
   },
   mixins: [
     BVTableSelectableMixin,
@@ -307,6 +347,7 @@ export default {
     TableSortMixin,
     TableRowExpandMixin,
     SearchFilterMixin,
+    BVPaginationMixin,
   ],
   beforeRouteLeave(to, from, next) {
     // Hide loader if the user navigates to another page
@@ -316,257 +357,57 @@ export default {
   },
   data() {
     return {
+      isBusy: true,
+      perPage,
+      itemsPerPageOptions,
+      currentPage,
       sortDesc: true,
-      stickyHeader: 'calc(100vh - 243px)',
-      itemsPerPage: 50,
-      itemsPerPageOptions: [
-        {
-          value: 10,
-          text: '10',
-        },
-        {
-          value: 50,
-          text: '50',
-        },
-        {
-          value: 100,
-          text: '100',
-        },
-      ],
+      stickyHeader: 'calc(100vh - 307px)',
       fields: [
         {
           key: 'checkbox',
           sortable: false,
-          thClass: ' event-logs-table__th',
-          class: 'event-logs-table__id',
-          tdClass: 'event-logs-table__td',
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageEventLogs.table.id'),
           sortable: true,
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'semi-bold-12px event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'semi-bold-12px logs-table__td',
         },
         {
           key: 'description',
           label: this.$t('pageEventLogs.table.about_event'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'source',
           label: this.$t('pageEventLogs.table.source'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'semi-bold-12px__caps tretiatry event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ',
         },
         {
           key: 'date',
           label: this.$t('pageEventLogs.table.date'),
           sortable: true,
-          thClass: `bold-12px__caps event-logs-table__th event-logs-table__th__date`,
-          tdClass: 'event-logs-table__td',
+          thClass: `bold-12px__caps logs-table__th`,
+          tdClass: 'logs-table__td',
         },
         {
           key: 'status',
           sortable: true,
           label: this.$t('pageEventLogs.table.status'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'event-logs-table__td',
-        },
-      ],
-      allLogs: [
-        {
-          checkbox: false,
-          id: 1,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-            full_description: '',
-          },
-          severity: 'Критические',
-          source: 'Вентиляторы',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 2,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 3,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 4,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: 'expandRow',
-        },
-        {
-          checkbox: false,
-          id: 5,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 6,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 7,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 8,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Вентиляторы',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 9,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 10,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 11,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: 'expandRow',
-        },
-        {
-          checkbox: false,
-          id: 12,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 13,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 14,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-      ],
-      tableFilters: [
-        {
-          key: 'severity',
-          label: this.$t('pageEventLogs.table.severity'),
-          values: ['Информационное', 'Предупреждения', 'Критические'],
-        },
-        {
-          key: 'filterByStatus',
-          label: this.$t('pageEventLogs.table.status'),
-          values: ['Resolved', 'Unresolved'],
-        },
-        {
-          key: 'status',
-          label: this.$t('pageEventLogs.table.status'),
-          values: [false, true],
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
       ],
       eventFilter: 1,
@@ -587,13 +428,17 @@ export default {
           text: 'Информационное',
         },
         {
-          value: 'warning',
+          value: 'Warning',
           text: 'Предупреждения',
         },
         {
           value: 'critical',
           text: 'Критические',
         },
+        {
+          value: 'ok',
+          text: 'ok',
+        },
       ],
       eventSourseFilter: 1,
       eventSourseFilters: [
@@ -636,23 +481,23 @@ export default {
         ? this.searchTotalFilteredRows
         : this.filteredLogs.length;
     },
-    // allLogs() {
-    //   return this.$store.getters['eventLog/allEvents'].map((event) => {
-    //     return {
-    //       ...event,
-    //       actions: [
-    //         {
-    //           value: 'export',
-    //           title: this.$t('global.action.export'),
-    //         },
-    //         {
-    //           value: 'delete',
-    //           title: this.$t('global.action.delete'),
-    //         },
-    //       ],
-    //     };
-    //   });
-    // },
+    allLogs() {
+      return this.$store.getters['eventLog/allEvents'].map((event) => {
+        return {
+          ...event,
+          actions: [
+            {
+              value: 'export',
+              title: this.$t('global.action.export'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        };
+      });
+    },
     batchExportData() {
       return this.selectedRows.map((row) => omit(row, 'actions'));
     },
@@ -667,15 +512,15 @@ export default {
       return this.getFilteredTableData(
         this.filteredLogsByDate,
         this.activeFilters
-      );
+      ).filter((el) => el.description);
     },
   },
   created() {
-    // this.startLoader();
-    // this.$store.dispatch('eventLog/getEventLogData').finally(() => {
-    //   this.endLoader();
-    //   this.isBusy = false;
-    // });
+    this.startLoader();
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
   },
   methods: {
     redirectFans() {
@@ -693,21 +538,10 @@ export default {
         .catch(({ message }) => this.errorToast(message));
     },
     deleteAllLogs() {
-      this.$bvModal
-        .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
-          title: this.$t('pageEventLogs.modal.deleteAllTitle'),
-          okTitle: this.$t('global.action.delete'),
-          okVariant: 'danger',
-          cancelTitle: this.$t('global.action.cancel'),
-        })
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
+      this.$store
+        .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
     },
     deleteLogs(uris) {
       this.$store
@@ -738,19 +572,19 @@ export default {
         return this.sortStatus(a, b, key);
       }
     },
-    // onTableRowAction(action, { uri }) {
-    //   if (action === 'delete') {
-    //     this.$bvModal
-    //       .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
-    //         title: this.$tc('pageEventLogs.modal.deleteTitle'),
-    //         okTitle: this.$t('global.action.delete'),
-    //         cancelTitle: this.$t('global.action.cancel'),
-    //       })
-    //       .then((deleteConfirmed) => {
-    //         if (deleteConfirmed) this.deleteLogs([uri]);
-    //       });
-    //   }
-    // },
+    onTableRowAction(action, { uri }) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
+            title: this.$tc('pageEventLogs.modal.deleteTitle'),
+            okTitle: this.$t('global.action.delete'),
+            cancelTitle: this.$t('global.action.cancel'),
+          })
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) this.deleteLogs([uri]);
+          });
+      }
+    },
     onBatchAction(action) {
       if (action === 'delete') {
         const uris = this.selectedRows.map((row) => row.uri);
@@ -838,17 +672,6 @@ export default {
 };
 </script>
 <style lang="scss">
-#event-logs-table {
-  margin: 0 !important;
-}
-
-.event-logs-table__th {
-  background-color: #f8f8f8 !important;
-  border-bottom: 1px solid $faint-secondary-primary-20 !important;
-  border-top: 1px solid $faint-secondary-primary-20 !important;
-  color: $text-primary !important;
-}
-
 .event-logs-section .table.b-table > thead > tr > [aria-sort='ascending'] {
   background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg');
 }
@@ -859,22 +682,11 @@ export default {
 }
 
 .event-logs-section .b-table-sort-icon-left {
-  background-position: left 57% center !important;
   background-size: 15px !important;
-  padding-left: 0.75rem !important;
-  padding-right: 2rem !important;
-  &.event-logs-table__th__date {
-    background-position: left 33% center !important;
-  }
 }
 
-.event-logs-table__id {
-  padding-left: 38px !important;
-}
-
-.event-logs-table__td {
-  border-bottom: 1px solid $faint-secondary-primary-10 !important;
-  height: 64px;
+.b-table-details > td {
+  padding: 0px !important;
 }
 </style>
 <style lang="scss" scoped>
@@ -962,69 +774,14 @@ $toolbar-height: 64px;
   width: 236px;
 }
 
-.bold-12px__caps {
-  color: $text-primary !important;
-}
-
 .custom-checkbox {
   background-color: none;
 }
 
-#event-logs-table-wrapper div {
-  overflow-y: overlay;
-  &::-webkit-scrollbar {
-    position: absolute;
-    width: 10px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border: 4px solid transparent;
-    border-top: 52px solid transparent;
-    background: $faint-secondary-primary-20;
-    border-radius: 16px;
-    background-clip: content-box;
-  }
-}
-
-.table-toolbar__resolved-button {
-  width: 226px;
-  height: 36px;
-  background-color: $faint-secondary-primary-5;
-  border-radius: 8px;
-  color: $red-brand-primary;
-  margin-right: 1rem;
-  justify-content: center;
-}
-
-.table-toolbar__unresolved-button {
-  width: 226px;
-  height: 36px;
-  background-color: $red-brand-primary;
-  border-radius: 8px;
-  color: $white;
-  margin-right: 2rem;
-  justify-content: center;
-}
-
 .sourse__img {
   padding-right: 8px;
 }
 
-.errors {
-  color: $indicators-errors !important;
-}
-
-.warning {
-  color: $indicators-warning !important;
-}
-
-.information {
-  color: $indicators-complementary !important;
-}
-
-.resolved {
-  color: $indicators-succes;
-}
-
 .not-resolved {
   color: $text-quaternary;
 }
@@ -1065,11 +822,12 @@ $toolbar-height: 64px;
 
 .pagination-items-limit {
   margin-left: auto;
-  width: 400px;
   display: flex;
+  gap: 7px;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
+  margin-right: 1rem;
 }
 
 .items-per-page {
-- 
cgit v1.2.3