From 1272456ab2cb77f29b27f3839563b09a709cbc06 Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Wed, 13 Jul 2022 15:46:06 +0300
Subject: move sila-dev to _sila

---
 src/views/_sila/Logs/EventLogs/EventLogs.vue | 337 +++++++++++++++------------
 1 file changed, 185 insertions(+), 152 deletions(-)

(limited to 'src/views/_sila/Logs/EventLogs/EventLogs.vue')

diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue
index adaa2e9e..dda42c6c 100644
--- a/src/views/_sila/Logs/EventLogs/EventLogs.vue
+++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue
@@ -1,63 +1,93 @@
 <template>
-  <b-container fluid="xl">
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+    class="logs-section"
+  >
     <page-title />
+    <div class="logs-head-container">
+      <table-cell-count
+        :filtered-items-count="filteredRows"
+        :total-number-of-cells="allLogs.length"
+      ></table-cell-count>
+      <search
+        :placeholder="$t('pageEventLogs.table.searchLogs')"
+        data-test-id="eventLogs-input-searchLogs"
+        style="margin: 13px; width: 35%"
+        @change-search="onChangeSearchInput"
+        @clear-search="onClearSearchInput"
+      />
+    </div>
     <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-        <search
-          :placeholder="$t('pageEventLogs.table.searchLogs')"
-          data-test-id="eventLogs-input-searchLogs"
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-        <div class="ml-sm-4">
-          <table-cell-count
-            :filtered-items-count="filteredRows"
-            :total-number-of-cells="allLogs.length"
-          ></table-cell-count>
-        </div>
-      </b-col>
-      <b-col sm="8" md="7" xl="6">
+      <b-col md="12" xl="6">
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="text-right">
+      <b-col
+        md="12"
+        xl="6"
+        class="d-flex align-items-end justify-content-between mt-3"
+      >
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
-        <b-button
-          variant="link"
-          :disabled="allLogs.length === 0"
-          @click="deleteAllLogs"
+        <popover-with-slot
+          id="popover-delete"
+          :button-label="$t('pageEventLogs.clear')"
+          :popup-label="$t('pageEventLogs.clearLogs_popup')"
+          placement="left"
+          :action="deleteAllLogs"
         >
-          <icon-delete /> {{ $t('global.action.deleteAll') }}
-        </b-button>
+          <b-button
+            id="popover-delete"
+            ref="button"
+            variant="link"
+            style="color: $red-brand-primary"
+            :disabled="allLogs.length === 0"
+          >
+            <icon-delete /> {{ $t('pageEventLogs.clearLogs') }}
+          </b-button>
+        </popover-with-slot>
         <b-button
           variant="primary"
+          size="md"
           :class="{ disabled: allLogs.length === 0 }"
           :download="exportFileNameByDate()"
           :href="href"
         >
-          <icon-export /> {{ $t('global.action.exportAll') }}
+          <icon-download /> {{ $t('global.action.exportAll') }}
         </b-button>
       </b-col>
     </b-row>
     <b-row>
-      <b-col>
+      <b-col id="logs-table-wrapper" class="m-0 p-0">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
           :actions="batchActions"
           @clear-selected="clearSelectedRows($refs.table)"
-          @batch-action="onBatchAction"
         >
           <template #toolbar-buttons>
-            <b-button variant="primary" @click="resolveLogs">
+            <b-button
+              size="md"
+              variant="secondary"
+              style="margin-right: 1rem"
+              @click="resolveLogs"
+            >
+              <img
+                class="sourse__img"
+                src="@/assets/images/_sila/event-logs/resolved-button.svg"
+              />
               {{ $t('pageEventLogs.resolve') }}
             </b-button>
-            <b-button variant="primary" @click="unresolveLogs">
+            <b-button
+              size="md"
+              variant="primary"
+              style="margin-right: 1rem"
+              @click="unresolveLogs"
+            >
               {{ $t('pageEventLogs.unresolve') }}
             </b-button>
             <table-toolbar-export
               :data="batchExportData"
