diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 10 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 13 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigationMixin.js | 253 | ||||
-rw-r--r-- | src/components/Global/PageTitle.vue | 13 | ||||
-rw-r--r-- | src/components/Global/Popover.vue | 42 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/DateSwitch.vue | 123 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/InventoryControlSystem.vue | 240 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/NtpPopover.vue | 136 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/Tables/AccessoryTable.vue | 101 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue | 116 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue | 105 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue | 104 | ||||
-rw-r--r-- | src/components/Global/SilaComponents/colors.js | 8 | ||||
-rw-r--r-- | src/components/Global/TableToolbar.vue | 18 | ||||
-rw-r--r-- | src/components/SubHeader/SubHeader.vue | 40 |
15 files changed, 1146 insertions, 176 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index eca1e4c8..70631fbf 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -38,7 +38,6 @@ <img class="header-logo" src="@/assets/images/logo-header-sila.svg" - :alt="altLogo" /> </b-navbar-brand> <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags"> @@ -108,7 +107,6 @@ <img class="header-clock__icon" src="@/assets/images/header/header-clock.svg" - :alt="altLogo" /> <span style="color: white">15:54:00</span> <b-nav-item @@ -174,11 +172,14 @@ src="@/assets/images/header/icon-notification.svg" /> </b-button> - <b-button id="app-header-logout" class="app-header-logout"> + <b-button + id="app-header-logout" + class="app-header-logout" + @click="logout" + > <img class="header-logout__icon" src="@/assets/images/header/logout-icon.svg" - :alt="altLogo" /> </b-button> </b-navbar> @@ -212,7 +213,6 @@ export default { data() { return { isNavigationOpen: false, - altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC', }; }, computed: { diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index dc7a58d0..84b81ac6 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -6,7 +6,6 @@ <img class="server__icon" src="@/assets/images/sila-server-navbar-icon.svg" - :alt="altLogo" /> <b-form-group class="server-pagination-select"> <b-form-select @@ -19,11 +18,7 @@ <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" - :alt="altLogo" - /> + <img class="server__icon" src="@/assets/images/search-icon.svg" /> </button> <b-form-input type="text" @@ -56,7 +51,7 @@ > {{ navItem.label }} <component :is="navItem.icon" class="icon-expand" /> - <icon-expand class="icon-expand" /> + <!-- <icon-expand class="icon-expand" /> --> </b-button> <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav"> <li class="nav-item"> @@ -92,6 +87,7 @@ //Exact match alias set to support //dotenv customizations. import { AppNavigationMixin, KvmNavigationMixin } from './AppNavigationMixin'; + export default { name: 'AppNavigation', mixins: [AppNavigationMixin, KvmNavigationMixin], @@ -300,7 +296,7 @@ svg { } &::-webkit-scrollbar-thumb { border: 4px solid transparent; - background: rgba(14, 32, 48, 0.384); + background: $faint-secondary-primary-20; border-radius: 16px; background-clip: content-box; } @@ -387,6 +383,7 @@ svg { width: 237px; border: none; height: 48px; + background-image: url('../../assets/images/icon-chevron.svg'); &:focus { box-shadow: none; } diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js index ad5f58b5..7c981ec6 100644 --- a/src/components/AppNavigation/AppNavigationMixin.js +++ b/src/components/AppNavigation/AppNavigationMixin.js @@ -20,12 +20,12 @@ export const AppNavigationMixin = { { id: 'network', label: this.$t('appNavigation.networkParametrs'), - route: '/network', + route: '/network-parametrs', }, { - id: 'post-code-logs', + id: 'event-logs', label: this.$t('appNavigation.eventLogs'), - route: '/logs/post-code-logs', + route: '/event-logs', }, { id: 'server-parametrs', @@ -40,97 +40,114 @@ export const AppNavigationMixin = { icon: 'iconChevronUp', children: [ { - id: 'configuration', + id: 'bmc-configuration', label: this.$t('appNavigation.config'), route: '/bmc-configuration', }, { - id: 'post-code-logs', + id: 'bmc-firmware', label: this.$t('appNavigation.deviceFirmware'), - route: '/logs/post-code-logs', + route: '/bmc-firmware', }, { - id: 'post-code-logs', + id: 'bmc-settings', label: this.$t('appNavigation.broadcast'), - route: '/logs/post-code-logs', + route: '/bmc-settings', }, ], }, + // { + // id: 'analytical-panel', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/', + // }, + // { + // id: 'RAID', + // label: this.$t('appNavigation.raidControllers'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.specifications'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.settings'), + // route: '/logs/post-code-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.cachRaid'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, + // { + // id: 'power-supplies', + // label: this.$t('appNavigation.powerSupplies'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.specifications'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, { - id: 'analytical-panel', - label: this.$t('appNavigation.analyticalPanel'), - route: '/', - }, - { - id: 'RAID', - label: this.$t('appNavigation.raidControllers'), - icon: 'iconChevronUp', - children: [ - { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.settings'), - route: '/logs/post-code-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.cachRaid'), - route: '/logs/post-code-logs', - }, - ], - }, - { - id: 'memoryModules', - label: this.$t('appNavigation.memoryModules'), + id: 'processors', + label: this.$t('appNavigation.processors'), icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'processors-specification', + label: this.$t('appNavigation.specification'), + route: '/processors-specification', }, { - id: 'post-code-logs', + id: 'processors-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/processors-dynamic-info', }, ], }, { - id: 'processors', - label: this.$t('appNavigation.processors'), + id: 'power', + label: this.$t('appNavigation.powerSupplies'), icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'power-specification', + label: this.$t('appNavigation.specification'), + route: '/power-specification', }, { - id: 'post-code-logs', + id: 'power-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/power-dynamic-info', }, ], }, { - id: 'power-supplies', - label: this.$t('appNavigation.powerSupplies'), + id: 'memory', + label: this.$t('appNavigation.memoryModules'), icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'memory-specification', + label: this.$t('appNavigation.specification'), + route: '/memory-specification', }, { - id: 'post-code-logs', + id: 'memory-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/memory-dynamic-info', }, ], }, @@ -140,58 +157,14 @@ export const AppNavigationMixin = { icon: 'iconChevronUp', children: [ { - id: 'overview-info', + id: 'fans-static', label: this.$t('appNavigation.statisticInformation'), - route: '/logs/event-logs', + route: '/fans-static', }, { - id: 'post-code-logs', + id: 'fans', label: this.$t('appNavigation.dynamicInformation'), - route: '/logs/post-code-logs', - }, - ], - }, - { - id: 'physical-drives', - label: this.$t('appNavigation.physicalDrives'), - icon: 'iconChevronUp', - children: [ - { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', - }, - ], - }, - { - id: 'virtual-drives', - label: this.$t('appNavigation.virtualDrives'), - route: '/', - }, - { - id: 'network-adapters', - label: this.$t('appNavigation.networkAdapters'), - icon: 'iconChevronUp', - children: [ - { - id: 'overview-info', - label: this.$t('appNavigation.ethernetAdapters'), - route: '/logs/event-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.fcHbaAdapters'), - route: '/logs/post-code-logs', - }, - { - id: 'post-code-logs', - label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/fans', }, ], }, @@ -201,28 +174,71 @@ export const AppNavigationMixin = { icon: 'iconChevronUp', children: [ { - id: 'overview-info', - label: this.$t('appNavigation.specifications'), - route: '/logs/event-logs', + id: 'motherboard-specification', + label: this.$t('appNavigation.specification'), + route: '/motherboard-specification', }, { - id: 'post-code-logs', + id: 'motherboard-dynamic-info', label: this.$t('appNavigation.analyticalPanel'), - route: '/logs/post-code-logs', + route: '/motherboard-dynamic-info', }, ], }, - { - id: 'pci-devises', - label: this.$t('appNavigation.pciDevises'), - route: '/', - }, + // { + // id: 'physical-drives', + // label: this.$t('appNavigation.physicalDrives'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.specifications'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, + // { + // id: 'virtual-drives', + // label: this.$t('appNavigation.virtualDrives'), + // route: '/', + // }, + // { + // id: 'network-adapters', + // label: this.$t('appNavigation.networkAdapters'), + // icon: 'iconChevronUp', + // children: [ + // { + // id: 'overview-info', + // label: this.$t('appNavigation.ethernetAdapters'), + // route: '/logs/event-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.fcHbaAdapters'), + // route: '/logs/post-code-logs', + // }, + // { + // id: 'post-code-logs', + // label: this.$t('appNavigation.analyticalPanel'), + // route: '/logs/post-code-logs', + // }, + // ], + // }, + // { + // id: 'pci-devises', + // label: this.$t('appNavigation.pciDevises'), + // route: '/', + // }, //old tabs { id: 'overview', - label: 'СТАРЫЕ ВКЛАДКИ', + label: 'Страницы BMC webui-vue', route: '/Info', - icon: 'iconOverview', }, { id: 'logs', @@ -232,7 +248,7 @@ export const AppNavigationMixin = { { id: 'event-logs', label: this.$t('appNavigation.eventLogs'), - route: '/logs/event-logs', + route: '/logs/event-logs-old', }, { id: 'post-code-logs', @@ -298,7 +314,6 @@ export const AppNavigationMixin = { { id: 'settings', label: this.$t('appNavigation.settings'), - icon: 'iconSettings', children: [ { id: 'date-time', @@ -320,7 +335,6 @@ export const AppNavigationMixin = { { id: 'security-and-access', label: this.$t('appNavigation.securityAndAccess'), - icon: 'iconSecurityAndAccess', children: [ { id: 'sessions', @@ -352,7 +366,6 @@ export const AppNavigationMixin = { { id: 'resource-management', label: this.$t('appNavigation.resourceManagement'), - icon: 'iconResourceManagement', children: [ { id: 'power', diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue index 12dde551..20bc8050 100644 --- a/src/components/Global/PageTitle.vue +++ b/src/components/Global/PageTitle.vue @@ -1,7 +1,11 @@ <template> - <div class="page-title"> + <div v-if="description" class="page-title"> <h1 class="bold-24px text-title">{{ title }}</h1> - <p v-if="description" class="page-description">{{ description }}</p> + <p class="page-description">{{ description }}</p> + </div> + <div v-else class="page-title no_description"> + <h1 class="bold-24px text-title">{{ title }}</h1> + <p class="page-description">{{ description }}</p> </div> </template> @@ -29,6 +33,9 @@ export default { flex-flow: column nowrap; align-items: flex-start; justify-content: center; + &.no_description { + height: 64px; + } } .text-title { @@ -37,7 +44,7 @@ export default { .page-description { color: $text-secondary; - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue index b91aa08b..bae121c3 100644 --- a/src/components/Global/Popover.vue +++ b/src/components/Global/Popover.vue @@ -1,7 +1,22 @@ <template> <div id="my-container"> + <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer"> + <img src="@/assets/images/clear-icon.svg" /> + <span class="regular-12px red-font">{{ $t(description) }}</span> + </div> + <div + v-else-if="isMicrocode" + :id="id" + ref="button" + variant="primary" + class="pointer" + > + <img src="@/assets/images/icon-reload-red.svg" /> + <span class="regular-12px red-font">{{ $t(description) }}</span> + </div> + <span - v-if="!microcode" + v-else :id="id" ref="button" class="regular-12px underline pointer" @@ -9,13 +24,6 @@ > {{ $t(description) }} </span> - <div v-else :id="id" ref="button" variant="primary" class="pointer"> - <img src="@/assets/images/icon-reload-red.svg" /> - <span class="regular-12px microcode-reload-font">{{ - $t(description) - }}</span> - </div> - <!-- Our popover title and content render container --> <b-popover ref="popover" @@ -92,7 +100,11 @@ export default { type: String, default: '', }, - microcode: { + isMicrocode: { + type: Boolean, + default: false, + }, + isclear: { type: Boolean, default: false, }, @@ -198,9 +210,6 @@ export default { .form-control { width: 341px; height: 52px; - background: rgba(26, 62, 91, 0.05); - border-radius: 8px; - border: none; margin: -25px auto; padding-top: 30px; } @@ -211,7 +220,7 @@ export default { display: flex; justify-content: center; align-items: center; - background: rgba(26, 62, 91, 0.05); + background: $faint-secondary-primary-5; border-radius: 8px; border: none; margin: 0 auto; @@ -241,7 +250,10 @@ export default { } .popover-info { - background-color: #040a0f; + background-color: $on-surface-primary; + // border: 1px solid $text-primary; + // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06); + border-radius: 8px; width: 168px; height: 76px; &.arrow { @@ -249,7 +261,7 @@ export default { } } -.microcode-reload-font { +.red-font { padding-left: 5px; color: $red-brand-primary; } diff --git a/src/components/Global/SilaComponents/DateSwitch.vue b/src/components/Global/SilaComponents/DateSwitch.vue new file mode 100644 index 00000000..0769c734 --- /dev/null +++ b/src/components/Global/SilaComponents/DateSwitch.vue @@ -0,0 +1,123 @@ +<template> + <div class="fans-date-switch"> + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'hour' }" + @click="switchTimeScale('hour')" + >{{ $t('global.date.lastHour') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'day' }" + @click="switchTimeScale('day')" + >{{ $t('global.date.lastDay') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'week' }" + @click="switchTimeScale('week')" + >{{ $t('global.date.lastWeek') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'mounth' }" + @click="switchTimeScale('mounth')" + >{{ $t('global.date.lastMounth') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'year' }" + @click="switchTimeScale('year')" + >{{ $t('global.date.lastYear') }}</span + > + <div class="slider" /> + <div class="date-picker"> + <img src="@/assets/images/calendar-icon.svg" /> + <span class="medium-12px scale-item">{{ + $t('global.date.selectDate') + }}</span> + </div> + <img class="date-clear" src="@/assets/images/clear-icon.svg" /> + </div> +</template> + +<script> +export default { + props: { + timeScale: { + type: String, + default: 'hour', + }, + switchTimeScale: { + type: Function, + required: true, + }, + }, +}; +</script> +<style lang="scss" scoped> +.fans-date-switch { + position: relative; + + height: 48px; + padding: 0 16px 0 32px; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 24px; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + cursor: pointer; +} + +.scale-item:nth-child(1).switch-active ~ .slider { + width: 92px; + left: 31px; +} + +.scale-item:nth-child(2).switch-active ~ .slider { + left: 135px; + width: 105px; +} + +.scale-item:nth-child(3).switch-active ~ .slider { + left: 255px; + width: 112px; +} + +.scale-item:nth-child(4).switch-active ~ .slider { + left: 383px; + width: 107px; +} + +.scale-item:nth-child(5).switch-active ~ .slider { + left: 508px; + width: 90px; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue new file mode 100644 index 00000000..9760f24f --- /dev/null +++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue @@ -0,0 +1,240 @@ +<template> + <page-section class="system-control-section"> + <div class="system-control__table"> + <div class="system-control__table__row"> + <div class="system-control__table__cell"> + <div> + <span class="semi-bold-12px"> + {{ $t('SystemDescription.title.ReloadServer') }} + </span> + </div> + <popover + id="popover-reactive-1" + description="SystemDescription.ReloadOSAndServer" + popup="SystemDescription.ReloadOSAndServer_popup" + /> + <popover + id="popover-reactive-2" + description="SystemDescription.ReloadServer" + popup="SystemDescription.ReloadServer_popup" + /> + <div> + <span + class="regular-12px underline pointer" + @click="redirectConsole" + > + {{ $t('SystemDescription.ConnectToDesktop') }} + </span> + </div> + </div> + + <div class="system-control__table__cell system-control__table__cell__2"> + <div class="reload-progress__container"> + <span class="regular-12px"> + {{ $t('SystemDescription.status') }} + </span> + <span class="semi-bold-12px progress_bar_percent" + >{{ progress1.value }}%</span + > + <b-progress + class="reload-progress" + :value="progress1.value" + ></b-progress> + </div> + <div class="reload-progress__container"> + <span class="regular-12px"> + {{ $t('SystemDescription.status') }} + </span> + <span + v-if="progress2.value === null" + class="semi-bold-12px progress_bar_percent" + >{{ $t('SystemDescription.NotRunning') }}</span + > + <span v-else class="semi-bold-12px progress_bar_percent" + >{{ progress2.value }}%</span + > + <b-progress + class="reload-progress" + :value="progress2.value" + ></b-progress> + </div> + </div> + + <div class="system-control__table__cell"> + <div> + <span class="semi-bold-12px"> + {{ $t('SystemDescription.title.OnOffServer') }} + </span> + </div> + <div> + <popover + id="popover-reactive-3" + description="SystemDescription.OffOsAndServer" + popup="SystemDescription.OffOsAndServer_popup" + button="global.action.off" + /> + <popover + id="popover-reactive-4" + description="SystemDescription.OffServer" + popup="SystemDescription.OffServer_popup" + button="global.action.off" + /> + </div> + </div> + </div> + <div class="system-control__table__row"> + <div class="system-control__table__cell system-control__table__cell__4"> + <div> + <span class="semi-bold-12px"> + {{ $t('SystemDescription.title.setupDatetime') }} + </span> + </div> + <b-form @submit.prevent="onResetSubmit"> + <b-form-radio-group + v-model="timeOption" + class="system-control__radio regular-12px" + > + <b-form-radio value="NTP"> + {{ $t('SystemDescription.GetNtpFromServer') }} + </b-form-radio> + <b-form-radio value="serverDate"> + {{ $t('SystemDescription.UseServerDatettime') }} + </b-form-radio> + </b-form-radio-group> + </b-form> + <ntp-popover + id="popover-reactive-5" + description="SystemDescription.NtpSettings" + /> + </div> + </div> + </div> + </page-section> +</template> + +<script> +import PageSection from '@/components/Global/PageSection'; +import Popover from '@/components/Global/Popover'; +import NtpPopover from '@/components/Global/SilaComponents/NtpPopover'; + +export default { + components: { + PageSection, + NtpPopover, + Popover, + }, + data() { + return { + timeOption: 'resetBios', + picked: '', + options: [ + { text: 'Toggle this custom radio', value: 'first' }, + { text: 'Or toggle this other custom radio', value: 'second' }, + ], + progress1: { + value: 90, + }, + progress2: { + value: null, + }, + }; + }, + methods: { + redirectConsole() { + this.$router.push('/console/kvm'); + }, + }, +}; +</script> +<style lang="scss" scoped> +a { + list-style-type: none; +} + +.pointer { + cursor: pointer; +} + +.system-control-section { + position: relative; + margin: 16px 2rem 2rem !important; + width: 90%; +} + +.system-control__table__row { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + width: 85%; +} + +.system-control__table__cell { + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + row-gap: 6px; +} + +.system-control__table__cell__2 { + margin-top: 37px; + row-gap: 14px; +} + +.reload-progress__container { + display: flex; + flex-flow: row nowrap; + align-items: baseline; + justify-content: space-between; + width: 100%; + column-gap: 4px; +} + +.semi-bold-12px { + display: inline-block; +} + +label { + padding-top: 5px; +} +.system-control__table__cell__4 { + margin-top: 26px; +} + +.custom-radio ::before { + border: 1px solid $red-brand-primary; + background-color: #fff; + border-radius: 100%; +} + +.system-control-section::v-deep + .custom-control-input:checked + ~ .custom-control-label::before { + border: 2px solid $red-brand-primary; + background-color: $red-brand-primary; + box-shadow: 0px 0px 0px 2.5px $white inset; + border-radius: 100%; +} + +.system-control-section::v-deep + .custom-control-input:hover + ~ .custom-control-label::before { + background-color: $red-brand-primary-hover !important; + box-shadow: 0px 0px 0px 2.5px $white inset; + border-color: $red-brand-primary-hover; +} + +.system-control-section::v-deep + .custom-control-input:checked + ~ .custom-control-label::after { + background-image: none !important; + border-radius: 100%; +} + +.system-control-section::v-deep + .custom-control-input:active + ~ .custom-control-label::before { + background-color: $red-brand-primary-active !important; + box-shadow: 0px 0px 0px 2.5px $white inset; + border-color: $red-brand-primary-active; +} +</style> diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue new file mode 100644 index 00000000..918b1220 --- /dev/null +++ b/src/components/Global/SilaComponents/NtpPopover.vue @@ -0,0 +1,136 @@ +<template> + <div id="my-container"> + <span :id="id" class="regular-12px underline" variant="primary"> + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + :target="id" + placement="auto" + container="my-container" + :show.sync="popoverShow" + @show="onShow" + > + <template #title> + <div class="popup-title"> + <span class="bold-16px__caps">{{ $t(description) }}</span> + <b-button class="popup-title__button_close" @click="onClose"> + <img src="@/assets/images/popups/x-icon.svg" /> + </b-button> + </div> + </template> + + <div class="popup-body"> + <div class="popup-body__input-container"> + <span class="regular-12px tretiatry" + >Введите адрес сервера (IP, FQDM)</span + > + <b-form-input + id="popover-input-1" + v-model="input1" + class="medium-12px" + ></b-form-input> + </div> + <b-button class="popover-button" variant="primary" @click="onClose"> + {{ $t('global.action.save') }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + button: { + type: String, + default: 'Reload', + }, + }, + data() { + return { + input1: '', + popoverShow: false, + }; + }, + methods: { + onShow() { + this.$root.$emit('bv::hide::popover'); + }, + onClose() { + this.popoverShow = false; + }, + }, +}; +</script> +<style lang="scss" scoped> +.form-group { + margin: 0; +} + +.popup-title { + display: flex; + flex-flow: row nowrap; + align-items: baseline; +} + +.popup-title__button_close { + margin: 0 28px 0 auto; + background: none; + border: none; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + box-shadow: none !important; + border-radius: 8px; + } + &:focus-visible { + border: none !important; + border-radius: 8px; + } + &:focus { + box-shadow: none; + border-radius: 8px; + } +} + +.popup-body { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; +} + +.form-control { + width: 341px; + height: 52px; + margin: -25px auto; + padding-top: 30px; +} + +.popover-button { + width: 341px; + height: 40px; + margin: 0 auto 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.tretiatry { + margin-left: 12px; +} + +.underline { + cursor: pointer; +} +</style> diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTable.vue b/src/components/Global/SilaComponents/Tables/AccessoryTable.vue new file mode 100644 index 00000000..2b25d880 --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTable.vue @@ -0,0 +1,101 @@ +<template> + <section class="bootstrap-table__section"> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../colors'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue new file mode 100644 index 00000000..120a03a3 --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue @@ -0,0 +1,116 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../colors'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} + +.SMART-table-col-first { + width: 34%; +} + +.SMART-table-col-second { + width: 32%; +} + +.SMART-table-col-last { + width: 39%; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue b/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue new file mode 100644 index 00000000..6f696b82 --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTablePower.vue @@ -0,0 +1,105 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + <img src="@/assets/images/power-error-icon.svg" /> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../../../../views/Processors/DynamicInfo/helpers'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue b/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue new file mode 100644 index 00000000..4974750a --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue @@ -0,0 +1,104 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../../../../views/MemoryModules/DynamicInfo/helpers'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} +</style> + +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/Global/SilaComponents/colors.js b/src/components/Global/SilaComponents/colors.js new file mode 100644 index 00000000..de832de2 --- /dev/null +++ b/src/components/Global/SilaComponents/colors.js @@ -0,0 +1,8 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 5235feae..3ac8e2ce 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -7,7 +7,7 @@ </p> <div class="toolbar-actions d-flex"> <slot name="toolbar-buttons"></slot> - <b-button + <!-- <b-button v-for="(action, index) in actions" :key="index" :data-test-id="`table-button-${action.value}Selected`" @@ -16,14 +16,14 @@ @click="$emit('batch-action', action.value)" > {{ action.label }} - </b-button> - <b-button + </b-button> --> + <!-- <b-button variant="secondary" class="d-block" @click="$emit('clear-selected')" > {{ $t('global.action.cancel') }} - </b-button> + </b-button> --> </div> </div> </div> @@ -69,17 +69,19 @@ export default { </script> <style lang="scss" scoped> -$toolbar-height: 46px; +$toolbar-height: 64px; .toolbar-container { width: 100%; - position: relative; + position: fixed; + bottom: 0; + right: 0; z-index: $zindex-dropdown + 1; } .toolbar-content { height: $toolbar-height; - background-color: theme-color('primary'); + background-color: $white; color: $white; position: absolute; left: 0; @@ -87,7 +89,9 @@ $toolbar-height: 46px; top: -$toolbar-height; display: flex; flex-direction: row; + align-items: center; justify-content: space-between; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); } .toolbar-selected { diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue index dd99f0d3..4ab6b094 100644 --- a/src/components/SubHeader/SubHeader.vue +++ b/src/components/SubHeader/SubHeader.vue @@ -6,9 +6,18 @@ <b-navbar-nav> <b-nav-item to="/" - exact data-test-id="appHeader-container-health" class="subheader-button" + :class="{ + 'active-route-top': ![ + 'profile-settings', + 'information-and-faq', + 'support', + 'console-settings', + 'console', + 'security-and-access', + ].includes($route.path.split('/')[1]), + }" > {{ $t('subHeader.serverInfo') }} </b-nav-item> @@ -18,9 +27,10 @@ data-test-id="appHeader-container-health" class="subheader-button" :class="{ - 'active-route-top': ''.includes( - $route.path.split('/console-settings')[1] - ), + '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]), }" > {{ $t('subHeader.console') }} @@ -101,12 +111,6 @@ export default { margin-left: 10px; } - .active-route-top { - background-color: $white; - color: #1a3e5b !important; - border-radius: 4px; - } - .navbar-text, .nav-link, .btn-link { @@ -150,9 +154,6 @@ export default { .navbar-nav { align-items: baseline; padding-left: 24px; - .nav-link { - color: white; - } .nav-tags { @include media-breakpoint-down(xs) { @include sr-only; @@ -164,11 +165,14 @@ export default { } } } +} +#sub-header .nav-item.active-route-top > a { + background-color: $white; + color: #1a3e5b; + border-radius: 4px; +} - .router-link-active { - color: #1a3e5b !important; - background-color: white; - padding: 0.68rem 1rem !important; - } +.navbar-dark .navbar-nav .nav-link { + color: rgba(255, 255, 255, 1); } </style> |