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/Logs/EventLogs/EventLogs.vue | 465 +++++++++++++++++----------------
 1 file changed, 236 insertions(+), 229 deletions(-)

(limited to 'src/views/Logs')

diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 5b8ca110..10aa9469 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -1,241 +1,248 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-2">
     <page-title />
-    <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">
-        <table-date-filter @change="onChangeDateTimeFilter" />
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="text-right">
-        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
-        <b-button
-          variant="link"
-          :disabled="allLogs.length === 0"
-          @click="deleteAllLogs"
-        >
-          <icon-delete /> {{ $t('global.action.deleteAll') }}
-        </b-button>
-        <b-button
-          variant="primary"
-          :class="{ disabled: allLogs.length === 0 }"
-          :download="exportFileNameByDate()"
-          :href="href"
-        >
-          <icon-export /> {{ $t('global.action.exportAll') }}
-        </b-button>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col>
-        <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">
-              {{ $t('pageEventLogs.resolve') }}
-            </b-button>
-            <b-button variant="primary" @click="unresolveLogs">
-              {{ $t('pageEventLogs.unresolve') }}
-            </b-button>
-            <table-toolbar-export
-              :data="batchExportData"
-              :file-name="exportFileNameByDate()"
-            />
-          </template>
-        </table-toolbar>
-        <b-table
-          id="table-event-logs"
-          ref="table"
-          responsive="md"
-          selectable
-          no-select-on-click
-          sort-icon-left
-          hover
-          no-sort-reset
-          sort-desc
-          show-empty
-          sort-by="id"
-          :fields="fields"
-          :items="filteredLogs"
-          :sort-compare="onSortCompare"
-          :empty-text="$t('global.table.emptyMessage')"
-          :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :per-page="perPage"
-          :current-page="currentPage"
-          :filter="searchFilter"
-          :busy="isBusy"
-          @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>
+    <div class="main-container">
+      <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">
+          <table-date-filter @change="onChangeDateTimeFilter" />
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col class="text-right">
+          <table-filter
+            :filters="tableFilters"
+            @filter-change="onFilterChange"
+          />
+          <b-button
+            variant="link"
+            :disabled="allLogs.length === 0"
+            @click="deleteAllLogs"
+          >
+            <icon-delete /> {{ $t('global.action.deleteAll') }}
+          </b-button>
+          <b-button
+            variant="primary"
+            :class="{ disabled: allLogs.length === 0 }"
+            :download="exportFileNameByDate()"
+            :href="href"
+          >
+            <icon-export /> {{ $t('global.action.exportAll') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <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">
+                {{ $t('pageEventLogs.resolve') }}
+              </b-button>
+              <b-button variant="primary" @click="unresolveLogs">
+                {{ $t('pageEventLogs.unresolve') }}
+              </b-button>
+              <table-toolbar-export
+                :data="batchExportData"
+                :file-name="exportFileNameByDate()"
+              />
+            </template>
+          </table-toolbar>
+          <b-table
+            id="table-event-logs"
+            ref="table"
+            responsive="md"
+            selectable
+            no-select-on-click
+            sort-icon-left
+            hover
+            no-sort-reset
+            sort-desc
+            show-empty
+            sort-by="id"
+            :fields="fields"
+            :items="filteredLogs"
+            :sort-compare="onSortCompare"
+            :empty-text="$t('global.table.emptyMessage')"
+            :empty-filtered-text="$t('global.table.emptySearchMessage')"
+            :per-page="perPage"
+            :current-page="currentPage"
+            :filter="searchFilter"
+            :busy="isBusy"
+            @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>
 
-          <!-- Expand chevron icon -->
-          <template #cell(expandRow)="row">
-            <b-button
-              variant="link"
-              :aria-label="expandRowLabel"
-              :title="expandRowLabel"
-              class="btn-icon-only"
-              @click="toggleRowDetails(row)"
-            >
-              <icon-chevron />
-            </b-button>
-          </template>
+            <!-- Expand chevron icon -->
+            <template #cell(expandRow)="row">
+              <b-button
+                variant="link"
+                :aria-label="expandRowLabel"
+                :title="expandRowLabel"
+                class="btn-icon-only"
+                @click="toggleRowDetails(row)"
+              >
+                <icon-chevron />
+              </b-button>
+            </template>
 
-          <template #row-details="{ item }">
-            <b-container fluid>
-              <b-row>
-                <b-col>
-                  <dl>
-                    <!-- Name -->
-                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
-                    <dd>{{ dataFormatter(item.name) }}</dd>
-                  </dl>
-                  <dl>
-                    <!-- Type -->
-                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
-                    <dd>{{ dataFormatter(item.type) }}</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 }}
-                    </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>
+            <template #row-details="{ item }">
+              <b-container fluid>
+                <b-row>
+                  <b-col>
+                    <dl>
+                      <!-- Name -->
+                      <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
+                      <dd>{{ dataFormatter(item.name) }}</dd>
+                    </dl>
+                    <dl>
+                      <!-- Type -->
+                      <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
+                      <dd>{{ dataFormatter(item.type) }}</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 }}
+                      </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 }}
-          </template>
-          <!-- Date column -->
-          <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
-          </template>
+            <!-- Severity column -->
+            <template #cell(severity)="{ value }">
+              <status-icon v-if="value" :status="statusIcon(value)" />
+              {{ value }}
+            </template>
+            <!-- Date column -->
+            <template #cell(date)="{ value }">
+              <p class="mb-0">{{ value | formatDate }}</p>
+              <p class="mb-0">{{ value | formatTime }}</p>
+            </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">
-                {{ $t('pageEventLogs.resolved') }}
-              </span>
-              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(filterByStatus)="{ value }">
-            {{ value }}
-          </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">
+                  {{ $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>
-          </template>
-        </b-table>
-      </b-col>
-    </b-row>
+            <!-- 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>
+            </template>
+          </b-table>
+        </b-col>
+      </b-row>
 
-    <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
-        <b-form-group
-          class="table-pagination-select"
-          :label="$t('global.table.itemsPerPage')"
-          label-for="pagination-items-per-page"
-        >
-          <b-form-select
-            id="pagination-items-per-page"
-            v-model="perPage"
-            :options="itemsPerPageOptions"
+      <!-- Table pagination -->
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            class="table-pagination-select"
+            :label="$t('global.table.itemsPerPage')"
+            label-for="pagination-items-per-page"
+          >
+            <b-form-select
+              id="pagination-items-per-page"
+              v-model="perPage"
+              :options="itemsPerPageOptions"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col sm="6">
+          <b-pagination
+            v-model="currentPage"
+            first-number
+            last-number
+            :per-page="perPage"
+            :total-rows="getTotalRowCount(filteredRows)"
+            aria-controls="table-event-logs"
           />
-        </b-form-group>
-      </b-col>
-      <b-col sm="6">
-        <b-pagination
-          v-model="currentPage"
-          first-number
-          last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-event-logs"
-        />
-      </b-col>
-    </b-row>
+        </b-col>
+      </b-row>
+    </div>
   </b-container>
 </template>
 
-- 
cgit v1.2.3