diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-23 16:46:24 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-23 16:46:24 +0300 |
commit | 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 (patch) | |
tree | 3f11b86aa27b02fa6b33142f53e5b2c25b33f85f /src/components | |
parent | 8086773d610f64ab71a11bd13cc896111b710fc8 (diff) | |
download | webui-vue-5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1.tar.xz |
Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles.
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 1 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 16 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigationMixin.js | 231 | ||||
-rw-r--r-- | src/components/AppNavigation/KmvNavigationMixin.js | 25 | ||||
-rw-r--r-- | src/components/Global/PageContainer.vue | 8 | ||||
-rw-r--r-- | src/components/Global/PageTitle.vue | 38 | ||||
-rw-r--r-- | src/components/Global/Popover.vue | 256 | ||||
-rw-r--r-- | src/components/Global/PopoverInfo.vue | 40 | ||||
-rw-r--r-- | src/components/SubHeader/SubHeader.vue | 4 |
9 files changed, 546 insertions, 73 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index c8fbbf59..eca1e4c8 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -183,7 +183,6 @@ </b-button> </b-navbar> </header> - </div> </template> diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 2aa61984..dc7a58d0 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -114,8 +114,9 @@ export default { computed: { sideBar() { if ( - this.$route.path === '/operations/kvm' || - this.$route.path === '/operations/serial-over-lan' + this.$route.path === '/console-settings' || + this.$route.path === '/console/serial-over-lan' || + this.$route.path === '/console/kvm' ) { return this.kvmNavigationItems; } else { @@ -159,6 +160,7 @@ svg { align-items: center; padding-left: $spacer * 4; outline: none; + box-sizing: border-box; height: 68px; border-top: 1px solid rgba(26, 62, 91, 0.2); &:not(.nav-link--current) { @@ -205,12 +207,6 @@ svg { border-top: 1px solid rgba(26, 62, 91, 0.2); font-weight: 600; line-height: 20px; - &.collapsed { - .icon-expand { - transform: rotate(180deg); - transition: 0.3s linear; - } - } &.not-collapsed { font-weight: 600; line-height: 20px; @@ -218,9 +214,7 @@ svg { } .icon-expand { - float: right; - transition: 0.3s linear; - margin-top: $spacer / 4; + margin: 0; } .btn-link, diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js index 6ba9ffe3..ad5f58b5 100644 --- a/src/components/AppNavigation/AppNavigationMixin.js +++ b/src/components/AppNavigation/AppNavigationMixin.js @@ -8,9 +8,220 @@ export const AppNavigationMixin = { return { navigationItems: [ { - id: 'overview', - label: this.$t('appNavigation.overview'), + id: 'system', + label: this.$t('appNavigation.systemInformaion'), + icon: 'iconChevronUp', + children: [ + { + id: 'info', + label: this.$t('appNavigation.overviewInfo'), + route: '/', + }, + { + id: 'network', + label: this.$t('appNavigation.networkParametrs'), + route: '/network', + }, + { + id: 'post-code-logs', + label: this.$t('appNavigation.eventLogs'), + route: '/logs/post-code-logs', + }, + { + id: 'server-parametrs', + label: this.$t('appNavigation.serverParam'), + route: '/server-parametrs', + }, + ], + }, + { + id: 'bmc', + label: this.$t('appNavigation.bmc'), + icon: 'iconChevronUp', + children: [ + { + id: 'configuration', + label: this.$t('appNavigation.config'), + route: '/bmc-configuration', + }, + { + id: 'post-code-logs', + label: this.$t('appNavigation.deviceFirmware'), + route: '/logs/post-code-logs', + }, + { + id: 'post-code-logs', + label: this.$t('appNavigation.broadcast'), + 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'), + 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: 'processors', + label: this.$t('appNavigation.processors'), + 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: '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: 'fans', + label: this.$t('appNavigation.fans'), + icon: 'iconChevronUp', + children: [ + { + id: 'overview-info', + label: this.$t('appNavigation.statisticInformation'), + route: '/logs/event-logs', + }, + { + id: 'post-code-logs', + 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', + }, + ], + }, + { + id: 'motherboard', + label: this.$t('appNavigation.motherboard'), + 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: 'pci-devises', + label: this.$t('appNavigation.pciDevises'), + route: '/', + }, + //old tabs + { + id: 'overview', + label: 'СТАРЫЕ ВКЛАДКИ', + route: '/Info', icon: 'iconOverview', }, { @@ -58,11 +269,6 @@ export const AppNavigationMixin = { route: '/operations/factory-reset', }, { - id: 'kvm', - label: this.$t('appNavigation.kvm'), - route: '/operations/kvm', - }, - { id: 'key-clear', label: this.$t('appNavigation.keyClear'), route: '/operations/key-clear', @@ -78,11 +284,6 @@ export const AppNavigationMixin = { route: '/operations/reboot-bmc', }, { - id: 'serial-over-lan', - label: this.$t('appNavigation.serialOverLan'), - route: '/operations/serial-over-lan', - }, - { id: 'server-power-operations', label: this.$t('appNavigation.serverPowerOperations'), route: '/operations/server-power-operations', @@ -172,17 +373,17 @@ export const KvmNavigationMixin = { { id: 'console-settings', label: this.$t('kvmNavigation.ConsoleSettings'), - route: '/operations/kvm', + route: '/console-settings', }, { id: 'serial-over-lan', label: this.$t('kvmNavigation.serialOverLan'), - route: '/operations/serial-over-lan', + route: '/console/serial-over-lan', }, { id: 'kvm', label: this.$t('kvmNavigation.kvm'), - route: '/operations/kvm', + route: '/console/kvm', }, ], }; diff --git a/src/components/AppNavigation/KmvNavigationMixin.js b/src/components/AppNavigation/KmvNavigationMixin.js deleted file mode 100644 index a15b3d38..00000000 --- a/src/components/AppNavigation/KmvNavigationMixin.js +++ /dev/null @@ -1,25 +0,0 @@ -const KvmNavigationMixin = { - data() { - return { - navigationItems: [ - { - id: 'console-settings', - label: this.$t('appNavigation.ConsoleSettings'), - route: '/operations/kvm', - }, - { - id: 'serial-over-lan', - label: this.$t('appNavigation.serialOverLan'), - route: '/operations/serial-over-lan', - }, - { - id: 'kvm', - label: this.$t('appNavigation.kvm'), - route: '/operations/kvm', - }, - ], - }; - }, -}; - -export default KvmNavigationMixin; diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue index ab4adb63..71df8fae 100644 --- a/src/components/Global/PageContainer.vue +++ b/src/components/Global/PageContainer.vue @@ -20,18 +20,10 @@ export default { main { width: 100%; height: 100%; - padding-top: $spacer * 1.5; - padding-bottom: $spacer * 3; - padding-left: $spacer; - padding-right: $spacer; &:focus-visible { box-shadow: inset 0 0 0 2px theme-color('primary'); outline: none; } - - @include media-breakpoint-up($responsive-layout-bp) { - padding-left: $spacer * 2; - } } </style> diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue index 45c75edb..12dde551 100644 --- a/src/components/Global/PageTitle.vue +++ b/src/components/Global/PageTitle.vue @@ -1,22 +1,17 @@ <template> <div class="page-title"> - <h1>{{ title }}</h1> - <p v-if="description">{{ description }}</p> + <h1 class="bold-24px text-title">{{ title }}</h1> + <p v-if="description" class="page-description">{{ description }}</p> </div> </template> <script> export default { name: 'PageTitle', - props: { - description: { - type: String, - default: '', - }, - }, data() { return { title: this.$route.meta.title, + description: this.$route.meta.description, }; }, }; @@ -24,9 +19,30 @@ export default { <style lang="scss" scoped> .page-title { - margin-bottom: $spacer * 2; + width: 100%; + height: 72px; + border-bottom: 1px solid $faint-secondary-primary-10; + background-color: $white; + z-index: 1001; + + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + justify-content: center; +} + +.text-title { + margin-left: 2rem; } -p { - max-width: 72ch; + +.page-description { + color: $text-secondary; + font-family: Inter; + font-size: 12px; + font-weight: 400; + line-height: 16px; + + margin: 4px 0 0 2rem; + padding: 0; } </style> diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue new file mode 100644 index 00000000..b91aa08b --- /dev/null +++ b/src/components/Global/Popover.vue @@ -0,0 +1,256 @@ +<template> + <div id="my-container"> + <span + v-if="!microcode" + :id="id" + ref="button" + class="regular-12px underline pointer" + variant="primary" + > + {{ $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" + :target="id" + triggers="click" + :show.sync="popoverShow" + placement="auto" + container="my-container" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="bold-16px__caps">{{ $t(popup) }}</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> + <label class="light-12px" for="username">{{ 'HEX для ввода' }}</label> + <img + id="popover-target-1" + src="@/assets/images/popups/red-sign.svg" + /> + <popover-info + id="popover-target-1" + description="Введите HEX в поле для подтверждения действия" + /> + <div class="hex-form"> + <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span> + </div> + </div> + <div class="popup-body__input-container"> + <span class="regular-12px tretiatry">Поле для ввода</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(button) }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +import PopoverInfo from './PopoverInfo'; + +export default { + components: { + PopoverInfo, + }, + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + button: { + type: String, + default: 'global.action.reload', + }, + popup: { + type: String, + default: '', + }, + microcode: { + type: Boolean, + default: false, + }, + }, + data() { + return { + input1: '', + input1state: null, + input1Return: '', + popoverShow: false, + }; + }, + watch: { + input1(val) { + if (val) { + this.input1state = true; + } + }, + }, + methods: { + onClose() { + this.popoverShow = false; + }, + onOk() { + if (!this.input1) { + this.input1state = false; + } + if (this.input1) { + this.onClose(); + // Return our popover form results + this.input1Return = this.input1; + } + }, + onShow() { + this.$root.$emit('bv::hide::popover'); + // This is called just before the popover is shown + // Reset our popover form variables + this.input1 = ''; + this.input1state = null; + this.input1Return = ''; + }, + onShown() { + // Called just after the popover has been shown + // Transfer focus to the first input + this.focusRef(this.$refs.input1); + }, + onHidden() { + // Called just after the popover has finished hiding + // Bring focus back to the button + this.focusRef(this.$refs.button); + }, + focusRef(ref) { + // Some references may be a component, functional component, or plain element + // This handles that check before focusing, assuming a `focus()` method exists + // We do this in a double `$nextTick()` to ensure components have + // updated & popover positioned first + this.$nextTick(() => { + this.$nextTick(() => { + (ref.$el || ref).focus(); + }); + }); + }, + }, +}; +</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; + background: rgba(26, 62, 91, 0.05); + border-radius: 8px; + border: none; + margin: -25px auto; + padding-top: 30px; +} + +.hex-form { + height: 32px; + width: 341px; + display: flex; + justify-content: center; + align-items: center; + background: rgba(26, 62, 91, 0.05); + border-radius: 8px; + border: none; + margin: 0 auto; +} + +.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; +} + +.light-12px { + margin: 0px 5px 0px 15px; +} + +.pointer { + cursor: pointer; +} + +.popover-info { + background-color: #040a0f; + width: 168px; + height: 76px; + &.arrow { + display: block; + } +} + +.microcode-reload-font { + padding-left: 5px; + color: $red-brand-primary; +} +</style> diff --git a/src/components/Global/PopoverInfo.vue b/src/components/Global/PopoverInfo.vue new file mode 100644 index 00000000..4b1b0b0d --- /dev/null +++ b/src/components/Global/PopoverInfo.vue @@ -0,0 +1,40 @@ +<template> + <b-popover :target="id" triggers="hover" placement="top"> + <span class="regular-12px">{{ description }}</span> + </b-popover> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + }, +}; +</script> +<style lang="scss" scoped> +.popover::v-deep { + background-color: #040a0f; + width: 168px; + height: 76px; +} + +.popover::v-deep .arrow { + visibility: visible; +} + +.popover::v-deep .arrow::after { + border-top-color: #040a0f; + border-bottom-color: #040a0f; +} + +.regular-12px { + color: $white; +} +</style> diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue index bbbdc6a8..dd99f0d3 100644 --- a/src/components/SubHeader/SubHeader.vue +++ b/src/components/SubHeader/SubHeader.vue @@ -14,12 +14,12 @@ </b-nav-item> <b-nav-item - to="/operations/kvm" + to="/console-settings" data-test-id="appHeader-container-health" class="subheader-button" :class="{ 'active-route-top': ''.includes( - $route.path.split('operations/kvm')[1] + $route.path.split('/console-settings')[1] ), }" > |