+              style="margin-right: 1rem"
               :file-name="exportFileNameByDate()"
             />
           </template>
@@ -66,6 +96,7 @@
           id="table-event-logs"
           ref="table"
           responsive="md"
+          class="logs-table"
           selectable
           no-select-on-click
           sort-icon-left
@@ -73,7 +104,9 @@
           no-sort-reset
           sort-desc
           show-empty
+          no-border-collapse
           sort-by="id"
+          :sticky-header="true"
           :fields="fields"
           :items="filteredLogs"
           :sort-compare="onSortCompare"
@@ -106,126 +139,123 @@
               <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
             </b-form-checkbox>
           </template>
-
-          <!-- Expand chevron icon -->
-          <template #cell(expandRow)="row">
-            <b-button
-              variant="link"
-              :aria-label="expandRowLabel"
-              :title="expandRowLabel"
-              class="btn-icon-only"
-              @click="toggleRowDetails(row)"
+          <!-- Description column -->
+          <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)"
             >
-              <icon-chevron />
-            </b-button>
+              {{ data.value }}
+            </b-row>
           </template>
 
           <template #row-details="{ item }">
-            <b-container fluid>
+            <b-container
+              fluid
+              style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)"
+            >
               <b-row>
-                <b-col>
+                <b-col class="mt-1">
                   <dl>
                     <!-- Name -->
-                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
-                    <dd>{{ dataFormatter(item.name) }}</dd>
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.name') }}:
+                    </dt>
+                    <dd class="regular-12px">{{ dataFormatter(item.name) }}</dd>
                   </dl>
                   <dl>
-                    <!-- Type -->
-                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
-                    <dd>{{ dataFormatter(item.type) }}</dd>
+                    <!-- Description -->
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.description') }}:
+                    </dt>
+                    <dd class="regular-12px tretiatry">
+                      {{ dataFormatter(item.description) }}
+                    </dd>
                   </dl>
-                </b-col>
-                <b-col>
                   <dl>
-                    <!-- Modified date -->
-                    <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
-                    <dd v-if="item.modifiedDate">
-                      {{ item.modifiedDate | formatDate }}
-                      {{ item.modifiedDate | formatTime }}
+                    <!-- Type -->
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.type') }}:
+                    </dt>
+                    <dd class="regular-12px tretiatry">
+                      {{ dataFormatter(item.type) }}
                     </dd>
-                    <dd v-else>--</dd>
                   </dl>
                 </b-col>
-                <b-col class="text-nowrap">
-                  <b-button
-                    class="btn btn-secondary float-right"
-                    :href="item.additionalDataUri"
-                    target="_blank"
-                  >
-                    <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
-                  </b-button>
-                </b-col>
               </b-row>
             </b-container>
           </template>
 
           <!-- Severity column -->
           <template #cell(severity)="{ value }">
-            <status-icon v-if="value" :status="statusIcon(value)" />
-            {{ value }}
+            <span
+              :class="`indicators-${value}`"
+              class="bold-12px__caps"
+              style="text-overflow: ellipsis; white-space: nowrap"
+            >
+              {{ value }}</span
+            >
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <img
+              src="@/assets/images/_sila/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)="row">
-            <b-form-checkbox
-              v-model="row.item.status"
-              name="switch"
-              switch
-              @change="changelogStatus(row.item)"
-            >
-              <span v-if="row.item.status">
+          <template #cell(status)="{ value }">
+            <b-row v-if="value === true">
+              <img
+                class="sourse__img"
+                src="@/assets/images/_sila/event-logs/resolved.svg"
+              />
+              <span class="semi-bold-12px__caps resolved">
                 {{ $t('pageEventLogs.resolved') }}
               </span>
