Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.

4 files changed, 1253 insertions, 0 deletions

diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
new file mode 100644
index 00000000..b736f026
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
@@ -0,0 +1,167 @@
+<template>
+  <b-container fluid="xxl pt-0 m-0">
+    <page-title />
+    <div class="main-container">
+      <div class="tables-container">
+        <div class="server-table">
+          <span class="semi-bold-16px">Состояние сервера</span>
+          <b-table
+            show-empty
+            responsive="md"
+            class="bootstrap-analytical-table"
+            :items="server_items"
+            :fields="server_fields"
+          >
+            <template #cell(value)="{ value }">
+              <b-col v-if="value" col="1">
+                <img
+                  src="@/assets/images/icon-ok.svg"
+                  class="system-network-table__icon"
+                />
+              </b-col>
+              <b-col v-else>
+                <img
+                  src="@/assets/images/icon-no.svg"
+                  class="system-network-table__icon"
+                />
+              </b-col>
+            </template>
+          </b-table>
+        </div>
+        <div class="events-table">
+          <span class="semi-bold-16px">События</span>
+          <b-table
+            show-empty
+            responsive="md"
+            class="bootstrap-analytical-table"
+            :items="events_items"
+            :fields="events_fields"
+          >
+          </b-table>
+        </div>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+
+export default {
+  components: {
+    PageTitle,
+  },
+
+  data() {
+    return {
+      server_fields: [
+        {
+          key: 'param',
+          label: 'Раздел',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class: 'bootstrap-analytical-table__column-first',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class:
+            'bootstrap-rounded-table__column-last analytical-table__status',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+      ],
+      server_items: [
+        { param: 'Сервер №1', value: true },
+        { param: 'ВМС', value: true },
+        { param: 'Аналитическая панель', value: true },
+        { param: 'RAID-контроллеры', value: false },
+        { param: 'Модули памяти', value: true },
+        { param: 'Процессоры', value: true },
+        { param: 'Источники питания', value: true },
+        { param: 'Вентиляторы', value: true },
+        { param: 'Физические накопители', value: true },
+        { param: 'Виртуальные накопители', value: true },
+        { param: 'Материнская плата', value: true },
+        { param: 'Сетевые адаптеры', value: true },
+        { param: 'PCI устройства', value: true },
+      ],
+      events_fields: [
+        {
+          key: 'time',
+          label: 'Время',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class: 'bootstrap-analytical-table__column-first',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+        {
+          key: 'type',
+          label: 'Тип события',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+        {
+          key: 'info',
+          label: 'О событии',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-analytical-table__td',
+        },
+      ],
+      events_items: [
+        { time: 'Сервер №1', type: 'Критические', info: 'true' },
+        { time: 'ВМС', type: 'Критические', info: 'true' },
+        {
+          time: 'Аналитическая панель',
+          type: 'Критические',
+          info: 'true',
+        },
+        {
+          time: 'RAID-контроллеры',
+          type: 'Критические',
+          info: 'false',
+        },
+        {
+          time: 'Модули памяти',
+          type: 'Критические',
+          info: 'true',
+        },
+        { time: 'Процессоры', type: 'Критические', info: 'true' },
+        {
+          time: 'Источники питания',
+          type: 'Критические',
+          info: 'true',
+        },
+        { time: 'Вентиляторы', type: 'Критические', info: 'true' },
+        { time: 'Физические накопители', type: 'Критические', info: 'true' },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss">
+.analytical-table__status {
+  width: 10%;
+}
+</style>
+<style lang="scss" scoped>
+.tables-container {
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 16px 32px;
+  gap: 24px;
+}
+
+.server-table {
+  width: 35%;
+}
+
+.events-table {
+  width: 65%;
+}
+</style>
diff --git a/src/views/SILA/AnalyticalPanel/index.js b/src/views/SILA/AnalyticalPanel/index.js
new file mode 100644
index 00000000..7da2938e
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/index.js
@@ -0,0 +1,2 @@
+import AnalyticalPanelPage from './AnalyticalPanelPage.vue';
+export default AnalyticalPanelPage;
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
new file mode 100644
index 00000000..0d5ce428
--- /dev/null
+++ b/src/views/SILA/EventLogs/EventLogs.vue
@@ -0,0 +1,1082 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+    class="event-logs-section"
+  >
+    <page-title />
+    <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 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"
+        :isclear="true"
+        class="clear-popover"
+      />
+    </div>
+    <table-toolbar
+      ref="toolbar"
+      :selected-items-count="selectedRows.length"
+      :actions="batchActions"
+      @clear-selected="clearSelectedRows($refs.table)"
+    >
+      <template #toolbar-buttons>
+        <b-button
+          variant="primary"
+          class="table-toolbar__resolved-button"
+          @click="resolveLogs"
+        >
+          <img
+            class="sourse__img"
+            src="@/assets/images/event-logs/resolved-button.svg"
+          />
+          {{ $t('pageEventLogs.event_resolve') }}
+        </b-button>
+        <b-button
+          variant="primary"
+          class="table-toolbar__unresolved-button"
+          @click="unresolveLogs"
+        >
+          <img
+            class="sourse__img"
+            src="@/assets/images/event-logs/archive.svg"
+          />
+          {{ $t('pageEventLogs.archive') }}
+        </b-button>
+      </template>
+    </table-toolbar>
+    <div id="event-logs-table-wrapper">
+      <b-table
+        id="event-logs-table"
+        ref="table"
+        responsive="md"
+        class="event-logs-table"
+        selectable
+        no-select-on-click
+        sort-icon-left
+        :sticky-header="stickyHeader"
+        :no-border-collapse="true"
+        no-sort-reset
+        :sort-desc="sortDesc"
+        sort-by="id"
+        :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">
+            {{ data.item.description.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>
+        </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"
+          >
+            {{ value }}
+          </span>
+          <span v-else class="bold-12px__caps information">{{ value }}</span>
+        </template>
+        <!-- Date 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>
+            <img
+              src="@/assets/images/event-logs/memory-module.svg"
+              class="sourse__img"
+            />
+            <span>{{ value }}</span>
+          </b-row>
+        </template>
+
+        <template #cell(date)="{ value }">
+          <img src="@/assets/images/event-logs/time.svg" class="sourse__img" />
+          <span class="regular-12px quaternary"> {{ value }} </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>
+      </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" />
+      </div>
+      <div class="pagination-items-limit">
+        <span class="semi-bold-16px"> Показывать по </span>
+        <b-form-select
+          v-model="itemsPerPage"
+          :options="itemsPerPageOptions"
+          class="event-logs__filter items-per-page semi-bold-16px"
+        />
+        <span class="semi-bold-16px"> записей на странице </span>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import { omit } from 'lodash';
+import PageTitle from '@/components/Global/PageTitle';
+import Popover from '@/components/Global/Popover';
+import TableToolbar from '@/components/Global/TableToolbar';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+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';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  components: {
+    PageTitle,
+    Popover,
+    TableToolbar,
+  },
+  mixins: [
+    BVTableSelectableMixin,
+    BVToastMixin,
+    LoadingBarMixin,
+    TableFilterMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    TableRowExpandMixin,
+    SearchFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      sortDesc: true,
+      stickyHeader: 'calc(100vh - 243px)',
+      itemsPerPage: 50,
+      itemsPerPageOptions: [
+        {
+          value: 10,
+          text: '10',
+        },
+        {
+          value: 50,
+          text: '50',
+        },
+        {
+          value: 100,
+          text: '100',
+        },
+      ],
+      fields: [
+        {
+          key: 'checkbox',
+          sortable: false,
+          thClass: ' event-logs-table__th',
+          class: 'event-logs-table__id',
+          tdClass: 'event-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',
+        },
+        {
+          key: 'description',
+          label: this.$t('pageEventLogs.table.about_event'),
+          thClass: 'bold-12px__caps event-logs-table__th',
+          tdClass: 'event-logs-table__td',
+        },
+        {
+          key: 'severity',
+          label: this.$t('pageEventLogs.table.severity'),
+          thClass: 'bold-12px__caps event-logs-table__th',
+          tdClass: 'event-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',
+        },
+        {
+          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',
+        },
+        {
+          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],
+        },
+      ],
+      eventFilter: 1,
+      eventFilters: [
+        {
+          value: 1,
+          text: 'Все события',
+        },
+      ],
+      eventTypeFilter: 'all',
+      eventTypeFilters: [
+        {
+          value: 'all',
+          text: 'Все события',
+        },
+        {
+          value: 'info',
+          text: 'Информационное',
+        },
+        {
+          value: 'warning',
+          text: 'Предупреждения',
+        },
+        {
+          value: 'critical',
+          text: 'Критические',
+        },
+      ],
+      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
+      );
+    },
+  },
+  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.$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));
+          }
+        });
+    },
+    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">
+#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');
+}
+
+.event-logs-section .table.b-table > thead > tr > [aria-sort='descending'],
+.table.b-table > thead > tr > [aria-sort='none'] {
+  background-image: url('../../../assets/images/event-logs/sort-icon.svg');
+}
+
+.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;
+}
+</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-search {
+  position: absolute;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
+  box-shadow: none;
+  border-radius: 8px;
+  margin: 12px 32px;
+  width: 236px;
+  height: 40px;
+  z-index: 1001;
+}
+
+.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;
+}
+
+.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;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.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 {
+  width: 300px;
+  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;
+  width: 400px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.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;
+}
+
+.pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js
new file mode 100644
index 00000000..521efde4
--- /dev/null
+++ b/src/views/SILA/EventLogs/index.js
@@ -0,0 +1,2 @@
+import EventLogs from './EventLogs.vue';
+export default EventLogs;