diff options
Diffstat (limited to 'src/views/SILA/NetworkAdapters')
10 files changed, 1431 insertions, 0 deletions
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'; |