diff options
author | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-06-10 10:08:22 +0300 |
---|---|---|
committer | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-06-10 10:08:22 +0300 |
commit | 58d1eb3b899b730877299be6635adceb127fe6a9 (patch) | |
tree | 22d26261d8193e6489a559f1a50cd0d4d4c811a1 | |
parent | d6d339de0078789cdef367f96c4ea3580e6257e7 (diff) | |
download | webui-vue-58d1eb3b899b730877299be6635adceb127fe6a9.tar.xz |
Fix inventory page
Id task: SILABMC-155
24 files changed, 125 insertions, 72 deletions
@@ -15,6 +15,7 @@ yarn-error.log* # Editor directories and files .idea .vscode +.prettierrc *.suo *.ntvs* *.njsproj diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index bb56ba83..d86d40de 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -210,7 +210,7 @@ .bootstrap-table__section { position: relative; - margin: 16px 2rem 0 2rem; + margin: 16px 2rem 24px 2rem; width: 90%; } diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue index dd39ddd5..0521dc06 100644 --- a/src/components/Global/PageSection.vue +++ b/src/components/Global/PageSection.vue @@ -1,6 +1,9 @@ <template> <div class="page-section"> <h2 v-if="sectionTitle">{{ sectionTitle }}</h2> + <span v-if="sectionSmallTitle" class="bold-16px"> + {{ sectionSmallTitle }} + </span> <slot /> </div> </template> @@ -13,17 +16,26 @@ export default { type: String, default: '', }, + sectionSmallTitle: { + type: String, + default: '', + }, }, }; </script> <style lang="scss" scoped> .page-section { - margin-bottom: $spacer * 4; + margin-bottom: $spacer * 1; } h2 { @include font-size($h3-font-size); margin-bottom: $spacer; } + +.bold-16px { + display: block; + margin: 25px 0 16px 0; +} </style> diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index 4552633e..fb818451 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -1,26 +1,30 @@ <template> <span :class="['status-icon', status]"> <icon-info v-if="status === 'info'" /> - <icon-success v-else-if="status === 'success'" /> + <img + v-else-if="status === 'success'" + class="status__img" + src="@/assets/images/status/on.svg" + /> <icon-warning v-else-if="status === 'warning'" /> - <icon-danger v-else-if="status === 'danger'" /> + <img + v-else-if="status === 'danger'" + class="status__img" + src="@/assets/images/status/off.svg" + /> <icon-secondary v-else /> </span> </template> <script> import IconInfo from '@carbon/icons-vue/es/information--filled/20'; -import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20'; import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; import IconError from '@carbon/icons-vue/es/error--filled/20'; -import IconMisuse from '@carbon/icons-vue/es/misuse/20'; export default { name: 'StatusIcon', components: { IconInfo: IconInfo, - iconSuccess: IconCheckmark, - iconDanger: IconMisuse, iconSecondary: IconError, iconWarning: IconWarning, }, diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue index 132002fe..0e97f711 100644 --- a/src/views/HardwareStatus/Inventory/Inventory.vue +++ b/src/views/HardwareStatus/Inventory/Inventory.vue @@ -1,20 +1,23 @@ <template> - <b-container fluid="xxl pt-0 m-2"> + <b-container fluid class="p-0 m-0"> <page-title /> <!-- Service indicators --> <service-indicator /> <!-- Quicklinks section --> - <page-section :section-title="$t('pageInventory.quicklinkTitle')"> - <b-row class="w-75"> - <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.quicklinkTitle')" + > + <b-row> + <b-col v-for="column in quicklinkColumns" :key="column.id"> <div v-for="item in column" :key="item.id"> <b-link :href="item.href" :data-ref="item.dataRef" @click.prevent="scrollToOffset" > - <jump-link /> {{ item.linkText }} + {{ item.linkText }} </b-link> </div> </b-col> @@ -60,7 +63,6 @@ import TableProcessors from './InventoryTableProcessors'; import TableAssembly from './InventoryTableAssembly'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import PageSection from '@/components/Global/PageSection'; -import JumpLink16 from '@carbon/icons-vue/es/jump-link/16'; import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin'; import { chunk } from 'lodash'; @@ -77,7 +79,6 @@ export default { TableProcessors, TableAssembly, PageSection, - JumpLink: JumpLink16, }, mixins: [LoadingBarMixin, JumpLinkMixin], beforeRouteLeave(to, from, next) { diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue index 01f4a446..cfb9aa84 100644 --- a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue +++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue @@ -1,8 +1,9 @@ <template> <page-section - :section-title="$t('pageInventory.systemIndicator.sectionTitle')" + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.systemIndicator.sectionTitle')" > - <div class="form-background pl-4 pt-4 pb-1"> + <div class="form-background"> <b-row> <b-col sm="6" md="3"> <dl> @@ -74,3 +75,8 @@ export default { }, }; </script> +<style lang="scss" scoped> +.custom-switch { + margin: 0; +} +</style> diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue index b4010bfe..f7fef0e3 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue @@ -1,13 +1,15 @@ <template> - <page-section :section-title="$t('pageInventory.assemblies')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.assemblies')" + > <b-table + class="bootstrap-rounded-table" sort-icon-left no-sort-reset - hover responsive="md" :items="items" :fields="fields" - show-empty :empty-text="$t('global.table.emptyMessage')" :busy="isBusy" > diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue index 48b914f4..41a88c2e 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue @@ -1,11 +1,14 @@ <template> - <page-section :section-title="$t('pageInventory.bmcManager')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.bmcManager')" + > <b-table + class="bootstrap-rounded-table" responsive="md" - hover + show-empty :items="items" :fields="fields" - show-empty :empty-text="$t('global.table.emptyMessage')" :busy="isBusy" > @@ -15,7 +18,6 @@ variant="link" data-test-id="hardwareStatus-button-expandBmc" :title="expandRowLabel" - class="btn-icon-only" @click="toggleRowDetails(row)" > <icon-chevron /> @@ -243,3 +245,38 @@ export default { }, }; </script> +<style lang="scss" scoped> +.row { + margin: 0px; + flex-wrap: nowrap; +} +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-12px__caps { + color: $text-secondary; +} + +.attrib-names { + border-bottom: 1px solid $faint-secondary-primary-10; + color: $text-secondary !important; + font-weight: 600; +} + +.custom-switch { + margin: 0; +} + +.btn-link { + width: 30px !important; + height: 20px !important; +} +</style> diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue index b49cec7f..60f593f4 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue @@ -1,11 +1,14 @@ <template> - <page-section :section-title="$t('pageInventory.chassis')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.chassis')" + > <b-table + class="bootstrap-rounded-table" responsive="md" - hover + show-empty :items="chassis" :fields="fields" - show-empty :empty-text="$t('global.table.emptyMessage')" :busy="isBusy" > diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue index 65994810..020ab1f6 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue @@ -1,5 +1,8 @@ <template> - <page-section :section-title="$t('pageInventory.dimmSlot')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.dimmSlot')" + > <b-row class="align-items-end"> <b-col sm="6" md="5" xl="4"> <search @@ -15,9 +18,9 @@ </b-col> </b-row> <b-table + class="bootstrap-rounded-table" sort-icon-left no-sort-reset - hover sort-by="health" responsive="md" show-empty diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue index fe788c53..8706f498 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue @@ -1,5 +1,8 @@ <template> - <page-section :section-title="$t('pageInventory.fans')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.fans')" + > <b-row class="align-items-end"> <b-col sm="6" md="5" xl="4"> <search @@ -15,9 +18,9 @@ </b-col> </b-row> <b-table + class="bootstrap-rounded-table" sort-icon-left no-sort-reset - hover responsive="md" sort-by="health" show-empty diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue index aed7871a..9417d9d6 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue @@ -1,5 +1,8 @@ <template> - <page-section :section-title="$t('pageInventory.powerSupplies')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.powerSupplies')" + > <b-row class="align-items-end"> <b-col sm="6" md="5" xl="4"> <search @@ -15,6 +18,7 @@ </b-col> </b-row> <b-table + class="bootstrap-rounded-table" sort-icon-left no-sort-reset hover diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue index 49281e14..3e25747d 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue @@ -1,5 +1,8 @@ <template> - <page-section :section-title="$t('pageInventory.processors')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.processors')" + > <!-- Search --> <b-row class="align-items-end"> <b-col sm="6" md="5" xl="4"> @@ -12,10 +15,12 @@ <table-cell-count :filtered-items-count="filteredRows" :total-number-of-cells="processors.length" - ></table-cell-count> + > + </table-cell-count> </b-col> </b-row> <b-table + class="bootstrap-rounded-table" sort-icon-left no-sort-reset hover diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue index cf2cf020..1576c8d8 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue @@ -1,8 +1,11 @@ <template> - <page-section :section-title="$t('pageInventory.system')"> + <page-section + class="bootstrap-table__section" + :section-small-title="$t('pageInventory.system')" + > <b-table + class="bootstrap-rounded-table" responsive="md" - hover show-empty :items="systems" :fields="fields" @@ -222,3 +225,8 @@ export default { }, }; </script> +<style lang="scss" scoped> +.custom-switch { + margin: 0; +} +</style> diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue index 92df5373..c1716ec6 100644 --- a/src/views/MemoryModules/Specification/MemoryStaticPage.vue +++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue @@ -228,9 +228,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} .info_section { margin-bottom: 0px; } diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue index 844dc693..c526abbd 100644 --- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue +++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue @@ -137,9 +137,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} .info_section { margin-bottom: 0px; } diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue index 16aeec10..64a01241 100644 --- a/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue +++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue @@ -348,10 +348,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} - .bold-16px { display: block; margin: 25px 0 16px 0; diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue index 6890f2c0..de55482d 100644 --- a/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue +++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue @@ -194,10 +194,6 @@ export default { width: auto; } -.bootstrap-table__section { - margin-bottom: 24px; -} - .bold-16px { display: block; margin: 25px 0 16px 0; diff --git a/src/views/SILA/PciDevices/PciDevicesPage.vue b/src/views/SILA/PciDevices/PciDevicesPage.vue index 7eb410f2..adf754ac 100644 --- a/src/views/SILA/PciDevices/PciDevicesPage.vue +++ b/src/views/SILA/PciDevices/PciDevicesPage.vue @@ -151,10 +151,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} - .bold-16px { display: block; margin: 25px 0 16px 0; diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue index f5448871..6a4f631d 100644 --- a/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue +++ b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue @@ -125,9 +125,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} .info_section { margin-bottom: 0px; } diff --git a/src/views/SILA/RAID/Cache/RAIDCachePage.vue b/src/views/SILA/RAID/Cache/RAIDCachePage.vue index 60ca3a81..9196af6b 100644 --- a/src/views/SILA/RAID/Cache/RAIDCachePage.vue +++ b/src/views/SILA/RAID/Cache/RAIDCachePage.vue @@ -111,10 +111,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} - .bold-16px { display: block; margin: 0 0 16px 0; diff --git a/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue index 69380666..615155d3 100644 --- a/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue +++ b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue @@ -272,10 +272,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} - .bold-16px { display: block; margin: 25px 0 16px 0; diff --git a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue index 44eba030..cb0438e1 100644 --- a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue +++ b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue @@ -243,10 +243,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} - .bold-16px { display: block; margin: 25px 0 16px 0; diff --git a/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue index 6a4c79e7..4292db40 100644 --- a/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue +++ b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue @@ -114,9 +114,6 @@ export default { </style> <style lang="scss" scoped> -.bootstrap-table__section { - margin-bottom: 24px; -} .info_section { margin-bottom: 0px; } |