diff options
Diffstat (limited to 'src/views/_sila/SystemDescription')
10 files changed, 1025 insertions, 0 deletions
diff --git a/src/views/_sila/SystemDescription/Info/InventoryTableSystem.vue b/src/views/_sila/SystemDescription/Info/InventoryTableSystem.vue new file mode 100644 index 00000000..0c32d2c0 --- /dev/null +++ b/src/views/_sila/SystemDescription/Info/InventoryTableSystem.vue @@ -0,0 +1,81 @@ +<template> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="table-rounded" + no-border-collapse + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + </page-section> +</template> + +<script> +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import PageSection from '@/components/Global/PageSection'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; + +export default { + components: { PageSection }, + mixins: [BVToastMixin, TableRowExpandMixin, LoadingBarMixin], + data() { + return { + fields: [ + { + key: 'param', + label: 'Параметр', + formatter: this.dataFormatter, + thStyle: { width: '50%' }, + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + }, + ], + expandRowLabel: expandRowLabel, + items: null, + }; + }, + computed: { + systems() { + return this.$store.getters['system/systems']; + }, + }, + watch: { + systems() { + this.items = [ + { + param: 'id', + value: this.id, + }, + { param: 'Модель', value: this.systems[0].model }, + { param: 'Производитель', value: '' }, + { param: 'Операционная система', value: '' }, + { param: 'Серийный номер', value: this.systems[0].serialNumber }, + { + 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.startLoader(); + const systemTablePromise = new Promise((resolve) => { + this.$root.$on('hardware-status-system-complete', () => resolve()); + }); + Promise.all([systemTablePromise]).finally(() => this.endLoader()); + }, +}; +</script> diff --git a/src/views/_sila/SystemDescription/Info/SystemDescription.vue b/src/views/_sila/SystemDescription/Info/SystemDescription.vue new file mode 100644 index 00000000..0a2bb305 --- /dev/null +++ b/src/views/_sila/SystemDescription/Info/SystemDescription.vue @@ -0,0 +1,148 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <!-- System table --> + <table-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-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import TableSystem from './InventoryTableSystem'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +export default { + components: { + PageTitle, + TableSystem, + }, + data() { + return { + text: '', + iconChevronUp: iconChevronUp, + }; + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} + +.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/_sila/SystemDescription/Info/index.js b/src/views/_sila/SystemDescription/Info/index.js new file mode 100644 index 00000000..8b483f2d --- /dev/null +++ b/src/views/_sila/SystemDescription/Info/index.js @@ -0,0 +1,2 @@ +import SystemDescription from './SystemDescription.vue'; +export default SystemDescription; diff --git a/src/views/_sila/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/_sila/SystemDescription/Network/InventoryIPv4Settings.vue new file mode 100644 index 00000000..980aee5a --- /dev/null +++ b/src/views/_sila/SystemDescription/Network/InventoryIPv4Settings.vue @@ -0,0 +1,277 @@ +<template> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + no-border-collapse + :items="systems" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="data"> + <b-row v-if="data.index === 0"> + <b-col> + <span> + {{ data.value ? 'Включен' : 'Выключен' }} + </span> + </b-col> + <b-col> + <b-button + :id="`popover-choice-${data.index}`" + class="popover-option-ractive" + variant="toogle-popover" + > + <img :is="iconChevron" class="icon-chevron" /> + </b-button> + <two-chioce-popover + :id="data.index" + fitst-option="Включен" + second-option="Выключен" + :chosen-option="chosenOption" + :first-action="setOn" + :second-action="setOff" + placement="leftbottom" + /> + </b-col> + </b-row> + <b-row v-else> + <b-form-input + v-if="systems[data.index].isEdit" + ref="input" + v-model="selectedCell" + class="regular-12px" + :class="{ validateIP: isIpInvalid }" + type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" + ></b-form-input> + <b-col v-else>{{ data.value }}</b-col> + <b-col class="table-network__icon"> + <b-row v-if="systems[data.index].isEdit"> + <img + src="@/assets/images/edit-ok.svg" + class="system-network-table__icon pointer" + @click="clickOk(data)" + /> + <img + src="@/assets/images/edit-no.svg" + class="system-network-table__icon close_icon pointer" + @click="clickCancel(data)" + /> + </b-row> + <img + v-else + src="@/assets/images/icon-edit.svg" + class="system-network-table__icon icon-edit pointer" + @click="editCellHandler(data)" + /> + </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 TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover'; +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; + +export default { + components: { PageSection, TwoChiocePopover }, + mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], + data() { + return { + selectedCell: null, + isActive: false, + isIpInvalid: false, + chosenOption: 'Выключен', + fields: [ + { + key: 'param', + label: 'Параметр', + formatter: this.dataFormatter, + thStyle: { width: '30%' }, + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thStyle: { width: '20%' }, + }, + { + key: 'comment', + label: 'Комментарий', + formatter: this.dataFormatter, + }, + ], + 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', + }, + ], + }; + }, + methods: { + editCellHandler(data) { + this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); + this.systems[data.index].isEdit = true; + this.selectedCell = this.systems[data.index].value; + this.$nextTick(() => this.$refs.input.focus()); + }, + clickOk(data) { + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } + }, + clickCancel(data) { + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test( + ipCheck + ); + }, + setOn() { + this.chosenOption = 'Включен'; + this.systems[0].value = true; + }, + setOff() { + this.chosenOption = 'Выключен'; + this.systems[0].value = false; + }, + 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; +} + +.close_icon { + margin-left: 5px; +} + +.form-control { + max-height: 16px; + width: 60%; + background-color: transparent; + &:focus { + box-shadow: none; + } + &.validateIP { + color: $red-brand-primary; + } +} +.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; + + 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; +} + +.popover-option-ractive { + display: block; + margin: -6px 9px 0 auto; +} +</style> diff --git a/src/views/_sila/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/_sila/SystemDescription/Network/InventoryIPv6Settings.vue new file mode 100644 index 00000000..a8c590b1 --- /dev/null +++ b/src/views/_sila/SystemDescription/Network/InventoryIPv6Settings.vue @@ -0,0 +1,263 @@ +<template> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + no-border-collapse + :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" + ref="input" + v-model="selectedCell" + class="regular-12px" + :class="{ validateIP: isIpInvalid }" + type="text" + @keydown.enter="clickOk(data)" + @keydown.escape="clickCancel(data)" + ></b-form-input> + <b-col v-else>{{ data.value }}</b-col> + <b-col class="table-network__icon"> + <b-row v-if="systems[data.index].isEdit"> + <img + src="@/assets/images/edit-ok.svg" + class="system-network-table__icon pointer" + @click="clickOk(data)" + /> + <img + src="@/assets/images/edit-no.svg" + class="system-network-table__icon close_icon pointer" + @click="clickCancel(data)" + /> + </b-row> + <img + v-else + src="@/assets/images/icon-edit.svg" + class="system-network-table__icon pointer" + @click="editCellHandler(data)" + /> + </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="table-network__icon"> + <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, + isIpInvalid: false, + isActive: false, + fields: [ + { + key: 'param', + label: 'Параметр', + formatter: this.dataFormatter, + thStyle: { width: '30%' }, + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thStyle: { width: '20%' }, + }, + { + key: 'comment', + label: 'Комментарий', + formatter: this.dataFormatter, + }, + ], + expandRowLabel: expandRowLabel, + iconChevron, + systems: [ + { + param: 'DHCP Server (откуда получен IP)', + value: false, + comment: 'Когда DHPC Server включен параметры вводятся автоматически', + }, + { + param: 'IP-адрес', + value: 'fe80::1ff:fe23:4567:890a', + comment: 'Введите IP адрес', + }, + { + param: 'Маска', + value: 'fe80::1ff:fe23:4567:890a', + comment: 'Введите маску сети', + }, + { + param: 'Сетевой шлюз', + value: 'fe80::1ff:fe23:4567:890a', + comment: 'Введите сетевой шлюз', + }, + { + param: 'DNS', + value: 'fe80::1ff:fe23:4567:890a', + comment: 'Введите DNS', + }, + ], + }; + }, + methods: { + editCellHandler(data) { + this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); + this.systems[data.index].isEdit = true; + this.selectedCell = this.systems[data.index].value; + this.$nextTick(() => this.$refs.input.focus()); + }, + clickOk(data) { + const EDIT_VALUE = this.selectedCell.trim(); + if (this.validateIP(EDIT_VALUE)) { + this.systems[data.index].value = EDIT_VALUE; + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + } else { + this.isIpInvalid = true; + } + }, + clickCancel(data) { + this.isIpInvalid = false; + this.selectedCell = null; + this.systems[data.index].isEdit = false; + }, + validateIP(ipCheck) { + return /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi.test( + ipCheck + ); + }, + 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; +} + +.close_icon { + margin-left: 5px; +} + +.form-control { + max-height: 16px; + width: 60%; + background-color: transparent; + &:focus { + box-shadow: none; + } + &.validateIP { + color: $red-brand-primary; + } +} + +.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/_sila/SystemDescription/Network/SystemNetwork.vue b/src/views/_sila/SystemDescription/Network/SystemNetwork.vue new file mode 100644 index 00000000..19243493 --- /dev/null +++ b/src/views/_sila/SystemDescription/Network/SystemNetwork.vue @@ -0,0 +1,101 @@ +<template> + <b-container + id="page-system-network" + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title :description="$t('appNavigation.networkParametrs')" /> + <!-- IPv4 --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_1 + variant="link" + class="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="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> + </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; +} + +.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; +} +</style> diff --git a/src/views/_sila/SystemDescription/Network/index.js b/src/views/_sila/SystemDescription/Network/index.js new file mode 100644 index 00000000..25f85f3c --- /dev/null +++ b/src/views/_sila/SystemDescription/Network/index.js @@ -0,0 +1,2 @@ +import SystemNetwork from './SystemNetwork.vue'; +export default SystemNetwork; diff --git a/src/views/_sila/SystemDescription/ServerParametrs/ServerParametrs.vue b/src/views/_sila/SystemDescription/ServerParametrs/ServerParametrs.vue new file mode 100644 index 00000000..9eb57301 --- /dev/null +++ b/src/views/_sila/SystemDescription/ServerParametrs/ServerParametrs.vue @@ -0,0 +1,21 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title :description="$t('appNavigation.serverParam')" /> + <servere-parametrs-section /> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import ServereParametrsSection from './ServereParametrsSection'; + +export default { + components: { + PageTitle, + ServereParametrsSection, + }, +}; +</script> diff --git a/src/views/_sila/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/_sila/SystemDescription/ServerParametrs/ServereParametrsSection.vue new file mode 100644 index 00000000..f8aebeb6 --- /dev/null +++ b/src/views/_sila/SystemDescription/ServerParametrs/ServereParametrsSection.vue @@ -0,0 +1,128 @@ +<template> + <page-section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('SystemDescription.LoadingQueue') }} + </span> + <b-table + responsive="md" + class="table-stripes" + :items="queueItems" + :fields="fields" + > + <template #cell(active)="data"> + <b-row> + <b-col> + <span v-if="queueItems[data.index].active"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox + v-model="queueItems[data.index].active" + switch + @change="toggleLoad" + > + </b-form-checkbox> + </b-col> + </b-row> + </template> + </b-table> + <span class="bold-12px__caps"> + {{ $t('SystemDescription.DiskParametrs') }} + </span> + <b-table + responsive="md" + class="table-stripes" + :items="diskItems" + :fields="fields" + > + </b-table> + </page-section> +</template> + +<script> +import PageSection from '@/components/Global/PageSection'; +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; + +export default { + components: { PageSection }, + data() { + return { + selectedCell: null, + fields: [ + { + key: 'param', + label: '', + formatter: this.dataFormatter, + }, + { + key: 'active', + label: '', + formatter: this.dataFormatter, + }, + ], + iconChevron, + queueItems: [ + { + param: 'Hard Drive C:', + active: false, + }, + { + param: + 'Embedded NIC 2 Port 1 Partition 1: BRCM MBA Slot E101 v21.6.0', + active: false, + }, + { + param: 'Virtual Floppy Drive', + active: false, + }, + { + param: 'Virtual Optical Drive', + active: false, + }, + ], + diskItems: [ + { + param: 'Internal SD', + active: 'IDSM', + }, + { + param: 'ACHI Controller in SL7', + active: 'A0S0 MTFDDAV480TDS', + }, + { + param: 'ACHI Controller in SL7', + active: 'A0S1 MTFDDAV480TDS', + }, + { + param: 'RAID Controller in SL8', + active: 'PERC H755 Front (bus 01 dev 00)', + }, + ], + }; + }, + methods: { + toggleLoad(data, value) { + this.queueItems[data.index].value = !value; + }, + }, +}; +</script> +<style lang="scss" scoped> +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} +.icon-expand { + margin: 0 !important; +} + +.bold-12px__caps { + display: block; + margin: 16px 0 7px 0; +} +</style> diff --git a/src/views/_sila/SystemDescription/ServerParametrs/index.js b/src/views/_sila/SystemDescription/ServerParametrs/index.js new file mode 100644 index 00000000..5ce6ca74 --- /dev/null +++ b/src/views/_sila/SystemDescription/ServerParametrs/index.js @@ -0,0 +1,2 @@ +import ServerParametrs from './ServerParametrs.vue'; +export default ServerParametrs; |