diff options
-rw-r--r-- | src/assets/styles/bmc/_sila/_tables.scss | 38 | ||||
-rw-r--r-- | src/components/_sila/Global/Popover.vue | 287 | ||||
-rw-r--r-- | src/components/_sila/Global/PopoverInfo.vue | 40 | ||||
-rw-r--r-- | src/env/assets/styles/_sila.scss | 13 | ||||
-rw-r--r-- | src/env/components/AppNavigation/sila.js | 12 | ||||
-rw-r--r-- | src/env/router/sila.js | 9 | ||||
-rw-r--r-- | src/locales/ru-RU.json | 32 | ||||
-rw-r--r-- | src/views/_sila/BMC/Configuration/Configuration.vue | 40 | ||||
-rw-r--r-- | src/views/_sila/BMC/Configuration/ConfigurationControl.vue | 74 | ||||
-rw-r--r-- | src/views/_sila/BMC/Configuration/ConfigurationTable.vue | 96 | ||||
-rw-r--r-- | src/views/_sila/BMC/Configuration/SettingsImportPopup.vue | 291 | ||||
-rw-r--r-- | src/views/_sila/BMC/Configuration/index.js | 2 |
12 files changed, 903 insertions, 31 deletions
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss index d73bfdde..ff168b13 100644 --- a/src/assets/styles/bmc/_sila/_tables.scss +++ b/src/assets/styles/bmc/_sila/_tables.scss @@ -1,18 +1,15 @@ .table { position: relative; z-index: $zindex-dropdown; + border: 1px solid $gray-30; - td { - border-top: 1px solid $gray-10; - border-right: 1px solid $gray-10; - border-bottom-width: 0px; - &:first-of-type { - border-right: 1px solid $gray-10; - } - &:last-of-type { - border-left: 1px solid $gray-10; - border-right-width: 0px; + thead { + th { + border: none; } + } + + td { vertical-align: middle; font-size: 0.875rem; // Table action buttons @@ -30,16 +27,6 @@ .thead-light th { background-color: $surface-secondary; vertical-align: middle; - border-top-width: 0px; - border-bottom: 1px solid $gray-10; - border-right: 1px solid $gray-10; - &:first-of-type { - border-right: 1px solid $gray-10; - } - &:last-of-type { - border-left: 1px solid $gray-10; - border-right-width: 0px; - } text-transform: uppercase; color: $text-primary; &:focus { @@ -109,7 +96,7 @@ box-shadow: inset 0 0 0 2px theme-color('primary') !important; } &:hover { - background-color: theme-color-dark('light'); + background-color: $gray-5-hover; } } } @@ -118,6 +105,10 @@ border-top: none; } +.table-responsive, .table-responsive-md { + margin-top: 0.5rem; +} + // Table stacked style for small screen only @include media-breakpoint-down(xs) { .b-table-stacked-sm { @@ -126,7 +117,7 @@ tr { &:not(:first-child) > td[aria-colindex='1'] { - border-top: 1px solid $gray-10; + // border-top: 1px solid $gray-10; padding-top: 0.625rem; } @@ -183,6 +174,3 @@ } } -.table-responsive, .table-responsive-md { - margin-top: 0.5rem; -} diff --git a/src/components/_sila/Global/Popover.vue b/src/components/_sila/Global/Popover.vue new file mode 100644 index 00000000..95e9fb24 --- /dev/null +++ b/src/components/_sila/Global/Popover.vue @@ -0,0 +1,287 @@ +<template> + <div id="popover-container"> + <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer"> + <img src="@/assets/images/icon-clear-red.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> + + <div + v-else-if="isMicrocodeDrivers" + :id="id" + ref="button" + variant="primary" + class="pointer" + > + <img src="@/assets/images/icon-reload-red.svg" /> + <span class="semi-bold-16px red-font">{{ $t(description) }}</span> + </div> + + <span + v-else + :id="id" + ref="button" + class="regular-12px underline" + variant="primary" + > + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + ref="popover" + :target="id" + triggers="click" + :show.sync="popoverShow" + placement="auto" + container="popover-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" style="margin-right: 5px">{{ + 'HEX для ввода' + }}</label> + <img id="popover-tooltip" src="@/assets/images/popups/red-sign.svg" /> + <popover-info + id="popover-tooltip" + description="Введите HEX в поле для подтверждения действия" + /> + <div class="hex-label"> + <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span> + </div> + </div> + <div class="popup-body__input-container"> + <span style="margin-left: 12px" class="regular-12px tretiatry" + >Поле для ввода</span + > + <b-form-input + id="popover-input-1" + v-model="input" + class="medium-12px" + ></b-form-input> + </div> + <b-button + class="popup-button" + variant="primary" + :disabled="!input" + @click="onOk" + > + {{ $t(button) }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +import PopoverInfo from './PopoverInfo'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +export default { + components: { + PopoverInfo, + }, + mixins: [BVToastMixin], + props: { + id: { + type: String, + default: '', + }, + description: { + type: String, + default: '', + }, + popup: { + type: String, + default: '', + }, + placement: { + type: String, + default: 'auto', + }, + button: { + type: String, + default: 'global.action.reload', + }, + isMicrocode: { + type: Boolean, + default: false, + }, + isMicrocodeDrivers: { + type: Boolean, + default: false, + }, + isclear: { + type: Boolean, + default: false, + }, + action: { + type: Function, + default: null, + }, + }, + data() { + return { + input: '', + popoverShow: false, + }; + }, + methods: { + onClose() { + this.popoverShow = false; + }, + onOk() { + if (this.input === '9c1735b3f819142393146a5d03314f0a') { + this.action(); + this.onClose(); + } else { + this.warningToast( + this.$t('Неправильный HEX в поле для подтверждения действия'), + { + title: this.$t('Неправильный НЕХ'), + } + ); + } + }, + onShow() { + // This is called just before the popover is shown + // Reset our popover form variables + this.$root.$emit('bv::hide::popover'); + this.input = ''; + }, + 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; + align-items: center; +} + +.form-control { + width: 341px; + height: 52px; + margin: -25px auto; + padding-top: 30px; +} + +.hex-label { + height: 32px; + width: 341px; + display: flex; + justify-content: center; + align-items: center; + background: $faint-secondary-primary-5; + border-radius: 8px; + border: none; + margin: 0 auto; +} + +.popup-button { + width: 341px; + height: 40px; + margin-bottom: 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.tretiatry { + margin-left: 12px; +} + +.light-12px { + margin: 0px 5px 0px 15px; +} + +.popover-info { + 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 { + display: block; + } +} + +.red-font { + padding-left: 5px; + color: $red-brand-primary; +} +</style> diff --git a/src/components/_sila/Global/PopoverInfo.vue b/src/components/_sila/Global/PopoverInfo.vue new file mode 100644 index 00000000..4b1b0b0d --- /dev/null +++ b/src/components/_sila/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/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss index 884d62b5..ac569ee7 100644 --- a/src/env/assets/styles/_sila.scss +++ b/src/env/assets/styles/_sila.scss @@ -67,12 +67,13 @@ $red-click: #C71414; $red-shadow: #e1171780; $red-light-background: #e117170d; -$gray-2: #fbfbfc; -$gray-5: #1a3e5b0d; -$gray-5-hover: #1427351a; -$gray-10: #1a3e5b1a; -$gray-20: #1a3e5b33; -$red-40:#e1171766; +$gray-2: rgb(251, 251, 252); +$gray-5: rgba(26, 62, 91, 0.05); +$gray-5-hover: rgba(20, 39, 53, 0.1); +$gray-10: rgba(26, 62, 91, 0.1); +$gray-20: rgba(26, 62, 92, 0.2); +$gray-30: rgba(26, 62, 91, 0.3); +$red-40:rgba(225, 23, 23, 0.4); $surface-secondary: #F3F4F5; $on-surface-secondary: #040a0f99; diff --git a/src/env/components/AppNavigation/sila.js b/src/env/components/AppNavigation/sila.js index 72008186..a089cf55 100644 --- a/src/env/components/AppNavigation/sila.js +++ b/src/env/components/AppNavigation/sila.js @@ -44,6 +44,18 @@ const AppNavigationMixin = { ], }, { + id: 'bmc', + label: this.$t('appNavigation.bmc'), + icon: 'iconLogs', + children: [ + { + id: 'bmc-configuration', + label: this.$t('appNavigation.bmcTitle'), + route: '/bmc/configuration', + }, + ], + }, + { id: 'logs', label: this.$t('appNavigation.logs'), icon: 'iconLogs', diff --git a/src/env/router/sila.js b/src/env/router/sila.js index a622a436..8dc79156 100644 --- a/src/env/router/sila.js +++ b/src/env/router/sila.js @@ -29,6 +29,7 @@ import KeyClear from '@/views/_sila/Operations/KeyClear'; import Certificates from '@/views/_sila/SecurityAndAccess/Certificates'; import VirtualMedia from '@/views/_sila/Operations/VirtualMedia'; import Power from '@/views/_sila/ResourceManagement/Power'; +import Configuration from '@/views/_sila/BMC/Configuration'; import i18n from '@/i18n'; const routes = [ @@ -128,6 +129,14 @@ const routes = [ }, }, { + path: '/bmc/configuration', + name: 'bmc-configuration', + component: Configuration, + meta: { + title: i18n.t('appNavigation.bmc'), + }, + }, + { path: '/logs/event-logs', name: 'event-logs', component: EventLogs, diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index 62eb5359..0afe4e66 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -104,6 +104,8 @@ "settings": "Настройки", "operations": "Управление", "dateTime": "@:appPageTitle.dateTime", + "bmc": "@:appPageTitle.bmc", + "bmcTitle":"@:appPageTitle.bmcTitle", "dumps": "@:appPageTitle.dumps", "eventLogs": "@:appPageTitle.eventLogs", "factoryReset": "@:appPageTitle.factoryReset", @@ -136,6 +138,8 @@ "dateTime": "Дата и время", "dumps": "Дампы", "eventLogs": "Журнал событий", + "bmc" : "BMC", + "bmcTitle": "Конфигурация", "factoryReset": "Сброс до заводских настроек", "firmware": "Встроенное ПО", "inventory": "Перечень оборудования и LED", @@ -210,6 +214,34 @@ "successSaveDateTime": "Настройки даты и времени сохранены." } }, + "BMC": { + "BmcTitle": "Конфигурация", + "BmcTable": "BMC", + "ControlTitle": "Управление", + "Bios": "BIOS", + "BiosV": "Версия BIOS:", + "ControlBmc": "Управление ВМС", + "microcode": "Микрокод", + "ReloadBmc": "Перезагрузить ВМС", + "ReloadBmc_popup": "Перезагрузка BMC", + "ExportImport": "Экспорт / Импорт настроек", + "ExportImport_button": "Экспортировать настроки", + "Parametrs": "Параметры сети", + "ReloadMicrocodeBios": "Обновить микрокод BIOS", + "ReloadicrocodeBmc": "Обновить микрокод BMC", + "testMessage": "Тестовое сообщение", + "smnp": "Настройки SNMP", + "smnpWarning": "Предупреждения SNMP", + "smtpWarning": "Предупреждения SMTP", + "system": "Расположение системы", + "contacts": "Контакты системы", + "community": "Community String", + "smnpIp": "IP адрес SNMP", + "smnpPort": "SNMP-порт", + "syslogSettings": "Настройки Syslog", + "syslogPort": "Syslog - порт", + "syslogIP": "IP-адрес syslog сервера" + }, "pageDumps": { "dumpsAvailableOnBmc": "Дампы доступные на BMC", "initiateDump": "Создать дамп", diff --git a/src/views/_sila/BMC/Configuration/Configuration.vue b/src/views/_sila/BMC/Configuration/Configuration.vue new file mode 100644 index 00000000..f69f0d66 --- /dev/null +++ b/src/views/_sila/BMC/Configuration/Configuration.vue @@ -0,0 +1,40 @@ +<template> + <b-container fluid="xl"> + <page-title /> + <configuration-table /> + <page-section :section-title="$t('BMC.Bios')"> + <span class="medium-12px">V 3.2.10.0</span> + </page-section> + <configuration-control /> + </b-container> +</template> + +<script> +import PageTitle from '@/components/_sila/Global/PageTitle'; +import ConfigurationTable from './ConfigurationTable'; +import ConfigurationControl from './ConfigurationControl'; +import PageSection from '@/components/_sila/Global/PageSection'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; + +export default { + components: { + PageTitle, + ConfigurationControl, + ConfigurationTable, + PageSection, + }, + mixins: [LoadingBarMixin], + data() { + return { + text: '', + }; + }, + created() { + this.startLoader(); + const bmcManagerTablePromise = new Promise((resolve) => { + this.$root.$on('hardware-status-bmc-manager-complete', () => resolve()); + }); + Promise.all([bmcManagerTablePromise]).finally(() => this.endLoader()); + }, +}; +</script> diff --git a/src/views/_sila/BMC/Configuration/ConfigurationControl.vue b/src/views/_sila/BMC/Configuration/ConfigurationControl.vue new file mode 100644 index 00000000..d0b38397 --- /dev/null +++ b/src/views/_sila/BMC/Configuration/ConfigurationControl.vue @@ -0,0 +1,74 @@ +<template> + <page-section :section-title="$t('BMC.ControlTitle')"> + <popover + id="popover-reactive-1" + description="BMC.ReloadBmc" + popup="BMC.ReloadBmc_popup" + button="BMC.ReloadBmc" + :action="rebootBmc" + /> + <!-- <settings-import-popup + id="popover-reactive-2" + description="BMC.ExportImport" + popup="BMC.ExportImport" + button="BMC.ExportImport_button" + /> --> + <b-link @click="redirectNetworkParametrs">{{ $t('BMC.Parametrs') }}</b-link> + + <div class="bmc-control__table__cell"> + <!-- <div> + <span class="semi-bold-12px">{{ $t('BMC.microcode') }}</span> + </div> --> + <b-button variant="unstyled" class="p-0" @click="redirectUpdateBmc"> + <!-- <img src="@/assets/images/icon-reload-red.svg" /> --> + <b-link>{{ $t('BMC.ReloadMicrocodeBios') }}</b-link> + </b-button> + </div> + </page-section> +</template> + +<script> +import SettingsImportPopup from './SettingsImportPopup'; +import PageSection from '@/components/_sila/Global/PageSection'; +// import Popover from '@/components/_sila/Global/Popover'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; + +export default { + components: { + PageSection, + // Popover, + SettingsImportPopup, + }, + mixins: [BVToastMixin], + 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: { + redirectNetworkParametrs() { + this.$router.push('/network-parametrs'); + }, + redirectUpdateBmc() { + this.$router.push('/operations/firmware'); + }, + rebootBmc() { + this.$store + .dispatch('controls/rebootBmc') + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + }, + }, +}; +</script> diff --git a/src/views/_sila/BMC/Configuration/ConfigurationTable.vue b/src/views/_sila/BMC/Configuration/ConfigurationTable.vue new file mode 100644 index 00000000..395e3d80 --- /dev/null +++ b/src/views/_sila/BMC/Configuration/ConfigurationTable.vue @@ -0,0 +1,96 @@ +<template> + <page-section> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :busy="isBusy" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + </page-section> +</template> + +<script> +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import PageSection from '@/components/_sila/Global/PageSection'; + +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; + +export default { + components: { PageSection }, + mixins: [BVToastMixin, TableRowExpandMixin], + data() { + return { + isBusy: true, + isAddersСolon: false, + fields: [ + { + key: 'param', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + bootstrap-rounded-table__column-first___bmc_conf`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + expandRowLabel: expandRowLabel, + items: null, + }; + }, + computed: { + bmc() { + return this.$store.getters['bmc/bmc']; + }, + }, + watch: { + bmc() { + this.items = [ + { + param: 'Время сервера', + value: this.bmc.dateTime, + }, + { + param: 'uuid', + value: this.bmc.uuid, + }, + { + param: 'Версия прошивки', + value: this.bmc.firmwareVersion, + }, + { + param: 'Модель', + value: this.bmc.model, + }, + { + param: 'Описание', + value: this.bmc.description, + }, + { + param: 'Максимальное количество сессий', + value: this.bmc.graphicalConsoleMaxSessions, + }, + ]; + }, + }, + created() { + this.$store.dispatch('bmc/getBmcInfo').finally(() => { + this.$root.$emit('hardware-status-bmc-manager-complete'); + this.isBusy = false; + }); + }, +}; +</script> diff --git a/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue b/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue new file mode 100644 index 00000000..d0524e27 --- /dev/null +++ b/src/views/_sila/BMC/Configuration/SettingsImportPopup.vue @@ -0,0 +1,291 @@ +<template> + <div id="my-container"> + <span + :id="id" + ref="button" + class="regular-12px underline" + variant="primary" + > + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + id="export-popup" + 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="semi-bold-20px">{{ $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-switch"> + <span + class="medium-16px popup-item" + :class="{ 'switch-active': isExport }" + @click="switchExport" + >{{ $t('global.action.export') }}</span + > + <span + class="medium-16px popup-item" + :class="{ 'switch-active': !isExport }" + @click="switchImport" + >{{ $t('global.action.import') }}</span + > + <div class="slider" /> + </div> + <div v-if="isExport" class="popup-body"> + <div class="ip-container"> + <span class="regular-16px" + >Оставить IP адрес из настроек сервера</span + > + <b-form-checkbox switch> </b-form-checkbox> + </div> + <b-button class="popover-button" variant="primary" @click="onClose"> + {{ $t(button) }} + </b-button> + </div> + <div v-else class="settings-import_container"> + <b-form-file + id="settings-import__file-input" + placeholder="Нажмите на область или перетащите в нее файл с настройками" + ></b-form-file> + </div> + </b-popover> + </div> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + button: { + type: String, + default: 'global.action.reload', + }, + popup: { + type: String, + default: '', + }, + }, + data() { + return { + input1: '', + input1state: null, + input1Return: '', + popoverShow: false, + isExport: true, + }; + }, + 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(); + }); + }); + }, + switchExport() { + this.isExport = true; + }, + switchImport() { + this.isExport = false; + }, + }, +}; +</script> +<style lang="scss"> +.custom-file { + width: 432px; + height: 108px; +} + +#settings-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: 108px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + white-space: normal; + padding: 0 65px; +} + +#settings-import__file-input ~ .custom-file-label::after { + display: none; +} +</style> +<style lang="scss" scoped> +#export-popup { + flex-direction: column; + align-items: flex-start; + background: #ffffff; + box-shadow: 0px -4px 12px rgb(0 0 0 / 5%); + border-radius: 16px !important; + border-radius: 4px; + max-width: 480px; + width: 480px; + height: auto; +} + +.form-group { + margin: 0; +} + +.popup-title { + display: flex; + align-items: baseline; + width: 465px; +} + +.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; +} + +.medium-16px { + display: inline-block; + height: 45px; + margin: 10px; + cursor: pointer; +} + +.popup-switch { + position: relative; + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid #f3f4f5; +} + +.switch-active { + // color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + width: 130px; + height: 0px; + // border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 14px; + left: 10px; +} + +.popup-item:nth-child(1).switch-active ~ .slider { + left: 10px; +} + +.popup-item:nth-child(2).switch-active ~ .slider { + left: 160px; +} + +.ip-container { + display: flex; + width: 461px; + height: 75px; + padding: 30px 15px 25px 15px; +} + +.popover-button { + width: 432px; + height: 52px; + margin: 0 auto 10px; +} + +.settings-import_container { + width: 478px; + height: 160px; + background-color: $surface-secondary; + margin: -15px -15px -8px -12px; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} +</style> diff --git a/src/views/_sila/BMC/Configuration/index.js b/src/views/_sila/BMC/Configuration/index.js new file mode 100644 index 00000000..a5ed7e7e --- /dev/null +++ b/src/views/_sila/BMC/Configuration/index.js @@ -0,0 +1,2 @@ +import Configuration from './Configuration.vue'; +export default Configuration; |