From 931c2cad0da1a84e3df0745b385ec06d29cc2634 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 20 Jun 2022 11:52:15 +0300
Subject: fix Modals, Tables and Pages: event logs, inventoty, post logs,
 operttions, global styles

---
 src/views/SILA/EventLogs/EventLogs.vue | 833 ---------------------------------
 1 file changed, 833 deletions(-)
 delete mode 100644 src/views/SILA/EventLogs/EventLogs.vue

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

diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
deleted file mode 100644
index c7f65e8b..00000000
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ /dev/null
@@ -1,833 +0,0 @@
-<template>
-  <b-container
-    :style="{ display: 'flex', 'flex-direction': 'column' }"
-    fluid="xxl pt-0 m-0"
-    class="logs-section"
-  >
-    <page-title />
-    <div class="event-log-head-container">
-      <span class="regular-12px">Срок хранения событий:</span>
-      <span class="semi-bold-12px">42 дня</span>
-      <span class="regular-12px red" style="color: $red-brand-primary"
-        >Изменить</span
-      >
-      <div class="form-control event-log-search">
-        <button class="search-button">
-          <img
-            class="event-log-search__icon"
-            src="@/assets/images/search-icon.svg"
-          />
-        </button>
-        <b-form-input
-          v-model="searchInput"
-          type="text"
-          class="event-log-search__input"
-          placeholder="Поиск по журналу"
-          @input="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        >
-        </b-form-input>
-      </div>
-    </div>
-    <div class="event-logs__section">
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{ $t('pageEventLogs.eventFilter') }}</span>
-        <b-form-select
-          v-model="eventFilter"
-          :options="eventFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventTypeFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventTypeFilter"
-          :options="eventTypeFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventSourseFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventSourseFilter"
-          :options="eventSourseFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventDateFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventDateFilter"
-          :options="eventDateFilters"
-          class="event-logs__filter-date regular-14px"
-        />
-      </div>
-      <popover
-        id="popover-reactive-1"
-        description="pageEventLogs.clearLogs"
-        popup="pageEventLogs.clearLogs_popup"
-        button="pageEventLogs.clear"
-        placement="bottom"
-        :isclear="true"
-        class="clear-popover"
-        :action="deleteAllLogs"
-      />
-    </div>
-    <table-toolbar
-      ref="toolbar"
-      :selected-items-count="selectedRows.length"
-      :actions="batchActions"
-      @clear-selected="clearSelectedRows($refs.table)"
-    >
-      <template #toolbar-buttons>
-        <b-button
-          size="md"
-          variant="secondary"
-          style="margin-right: 1rem"
-          @click="resolveLogs"
-        >
-          <img
-            class="sourse__img"
-            src="@/assets/images/event-logs/resolved-button.svg"
-          />
-          {{ $t('pageEventLogs.event_resolve') }}
-        </b-button>
-        <b-button
-          size="md"
-          variant="primary"
-          style="margin-right: 1rem"
-          @click="unresolveLogs"
-        >
-          <img
-            class="sourse__img"
-            src="@/assets/images/event-logs/archive.svg"
-          />
-          {{ $t('pageEventLogs.archive') }}
-        </b-button>
-        <table-toolbar-export
-          :data="batchExportData"
-          style="margin-right: 1rem"
-          :file-name="exportFileNameByDate()"
-        />
-      </template>
-    </table-toolbar>
-    <div id="logs-table-wrapper">
-      <b-table
-        id="logs-table"
-        ref="table"
-        responsive="md"
-        class="logs-table"
-        selectable
-        :busy="isBusy"
-        no-select-on-click
-        sort-icon-left
-        :sticky-header="stickyHeader"
-        :no-border-collapse="true"
-        no-sort-reset
-        :sort-desc="sortDesc"
-        sort-by="id"
-        :current-page="currentPage"
-        :per-page="perPage"
-        :fields="fields"
-        :items="filteredLogs"
-        :sort-compare="onSortCompare"
-        :empty-text="$t('global.table.emptyMessage')"
-        :empty-filtered-text="$t('global.table.emptySearchMessage')"
-        :filter="searchFilter"
-        @filtered="onFiltered"
-        @row-selected="onRowSelected($event, filteredLogs.length)"
-      >
-        <!-- Checkbox column -->
-        <template #head(checkbox)>
-          <b-form-checkbox
-            v-model="tableHeaderCheckboxModel"
-            data-test-id="eventLogs-checkbox-selectAll"
-            :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"
-            :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
-            @change="toggleSelectRow($refs.table, row.index)"
-          >
-            <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-          </b-form-checkbox>
-        </template>
-        <template #cell(description)="data">
-          <b-row class="semi-bold-16px tretiatry">
-            {{ filteredLogs[data.index].name }}
-          </b-row>
-          <b-row
-            class="regular-12px tretiatry pointer"
-            @click="toggleRowDetails(data)"
-          >
-            {{ data.value }}
-          </b-row>
-        </template>
-        <!-- Severity column -->
-        <template #cell(severity)="{ value }">
-          <span
-            :class="`indicators-${value}`"
-            class="bold-12px__caps"
-            style="text-overflow: ellipsis; white-space: nowrap"
-          >
-            {{ value }}</span
-          >
-        </template>
-        <!-- Source column -->
-        <template #cell(source)="{ value }">
-          <b-row v-if="value === 'Процессоры'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/processor.svg"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'Вентиляторы'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/fans.svg"
-            />
-            <span class="pointer" @click="redirectFans">{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'RAID-контролеры'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/raid-controllers.svg"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <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 v-if="value" class="regular-12px quaternary">
-            {{ value | formatDate }}
-          </span>
-          <span v-if="value" class="regular-12px quaternary">
-            в {{ value | formatTimeShort }}
-          </span>
-        </template>
-
-        <!-- Status column -->
-        <template #cell(status)="{ value }">
-          <b-row v-if="value === true">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/resolved.svg"
-            />
-            <span class="semi-bold-12px__caps resolved">
-              {{ $t('pageEventLogs.resolved') }}
-            </span>
-          </b-row>
-          <b-row v-else>
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/not-resolved.svg"
-            />
-            <span class="semi-bold-12px__caps not-resolved">
-              {{ $t('pageEventLogs.unresolved') }}</span
-            >
-          </b-row>
-        </template>
-        <template #row-details="{ item }">
-          <b-container
-            fluid
-            style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)"
-          >
-            <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 style="margin-left: 10px" class="pagination-content">
-        <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="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>
-</template>
-
-<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 TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-
-export default {
-  components: {
-    PageTitle,
-    Popover,
-    TableToolbar,
-    TableToolbarExport,
-    IconExport,
-  },
-  mixins: [
-    BVTableSelectableMixin,
-    BVToastMixin,
-    LoadingBarMixin,
-    TableFilterMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    TableRowExpandMixin,
-    SearchFilterMixin,
-    BVPaginationMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      isBusy: true,
-      perPage,
-      itemsPerPageOptions,
-      currentPage,
-      sortDesc: true,
-      stickyHeader: 'calc(100vh - 307px)',
-      fields: [
-        {
-          key: 'checkbox',
-          sortable: false,
-          thClass: ' logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'id',
-          label: this.$t('pageEventLogs.table.id'),
-          sortable: true,
-          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 logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'severity',
-          label: this.$t('pageEventLogs.table.severity'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'source',
-          label: this.$t('pageEventLogs.table.source'),
-          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 logs-table__th`,
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'status',
-          sortable: true,
-          label: this.$t('pageEventLogs.table.status'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-      ],
-      eventFilter: 1,
-      eventFilters: [
-        {
-          value: 1,
-          text: 'Все события',
-        },
-      ],
-      eventTypeFilter: 'all',
-      eventTypeFilters: [
-        {
-          value: 'all',
-          text: 'Все события',
-        },
-        {
-          value: 'info',
-          text: 'Информационное',
-        },
-        {
-          value: 'Warning',
-          text: 'Предупреждения',
-        },
-        {
-          value: 'critical',
-          text: 'Критические',
-        },
-        {
-          value: 'ok',
-          text: 'ok',
-        },
-      ],
-      eventSourseFilter: 1,
-      eventSourseFilters: [
-        {
-          value: 1,
-          text: 'Все события',
-        },
-      ],
-      eventDateFilter: 1,
-      eventDateFilters: [
-        {
-          value: 1,
-          text: 'События за последний час',
-        },
-      ],
-      expandRowLabel,
-      activeFilters: [],
-      batchActions: [
-        {
-          value: 'delete',
-          label: this.$t('global.action.delete'),
-        },
-      ],
-      filterStartDate: null,
-      filterEndDate: null,
-      searchInput: null,
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      selectedRows: selectedRows,
-      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
-      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
-    };
-  },
-  computed: {
-    href() {
-      return `data:text/json;charset=utf-8,${this.exportAllLogs()}`;
-    },
-    filteredRows() {
-      return this.searchFilter
-        ? 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'),
-            },
-          ],
-        };
-      });
-    },
-    batchExportData() {
-      return this.selectedRows.map((row) => omit(row, 'actions'));
-    },
-    filteredLogsByDate() {
-      return this.getFilteredTableDataByDate(
-        this.allLogs,
-        this.filterStartDate,
-        this.filterEndDate
-      );
-    },
-    filteredLogs() {
-      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;
-    });
-  },
-  methods: {
-    redirectFans() {
-      this.$router.push('/fans');
-    },
-    changelogStatus(row) {
-      this.$store
-        .dispatch('eventLog/updateEventLogStatus', {
-          uri: row.uri,
-          status: row.status,
-        })
-        .then((success) => {
-          this.successToast(success);
-        })
-        .catch(({ message }) => this.errorToast(message));
-    },
-    deleteAllLogs() {
-      this.$store
-        .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    deleteLogs(uris) {
-      this.$store
-        .dispatch('eventLog/deleteEventLogs', uris)
-        .then((messages) => {
-          messages.forEach(({ type, message }) => {
-            if (type === 'success') {
-              this.successToast(message);
-            } else if (type === 'error') {
-              this.errorToast(message);
-            }
-          });
-        });
-    },
-    exportAllLogs() {
-      {
-        return this.$store.getters['eventLog/allEvents'].map((eventLogs) => {
-          const allEventLogsString = JSON.stringify(eventLogs);
-          return allEventLogsString;
-        });
-      }
-    },
-    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(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);
-        this.$bvModal
-          .msgBoxConfirm(
-            this.$tc(
-              'pageEventLogs.modal.deleteMessage',
-              this.selectedRows.length
-            ),
-            {
-              title: this.$tc(
-                'pageEventLogs.modal.deleteTitle',
-                this.selectedRows.length
-              ),
-              okTitle: this.$t('global.action.delete'),
-              cancelTitle: this.$t('global.action.cancel'),
-            }
-          )
-          .then((deleteConfirmed) => {
-            if (deleteConfirmed) {
-              if (this.selectedRows.length === this.allLogs.length) {
-                this.$store
-                  .dispatch(
-                    'eventLog/deleteAllEventLogs',
-                    this.selectedRows.length
-                  )
-                  .then((message) => this.successToast(message))
-                  .catch(({ message }) => this.errorToast(message));
-              } else {
-                this.deleteLogs(uris);
-              }
-            }
-          });
-      }
-    },
-    onChangeDateTimeFilter({ fromDate, toDate }) {
-      this.filterStartDate = fromDate;
-      this.filterEndDate = toDate;
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    // Create export file name based on date
-    exportFileNameByDate(value) {
-      let date = new Date();
-      date =
-        date.toISOString().slice(0, 10) +
-        '_' +
-        date.toString().split(':').join('-').split(' ')[4];
-      let fileName;
-      if (value === 'export') {
-        fileName = 'event_log_';
-      } else {
-        fileName = 'all_event_logs_';
-      }
-      return fileName + date;
-    },
-    resolveLogs() {
-      this.$store
-        .dispatch('eventLog/resolveEventLogs', this.selectedRows)
-        .then((messages) => {
-          messages.forEach(({ type, message }) => {
-            if (type === 'success') {
-              this.successToast(message);
-            } else if (type === 'error') {
-              this.errorToast(message);
-            }
-          });
-        });
-    },
-    unresolveLogs() {
-      this.$store
-        .dispatch('eventLog/unresolveEventLogs', this.selectedRows)
-        .then((messages) => {
-          messages.forEach(({ type, message }) => {
-            if (type === 'success') {
-              this.successToast(message);
-            } else if (type === 'error') {
-              this.errorToast(message);
-            }
-          });
-        });
-    },
-  },
-};
-</script>
-<style lang="scss">
-.b-table-details > td {
-  padding: 0px !important;
-}
-</style>
-<style lang="scss" scoped>
-$toolbar-height: 64px;
-.row {
-  margin: 0px;
-}
-
-.clear-popover {
-  margin-left: auto;
-}
-
-.event-logs__section {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  height: 84px;
-  gap: 16px;
-  margin: 0 32px;
-}
-
-.event-log-head-container {
-  position: absolute;
-  top: calc(#{$header-height});
-  right: 0px;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 6px;
-  z-index: 1001;
-}
-
-.event-log-search {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  border: none;
-  box-shadow: none;
-  border-radius: 8px;
-  margin: 12px 32px 12px 16px;
-  width: 236px;
-  height: 40px;
-}
-
-.search-button {
-  border: none;
-  background: none;
-}
-
-.event-log-search__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.event-log-search__input {
-  border: none;
-  background: none;
-  box-shadow: none;
-}
-
-.event-logs__filter-container {
-  width: 183px;
-}
-
-.event-logs__filter,
-.event-logs__filter-date {
-  height: 40px;
-  border: none;
-  border-radius: 8px;
-  background-image: url('../../../assets/images/icon-chevron.svg');
-}
-
-.caption-12px {
-  padding-left: 10px;
-}
-
-.event-logs__filter {
-  width: 171px;
-}
-
-.event-logs__filter-date {
-  width: 236px;
-}
-
-.custom-checkbox {
-  background-color: none;
-}
-
-.sourse__img {
-  padding-right: 8px;
-}
-
-.not-resolved {
-  color: $text-quaternary;
-}
-
-.pagination-container {
-  width: calc(100% - #{$navigation-width});
-  height: $toolbar-height;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
-  z-index: $zindex-dropdown;
-  background-color: $white;
-}
-
-.pagination-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-.page-input {
-  display: inline-block;
-  width: 55px;
-  height: 24px;
-  border: 1px solid $on-surface-tretiatry;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pagination-items-limit {
-  margin-left: auto;
-  display: flex;
-  gap: 7px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-  margin-right: 1rem;
-}
-
-.items-per-page {
-  padding: 0 0 0 5px;
-  width: 55px;
-  height: 24px;
-  background-color: transparent;
-  border: 1px solid $on-surface-tretiatry;
-  border-radius: 4px;
-}
-
-.row-details {
-  display: block;
-  height: auto;
-  width: 70vw;
-}
-</style>
-- 
cgit v1.2.3