diff options
Diffstat (limited to 'src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue')
-rw-r--r-- | src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue | 231 |
1 files changed, 231 insertions, 0 deletions
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> |