diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-23 16:46:24 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-23 16:46:24 +0300 |
commit | 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 (patch) | |
tree | 3f11b86aa27b02fa6b33142f53e5b2c25b33f85f /src/views/SystemDescription/Network | |
parent | 8086773d610f64ab71a11bd13cc896111b710fc8 (diff) | |
download | webui-vue-5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1.tar.xz |
Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles.
Diffstat (limited to 'src/views/SystemDescription/Network')
4 files changed, 666 insertions, 0 deletions
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; |