diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2021-06-10 13:05:21 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-08-20 15:29:30 +0300 |
commit | 05388966bc9ff2d65e7696c209a5827e82d61297 (patch) | |
tree | 2c10c6b3d9bbcaba382bb68c4857571900582a49 /src/views/HardwareStatus/Inventory | |
parent | 3145d4d98b2d4646f958da8e7b409b23da4f9176 (diff) | |
download | webui-vue-05388966bc9ff2d65e7696c209a5827e82d61297.tar.xz |
Add system attention indicators
- Different LEDs and statuses will be added to hardware status page
- Status for power will be shown and LED included is System identify Led
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I8689f7bf3cc02a7a90379ec50b005bf344c091e4
Diffstat (limited to 'src/views/HardwareStatus/Inventory')
3 files changed, 102 insertions, 8 deletions
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue index d8b46b25..a729aaa2 100644 --- a/src/views/HardwareStatus/Inventory/Inventory.vue +++ b/src/views/HardwareStatus/Inventory/Inventory.vue @@ -2,6 +2,9 @@ <b-container fluid="xl"> <page-title /> + <!-- Service indicators --> + <service-indicator /> + <!-- Quicklinks section --> <page-section :section-title="$t('pageInventory.quicklinkTitle')"> <b-row class="w-75"> @@ -44,6 +47,7 @@ <script> import PageTitle from '@/components/Global/PageTitle'; +import ServiceIndicator from './InventoryServiceIndicator'; import TableSystem from './InventoryTableSystem'; import TablePowerSupplies from './InventoryTablePowerSupplies'; import TableDimmSlot from './InventoryTableDimmSlot'; @@ -54,14 +58,13 @@ import TableProcessors from './InventoryTableProcessors'; 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'; export default { components: { PageTitle, + ServiceIndicator, TableDimmSlot, TablePowerSupplies, TableSystem, @@ -141,9 +144,6 @@ export default { }, created() { this.startLoader(); - const systemTablePromise = new Promise((resolve) => { - this.$root.$on('hardware-status-system-complete', () => resolve()); - }); const bmcManagerTablePromise = new Promise((resolve) => { this.$root.$on('hardware-status-bmc-manager-complete', () => resolve()); }); @@ -164,16 +164,23 @@ export default { const processorsTablePromise = new Promise((resolve) => { this.$root.$on('hardware-status-processors-complete', () => resolve()); }); + const serviceIndicatorPromise = new Promise((resolve) => { + this.$root.$on('hardware-status-service-complete', () => resolve()); + }); + const systemTablePromise = new Promise((resolve) => { + this.$root.$on('hardware-status-system-complete', () => resolve()); + }); // Combine all child component Promises to indicate // when page data load complete Promise.all([ - systemTablePromise, bmcManagerTablePromise, chassisTablePromise, dimmSlotTablePromise, fansTablePromise, powerSuppliesTablePromise, processorsTablePromise, + serviceIndicatorPromise, + systemTablePromise, ]).finally(() => this.endLoader()); }, }; diff --git a/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue new file mode 100644 index 00000000..8acf43c5 --- /dev/null +++ b/src/views/HardwareStatus/Inventory/InventoryServiceIndicator.vue @@ -0,0 +1,80 @@ +<template> + <page-section + :section-title="$t('pageInventory.systemIndicator.sectionTitle')" + > + <div class="form-background pl-4 pt-4 pb-1"> + <b-row> + <b-col sm="6" md="3"> + <dl> + <dt>{{ $t('pageInventory.systemIndicator.powerStatus') }}</dt> + <dd> + {{ $t(powerStatus) }} + </dd> + </dl> + </b-col> + <b-col sm="6" md="3"> + <dl> + <dt> + {{ $t('pageInventory.systemIndicator.identifyLed') }} + </dt> + <dd> + <b-form-checkbox + id="identifyLedSwitchService" + v-model="systems.locationIndicatorActive" + data-test-id="inventoryService-toggle-identifyLed" + switch + @change="toggleIdentifyLedSwitch" + > + <span class="sr-only"> + {{ $t('pageInventory.systemIndicator.identifyLed') }} + </span> + <span v-if="systems.locationIndicatorActive"> + {{ $t('global.status.on') }} + </span> + <span v-else>{{ $t('global.status.off') }}</span> + </b-form-checkbox> + </dd> + </dl> + </b-col> + </b-row> + </div> + </page-section> +</template> +<script> +import PageSection from '@/components/Global/PageSection'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; + +export default { + components: { PageSection }, + mixins: [BVToastMixin, TableDataFormatterMixin], + computed: { + systems() { + let systemData = this.$store.getters['system/systems'][0]; + return systemData ? systemData : {}; + }, + serverStatus() { + return this.$store.getters['global/serverStatus']; + }, + powerStatus() { + if (this.serverStatus === 'unreachable') { + return `global.status.off`; + } + return `global.status.${this.serverStatus}`; + }, + }, + created() { + this.$store.dispatch('system/getSystem').finally(() => { + // Emit initial data fetch complete to parent component + this.$root.$emit('hardware-status-service-complete'); + }); + }, + methods: { + toggleIdentifyLedSwitch(state) { + this.$store + .dispatch('system/changeIdentifyLedState', state) + .catch(({ message }) => this.errorToast(message)); + }, + }, +}; +</script> diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue index 54129d1f..f2cdb3ed 100644 --- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue +++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue @@ -30,12 +30,19 @@ <template #cell(locationIndicatorActive)="{ item }"> <b-form-checkbox - id="identifyLedSwitch" + id="identifyLedSwitchSystem" v-model="item.locationIndicatorActive" - data-test-id="hardwareStatus-toggle-identifyLed" + data-test-id="inventorySystem-toggle-identifyLed" switch @change="toggleIdentifyLedSwitch" > + <span class="sr-only"> + {{ $t('pageInventory.table.identifyLed') }} + </span> + <span v-if="item.locationIndicatorActive"> + {{ $t('global.status.on') }} + </span> + <span v-else>{{ $t('global.status.off') }}</span> </b-form-checkbox> </template> |