diff options
Diffstat (limited to 'src/views')
51 files changed, 4958 insertions, 470 deletions
diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue index 7f3de021..0eb8bfc9 100644 --- a/src/views/BMC/Configuration/BMCConfigurationControl.vue +++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue @@ -19,7 +19,7 @@ /> <div> <span - class="regular-12px underline pointer" + class="regular-12px underline" @click="redirectNetworkParametrs" >{{ $t('BMC.Parametrs') }}</span > @@ -115,8 +115,4 @@ a { label { padding-top: 5px; } - -.pointer { - cursor: pointer; -} </style> diff --git a/src/views/BMC/Configuration/SettingsImportPopup.vue b/src/views/BMC/Configuration/SettingsImportPopup.vue index c7309ba3..748518bc 100644 --- a/src/views/BMC/Configuration/SettingsImportPopup.vue +++ b/src/views/BMC/Configuration/SettingsImportPopup.vue @@ -3,7 +3,7 @@ <span :id="id" ref="button" - class="regular-12px underline pointer" + class="regular-12px underline" variant="primary" > {{ $t(description) }} @@ -227,10 +227,6 @@ export default { justify-content: center; } -.pointer { - cursor: pointer; -} - .medium-16px { display: inline-block; height: 45px; diff --git a/src/views/BMC/Settings/SettingsPage.vue b/src/views/BMC/Settings/SettingsPage.vue index c9a0df8d..a5b6cd76 100644 --- a/src/views/BMC/Settings/SettingsPage.vue +++ b/src/views/BMC/Settings/SettingsPage.vue @@ -6,7 +6,7 @@ <page-title /> <!-- BMC table --> <div class="main-container"> - <div class="smnp-section"> + <div class="bmc-settings-section"> <div class="smnp-settings-container"> <span class="bold-12px__caps section-label">{{ $t('BMC.smnp') @@ -49,8 +49,8 @@ $t('global.status.status') }}</label> <b-form-select - v-model="connectionType" - :options="connectionTypes" + v-model="smnpStatus" + :options="smnpStatuses" class="select-connection medium-16px" /> </b-form-group> @@ -83,7 +83,7 @@ </div> </div> </div> - <div class="smnp-section"> + <div class="bmc-settings-section"> <div class="smnp-settings-container"> <span class="bold-12px__caps section-label">{{ $t('BMC.smnpWarning') @@ -125,7 +125,79 @@ </div> </div> - <div class="smnp-section"> + <div class="bmc-settings-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smtpWarning') + }}</span> + <div class="table-section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items2" + :fields="fields2" + > + <template #cell(value)="data"> + <b-row v-if="data.index === 0"> + <b-col> + <span v-if="items2[data.index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="items2[data.index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + <b-row v-else-if="data.index === 4"> + <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="setYes" + :second-action="setNo" + placement="leftbottom" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img + src="@/assets/images/icon-edit.svg" + class="icon-chevron icon-edit" + /> + </b-col> + </b-row> + </template> + </b-table> + </div> + </div> + </div> + + <div class="bmc-settings-section last"> <div class="smnp-settings-container"> <span class="bold-12px__caps section-label">{{ $t('BMC.syslogSettings') @@ -135,8 +207,8 @@ $t('global.status.status') }}</label> <b-form-select - v-model="connectionType" - :options="connectionTypes" + v-model="syslogStatus" + :options="syslogStatuses" class="select-connection medium-16px" /> </b-form-group> @@ -177,15 +249,17 @@ <script> import PageTitle from '@/components/Global/PageTitle'; -// import PageSection from '@/components/Global/PageSection'; +import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover'; +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; export default { components: { PageTitle, - // PageSection, + TwoChiocePopover, }, data() { return { + iconChevron, text: '', system: '2КА04.02_г17', community: 'public', @@ -193,6 +267,29 @@ export default { smnpPort: '161', syslogIp: '0.0.0.0', syslogPort: '161', + chosenOption: 'Да', + smnpStatus: true, + smnpStatuses: [ + { + value: true, + text: 'Включена', + }, + { + value: false, + text: 'Выключена', + }, + ], + syslogStatus: true, + syslogStatuses: [ + { + value: true, + text: 'Включена', + }, + { + value: false, + text: 'Выключена', + }, + ], fields: [ { key: 'name', @@ -213,6 +310,26 @@ export default { tdClass: 'regular-12px bootstrap-rounded-table__td', }, ], + fields2: [ + { + key: 'attributes', + label: 'Атрибуты', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + bootstrap-table_smnp-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 + smnp-table-col-last`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], items: [ { name: 'SNMPv1', @@ -227,8 +344,44 @@ export default { value: true, }, ], + items2: [ + { + attributes: 'Авторизация', + value: true, + }, + { + attributes: 'Логин пользователя', + value: 'admin', + }, + { + attributes: 'Пароль', + value: '******', + }, + { + attributes: 'SMTP-сервер', + value: 'smtp.domian.ru', + }, + { + attributes: 'Поддержка SSI', + value: true, + }, + { + attributes: 'SMTP-порт', + value: 465, + }, + ], }; }, + methods: { + setYes() { + this.chosenOption = 'Да'; + this.items2[4].value = true; + }, + setNo() { + this.chosenOption = 'Нет'; + this.items2[4].value = false; + }, + }, }; </script> <style lang="scss"> @@ -243,8 +396,12 @@ export default { .main-container { margin-top: 16px; } -.smnp-section { + +.bmc-settings-section { border-bottom: 1px solid $faint-secondary-primary-10; + &.last { + margin-bottom: 40px; + } } .smnp-settings-container { display: flex; @@ -305,4 +462,9 @@ export default { width: 100%; margin: 0 20px 0 0; } + +.popover-option-ractive { + display: block; + margin: -6px 6px 0 auto; +} </style> diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue index 45bd1914..85b5191f 100644 --- a/src/views/Fans/StaticInformation/FansStaticPage.vue +++ b/src/views/Fans/StaticInformation/FansStaticPage.vue @@ -21,7 +21,7 @@ src="@/assets/images/fans-page/working.svg" /> <span> - {{ $t('fansPage.inWork') }} + {{ $t('global.status.inWork') }} </span> </div> <div v-else class="fans-table-col-first__cell"> @@ -30,7 +30,7 @@ src="@/assets/images/fans-page/notWorking.svg" /> <span> - {{ $t('fansPage.notWorking') }} + {{ $t('global.status.outWorking') }} </span> </div> </template> diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 244fdcd7..f01cdd52 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -165,6 +165,9 @@ export default { }; </script> <style scoped> +.regular-12px { + margin-left: 10px; +} .username-input, .password-input { height: 56px; diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue index 09ef7f23..a40bd2ea 100644 --- a/src/views/MemoryModules/Specification/MemoryStaticPage.vue +++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue @@ -18,10 +18,12 @@ </b-table> <span class="bold-16px">{{ $t('global.table.memorySlots') }}</span> </page-section> - <memory-switch + <data-tabs :slots="memorySlots" - :switch-memory="switchMemorySlot" - :current-memory="currentMemorySlot" + :switch-tab="switchMemorySlot" + :current-tab="currentMemorySlot" + :slot-width="120" + :slider-width="97" /> <page-section class="bootstrap-table__section"> <b-table @@ -93,10 +95,10 @@ <script> import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; -import MemorySwitch from './MemorySwitch'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; export default { - components: { PageTitle, PageSection, MemorySwitch }, + components: { PageTitle, PageSection, DataTabs }, data() { return { currentMemorySlot: 1, diff --git a/src/views/MemoryModules/Specification/MemorySwitch.vue b/src/views/MemoryModules/Specification/MemorySwitch.vue deleted file mode 100644 index 27101daa..00000000 --- a/src/views/MemoryModules/Specification/MemorySwitch.vue +++ /dev/null @@ -1,112 +0,0 @@ -<template> - <div - ref="content" - class="memory-switch" - @wheel.prevent="wheelItBetter($event)" - > - <span - v-for="item in slots" - :key="item.id" - class="medium-12px scale-item" - :class="{ 'switch-active': currentMemory === item.id }" - @click="switchMemory(item.id)" - >{{ $t(item.name) }}</span - > - <div - class="slider" - :style="`width: 98px; left: ${ - ((currentMemory ? currentMemory : 1) - 1) * 120 + 32 - }px`" - /> - </div> -</template> - -<script> -export default { - props: { - slots: { - type: Array, - default: null, - }, - currentMemory: { - type: Number, - default: 1, - }, - switchMemory: { - type: Function, - required: true, - }, - }, - data() { - return { - upHere: false, - container: this.$refs.content, - }; - }, - methods: { - wheelItBetter(event) { - if (event.deltaY < 0) { - this.$refs.content.scrollLeft -= 25; - } else { - this.$refs.content.scrollLeft += 25; - } - }, - }, -}; -</script> -<style lang="scss" scoped> -.memory-switch { - position: relative; - width: calc(93vw - 320px); - height: 50px; - padding: 0 16px 0 32px; - display: grid; - grid-auto-flow: column; - grid-auto-columns: 120px; - grid-template-rows: 32px; - align-items: end; - border-bottom: 1px solid $faint-secondary-primary-10; - overflow-x: auto; - white-space: nowrap; - &::-webkit-scrollbar { - height: 2px; - } - &::-webkit-scrollbar-thumb { - background: rgba(26, 62, 91, 0.2); - border-radius: 16px; - background-clip: content-box; - height: 10px; - } -} - -.switch-active { - color: $red-brand-primary; - transition: ease-in 0.15s; -} - -.slider { - position: absolute; - height: 0px; - border-bottom: 4px solid $red-brand-primary; - transition: ease-in 0.2s; - bottom: 0px; -} - -.scale-item { - display: inline-block; - width: 120px; - margin-right: 6px; - cursor: pointer; -} - -.date-picker { - display: flex; - align-items: center; - gap: 9px; -} - -.date-clear { - margin-left: auto; - cursor: pointer; -} -</style> diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue index 463e9ea2..8ff1aa1b 100644 --- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue +++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue @@ -8,10 +8,12 @@ <page-section class="bootstrap-table__section info_section"> <span class="bold-16px">{{ $t('pageInventory.powerSources') }}</span> </page-section> - <power-switch - :slots="memorySlots" - :switch-memory="switchMemorySlot" - :current-memory="currentMemorySlot" + <data-tabs + :slots="sourceSlots" + :switch-tab="switchSourceSlot" + :current-tab="currentSourceSlot" + :slot-width="100" + :slider-width="68" /> <page-section class="bootstrap-table__section"> <b-table @@ -51,14 +53,14 @@ <script> import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; -import PowerSwitch from './PowerSwitch'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; export default { - components: { PageTitle, PageSection, PowerSwitch }, + components: { PageTitle, PageSection, DataTabs }, data() { return { - currentMemorySlot: 1, - memorySlots: [ + currentSourceSlot: 1, + sourceSlots: [ { id: 1, name: 'Источник 1' }, { id: 2, name: 'Источник 2' }, { id: 3, name: 'Источник 3' }, @@ -127,8 +129,8 @@ export default { }; }, methods: { - switchMemorySlot(period) { - this.currentMemorySlot = period; + switchSourceSlot(period) { + this.currentSourceSlot = period; }, }, }; diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue deleted file mode 100644 index 824c2549..00000000 --- a/src/views/PowerSupplies/Specification/PowerSwitch.vue +++ /dev/null @@ -1,112 +0,0 @@ -<template> - <div - ref="content" - class="memory-switch" - @wheel.prevent="wheelItBetter($event)" - > - <span - v-for="item in slots" - :key="item.id" - class="medium-12px scale-item" - :class="{ 'switch-active': currentMemory === item.id }" - @click="switchMemory(item.id)" - >{{ $t(item.name) }}</span - > - <div - class="slider" - :style="`width: 68px; left: ${ - ((currentMemory ? currentMemory : 1) - 1) * 100 + 30 - }px`" - /> - </div> -</template> - -<script> -export default { - props: { - slots: { - type: Array, - default: null, - }, - currentMemory: { - type: Number, - default: 1, - }, - switchMemory: { - type: Function, - required: true, - }, - }, - data() { - return { - upHere: false, - container: this.$refs.content, - }; - }, - methods: { - wheelItBetter(event) { - if (event.deltaY < 0) { - this.$refs.content.scrollLeft -= 25; - } else { - this.$refs.content.scrollLeft += 25; - } - }, - }, -}; -</script> -<style lang="scss" scoped> -.memory-switch { - position: relative; - width: calc(100vw - 320px); - height: 50px; - padding: 0 16px 0 32px; - display: grid; - grid-auto-flow: column; - grid-auto-columns: 100px; - grid-template-rows: 32px; - align-items: end; - border-bottom: 1px solid $faint-secondary-primary-10; - overflow-x: auto; - white-space: nowrap; - &::-webkit-scrollbar { - height: 2px; - } - &::-webkit-scrollbar-thumb { - background: rgba(26, 62, 91, 0.2); - border-radius: 16px; - background-clip: content-box; - height: 10px; - } -} - -.switch-active { - color: $red-brand-primary; - transition: ease-in 0.15s; -} - -.slider { - position: absolute; - height: 0px; - border-bottom: 4px solid $red-brand-primary; - transition: ease-in 0.2s; - bottom: 0px; -} - -.scale-item { - display: inline-block; - width: 100px; - margin-right: 6px; - cursor: pointer; -} - -.date-picker { - display: flex; - align-items: center; - gap: 9px; -} - -.date-clear { - margin-left: auto; - cursor: pointer; -} -</style> diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue index 2baa7d5d..1be41ac2 100644 --- a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue +++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue @@ -20,7 +20,7 @@ <div v-if="value" class="fans-table-col-first__cell"> <img class="status__img" src="@/assets/images/fans-page/working.svg" /> <span> - {{ $t('fansPage.inWork') }} + {{ $t('global.status.inWork') }} </span> </div> <div v-else class="fans-table-col-first__cell"> @@ -29,7 +29,7 @@ src="@/assets/images/fans-page/notWorking.svg" /> <span> - {{ $t('fansPage.notWorking') }} + {{ $t('global.status.outWorking') }} </span> </div> </template> @@ -44,7 +44,7 @@ import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import { Accelerators } from './mock'; +import { Accelerators } from './helpers'; export default { components: { IconChevron }, mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], diff --git a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue index 3f9525ae..7baa7e67 100644 --- a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue +++ b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue @@ -10,6 +10,63 @@ $t('pageInventory.installedProcessors') }}</span> <!-- Processors Specification Table --> + <div class="capability-info"> + <b-row> + <b-col class="mt-0 mb-2 p-0 bold-12px__caps"> + {{ $t('pageInventory.table.processorCapabilityInfo') }} + </b-col> + </b-row> + <b-row> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names"> + {{ $t('global.table.attributes') }} + </dd> + <dd>{{ 'Многопоточность' }}</dd> + <dd>{{ 'Виртуализация' }}</dd> + <dd>{{ 'Турбо режим' }}</dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd> + <dd + v-for="item in processors[0].presence_status" + :key="item.presence_status" + > + {{ item }} + </dd> + </dl> + </b-col> + <b-col class="mt-2 p-0" sm="3" xl="3"> + <dl class="light-12px"> + <!-- Status state --> + <dd class="attrib-names">{{ 'Включен' }}</dd> + <dd> + <b-form-checkbox + v-model="processors[0].statuses.multithreading" + switch + > + </b-form-checkbox> + </dd> + <dd> + <b-form-checkbox + v-model="processors[0].statuses.virtualization" + switch + > + </b-form-checkbox> + </dd> + <dd> + <b-form-checkbox + v-model="processors[0].statuses.turbo" + switch + > + </b-form-checkbox> + </dd> + </dl> + </b-col> + </b-row> + </div> <processors-specification-table /> <span class="bold-16px">{{ $t('pageInventory.installedAccelerator') @@ -24,6 +81,7 @@ <script> import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; +import { processors } from './helpers'; import ProcessorsSpecificationTable from './ProcessorsSpecificationTable'; import AcceleratorSpecificationTable from './AcceleratorSpecificationTable'; @@ -34,6 +92,11 @@ export default { ProcessorsSpecificationTable, AcceleratorSpecificationTable, }, + data() { + return { + processors, + }; + }, }; </script> <style lang="scss" scoped> @@ -41,4 +104,18 @@ export default { display: block; margin: 25px 0 16px 0; } + +.capability-info { + padding-left: 1rem; +} + +.attrib-names { + border-bottom: 1px solid $faint-secondary-primary-10; + color: $text-secondary !important; + font-weight: 600; +} + +.custom-switch { + margin: 0; +} </style> diff --git a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue index 6efc2e21..1d026f1b 100644 --- a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue +++ b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue @@ -27,7 +27,7 @@ <div v-if="value" class="fans-table-col-first__cell"> <img class="status__img" src="@/assets/images/fans-page/working.svg" /> <span> - {{ $t('fansPage.inWork') }} + {{ $t('global.status.inWork') }} </span> </div> <div v-else class="fans-table-col-first__cell"> @@ -36,7 +36,7 @@ src="@/assets/images/fans-page/notWorking.svg" /> <span> - {{ $t('fansPage.notWorking') }} + {{ $t('global.status.outWorking') }} </span> </div> </template> @@ -45,59 +45,6 @@ <b-container fluid> <!-- ProcessorCapabilityInfo --> <b-row> - <b-col class="mt-0 mb-2 p-0 bold-12px__caps"> - {{ $t('pageInventory.table.processorCapabilityInfo') }} - </b-col> - </b-row> - <b-row> - <b-col class="mt-2 p-0" sm="3" xl="3"> - <dl class="light-12px"> - <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd> - <dd>{{ 'Многопоточность' }}</dd> - <dd>{{ 'Виртуализация' }}</dd> - <dd>{{ 'Турбо режим' }}</dd> - </dl> - </b-col> - <b-col class="mt-2 p-0" sm="3" xl="3"> - <dl class="light-12px"> - <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd> - <dd - v-for="item in processors[index].presence_status" - :key="item.presence_status" - > - {{ dataFormatter(item) }} - </dd> - </dl> - </b-col> - <b-col class="mt-2 p-0" sm="3" xl="3"> - <dl class="light-12px"> - <!-- Status state --> - <dd class="attrib-names">{{ 'Включен' }}</dd> - <dd> - <b-form-checkbox - v-model="processors[index].statuses.multithreading" - switch - > - </b-form-checkbox> - </dd> - <dd> - <b-form-checkbox - v-model="processors[index].statuses.virtualization" - switch - > - </b-form-checkbox> - </dd> - <dd> - <b-form-checkbox - v-model="processors[index].statuses.turbo" - switch - > - </b-form-checkbox> - </dd> - </dl> - </b-col> - </b-row> - <b-row> <b-col class="mt-3 mb-2 p-0 bold-12px__caps"> {{ $t('pageInventory.table.processorCacheInfo') }} </b-col> @@ -202,7 +149,7 @@ import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import { Processors } from './mock'; +import { processors } from './helpers'; export default { components: { IconChevron }, mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], @@ -210,7 +157,7 @@ export default { return { isBusy: true, isAddersСolon: false, - processors: Processors, + processors, fields: [ { key: 'expandRow', diff --git a/src/views/Processors/Specification/mock.js b/src/views/Processors/Specification/helpers.js index 42ca1c30..6227e4b8 100644 --- a/src/views/Processors/Specification/mock.js +++ b/src/views/Processors/Specification/helpers.js @@ -1,4 +1,4 @@ -export const Processors = [ +export const processors = [ { expandRow: false, status: true, diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue index b736f026..ed4ee19c 100644 --- a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue +++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue @@ -4,16 +4,18 @@ <div class="main-container"> <div class="tables-container"> <div class="server-table"> - <span class="semi-bold-16px">Состояние сервера</span> + <span class="semi-bold-16px">{{ + $t('global.status.serverStatus') + }}</span> <b-table show-empty responsive="md" class="bootstrap-analytical-table" - :items="server_items" + :items="serverItems" :fields="server_fields" > <template #cell(value)="{ value }"> - <b-col v-if="value" col="1"> + <b-col v-if="value"> <img src="@/assets/images/icon-ok.svg" class="system-network-table__icon" @@ -29,37 +31,144 @@ </b-table> </div> <div class="events-table"> - <span class="semi-bold-16px">События</span> - <b-table - show-empty - responsive="md" - class="bootstrap-analytical-table" - :items="events_items" - :fields="events_fields" - > - </b-table> + <span class="semi-bold-16px">{{ $t('global.action.events') }}</span> + <div id="events-table-wrapper"> + <b-table + show-empty + :sticky-header="stickyHeader" + responsive="md" + class="bootstrap-analytical-table" + :no-border-collapse="true" + :items="eventsItems" + :fields="events_fields" + > + <template #cell(date)="{ value }"> + <img + src="@/assets/images/event-logs/time.svg" + class="sourse__img" + /> + <span class="regular-12px quaternary"> {{ value }} </span> + </template> + <template #cell(type)="{ value }"> + <span + v-if="value === 'Критические'" + class="bold-12px__caps errors" + >{{ value }}</span + > + <span + v-else-if="value === 'Предупреждения'" + class="bold-12px__caps warning" + > + {{ value }} + </span> + <span v-else class="bold-12px__caps information">{{ + value + }}</span> + </template> + <template #cell(description)="data"> + <b-row class="semi-bold-16px tretiatry"> + {{ data.item.description.name }} + </b-row> + <b-row + class="regular-12px tretiatry pointer" + @click="toggleRowDetails(data)" + > + {{ data.item.description.description }}</b-row + > + </template> + <template #row-details="{ index }"> + <b-container fluid> + <b-col class="mt-1 mb-2 regular-12px tretiatry"> + <span class="row-details"> + {{ + `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки. + Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.` + }} + {{ $t(eventsItems[index].description.description) }} + </span> + </b-col> + </b-container> + </template> + </b-table> + </div> </div> </div> + <div class="indicators-container"> + <span class="bold-16px">{{ $t('global.status.indicators') }}</span> + <span class="indicators-units regular-12px tretiatry"> + {{ $t('global.units.unit') }}</span + > + <b-button id="popover-choice-1" variant="unstiled"> + <span class="regular-12px units-label"> + {{ + $t(`global.units.${unit === 'Ампераж' ? 'amper' : 'volt'}`) + }}</span + > + <img class="units__icon" src="@/assets/images/icon-chevron-red.svg" /> + </b-button> + </div> + <two-chioce-popover + :id="1" + fitst-option="Ампераж" + second-option="Вольтаж" + :chosen-option="unit" + :first-action="selectAmper" + :second-action="selectVolt" + /> + <!-- <unit-popover + :select-amper="selectAmper" + :select-volt="selectVolt" + :unit="unit" + /> --> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <accessory-table :records="accessoryData.power" /> + <power-table :time-scale="timeScale" /> + <div class="tables-container"> + <span class="semi-bold-16px">Управление</span> + </div> + <control-system /> </div> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; +import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem'; +import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover'; +import PowerTable from './PowerTable'; +import { AccessoryData, ServerItems, EventsItems } from './helpers'; export default { components: { PageTitle, + DateSwitch, + AccessoryTable, + PowerTable, + ControlSystem, + TwoChiocePopover, }, - + mixins: [TableRowExpandMixin], data() { return { + unit: 'Ампераж', + isActive: false, + timeScale: 'hour', + stickyHeader: '511px', + accessoryData: AccessoryData, + serverItems: ServerItems, + eventsItems: EventsItems, server_fields: [ { key: 'param', label: 'Раздел', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', class: 'bootstrap-analytical-table__column-first', tdClass: 'regular-12px bootstrap-analytical-table__td', }, @@ -67,33 +176,18 @@ export default { key: 'value', label: 'Статус', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', class: 'bootstrap-rounded-table__column-last analytical-table__status', tdClass: 'regular-12px bootstrap-analytical-table__td', }, ], - server_items: [ - { param: 'Сервер №1', value: true }, - { param: 'ВМС', value: true }, - { param: 'Аналитическая панель', value: true }, - { param: 'RAID-контроллеры', value: false }, - { param: 'Модули памяти', value: true }, - { param: 'Процессоры', value: true }, - { param: 'Источники питания', value: true }, - { param: 'Вентиляторы', value: true }, - { param: 'Физические накопители', value: true }, - { param: 'Виртуальные накопители', value: true }, - { param: 'Материнская плата', value: true }, - { param: 'Сетевые адаптеры', value: true }, - { param: 'PCI устройства', value: true }, - ], events_fields: [ { - key: 'time', + key: 'date', label: 'Время', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', class: 'bootstrap-analytical-table__column-first', tdClass: 'regular-12px bootstrap-analytical-table__td', }, @@ -101,53 +195,59 @@ export default { key: 'type', label: 'Тип события', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', + class: 'bootstrap-analytical-table__column-center', tdClass: 'regular-12px bootstrap-analytical-table__td', }, { - key: 'info', + key: 'description', label: 'О событии', formatter: this.dataFormatter, - thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg', - class: 'bootstrap-rounded-table__column-last', + thClass: 'semi-bold-12px__caps bootstrap-analytical-th', + class: 'bootstrap-analytical-table__column-last', tdClass: 'regular-12px bootstrap-analytical-table__td', }, ], - events_items: [ - { time: 'Сервер №1', type: 'Критические', info: 'true' }, - { time: 'ВМС', type: 'Критические', info: 'true' }, - { - time: 'Аналитическая панель', - type: 'Критические', - info: 'true', - }, - { - time: 'RAID-контроллеры', - type: 'Критические', - info: 'false', - }, - { - time: 'Модули памяти', - type: 'Критические', - info: 'true', - }, - { time: 'Процессоры', type: 'Критические', info: 'true' }, - { - time: 'Источники питания', - type: 'Критические', - info: 'true', - }, - { time: 'Вентиляторы', type: 'Критические', info: 'true' }, - { time: 'Физические накопители', type: 'Критические', info: 'true' }, - ], }; }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + selectAmper() { + this.unit = 'Ампераж'; + }, + selectVolt() { + this.unit = 'Вольтаж'; + }, + }, }; </script> <style lang="scss"> .analytical-table__status { width: 10%; } + +#popover-unit-ractive { + padding-left: 5px; +} + +#popover-unit-ampere { + width: 89px; + height: 28px; + border-radius: 8px; + font-weight: 500; + font-size: 12px; +} + +#popover-unit-volt { + width: 89px; + height: 28px; + border-radius: 8px; + font-weight: 500; + font-size: 12px; + // color: $red-brand-primary; +} </style> <style lang="scss" scoped> .tables-container { @@ -164,4 +264,59 @@ export default { .events-table { width: 65%; } + +#events-table-wrapper div { + overflow-y: overlay; + overflow-x: hidden; + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + border-top: 43px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +.row-details { + display: block; + height: auto; + width: 30vw; +} + +.errors { + color: $indicators-errors !important; +} + +.warning { + color: $indicators-warning !important; +} + +.information { + color: $indicators-complementary !important; +} + +.indicators-container { + margin-left: 2rem; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.indicators-units { + margin-left: auto; +} + +.units__icon { + margin: 0 32px 0 5px; + cursor: pointer; +} + +.units-label { + cursor: pointer; + color: $red-brand-primary; +} </style> diff --git a/src/views/SILA/AnalyticalPanel/PowerTable.vue b/src/views/SILA/AnalyticalPanel/PowerTable.vue new file mode 100644 index 00000000..27bb4efa --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/PowerTable.vue @@ -0,0 +1,82 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'areaspline', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(6, this.timeScale), + title: null, + labels: { + step: 1, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(2.5, 'A'), + min: 0, + max: 4, + title: null, + tickInterval: 1, + minorGridLineColor: '#1A3E5B1A', + }, + series: Series['power'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + areaspline: { + fillOpacity: 0, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/SILA/AnalyticalPanel/TemperatureTable.vue b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue new file mode 100644 index 00000000..ae52062a --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue @@ -0,0 +1,115 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'areaspline', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + areaspline: { + fillOpacity: 0, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/SILA/AnalyticalPanel/helpers.js b/src/views/SILA/AnalyticalPanel/helpers.js new file mode 100644 index 00000000..8655afc3 --- /dev/null +++ b/src/views/SILA/AnalyticalPanel/helpers.js @@ -0,0 +1,200 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + power: [ + { + name: 'Sean', + data: [1, 1, 2.7, 0.5, 0.2, 1], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [0.4, 0.3, 1, 1.4, 2, 0.4], + color: '#F18638', + }, + { + name: 'Brendan', + data: [0.5, 2.5, 1, 0.4, 1, 3], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${i}0`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = []; + for (let i = 0; i < count; i += 0.5) { + arr.push(`${i} ${desc}`); + } + return arr; +}; + +export const AccessoryData = { + power: { + fields: [ + { + key: 'name', + label: 'Наименование', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'power', + label: 'Текущее значение тока, А', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Источникк питания 1', + power: '1,3 A', + }, + { + name: 'Источникк питания 2', + power: '1,8 A', + }, + { + name: 'Источникк питания 3', + power: '1,6 A', + }, + ], + }, +}; + +export const ServerItems = [ + { param: 'Сервер №1', value: true }, + { param: 'ВМС', value: true }, + { param: 'Аналитическая панель', value: true }, + { param: 'RAID-контроллеры', value: false }, + { param: 'Модули памяти', value: true }, + { param: 'Процессоры', value: true }, + { param: 'Источники питания', value: true }, + { param: 'Вентиляторы', value: true }, + { param: 'Физические накопители', value: true }, + { param: 'Виртуальные накопители', value: true }, + { param: 'Материнская плата', value: true }, + { param: 'Сетевые адаптеры', value: true }, + { param: 'PCI устройства', value: true }, +]; + +export const EventsItems = [ + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, + { + date: '23.11.2021 в 13.36', + type: 'Критические', + description: { + name: 'Имя источника событий', + description: 'Краткое описание ошибки или сообщени....', + }, + }, +]; diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue index 0d5ce428..36ec9802 100644 --- a/src/views/SILA/EventLogs/EventLogs.vue +++ b/src/views/SILA/EventLogs/EventLogs.vue @@ -5,22 +5,29 @@ class="event-logs-section" > <page-title /> - <div class="form-control event-log-search"> - <button class="search-button"> - <img - class="event-log-search__icon" - src="@/assets/images/search-icon.svg" - /> - </button> - <b-form-input - v-model="searchInput" - type="text" - class="event-log-search__input" - placeholder="Поиск по журналу" - @input="onChangeSearchInput" - @clear-search="onClearSearchInput" + <div class="event-log-head-container"> + <span class="regular-12px">Срок хранения событий:</span> + <span class="semi-bold-12px">42 дня</span> + <span class="regular-12px red" style="color: $red-brand-primary" + >Изменить</span > - </b-form-input> + <div class="form-control event-log-search"> + <button class="search-button"> + <img + class="event-log-search__icon" + src="@/assets/images/search-icon.svg" + /> + </button> + <b-form-input + v-model="searchInput" + type="text" + class="event-log-search__input" + placeholder="Поиск по журналу" + @input="onChangeSearchInput" + @clear-search="onClearSearchInput" + > + </b-form-input> + </div> </div> <div class="event-logs__section"> <div class="event-logs__filter-container"> @@ -890,7 +897,7 @@ $toolbar-height: 64px; margin: 0 32px; } -.event-log-search { +.event-log-head-container { position: absolute; top: calc(#{$header-height}); right: 0px; @@ -898,13 +905,21 @@ $toolbar-height: 64px; flex-flow: row nowrap; justify-content: flex-start; align-items: center; + gap: 6px; + z-index: 1001; +} + +.event-log-search { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; border: none; box-shadow: none; border-radius: 8px; - margin: 12px 32px; + margin: 12px 32px 12px 16px; width: 236px; height: 40px; - z-index: 1001; } .search-button { @@ -1014,10 +1029,6 @@ $toolbar-height: 64px; color: $text-quaternary; } -.pointer { - cursor: pointer; -} - .pagination-container { width: calc(100% - #{$navigation-width}); height: $toolbar-height; @@ -1075,8 +1086,4 @@ $toolbar-height: 64px; height: auto; width: 70vw; } - -.pointer { - cursor: pointer; -} </style> diff --git a/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue b/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue new file mode 100644 index 00000000..95267ece --- /dev/null +++ b/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue @@ -0,0 +1,140 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="0" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperature" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Table --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + /> + <accessory-table :records="accessoryData.temperatureTable" /> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperature() { + this.temperatureWarning = +this.temperatureWarningInput; + }, + }, +}; +</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; + } +} + +.notification-button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} + +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; + &.non-normal { + width: 125px; + } +} +.save-button { + width: 151px; + height: 36px; +} +</style> diff --git a/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue b/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue new file mode 100644 index 00000000..1bbf7e08 --- /dev/null +++ b/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue @@ -0,0 +1,112 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/SILA/NetworkAdapters/Dynamic/helpers.js b/src/views/SILA/NetworkAdapters/Dynamic/helpers.js new file mode 100644 index 00000000..2be5ce24 --- /dev/null +++ b/src/views/SILA/NetworkAdapters/Dynamic/helpers.js @@ -0,0 +1,370 @@ +export const colors = ['#CB32F1', '#F18638', '#139BB9', '#E1AB17']; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 7, + 7, + 7, + 17, + 7, + 27, + 7, + 7, + 47, + 7, + 7, + 7, + 37, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 47, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 7, + 7, + 27, + 7, + 7, + 7, + 7, + 7, + 7, + 37, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + 7, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 20, + 10, + 10, + 30, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 50, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 20, + 10, + 10, + 10, + 10, + 10, + 30, + 10, + 10, + 10, + 10, + 10, + 10, + 19, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + 10, + ], + color: '#F18638', + }, + { + name: 'Brendan', + data: [ + 13, + 13, + 13, + 13, + 23, + 13, + 33, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 23, + 13, + 43, + 13, + 53, + 13, + 13, + 13, + 53, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 53, + 13, + 43, + 13, + 13, + 63, + 13, + 43, + 13, + 23, + 13, + 43, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + ], + color: '#139BB9', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 14, + 14, + 14, + 14, + 34, + 14, + 14, + 14, + 14, + 34, + 14, + 24, + 14, + 34, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 84, + 14, + 94, + 14, + 14, + 14, + 54, + 14, + 44, + 14, + 44, + 14, + 14, + 44, + 14, + ], + color: '#E1AB17', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Приемопередитчик 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Приемопередитчик 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Приемопередитчик 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Приемопередитчик 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + ], + }, +}; diff --git a/src/views/SILA/NetworkAdapters/Dynamic/index.js b/src/views/SILA/NetworkAdapters/Dynamic/index.js new file mode 100644 index 00000000..081b5560 --- /dev/null +++ b/src/views/SILA/NetworkAdapters/Dynamic/index.js @@ -0,0 +1 @@ +export { default } from './NetworkDynamicPage.vue'; diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue new file mode 100644 index 00000000..74e7ee2c --- /dev/null +++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue @@ -0,0 +1,434 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <data-tabs + :slots="adaptersSlots" + :switch-tab="switchAdapterSlot" + :current-tab="currentAdapterSlot" + :slot-width="85" + :slider-width="60" + style="margin-top: 16px" + /> + <page-section class="bootstrap-table__section"> + <div class="settings-container"> + <span class="bold-16px">{{ $t('appNavigation.settings') }}</span> + <apply-settings-popover + :appaly-on-reload="appalyOnReload" + :appaly-option1="appalyOption1" + :appaly-option2="appalyOption2" + :apply-type="applyType" + /> + <b-button variant="primary" class="apply-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + <span class="bold-12px__caps"> + {{ $t('pageNetwork.macAddress') }} + </span> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes_odd" + :items="items" + :fields="fields" + > + <template #cell(value)="data"> + <b-row> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img + src="@/assets/images/icon-edit.svg" + class="icon-chevron icon-edit" + /> + </b-col> + </b-row> + </template> + </b-table> + <span class="bold-12px__caps"> + {{ $t('adapters.settings') }} + </span> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes_odd" + :items="items_2" + :fields="fields" + > + <template #cell(value)="data"> + <b-row v-if="data.index === 3" class="multiple-select-container"> + <b-col v-if="selected.length" class="chip-column"> + <b-row class="chip-container"> + <div + v-for="item in selected" + :key="item.value" + class="custom-chip" + > + <span> {{ item.text }} </span> + <img + class="clear-icon" + src="@/assets/images/popups/x-icon.svg" + @click="optionRemove(item.value)" + /> + </div> + </b-row> + </b-col> + <b-col v-else> + {{ 'Не выбрано ' }} + </b-col> + <b-col class="icon-container"> + <b-button id="popover-boot" variant="toogle-popover"> + <img :is="iconChevron" class="icon-chevron" /> + </b-button> + <b-popover + placement="left" + triggers="focus" + :show.sync="show" + custom-class="boot-popover" + target="popover-boot" + > + <b-form-group + v-slot="{ ariaDescribedby }" + class="checkbox-group" + > + <b-form-checkbox-group + v-model="selected" + :options="options" + :aria-describedby="ariaDescribedby" + class="regular-14px checkbox-container" + stacked + ></b-form-checkbox-group> + </b-form-group> + </b-popover> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span> + {{ data.value ? 'Возможно' : 'Не возможно' }} + </span> + </b-col> + <b-col> + <img :is="iconChevron" class="icon-chevron icon-options" /> + </b-col> + </b-row> + </template> + </b-table> + <span class="bold-12px__caps"> + {{ $t('adapters.propherties') }} + </span> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes" + :items="items_3" + :fields="fields" + > + </b-table> + <div class="settings-container"> + <span class="bold-16px">{{ $t('adapters.PXE') }}</span> + <apply-settings-popover + :id="2" + :appaly-on-reload="appalyOnReload" + :appaly-option1="appalyOption1" + :appaly-option2="appalyOption2" + :apply-type="applyType" + /> + </div> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes_odd" + :items="items_4" + :fields="fields" + > + <template #cell(value)="data"> + <b-row class="flex-row"> + <b-col> + <span> + {{ data.value ? 'Включено' : 'Выключено' }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="items_4[data.index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + </template> + </b-table> + <div class="settings-container"> + <span class="bold-16px">{{ $t('adapters.links') }}</span> + </div> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes" + :items="items_5" + :fields="fields" + > + </b-table> + <div class="settings-container"> + <span class="bold-16px">{{ $t('adapters.transceivers') }}</span> + </div> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_6" + :fields="fields_2" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <div class="microcode-container"> + <span class="bold-16px">{{ + $t('SystemDescription.microcodeAdapter') + }}</span> + <popover + id="popover-reactive-1" + description="adapters.microcodeUpdate" + popup="adapters.microcodeUpdate_popup" + button="global.action.refresh" + :is-microcode-drivers="true" + /> + </div> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import Popover from '@/components/Global/Popover'; +import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; + +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; +import { items, items_2, items_3, items_4, items_5, items_6 } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DataTabs, + Popover, + ApplySettingsPopover, + }, + data() { + return { + items, + items_2, + items_3, + items_4, + items_5, + items_6, + iconChevron, + selected: [], + show: false, + options: [ + { text: 'PXE', value: { text: 'PXE', value: 'pxe' } }, + { text: 'ISCSI-PXE', value: { text: 'ISCSI-PXE', value: 'iscsi-pxe' } }, + { text: 'ISCSI', value: { text: 'ISCSI', value: 'iscsi' } }, + { text: 'PXE2', value: { text: 'PXE2', value: 'pxe2' } }, + { text: 'ISCSI 2', value: { text: 'ISCSI 2', value: 'iscsi2' } }, + { + text: 'ISCSI-PXE 2', + value: { text: 'ISCSI-PXE 2', value: 'iscsi-pxe2' }, + }, + ], + applyType: 'reload', + currentAdapterSlot: 1, + adaptersSlots: [ + { id: 1, name: 'Адаптер 1' }, + { id: 2, name: 'Адаптер 2' }, + { id: 3, name: 'Адаптер 3' }, + ], + fields: [ + { + key: 'param', + label: '', + formatter: this.dataFormatter, + thClass: 'bootstrap-table__head_bg', + class: 'bootstrap-table__column-first', + tdClass: 'regular-12px bootstrap-table__td', + }, + { + key: 'value', + label: '', + formatter: this.dataFormatter, + thClass: 'bootstrap-table__head_bg', + class: `bootstrap-table__column-last + bootstrap-table__server-param`, + tdClass: 'regular-12px bootstrap-table__td', + }, + ], + fields_2: [ + { + key: 'name', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'model', + label: 'Модель', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'number', + label: 'Серийный номер', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'type', + label: 'Тип устройства', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'firmware', + label: 'Прошивка', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'status', + 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', + }, + ], + }; + }, + methods: { + switchAdapterSlot(period) { + this.currentAdapterSlot = period; + }, + appalyOnReload() { + this.applyType = 'reload'; + }, + appalyOption1() { + this.applyType = 'option1'; + }, + appalyOption2() { + this.applyType = 'option2'; + }, + optionRemove(value) { + this.selected.splice( + this.selected.findIndex((el) => el.value === value), + 1 + ); + console.log(value); + }, + }, +}; +</script> +<style lang="scss"> +.bootstrap-table__section { + width: auto; +} + +.bootstrap-table__server-param { + width: 30%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} + +.settings-container { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.apply-button { + width: 245px; + height: 36px; +} + +.microcode-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: space-between; +} + +.bold-12px__caps { + display: block; + margin: 20px 0 8px 0; +} + +.flex-row { + align-items: center; +} + +.multiple-select-container { + justify-content: flex-end; +} + +.chip-column { + padding-right: 0px; +} + +.chip-container { + margin-left: -5px; +} + +.custom-chip { + display: flex; + align-items: center; + height: 24px; + margin: 2px 3px; + padding: 0 10px; + background-color: $faint-secondary-primary-10; + border-radius: 94px; +} + +.icon-container { + flex-grow: 0; + padding: 0px; + margin: 0 11px 0 5px; +} + +.clear-icon { + width: 10px; + margin-left: 6px; + cursor: pointer; +} + +.checkbox-group { + margin: 0; +} + +.checkbox-container { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + gap: 7px; +} +</style> diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js b/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js new file mode 100644 index 00000000..918f5b4e --- /dev/null +++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js @@ -0,0 +1,99 @@ +export const items = [ + { + param: 'MAC адрес', + value: 'D0:94:66:2A:77:33', + }, + { + param: 'Виртуальный MAC адрес', + value: 'D0:94:66:2A:77:33', + }, +]; +export const items_2 = [ + { + param: 'Пробуждение по локальной сети', + value: true, + }, + { + param: 'Менеджмент проходит через', + value: true, + }, + { + param: 'Энергоэффективный Ethernet', + value: true, + }, + { + param: 'Поддерживаемый boot протокол', + value: true, + }, + { + param: 'Способность политики сохранения', + value: true, + }, +]; +export const items_3 = [ + { + param: 'Версия прошивки', + value: '20.6.6.2', + }, + { + param: 'Версия драйвера', + value: '3.134', + }, + { + param: 'PCI device ID', + value: '165F', + }, +]; + +export const items_4 = [ + { + param: 'Встроенные порты PXE', + value: true, + }, +]; + +export const items_5 = [ + { + param: 'Статус', + value: 'Подключено', + }, + { + param: 'Скорость', + value: '1000 Mbps', + }, +]; + +export const items_6 = [ + { + name: 'Приемопередатчик 1', + model: 'A0507', + number: '789578456698', + type: 'Плата', + firmware: 'v 21.6.0', + status: 'Link', + }, + { + name: 'Приемопередатчик 2', + model: 'A0507', + number: '543636577755', + type: 'Плата', + firmware: 'v 21.6.0', + status: 'Receiver Signal Averange Optical Power', + }, + { + name: 'Приемопередатчик 3', + model: 'A0408', + number: '789578456698', + type: 'Плата', + firmware: 'v 21.6.0', + status: 'Laser Output Power', + }, + { + name: 'Приемопередатчик 4', + model: 'A0408', + number: '123456789087', + type: 'Плата', + firmware: 'v 21.6.0', + status: 'Laser Output Power', + }, +]; diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js b/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js new file mode 100644 index 00000000..47f49789 --- /dev/null +++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js @@ -0,0 +1 @@ +export { default } from './EthernetAdaptersPage.vue'; diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue new file mode 100644 index 00000000..8184349d --- /dev/null +++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue @@ -0,0 +1,231 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <data-tabs + :slots="adaptersSlots" + :switch-tab="switchAdapterSlot" + :current-tab="currentAdapterSlot" + :slot-width="85" + :slider-width="60" + style="margin-top: 16px" + /> + <page-section class="bootstrap-table__section"> + <div class="settings-container"> + <span class="bold-16px">{{ $t('appNavigation.settings') }}</span> + <apply-settings-popover + :appaly-on-reload="appalyOnReload" + :appaly-option1="appalyOption1" + :appaly-option2="appalyOption2" + :apply-type="applyType" + /> + <b-button variant="primary" class="apply-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + <span class="bold-12px__caps"> + {{ $t('adapters.wwnAddres') }} + </span> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes_odd" + :items="items" + :fields="fields" + > + <template #cell(value)="data"> + <b-row> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img + src="@/assets/images/icon-edit.svg" + class="icon-chevron icon-edit" + /> + </b-col> + </b-row> + </template> + </b-table> + <span class="bold-12px__caps"> + {{ $t('adapters.settings') }} + </span> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes_odd" + :items="items_2" + :fields="fields" + > + <template #cell(value)="data"> + <b-row v-if="data.index === 0 || data.index === 3"> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + </b-row> + <b-row v-else-if="data.index === 4"> + <b-col> + <span> + {{ data.value ? 'Включено' : 'Выключено' }} + </span> + </b-col> + <b-col> + <img :is="iconChevron" class="icon-chevron icon-options" /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img :is="iconChevron" class="icon-chevron icon-options" /> + </b-col> + </b-row> + </template> + </b-table> + <span class="bold-12px__caps"> + {{ $t('adapters.propherties') }} + </span> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes" + :items="items_3" + :fields="fields" + > + </b-table> + <div class="microcode-container"> + <span class="bold-16px">{{ + $t('SystemDescription.microcodeAdapter') + }}</span> + <popover + id="popover-reactive-1" + description="adapters.microcodeUpdate" + popup="adapters.microcodeUpdate_popup" + button="global.action.refresh" + :is-microcode-drivers="true" + /> + </div> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import Popover from '@/components/Global/Popover'; +import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; + +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; +import { items, items_2, items_3 } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DataTabs, + Popover, + ApplySettingsPopover, + }, + data() { + return { + items, + items_2, + items_3, + iconChevron, + applyType: 'reload', + currentAdapterSlot: 1, + adaptersSlots: [ + { id: 1, name: 'Адаптер 1' }, + { id: 2, name: 'Адаптер 2' }, + { id: 3, name: 'Адаптер 3' }, + ], + fields: [ + { + key: 'param', + label: '', + formatter: this.dataFormatter, + thClass: 'bootstrap-table__head_bg', + class: 'bootstrap-table__column-first', + tdClass: 'regular-12px bootstrap-table__td', + }, + { + key: 'value', + label: '', + formatter: this.dataFormatter, + thClass: 'bootstrap-table__head_bg', + class: `bootstrap-table__column-last + bootstrap-table__server-param`, + tdClass: 'regular-12px bootstrap-table__td', + }, + ], + }; + }, + methods: { + switchAdapterSlot(period) { + this.currentAdapterSlot = period; + }, + appalyOnReload() { + this.applyType = 'reload'; + }, + appalyOption1() { + this.applyType = 'option1'; + }, + appalyOption2() { + this.applyType = 'option2'; + }, + }, +}; +</script> +<style lang="scss"> +.bootstrap-table__server-param { + width: 30%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + width: auto; +} + +.bootstrap-table__section { + margin-bottom: 24px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} + +.settings-container { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.apply-button { + width: 245px; + height: 36px; +} + +.microcode-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: space-between; +} + +.bold-12px__caps { + display: block; + margin: 20px 0 8px 0; +} +</style> diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js b/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js new file mode 100644 index 00000000..a2ace22f --- /dev/null +++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js @@ -0,0 +1,42 @@ +export const items = [ + { + param: 'WWN адрес', + value: 'D0:94:66:2A:77:33', + }, +]; +export const items_2 = [ + { + param: 'Boot WWPN', + value: 'Имя порта контроллера (WWPN)', + }, + { + param: 'Select Boot Enable', + value: 'Boot Lun', + }, + { + param: 'Boot LUN', + value: 'Том 1', + }, + { + param: 'WWPN', + value: 'Имя порта HBA (WWPN)', + }, + { + param: 'Host Adapter Bios Enable', + value: false, + }, +]; +export const items_3 = [ + { + param: 'Версия прошивки', + value: '20.6.6.2', + }, + { + param: 'Версия драйвера', + value: '3.134', + }, + { + param: 'PCI device ID', + value: '165F', + }, +]; diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js b/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js new file mode 100644 index 00000000..8f5636c3 --- /dev/null +++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js @@ -0,0 +1 @@ +export { default } from './FcHbaAdaptersPage.vue'; diff --git a/src/views/SILA/PciDevices/PciDevicesPage.vue b/src/views/SILA/PciDevices/PciDevicesPage.vue new file mode 100644 index 00000000..09734a4a --- /dev/null +++ b/src/views/SILA/PciDevices/PciDevicesPage.vue @@ -0,0 +1,172 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(status)> + <b-row> + <b-col> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + <span> + {{ 'Работоспособен' }} + </span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +export default { + components: { PageTitle, PageSection }, + data() { + return { + fields: [ + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'type', + label: 'Тип устройства', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'model', + label: 'Модель', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'serial_number', + label: 'Серийный номер', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'producer', + 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', + }, + ], + items: [ + { + status: true, + name: 'PCI-устройство 1', + type: 'Плата', + model: 'A0407', + serial_number: '789578456698', + producer: 'ASUS', + }, + { + status: true, + name: 'PCI-устройство 2', + type: 'Плата', + model: 'A4897', + serial_number: '758496877563', + producer: 'ASUS', + }, + { + status: true, + name: 'PCI-устройство 3', + type: 'Плата', + model: 'A0147', + serial_number: '247856889654', + producer: 'ASUS', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + redirectDrivers() { + this.$router.push('/drivers-static'); + }, + redirectVirtual() { + this.$router.push('/virtual-drivers'); + }, + }, +}; +</script> +<style lang="scss"> +.bootstrap-table__stripes tr:nth-of-type(even) { + background-color: rgb(255 255 255); +} +.bootstrap-table__head_bg { + border-top: none; + display: none; +} + +.bootstrap-table__column-first { + border-right: 1px solid rgba(26, 62, 91, 0.1); + border-top: none; +} + +.bootstrap-table__column-last { + border-top: none; +} + +.bootstrap-table__td { + border-top: 1px solid rgba(26, 62, 91, 0.1); +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} + +.pointer { + color: $red-brand-primary; + cursor: pointer; +} +</style> diff --git a/src/views/SILA/PciDevices/index.js b/src/views/SILA/PciDevices/index.js new file mode 100644 index 00000000..20092914 --- /dev/null +++ b/src/views/SILA/PciDevices/index.js @@ -0,0 +1 @@ +export { default } from './PciDevicesPage.vue'; diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue new file mode 100644 index 00000000..cd148f7d --- /dev/null +++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue @@ -0,0 +1,209 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="notification__container"> + <span class="semi-bold-12px">{{ + $t('global.ariaLabel.notificationTime') + }}</span> + <div class="form-control notification"> + <b-form-input + v-model="notificationInput" + type="number" + class="notification__input" + > + </b-form-input> + <button class="notification_button"> + <img class="notification__icon" src="@/assets/images/refresh.svg" /> + </button> + </div> + </div> + <div class="main-container"> + <date-switch + :switch-time-scale="switchTimeScale" + :time-scale="timeScale" + /> + <div class="limit-container"> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/non-normal.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.nonNormalMode') + }}</span> + <b-form-input + v-model="temperatureNonNormalInput" + type="number" + :min="0" + :max="temperatureCritical" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/critical.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.criticalMode') + }}</span> + <b-form-input + v-model="temperatureCritical" + type="number" + :min="temperatureNonNormalInput" + :max="temperatureWarningInput" + class="form-control medium-12px" + > + </b-form-input> + </div> + <div class="trmperature-limt"> + <img src="@/assets/images/labels/warning.svg" /> + <span class="semi-bold-12px">{{ + $t('tablesDescription.temperatureWarning') + }}</span> + <b-form-input + v-model="temperatureWarningInput" + type="number" + :min="temperatureCritical" + :max="100" + class="form-control medium-12px" + > + </b-form-input> + </div> + <b-button + class="save-button" + variant="primary" + @click="updateTemperatureLimits" + > + {{ $t('global.action.save') }} + </b-button> + </div> + <!-- Temperature Table --> + <temperature-table + :time-scale="timeScale" + :warning="temperatureWarning" + :non-normal="temperatureNonNormal" + :critical-start="temperatureCriticalStart" + /> + <accessory-table-drivers :records="accessoryData.table" /> + <accessory-table :records="accessoryData.temperatureTable" /> + </div> + </b-container> +</template> +<script> +import PageTitle from '@/components/Global/PageTitle'; +import DateSwitch from '@/components/Global/SilaComponents/DateSwitch'; +import TemperatureTable from './TemperatureTable'; +import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTable'; +import AccessoryTableDrivers from '@/components/Global/SilaComponents/Tables/AccessoryTableDrivers'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +import { AccessoryData } from './helpers'; + +export default { + components: { + PageTitle, + DateSwitch, + TemperatureTable, + AccessoryTable, + AccessoryTableDrivers, + }, + data() { + return { + timeScale: 'hour', + temperatureWarning: 72, + temperatureWarningInput: 72, + temperatureNonNormal: 44, + temperatureNonNormalInput: 44, + temperatureCriticalStart: 55, + temperatureCritical: 55, + notificationInput: 42, + accessoryData: AccessoryData, + iconChevronUp: iconChevronUp, + }; + }, + methods: { + switchTimeScale(period) { + this.timeScale = period; + }, + updateTemperatureLimits() { + this.temperatureWarning = +this.temperatureWarningInput; + this.temperatureNonNormal = +this.temperatureNonNormalInput; + this.temperatureCriticalStart = +this.temperatureCritical; + }, + }, +}; +</script> +<style lang="scss" scoped> +.notification__container { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notification { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + border: none; + box-shadow: none; + border-radius: 8px; + margin: 12px 32px 12px 8px; + width: 236px; + height: 40px; + z-index: 1001; +} + +.notification__icon { + width: 20px; + height: 20px; +} + +.notification__input { + border: none; + background: none; + box-shadow: none; +} + +.notification_button { + border: none; + background: none; +} + +.semi-bold-12px { + z-index: 1001; +} + +// temperature limit comtainer +.limit-container { + height: 85px; + width: 100%; + padding: 0 32px 10px 32px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: flex-end; + gap: 24px; +} + +.trmperature-limt { + height: 60px; + width: 100%; + max-width: 270px; + display: flex; + align-items: baseline; + flex-flow: row wrap; + gap: 8px; +} + +.form-control { + height: 36px; +} +.save-button { + width: 151px; + height: 36px; +} +</style> diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue b/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue new file mode 100644 index 00000000..f9c149c3 --- /dev/null +++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue @@ -0,0 +1,126 @@ +<template> + <div> + <highcharts :options="chartOptions.line" /> + </div> +</template> + +<script> +import { setTime, Series, setCategories } from './helpers'; +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + computed: { + chartOptions() { + return { + line: { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: setTime(60, 'hour'), + title: null, + labels: { + step: 6, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: setCategories(101, 'С°'), + min: 0, + max: 100, + title: null, + minTickInterval: 25, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения, С°', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + plotBands: [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ], + }, + series: Series['temperature'].map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }, + }; + }, + }, +}; +</script> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-15px, 0) !important; +} +</style> diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js b/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js new file mode 100644 index 00000000..5bb87b84 --- /dev/null +++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js @@ -0,0 +1,584 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; + +export const Series = { + temperature: [ + { + name: 'Sean', + data: [ + 15, + 15, + 45, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 55, + 15, + 25, + 15, + 15, + 15, + 55, + 15, + 75, + 15, + 35, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 15, + 45, + 15, + 25, + 15, + 45, + 15, + 15, + 15, + 35, + 35, + 35, + 15, + 55, + 15, + 15, + 35, + 15, + 25, + 15, + 35, + 15, + ], + color: '#CB32F1', + }, + { + name: 'Ivan', + data: [ + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 12, + 22, + 12, + 42, + 12, + 12, + 12, + 72, + 12, + 52, + 12, + 62, + 12, + 72, + 12, + 12, + 12, + 12, + 42, + 12, + 12, + 52, + 12, + 42, + 12, + 12, + 62, + 12, + 12, + 12, + 22, + 12, + 42, + 12, + 62, + 12, + 12, + 32, + 12, + 12, + 12, + 52, + 12, + 32, + 12, + 22, + 12, + 12, + 12, + ], + color: '#175AE1', + }, + { + name: 'Brendan', + data: [ + 13, + 13, + 13, + 13, + 23, + 13, + 33, + 13, + 63, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 23, + 13, + 43, + 13, + 53, + 13, + 13, + 13, + 53, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 13, + 53, + 13, + 43, + 13, + 13, + 63, + 13, + 13, + 13, + 23, + 13, + 43, + 13, + 63, + 13, + 13, + 13, + 53, + 13, + 53, + ], + color: '#B98D13', + }, + { + name: 'Matteo', + data: [ + 24, + 14, + 44, + 14, + 14, + 14, + 64, + 14, + 14, + 14, + 54, + 14, + 14, + 34, + 14, + 24, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 14, + 14, + 14, + 14, + 14, + 14, + 44, + 14, + 54, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 14, + 14, + 84, + 14, + 14, + 14, + 54, + 14, + 14, + 14, + 44, + 14, + 44, + 64, + 14, + 44, + 14, + ], + color: '#13B937', + }, + { + name: 'Joan', + data: [ + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 36, + 16, + 26, + 16, + 36, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 26, + 16, + 46, + 16, + 16, + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 16, + 16, + 16, + 16, + 96, + 16, + 16, + 16, + 56, + 16, + 16, + 16, + 46, + 16, + ], + color: '#F18638', + }, + { + name: 'Avinash', + data: [ + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 69, + 19, + 19, + 19, + 19, + 19, + 59, + 19, + 19, + 39, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 49, + 19, + 19, + 19, + 59, + 19, + 29, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + 19, + ], + color: '#139BB9', + }, + ], +}; + +export const setTime = (count) => { + const arr = [...new Array(count)].map(() => ''); + for (let i = 0; i < arr.length; i++) { + arr[i] = `15:${String(i).padStart(2, '0')}`; + } + return arr; +}; + +export const setCategories = (count, desc) => { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; +}; + +export const AccessoryData = { + temperatureTable: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'currentTemperature', + label: 'Текущее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'middleTemperature', + label: 'Среднее, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minTemperature', + label: 'Минимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'minDate', + label: 'Дата минимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxTemperature', + label: 'Максимальное, С°', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'maxDate', + label: 'Дата максимального', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Накопитель 1', + currentTemperature: 19, + middleTemperature: 40, + minTemperature: 31, + minDate: { time: '15:15', date: '11.11.2021' }, + maxTemperature: 88, + maxDate: { time: '10:26', date: '15.11.2021' }, + }, + { + name: 'Накопитель 2', + currentTemperature: 29, + middleTemperature: 40, + minTemperature: 20, + minDate: { time: '15:45', date: '11.11.2021' }, + maxTemperature: 76, + maxDate: { time: '16:59', date: '16.11.2021' }, + }, + { + name: 'Накопитель 3', + currentTemperature: 48, + middleTemperature: 46, + minTemperature: 31, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 69, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + { + name: 'Накопитель 4', + currentTemperature: 48, + middleTemperature: 45, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 75, + maxDate: { time: '11:26', date: '16.11.2021' }, + }, + { + name: 'Накопитель 5', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 30, + minDate: { time: '15:23', date: '11.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '17.11.2021' }, + }, + { + name: 'Накопитель 6', + currentTemperature: 39, + middleTemperature: 44, + minTemperature: 5, + minDate: { time: '16:45', date: '25.11.2021' }, + maxTemperature: 80, + maxDate: { time: '15:26', date: '15.11.2021' }, + }, + ], + }, + table: { + fields: [ + { + key: 'name', + label: 'Имя модуля', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + class: 'SMART-table-col-first', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'SMART', + label: 'Текущие значения атрибутов SMART', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + class: 'SMART-table-col-second', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + { + key: 'resource', + label: 'Оставшийся ресурс для SSD, Мб', + thClass: 'bootstrap-fans-table__th semi-bold-12px', + class: 'SMART-table-col-last', + tdClass: 'bootstrap-fans-table__td light-12px', + }, + ], + items: [ + { + name: 'Накопитель 1', + SMART: 88, + resource: '1 024 000', + }, + { + name: 'Накопитель 2', + SMART: 76, + resource: '512 000', + }, + { + name: 'Накопитель 3', + SMART: 69, + resource: '256 000', + }, + { + name: 'Накопитель 4', + SMART: 75, + resource: '128 000', + }, + { + name: 'Накопитель 5', + SMART: 69, + resource: '256 000', + }, + { + name: 'Накопитель 6', + SMART: 75, + resource: '128 000', + }, + ], + }, +}; diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js b/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js new file mode 100644 index 00000000..ed9033ab --- /dev/null +++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js @@ -0,0 +1 @@ +export { default } from './DriversDynamicPage.vue'; diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue new file mode 100644 index 00000000..452abf88 --- /dev/null +++ b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue @@ -0,0 +1,149 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('global.table.info') }}</span> + </page-section> + <data-tabs + :slots="memorySlots" + :switch-tab="switchMemorySlot" + :current-tab="currentMemorySlot" + :slot-width="100" + :slider-width="81" + /> + <page-section class="bootstrap-table__section info_section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <div class="microcode-container"> + <span class="bold-16px">{{ + $t('SystemDescription.microcodeDrivers') + }}</span> + <popover + id="popover-reactive-1" + description="SystemDescription.reloadMicrocodeDrivers" + popup="SystemDescription.reloadMicrocodeDrivers" + button="global.action.refresh" + :is-microcode-drivers="true" + /> + </div> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; +import Popover from '@/components/Global/Popover'; + +export default { + components: { PageTitle, PageSection, DataTabs, Popover }, + data() { + return { + currentMemorySlot: 1, + memorySlots: [ + { id: 1, name: 'Накопитель 1' }, + { id: 2, name: 'Накопитель 2' }, + { id: 3, name: 'Накопитель 3' }, + { id: 4, name: 'Накопитель 4' }, + { id: 5, name: 'Накопитель 5' }, + { id: 6, name: 'Накопитель 6' }, + { id: 7, name: 'Накопитель 7' }, + { id: 8, name: 'Накопитель 8' }, + { id: 9, name: 'Накопитель 9' }, + { id: 10, name: 'Накопитель 10' }, + { id: 11, name: 'Накопитель 11' }, + { id: 12, name: 'Накопитель 12' }, + { id: 13, name: 'Накопитель 13' }, + { id: 14, name: 'Накопитель 14' }, + { id: 15, name: 'Накопитель 15' }, + ], + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + memory-table-col-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-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Протокол', + value: '4590', + }, + { + parametr: 'Номинальная ёмкость', + value: '1 024 000 Мб', + }, + { + parametr: 'Номинальная скорость вращения HDD', + value: '2000 об./мин.', + }, + { + parametr: 'Номинальный ресурс для SDD', + value: '10 000', + }, + { + parametr: 'Слот в бэкплейне или номер порта', + value: '25', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + }, +}; +</script> +<style lang="scss"> +.memory-table-col-first { + width: 50%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} +.info_section { + margin-bottom: 0px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} + +.microcode-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: space-between; +} +</style> diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/index.js b/src/views/SILA/PhysicalDrivers/StaticInfo/index.js new file mode 100644 index 00000000..2c06b5a2 --- /dev/null +++ b/src/views/SILA/PhysicalDrivers/StaticInfo/index.js @@ -0,0 +1 @@ +export { default } from './DriversStaticPage.vue'; diff --git a/src/views/SILA/RAID/Cache/RAIDCachePage.vue b/src/views/SILA/RAID/Cache/RAIDCachePage.vue new file mode 100644 index 00000000..f41cd787 --- /dev/null +++ b/src/views/SILA/RAID/Cache/RAIDCachePage.vue @@ -0,0 +1,124 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <data-tabs + :slots="raidSlots" + :switch-tab="switchRaidSlot" + :current-tab="currentRaidSlot" + :slot-width="100" + :slider-width="79" + style="margin-top: 16px" + /> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('RAID.cache_info') }}</span> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; + +export default { + components: { PageTitle, PageSection, DataTabs }, + data() { + return { + currentRaidSlot: 1, + raidSlots: [ + { id: 1, name: 'Контроллер 1' }, + { id: 2, name: 'Контроллер 2' }, + { id: 3, name: 'Контроллер 3' }, + ], + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + cache-table-col-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-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Статус наличия', + value: 'Есть', + }, + { + parametr: 'Текущее значение занятой емкости', + value: '1 024 000 Мб', + }, + { + parametr: 'Текущее значение свободной емкости', + value: '1 004 256 Мб', + }, + { + parametr: 'Статус наличия BBU', + value: 'Есть', + }, + { + parametr: 'Статус наличия FBU', + value: 'Нет', + }, + { + parametr: 'Состояние BBU', + value: 'Готов', + }, + { + parametr: 'Состояние FBU', + value: 'Заряжается', + }, + { + parametr: 'Номинальная емкость', + value: '1 004 256 Мб', + }, + ], + }; + }, + methods: { + switchRaidSlot(period) { + this.currentRaidSlot = period; + }, + }, +}; +</script> +<style lang="scss"> +.cache-table-col-first { + width: 50%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} + +.bold-16px { + display: block; + margin: 0 0 16px 0; +} +</style> diff --git a/src/views/SILA/RAID/Cache/index.js b/src/views/SILA/RAID/Cache/index.js new file mode 100644 index 00000000..76acfcbe --- /dev/null +++ b/src/views/SILA/RAID/Cache/index.js @@ -0,0 +1 @@ +export { default } from './RAIDCachePage.vue'; diff --git a/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue new file mode 100644 index 00000000..2f3093ab --- /dev/null +++ b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue @@ -0,0 +1,131 @@ +<template> + <b-popover + placement="left" + triggers="focus" + :show.sync="show" + custom-class="apply-reload-popover" + :target="`popover-action-${id}`" + @hidden="onHidden" + > + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === topPosition }" + @mouseover="scale = topPosition" + @click=" + () => { + show = false; + appalyOnReload(); + } + " + > + При перезагрузке + </b-button> + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === middlePosition }" + @mouseover="scale = middlePosition" + @click=" + () => { + show = false; + appalyOption1(); + } + " + > + Опция 1 + </b-button> + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === bottomPosition }" + @mouseover="scale = bottomPosition" + @click=" + () => { + show = false; + appalyOption2(); + } + " + > + Опция 2 + </b-button> + <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div> + </b-popover> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: null, + }, + appalyOnReload: { + type: Function, + default: null, + }, + appalyOption1: { + type: Function, + default: null, + }, + appalyOption2: { + type: Function, + default: null, + }, + applyType: { + type: String, + default: 'reload', + }, + }, + data() { + return { + topPosition: 5, + middlePosition: 33, + bottomPosition: 60, + show: false, + scale: 5, + }; + }, + methods: { + onHidden() { + if (this.applyType === 'reload') { + this.scale = this.topPosition; + } else if (this.applyType === 'option1') { + this.scale = this.middlePosition; + } else { + this.scale = this.bottomPosition; + } + }, + }, +}; +</script> +<style lang="scss"> +.analytical-table__status { + width: 10%; +} + +#popover-apply-ractive { + padding-left: 5px; +} + +.hovered-apply-button { + color: $white; +} +</style> +<style lang="scss" scoped> +#popover-apply-button { + justify-content: flex-start; + width: 240px; +} + +.slider { + width: 240px; + height: 28px; + border-radius: 8px; + background-color: $red-brand-primary; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset; + position: absolute; + transition: ease-in 0.2s; + z-index: -1; +} +</style> diff --git a/src/views/SILA/RAID/Settings/OptionsPopover.vue b/src/views/SILA/RAID/Settings/OptionsPopover.vue new file mode 100644 index 00000000..d1b85754 --- /dev/null +++ b/src/views/SILA/RAID/Settings/OptionsPopover.vue @@ -0,0 +1,87 @@ +<template> + <b-popover + placement="left" + triggers="focus" + :show.sync="show" + custom-class="popover-heigth-100" + :target="`popover-option-${id}`" + > + <b-button + id="popover-option-button" + variant="popover" + @click=" + () => { + show = false; + openModal(); + } + " + > + <img + src="@/assets/images/icon-settings-red.svg" + class="icon-chevron icon-settings" + /> + Настройки + </b-button> + <b-button + id="popover-option-button" + class="delete" + variant="popover" + @click="show = false" + > + <img + src="@/assets/images/icon-clear-red.svg" + class="icon-chevron icon-delete" + /> + Удалить + </b-button> + </b-popover> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: null, + }, + }, + data() { + return { + show: false, + }; + }, + methods: { + openModal() { + this.$bvModal.show(`edit-tome${this.id}`); + }, + }, +}; +</script> +<style lang="scss" scoped> +.popover-heigth-100 { + max-width: 120px; +} + +#popover-option-button { + padding: 0 9px 0 10px; + font-size: 12px; + &:hover { + color: $red-brand-primary; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 25%) inset; + } + &:active { + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 50%) inset; + } + &.delete { + padding: 0 26px 0 13px; + } +} + +.icon-settings { + padding-right: 5px; +} + +.icon-delete { + padding-right: 10px; +} +</style> diff --git a/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue new file mode 100644 index 00000000..614c06d1 --- /dev/null +++ b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue @@ -0,0 +1,318 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <data-tabs + :slots="raidSlots" + :switch-tab="switchRaidSlot" + :current-tab="currentRaidSlot" + :slot-width="100" + :slider-width="79" + style="margin-top: 16px" + /> + <page-section class="bootstrap-table__section" style="margin-top: 0px"> + <div class="settings-container"> + <span class="bold-16px">{{ $t('appNavigation.settings') }}</span> + <apply-settings-popover + :appaly-on-reload="appalyOnReload" + :appaly-option1="appalyOption1" + :appaly-option2="appalyOption2" + :apply-type="applyType" + /> + <b-button variant="primary" class="apply-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(action)="data"> + <b-row v-if="data.index <= 5"> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <b-button + :id="`popover-action-${data.index}`" + class="popover-action-ractive" + variant="toogle-popover" + > + <img :is="iconChevron" class="icon-chevron" /> + </b-button> + <action-settings-popover + :id="data.index" + :appaly-on-reload="appalyOnReload" + :appaly-option1="appalyOption1" + :appaly-option2="appalyOption2" + :apply-type="applyType" + /> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img + src="@/assets/images/icon-edit.svg" + class="icon-chevron icon-edit" + /> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + <page-section class="bootstrap-table__section"> + <div class="settings-container"> + <span class="bold-16px">{{ $t('RAID.lun') }}</span> + <b-button + variant="primary" + class="apply-button apply-button__lun" + @click="$bvModal.show('add-tome-images')" + > + {{ $t('global.action.addNew') }} + </b-button> + </div> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items_2" + :fields="fields_2" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(action)="data"> + <b-row> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <b-button + :id="`popover-option-${data.index}`" + class="popover-option-ractive" + variant="toogle-popover" + > + <img + src="@/assets/images/icon-options.svg" + class="icon-chevron icon-options" + /> + </b-button> + <options-popover :id="data.index" /> + <tome-modal + :id="`edit-tome${data.index}`" + :title="'Настройка виртуального тома'" + :action="editTome" + :index="data.index" + :item="items_2[data.index]" + /> + </b-col> + </b-row> + </template> + </b-table> + <div class="microcode-container"> + <span class="bold-16px">{{ $t('RAID.microcode') }}</span> + <popover + id="popover-reactive-1" + description="RAID.microcode_update" + popup="RAID.microcode_popoveer" + button="global.action.refresh" + :is-microcode-drivers="true" + /> + </div> + </page-section> + </div> + <tome-modal + :id="'add-tome-images'" + :title="'Новый виртуальный том'" + :action="createTome" + /> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import Popover from '@/components/Global/Popover'; +import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; + +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; +import ActionSettingsPopover from './ActionSettingsPopover'; +import OptionsPopover from './OptionsPopover'; +import TomeModal from './TomeModal'; +import { items, items_2 } from './helpers'; + +export default { + components: { + PageTitle, + PageSection, + DataTabs, + Popover, + ApplySettingsPopover, + ActionSettingsPopover, + OptionsPopover, + TomeModal, + }, + data() { + return { + items, + items_2, + iconChevron, + applyType: 'reload', + currentRaidSlot: 1, + titleModal: '', + editIndex: null, + raidSlots: [ + { id: 1, name: 'Контроллер 1' }, + { id: 2, name: 'Контроллер 2' }, + { id: 3, name: 'Контроллер 3' }, + ], + fields: [ + { + key: 'parametr', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + settings-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', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'action', + 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', + }, + ], + fields_2: [ + { + key: 'name', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-first', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'type', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'size', + label: 'Значение', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: 'bootstrap-rounded-table__column-center', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'action', + 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', + }, + ], + }; + }, + methods: { + switchRaidSlot(period) { + this.currentRaidSlot = period; + }, + appalyOnReload() { + this.applyType = 'reload'; + }, + appalyOption1() { + this.applyType = 'option1'; + }, + appalyOption2() { + this.applyType = 'option2'; + }, + createTome() { + console.log('Новый том создан'); + }, + editTome(index) { + console.log('Том изменен'); + console.log(index); + }, + }, +}; +</script> +<style lang="scss"> +.settings-table { + width: 35%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} + +.settings-container { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.apply-button { + width: 245px; + height: 36px; +} + +.popover-action-ractive { + margin: 0 0 0 83%; +} + +.popover-option-ractive { + margin: 0 0 0 70%; +} + +.apply-button__lun { + width: 245px; + height: 36px; + margin-left: auto; +} + +.microcode-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: space-between; +} +</style> diff --git a/src/views/SILA/RAID/Settings/TomeModal.vue b/src/views/SILA/RAID/Settings/TomeModal.vue new file mode 100644 index 00000000..c77f4c13 --- /dev/null +++ b/src/views/SILA/RAID/Settings/TomeModal.vue @@ -0,0 +1,179 @@ +<template> + <b-modal :id="id" class="modal-images" hide-footer> + <template #modal-title> + <span class="semi-bold-20px">{{ title }}</span> + </template> + <div class="modal-body"> + <label class="regular-12px tretiatry" for="name"> Имя </label> + <b-form-input + id="name" + v-model="tomeName" + placeholder="Название тома" + type="text" + class="form-control form-input" + > + </b-form-input> + + <form-control> + <label class="regular-12px tretiatry type-select-label" for="type" + >Тип</label + > + <b-form-select + id="type" + v-model="tomeType" + :options="tomeTypes" + class="select-connection regular-14px" + /> + </form-control> + + <form-control> + <label class="regular-12px tretiatry driver-select-label" for="driver" + >Физический накопитель</label + > + <b-form-select + id="driver" + v-model="tomeDriver" + :options="tomeDrivers" + class="select-connection regular-14px" + /> + </form-control> + + <label class="regular-12px tretiatry" for="size"> Размер Мб </label> + <b-form-input + id="size" + v-model="tomeSize" + placeholder="Размер Тома" + type="text" + class="form-control form-input" + > + </b-form-input> + <b-button class="upload-button" variant="primary" @click="action(index)"> + {{ item ? $t('global.action.save') : $t('global.action.addTome') }} + </b-button> + </div> + </b-modal> +</template> +<script> +import { required } from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; + +export default { + mixins: [VuelidateMixin], + props: { + id: { + type: String, + default: null, + }, + title: { + type: String, + default: null, + }, + index: { + type: Number, + default: null, + }, + action: { + type: Function, + default: null, + }, + item: { + type: Object, + default: null, + }, + }, + data() { + return { + tomeName: '', + tomeSize: '', + tomeType: 1, + tomeTypes: [ + { value: 1, text: 'RAID-0' }, + { value: 2, text: 'RAID-1' }, + ], + tomeDriver: 1, + tomeDrivers: [ + { value: 1, text: 'Накопитель 1' }, + { value: 2, text: 'Накопитель 2' }, + ], + }; + }, + mounted() { + this.tomeName = this.item.name; + this.tomeSize = this.item.size; + }, + validations: { + userInfo: { + username: { + required, + }, + password: { + required, + }, + }, + }, +}; +</script> +<style lang="scss"> +.modal-content { + border-radius: 16px; + width: 480px; +} +.modal-header { + border-bottom: none; +} +</style> +<style lang="scss" scoped> +.form-input { + height: 56px; + padding-top: 30px; + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + margin: -30px 0 20px 0; +} + +.modal-body { + width: 446px; +} + +.caption-12px, +.regular-12px { + padding-left: 10px; +} + +.select-connection { + height: 56px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -0px 0 18px 0; + background-color: $surface-secondary; + background-image: url('../../../../assets/images/icon-chevron.svg'); +} + +.type-select-label { + position: absolute; + top: 25%; +} + +.driver-select-label { + position: absolute; + top: 44%; + left: 4%; +} + +.form-background .custom-select, +.form-background .form-control { + border-radius: 8px; + border: none; + background-color: rgba(26, 62, 91, 0.05); +} + +.upload-button { + width: 100%; + height: 40px; + margin: 0 auto 10px; +} +</style> diff --git a/src/views/SILA/RAID/Settings/helpers.js b/src/views/SILA/RAID/Settings/helpers.js new file mode 100644 index 00000000..5727102a --- /dev/null +++ b/src/views/SILA/RAID/Settings/helpers.js @@ -0,0 +1,62 @@ +export const items = [ + { + parametr: 'Режим контроллера', + value: 'RAID', + action: 'Автоматически', + }, + { + parametr: 'Режим чтения патруля', + value: 'Автоматически', + action: 'Действие', + }, + { + parametr: 'Действие в режиме ручного патрулирования', + value: 'Запущен', + action: 'Действие', + }, + { + parametr: 'Название атрибута', + value: 'Запущен', + action: 'Действие', + }, + { + parametr: 'Название атрибута', + value: 'Запущен', + action: 'Действие', + }, + { + parametr: 'Название атрибута', + value: 'Запущен', + action: 'Действие', + }, + { + parametr: 'Название атрибута', + value: '30%', + action: '30', + }, + { + parametr: 'Название атрибута', + value: '30%', + action: '30', + }, + { + parametr: 'Название атрибута', + value: '30%', + action: '30', + }, +]; + +export const items_2 = [ + { + name: 'Том 1', + type: 'RAID-0', + size: '100 125 Мб', + action: 'Загружен', + }, + { + name: 'Том 2', + type: 'RAID-1', + size: '200 250 Мб', + action: 'Загружен', + }, +]; diff --git a/src/views/SILA/RAID/Settings/index.js b/src/views/SILA/RAID/Settings/index.js new file mode 100644 index 00000000..535dbe3a --- /dev/null +++ b/src/views/SILA/RAID/Settings/index.js @@ -0,0 +1 @@ +export { default } from './RAIDSettingsPage.vue'; diff --git a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue new file mode 100644 index 00000000..db2407d5 --- /dev/null +++ b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue @@ -0,0 +1,267 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <data-tabs + :slots="raidSlots" + :switch-tab="switchRaidSlot" + :current-tab="currentRaidSlot" + :slot-width="100" + :slider-width="79" + style="margin-top: 16px" + /> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + <span> + {{ 'Работоспособен' }} + </span> + </b-col> + </b-row> + <b-row v-else-if="index === 7"> + <b-col> + <span class="regular-12px pointer" @click="redirectDrivers"> + {{ value }} + </span> + </b-col> + </b-row> + <b-row v-else-if="index === 8"> + <b-col> + <span class="regular-12px pointer" @click="redirectVirtual"> + {{ value }} + </span> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + <b-button + v-b-toggle.toggle-collapse + variant="link" + class="collapse-button semi-bold-16px" + > + <component :is="iconChevronUp" class="icon-expand-right" /> + {{ $t('RAID.extraParam') }} + </b-button> + <b-collapse id="toggle-collapse" class="nav-item__nav"> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + class="bootstrap-table bootstrap-table__stripes" + :items="items_2" + :fields="fields_2" + > + <template #cell(value)="{ index, value }"> + <b-row v-if="index === 0"> + <b-col> + <img + src="@/assets/images/fans-page/working.svg" + class="icon-chevron" + /> + <span> + {{ 'Работоспособен' }} + </span> + </b-col> + </b-row> + <b-row v-else> + <b-col> + <span>{{ value }}</span> + </b-col> + </b-row> + </template> + </b-table> + </page-section> + </b-collapse> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; + +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +export default { + components: { PageTitle, PageSection, DataTabs }, + data() { + return { + iconChevronUp: iconChevronUp, + currentRaidSlot: 1, + raidSlots: [ + { id: 1, name: 'Контроллер 1' }, + { id: 2, name: 'Контроллер 2' }, + { id: 3, name: 'Контроллер 3' }, + ], + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `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-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Статус', + value: true, + }, + { + parametr: 'Имя', + value: 'RAID-контроллер 1', + }, + { + parametr: 'Описание', + value: 'Встроенный', + }, + { + parametr: 'PCI слот', + value: 'Информация недоступна', + }, + { + parametr: 'Версия прошивки', + value: 'Информация недоступна', + }, + { + parametr: 'Версия драйвера', + value: 'Информация недоступна', + }, + { + parametr: 'Объем cache памяти, Мб', + value: '8 096', + }, + { + parametr: 'Виртуальные накопители', + value: 'Перейти к накопителям', + }, + { + parametr: 'Физические накопители', + value: 'Перейти к накопителям', + }, + ], + fields_2: [ + { + key: 'param', + label: '', + formatter: this.dataFormatter, + thClass: 'bootstrap-table__head_bg', + class: 'bootstrap-table__column-first', + tdClass: 'regular-12px bootstrap-table__td', + }, + { + key: 'value', + label: '', + formatter: this.dataFormatter, + thClass: 'bootstrap-table__head_bg', + class: `bootstrap-table__column-last + bootstrap-table__server-param`, + tdClass: 'regular-12px bootstrap-table__td', + }, + ], + items_2: [ + { + param: 'Статус', + value: true, + }, + { + param: 'Скорость', + value: 'Информация недоступна', + }, + { + param: 'PCI Vendor ID', + value: 'Информация недоступна', + }, + { + param: 'Скорость', + value: 'Информация недоступна', + }, + { + param: 'PCI Vendor ID', + value: 'Информация недоступна', + }, + ], + }; + }, + methods: { + switchRaidSlot(period) { + this.currentRaidSlot = period; + }, + redirectDrivers() { + this.$router.push('/drivers-static'); + }, + redirectVirtual() { + this.$router.push('/virtual-drivers'); + }, + }, +}; +</script> +<style lang="scss"> +.bootstrap-table__stripes tr:nth-of-type(even) { + background-color: rgb(255 255 255); +} +.bootstrap-table__head_bg { + border-top: none; + display: none; +} + +.bootstrap-table__column-first { + border-right: 1px solid rgba(26, 62, 91, 0.1); + border-top: none; +} + +.bootstrap-table__column-last { + border-top: none; +} + +.bootstrap-table__td { + border-top: 1px solid rgba(26, 62, 91, 0.1); +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} + +.pointer { + color: $red-brand-primary; + cursor: pointer; +} +</style> diff --git a/src/views/SILA/RAID/Specification/index.js b/src/views/SILA/RAID/Specification/index.js new file mode 100644 index 00000000..a040cff4 --- /dev/null +++ b/src/views/SILA/RAID/Specification/index.js @@ -0,0 +1 @@ +export { default } from './RAIDSpecificationPage.vue'; diff --git a/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue new file mode 100644 index 00000000..bd82757f --- /dev/null +++ b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue @@ -0,0 +1,138 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <div class="main-container"> + <page-section class="bootstrap-table__section info_section"> + <span class="bold-16px">{{ $t('global.table.info') }}</span> + </page-section> + <data-tabs + :slots="memorySlots" + :switch-tab="switchMemorySlot" + :current-tab="currentMemorySlot" + :slot-width="180" + :slider-width="156" + /> + <page-section class="bootstrap-table__section info_section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + </b-table> + <div class="microcode-container"> + <span class="bold-16px">{{ + $t('SystemDescription.microcodeDrivers') + }}</span> + <popover + id="popover-reactive-1" + description="SystemDescription.reloadMicrocodeDrivers" + popup="SystemDescription.reloadMicrocodeDrivers" + button="global.action.refresh" + :is-microcode-drivers="true" + /> + </div> + </page-section> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import DataTabs from '@/components/Global/SilaComponents/DataTabs'; +import Popover from '@/components/Global/Popover'; + +export default { + components: { PageTitle, PageSection, DataTabs, Popover }, + data() { + return { + currentMemorySlot: 1, + memorySlots: [ + { id: 1, name: 'Виртуальный накопитель 1' }, + { id: 2, name: 'Виртуальный накопитель 2' }, + { id: 3, name: 'Виртуальный накопитель 3' }, + { id: 4, name: 'Виртуальный накопитель 4' }, + { id: 5, name: 'Виртуальный накопитель 5' }, + { id: 6, name: 'Виртуальный накопитель 6' }, + { id: 7, name: 'Виртуальный накопитель 7' }, + { id: 8, name: 'Виртуальный накопитель 8' }, + ], + fields: [ + { + key: 'parametr', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + memory-table-col-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-last', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + parametr: 'Текущий статус', + value: 'Готов', + }, + { + parametr: 'Номинальная емкость', + value: '1 024 000 Мб', + }, + { + parametr: 'Тип избыточности', + value: 'RAID', + }, + { + parametr: 'Входящие в состав физические накопители', + value: 'Накопитель 1, Накопитель 2, Накопитель 3', + }, + ], + }; + }, + methods: { + switchMemorySlot(period) { + this.currentMemorySlot = period; + }, + }, +}; +</script> +<style lang="scss"> +.memory-table-col-first { + width: 50%; +} +</style> + +<style lang="scss" scoped> +.bootstrap-table__section { + margin-bottom: 24px; +} +.info_section { + margin-bottom: 0px; +} + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} + +.microcode-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: space-between; +} +</style> diff --git a/src/views/SILA/VirtualDrivers/index.js b/src/views/SILA/VirtualDrivers/index.js new file mode 100644 index 00000000..23cd6fe1 --- /dev/null +++ b/src/views/SILA/VirtualDrivers/index.js @@ -0,0 +1 @@ +export { default } from './VirtualDriversPage.vue'; diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue index b96c9251..94845854 100644 --- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue @@ -9,7 +9,32 @@ :empty-text="$t('global.table.emptyMessage')" > <template #cell(value)="data"> - <b-row v-if="!(typeof data.value === 'boolean')"> + <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" @@ -37,34 +62,11 @@ <img v-else src="@/assets/images/icon-edit.svg" - class="system-network-table__icon pointer" + class="system-network-table__icon icon-edit 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="system-network-table__icon-col"> - <img - :is="iconChevron" - class="pointer" - @click="isActive = !isActive" - /> - </b-col> - </b-row> </template> </b-table> </page-section> @@ -75,18 +77,20 @@ 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 }, + components: { PageSection, TwoChiocePopover }, mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], data() { return { selectedCell: null, isActive: false, isIpInvalid: false, + chosenOption: 'Выключен', fields: [ { key: 'param', @@ -174,6 +178,14 @@ export default { 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; @@ -196,10 +208,8 @@ export default { .system-network-table__icon-col { max-width: 20%; - margin: 0 5px 0 auto !important; } </style> - <style lang="scss" scoped> .row { align-items: baseline; @@ -209,10 +219,6 @@ export default { margin: 0 !important; } -.pointer { - cursor: pointer; -} - .close_icon { margin-left: 5px; } @@ -252,7 +258,6 @@ export default { margin: 4px; border-radius: 8px; border: none; - cursor: pointer; display: flex; align-items: center; @@ -286,4 +291,9 @@ export default { .popup_active { visibility: visible; } + +.popover-option-ractive { + display: block; + margin: -6px 9px 0 auto; +} </style> diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue index 3de1c414..3f47b1fd 100644 --- a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue @@ -195,10 +195,6 @@ export default { margin: 0 !important; } -.edit { - cursor: pointer; -} - .close_icon { margin-left: 5px; } diff --git a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue index a40edb41..03cd1356 100644 --- a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue +++ b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue @@ -119,28 +119,6 @@ export default { }; </script> <style lang="scss"> -.bootstrap-table__stripes tr:nth-of-type(even) { - background-color: rgb(255 255 255); -} - -.bootstrap-table__head_bg { - border-top: none; - display: none; -} - -.bootstrap-table__column-first { - border-right: 1px solid rgba(26, 62, 91, 0.1); - border-top: none; -} - -.bootstrap-table__column-last { - border-top: none; -} - -.bootstrap-table__td { - border-top: 1px solid rgba(26, 62, 91, 0.1); -} - .bootstrap-table__server-param { width: 30%; } |