diff options
Diffstat (limited to 'src')
53 files changed, 1384 insertions, 2289 deletions
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss index 42e4a848..906f3717 100644 --- a/src/assets/styles/bmc/custom/_base.scss +++ b/src/assets/styles/bmc/custom/_base.scss @@ -4,7 +4,7 @@ body { .scroll-container { overflow-y: overlay; - height: calc(100vh - 95px); + height: calc(100vh - #{$header-height}); &::-webkit-scrollbar { margin-top: $header-height; position: absolute; @@ -19,6 +19,17 @@ body { } } +@-moz-document url-prefix() { + #logs-table-wrapper div, + #table-event-logs div, + .scroll-container, + .nav-container { + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: $faint-secondary-primary-20 transparent; +} +} + .pointer { cursor: pointer; } @@ -156,6 +167,10 @@ h6, color: $text-primary; } +.modal-body, +.page-network dd, +.page-inventory dd, +#date-time .custom-radio, .regular-14px { font-family: 'Inter', sans-serif; font-size: 14px; @@ -167,7 +182,18 @@ h6, color: $text-secondary; } +.page-network dt, +.page-inventory dt, +.semi-bold-14px { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; + color: $text-primary; +} +#date-time dd, .regular-16px { font-family: 'Inter', sans-serif; font-size: 16px; @@ -178,7 +204,7 @@ h6, text-align: left; } - +#date-time dt, .semi-bold-16px { font-family: 'Inter', sans-serif; font-size: 16px; @@ -221,14 +247,15 @@ h6, color: $text-secondary; } +h2, .h2, +.modal-title, .semi-bold-20px { font-family: 'Inter', sans-serif; - font-size: 20px; + font-size: 20px !important; font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: 0em; - text-align: center; } .bold-24px { diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index 26a11dbd..51e2d073 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -2,6 +2,7 @@ display: inline-flex; align-items: center; justify-content: space-around; + height: 36px; &:disabled { color: gray("600"); fill: currentColor; @@ -11,6 +12,9 @@ background-color: gray("400"); } } + &svg { + padding-right: 8px; + } } .btn-md { @@ -19,10 +23,11 @@ } .btn-lg { - width: 270px; + width: 290px; height: 36px; } +.btn-danger, .btn-primary { background-color: $red-brand-primary; border-radius: 8px; @@ -54,7 +59,8 @@ } } -.btn-secondary { +.btn-secondary, +.modal-header button { background-color: $faint-secondary-primary-5; color: $red-brand-primary; border-radius: 8px; @@ -82,6 +88,19 @@ color: $red-brand-primary; background-color: $faint-secondary-primary-20; } + // style for standard close button in modal and popups + &.close { + width: 32px; + height: 22px; + padding: 0px; + margin: 0px; + background-color: $faint-secondary-primary-1; + border: 1px solid $faint-secondary-primary-10; + border-radius: 7px; + &:hover { + background-color: $faint-secondary-primary-2; + } + } } .btn-unstiled { diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss index 5f2a5962..db8d076b 100644 --- a/src/assets/styles/bmc/custom/_card.scss +++ b/src/assets/styles/bmc/custom/_card.scss @@ -2,4 +2,18 @@ .bg-success { background-color: theme-color-light('success')!important; } + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 16px; +} + +.card-header { + border-radius: 15px 15px 0 0; + background-color: $faint-secondary-primary-10 !important; + color: $text-primary !important; + .nav-tabs .nav-link { + border-radius: 10px 10px 0 0 ; + &:hover { + background-color: $faint-secondary-primary-2; + } + } }
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss index 010b9b3f..1ea80d9f 100644 --- a/src/assets/styles/bmc/custom/_dropdown.scss +++ b/src/assets/styles/bmc/custom/_dropdown.scss @@ -1,11 +1,16 @@ // Make calendar visible over the table .dropdown-menu { + border-radius: 5px; z-index: $zindex-dropdown + 1; padding: 0; + a { + border-radius: 5px; + } } .dropdown-item { padding-left: $spacer/4; margin-top: -1 * $spacer/4; + background-color: $white; } // .b-dropdown-form { // padding: $spacer/2; diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 8cb8e242..d8f2cecb 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -61,6 +61,16 @@ } } +.select-per-page { + padding: 0 0 0 5px; + width: 146px !important; + height: 24px; + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + background-image: url('~@/assets/images/icon-chevron.svg'); +} + // Inverted form colors .form-background { background-color: none; @@ -91,6 +101,14 @@ line-height: $form-line-height; } +.custom-checkbox { + line-height: 23px; +} + +.custom-radio { + line-height: 23px !important; +} + .custom-checkbox ::before { box-shadow: none !important; border: 2px solid $on-surface-secondary; @@ -123,7 +141,6 @@ .custom-switch { width: 28px; height: 16px; - margin: -4px 0 -4px auto; } .custom-switch @@ -216,7 +233,7 @@ padding-top: 4px; } -//radio buttons global style +//radio buttons style .custom-radio ::before { border: 1px solid $red-brand-primary; background-color: #fff; @@ -228,7 +245,7 @@ ~ .custom-control-label::before { border: 2px solid $red-brand-primary; background-color: $red-brand-primary; - box-shadow: 0px 0px 0px 2.5px $white inset; + box-shadow: 0px 0px 0px 2.4px $white inset; border-radius: 100%; } @@ -236,7 +253,7 @@ .custom-control-input:hover ~ .custom-control-label::before { background-color: $red-brand-primary-hover !important; - box-shadow: 0px 0px 0px 2.5px $white inset; + box-shadow: 0px 0px 0px 2.4px $white inset; border-color: $red-brand-primary-hover; } @@ -251,6 +268,6 @@ .custom-control-input:active ~ .custom-control-label::before { background-color: $red-brand-primary-active !important; - box-shadow: 0px 0px 0px 2.5px $white inset; + box-shadow: 0px 0px 0px 2.4px $white inset; border-color: $red-brand-primary-active; } diff --git a/src/assets/styles/bmc/custom/_logs.scss b/src/assets/styles/bmc/custom/_logs.scss index ae0099e0..2a8dcff7 100644 --- a/src/assets/styles/bmc/custom/_logs.scss +++ b/src/assets/styles/bmc/custom/_logs.scss @@ -10,3 +10,65 @@ .logs-section .b-table-sort-icon-left { background-size: 15px !important; } + +.logs-head-container { + position: absolute; + width: 50%; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: baseline; + gap: 6px; + z-index: 1001; +} + +#logs-table-wrapper div { + max-height: calc(100vh - 194px - #{$header-height}); +} + +#logs-table, +#table-event-logs { + margin: 0 !important; +} + +// scrollbar styles +#logs-table-wrapper div, +#table-event-logs div { + overflow-y: overlay; + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + border-top: 52px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +.logs-table__th { + background-color: #f8f8f8 !important; + border-bottom: 1px solid $faint-secondary-primary-20 !important; + border-top: 1px solid $faint-secondary-primary-20 !important; + color: $text-primary !important; +} + +.logs-table__td { + border-bottom: 1px solid $faint-secondary-primary-10 !important; + height: 64px; +} + +.logs-pagination-container { + width: calc(100% - #{$navigation-width}); + height: $toolbar-height; + position: fixed; + bottom: 0; + right: 0; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); + z-index: $zindex-dropdown; + background-color: $white; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss index e2fa0cd8..725d4672 100644 --- a/src/assets/styles/bmc/custom/_modal.scss +++ b/src/assets/styles/bmc/custom/_modal.scss @@ -1,12 +1,69 @@ +.modal-dialog { + margin: 25vh auto 0; +} + +.modal-content { + border-radius: 16px; +} + .modal-header { + align-items: center; + border-bottom: 1px solid $faint-secondary-primary-10; .close { font-weight: normal; color: theme-color("dark"); opacity: 1; } - .modal-title { - font-size: 1.25rem; - font-weight: normal; - line-height: 1.3; - } } + +.modal-body { + display: flex; + justify-content: flex-start; +} + +.modal-footer { + border-top: 1px solid $faint-secondary-primary-10; +} + +#modal-reset .modal-body { + flex-direction: column; +} + +#generate-csr .custom-select, +#upload-certificate .custom-select, +#modal-user .custom-select { + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + background-image: url('~@/assets/images/icon-chevron.svg'); +} + +// file-input-modal +.modal-file-body { + display: flex; + padding: 0; + justify-content: center; +} + +.file-input_container > .custom-file { + width: 432px; + height: 357px; +} + +.custom-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; + align-items: center; + text-align: center; + white-space: normal; + justify-content: center; +} + +.custom-file-input ~ .custom-file-label::after { + display: none; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index d86d40de..84dc5f99 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -17,9 +17,9 @@ // Table action buttons .btn-link { - width: 40px; - height: 40px; - padding: 5px !important; + height: 20px; + border-radius: 2px; + padding: 4px !important; display: inline-flex; justify-content: center; align-items: center; @@ -44,7 +44,7 @@ } .status-icon svg { - width: 1rem; + width: 1.2rem; height: auto; } @@ -79,10 +79,7 @@ width: 50px; .btn { padding: 0; - width: 50px; - } - svg { - fill: theme-color("dark"); + width: 27px; } } .b-table-sort-icon-left { @@ -170,6 +167,10 @@ // } } +.b-table-details > td { + padding: 0px !important; +} + .indicators-Critical { color: $indicators-errors !important; } @@ -318,35 +319,3 @@ -o-border-radius: 0; -khtml-border-radius: 0; } - -// logs tables styles -#logs-table { - margin: 0 !important; -} - -#logs-table-wrapper div { - overflow-y: overlay; - &::-webkit-scrollbar { - position: absolute; - width: 10px; - } - &::-webkit-scrollbar-thumb { - border: 4px solid transparent; - border-top: 52px solid transparent; - background: $faint-secondary-primary-20; - border-radius: 16px; - background-clip: content-box; - } -} - -.logs-table__th { - background-color: #f8f8f8 !important; - border-bottom: 1px solid $faint-secondary-primary-20 !important; - border-top: 1px solid $faint-secondary-primary-20 !important; - color: $text-primary !important; -} - -.logs-table__td { - border-bottom: 1px solid $faint-secondary-primary-10 !important; - height: 64px; -}
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss index 4e2ad7fa..a3480fda 100644 --- a/src/assets/styles/bmc/custom/_toasts.scss +++ b/src/assets/styles/bmc/custom/_toasts.scss @@ -1,5 +1,5 @@ .b-toaster { - top: 75px!important; // make sure toasts do not hide top header + top: 95px!important; // make sure toasts do not hide top header } // Toast component and status icon style diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss index e15aef87..028d962b 100644 --- a/src/assets/styles/bmc/helpers/_colors.scss +++ b/src/assets/styles/bmc/helpers/_colors.scss @@ -3,9 +3,9 @@ $black: #000; $white: #FFFFFF; $blue-500: #2d60e5; -$green-500: #0a7d06; -$red-500: #da1416; -$yellow-500: #efc100; +$green-500: #4EBF19; +$red-500: #FF4141; +$yellow-500: #F0AC0C; $dark-blue: #1A3E5B; $gray-100: #f4f4f4; @@ -32,7 +32,7 @@ $dark: $dark-blue; $info: $blue; $light: $white; $primary: $dark-blue; -$secondary: $gray-800; +$secondary: #1A3E5B; $success: $green; $warning: $yellow; @@ -57,9 +57,12 @@ $surface-secondary: #F3F4F5; $on-surface-secondary: rgba(4, 10, 15, 0.6); $on-surface-tretiatry: #040A0F4D; +$faint-secondary-primary-1: rgba(26, 62, 91, 0.01); $faint-secondary-primary-2: rgba(26, 62, 91, 0.02); +$faint-secondary-primary-2-hover: rgba(26, 62, 91, 0.03); + $faint-secondary-primary-5: rgba(26, 62, 91, 0.05); -$faint-secondary-primary-5-hover: rgba(20, 39, 53, 0.103); +$faint-secondary-primary-5-hover: rgba(20, 39, 53, 0.1); $faint-secondary-primary-10: rgba(26, 62, 91, 0.1); $faint-secondary-primary-20: rgba(26, 62, 91, 0.2); $faint-brand-primary-40:rgba(225, 23, 23, 0.4); diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss index babb0b89..9e3a3aed 100644 --- a/src/assets/styles/bmc/helpers/_variables.scss +++ b/src/assets/styles/bmc/helpers/_variables.scss @@ -7,11 +7,18 @@ $transition-collapse: height $duration--slow-01 $standard-easing--expres // OpenBMC Custom Variables $responsive-layout-bp: lg; -$top-header-height: 56px; -$header-height: 95px; +$first-header-height: 48px; +$second-header-height: 39px; +$header-height: 87px; +$headerHeight: 40px; $navigation-width: 320px; +$toolbar-height: 60px; $form-label-font-size: .875rem; $form-line-height: 1.25rem; $box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); $focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + +// :export { +// headerHeight: $header-height; +// }
\ No newline at end of file diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 81287163..a577b452 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -32,7 +32,7 @@ <b-navbar-nav> <b-navbar-brand class="mr-0 app-logo" - to="/" + to="/hardware-status/inventory" data-test-id="appHeader-container-overview" > <img @@ -41,16 +41,18 @@ /> </b-navbar-brand> <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags"> - <span>|</span> - <span class="pl-3 asset-tag">{{ assetTag }}</span> - <span class="pl-3">{{ modelType }}</span> - <span class="pl-3">{{ serialNumber }}</span> + <span style="color: white">|</span> + <span style="color: white" class="pl-2 asset-tag">{{ + assetTag + }}</span> + <span style="color: white" class="pl-2">{{ modelType }}</span> + <span style="color: white" class="pl-2">{{ serialNumber }}</span> </div> </b-navbar-nav> - <!-- Right aligned nav items --> - <b-navbar-nav class="helper-menu"> + <!-- Left nav items--> + <!-- <b-navbar-nav class="helper-menu"> <b-nav-item - to="/" + to="/hardware-status/inventory" data-test-id="appHeader-container-health" class="nav-top-button" :class="{ @@ -77,7 +79,7 @@ {{ $t('appHeader.informationAndFAQ') }} </b-nav-item> - <b-nav-item + <b-nav-item to="/support" data-test-id="appHeader-container-power" class="nav-top-button" @@ -88,87 +90,67 @@ }" > {{ $t('appHeader.support') }} - </b-nav-item> - </b-navbar-nav> - <!-- Left nav items--> - <img - class="header-clock__icon" - src="@/assets/images/header/header-clock.svg" - /> - <span style="color: white">15:54:00</span> - <b-nav-item - to="/logs/event-logs" - data-test-id="appHeader-container-health" - style="display: block" - > - <status-icon :status="healthStatusIcon" /> - {{ $t('appHeader.health') }} - </b-nav-item> - <b-nav-item - to="/operations/server-power-operations" - data-test-id="appHeader-container-power" - style="display: block" - > - <status-icon :status="serverStatusIcon" /> - {{ $t('appHeader.power') }} - </b-nav-item> - <div class="nav-item"> - <b-button - id="app-header-refresh" - variant="link" - data-test-id="appHeader-button-refresh" - @click="refresh" - > - <icon-renew :title="$t('appHeader.titleRefresh')" /> - <span class="responsive-text">{{ $t('appHeader.refresh') }}</span> - </b-button> - </div> - <div class="nav-item"> - <b-dropdown - id="app-header-user" - variant="link" - right - data-test-id="appHeader-container-user" - > - <template #button-content> - <icon-avatar :title="$t('appHeader.titleProfile')" /> - <span class="responsive-text">{{ username }}</span> - </template> - <b-dropdown-item - to="/profile-settings" - data-test-id="appHeader-link-profile" - >{{ $t('appHeader.profileSettings') }} - </b-dropdown-item> - <b-dropdown-item - data-test-id="appHeader-link-logout" - @click="logout" + </b-nav-item> + </b-navbar-nav> --> + <!-- Right aligned nav items --> + <b-navbar-nav class="ml-auto helper-menu"> + <li class="nav-item"> + <b-button + variant="link" + data-test-id="appHeader-container-health" + @click="toLogs" > - {{ $t('appHeader.logOut') }} - </b-dropdown-item> - </b-dropdown> - </div> - <!-- <img - style="margin-left: 20px" - class="header-avatar__icon" - src="@/assets/images/header/header-avatar.svg" - /> - <span style="color: white">Маргарита тутова</span> --> - <b-button id="app-header-notification" class="app-header-notification"> - <img - class="header-notification__icon" - src="@/assets/images/header/icon-notification.svg" - /> - </b-button> - <b-button - id="app-header-logout" - class="app-header-logout" - @click="logout" - > - <img - class="header-logout__icon" - src="@/assets/images/header/logout-icon.svg" - /> - </b-button> + <status-icon :status="healthStatusIcon" /> + <span>{{ $t('appHeader.health') }}</span> + </b-button> + </li> + <li class="nav-item"> + <b-button + variant="link" + data-test-id="appHeader-container-power" + @click="toOperations" + > + <status-icon :status="serverStatusIcon" /> + <span>{{ $t('appHeader.power') }}</span> + </b-button> + </li> + <!-- Using LI elements instead of b-nav-item to support semantic button elements --> + <li class="nav-item"> + <b-button + id="app-header-refresh" + variant="link" + data-test-id="appHeader-button-refresh" + @click="refresh" + > + <icon-renew :title="$t('appHeader.titleRefresh')" /> + <span class="responsive-text">{{ $t('appHeader.refresh') }}</span> + </b-button> + </li> + <li class="nav-item"> + <b-dropdown + id="app-header-user" + variant="link" + right + data-test-id="appHeader-container-user" + > + <template #button-content> + <icon-avatar :title="$t('appHeader.titleProfile')" /> + <span class="responsive-text">{{ username }}</span> + </template> + <b-dropdown-item + to="/profile-settings" + data-test-id="appHeader-link-profile" + >{{ $t('appHeader.profileSettings') }} + </b-dropdown-item> + <b-dropdown-item + data-test-id="appHeader-link-logout" + @click="logout" + > + {{ $t('appHeader.logOut') }} + </b-dropdown-item> + </b-dropdown> + </li> + </b-navbar-nav> </b-navbar> </header> </div> @@ -180,7 +162,7 @@ import IconClose from '@carbon/icons-vue/es/close/20'; import IconMenu from '@carbon/icons-vue/es/menu/20'; import IconAvatar from '@carbon/icons-vue/es/user--avatar/20'; import IconRenew from '@carbon/icons-vue/es/renew/20'; -// import StatusIcon from '@/components/Global/StatusIcon'; +import StatusIcon from '@/components/Global/StatusIcon'; export default { name: 'AppHeader', components: { @@ -188,7 +170,7 @@ export default { IconMenu, IconAvatar, IconRenew, - // StatusIcon, + StatusIcon, }, mixins: [BVToastMixin], props: { @@ -295,6 +277,12 @@ export default { event.preventDefault(); this.$root.$emit('skip-navigation'); }, + toLogs() { + this.$router.push('/logs/event-logs').catch(() => {}); + }, + toOperations() { + this.$router.push('/operations/server-power-operations').catch(() => {}); + }, }, }; </script> @@ -348,8 +336,16 @@ export default { .navbar { padding: 0; background-color: $navbar-color; + svg { + margin-right: 2px; + } + .status-icon { + svg { + vertical-align: text-bottom; + } + } @include media-breakpoint-up($responsive-layout-bp) { - height: $top-header-height; + height: $first-header-height; } .helper-menu { @@ -395,8 +391,8 @@ export default { .nav-trigger { fill: theme-color('light'); - width: $top-header-height; - height: $top-header-height; + width: $first-header-height; + height: $first-header-height; transition: none; display: inline-flex; flex: 0 0 20px; @@ -437,7 +433,7 @@ export default { .navbar-brand { padding: $spacer/2; - height: $top-header-height; + height: $first-header-height; line-height: 1; &:focus { box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white'); @@ -445,10 +441,6 @@ export default { } } -.header-clock__icon { - margin-left: auto; -} - .app-header-logout, .app-header-notification { margin: 0 5px; diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 1cdb7120..481818c3 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -1,33 +1,6 @@ <template> <div> <div class="nav-container" :class="{ open: isNavigationOpen }"> - <div class="navbar__search_select_container"> - <div class="server-form"> - <img - class="server__icon" - src="@/assets/images/sila-server-navbar-icon.svg" - /> - <b-form-group class="server-pagination-select"> - <b-form-select - v-model="server" - class="server-select" - :options="servers" - /> - </b-form-group> - </div> - <div class="nav-line"></div> - <div class="form-control server-search"> - <button class="search-button"> - <img class="server__icon" src="@/assets/images/search-icon.svg" /> - </button> - <b-form-input - type="text" - class="nav-search__input" - placeholder="Поиск по серверу" - > - </b-form-input> - </div> - </div> <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')"> <b-nav vertical> <template v-for="(navItem, index) in sideBar"> @@ -110,9 +83,9 @@ export default { computed: { sideBar() { if ( - this.$route.path === '/console-settings' || - this.$route.path === '/console/serial-over-lan' || - this.$route.path === '/console/kvm' + this.$route.path === '/console/settings' || + this.$route.path === '/operations/serial-over-lan' || + this.$route.path === '/operations/kvm' ) { return this.kvmNavigationItems; } else { diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js index 241a8f3b..c51636d5 100644 --- a/src/components/AppNavigation/AppNavigationMixin.js +++ b/src/components/AppNavigation/AppNavigationMixin.js @@ -15,33 +15,18 @@ export const AppNavigationMixin = { { id: 'info', label: this.$t('appNavigation.overviewInfo'), - route: '/', + route: '/hardware-status/inventory', }, { id: 'network', label: this.$t('appNavigation.networkParametrs'), - route: '/network-parametrs', - }, - { - id: 'event-logs', - label: this.$t('appNavigation.eventLogs'), - route: '/event-logs', - }, - { - id: 'server-parametrs', - label: this.$t('appNavigation.serverParam'), - route: '/server-parametrs', + route: '/settings/network', }, { id: 'date-time', label: this.$t('appNavigation.dateTime'), route: '/settings/date-time', }, - { - id: 'server-power-operations', - label: this.$t('appNavigation.serverPowerOperations'), - route: '/operations/server-power-operations', - }, ], }, { @@ -54,185 +39,185 @@ export const AppNavigationMixin = { label: this.$t('appNavigation.config'), route: '/bmc-configuration', }, - { - id: 'bmc-firmware', - label: this.$t('appNavigation.deviceFirmware'), - route: '/bmc-firmware', - }, - { - id: 'bmc-settings', - label: this.$t('appNavigation.broadcast'), - route: '/bmc-settings', - }, - ], - }, - { - id: 'analytical-panel', - label: this.$t('appNavigation.analyticalPanel'), - route: '/analytical-panel', - }, - { - id: 'RAID', - label: this.$t('appNavigation.raidControllers'), - icon: 'iconChevronUp', - children: [ - { - id: 'raid-specification', - label: this.$t('appNavigation.specification'), - route: '/raid-specification', - }, - { - id: 'raid-settings', - label: this.$t('appNavigation.settings'), - route: '/raid-settings', - }, - { - id: 'raid-cache', - label: this.$t('RAID.cache'), - route: '/raid-cache', - }, - ], - }, - { - id: 'processors', - label: this.$t('appNavigation.processors'), - icon: 'iconChevronUp', - children: [ - { - id: 'processors-specification', - label: this.$t('appNavigation.specification'), - route: '/processors-specification', - }, - { - id: 'processors-dynamic-info', - label: this.$t('appNavigation.analyticalPanel'), - route: '/processors-dynamic-info', - }, - ], - }, - { - id: 'power', - label: this.$t('appNavigation.powerSupplies'), - icon: 'iconChevronUp', - children: [ - { - id: 'power-specification', - label: this.$t('appNavigation.specification'), - route: '/power-specification', - }, - { - id: 'power-dynamic-info', - label: this.$t('appNavigation.analyticalPanel'), - route: '/power-dynamic-info', - }, - ], - }, - { - id: 'memory', - label: this.$t('appNavigation.memoryModules'), - icon: 'iconChevronUp', - children: [ - { - id: 'memory-specification', - label: this.$t('appNavigation.specification'), - route: '/memory-specification', - }, - { - id: 'memory-dynamic-info', - label: this.$t('appNavigation.analyticalPanel'), - route: '/memory-dynamic-info', - }, - ], - }, - { - id: 'fans', - label: this.$t('appNavigation.fans'), - icon: 'iconChevronUp', - children: [ - { - id: 'fans-static', - label: this.$t('appNavigation.statisticInformation'), - route: '/fans-static', - }, - { - id: 'fans', - label: this.$t('appNavigation.dynamicInformation'), - route: '/fans', - }, + // { + // id: 'bmc-firmware', + // label: this.$t('appNavigation.deviceFirmware'), + // route: '/bmc-firmware', + // }, + // { + // id: 'bmc-settings', + // label: this.$t('appNavigation.broadcast'), + // route: '/bmc-settings', + // }, ], }, - { - id: 'physical-drives', - label: this.$t('appNavigation.physicalDrives'), - icon: 'iconChevronUp', - children: [ - { - id: 'drivers-static', - label: this.$t('appNavigation.statisticInformation'), - route: '/drivers-static', - }, - { - id: 'drivers', - label: this.$t('appNavigation.analyticalPanel'), - route: '/drivers', - }, - ], - }, - { - id: 'virtual-drivers', - label: this.$t('appNavigation.virtualDrivers'), - route: '/virtual-drivers', - }, - { - id: 'motherboard', - label: this.$t('appNavigation.motherboard'), - icon: 'iconChevronUp', - children: [ - { - id: 'motherboard-specification', - label: this.$t('appNavigation.specification'), - route: '/motherboard-specification', - }, - { - id: 'motherboard-dynamic-info', - label: this.$t('appNavigation.analyticalPanel'), - route: '/motherboard-dynamic-info', - }, - ], - }, - { - id: 'network-adapters', - label: this.$t('appNavigation.networkAdapters'), - icon: 'iconChevronUp', - children: [ - { - id: 'network-adapters-ethernet', - label: this.$t('appNavigation.ethernetAdapters'), - route: '/network-adapters-ethernet', - }, - { - id: 'network-adapters-fc-hba', - label: this.$t('appNavigation.fcHbaAdapters'), - route: '/network-adapters-fc-hba', - }, - { - id: 'network-adapters-pannel', - label: this.$t('appNavigation.analyticalPanel'), - route: '/network-adapters-pannel', - }, - ], - }, - { - id: 'pci-devices', - label: this.$t('appNavigation.pciDevices'), - route: '/pci-devices', - }, + // { + // id: 'analytical-panel', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/analytical-panel', + // }, + // { + // id: 'RAID', + // label: this.$t('appNavigation.raidControllers'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'raid-specification', + // label: this.$t('appNavigation.specification'), + // route: '/raid-specification', + // }, + // { + // id: 'raid-settings', + // label: this.$t('appNavigation.settings'), + // route: '/raid-settings', + // }, + // { + // id: 'raid-cache', + // label: this.$t('RAID.cache'), + // route: '/raid-cache', + // }, + // ], + // }, + // { + // id: 'processors', + // label: this.$t('appNavigation.processors'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'processors-specification', + // label: this.$t('appNavigation.specification'), + // route: '/processors-specification', + // }, + // { + // id: 'processors-dynamic-info', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/processors-dynamic-info', + // }, + // ], + // }, + // { + // id: 'power', + // label: this.$t('appNavigation.powerSupplies'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'power-specification', + // label: this.$t('appNavigation.specification'), + // route: '/power-specification', + // }, + // { + // id: 'power-dynamic-info', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/power-dynamic-info', + // }, + // ], + // }, + // { + // id: 'memory', + // label: this.$t('appNavigation.memoryModules'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'memory-specification', + // label: this.$t('appNavigation.specification'), + // route: '/memory-specification', + // }, + // { + // id: 'memory-dynamic-info', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/memory-dynamic-info', + // }, + // ], + // }, + // { + // id: 'fans', + // label: this.$t('appNavigation.fans'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'fans-static', + // label: this.$t('appNavigation.statisticInformation'), + // route: '/fans-static', + // }, + // { + // id: 'fans', + // label: this.$t('appNavigation.dynamicInformation'), + // route: '/fans', + // }, + // ], + // }, + // { + // id: 'physical-drives', + // label: this.$t('appNavigation.physicalDrives'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'drivers-static', + // label: this.$t('appNavigation.statisticInformation'), + // route: '/drivers-static', + // }, + // { + // id: 'drivers', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/drivers', + // }, + // ], + // }, + // { + // id: 'virtual-drivers', + // label: this.$t('appNavigation.virtualDrivers'), + // route: '/virtual-drivers', + // }, + // { + // id: 'motherboard', + // label: this.$t('appNavigation.motherboard'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'motherboard-specification', + // label: this.$t('appNavigation.specification'), + // route: '/motherboard-specification', + // }, + // { + // id: 'motherboard-dynamic-info', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/motherboard-dynamic-info', + // }, + // ], + // }, + // { + // id: 'network-adapters', + // label: this.$t('appNavigation.networkAdapters'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'network-adapters-ethernet', + // label: this.$t('appNavigation.ethernetAdapters'), + // route: '/network-adapters-ethernet', + // }, + // { + // id: 'network-adapters-fc-hba', + // label: this.$t('appNavigation.fcHbaAdapters'), + // route: '/network-adapters-fc-hba', + // }, + // { + // id: 'network-adapters-pannel', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/network-adapters-pannel', + // }, + // ], + // }, + // { + // id: 'pci-devices', + // label: this.$t('appNavigation.pciDevices'), + // route: '/pci-devices', + // }, ///////////////////////////old tabs - { - id: 'overview', - label: 'Обзор', - route: '/Info', - }, + // { + // id: 'overview', + // label: 'Обзор', + // route: '/Info', + // }, { id: 'logs', label: this.$t('appNavigation.logs'), @@ -241,7 +226,7 @@ export const AppNavigationMixin = { { id: 'event-logs', label: this.$t('appNavigation.eventLogs'), - route: '/logs/event-logs-old', + route: '/logs/event-logs', }, { id: 'post-code-logs', @@ -250,23 +235,18 @@ export const AppNavigationMixin = { }, ], }, - { - id: 'hardware-status', - label: this.$t('appNavigation.hardwareStatus'), - icon: 'iconChevronUp', - children: [ - { - id: 'inventory', - label: this.$t('appNavigation.inventory'), - route: '/hardware-status/inventory', - }, - { - id: 'sensors', - label: this.$t('appNavigation.sensors'), - route: '/hardware-status/sensors', - }, - ], - }, + // { + // id: 'hardware-status', + // label: this.$t('appNavigation.hardwareStatus'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'sensors', + // label: this.$t('appNavigation.sensors'), + // route: '/hardware-status/sensors', + // }, + // ], + // }, { id: 'operations', label: this.$t('appNavigation.operations'), @@ -304,25 +284,27 @@ export const AppNavigationMixin = { }, ], }, - { - id: 'settings', - label: this.$t('appNavigation.settings'), - children: [ - { - id: 'network', - label: this.$t('appNavigation.network'), - route: '/settings/network', - }, - { - id: 'power-restore-policy', - label: this.$t('appNavigation.powerRestorePolicy'), - route: '/settings/power-restore-policy', - }, - ], - }, + // { + // id: 'settings', + // label: this.$t('appNavigation.settings'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'network', + // label: this.$t('appNavigation.network'), + // route: '/settings/network', + // }, + // { + // id: 'power-restore-policy', + // label: this.$t('appNavigation.powerRestorePolicy'), + // route: '/settings/power-restore-policy', + // }, + // ], + // }, { id: 'security-and-access', label: this.$t('appNavigation.securityAndAccess'), + icon: 'iconChevronUp', children: [ { id: 'sessions', @@ -351,17 +333,18 @@ export const AppNavigationMixin = { }, ], }, - { - id: 'resource-management', - label: this.$t('appNavigation.resourceManagement'), - children: [ - { - id: 'power', - label: this.$t('appNavigation.power'), - route: '/resource-management/power', - }, - ], - }, + // { + // id: 'resource-management', + // label: this.$t('appNavigation.resourceManagement'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'power', + // label: this.$t('appNavigation.power'), + // route: '/resource-management/power', + // }, + // ], + // }, ], }; }, @@ -371,20 +354,20 @@ export const KvmNavigationMixin = { data() { return { kvmNavigationItems: [ + // { + // id: 'console-settings', + // label: this.$t('appPageTitle.consoleSettings'), + // route: '/console/settings', + // }, { - id: 'console-settings', - label: this.$t('kvmNavigation.ConsoleSettings'), - route: '/console-settings', + id: 'kvm', + label: this.$t('appNavigation.kvm'), + route: '/operations/kvm', }, { id: 'serial-over-lan', - label: this.$t('kvmNavigation.serialOverLan'), - route: '/console/serial-over-lan', - }, - { - id: 'kvm', - label: this.$t('kvmNavigation.kvm'), - route: '/console/kvm', + label: this.$t('appPageTitle.serialOverLan'), + route: '/operations/serial-over-lan', }, ], }; diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue index e8de9e27..0109e7d2 100644 --- a/src/components/Global/Alert.vue +++ b/src/components/Global/Alert.vue @@ -12,7 +12,7 @@ <status-icon :status="variant" /> </div> <div class="alert-content"> - <div class="alert-msg"> + <div class="alert-msg regular-14px"> <slot /> </div> </div> diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue index cf713acf..18c542c3 100644 --- a/src/components/Global/FormFile.vue +++ b/src/components/Global/FormFile.vue @@ -1,26 +1,38 @@ <template> <div class="custom-form-file-container"> <label> - <b-form-file - :id="id" - v-model="file" - :accept="accept" - :disabled="disabled" - :state="state" - plain - @input="$emit('input', file)" + <b-modal + :id="`modal-${id}`" + body-class="modal-file-body" + :title="$t('pageKvm.addImage_modal')" + hide-footer > - </b-form-file> - <span - class="add-file-btn btn" + <div class="file-input_container"> + <b-form-file + :id="id" + v-model="file" + :accept="accept" + :disabled="disabled" + :state="state" + placeholder="Нажмите на область или перетащите в нее файл" + drop-placeholder="Отпустите, чтобы добавить файл" + @input="$emit('input', file)" + > + </b-form-file> + </div> + </b-modal> + <b-button + size="lg" + class="add-file-btn" :class="{ disabled, 'btn-secondary': isSecondary, 'btn-primary': !isSecondary, }" + @click="$bvModal.show(`modal-${id}`)" > {{ $t('global.fileUpload.browseText') }} - </span> + </b-button> <slot name="invalid"></slot> </label> <div v-if="file" class="clear-selected-file px-3 py-2 mt-2"> @@ -78,9 +90,15 @@ export default { return this.variant === 'secondary'; }, }, + watch: { + file() { + if (this.file) { + this.$bvModal.hide(`modal-${this.id}`); + } + }, + }, }; </script> - <style lang="scss" scoped> .form-control-file { opacity: 0; @@ -116,4 +134,16 @@ export default { } } } + +.file-input_container { + width: 100%; + height: 400px; + background-color: $surface-secondary; + border-top: 1px solid #f3f4f5; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} </style> diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index ac8f9bfb..ce097fcb 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -1,11 +1,12 @@ <template> <div class="search-global"> - <b-form-group - :label="$t('global.form.search')" + <!--<b-form-group + :label="$t('global.form.search')" :label-for="`searchInput-${_uid}`" label-class="invisible" - class="mb-2" - > + class="mb-2" + >--> + <b-form-group> <b-input-group size="md" class="align-items-center"> <b-input-group-prepend> <icon-search class="search-icon" /> diff --git a/src/components/Global/SilaComponents/PopoverWithSlot.vue b/src/components/Global/SilaComponents/PopoverWithSlot.vue index a9ec649b..44fb9640 100644 --- a/src/components/Global/SilaComponents/PopoverWithSlot.vue +++ b/src/components/Global/SilaComponents/PopoverWithSlot.vue @@ -135,7 +135,6 @@ export default { // updated & popover positioned first this.$nextTick(() => { this.$nextTick(() => { - console.log(ref); (ref.$el || ref).focus(); }); }); @@ -158,6 +157,7 @@ export default { margin: 0 28px 0 auto; background: none; border: none; + height: 25px; &:active { background-color: $faint-secondary-primary-5-hover !important; box-shadow: none !important; diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index fb818451..8f9e3d53 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -1,32 +1,28 @@ <template> <span :class="['status-icon', status]"> <icon-info v-if="status === 'info'" /> - <img - v-else-if="status === 'success'" - class="status__img" - src="@/assets/images/status/on.svg" - /> + <icon-success v-else-if="status === 'success'" /> <icon-warning v-else-if="status === 'warning'" /> - <img - v-else-if="status === 'danger'" - class="status__img" - src="@/assets/images/status/off.svg" - /> + <icon-danger v-else-if="status === 'danger'" /> <icon-secondary v-else /> </span> </template> <script> -import IconInfo from '@carbon/icons-vue/es/information--filled/20'; -import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; -import IconError from '@carbon/icons-vue/es/error--filled/20'; +import IconInfo from '@carbon/icons-vue/es/information/20'; +import IconCheckmark from '@carbon/icons-vue/es/checkmark--outline/20'; +import IconWarning from '@carbon/icons-vue/es/warning/20'; +import IconError from '@carbon/icons-vue/es/error--outline/20'; +import IconMisuse from '@carbon/icons-vue/es/misuse--outline/20'; export default { name: 'StatusIcon', components: { IconInfo: IconInfo, + iconSuccess: IconCheckmark, iconSecondary: IconError, iconWarning: IconWarning, + iconDanger: IconMisuse, }, props: { status: { diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index aa10cb5c..3094b6ea 100644 --- a/src/components/Global/TableDateFilter.vue +++ b/src/components/Global/TableDateFilter.vue @@ -1,9 +1,10 @@ <template> - <b-row class="mb-2"> + <b-row class="mb-2 mt-2"> <b-col class="d-sm-flex"> <b-form-group :label="$t('global.table.fromDate')" label-for="input-from-date" + label-class="caption-12px mb-0" class="mr-3 my-0 w-100" > <b-input-group> @@ -12,7 +13,7 @@ v-model="fromDate" placeholder="YYYY-MM-DD" :state="getValidationState($v.fromDate)" - class="form-control-with-button mb-3 mb-md-0" + class="form-control-with-button mb-md-0" @blur="$v.fromDate.$touch()" /> <b-form-invalid-feedback role="alert"> @@ -50,6 +51,7 @@ <b-form-group :label="$t('global.table.toDate')" label-for="input-to-date" + label-class="caption-12px mb-0" class="my-0 w-100" > <b-input-group> diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index eabe0c98..4137d98c 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -68,8 +68,6 @@ export default { }; </script> <style lang="scss" scoped> -$toolbar-height: 64px; - .toolbar-container { width: calc(100vw - 320px); height: $toolbar-height; diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue index 9d8a1b88..72bc955e 100644 --- a/src/components/SubHeader/SubHeader.vue +++ b/src/components/SubHeader/SubHeader.vue @@ -5,7 +5,7 @@ <!-- top navigation menu --> <b-navbar-nav> <b-nav-item - to="/" + to="/hardware-status/inventory" data-test-id="appHeader-container-health" class="subheader-button" :class="{ @@ -15,6 +15,7 @@ 'support', 'console-settings', 'console', + 'operations', 'security-and-access', ].includes($route.path.split('/')[1]), }" @@ -23,14 +24,16 @@ </b-nav-item> <b-nav-item - to="/console-settings" + to="/operations/kvm" data-test-id="appHeader-container-health" class="subheader-button" :class="{ 'active-route-top': - ''.includes($route.path.split('/console-settings')[1]) || - ''.includes($route.path.split('/console/serial-over-lan')[1]) || - ''.includes($route.path.split('/console/kvm')[1]), + ''.includes($route.path.split('/console/settings')[1]) || + ''.includes( + $route.path.split('/operations/serial-over-lan')[1] + ) || + ''.includes($route.path.split('/operations/kvm')[1]), }" > {{ $t('subHeader.console') }} @@ -105,7 +108,7 @@ export default { box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color; } .sub-header { - height: 39px; + height: $second-header-height; .subheader-button { margin-left: 10px; @@ -133,7 +136,7 @@ export default { padding: 0; background-color: $navbar-color; @include media-breakpoint-up($responsive-layout-bp) { - height: 39px; + height: $second-header-height; } .helper-menu { diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index 3ecc9474..3444910f 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -2,8 +2,8 @@ <div class="app-container"> <app-header ref="focusTarget" + :key="routerKey" class="app-header" - :router-key="routerKey" @refresh="refresh" /> <sub-header ref="focusTarget" class="sub-header" :router-key="routerKey" /> @@ -63,7 +63,7 @@ export default { .app-container { display: grid; grid-template-columns: 100%; - grid-template-rows: 56px 39px 1fr; + grid-template-rows: $first-header-height $second-header-height 1fr; grid-template-areas: 'header' 'subheader' @@ -88,7 +88,7 @@ export default { .sub-header { grid-area: subheader; position: sticky; - top: 56px; + top: $first-header-height; z-index: $zindex-fixed - 1; } diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index 407292fc..61a53843 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -95,8 +95,8 @@ "emptySearchMessage": "Нет объектов, соответствующих поиску", "expandTableRow": "Развернуть", "fromDate": "Начиная с даты", - "items": "Всего объектов: %{count}", - "itemsPerPage": "Объектов на странице", + "items": "Всего записей: %{count}", + "itemsPerPage": "Записей на странице", "selectAll": "Выбрать всё", "selectItem": "Выбрать объект", "selectedItems": "%{filterCount} из %{count} объектов", @@ -192,7 +192,7 @@ "inventory": "@:appPageTitle.inventory", "kvm": "@:appPageTitle.kvm", "ldap": "@:appPageTitle.ldap", - "logs": "Логи", + "logs": "Журналы", "userManagement": "@:appPageTitle.userManagement", "network": "@:appPageTitle.network", "overview": "@:appPageTitle.overview", @@ -202,7 +202,7 @@ "rebootBmc": "@:appPageTitle.rebootBmc", "policies": "@:appPageTitle.policies", "sensors": "@:appPageTitle.sensors", - "serialOverLan": "Консоль SOL", + "serialOverLan": "Серийная консоль SOL", "serverPowerOperations": "@:appPageTitle.serverPowerOperations", "certificates": "@:appPageTitle.certificates", "virtualMedia": "@:appPageTitle.virtualMedia", @@ -210,12 +210,7 @@ "description": { "configuration": "Конфигурация" } - }, - "kvmNavigation": { - "ConsoleSettings": "Настройки консоли", - "serialOverLan": "Графическая консоль", - "kvm": "Командная строка" - }, + }, "appPageTitle": { "changePassword": "Изменить пароль", @@ -227,7 +222,7 @@ "factoryReset": "Сброс до заводских настроек", "firmware": "Встроенное ПО", "inventory": "Перечень оборудования и LED", - "kvm": "KVM", + "kvm": "Графическая консоль KVM", "ldap": "LDAP", "userManagement": "Управление пользователями", "login": "Логин", @@ -244,7 +239,8 @@ "serverPowerOperations": "Управление питанием и ОС сервера", "certificates": "Сертификаты", "keyClear": "Очистка ключа", - "virtualMedia": "Виртуальные носители" + "virtualMedia": "Виртуальные носители", + "consoleSettings": "Настройки консоли" }, "pageChangePassword": { "changePassword": "Изменить пароль", @@ -337,8 +333,7 @@ }, "pageEventLogs": { "additionalDataUri": "Загрузить дополнительные данные", - "resolve": "Разрешить", - "event_resolve": "Событие решено", + "resolve": "Событие решено", "archive": "Архивировать", "resolved": "Решено", "unresolve": "Отменить разрешение", @@ -392,7 +387,7 @@ "modal": { "resetBiosTitle": "Сбросить настройки встроенного ПО сервера", "resetBiosHeader": "Вы хотите сбросить настройки встроенного ПО сервера?", - "resetBiosSubmitText": "Сбросить настройки встроенного ПО сервера", + "resetBiosSubmitText": "Сбросить настройки встроенного ПО", "resetBiosSettingsList": { "item1": "Все ручные настройки будут удалены.", "item2": "Конфигурация разделов и хранилище ключей могут быть восстановлены, если существует резервная копия." @@ -662,7 +657,7 @@ "accountStatus": "Статус учётной записи", "automaticAfterTimeout": "Автоматически после истечения таймаута", "batchDeleteConfirmMessage": "Вы уверены, что хотите удалить %{count} пользователя? Это действие нельзя отменить. | Вы уверены, что хотите удалить %{count} пользователей? Это действие нельзя отменить.", - "cannotStartWithANumber": "Не может начинаться с цифры", + "cannotStartWithANumber": "Не начинается с цифры", "clickSaveToUnlockAccount": "Нажмите \"Сохранить\" для разблокировки учётной записи", "confirmUserPassword": "Подтвердите пароль пользователя", "deleteConfirmMessage": "Вы уверены, что хотите удалить пользователя '%{user}'? Это действие нельзя отменить.", @@ -825,7 +820,8 @@ "editIpv4": "Редактировать IPv4 адрес", "gateway": "Шлюз", "ipAddress": "IP адрес", - "subnet": "Маска подсети" + "subnet": "Маска подсети", + "actions": "Действия" }, "toast": { "errorSaveNetworkSettings": "Ошибка обновления %{setting} настроек.", @@ -863,7 +859,7 @@ }, "toast": { "errorRebootStart": "Ошибка перезапуска BMC.", - "successRebootStart": "Перезапуск BMC." + "successRebootStart": "Команда на перезагрузку отправлена." } }, "pagePolicies": { @@ -932,7 +928,8 @@ "disconnected": "Отключено", "openNewTab": "Открыть в новом окне", "status": "Статус", - "subTitle": "SOL консоль перенаправляет вывод последовательного порта сервера в это окно." + "subTitle": "SOL консоль перенаправляет вывод последовательного порта сервера в это окно.", + "disconnectedAlertMessage": "Не подключено" }, "pageServerPowerOperations": { "currentStatus": "Текущий статус", diff --git a/src/router/routes.js b/src/router/routes.js index 439815ae..7aae4ce2 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -7,7 +7,7 @@ import FactoryReset from '@/views/Operations/FactoryReset'; import Firmware from '@/views/Operations/Firmware'; import Inventory from '@/views/HardwareStatus/Inventory'; import Kvm from '@/views/Operations/Kvm'; -// import KvmConsole from '@/views/Operations/Kvm/KvmConsole'; Full screen console +import KvmConsole from '@/views/Operations/Kvm/KvmConsole'; import Sessions from '../views/SecurityAndAccess/Sessions'; import Ldap from '@/views/SecurityAndAccess/Ldap'; import UserManagement from '@/views/SecurityAndAccess/UserManagement'; @@ -24,14 +24,14 @@ import Policies from '@/views/SecurityAndAccess/Policies'; import KeyClear from '@/views/Operations/KeyClear'; import Sensors from '@/views/HardwareStatus/Sensors'; import SerialOverLan from '@/views/Operations/SerialOverLan'; -// import SerialOverLanConsole from '@/views/Operations/SerialOverLan/SerialOverLanConsole'; Full screen SOL +import SerialOverLanConsole from '@/views/Operations/SerialOverLan/SerialOverLanConsole'; import ServerPowerOperations from '@/views/Operations/ServerPowerOperations'; import Certificates from '@/views/SecurityAndAccess/Certificates'; import VirtualMedia from '@/views/Operations/VirtualMedia'; import Power from '@/views/ResourceManagement/Power'; import InformationAndFAQ from '@/views/InformationAndFAQ'; -import SystemDescription from '@/views/SystemDescription/Info'; +// import SystemDescription from '@/views/SystemDescription/Info'; import SystemNetwork from '@/views/SystemDescription/Network'; import ServerParametrs from '@/views/SystemDescription/ServerParametrs'; // import SystemEventLogs from '@/views/SystemDescription/SystemEventLogs'; @@ -50,7 +50,6 @@ import MemoryStaticPage from '@/views/MemoryModules/Specification'; import PowerStaticPage from '@/views/PowerSupplies/Specification'; import PowerDynamicPage from '@/views/PowerSupplies/DynamicInfo'; -import SILAEventLogs from '@/views/SILA/EventLogs'; import SILAAnalyticalPanel from '@/views/SILA/AnalyticalPanel'; import SILARaidSpecification from '@/views/SILA/RAID/Specification'; @@ -99,22 +98,47 @@ const routes = [ ], }, { - path: '/', + path: '/console', + component: ConsoleLayout, meta: { requiresAuth: true, }, - component: AppLayout, children: [ { - path: '/console-settings', + path: 'serial-over-lan-console', + name: 'serial-over-lan-console', + component: SerialOverLanConsole, + meta: { + title: i18n.t('appPageTitle.serialOverLan'), + }, + }, + { + path: 'kvm', + name: 'kvm-console', + component: KvmConsole, + meta: { + title: i18n.t('appPageTitle.kvm'), + }, + }, + { + path: '/settings', name: 'console-settings', component: ConsoleSettings, meta: { - title: i18n.t('kvmNavigation.ConsoleSettings'), + title: i18n.t('appPageTitle.ConsoleSettings'), }, }, + ], + }, + { + path: '/', + meta: { + requiresAuth: true, + }, + component: AppLayout, + children: [ { - path: '/console', + path: '/operations', component: ConsoleLayout, meta: { requiresAuth: true, @@ -122,18 +146,18 @@ const routes = [ children: [ { path: 'serial-over-lan', - name: 'serial-over-lan-console', + name: 'serial-over-lan', component: SerialOverLan, meta: { - title: i18n.t('kvmNavigation.serialOverLan'), + title: i18n.t('appPageTitle.serialOverLan'), }, }, { path: 'kvm', - name: 'kvm-console', + name: 'kvm', component: Kvm, meta: { - title: i18n.t('kvmNavigation.kvm'), + title: i18n.t('appPageTitle.kvm'), }, }, ], @@ -141,7 +165,7 @@ const routes = [ { path: '/', name: 'info', - component: SystemDescription, + component: Inventory, meta: { title: i18n.t('appNavigation.systemInformaion'), description: i18n.t('appNavigation.overviewInfo'), @@ -157,14 +181,6 @@ const routes = [ }, }, { - path: '/event-logs', - name: 'event-logs', - component: SILAEventLogs, - meta: { - title: i18n.t('appNavigation.eventLogs'), - }, - }, - { path: '/server-parametrs', name: 'server-parametrs', component: ServerParametrs, @@ -403,7 +419,7 @@ const routes = [ }, }, { - path: '/logs/event-logs-old', + path: '/logs/event-logs', name: 'event-logs', component: EventLogs, meta: { @@ -423,7 +439,8 @@ const routes = [ name: 'inventory', component: Inventory, meta: { - title: i18n.t('appPageTitle.inventory'), + title: i18n.t('appNavigation.systemInformaion'), + description: i18n.t('appNavigation.overviewInfo'), }, }, { @@ -554,14 +571,6 @@ const routes = [ title: i18n.t('appPageTitle.rebootBmc'), }, }, - // { - // path: '/operations/serial-over-lan', - // name: 'serial-over-lan', - // component: SerialOverLan, - // meta: { - // title: i18n.t('appPageTitle.serialOverLan'), - // }, - // }, { path: '/operations/server-power-operations', name: 'server-power-operations', 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'), }, |