Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles.

5 files changed, 659 insertions, 0 deletions

diff --git a/src/views/SystemDescription/Info/InventoryControlSystem.vue b/src/views/SystemDescription/Info/InventoryControlSystem.vue
new file mode 100644
index 00000000..f47b4868
--- /dev/null
+++ b/src/views/SystemDescription/Info/InventoryControlSystem.vue
@@ -0,0 +1,228 @@
+<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">
+              {{ $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 './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,
+      },
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+a {
+  list-style-type: none;
+}
+
+.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/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue
new file mode 100644
index 00000000..b022fd6d
--- /dev/null
+++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue
@@ -0,0 +1,86 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      show-empty
+      class="bootstrap-rounded-table"
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin],
+  data() {
+    return {
+      isBusy: true,
+      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___system-table`,
+          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,
+      systems: [
+        {
+          param: 'UUID сервера',
+          value: '17583',
+        },
+        { param: 'Модель', value: '1.214.248 beta' },
+        { param: 'Производитель', value: 'Asus' },
+        { param: 'Операционная система', value: 'Linux' },
+        { param: 'Серийный номер', value: '741852963335' },
+        {
+          param: 'Свободное место на Flash-накопителе',
+          value: '1 024 000 Мб',
+        },
+      ],
+    };
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-system-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-rounded-table__column-first___system-table {
+  width: 50%;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/NtpPopover.vue b/src/views/SystemDescription/Info/NtpPopover.vue
new file mode 100644
index 00000000..81e95e4d
--- /dev/null
+++ b/src/views/SystemDescription/Info/NtpPopover.vue
@@ -0,0 +1,141 @@
+<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"
+      @shown="onShown"
+      @hidden="onHidden"
+    >
+      <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;
+  background: rgba(26, 62, 91, 0.05);
+  border-radius: 8px;
+  border: none;
+  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/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue
new file mode 100644
index 00000000..7322d03e
--- /dev/null
+++ b/src/views/SystemDescription/Info/SystemDescription.vue
@@ -0,0 +1,202 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- System table -->
+    <div class="main-container">
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_1
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+        >
+          {{ $t('SystemDescription.title.ServerConfig') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+          <table-system ref="system" />
+          <!-- Notes Administration -->
+          <section class="notes-section">
+            <div class="semi-bold-12px textarea-description">
+              <span>{{ $t('SystemDescription.title.Notes') }}</span>
+            </div>
+            <div class="textarea-container">
+              <div class="buttons-container">
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-bold.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-underline.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-link.svg"
+                  />
+                </button>
+                <div class="line"></div>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-list.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
+                  />
+                </button>
+              </div>
+              <textarea
+                id=""
+                name="area"
+                placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
+                cols="30"
+                rows="10"
+                class="notes-textarea"
+              ></textarea>
+            </div>
+          </section>
+        </b-collapse>
+      </div>
+      <!-- Control -->
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_2
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+        >
+          {{ $t('SystemDescription.title.Control') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+          <control-system />
+        </b-collapse>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import TableSystem from './InventoryTableSystem';
+import ControlSystem from './InventoryControlSystem';
+// import PageSection from '@/components/Global/PageSection';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: {
+    PageTitle,
+    ControlSystem,
+    TableSystem,
+    // PageSection,
+  },
+  data() {
+    return {
+      text: '',
+      iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+
+.server-info-collapse__button {
+  height: 56px;
+  width: 100%;
+  padding: 0 0 0 2rem;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+  &:hover {
+    color: $text-primary;
+  }
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+//section style
+.notes-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.textarea-description {
+  margin: 5px 0 10px 2rem;
+}
+
+.buttons-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notes-button {
+  width: 2rem;
+  height: 2rem;
+  margin: 22px 0 22px 25px;
+  background-color: $surface-secondary;
+  border: none;
+  &:hover {
+    border-radius: 8px;
+    background-color: $faint-secondary-primary-5-hover;
+  }
+}
+
+.line {
+  display: inline-block;
+  width: 1px;
+  height: 2rem;
+  margin: 22px 0 22px 25px;
+  border-left: 1px solid rgba(26, 62, 91, 0.2);
+}
+
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  margin: 0 1rem 1rem 1rem;
+  background-color: $surface-secondary;
+}
+
+.notes-textarea {
+  resize: none;
+  border: none;
+  flex: 0 0 auto;
+  margin: 0 1rem 1rem 1rem;
+  border-radius: 8px;
+  background-color: $white;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/index.js b/src/views/SystemDescription/Info/index.js
new file mode 100644
index 00000000..8b483f2d
--- /dev/null
+++ b/src/views/SystemDescription/Info/index.js
@@ -0,0 +1,2 @@
+import SystemDescription from './SystemDescription.vue';
+export default SystemDescription;