diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
commit | c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 (patch) | |
tree | fb8579325d609699395e9550eaa803222a321fd6 /src/views/SILA/RAID | |
parent | 6facd12596ec8b55bab4be04b473de65e1f22018 (diff) | |
download | webui-vue-c4d70da69a3c86f8c07ccdb0f09b755dd99b2155.tar.xz |
Add global popovers. Add pages: pci, adapters, raid, drivers, virtual drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles
Diffstat (limited to 'src/views/SILA/RAID')
-rw-r--r-- | src/views/SILA/RAID/Cache/RAIDCachePage.vue | 124 | ||||
-rw-r--r-- | src/views/SILA/RAID/Cache/index.js | 1 | ||||
-rw-r--r-- | src/views/SILA/RAID/Settings/ActionSettingsPopover.vue | 131 | ||||
-rw-r--r-- | src/views/SILA/RAID/Settings/OptionsPopover.vue | 87 | ||||
-rw-r--r-- | src/views/SILA/RAID/Settings/RAIDSettingsPage.vue | 318 | ||||
-rw-r--r-- | src/views/SILA/RAID/Settings/TomeModal.vue | 179 | ||||
-rw-r--r-- | src/views/SILA/RAID/Settings/helpers.js | 62 | ||||
-rw-r--r-- | src/views/SILA/RAID/Settings/index.js | 1 | ||||
-rw-r--r-- | src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue | 267 | ||||
-rw-r--r-- | src/views/SILA/RAID/Specification/index.js | 1 |
10 files changed, 1171 insertions, 0 deletions
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'; |