From 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 23 May 2022 16:46:24 +0300
Subject: Add pages: BMC, Ipv4/6, console settings. Fix routes: add console
 mixin, disable fullscreen console, add global styles.

---
 .../Network/InventoryIPv4Settings.vue              | 275 +++++++++++++++++++++
 .../Network/InventoryIPv6Settings.vue              | 262 ++++++++++++++++++++
 .../SystemDescription/Network/SystemNetwork.vue    | 127 ++++++++++
 src/views/SystemDescription/Network/index.js       |   2 +
 4 files changed, 666 insertions(+)
 create mode 100644 src/views/SystemDescription/Network/InventoryIPv4Settings.vue
 create mode 100644 src/views/SystemDescription/Network/InventoryIPv6Settings.vue
 create mode 100644 src/views/SystemDescription/Network/SystemNetwork.vue
 create mode 100644 src/views/SystemDescription/Network/index.js

(limited to 'src/views/SystemDescription/Network')

diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
new file mode 100644
index 00000000..69807762
--- /dev/null
+++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -0,0 +1,275 @@
+<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')"
+    >
+      <template #cell(value)="data">
+        <b-row v-if="!(typeof data.value === 'boolean')">
+          <b-form-input
+            v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            ref="input"
+            v-model="systems[data.index].value"
+            class="regular-12px"
+            type="text"
+          ></b-form-input>
+          <b-col v-else>{{ data.value }}</b-col>
+          <b-col class="system-network-table__icon-col">
+            <b-row
+              v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            >
+              <img
+                src="@/assets/images/edit-ok.svg"
+                class="system-network-table__icon pointer"
+                @click="clickOk"
+              />
+              <img
+                src="@/assets/images/edit-no.svg"
+                class="system-network-table__icon close_icon pointer"
+                @click="clickCancel"
+              />
+            </b-row>
+            <img
+              v-else
+              src="@/assets/images/icon-edit.svg"
+              class="system-network-table__icon pointer"
+              @click="editCellHandler(data, 'value')"
+            />
+          </b-col>
+        </b-row>
+        <b-row v-else class="popup-container">
+          <b-col v-if="data.value">{{ 'Включен' }}</b-col>
+          <b-col v-else>{{ 'Выключен' }}</b-col>
+          <div
+            v-if="isActive"
+            class="popup"
+            :class="{ popup_active: isActive }"
+          >
+            <button class="popup-button popup-on medium-12px" @click="DHCPon">
+              <span class="popup-text">Включен</span>
+            </button>
+            <button class="popup-button popup-off medium-12px" @click="DHCPoff">
+              <span class="popup-text">Выключен</span>
+            </button>
+          </div>
+          <b-col class="system-network-table__icon-col">
+            <img
+              :is="iconChevron"
+              class="pointer"
+              @click="isActive = !isActive"
+            />
+          </b-col>
+        </b-row>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      selectedCell: null,
+      isActive: 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___ipv-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-center
+            bootstrap-rounded-table__ipv-table___center`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'comment',
+          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,
+      iconChevron,
+      systems: [
+        {
+          param: 'DHCP Server (откуда получен IP)',
+          value: false,
+          comment: 'Когда DHPC Server включен параметры вводятся автоматически',
+        },
+        {
+          param: 'IP-адрес',
+          value: '192.168.1.1',
+          comment: 'Введите IP адрес',
+        },
+        {
+          param: 'Маска',
+          value: '192.168.0.1',
+          comment: 'Введите маску сети',
+        },
+        {
+          param: 'Сетевой шлюз',
+          value: '192.168.0.1',
+          comment: 'Введите сетевой шлюз',
+        },
+        {
+          param: 'DNS',
+          value: '8.8.8.8',
+          comment: 'Введите DNS',
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+  },
+  methods: {
+    editCellHandler(data, value) {
+      this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+      this.systems[data.index].isEdit = true;
+      this.selectedCell = value;
+      this.$nextTick(() => this.$refs.input.focus());
+    },
+    clickOk(data) {
+      this.selectedCell = null;
+      this.systems[data.index].value = this.$refs.input.value;
+    },
+    clickCancel() {
+      this.selectedCell = null;
+    },
+    DHCPoff() {
+      this.systems[0].value = false;
+      this.isActive = false;
+    },
+    DHCPon() {
+      this.systems[0].value = true;
+      this.isActive = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-rounded-table__column-first___ipv-table {
+  width: 30%;
+}
+
+.bootstrap-rounded-table__ipv-table___center {
+  width: 20%;
+}
+
+.system-network-table__icon-col {
+  max-width: 20%;
+  margin: 0 5px 0 auto !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.row {
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+.icon-expand {
+  margin: 0 !important;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.close_icon {
+  margin-left: 5px;
+}
+
+.form-control {
+  border: none;
+  max-height: 16px;
+  width: 60%;
+  border: none;
+  background-color: transparent;
+  &:focus {
+    box-shadow: none;
+  }
+}
+.popup-container {
+  position: relative;
+}
+
+.popup {
+  position: absolute;
+  top: -12px;
+  left: 3px;
+  width: 97%;
+  background: $white;
+  z-index: 1000;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  box-sizing: border-box;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  visibility: hidden;
+}
+
+.popup-button {
+  width: 96%;
+  height: 50px;
+  margin: 4px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  &.popup-on {
+    color: $red-brand-primary;
+    border-radius: 8px;
+    &:hover {
+      background-color: $faint-secondary-primary-5-hover;
+    }
+    &:active {
+      background-color: $faint-secondary-primary-20;
+    }
+  }
+
+  &.popup-off {
+    background-color: $red-brand-primary;
+    color: $white;
+    &:hover {
+      background-color: $red-brand-primary-hover;
+    }
+    &:active {
+      background-color: $red-brand-primary-active;
+    }
+  }
+}
+
+.popup-text {
+  margin-left: 20px;
+}
+
+.popup_active {
+  visibility: visible;
+}
+</style>
diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
new file mode 100644
index 00000000..4ff0897a
--- /dev/null
+++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
@@ -0,0 +1,262 @@
+<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')"
+    >
+      <template #cell(value)="data">
+        <b-row v-if="!(typeof data.value === 'boolean')">
+          <b-form-input
+            v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            ref="input"
+            v-model="systems[data.index].value"
+            class="regular-12px"
+            type="text"
+          ></b-form-input>
+          <b-col v-else>{{ data.value }}</b-col>
+          <b-col class="system-network-table__icon-col">
+            <b-row
+              v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            >
+              <img
+                src="@/assets/images/edit-ok.svg"
+                class="system-network-table__icon pointer"
+                @click="clickOk"
+              />
+              <img
+                src="@/assets/images/edit-no.svg"
+                class="system-network-table__icon close_icon pointer"
+                @click="clickCancel"
+              />
+            </b-row>
+            <img
+              v-else
+              src="@/assets/images/icon-edit.svg"
+              class="system-network-table__icon pointer"
+              @click="editCellHandler(data, 'value')"
+            />
+          </b-col>
+        </b-row>
+        <b-row v-else class="popup-container">
+          <b-col v-if="data.value">{{ 'Включен' }}</b-col>
+          <b-col v-else>{{ 'Выключен' }}</b-col>
+          <div
+            v-if="isActive"
+            class="popup"
+            :class="{ popup_active: isActive }"
+          >
+            <button class="popup-button popup-on medium-12px" @click="DHCPon">
+              <span class="popup-text">Включен</span>
+            </button>
+            <button class="popup-button popup-off medium-12px" @click="DHCPoff">
+              <span class="popup-text">Выключен</span>
+            </button>
+          </div>
+          <b-col class="system-network-table__icon-col">
+            <img
+              :is="iconChevron"
+              class="pointer"
+              @click="isActive = !isActive"
+            />
+          </b-col>
+        </b-row>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      selectedCell: null,
+      isActive: false,
+      fields: [
+        {
+          key: 'param',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first___ipv-table
+              bootstrap-rounded-table__column-first`,
+          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-center
+            bootstrap-rounded-table__ipv-table___center`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'comment',
+          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,
+      iconChevron,
+      systems: [
+        {
+          param: 'DHCP Server (откуда получен IP)',
+          value: false,
+          comment: 'Когда DHPC Server включен параметры вводятся автоматически',
+        },
+        {
+          param: 'IP-адрес',
+          value: '192.168.1.1',
+          comment: 'Введите IP адрес',
+        },
+        {
+          param: 'Маска',
+          value: '192.168.0.1',
+          comment: 'Введите маску сети',
+        },
+        {
+          param: 'Сетевой шлюз',
+          value: '192.168.0.1',
+          comment: 'Введите сетевой шлюз',
+        },
+        {
+          param: 'DNS',
+          value: '8.8.8.8',
+          comment: 'Введите DNS',
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+  },
+  methods: {
+    editCellHandler(data, value) {
+      this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+      this.systems[data.index].isEdit = true;
+      this.selectedCell = value;
+      this.$nextTick(() => this.$refs.input.focus());
+    },
+    clickOk(data) {
+      this.selectedCell = null;
+      this.systems[data.index].value = this.$refs.input.value;
+    },
+    clickCancel() {
+      this.selectedCell = null;
+    },
+    DHCPoff() {
+      this.systems[0].value = false;
+      this.isActive = false;
+    },
+    DHCPon() {
+      this.systems[0].value = true;
+      this.isActive = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.row {
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+.icon-expand {
+  margin: 0 !important;
+}
+
+.edit {
+  cursor: pointer;
+}
+
+.close_icon {
+  margin-left: 5px;
+}
+
+.form-control {
+  border: none;
+  max-height: 16px;
+  width: 60%;
+  border: none;
+  background-color: transparent;
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.popup-container {
+  position: relative;
+}
+
+.popup {
+  position: absolute;
+  top: -12px;
+  left: 3px;
+  width: 97%;
+  background: $white;
+  z-index: 1000;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  box-sizing: border-box;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  visibility: hidden;
+}
+
+.popup-button {
+  width: 96%;
+  height: 50px;
+  margin: 4px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  &.popup-on {
+    color: $red-brand-primary;
+    border-radius: 8px;
+    &:hover {
+      background-color: $faint-secondary-primary-5-hover;
+    }
+    &:active {
+      background-color: $faint-secondary-primary-20;
+    }
+  }
+
+  &.popup-off {
+    background-color: $red-brand-primary;
+    color: $white;
+    &:hover {
+      background-color: $red-brand-primary-hover;
+    }
+    &:active {
+      background-color: $red-brand-primary-active;
+    }
+  }
+}
+
+.popup-text {
+  margin-left: 20px;
+}
+
+.popup_active {
+  visibility: visible;
+}
+</style>
diff --git a/src/views/SystemDescription/Network/SystemNetwork.vue b/src/views/SystemDescription/Network/SystemNetwork.vue
new file mode 100644
index 00000000..4cf264cf
--- /dev/null
+++ b/src/views/SystemDescription/Network/SystemNetwork.vue
@@ -0,0 +1,127 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- IPv4 -->
+    <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"
+          @click="ipv4Handler"
+        >
+          {{ $t('SystemDescription.title.Ipv4Settings') }}
+          <b-form-checkbox
+            id="checkbox-1"
+            v-model="ipv4"
+            @click.native.prevent
+          ></b-form-checkbox>
+        </b-button>
+        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+          <i-pv4-settings ref="system" />
+        </b-collapse>
+      </div>
+      <!-- IPv6 -->
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_2
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+          @click="ipv6Handler"
+        >
+          {{ $t('SystemDescription.title.Ipv6Settings') }}
+          <b-form-checkbox
+            id="checkbox-2"
+            v-model="ipv6"
+            @click.native.prevent
+          ></b-form-checkbox>
+        </b-button>
+        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+          <i-pv6-settings ref="system" />
+        </b-collapse>
+      </div>
+      <modal-user @hidden="activeUser = null" />
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import IPv4Settings from './InventoryIPv4Settings';
+import IPv6Settings from './InventoryIPv6Settings';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: {
+    PageTitle,
+    IPv4Settings,
+    IPv6Settings,
+  },
+  data() {
+    return {
+      text: '',
+      iconChevronUp: iconChevronUp,
+      ipv4: false,
+      ipv6: false,
+    };
+  },
+  methods: {
+    ipv4Handler() {
+      this.ipv4 = !this.ipv4;
+    },
+    ipv6Handler() {
+      this.ipv6 = !this.ipv6;
+    },
+  },
+};
+</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;
+  }
+}
+
+.custom-checkbox {
+  background-color: none;
+  margin: 0 20px 0 auto;
+}
+
+.custom-checkbox ::before {
+  box-shadow: none !important;
+  border: 2px solid rgba(4, 10, 15, 0.6);
+  background-color: #fff;
+  border-radius: 3px;
+}
+</style>
diff --git a/src/views/SystemDescription/Network/index.js b/src/views/SystemDescription/Network/index.js
new file mode 100644
index 00000000..25f85f3c
--- /dev/null
+++ b/src/views/SystemDescription/Network/index.js
@@ -0,0 +1,2 @@
+import SystemNetwork from './SystemNetwork.vue';
+export default SystemNetwork;
-- 
cgit v1.2.3