Add pages bms

Issue: SILABMC-191

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;