diff options
Diffstat (limited to 'src/views')
28 files changed, 682 insertions, 1751 deletions
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue index 0e97f711..bfb930ab 100644 --- a/src/views/HardwareStatus/Inventory/Inventory.vue +++ b/src/views/HardwareStatus/Inventory/Inventory.vue @@ -1,5 +1,5 @@ <template> - <b-container fluid class="p-0 m-0"> + <b-container id="page-inventory" fluid class="p-0 m-0"> <page-title /> <!-- Service indicators --> <service-indicator /> diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue index f7fef0e3..47edf3a5 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue @@ -10,6 +10,7 @@ responsive="md" :items="items" :fields="fields" + show-empty :empty-text="$t('global.table.emptyMessage')" :busy="isBusy" > @@ -89,30 +90,44 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'name', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'partNumber', label: this.$t('pageInventory.table.partNumber'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'locationNumber', label: this.$t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'identifyLed', label: this.$t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], expandRowLabel: expandRowLabel, diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue index 41a88c2e..21a07e5f 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue @@ -18,6 +18,7 @@ variant="link" data-test-id="hardwareStatus-button-expandBmc" :title="expandRowLabel" + class="btn-icon-only" @click="toggleRowDetails(row)" > <icon-chevron /> @@ -183,27 +184,43 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', + thStyle: { maxWidth: '27px' }, + tdStyle: { maxWidth: '27px' }, + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'id', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'health', label: this.$t('pageInventory.table.health'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'locationNumber', label: this.$t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'identifyLed', label: this.$t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], expandRowLabel: expandRowLabel, @@ -246,37 +263,37 @@ export default { }; </script> <style lang="scss" scoped> -.row { - margin: 0px; - flex-wrap: nowrap; -} -.fans-table-col-first__cell { - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: flex-start; -} +// .row { +// margin: 0px; +// flex-wrap: nowrap; +// } +// .fans-table-col-first__cell { +// display: flex; +// flex-flow: row nowrap; +// align-items: center; +// justify-content: flex-start; +// } -.status__img { - margin-right: 7px; -} +// .status__img { +// margin-right: 7px; +// } -.bold-12px__caps { - color: $text-secondary; -} +// .bold-12px__caps { +// color: $text-secondary; +// } -.attrib-names { - border-bottom: 1px solid $faint-secondary-primary-10; - color: $text-secondary !important; - font-weight: 600; -} +// .attrib-names { +// border-bottom: 1px solid $faint-secondary-primary-10; +// color: $text-secondary !important; +// font-weight: 600; +// } -.custom-switch { - margin: 0; -} +// .custom-switch { +// margin: 0; +// } -.btn-link { - width: 30px !important; - height: 20px !important; -} +// .btn-link { +// width: 30px !important; +// height: 20px !important; +// } </style> diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue index 60f593f4..c213aa97 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue @@ -137,28 +137,41 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'id', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'health', label: this.$t('pageInventory.table.health'), formatter: this.dataFormatter, - tdClass: 'text-nowrap', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td', }, { key: 'locationNumber', label: this.$t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'identifyLed', label: this.$t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], expandRowLabel: expandRowLabel, diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue index 020ab1f6..430e86af 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue @@ -190,28 +190,41 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'id', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'health', label: this.$t('pageInventory.table.health'), formatter: this.dataFormatter, - tdClass: 'text-nowrap', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td', }, { key: 'locationNumber', label: this.$t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'identifyLed', label: this.$t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], searchFilter: searchFilter, diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue index 8706f498..e1932d53 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue @@ -129,32 +129,45 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', sortable: false, + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'id', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'health', label: this.$t('pageInventory.table.health'), formatter: this.dataFormatter, sortable: true, - tdClass: 'text-nowrap', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td', }, { key: 'partNumber', label: this.$t('pageInventory.table.partNumber'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'serialNumber', label: this.$t('pageInventory.table.serialNumber'), formatter: this.dataFormatter, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], searchFilter: searchFilter, diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue index 9417d9d6..7bb14a52 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue @@ -148,32 +148,45 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', sortable: false, + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'id', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'health', label: this.$t('pageInventory.table.health'), formatter: this.dataFormatter, sortable: true, - tdClass: 'text-nowrap', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td', }, { key: 'locationNumber', label: this.$t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'identifyLed', label: this.$t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], searchFilter: searchFilter, diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue index 3e25747d..d81a0490 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue @@ -183,33 +183,46 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', sortable: false, + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'id', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'health', label: this.$t('pageInventory.table.health'), formatter: this.dataFormatter, sortable: true, - tdClass: 'text-nowrap', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td', }, { key: 'locationNumber', label: this.$t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, sortable: true, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'identifyLed', label: this.$t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, sortable: false, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], processors: [ diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue index 1576c8d8..9ddcaa69 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue @@ -29,7 +29,7 @@ <!-- Health --> <template #cell(health)="{ value }"> <status-icon :status="statusIcon(value)" /> - {{ value }} + {{ statusIcon(value) }} </template> <template #cell(locationIndicatorActive)="{ item }"> @@ -171,34 +171,50 @@ export default { { key: 'expandRow', label: '', - tdClass: 'table-row-expand', + thStyle: { minWidth: '29px' }, + thClass: 'bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'table-row-expand bootstrap-rounded-table__td', }, { key: 'id', label: this.$t('pageInventory.table.id'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'hardwareType', label: this.$t('pageInventory.table.hardwareType'), formatter: this.dataFormatter, - tdClass: 'text-nowrap', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td', }, { key: 'health', label: this.$t('pageInventory.table.health'), formatter: this.dataFormatter, - tdClass: 'text-nowrap', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'locationNumber', label: this.$t('pageInventory.table.locationNumber'), formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'locationIndicatorActive', label: this.$t('pageInventory.table.identifyLed'), formatter: this.dataFormatter, + thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: ' bootstrap-rounded-table__td', }, ], expandRowLabel: expandRowLabel, diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue index eb1c703a..441d8cfa 100644 --- a/src/views/Logs/EventLogs/EventLogs.vue +++ b/src/views/Logs/EventLogs/EventLogs.vue @@ -1,63 +1,95 @@ <template> - <b-container fluid="xxl pt-0 m-2"> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + class="logs-section" + > <page-title /> + <div class="logs-head-container"> + <div class="semi-bold-12px"> + <table-cell-count + :filtered-items-count="filteredRows" + :total-number-of-cells="allLogs.length" + ></table-cell-count> + </div> + <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/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 +98,7 @@ id="table-event-logs" ref="table" responsive="md" + class="logs-table" selectable no-select-on-click sort-icon-left @@ -73,7 +106,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 +141,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/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/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/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 +273,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/Global/PageTitle'; -import StatusIcon from '@/components/Global/StatusIcon'; import Search from '@/components/Global/Search'; import TableCellCount from '@/components/Global/TableCellCount'; import TableDateFilter from '@/components/Global/TableDateFilter'; import TableFilter from '@/components/Global/TableFilter'; -import TableRowAction from '@/components/Global/TableRowAction'; import TableToolbar from '@/components/Global/TableToolbar'; import TableToolbarExport from '@/components/Global/TableToolbarExport'; +import PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; @@ -278,23 +306,20 @@ import TableRowExpandMixin, { import SearchFilterMixin, { searchFilter, } from '@/components/Mixins/SearchFilterMixin'; +// import { headerHeight } from '@/assets/styles/bmc/helpers/_variables'; export default { components: { IconDelete, - IconExport, - IconTrashcan, - IconChevron, IconDownload, PageTitle, Search, - StatusIcon, TableCellCount, TableFilter, - TableRowAction, TableToolbar, TableToolbarExport, TableDateFilter, + PopoverWithSlot, }, mixins: [ BVPaginationMixin, @@ -316,47 +341,54 @@ export default { data() { return { isBusy: true, + sortDesc: true, + // headerHeight, + // stickyHeader: 'calc(100vh - 200px - #{$header-height})', 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 +463,7 @@ export default { return this.getFilteredTableData( this.filteredLogsByDate, this.activeFilters - ); + ).filter((el) => el.description); }, }, created() { @@ -454,21 +486,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 +623,21 @@ export default { }, }; </script> +<style lang="scss" scoped> +.row { + margin: 0px; +} + +.not-resolved { + color: $text-quaternary; +} + +.table-pagination-select { + line-height: 1.8rem; +} + +.form-group, +.b-pagination { + margin: 0px !important; +} +</style> diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue index d116d2ed..b13cef46 100644 --- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue +++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue @@ -1,26 +1,29 @@ <template> - <b-container fluid="xl"> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + class="logs-section" + > <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('pagePostCodeLogs.table.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"> + <div class="logs-head-container"> + <div class="semi-bold-12px"> + <table-cell-count + :filtered-items-count="filteredRows" + :total-number-of-cells="allLogs.length" + ></table-cell-count> + </div> + <search + :placeholder="$t('pagePostCodeLogs.table.searchLogs')" + style="margin: 13px; width: 35%" + @change-search="onChangeSearchInput" + @clear-search="onClearSearchInput" + /> + </div> + <b-row class="align-items-start m-0 p-0"> + <b-col sm="7" md="6" xl="5"> <table-date-filter @change="onChangeDateTimeFilter" /> </b-col> - </b-row> - <b-row> - <b-col xl="12" class="text-right"> + <b-col class="d-flex justify-content-end mt-3"> <b-button variant="primary" :disabled="allLogs.length === 0" @@ -31,8 +34,8 @@ </b-button> </b-col> </b-row> - <b-row> - <b-col> + <b-row class="m-0 p-0"> + <b-col class="p-0"> <table-toolbar ref="toolbar" :selected-items-count="selectedRows.length" @@ -40,107 +43,116 @@ > <template #toolbar-buttons> <table-toolbar-export + style="margin-right: 1rem" :data="batchExportData" :file-name="exportFileNameByDate()" /> </template> </table-toolbar> - <b-table - id="table-post-code-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" - :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="postCode-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="`postCode-checkbox-selectRow-${row.index}`" - @change="toggleSelectRow($refs.table, row.index)" - > - <span class="sr-only">{{ $t('global.table.selectItem') }}</span> - </b-form-checkbox> - </template> - <!-- Date column --> - <template #cell(date)="{ value }"> - <p class="mb-0">{{ value | formatDate }}</p> - <p class="mb-0">{{ value | formatTime }}</p> - </template> + <div id="logs-table-wrapper"> + <b-table + id="logs-table" + ref="table" + responsive="md" + class="logs-table" + selectable + no-select-on-click + sort-icon-left + hover + no-sort-reset + sort-desc + show-empty + sort-by="id" + :no-border-collapse="true" + :sticky-header="true" + :fields="fields" + :items="filteredLogs" + :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="postCode-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="`postCode-checkbox-selectRow-${row.index}`" + @change="toggleSelectRow($refs.table, row.index)" + > + <span class="sr-only">{{ $t('global.table.selectItem') }}</span> + </b-form-checkbox> + </template> + <!-- Date column --> + <template #cell(date)="{ value }"> + <p class="mb-0">{{ value | formatDate }}</p> + <p class="mb-0">{{ value | formatTime }}</p> + </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" - :btn-icon-only="true" - :export-name="exportFileNameByDate(action.value)" - :download-location="row.item.uri" - :download-in-new-tab="true" - :show-button="false" - > - <template #icon> - <icon-export v-if="action.value === 'export'" /> - <icon-download v-if="action.value === 'download'" /> - </template> - </table-row-action> - </template> - </b-table> + <!-- 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" + :btn-icon-only="true" + :export-name="exportFileNameByDate(action.value)" + :download-location="row.item.uri" + :download-in-new-tab="true" + :show-button="false" + > + <template #icon> + <icon-export v-if="action.value === 'export'" /> + <icon-download v-if="action.value === 'download'" /> + </template> + </table-row-action> + </template> + </b-table> + </div> </b-col> </b-row> <!-- Table pagination --> - <b-row> - <b-col sm="6"> + <b-row class="logs-pagination-container m-0"> + <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-class="semi-bold-16px mb-0" label-for="pagination-items-per-page" > <b-form-select id="pagination-items-per-page" 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 last-number :per-page="perPage" :total-rows="getTotalRowCount(filteredRows)" - aria-controls="table-post-code-logs" + aria-controls="table-event-logs" /> </b-col> </b-row> @@ -210,32 +222,44 @@ export default { data() { return { isBusy: true, + // stickyHeader: 'calc(100vh - 307px)', fields: [ { key: 'checkbox', sortable: false, + thClass: ' logs-table__th', + tdClass: 'logs-table__td', }, { key: 'date', label: this.$t('pagePostCodeLogs.table.created'), sortable: true, + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'semi-bold-12px logs-table__td', }, { key: 'timeStampOffset', label: this.$t('pagePostCodeLogs.table.timeStampOffset'), + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', }, { key: 'bootCount', label: this.$t('pagePostCodeLogs.table.bootCount'), + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', }, { key: 'postCode', label: this.$t('pagePostCodeLogs.table.postCode'), + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td semi-bold-12px__caps', }, { key: 'actions', label: '', - tdClass: 'text-right text-nowrap', + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'text-right logs-table__td', }, ], expandRowLabel, @@ -345,3 +369,21 @@ export default { }, }; </script> +<style lang="scss" scoped> +.table-pagination-select { + line-height: 1.8rem; +} + +.form-group, +.b-pagination { + margin: 0px !important; +} +.items-per-page { + padding: 0 0 0 5px; + width: 55px; + height: 24px; + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; +} +</style> diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue index ac4b23fc..a5e5ba97 100644 --- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue +++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue @@ -59,6 +59,7 @@ <b-btn data-test-id="firmware-button-startUpdate" type="submit" + size="md" variant="primary" :disabled="isPageDisabled" > diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue deleted file mode 100644 index ce4e6ebf..00000000 --- a/src/views/Operations/Kvm/ImagesModal.vue +++ /dev/null @@ -1,296 +0,0 @@ -<template> - <b-modal id="modal-images" class="modal-images" hide-footer> - <template #modal-title> - <div class="popup-title"> - <span class="semi-bold-20px">{{ $t('pageKvm.addImage_modal') }}</span> - </div> - </template> - <div class="popup-switch"> - <span - class="medium-16px popup-item" - :class="{ 'switch-active': isImportFromPC }" - @click="switchExport" - >{{ $t('pageKvm.fromPC') }}</span - > - <span - class="medium-16px popup-item" - :class="{ 'switch-active': !isImportFromPC }" - @click="switchImport" - >{{ $t('pageKvm.fromServer') }}</span - > - <div class="slider" /> - </div> - <div v-if="isImportFromPC" class="images-import_container"> - <b-form-file - id="images-import__file-input" - placeholder="Нажмите на область или перетащите в нее файл образа" - ></b-form-file> - </div> - <div v-else class="popup-body"> - <div class="connection-type-container"> - <span class="regular-12px tretiatry select-label" for="username">{{ - $t('pageKvm.urlAdress') - }}</span> - <b-form-select - v-model="connectionType" - :options="connectionTypes" - class="select-connection regular-14px" - /> - <label class="regular-12px tretiatry" for="username">{{ - $t('pageKvm.connectionType') - }}</label> - <b-form-input id="url" type="text" class="form-control url-input"> - </b-form-input> - <b-form-group> - <label class="regular-12px tretiatry" for="username">{{ - $t('pageLogin.username') - }}</label> - <b-form-input - id="username" - v-model="userInfo.username" - aria-describedby="login-error-alert username-required" - :state="getValidationState($v.userInfo.username)" - type="text" - data-test-id="login-input-username" - class="form-control image-username-input" - @input="$v.userInfo.username.$touch()" - > - </b-form-input> - <b-form-invalid-feedback id="username-required" role="alert"> - <template v-if="!$v.userInfo.username.required"> - {{ $t('global.form.fieldRequired') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - - <b-form-group> - <input-password-toggle> - <label class="regular-12px tretiatry" for="password">{{ - $t('pageLogin.password') - }}</label> - <b-form-input - id="password" - v-model="userInfo.password" - aria-describedby="login-error-alert password-required" - :state="getValidationState($v.userInfo.password)" - type="password" - data-test-id="login-input-password" - class="form-control image-password-input" - @input="$v.userInfo.password.$touch()" - > - </b-form-input> - <b-form-invalid-feedback id="password-required" role="alert"> - <template v-if="!$v.userInfo.password.required"> - {{ $t('global.form.fieldRequired') }} - </template> - </b-form-invalid-feedback> - </input-password-toggle> - </b-form-group> - <b-button class="upload-button" variant="primary"> - {{ $t('pageKvm.upload') }} - </b-button> - </div> - </div> - </b-modal> -</template> -<script> -import { required } from 'vuelidate/lib/validators'; -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; - -export default { - components: { InputPasswordToggle }, - mixins: [VuelidateMixin], - data() { - return { - isImportFromPC: true, - userInfo: { - username: null, - password: null, - }, - connectionType: 1, - connectionTypes: [ - { - value: 1, - text: 'HTTPS', - }, - ], - }; - }, - validations: { - userInfo: { - username: { - required, - }, - password: { - required, - }, - }, - }, - methods: { - switchExport() { - this.isImportFromPC = true; - }, - switchImport() { - this.isImportFromPC = false; - }, - }, -}; -</script> -<style lang="scss"> -.modal-dialog { - margin: 25vh auto; -} -.modal-content { - border-radius: 16px; - width: 480px; -} -.modal-header { - border-bottom: none; -} - -.images-import_container > .custom-file { - width: 432px; - height: 357px; -} - -#images-import__file-input ~ .custom-file-label { - background-color: transparent; - border: 1px dashed rgba(12, 28, 41, 0.6); - box-sizing: border-box; - border-radius: 8px; - width: 432px; - height: 357px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - white-space: normal; - padding: 0 65px; -} - -#images-import__file-input ~ .custom-file-label::after { - display: none; -} -</style> -<style lang="scss" scoped> -.popup-switch { - position: relative; - display: flex; - flex-flow: row nowrap; - border-bottom: 1px solid #f3f4f5; - width: 100%; - height: 36px; -} - -.switch-active { - color: $red-brand-primary; - transition: ease-in 0.15s; -} - -.medium-16px { - margin-left: 20px; -} - -.slider { - position: absolute; - height: 0px; - border-bottom: 4px solid $red-brand-primary; - transition: ease-in 0.2s; - bottom: 0px; -} - -.popup-item:nth-child(1).switch-active ~ .slider { - width: 110px; - left: 21px; -} - -.popup-item:nth-child(2).switch-active ~ .slider { - left: 157px; - width: 82px; -} - -.popup-body { - margin: 24px 0 0 0; -} - -.images-import_container { - width: 478px; - height: 405px; - background-color: $surface-secondary; - margin: 0px 0px -16px -16px; - border-radius: 0 0 16px 16px; - - display: flex; - align-items: center; - justify-content: center; -} - -.image-username-input, -.image-password-input { - height: 56px; - margin: -30px 0 5px 0; - padding-top: 30px; - font-family: 'Inter', sans-serif; - font-size: 14px; - font-weight: 500; - line-height: 20px; - letter-spacing: 0em; -} - -.url-input { - height: 56px; - padding-top: 30px; - font-family: 'Inter', sans-serif; - font-size: 14px; - font-weight: 500; - line-height: 20px; - letter-spacing: 0em; - margin: -30px 0 20px 0; -} - -.connection-type-container { - width: 446px; -} - -.caption-12px { - padding-left: 10px; -} - -.text-input { - margin: 0 0 0 50px; - padding: 0 0 0 5px; -} - -.login-button { - height: 36px; - width: 380px; -} - -.select-connection { - height: 56px; - padding-top: 30px; - border: none; - border-radius: 8px; - margin: -0px 0 18px 0; - background-color: $surface-secondary; - background-image: url('../../../assets/images/icon-chevron.svg'); -} -.select-label { - position: absolute; - top: 84px; -} - -.form-background .custom-select, -.form-background .form-control { - border-radius: 8px; - border: none; - background-color: rgba(26, 62, 91, 0.05); -} - -.upload-button { - width: 100%; - height: 52px; - margin: 0 auto 10px; -} -</style> diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue index 324d50d0..a3103453 100644 --- a/src/views/Operations/Kvm/Kvm.vue +++ b/src/views/Operations/Kvm/Kvm.vue @@ -1,114 +1,24 @@ <template> - <b-container fluid="xxl pt-0 m-0"> - <b-button - class="btn-primary semi-bold-16px images_add-image-button" - @click="$bvModal.show('modal-images')" - > - {{ $t('pageKvm.addImage') }}</b-button - > + <b-container fluid> <page-title /> - <div class="images"> - <div class="images_desc"> - <span class="regular-12px tretiatry">Подключенные образы:</span> - </div> - <div class="images-container"> - <div class="images-container_image"> - <img src="@/assets/images/console-images.svg" class="images-image" /> - <span class="semi-bold-12px">Win-11-2022</span> - <span class="light-12px">с носителя</span> - </div> - <div class="images-container_image"> - <img src="@/assets/images/console-images.svg" class="images-image" /> - <span class="semi-bold-12px">Win-10-2017</span> - <span class="light-12px">с сервера</span> - </div> - <div class="images-container_image"> - <img src="@/assets/images/console-images.svg" class="images-image" /> - <span class="semi-bold-12px">Win-7-2010</span> - <span class="light-12px">с сервера</span> - </div> - </div> + <div class="terminal-container"> + <kvm-console :is-full-window="false" /> </div> - <kvm-console :is-full-window="false" /> - <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; -import ImagesModal from './ImagesModal'; import KvmConsole from './KvmConsole'; export default { name: 'Kvm', - components: { - PageTitle, - ImagesModal, - KvmConsole, - }, + components: { PageTitle, KvmConsole }, }; </script> -<style lang="scss" scoped> -.images_add-image-button { - position: absolute; - top: calc(#{$header-height}); - right: 0px; - border: none; - box-shadow: none; - background-color: $faint-secondary-primary-5; - color: $red-brand-primary; - border-radius: 8px; - margin: 12px 32px; - width: 236px; - height: 40px; - z-index: 1001; - &:active { - background-color: $faint-secondary-primary-5-hover !important; - color: $red-brand-primary-active !important; - border: none; - } - &:focus { - box-shadow: none !important; - } - &:focus-visible { - box-shadow: none !important; - } -} - -.images { - display: flex; - flex-flow: row wrap; - height: 144px; -} -.images_desc { - margin: 16px 0 16px 32px; +<style scoped> +.terminal-container { width: 100%; } - -.images-container { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: center; - margin: 0 0 16px 32px; -} - -.images-container_image { - display: flex; - flex-flow: column nowrap; - justify-content: flex-start; - align-items: center; - margin-right: 24px; -} - -.images-image { - width: 40px; - height: 40px; - margin-bottom: 8px; -} - -.semi-bold-12px { - color: $text-primary; -} </style> diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue index 900619cd..34b22151 100644 --- a/src/views/Operations/RebootBmc/RebootBmc.vue +++ b/src/views/Operations/RebootBmc/RebootBmc.vue @@ -19,14 +19,22 @@ </b-col> </b-row> {{ $t('pageRebootBmc.rebootInformation') }} - <b-button - variant="primary" - class="d-block mt-5" - data-test-id="rebootBmc-button-reboot" - @click="onClick" + <popover-with-slot + id="popover-reboot" + :button-label="$t('global.action.reload')" + :popup-label="$t('BMC.ReloadBmc_popup')" + placement="left" + :action="rebootBmc" > - {{ $t('pageRebootBmc.rebootBmc') }} - </b-button> + <b-button + id="popover-reboot" + variant="primary" + class="d-block mt-5" + data-test-id="rebootBmc-button-reboot" + > + {{ $t('pageRebootBmc.rebootBmc') }} + </b-button> + </popover-with-slot> </page-section> </b-col> </b-row> @@ -38,10 +46,11 @@ import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot'; export default { name: 'RebootBmc', - components: { PageTitle, PageSection }, + components: { PageTitle, PageSection, PopoverWithSlot }, mixins: [BVToastMixin, LoadingBarMixin], beforeRouteLeave(to, from, next) { this.hideLoader(); @@ -59,17 +68,6 @@ export default { .finally(() => this.endLoader()); }, methods: { - onClick() { - this.$bvModal - .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), { - title: this.$t('pageRebootBmc.modal.confirmTitle'), - okTitle: this.$t('global.action.confirm'), - cancelTitle: this.$t('global.action.cancel'), - }) - .then((confirmed) => { - if (confirmed) this.rebootBmc(); - }); - }, rebootBmc() { this.$store .dispatch('controls/rebootBmc') diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue index 33533bf9..48a68345 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLan.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue @@ -1,47 +1,10 @@ <template> - <b-container fluid="xxl pt-0 m-0"> - <page-title /> - <b-button - class="btn-primary semi-bold-16px images_add-image-button" - @click="$bvModal.show('modal-images')" - > - {{ $t('pageKvm.addImage') }}</b-button - > + <b-container fluid="xl"> + <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" /> + <page-section class="mb-0"> - <div class="images"> - <div class="images_desc"> - <span class="regular-12px tretiatry">Подключенные образы:</span> - </div> - <div class="images-container"> - <div class="images-container_image"> - <img - src="@/assets/images/console-images.svg" - class="images-image" - /> - <span class="semi-bold-12px">Win-11-2022</span> - <span class="light-12px">с носителя</span> - </div> - <div class="images-container_image"> - <img - src="@/assets/images/console-images.svg" - class="images-image" - /> - <span class="semi-bold-12px">Win-10-2017</span> - <span class="light-12px">с сервера</span> - </div> - <div class="images-container_image"> - <img - src="@/assets/images/console-images.svg" - class="images-image" - /> - <span class="semi-bold-12px">Win-7-2010</span> - <span class="light-12px">с сервера</span> - </div> - </div> - </div> <serial-over-lan-console :is-full-window="false" /> </page-section> - <images-modal /> </b-container> </template> @@ -49,78 +12,13 @@ import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import SerialOverLanConsole from './SerialOverLanConsole'; -import ImagesModal from '../Kvm/ImagesModal'; export default { name: 'SerialOverLan', components: { PageSection, PageTitle, - ImagesModal, SerialOverLanConsole, }, }; </script> -<style lang="scss" scoped> -.images_add-image-button { - position: absolute; - top: 95px; - right: 0px; - border: none; - box-shadow: none; - background-color: $faint-secondary-primary-5; - color: $red-brand-primary; - border-radius: 8px; - margin: 12px 32px; - width: 236px; - height: 40px; - z-index: 1001; - &:active { - background-color: $faint-secondary-primary-5-hover !important; - color: $red-brand-primary-active !important; - border: none; - } - &:focus { - box-shadow: none !important; - } - &:focus-visible { - box-shadow: none !important; - } -} -.images { - display: flex; - flex-flow: row wrap; - height: 144px; -} - -.images_desc { - margin: 16px 0 16px 32px; - width: 100%; -} - -.images-container { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: center; - margin: 0 0 16px 32px; -} - -.images-container_image { - display: flex; - flex-flow: column nowrap; - justify-content: flex-start; - align-items: center; - margin-right: 24px; -} - -.images-image { - width: 40px; - height: 40px; - margin-bottom: 8px; -} - -.semi-bold-12px { - color: $text-primary; -} -</style> diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue index ce8549df..3fa9ae47 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue @@ -9,7 +9,7 @@ class="mt-4" > <p class="col-form-label"> - {{ $t('pageSerialOverLan.alert.disconnectedAlertMessage') }} + {{ $t('pageSerialOverLan.disconnectedAlertMessage') }} </p> </alert> </b-col> @@ -85,37 +85,38 @@ export default { }, beforeDestroy() { window.removeEventListener('resize', this.resizeConsoleWindow); + this.closeTerminal(); }, methods: { openTerminal() { const token = this.$store.getters['authentication/token']; - const ws = new WebSocket(`wss://${window.location.host}/console0`, [ + this.ws = new WebSocket(`wss://${window.location.host}/console0`, [ token, ]); // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons. - const term = new Terminal({ + this.term = new Terminal({ fontSize: 15, fontFamily: 'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace', }); - const attachAddon = new AttachAddon(ws); - term.loadAddon(attachAddon); + const attachAddon = new AttachAddon(this.ws); + this.term.loadAddon(attachAddon); const fitAddon = new FitAddon(); - term.loadAddon(fitAddon); + this.term.loadAddon(fitAddon); const SOL_THEME = { background: '#19273c', cursor: 'rgba(83, 146, 255, .5)', scrollbar: 'rgba(83, 146, 255, .5)', }; - term.setOption('theme', SOL_THEME); + this.term.setOption('theme', SOL_THEME); - term.open(this.$refs.panel); + this.term.open(this.$refs.panel); fitAddon.fit(); this.resizeConsoleWindow = throttle(() => { @@ -124,10 +125,10 @@ export default { window.addEventListener('resize', this.resizeConsoleWindow); try { - ws.onopen = function () { + this.ws.onopen = function () { console.log('websocket console0/ opened'); }; - ws.onclose = function (event) { + this.ws.onclose = function (event) { console.log( 'websocket console0/ closed. code: ' + event.code + @@ -139,6 +140,13 @@ export default { console.log(error); } }, + closeTerminal() { + console.log('closeTerminal'); + this.term.dispose(); + this.term = null; + this.ws.close(); + this.ws = null; + }, openConsoleWindow() { window.open( '#/console/serial-over-lan-console', diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue index ab3c22b9..b5cbb4e0 100644 --- a/src/views/Operations/ServerPowerOperations/BootSettings.vue +++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue @@ -1,8 +1,5 @@ <template> - <div class="form-background p-3"> - <label class="semi-bold-16px">{{ - $t('pageServerPowerOperations.serverBootSettings') - }}</label> + <page-section class="m-0"> <b-form novalidate @submit.prevent="handleSubmit"> <b-form-group label-for="boot-option" class="mb-3 regular-12px"> <label class="semi-bold-12px">{{ @@ -49,16 +46,18 @@ {{ $t('global.action.save') }} </b-button> </b-form> - </div> + </page-section> </template> <script> import { mapState } from 'vuex'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import PageSection from '@/components/Global/PageSection'; export default { name: 'BootSettings', + components: { PageSection }, mixins: [BVToastMixin, LoadingBarMixin], data() { return { diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue index a394a77f..823caa95 100644 --- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue +++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue @@ -1,15 +1,15 @@ <template> <b-container fluid="xxl pt-0 m-0"> <page-title /> - <b-row class="m-2"> + <page-section + :section-title="$t('pageServerPowerOperations.serverStatus')" + class="m-4" + > <b-col md="8" xl="6"> - <page-section class="m-2 pt-2 pb-2"> + <page-section class="pt-2 mb-0"> <b-row> <b-col> <dl> - <dt class="semi-bold-16px"> - {{ $t('pageServerPowerOperations.serverStatus') }} - </dt> <dd v-if="serverStatus === 'on'" style="margin-top: 10px" @@ -60,13 +60,13 @@ </b-row> </page-section> </b-col> - </b-row> - <b-row class="m-2"> + </page-section> + <page-section + :section-title="$t('SystemDescription.title.Control')" + class="ml-4 mb-0" + > <b-col sm="8" md="6" xl="7"> - <page-section class="m-2"> - <b-row class="ml-0 mb-3"> - <span class="semi-bold-16px">{{ 'Управление' }}</span> - </b-row> + <page-section> <alert :show="oneTimeBootEnabled" variant="warning"> {{ $t('pageServerPowerOperations.oneTimeBootWarning') }} </alert> @@ -177,14 +177,15 @@ </template> </page-section> </b-col> - </b-row> - <b-row> - <b-col v-if="hasBootSourceOptions" class="m-2" sm="8" md="6" xl="4"> - <page-section class="m-2"> - <boot-settings /> - </page-section> + </page-section> + <page-section + :section-title="$t('pageServerPowerOperations.serverBootSettings')" + class="m-4" + > + <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4"> + <boot-settings /> </b-col> - </b-row> + </page-section> </b-container> </template> diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue index b0bcfb2b..1a41a334 100644 --- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue +++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue @@ -9,7 +9,7 @@ <template #modal-title> {{ $t('pageVirtualMedia.modal.title') }} </template> - <b-form> + <b-form style="width: 100%"> <b-form-group :label="$t('pageVirtualMedia.modal.serverUri')" label-for="serverUri" @@ -43,12 +43,14 @@ :label="$t('pageVirtualMedia.modal.password')" label-for="password" > - <b-form-input - id="password" - v-model="form.password" - type="password" - data-test-id="configureConnection-input-password" - /> + <input-password-toggle> + <b-form-input + id="password" + v-model="form.password" + type="password" + data-test-id="configureConnection-input-password" + /> + </input-password-toggle> </b-form-group> <b-form-group> <b-form-checkbox @@ -72,8 +74,12 @@ <script> import { required } from 'vuelidate/lib/validators'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; export default { + components: { + InputPasswordToggle, + }, mixins: [VuelidateMixin], props: { connection: { diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue index 8a3d5add..9f464138 100644 --- a/src/views/Operations/VirtualMedia/VirtualMedia.vue +++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue @@ -1,5 +1,5 @@ <template> - <b-container fluid="xl"> + <b-container fluid> <page-title /> <b-row class="mb-4"> <b-col md="12"> @@ -8,7 +8,7 @@ > <b-row> <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6"> - <b-form-group :label="dev.id" label-class="bold"> + <b-form-group :label="dev.id" label-class="regular-14px"> <form-file v-if="!dev.isActive" :id="concatId(dev.id)" @@ -23,6 +23,7 @@ </b-form-group> <b-button v-if="!dev.isActive" + size="md" variant="primary" :disabled="!dev.file" @click="startVM(dev)" @@ -42,48 +43,52 @@ </page-section> </b-col> </b-row> - <b-row v-if="loadImageFromExternalServer" class="mb-4"> + <b-row v-if="!loadImageFromExternalServer" class="mb-4"> <b-col md="12"> <page-section :section-title="$t('pageVirtualMedia.virtualMediaSubTitleSecond')" > <b-row> <b-col - v-for="(device, $index) in legacyDevices" + v-for="(device, $index) in [ + { id: 'device_1', isActive: false }, + { id: 'device_2', isActive: false }, + ]" :key="$index" md="6" > <b-form-group :label="device.id" :label-for="device.id" - label-class="bold" + label-class="regular-14px" > <b-button variant="primary" + size="lg" :disabled="device.isActive" @click="configureConnection(device)" > {{ $t('pageVirtualMedia.configureConnection') }} </b-button> - - <b-button - v-if="!device.isActive" - variant="primary" - class="float-right" - :disabled="!device.serverUri" - @click="startLegacy(device)" - > - {{ $t('pageVirtualMedia.start') }} - </b-button> - <b-button - v-if="device.isActive" - variant="primary" - class="float-right" - @click="stopLegacy(device)" - > - {{ $t('pageVirtualMedia.stop') }} - </b-button> </b-form-group> + + <b-button + v-if="!device.isActive" + variant="primary" + size="md" + :disabled="!device.serverUri" + @click="startLegacy(device)" + > + {{ $t('pageVirtualMedia.start') }} + </b-button> + <b-button + v-if="device.isActive" + size="md" + variant="primary" + @click="stopLegacy(device)" + > + {{ $t('pageVirtualMedia.stop') }} + </b-button> </b-col> </b-row> </page-section> @@ -107,7 +112,12 @@ import FormFile from '@/components/Global/FormFile'; export default { name: 'VirtualMedia', - components: { PageTitle, PageSection, ModalConfigureConnection, FormFile }, + components: { + PageTitle, + PageSection, + ModalConfigureConnection, + FormFile, + }, mixins: [BVToastMixin, LoadingBarMixin], data() { return { 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> diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js deleted file mode 100644 index 521efde4..00000000 --- a/src/views/SILA/EventLogs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import EventLogs from './EventLogs.vue'; -export default EventLogs; diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue index 7ab3ec0e..63570c39 100644 --- a/src/views/Settings/DateTime/DateTime.vue +++ b/src/views/Settings/DateTime/DateTime.vue @@ -1,67 +1,61 @@ <template> - <b-container fluid="xxl" class="pt-0 m-0"> + <b-container id="date-time" fluid="xxl" class="pt-0 m-0"> <page-title /> - <b-row class="m-4"> - <b-col md="8" xl="12"> - <alert variant="info"> - <span class="regular-12px"> + <b-row class="bootstrap-table__section"> + <b-col md="8" xl="6"> + <alert variant="info" class="mb-4"> + <span> {{ $t('pageDateTime.alert.message') }} - <b-link class="semi-bold-12px" to="/profile-settings"> + <b-link to="/profile-settings"> {{ $t('pageDateTime.alert.link') }}</b-link > </span> </alert> </b-col> </b-row> - <page-section class="m-4"> + <page-section class="bootstrap-table__section"> <b-row> - <b-col sm="6" lg="5" xl="4" xxl="3"> + <b-col lg="3"> <dl> - <dt class="semi-bold-12px">{{ $t('pageDateTime.form.date') }}</dt> - <dd v-if="bmcTime" class="regular-12px"> - {{ bmcTime | formatDate }} - </dd> + <dt>{{ $t('pageDateTime.form.date') }}</dt> + <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd> <dd v-else>--</dd> </dl> </b-col> - <b-col sm="6" lg="5" xl="4" xxl="3"> + <b-col lg="3"> <dl> - <dt class="semi-bold-12px"> - {{ $t('pageDateTime.form.time.label') }} - </dt> - <dd v-if="bmcTime" class="regular-12px"> - {{ bmcTime | formatTime }} - </dd> + <dt>{{ $t('pageDateTime.form.time.label') }}</dt> + <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd> <dd v-else>--</dd> </dl> </b-col> </b-row> </page-section> - <page-section class="m-4"> - <label class="semi-bold-16px">{{ - $t('pageDateTime.configureSettings') - }}</label> + <page-section + class="bootstrap-table__section" + :section-title="$t('pageDateTime.configureSettings')" + > <b-form novalidate @submit.prevent="submitForm"> <b-form-group label="Configure date and time" :disabled="loading" label-sr-only - class="system-control__radio regular-12px" > <b-form-radio v-model="form.configurationSelected" value="manual" data-test-id="dateTime-radio-configureManual" > - {{ $t('SystemDescription.UseServerDatettime') }} + {{ $t('pageDateTime.form.manual') }} </b-form-radio> <b-row class="mt-3 ml-3"> - <b-col sm="7" lg="5" xl="5" xxl="3"> + <b-col sm="6" lg="4" xl="3"> <b-form-group :label="$t('pageDateTime.form.date')" label-for="input-manual-date" + label-class="regular-14px" > - <span class="regular-12px">YYYY-MM-DD</span> + <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text> <b-input-group> <b-form-input id="input-manual-date" @@ -105,12 +99,13 @@ </b-input-group> </b-form-group> </b-col> - <b-col sm="7" lg="5" xl="5" xxl="3"> + <b-col sm="6" lg="4" xl="3"> <b-form-group :label="$t('pageDateTime.form.time.timezone', { timezone })" label-for="input-manual-time" + label-class="regular-14px" > - <span class="regular-12px">HH:MM</span> + <b-form-text id="time-format-help">HH:MM</b-form-text> <b-input-group> <b-form-input id="input-manual-time" @@ -134,7 +129,6 @@ </b-row> <b-form-radio v-model="form.configurationSelected" - class="system-control__radio regular-12px" value="ntp" data-test-id="dateTime-radio-configureNTP" > @@ -145,6 +139,7 @@ <b-form-group :label="$t('pageDateTime.form.ntpServers.server1')" label-for="input-ntp-1" + label-class="regular-14px" > <b-input-group> <b-form-input @@ -167,6 +162,7 @@ <b-form-group :label="$t('pageDateTime.form.ntpServers.server2')" label-for="input-ntp-2" + label-class="regular-14px" > <b-input-group> <b-form-input @@ -182,6 +178,7 @@ <b-form-group :label="$t('pageDateTime.form.ntpServers.server3')" label-for="input-ntp-3" + label-class="regular-14px" > <b-input-group> <b-form-input @@ -195,7 +192,6 @@ </b-col> </b-row> <b-button - size="md" variant="primary" type="submit" data-test-id="dateTime-button-saveSettings" diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue index 7f127173..a1dc9cec 100644 --- a/src/views/Settings/Network/ModalDns.vue +++ b/src/views/Settings/Network/ModalDns.vue @@ -5,9 +5,9 @@ :title="$t('pageNetwork.table.addDnsAddress')" @hidden="resetForm" > - <b-form id="form-dns" @submit.prevent="handleSubmit"> + <b-form id="form-dns" style="width: 100%" @submit.prevent="handleSubmit"> <b-row> - <b-col sm="6"> + <b-col> <b-form-group :label="$t('pageNetwork.modal.staticDns')" label-for="staticDns" diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue index 2abbcd7a..2d8fd61d 100644 --- a/src/views/Settings/Network/Network.vue +++ b/src/views/Settings/Network/Network.vue @@ -1,10 +1,9 @@ <template> - <b-container fluid="xl"> + <b-container fluid="m-0 p-0" class="page-network"> <page-title :description="$t('pageNetwork.pageDescription')" /> - <!-- Global settings for all interfaces --> - <network-global-settings /> - <!-- Interface tabs --> - <page-section v-show="ethernetData"> + + <page-section v-show="ethernetData" class="m-4"> + <network-global-settings class="m-4" /> <b-row> <b-col> <b-card no-body> diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue index 569109f1..1ad8f436 100644 --- a/src/views/Settings/Network/TableDns.vue +++ b/src/views/Settings/Network/TableDns.vue @@ -3,7 +3,7 @@ <b-row> <b-col lg="6"> <div class="text-right"> - <b-button variant="primary" @click="initDnsModal()"> + <b-button variant="primary" class="mb-2" @click="initDnsModal()"> <icon-add /> {{ $t('pageNetwork.table.addDnsAddress') }} </b-button> @@ -14,7 +14,7 @@ :fields="dnsTableFields" :items="form.dnsStaticTableItems" :empty-text="$t('global.table.emptyMessage')" - class="mb-0" + class="bootstrap-rounded-table mb-0" show-empty > <template #cell(actions)="{ item, index }"> @@ -82,8 +82,19 @@ export default { { key: 'address', label: this.$t('pageNetwork.table.ipAddress'), + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'actions', + thStyle: { width: '30%' }, + label: this.$t('pageNetwork.table.actions'), + thClass: + 'text-right semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'text-right bootstrap-rounded-table__td', }, - { key: 'actions', label: '', tdClass: 'text-right' }, ], }; }, @@ -115,6 +126,10 @@ export default { address: server, actions: [ { + value: 'edit', + title: this.$t('global.action.edit'), + }, + { value: 'delete', title: this.$t('pageNetwork.table.deleteDns'), }, diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue index 75870031..7481dc7b 100644 --- a/src/views/Settings/Network/TableIpv4.vue +++ b/src/views/Settings/Network/TableIpv4.vue @@ -7,7 +7,7 @@ </h3> </b-col> <b-col class="text-right"> - <b-button variant="primary" @click="initAddIpv4Address()"> + <b-button variant="primary" class="mb-2" @click="initAddIpv4Address()"> <icon-add /> {{ $t('pageNetwork.table.addIpv4Address') }} </b-button> @@ -19,7 +19,7 @@ :fields="ipv4TableFields" :items="form.ipv4TableItems" :empty-text="$t('global.table.emptyMessage')" - class="mb-0" + class="bootstrap-rounded-table mb-0" show-empty > <template #cell(actions)="{ item, index }"> @@ -86,20 +86,43 @@ export default { { key: 'Address', label: this.$t('pageNetwork.table.ipAddress'), + thStyle: { width: '20%' }, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'Gateway', label: this.$t('pageNetwork.table.gateway'), + thStyle: { width: '20%' }, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'SubnetMask', label: this.$t('pageNetwork.table.subnet'), + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', }, { key: 'AddressOrigin', label: this.$t('pageNetwork.table.addressOrigin'), + thStyle: { width: '20%' }, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'actions', + label: this.$t('pageNetwork.table.actions'), + thStyle: { width: '10%' }, + thClass: + 'text-right semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'text-right bootstrap-rounded-table__td', }, - { key: 'actions', label: '', tdClass: 'text-right' }, ], }; }, @@ -134,6 +157,10 @@ export default { AddressOrigin: ipv4.AddressOrigin, actions: [ { + value: 'edit', + title: this.$t('pageNetwork.table.edit'), + }, + { value: 'delete', title: this.$t('pageNetwork.table.deleteIpv4'), }, |