-              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(filterByStatus)="{ value }">
-            {{ value }}
-          </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"
-              :row-data="row.item"
-              :export-name="exportFileNameByDate('export')"
-              :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
-              @click-table-action="onTableRowAction($event, row.item)"
-            >
-              <template #icon>
-                <icon-export v-if="action.value === 'export'" />
-                <icon-trashcan v-if="action.value === 'delete'" />
-              </template>
-            </table-row-action>
+            </b-row>
+            <b-row v-else>
+              <img
+                class="sourse__img"
+                src="@/assets/images/_sila/event-logs/not-resolved.svg"
+              />
+              <span class="semi-bold-12px__caps not-resolved">
+                {{ $t('pageEventLogs.unresolved') }}</span
+              >
+            </b-row>
           </template>
         </b-table>
       </b-col>
     </b-row>
-
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
+    <b-row class="logs-pagination-container">
+      <b-col sm="6" class="d-flex align-items-center justify-content-start">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
-          label-for="pagination-items-per-page"
+          label-class="semi-bold-16px mb-0"
+          label-for="pagination"
         >
           <b-form-select
-            id="pagination-items-per-page"
+            id="pagination"
             v-model="perPage"
+            class="select-per-page semi-bold-16px mb-0"
             :options="itemsPerPageOptions"
           />
         </b-form-group>
       </b-col>
-      <b-col sm="6">
+      <b-col sm="6" class="d-flex align-items-center justify-content-end">
+        <span class="semi-bold-16px"> Страницы </span>
         <b-pagination
           v-model="currentPage"
           first-number
@@ -241,21 +271,17 @@
 
 <script>
 import IconDelete from '@carbon/icons-vue/es/trash-can/20';
-import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import IconExport from '@carbon/icons-vue/es/document--export/20';
-import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import IconDownload from '@carbon/icons-vue/es/download/20';
 import { omit } from 'lodash';
 
 import PageTitle from '@/components/_sila/Global/PageTitle';
-import StatusIcon from '@/components/_sila/Global/StatusIcon';
 import Search from '@/components/_sila/Global/Search';
 import TableCellCount from '@/components/_sila/Global/TableCellCount';
 import TableDateFilter from '@/components/_sila/Global/TableDateFilter';
 import TableFilter from '@/components/_sila/Global/TableFilter';
-import TableRowAction from '@/components/_sila/Global/TableRowAction';
 import TableToolbar from '@/components/_sila/Global/TableToolbar';
 import TableToolbarExport from '@/components/_sila/Global/TableToolbarExport';
+import PopoverWithSlot from '@/components/_sila/Global/SilaComponents/PopoverWithSlot';
 
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
@@ -282,19 +308,15 @@ import SearchFilterMixin, {
 export default {
   components: {
     IconDelete,
-    IconExport,
-    IconTrashcan,
-    IconChevron,
     IconDownload,
     PageTitle,
     Search,
-    StatusIcon,
     TableCellCount,
     TableFilter,
-    TableRowAction,
     TableToolbar,
     TableToolbarExport,
     TableDateFilter,
+    PopoverWithSlot,
   },
   mixins: [
     BVPaginationMixin,
@@ -316,47 +338,52 @@ export default {
   data() {
     return {
       isBusy: true,
+      sortDesc: true,
       fields: [
-        {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
         {
           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'),
-          sortable: true,
-          tdClass: 'text-nowrap',
+          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,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'description',
-          label: this.$t('pageEventLogs.table.description'),
-          tdClass: 'text-break',
+          thClass: `bold-12px__caps logs-table__th`,
+          tdClass: 'logs-table__td',
         },
         {
           key: 'status',
+          sortable: true,
           label: this.$t('pageEventLogs.table.status'),
-        },
-        {
-          key: 'actions',
-          sortable: false,
-          label: '',
-          tdClass: 'text-right text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
       ],
       tableFilters: [
@@ -431,7 +458,7 @@ export default {
       return this.getFilteredTableData(
         this.filteredLogsByDate,
         this.activeFilters
-      );
+      ).filter((el) => el.description);
     },
   },
   created() {
@@ -454,21 +481,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
@@ -602,3 +618,20 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.semi-bold-14px {
+  margin: auto 0;
+}
+.row {
+  margin: 0px;
+}
+
+.not-resolved {
+  color: $text-quaternary;
+}
+
+.form-group,
+.b-pagination {
+  margin: 0px !important;
+}
+</style>
-- 
cgit v1.2.3