diff options
author | Sneha Patel <Snehaben.Patel@ibm.com> | 2021-09-09 20:40:38 +0300 |
---|---|---|
committer | Dixsie Wolmers <dixsiew@gmail.com> | 2021-09-23 16:37:11 +0300 |
commit | a02c6f94bd541b07067ac30bab609896b3f6f988 (patch) | |
tree | 5e29f169f589609f5c50897c83419eed3755832b /src/views | |
parent | c9cb8d433b7ed5f4d37cd8d946c2593d4d886ce1 (diff) | |
download | webui-vue-a02c6f94bd541b07067ac30bab609896b3f6f988.tar.xz |
Add Assemblies schema to Hardware Status - Inventory and LEDs
Signed-off-by: Sneha Patel <Snehaben.Patel@ibm.com>
Change-Id: I1a4edae664d008a4f618d03d62e2319d8157ed6d
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/HardwareStatus/Inventory/Inventory.vue | 15 | ||||
-rw-r--r-- | src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue | 149 |
2 files changed, 164 insertions, 0 deletions
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue index a729aaa2..e3a7ea2f 100644 --- a/src/views/HardwareStatus/Inventory/Inventory.vue +++ b/src/views/HardwareStatus/Inventory/Inventory.vue @@ -42,6 +42,9 @@ <!-- Processors table --> <table-processors ref="processors" /> + + <!-- Assembly table --> + <table-assembly ref="assembly" /> </b-container> </template> @@ -55,6 +58,7 @@ import TableFans from './InventoryTableFans'; import TableBmcManager from './InventoryTableBmcManager'; import TableChassis from './InventoryTableChassis'; 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'; @@ -72,6 +76,7 @@ export default { TableBmcManager, TableChassis, TableProcessors, + TableAssembly, PageSection, JumpLink: JumpLink16, }, @@ -133,6 +138,12 @@ export default { href: '#system', linkText: this.$t('pageInventory.system'), }, + { + id: 'assembly', + dataRef: 'assembly', + href: '#assembly', + linkText: this.$t('pageInventory.assemblies'), + }, ], }; }, @@ -170,6 +181,9 @@ export default { const systemTablePromise = new Promise((resolve) => { this.$root.$on('hardware-status-system-complete', () => resolve()); }); + const assemblyTablePromise = new Promise((resolve) => { + this.$root.$on('hardware-status-assembly-complete', () => resolve()); + }); // Combine all child component Promises to indicate // when page data load complete Promise.all([ @@ -181,6 +195,7 @@ export default { processorsTablePromise, serviceIndicatorPromise, systemTablePromise, + assemblyTablePromise, ]).finally(() => this.endLoader()); }, }; diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue new file mode 100644 index 00000000..df435c84 --- /dev/null +++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue @@ -0,0 +1,149 @@ +<template> + <page-section :section-title="$t('pageInventory.assemblies')"> + <b-table + sort-icon-left + no-sort-reset + hover + responsive="md" + :items="items" + :fields="fields" + show-empty + :empty-text="$t('global.table.emptyMessage')" + > + <!-- Expand chevron icon --> + <template #cell(expandRow)="row"> + <b-button + variant="link" + data-test-id="hardwareStatus-button-expandAssembly" + :title="expandRowLabel" + class="btn-icon-only" + @click="toggleRowDetails(row)" + > + <icon-chevron /> + <span class="sr-only">{{ expandRowLabel }}</span> + </b-button> + </template> + + <!-- Toggle identify LED --> + <template #cell(identifyLed)="row"> + <b-form-checkbox + v-if="hasIdentifyLed(row.item.identifyLed)" + v-model="row.item.identifyLed" + name="switch" + switch + @change="toggleIdentifyLedValue(row.item)" + > + <span v-if="row.item.identifyLed"> + {{ $t('global.status.on') }} + </span> + <span v-else> {{ $t('global.status.off') }} </span> + </b-form-checkbox> + <div v-else>--</div> + </template> + + <template #row-details="{ item }"> + <b-container fluid> + <b-row> + <b-col class="mt-2" sm="6" xl="6"> + <!-- Nmae --> + <dt>{{ $t('pageInventory.table.name') }}:</dt> + <dd>{{ tableFormatter(item.name) }}</dd> + <!-- Serial number --> + <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt> + <dd>{{ tableFormatter(item.serialNumber) }}</dd> + </b-col> + <b-col class="mt-2" sm="6" xl="6"> + <!-- Model--> + <dt>Model</dt> + <dd>{{ tableFormatter(item.model) }}</dd> + <!-- Spare Part Number --> + <dt>Spare Part Number</dt> + <dd>{{ tableFormatter(item.sparePartNumber) }}</dd> + </b-col> + </b-row> + </b-container> + </template> + </b-table> + </page-section> +</template> + +<script> +import PageSection from '@/components/Global/PageSection'; +import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; + +export default { + components: { IconChevron, PageSection }, + mixins: [BVToastMixin, TableRowExpandMixin, TableDataFormatterMixin], + data() { + return { + fields: [ + { + key: 'expandRow', + label: '', + tdClass: 'table-row-expand', + }, + { + key: 'id', + label: this.$t('pageInventory.table.id'), + formatter: this.tableFormatter, + sortable: true, + }, + { + key: 'partNumber', + label: this.$t('pageInventory.table.partNumber'), + formatter: this.tableFormatter, + sortable: true, + }, + { + key: 'locationNumber', + label: this.$t('pageInventory.table.locationNumber'), + formatter: this.tableFormatter, + sortable: true, + }, + { + key: 'identifyLed', + label: this.$t('pageInventory.table.identifyLed'), + formatter: this.tableFormatter, + }, + ], + expandRowLabel: expandRowLabel, + }; + }, + computed: { + assemblies() { + return this.$store.getters['assemblies/assemblies']; + }, + items() { + if (this.assemblies) { + return this.assemblies; + } else { + return []; + } + }, + }, + created() { + this.$store.dispatch('assemblies/getAssemblyInfo').finally(() => { + // Emit initial data fetch complete to parent component + this.$root.$emit('hardware-status-assembly-complete'); + }); + }, + methods: { + toggleIdentifyLedValue(row) { + this.$store + .dispatch('assemblies/updateIdentifyLedValue', { + uri: row.uri, + identifyLed: row.identifyLed, + }) + .catch(({ message }) => this.errorToast(message)); + }, + hasIdentifyLed(identifyLed) { + return typeof identifyLed === 'boolean'; + }, + }, +}; +</script> |