From ac2e648139a370f1c5b418cfb1694b348f992f8e Mon Sep 17 00:00:00 2001
From: Anna Tsyganova <ATSyganova@IBS.RU>
Date: Wed, 13 Jul 2022 12:12:58 +0300
Subject: Add pages bms Issue: SILABMC-191

---
 .../_sila/BMC/Configuration/Configuration.vue      |  40 +++
 .../BMC/Configuration/ConfigurationControl.vue     |  74 ++++++
 .../_sila/BMC/Configuration/ConfigurationTable.vue |  96 +++++++
 .../BMC/Configuration/SettingsImportPopup.vue      | 291 +++++++++++++++++++++
 src/views/_sila/BMC/Configuration/index.js         |   2 +
 5 files changed, 503 insertions(+)
 create mode 100644 src/views/_sila/BMC/Configuration/Configuration.vue
 create mode 100644 src/views/_sila/BMC/Configuration/ConfigurationControl.vue
 create mode 100644 src/views/_sila/BMC/Configuration/ConfigurationTable.vue
 create mode 100644 src/views/_sila/BMC/Configuration/SettingsImportPopup.vue
 create mode 100644 src/views/_sila/BMC/Configuration/index.js

(limited to 'src/views')

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;
-- 
cgit v1.2.3