diff options
author | Sandeepa Singh <sandeepa.singh@ibm.com> | 2021-07-06 13:59:10 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-08-10 22:20:42 +0300 |
commit | 7affc529b7fba41193c4d48764707e9961cdd22d (patch) | |
tree | d198c2026a40faf07d622492297aed488b17fccb /src/views/Health | |
parent | 828dda9b187684902710bb11621eca27bf0c6eec (diff) | |
download | webui-vue-7affc529b7fba41193c4d48764707e9961cdd22d.tar.xz |
IA update: Update health section
This is the second update to information architecture changes and
has the following changes:
- Health section is updated to hardware status section
- Hardware status page is updated to inventory and LEDs page
- Route for sensors page has been updated
Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: Ia1ba3a15a243a00f59a2ec646132436eb355a999
Diffstat (limited to 'src/views/Health')
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatus.vue | 174 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue | 252 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue | 188 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue | 162 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableFans.vue | 189 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue | 207 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue | 250 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue | 210 | ||||
-rw-r--r-- | src/views/Health/HardwareStatus/index.js | 2 | ||||
-rw-r--r-- | src/views/Health/PostCodeLogs/PostCodeLogs.vue | 344 | ||||
-rw-r--r-- | src/views/Health/PostCodeLogs/index.js | 2 | ||||
-rw-r--r-- | src/views/Health/Sensors/Sensors.vue | 253 | ||||
-rw-r--r-- | src/views/Health/Sensors/index.js | 2 |
13 files changed, 0 insertions, 2235 deletions
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue deleted file mode 100644 index 3da79dce..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatus.vue +++ /dev/null @@ -1,174 +0,0 @@ -<template> - <b-container fluid="xl"> - <page-title /> - - <!-- Quicklinks section --> - <page-section :section-title="$t('pageHardwareStatus.quicklinkTitle')"> - <b-row class="w-75"> - <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4"> - <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 }} - </b-link> - </div> - </b-col> - </b-row> - </page-section> - - <!-- System table --> - <table-system ref="system" /> - - <!-- BMC manager table --> - <table-bmc-manager ref="bmc" /> - - <!-- Chassis table --> - <table-chassis ref="chassis" /> - - <!-- DIMM slot table --> - <table-dimm-slot ref="dimms" /> - - <!-- Fans table --> - <table-fans ref="fans" /> - - <!-- Power supplies table --> - <table-power-supplies ref="powerSupply" /> - - <!-- Processors table --> - <table-processors ref="processors" /> - </b-container> -</template> - -<script> -import PageTitle from '@/components/Global/PageTitle'; -import TableSystem from './HardwareStatusTableStystem'; -import TablePowerSupplies from './HardwareStatusTablePowerSupplies'; -import TableDimmSlot from './HardwareStatusTableDimmSlot'; -import TableFans from './HardwareStatusTableFans'; -import TableBmcManager from './HardwareStatusTableBmcManager'; -import TableChassis from './HardwareStatusTableChassis'; -import TableProcessors from './HardwareStatusTableProcessors'; -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, - TableDimmSlot, - TablePowerSupplies, - TableSystem, - TableFans, - TableBmcManager, - TableChassis, - TableProcessors, - PageSection, - JumpLink: JumpLink16, - }, - mixins: [LoadingBarMixin, JumpLinkMixin], - beforeRouteLeave(to, from, next) { - // Hide loader if user navigates away from page - // before requests complete - this.hideLoader(); - next(); - }, - data() { - return { - links: [ - { - id: 'system', - dataRef: 'system', - href: '#system', - linkText: this.$t('pageHardwareStatus.system'), - }, - { - id: 'bmc', - dataRef: 'bmc', - href: '#bmc', - linkText: this.$t('pageHardwareStatus.bmcManager'), - }, - { - id: 'chassis', - dataRef: 'chassis', - href: '#chassis', - linkText: this.$t('pageHardwareStatus.chassis'), - }, - { - id: 'dimms', - dataRef: 'dimms', - href: '#dimms', - linkText: this.$t('pageHardwareStatus.dimmSlot'), - }, - { - id: 'fans', - dataRef: 'fans', - href: '#fans', - linkText: this.$t('pageHardwareStatus.fans'), - }, - { - id: 'powerSupply', - dataRef: 'powerSupply', - href: '#powerSupply', - linkText: this.$t('pageHardwareStatus.powerSupplies'), - }, - { - id: 'processors', - dataRef: 'processors', - href: '#processors', - linkText: this.$t('pageHardwareStatus.processors'), - }, - ], - }; - }, - computed: { - quicklinkColumns() { - // Chunk links array to 3 array's to display 3 items per column - return chunk(this.links, 3); - }, - }, - 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()); - }); - const chassisTablePromise = new Promise((resolve) => { - this.$root.$on('hardware-status-chassis-complete', () => resolve()); - }); - const dimmSlotTablePromise = new Promise((resolve) => { - this.$root.$on('hardware-status-dimm-slot-complete', () => resolve()); - }); - const fansTablePromise = new Promise((resolve) => { - this.$root.$on('hardware-status-fans-complete', () => resolve()); - }); - const powerSuppliesTablePromise = new Promise((resolve) => { - this.$root.$on('hardware-status-power-supplies-complete', () => - resolve() - ); - }); - const processorsTablePromise = new Promise((resolve) => { - this.$root.$on('hardware-status-processors-complete', () => resolve()); - }); - // Combine all child component Promises to indicate - // when page data load complete - Promise.all([ - systemTablePromise, - bmcManagerTablePromise, - chassisTablePromise, - dimmSlotTablePromise, - fansTablePromise, - powerSuppliesTablePromise, - processorsTablePromise, - ]).finally(() => this.endLoader()); - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue deleted file mode 100644 index 07157448..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue +++ /dev/null @@ -1,252 +0,0 @@ -<template> - <page-section :section-title="$t('pageHardwareStatus.bmcManager')"> - <b-table - responsive="md" - hover - :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-expandBmc" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - <span class="sr-only">{{ expandRowLabel }}</span> - </b-button> - </template> - - <!-- Health --> - <template #cell(health)="{ value }"> - <status-icon :status="statusIcon(value)" /> - {{ value }} - </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"> - <dl> - <!-- Name --> - <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt> - <dd>{{ tableFormatter(item.name) }}</dd> - <!-- Part number --> - <dt>{{ $t('pageHardwareStatus.table.partNumber') }}:</dt> - <dd>{{ tableFormatter(item.partNumber) }}</dd> - <!-- Serial number --> - <dt>{{ $t('pageHardwareStatus.table.serialNumber') }}:</dt> - <dd>{{ tableFormatter(item.serialNumber) }}</dd> - <!-- Spare part number --> - <dt>{{ $t('pageHardwareStatus.table.sparePartNumber') }}:</dt> - <dd>{{ tableFormatter(item.sparePartNumber) }}</dd> - <!-- Model --> - <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> - <dd>{{ tableFormatter(item.model) }}</dd> - <!-- UUID --> - <dt>{{ $t('pageHardwareStatus.table.uuid') }}:</dt> - <dd>{{ tableFormatter(item.uuid) }}</dd> - <!-- Service entry point UUID --> - <dt> - {{ $t('pageHardwareStatus.table.serviceEntryPointUuid') }}: - </dt> - <dd>{{ tableFormatter(item.serviceEntryPointUuid) }}</dd> - </dl> - </b-col> - <b-col class="mt-2" sm="6" xl="6"> - <dl> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.statusState) }}</dd> - <!-- Power state --> - <dt>{{ $t('pageHardwareStatus.table.power') }}:</dt> - <dd>{{ tableFormatter(item.powerState) }}</dd> - <!-- Health rollup --> - <dt>{{ $t('pageHardwareStatus.table.healthRollup') }}:</dt> - <dd>{{ tableFormatter(item.healthRollup) }}</dd> - <!-- BMC date and time --> - <dt>{{ $t('pageHardwareStatus.table.bmcDateTime') }}:</dt> - <dd> - {{ item.dateTime | formatDate }} - {{ item.dateTime | formatTime }} - </dd> - <!-- Reset date and time --> - <dt>{{ $t('pageHardwareStatus.table.lastResetTime') }}:</dt> - <dd> - {{ item.lastResetTime | formatDate }} - {{ item.lastResetTime | formatTime }} - </dd> - </dl> - </b-col> - </b-row> - <div class="section-divider mb-3 mt-3"></div> - <b-row> - <b-col class="mt-2" sm="6" xl="6"> - <dl> - <!-- Manufacturer --> - <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt> - <dd>{{ tableFormatter(item.manufacturer) }}</dd> - <!-- Description --> - <dt>{{ $t('pageHardwareStatus.table.description') }}:</dt> - <dd>{{ tableFormatter(item.description) }}</dd> - <!-- Manager type --> - <dt>{{ $t('pageHardwareStatus.table.managerType') }}:</dt> - <dd>{{ tableFormatter(item.managerType) }}</dd> - </dl> - </b-col> - <b-col class="mt-2" sm="6" xl="6"> - <!-- Firmware Version --> - <dl> - <dt>{{ $t('pageHardwareStatus.table.firmwareVersion') }}:</dt> - <dd>{{ item.firmwareVersion }}</dd> - </dl> - <!-- Graphical console --> - <p class="mt-1 mb-2 h6 float-none m-0"> - {{ $t('pageHardwareStatus.table.graphicalConsole') }} - </p> - <dl class="ml-4"> - <dt> - {{ $t('pageHardwareStatus.table.connectTypesSupported') }}: - </dt> - <dd> - {{ tableFormatterArray(item.graphicalConsoleConnectTypes) }} - </dd> - <dt> - {{ $t('pageHardwareStatus.table.maxConcurrentSessions') }}: - </dt> - <dd> - {{ tableFormatter(item.graphicalConsoleMaxSessions) }} - </dd> - <dt>{{ $t('pageHardwareStatus.table.serviceEnabled') }}:</dt> - <dd> - {{ tableFormatter(item.graphicalConsoleEnabled) }} - </dd> - </dl> - <!-- Serial console --> - <p class="mt-1 mb-2 h6 float-none m-0"> - {{ $t('pageHardwareStatus.table.serialConsole') }} - </p> - <dl class="ml-4"> - <dt> - {{ $t('pageHardwareStatus.table.connectTypesSupported') }}: - </dt> - <dd> - {{ tableFormatterArray(item.serialConsoleConnectTypes) }} - </dd> - <dt> - {{ $t('pageHardwareStatus.table.maxConcurrentSessions') }}: - </dt> - <dd>{{ tableFormatter(item.serialConsoleMaxSessions) }}</dd> - <dt>{{ $t('pageHardwareStatus.table.serviceEnabled') }}:</dt> - <dd>{{ tableFormatter(item.serialConsoleEnabled) }}</dd> - </dl> - </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 StatusIcon from '@/components/Global/StatusIcon'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; - -export default { - components: { IconChevron, PageSection, StatusIcon }, - mixins: [BVToastMixin, TableRowExpandMixin, TableDataFormatterMixin], - data() { - return { - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - }, - { - key: 'id', - label: this.$t('pageHardwareStatus.table.id'), - formatter: this.tableFormatter, - }, - { - key: 'health', - label: this.$t('pageHardwareStatus.table.health'), - formatter: this.tableFormatter, - }, - { - key: 'locationNumber', - label: this.$t('pageHardwareStatus.table.locationNumber'), - formatter: this.tableFormatter, - }, - { - key: 'identifyLed', - label: this.$t('pageHardwareStatus.table.identifyLed'), - formatter: this.tableFormatter, - }, - ], - expandRowLabel: expandRowLabel, - }; - }, - computed: { - bmc() { - return this.$store.getters['bmc/bmc']; - }, - items() { - if (this.bmc) { - return [this.bmc]; - } else { - return []; - } - }, - }, - created() { - this.$store.dispatch('bmc/getBmcInfo').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('hardware-status-bmc-manager-complete'); - }); - }, - methods: { - toggleIdentifyLedValue(row) { - this.$store - .dispatch('bmc/updateIdentifyLedValue', { - uri: row.uri, - identifyLed: row.identifyLed, - }) - .catch(({ message }) => this.errorToast(message)); - }, - // TO DO: remove hasIdentifyLed method once the following story is merged: - // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/43179 - hasIdentifyLed(identifyLed) { - return typeof identifyLed === 'boolean'; - }, - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue deleted file mode 100644 index 6b783c0f..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue +++ /dev/null @@ -1,188 +0,0 @@ -<template> - <page-section :section-title="$t('pageHardwareStatus.chassis')"> - <b-table - responsive="md" - hover - :items="chassis" - :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-expandChassis" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - <span class="sr-only">{{ expandRowLabel }}</span> - </b-button> - </template> - - <!-- Health --> - <template #cell(health)="{ value }"> - <status-icon :status="statusIcon(value)" /> - {{ value }} - </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"> - <dl> - <!-- Name --> - <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt> - <dd>{{ tableFormatter(item.name) }}</dd> - <!-- Part number --> - <dt>{{ $t('pageHardwareStatus.table.partNumber') }}:</dt> - <dd>{{ tableFormatter(item.partNumber) }}</dd> - <!-- Serial Number --> - <dt>{{ $t('pageHardwareStatus.table.serialNumber') }}:</dt> - <dd>{{ tableFormatter(item.serialNumber) }}</dd> - <!-- Model --> - <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> - <dd class="mb-2"> - {{ tableFormatter(item.model) }} - </dd> - <!-- Asset tag --> - <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt> - <dd class="mb-2"> - {{ tableFormatter(item.assetTag) }} - </dd> - </dl> - </b-col> - <b-col class="mt-2" sm="6" xl="6"> - <dl> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.statusState) }}</dd> - <!-- Power state --> - <dt>{{ $t('pageHardwareStatus.table.power') }}:</dt> - <dd>{{ tableFormatter(item.power) }}</dd> - <!-- Health rollup --> - <dt>{{ $t('pageHardwareStatus.table.healthRollup') }}:</dt> - <dd>{{ tableFormatter(item.healthRollup) }}</dd> - </dl> - </b-col> - </b-row> - <div class="section-divider mb-3 mt-3"></div> - <b-row> - <b-col class="mt-2" sm="6" xl="6"> - <dl> - <!-- Manufacturer --> - <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt> - <dd>{{ tableFormatter(item.manufacturer) }}</dd> - <!-- Chassis Type --> - <dt>{{ $t('pageHardwareStatus.table.chassisType') }}:</dt> - <dd>{{ tableFormatter(item.chassisType) }}</dd> - </dl> - </b-col> - <b-col class="mt-2" sm="6" xl="6"> - <dl> - <!-- Min power --> - <dt>{{ $t('pageHardwareStatus.table.minPowerWatts') }}:</dt> - <dd>{{ tableFormatter(item.minPowerWatts) }}</dd> - <!-- Max power --> - <dt>{{ $t('pageHardwareStatus.table.maxPowerWatts') }}:</dt> - <dd>{{ tableFormatter(item.maxPowerWatts) }}</dd> - </dl> - </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 StatusIcon from '@/components/Global/StatusIcon'; - -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; - -export default { - components: { IconChevron, PageSection, StatusIcon }, - mixins: [BVToastMixin, TableRowExpandMixin, TableDataFormatterMixin], - data() { - return { - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - }, - { - key: 'id', - label: this.$t('pageHardwareStatus.table.id'), - formatter: this.tableFormatter, - }, - { - key: 'health', - label: this.$t('pageHardwareStatus.table.health'), - formatter: this.tableFormatter, - tdClass: 'text-nowrap', - }, - { - key: 'locationNumber', - label: this.$t('pageHardwareStatus.table.locationNumber'), - formatter: this.tableFormatter, - }, - { - key: 'identifyLed', - label: this.$t('pageHardwareStatus.table.identifyLed'), - formatter: this.tableFormatter, - }, - ], - expandRowLabel: expandRowLabel, - }; - }, - computed: { - chassis() { - return this.$store.getters['chassis/chassis']; - }, - }, - created() { - this.$store.dispatch('chassis/getChassisInfo').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('hardware-status-chassis-complete'); - }); - }, - methods: { - toggleIdentifyLedValue(row) { - this.$store - .dispatch('chassis/updateIdentifyLedValue', { - uri: row.uri, - identifyLed: row.identifyLed, - }) - .catch(({ message }) => this.errorToast(message)); - }, - // TO DO: Remove this method when the LocationIndicatorActive is added from backend. - hasIdentifyLed(identifyLed) { - return typeof identifyLed === 'boolean'; - }, - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue deleted file mode 100644 index ca9e949c..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue +++ /dev/null @@ -1,162 +0,0 @@ -<template> - <page-section :section-title="$t('pageHardwareStatus.dimmSlot')"> - <b-row class="align-items-end"> - <b-col sm="6" md="5" xl="4"> - <search - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - </b-col> - <b-col sm="6" md="3" xl="2"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="dimms.length" - ></table-cell-count> - </b-col> - </b-row> - <b-table - sort-icon-left - no-sort-reset - hover - sort-by="health" - responsive="md" - show-empty - :items="dimms" - :fields="fields" - :sort-desc="true" - :sort-compare="sortCompare" - :filter="searchFilter" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - @filtered="onFiltered" - > - <!-- Expand chevron icon --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - data-test-id="hardwareStatus-button-expandDimms" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - <span class="sr-only">{{ expandRowLabel }}</span> - </b-button> - </template> - - <!-- Health --> - <template #cell(health)="{ value }"> - <status-icon :status="statusIcon(value)" /> - {{ value }} - </template> - - <template #row-details="{ item }"> - <b-container fluid> - <b-row> - <b-col sm="6" xl="4"> - <dl> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.statusState) }}</dd> - </dl> - </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 StatusIcon from '@/components/Global/StatusIcon'; -import TableCellCount from '@/components/Global/TableCellCount'; - -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import Search from '@/components/Global/Search'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; - -export default { - components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, - mixins: [ - TableRowExpandMixin, - TableDataFormatterMixin, - TableSortMixin, - SearchFilterMixin, - ], - data() { - return { - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - sortable: false, - }, - { - key: 'id', - label: this.$t('pageHardwareStatus.table.id'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'health', - label: this.$t('pageHardwareStatus.table.health'), - formatter: this.tableFormatter, - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'partNumber', - label: this.$t('pageHardwareStatus.table.partNumber'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'serialNumber', - label: this.$t('pageHardwareStatus.table.serialNumber'), - formatter: this.tableFormatter, - sortable: true, - }, - ], - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - expandRowLabel: expandRowLabel, - }; - }, - computed: { - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.dimms.length; - }, - dimms() { - return this.$store.getters['memory/dimms']; - }, - }, - created() { - this.$store.dispatch('memory/getDimms').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('hardware-status-dimm-slot-complete'); - }); - }, - methods: { - sortCompare(a, b, key) { - if (key === 'health') { - return this.sortStatus(a, b, key); - } - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue deleted file mode 100644 index fb998a38..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue +++ /dev/null @@ -1,189 +0,0 @@ -<template> - <page-section :section-title="$t('pageHardwareStatus.fans')"> - <b-row class="align-items-end"> - <b-col sm="6" md="5" xl="4"> - <search - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - </b-col> - <b-col sm="6" md="3" xl="2"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="fans.length" - ></table-cell-count> - </b-col> - </b-row> - <b-table - sort-icon-left - no-sort-reset - hover - responsive="md" - sort-by="health" - show-empty - :items="fans" - :fields="fields" - :sort-desc="true" - :sort-compare="sortCompare" - :filter="searchFilter" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - @filtered="onFiltered" - > - <!-- Expand chevron icon --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - data-test-id="hardwareStatus-button-expandFans" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - <span class="sr-only">{{ expandRowLabel }}</span> - </b-button> - </template> - - <!-- Health --> - <template #cell(health)="{ value }"> - <status-icon :status="statusIcon(value)" /> - {{ value }} - </template> - - <template #row-details="{ item }"> - <b-container fluid> - <b-row> - <b-col sm="6" xl="4"> - <dl> - <!-- Name --> - <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt> - <dd>{{ tableFormatter(item.name) }}</dd> - </dl> - <dl> - <!-- Serial number --> - <dt>{{ $t('pageHardwareStatus.table.serialNumber') }}:</dt> - <dd>{{ tableFormatter(item.serialNumber) }}</dd> - </dl> - <dl> - <!-- Part number --> - <dt>{{ $t('pageHardwareStatus.table.partNumber') }}:</dt> - <dd>{{ tableFormatter(item.partNumber) }}</dd> - </dl> - <dl> - <!-- Fan speed --> - <dt>{{ $t('pageHardwareStatus.table.fanSpeed') }}:</dt> - <dd>{{ tableFormatter(item.speed) }}</dd> - </dl> - </b-col> - <b-col sm="6" xl="4"> - <dl> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.statusState) }}</dd> - </dl> - <dl> - <!-- Health Rollup state --> - <dt> - {{ $t('pageHardwareStatus.table.statusHealthRollup') }}: - </dt> - <dd>{{ tableFormatter(item.healthRollup) }}</dd> - </dl> - </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 TableCellCount from '@/components/Global/TableCellCount'; - -import StatusIcon from '@/components/Global/StatusIcon'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import Search from '@/components/Global/Search'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; - -export default { - components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, - mixins: [ - TableRowExpandMixin, - TableDataFormatterMixin, - TableSortMixin, - SearchFilterMixin, - ], - data() { - return { - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - sortable: false, - }, - { - key: 'id', - label: this.$t('pageHardwareStatus.table.id'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'health', - label: this.$t('pageHardwareStatus.table.health'), - formatter: this.tableFormatter, - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'locationNumber', - label: this.$t('pageHardwareStatus.table.locationNumber'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'identifyLed', - label: this.$t('pageHardwareStatus.table.identifyLed'), - formatter: this.tableFormatter, - }, - ], - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - expandRowLabel: expandRowLabel, - }; - }, - computed: { - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.fans.length; - }, - fans() { - return this.$store.getters['fan/fans']; - }, - }, - created() { - this.$store.dispatch('fan/getFanInfo').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('hardware-status-fans-complete'); - }); - }, - methods: { - sortCompare(a, b, key) { - if (key === 'health') { - return this.sortStatus(a, b, key); - } - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue deleted file mode 100644 index a3d07655..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue +++ /dev/null @@ -1,207 +0,0 @@ -<template> - <page-section :section-title="$t('pageHardwareStatus.powerSupplies')"> - <b-row class="align-items-end"> - <b-col sm="6" md="5" xl="4"> - <search - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - </b-col> - <b-col sm="6" md="3" xl="2"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="powerSupplies.length" - ></table-cell-count> - </b-col> - </b-row> - <b-table - sort-icon-left - no-sort-reset - hover - responsive="md" - sort-by="health" - show-empty - :items="powerSupplies" - :fields="fields" - :sort-desc="true" - :sort-compare="sortCompare" - :filter="searchFilter" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - @filtered="onFiltered" - > - <!-- Expand chevron icon --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - data-test-id="hardwareStatus-button-expandPowerSupplies" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - <span class="sr-only">{{ expandRowLabel }}</span> - </b-button> - </template> - - <!-- Health --> - <template #cell(health)="{ value }"> - <status-icon :status="statusIcon(value)" /> - {{ value }} - </template> - - <template #row-details="{ item }"> - <b-container fluid> - <b-row> - <b-col sm="6" xl="4"> - <dl> - <!-- Name --> - <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt> - <dd>{{ tableFormatter(item.name) }}</dd> - <!-- Part number --> - <dt>{{ $t('pageHardwareStatus.table.partNumber') }}:</dt> - <dd>{{ tableFormatter(item.partNumber) }}</dd> - <!-- Serial number --> - <dt>{{ $t('pageHardwareStatus.table.serialNumber') }}:</dt> - <dd>{{ tableFormatter(item.serialNumber) }}</dd> - <!-- Spare part number --> - <dt>{{ $t('pageHardwareStatus.table.sparePartNumber') }}:</dt> - <dd>{{ tableFormatter(item.sparePartNumber) }}</dd> - <!-- Model --> - <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> - <dd>{{ tableFormatter(item.model) }}</dd> - </dl> - </b-col> - <b-col sm="6" xl="4"> - <dl> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.statusState) }}</dd> - <!-- Status Health rollup state --> - <dt> - {{ $t('pageHardwareStatus.table.statusHealthRollup') }}: - </dt> - <dd>{{ tableFormatter(item.statusHealth) }}</dd> - <!-- Efficiency percent --> - <dt>{{ $t('pageHardwareStatus.table.efficiencyPercent') }}:</dt> - <dd>{{ tableFormatter(item.efficiencyPercent) }}</dd> - <!-- Power input watts --> - <dt>{{ $t('pageHardwareStatus.table.powerInputWatts') }}:</dt> - <dd>{{ tableFormatter(item.powerInputWatts) }}</dd> - </dl> - </b-col> - </b-row> - <div class="section-divider mb-3 mt-3"></div> - <b-row> - <b-col sm="6" xl="4"> - <dl> - <!-- Manufacturer --> - <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt> - <dd>{{ tableFormatter(item.manufacturer) }}</dd> - </dl> - </b-col> - <b-col sm="6" xl="4"> - <dl> - <!-- Firmware version --> - <dt>{{ $t('pageHardwareStatus.table.firmwareVersion') }}:</dt> - <dd>{{ tableFormatter(item.firmwareVersion) }}</dd> - </dl> - </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 StatusIcon from '@/components/Global/StatusIcon'; -import TableCellCount from '@/components/Global/TableCellCount'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import Search from '@/components/Global/Search'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; - -export default { - components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, - mixins: [ - TableRowExpandMixin, - TableDataFormatterMixin, - TableSortMixin, - SearchFilterMixin, - ], - data() { - return { - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - sortable: false, - }, - { - key: 'id', - label: this.$t('pageHardwareStatus.table.id'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'health', - label: this.$t('pageHardwareStatus.table.health'), - formatter: this.tableFormatter, - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'locationNumber', - label: this.$t('pageHardwareStatus.table.locationNumber'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'identifyLed', - label: this.$t('pageHardwareStatus.table.identifyLed'), - formatter: this.tableFormatter, - }, - ], - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - expandRowLabel: expandRowLabel, - }; - }, - computed: { - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.powerSupplies.length; - }, - powerSupplies() { - return this.$store.getters['powerSupply/powerSupplies']; - }, - }, - created() { - this.$store.dispatch('powerSupply/getAllPowerSupplies').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('hardware-status-power-supplies-complete'); - }); - }, - methods: { - sortCompare(a, b, key) { - if (key === 'health') { - return this.sortStatus(a, b, key); - } - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue deleted file mode 100644 index e3b5735d..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue +++ /dev/null @@ -1,250 +0,0 @@ -<template> - <page-section :section-title="$t('pageHardwareStatus.processors')"> - <!-- Search --> - <b-row class="align-items-end"> - <b-col sm="6" md="5" xl="4"> - <search - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - </b-col> - <b-col sm="6" md="3" xl="2"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="processors.length" - ></table-cell-count> - </b-col> - </b-row> - <b-table - sort-icon-left - no-sort-reset - hover - responsive="md" - show-empty - :items="processors" - :fields="fields" - :sort-desc="true" - :filter="searchFilter" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - @filtered="onFiltered" - > - <!-- Expand button --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - data-test-id="hardwareStatus-button-expandProcessors" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - <span class="sr-only">{{ expandRowLabel }}</span> - </b-button> - </template> - <!-- Health --> - <template #cell(health)="{ value }"> - <status-icon :status="statusIcon(value)" /> - {{ value }} - </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"> - <dl> - <!-- Name --> - <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt> - <dd>{{ tableFormatter(item.name) }}</dd> - <!-- Part Number --> - <dt>{{ $t('pageHardwareStatus.table.partNumber') }}:</dt> - <dd>{{ tableFormatter(item.partNumber) }}</dd> - <!-- Serial Number --> - <dt>{{ $t('pageHardwareStatus.table.serialNumber') }}:</dt> - <dd>{{ tableFormatter(item.serialNumber) }}</dd> - <!-- Spare Part Number --> - <dt>{{ $t('pageHardwareStatus.table.sparePartNumber') }}:</dt> - <dd>{{ tableFormatter(item.sparePartNumber) }}</dd> - <!-- Model --> - <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> - <dd>{{ tableFormatter(item.model) }}</dd> - <!-- Asset Tag --> - <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt> - <dd>{{ tableFormatter(item.assetTag) }}</dd> - </dl> - </b-col> - <b-col class="mt-2" sm="6" xl="6"> - <dl> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.statusState) }}</dd> - <!-- Health Rollup --> - <dt>{{ $t('pageHardwareStatus.table.healthRollup') }}:</dt> - <dd>{{ tableFormatter(item.healthRollup) }}</dd> - </dl> - </b-col> - </b-row> - <div class="section-divider mb-3 mt-3"></div> - <b-row> - <b-col class="mt-1" sm="6" xl="6"> - <dl> - <!-- Manufacturer --> - <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt> - <dd>{{ tableFormatter(item.manufacturer) }}</dd> - <!-- Processor Type --> - <dt>{{ $t('pageHardwareStatus.table.processorType') }}:</dt> - <dd>{{ tableFormatter(item.processorType) }}</dd> - <!-- Processor Architecture --> - <dt> - {{ $t('pageHardwareStatus.table.processorArchitecture') }}: - </dt> - <dd>{{ tableFormatter(item.processorArchitecture) }}</dd> - <!-- Instruction Set --> - <dt>{{ $t('pageHardwareStatus.table.instructionSet') }}:</dt> - <dd>{{ tableFormatter(item.instructionSet) }}</dd> - <!-- Version --> - <dt>{{ $t('pageHardwareStatus.table.version') }}:</dt> - <dd>{{ tableFormatter(item.version) }}</dd> - </dl> - </b-col> - <b-col class="mt-1" sm="6" xl="6"> - <dl> - <!-- Min Speed MHz --> - <dt>{{ $t('pageHardwareStatus.table.minSpeedMHz') }}:</dt> - <dd>{{ tableFormatter(item.minSpeedMHz) }}</dd> - <!-- Max Speed MHz --> - <dt>{{ $t('pageHardwareStatus.table.maxSpeedMHz') }}:</dt> - <dd>{{ tableFormatter(item.maxSpeedMHz) }}</dd> - <!-- Total Cores --> - <dt>{{ $t('pageHardwareStatus.table.totalCores') }}:</dt> - <dd>{{ tableFormatter(item.totalCores) }}</dd> - <!-- Total Threads --> - <dt>{{ $t('pageHardwareStatus.table.totalThreads') }}:</dt> - <dd>{{ tableFormatter(item.totalThreads) }}</dd> - </dl> - </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 StatusIcon from '@/components/Global/StatusIcon'; -import TableCellCount from '@/components/Global/TableCellCount'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; -import Search from '@/components/Global/Search'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; - -export default { - components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, - mixins: [ - BVToastMixin, - TableRowExpandMixin, - TableDataFormatterMixin, - TableSortMixin, - SearchFilterMixin, - ], - data() { - return { - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - sortable: false, - }, - { - key: 'id', - label: this.$t('pageHardwareStatus.table.id'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'health', - label: this.$t('pageHardwareStatus.table.health'), - formatter: this.tableFormatter, - sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'locationNumber', - label: this.$t('pageHardwareStatus.table.locationNumber'), - formatter: this.tableFormatter, - sortable: true, - }, - { - key: 'identifyLed', - label: this.$t('pageHardwareStatus.table.identifyLed'), - formatter: this.tableFormatter, - sortable: false, - }, - ], - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - expandRowLabel: expandRowLabel, - }; - }, - computed: { - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.processors.length; - }, - processors() { - return this.$store.getters['processors/processors']; - }, - }, - created() { - this.$store.dispatch('processors/getProcessorsInfo').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('hardware-status-processors-complete'); - }); - }, - methods: { - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - toggleIdentifyLedValue(row) { - this.$store - .dispatch('processors/updateIdentifyLedValue', { - uri: row.uri, - identifyLed: row.identifyLed, - }) - .catch(({ message }) => this.errorToast(message)); - }, - // TO DO: remove hasIdentifyLed when the following is merged: - // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045 - hasIdentifyLed(identifyLed) { - return typeof identifyLed === 'boolean'; - }, - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue deleted file mode 100644 index 1dccd51c..00000000 --- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue +++ /dev/null @@ -1,210 +0,0 @@ -<template> - <page-section :section-title="$t('pageHardwareStatus.system')"> - <b-table - responsive="md" - hover - show-empty - :items="systems" - :fields="fields" - :empty-text="$t('global.table.emptyMessage')" - > - <!-- Expand chevron icon --> - <template #cell(expandRow)="row"> - <b-button - variant="link" - data-test-id="hardwareStatus-button-expandSystem" - :title="expandRowLabel" - class="btn-icon-only" - @click="toggleRowDetails(row)" - > - <icon-chevron /> - <span class="sr-only">{{ expandRowLabel }}</span> - </b-button> - </template> - - <!-- Health --> - <template #cell(health)="{ value }"> - <status-icon :status="statusIcon(value)" /> - {{ value }} - </template> - - <template #cell(locationIndicatorActive)="{ item }"> - <b-form-checkbox - id="identifyLedSwitch" - v-model="item.locationIndicatorActive" - data-test-id="hardwareStatus-toggle-identifyLed" - switch - @change="toggleIdentifyLedSwitch" - > - </b-form-checkbox> - </template> - - <template #row-details="{ item }"> - <b-container fluid> - <b-row> - <b-col class="mt-2" sm="6"> - <dl> - <!-- Serial number --> - <dt>{{ $t('pageHardwareStatus.table.serialNumber') }}:</dt> - <dd>{{ tableFormatter(item.serialNumber) }}</dd> - <!-- Model --> - <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> - <dd>{{ tableFormatter(item.model) }}</dd> - <!-- Asset tag --> - <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt> - <dd class="mb-2"> - {{ tableFormatter(item.assetTag) }} - </dd> - </dl> - </b-col> - <b-col class="mt-2" sm="6"> - <dl> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.statusState) }}</dd> - <!-- Power state --> - <dt>{{ $t('pageHardwareStatus.table.power') }}:</dt> - <dd>{{ tableFormatter(item.powerState) }}</dd> - <!-- Health rollup --> - <dt>{{ $t('pageHardwareStatus.table.healthRollup') }}:</dt> - <dd>{{ tableFormatter(item.healthRollup) }}</dd> - </dl> - </b-col> - </b-row> - <div class="section-divider mb-3 mt-3"></div> - <b-row> - <b-col class="mt-1" sm="6"> - <dl> - <!-- Manufacturer --> - <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt> - <dd>{{ tableFormatter(item.assetTag) }}</dd> - <!-- Description --> - <dt>{{ $t('pageHardwareStatus.table.description') }}:</dt> - <dd>{{ tableFormatter(item.description) }}</dd> - <!-- Sub Model --> - <dt>{{ $t('pageHardwareStatus.table.subModel') }}:</dt> - <dd> - {{ tableFormatter(item.subModel) }} - </dd> - <!-- System Type --> - <dt>{{ $t('pageHardwareStatus.table.systemType') }}:</dt> - <dd> - {{ tableFormatter(item.systemType) }} - </dd> - </dl> - </b-col> - <b-col sm="6"> - <dl> - <!-- Memory Summary --> - <dt class="mt-1 mb-2 font-weight-bold float-none"> - {{ $t('pageHardwareStatus.table.memorySummary') }} - </dt> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.memorySummaryState) }}</dd> - <!-- Health --> - <dt>{{ $t('pageHardwareStatus.table.health') }}:</dt> - <dd>{{ tableFormatter(item.memorySummaryHealth) }}</dd> - <!-- Health Roll --> - <dt>{{ $t('pageHardwareStatus.table.healthRollup') }}:</dt> - <dd>{{ tableFormatter(item.memorySummaryHealthRoll) }}</dd> - - <!-- Processor Summary --> - <dt class="mt-1 mb-2 font-weight-bold float-none"> - {{ $t('pageHardwareStatus.table.processorSummary') }} - </dt> - <!-- Status state --> - <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> - <dd>{{ tableFormatter(item.processorSummaryState) }}</dd> - <!-- Health --> - <dt>{{ $t('pageHardwareStatus.table.health') }}:</dt> - <dd>{{ tableFormatter(item.processorSummaryHealth) }}</dd> - <!-- Health Rollup --> - <dt>{{ $t('pageHardwareStatus.table.healthRollup') }}:</dt> - <dd>{{ tableFormatter(item.processorSummaryHealthRoll) }}</dd> - <!-- Count --> - <dt>{{ $t('pageHardwareStatus.table.count') }}:</dt> - <dd>{{ tableFormatter(item.processorSummaryCount) }}</dd> - </dl> - </b-col> - </b-row> - </b-container> - </template> - </b-table> - </page-section> -</template> - -<script> -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import PageSection from '@/components/Global/PageSection'; -import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; - -import StatusIcon from '@/components/Global/StatusIcon'; - -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; - -export default { - components: { IconChevron, PageSection, StatusIcon }, - mixins: [BVToastMixin, TableRowExpandMixin, TableDataFormatterMixin], - data() { - return { - fields: [ - { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - }, - { - key: 'id', - label: this.$t('pageHardwareStatus.table.id'), - formatter: this.tableFormatter, - }, - { - key: 'hardwareType', - label: this.$t('pageHardwareStatus.table.hardwareType'), - formatter: this.tableFormatter, - tdClass: 'text-nowrap', - }, - { - key: 'health', - label: this.$t('pageHardwareStatus.table.health'), - formatter: this.tableFormatter, - tdClass: 'text-nowrap', - }, - { - key: 'locationNumber', - label: this.$t('pageHardwareStatus.table.locationNumber'), - formatter: this.tableFormatter, - }, - { - key: 'locationIndicatorActive', - label: this.$t('pageHardwareStatus.table.identifyLed'), - formatter: this.tableFormatter, - }, - ], - expandRowLabel: expandRowLabel, - }; - }, - computed: { - systems() { - return this.$store.getters['system/systems']; - }, - }, - created() { - this.$store.dispatch('system/getSystem').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('hardware-status-system-complete'); - }); - }, - methods: { - toggleIdentifyLedSwitch(state) { - this.$store - .dispatch('system/changeIdentifyLedState', state) - .catch(({ message }) => this.errorToast(message)); - }, - }, -}; -</script> diff --git a/src/views/Health/HardwareStatus/index.js b/src/views/Health/HardwareStatus/index.js deleted file mode 100644 index 25d4551c..00000000 --- a/src/views/Health/HardwareStatus/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import HardwareStatus from './HardwareStatus.vue'; -export default HardwareStatus; diff --git a/src/views/Health/PostCodeLogs/PostCodeLogs.vue b/src/views/Health/PostCodeLogs/PostCodeLogs.vue deleted file mode 100644 index 1154cbff..00000000 --- a/src/views/Health/PostCodeLogs/PostCodeLogs.vue +++ /dev/null @@ -1,344 +0,0 @@ -<template> - <b-container fluid="xl"> - <page-title /> - <b-row class="align-items-start"> - <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4"> - <search - :placeholder="$t('pagePostCodeLogs.table.searchLogs')" - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - <div class="ml-sm-4"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="allLogs.length" - ></table-cell-count> - </div> - </b-col> - <b-col sm="8" md="7" xl="6"> - <table-date-filter @change="onChangeDateTimeFilter" /> - </b-col> - </b-row> - <b-row> - <b-col xl="12" class="text-right"> - <b-button - variant="primary" - :disabled="allLogs.length === 0" - :download="exportFileNameByDate()" - :href="href" - > - <icon-export /> {{ $t('pagePostCodeLogs.button.exportAll') }} - </b-button> - </b-col> - </b-row> - <b-row> - <b-col> - <table-toolbar - ref="toolbar" - :selected-items-count="selectedRows.length" - @clear-selected="clearSelectedRows($refs.table)" - > - <template #export> - <table-toolbar-export - :data="batchExportData" - :file-name="exportFileNameByDate('export')" - /> - </template> - </table-toolbar> - <b-table - id="table-post-code-logs" - ref="table" - responsive="md" - selectable - no-select-on-click - sort-icon-left - hover - no-sort-reset - sort-desc - show-empty - sort-by="id" - :fields="fields" - :items="filteredLogs" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - :per-page="perPage" - :current-page="currentPage" - :filter="searchFilter" - @filtered="onFiltered" - @row-selected="onRowSelected($event, filteredLogs.length)" - > - <!-- Checkbox column --> - <template #head(checkbox)> - <b-form-checkbox - v-model="tableHeaderCheckboxModel" - data-test-id="postCode-checkbox-selectAll" - :indeterminate="tableHeaderCheckboxIndeterminate" - @change="onChangeHeaderCheckbox($refs.table)" - > - <span class="sr-only">{{ $t('global.table.selectAll') }}</span> - </b-form-checkbox> - </template> - <template #cell(checkbox)="row"> - <b-form-checkbox - v-model="row.rowSelected" - :data-test-id="`postCode-checkbox-selectRow-${row.index}`" - @change="toggleSelectRow($refs.table, row.index)" - > - <span class="sr-only">{{ $t('global.table.selectItem') }}</span> - </b-form-checkbox> - </template> - <!-- Date column --> - <template #cell(date)="{ value }"> - <p class="mb-0">{{ value | formatDate }}</p> - <p class="mb-0">{{ value | formatTime }}</p> - </template> - - <!-- Actions column --> - <template #cell(actions)="row"> - <table-row-action - v-for="(action, index) in row.item.actions" - :key="index" - :value="action.value" - :title="action.title" - :row-data="row.item" - :btn-icon-only="true" - :export-name="exportFileNameByDate(action.value)" - :download-location="row.item.uri" - :download-in-new-tab="true" - > - <template #icon> - <icon-export v-if="action.value === 'export'" /> - <icon-download v-if="action.value === 'download'" /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> - - <!-- Table pagination --> - <b-row> - <b-col sm="6"> - <b-form-group - class="table-pagination-select" - :label="$t('global.table.itemsPerPage')" - label-for="pagination-items-per-page" - > - <b-form-select - id="pagination-items-per-page" - v-model="perPage" - :options="itemsPerPageOptions" - /> - </b-form-group> - </b-col> - <b-col sm="6"> - <b-pagination - v-model="currentPage" - first-number - last-number - :per-page="perPage" - :total-rows="getTotalRowCount(filteredLogs.length)" - aria-controls="table-post-code-logs" - /> - </b-col> - </b-row> - </b-container> -</template> - -<script> -import IconDownload from '@carbon/icons-vue/es/download/20'; -import IconExport from '@carbon/icons-vue/es/document--export/20'; -import { omit } from 'lodash'; -import PageTitle from '@/components/Global/PageTitle'; -import Search from '@/components/Global/Search'; -import TableCellCount from '@/components/Global/TableCellCount'; -import TableDateFilter from '@/components/Global/TableDateFilter'; -import TableRowAction from '@/components/Global/TableRowAction'; -import TableToolbar from '@/components/Global/TableToolbar'; -import TableToolbarExport from '@/components/Global/TableToolbarExport'; -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; -import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; -import BVPaginationMixin, { - currentPage, - perPage, - itemsPerPageOptions, -} from '@/components/Mixins/BVPaginationMixin'; -import BVTableSelectableMixin, { - selectedRows, - tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate, -} from '@/components/Mixins/BVTableSelectableMixin'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import TableRowExpandMixin, { - expandRowLabel, -} from '@/components/Mixins/TableRowExpandMixin'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; - -export default { - components: { - IconExport, - IconDownload, - PageTitle, - Search, - TableCellCount, - TableRowAction, - TableToolbar, - TableToolbarExport, - TableDateFilter, - }, - mixins: [ - BVPaginationMixin, - BVTableSelectableMixin, - BVToastMixin, - LoadingBarMixin, - TableFilterMixin, - TableDataFormatterMixin, - TableSortMixin, - TableRowExpandMixin, - SearchFilterMixin, - ], - beforeRouteLeave(to, from, next) { - // Hide loader if the user navigates to another page - // before request is fulfilled. - this.hideLoader(); - next(); - }, - data() { - return { - fields: [ - { - key: 'checkbox', - sortable: false, - }, - { - key: 'date', - label: this.$t('pagePostCodeLogs.table.created'), - }, - { - key: 'timeStampOffset', - label: this.$t('pagePostCodeLogs.table.timeStampOffset'), - }, - { - key: 'bootCount', - label: this.$t('pagePostCodeLogs.table.bootCount'), - }, - { - key: 'postCode', - label: this.$t('pagePostCodeLogs.table.postCode'), - }, - { - key: 'actions', - label: '', - tdClass: 'text-right text-nowrap', - }, - ], - expandRowLabel, - activeFilters: [], - currentPage: currentPage, - filterStartDate: null, - filterEndDate: null, - itemsPerPageOptions: itemsPerPageOptions, - perPage: perPage, - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - selectedRows: selectedRows, - tableHeaderCheckboxModel: tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, - }; - }, - computed: { - href() { - return `data:text/json;charset=utf-8,${this.exportAllLogsString()}`; - }, - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.filteredLogs.length; - }, - allLogs() { - return this.$store.getters['postCodeLogs/allPostCodes'].map( - (postCodes) => { - return { - ...postCodes, - actions: [ - { - value: 'export', - title: this.$t('pagePostCodeLogs.action.exportLogs'), - }, - { - value: 'download', - title: this.$t('pagePostCodeLogs.action.downloadDetails'), - }, - ], - }; - } - ); - }, - batchExportData() { - return this.selectedRows.map((row) => omit(row, 'actions')); - }, - filteredLogsByDate() { - return this.getFilteredTableDataByDate( - this.allLogs, - this.filterStartDate, - this.filterEndDate - ); - }, - filteredLogs() { - return this.getFilteredTableData( - this.filteredLogsByDate, - this.activeFilters - ); - }, - }, - created() { - this.startLoader(); - this.$store - .dispatch('postCodeLogs/getPostCodesLogData') - .finally(() => this.endLoader()); - }, - methods: { - exportAllLogsString() { - { - return this.$store.getters['postCodeLogs/allPostCodes'].map( - (postCodes) => { - const allLogsString = JSON.stringify(postCodes); - return allLogsString; - } - ); - } - }, - onFilterChange({ activeFilters }) { - this.activeFilters = activeFilters; - }, - onChangeDateTimeFilter({ fromDate, toDate }) { - this.filterStartDate = fromDate; - this.filterEndDate = toDate; - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - // Create export file name based on date and action - exportFileNameByDate(value) { - let date = new Date(); - date = - date.toISOString().slice(0, 10) + - '_' + - date.toString().split(':').join('-').split(' ')[4]; - let fileName; - if (value === 'download') { - fileName = this.$t('pagePostCodeLogs.downloadFilePrefix'); - } else if (value === 'export') { - fileName = this.$t('pagePostCodeLogs.exportFilePrefix'); - } else { - fileName = this.$t('pagePostCodeLogs.allExportFilePrefix'); - } - return fileName + date; - }, - }, -}; -</script> diff --git a/src/views/Health/PostCodeLogs/index.js b/src/views/Health/PostCodeLogs/index.js deleted file mode 100644 index ab591124..00000000 --- a/src/views/Health/PostCodeLogs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import PostCodeLogs from './PostCodeLogs.vue'; -export default PostCodeLogs; diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue deleted file mode 100644 index c69532a6..00000000 --- a/src/views/Health/Sensors/Sensors.vue +++ /dev/null @@ -1,253 +0,0 @@ -<template> - <b-container fluid="xl"> - <page-title /> - <b-row class="align-items-end"> - <b-col sm="6" md="5" xl="4"> - <search - :placeholder="$t('pageSensors.searchForSensors')" - data-test-id="sensors-input-searchForSensors" - @change-search="onChangeSearchInput" - @clear-search="onClearSearchInput" - /> - </b-col> - <b-col sm="3" md="3" xl="2"> - <table-cell-count - :filtered-items-count="filteredRows" - :total-number-of-cells="allSensors.length" - ></table-cell-count> - </b-col> - <b-col sm="3" md="4" xl="6" class="text-right"> - <table-filter :filters="tableFilters" @filter-change="onFilterChange" /> - </b-col> - </b-row> - <b-row> - <b-col xl="12"> - <table-toolbar - ref="toolbar" - :selected-items-count="selectedRows.length" - @clear-selected="clearSelectedRows($refs.table)" - > - <template #toolbar-buttons> - <table-toolbar-export - :data="selectedRows" - :file-name="exportFileNameByDate()" - /> - </template> - </table-toolbar> - <b-table - ref="table" - responsive="md" - selectable - no-select-on-click - sort-icon-left - hover - no-sort-reset - sticky-header="75vh" - sort-by="status" - show-empty - :no-border-collapse="true" - :items="filteredSensors" - :fields="fields" - :sort-desc="true" - :sort-compare="sortCompare" - :filter="searchFilter" - :empty-text="$t('global.table.emptyMessage')" - :empty-filtered-text="$t('global.table.emptySearchMessage')" - @filtered="onFiltered" - @row-selected="onRowSelected($event, filteredSensors.length)" - > - <!-- Checkbox column --> - <template #head(checkbox)> - <b-form-checkbox - v-model="tableHeaderCheckboxModel" - :indeterminate="tableHeaderCheckboxIndeterminate" - @change="onChangeHeaderCheckbox($refs.table)" - > - <span class="sr-only">{{ $t('global.table.selectAll') }}</span> - </b-form-checkbox> - </template> - <template #cell(checkbox)="row"> - <b-form-checkbox - v-model="row.rowSelected" - @change="toggleSelectRow($refs.table, row.index)" - > - <span class="sr-only">{{ $t('global.table.selectItem') }}</span> - </b-form-checkbox> - </template> - - <template #cell(status)="{ value }"> - <status-icon :status="statusIcon(value)" /> {{ value }} - </template> - <template #cell(currentValue)="data"> - {{ data.value }} {{ data.item.units }} - </template> - <template #cell(lowerCaution)="data"> - {{ data.value }} {{ data.item.units }} - </template> - <template #cell(upperCaution)="data"> - {{ data.value }} {{ data.item.units }} - </template> - <template #cell(lowerCritical)="data"> - {{ data.value }} {{ data.item.units }} - </template> - <template #cell(upperCritical)="data"> - {{ data.value }} {{ data.item.units }} - </template> - </b-table> - </b-col> - </b-row> - </b-container> -</template> - -<script> -import PageTitle from '@/components/Global/PageTitle'; -import Search from '@/components/Global/Search'; -import StatusIcon from '@/components/Global/StatusIcon'; -import TableFilter from '@/components/Global/TableFilter'; -import TableToolbar from '@/components/Global/TableToolbar'; -import TableToolbarExport from '@/components/Global/TableToolbarExport'; -import TableCellCount from '@/components/Global/TableCellCount'; - -import BVTableSelectableMixin, { - selectedRows, - tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate, -} from '@/components/Mixins/BVTableSelectableMixin'; -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; -import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; -import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; -import TableSortMixin from '@/components/Mixins/TableSortMixin'; -import SearchFilterMixin, { - searchFilter, -} from '@/components/Mixins/SearchFilterMixin'; - -export default { - name: 'Sensors', - components: { - PageTitle, - Search, - StatusIcon, - TableCellCount, - TableFilter, - TableToolbar, - TableToolbarExport, - }, - mixins: [ - TableFilterMixin, - BVTableSelectableMixin, - LoadingBarMixin, - TableDataFormatterMixin, - TableSortMixin, - SearchFilterMixin, - ], - beforeRouteLeave(to, from, next) { - this.hideLoader(); - next(); - }, - data() { - return { - fields: [ - { - key: 'checkbox', - sortable: false, - label: '', - }, - { - key: 'name', - sortable: true, - label: this.$t('pageSensors.table.name'), - }, - { - key: 'status', - sortable: true, - label: this.$t('pageSensors.table.status'), - tdClass: 'text-nowrap', - }, - { - key: 'lowerCritical', - formatter: this.tableFormatter, - label: this.$t('pageSensors.table.lowerCritical'), - }, - { - key: 'lowerCaution', - formatter: this.tableFormatter, - label: this.$t('pageSensors.table.lowerWarning'), - }, - - { - key: 'currentValue', - formatter: this.tableFormatter, - label: this.$t('pageSensors.table.currentValue'), - }, - { - key: 'upperCaution', - formatter: this.tableFormatter, - label: this.$t('pageSensors.table.upperWarning'), - }, - { - key: 'upperCritical', - formatter: this.tableFormatter, - label: this.$t('pageSensors.table.upperCritical'), - }, - ], - tableFilters: [ - { - key: 'status', - label: this.$t('pageSensors.table.status'), - values: ['OK', 'Warning', 'Critical'], - }, - ], - activeFilters: [], - searchFilter: searchFilter, - searchTotalFilteredRows: 0, - selectedRows: selectedRows, - tableHeaderCheckboxModel: tableHeaderCheckboxModel, - tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate, - }; - }, - computed: { - allSensors() { - return this.$store.getters['sensors/sensors']; - }, - filteredRows() { - return this.searchFilter - ? this.searchTotalFilteredRows - : this.filteredSensors.length; - }, - filteredSensors() { - return this.getFilteredTableData(this.allSensors, this.activeFilters); - }, - }, - created() { - this.startLoader(); - this.$store - .dispatch('sensors/getAllSensors') - .finally(() => this.endLoader()); - }, - methods: { - sortCompare(a, b, key) { - if (key === 'status') { - return this.sortStatus(a, b, key); - } - }, - onFilterChange({ activeFilters }) { - this.activeFilters = activeFilters; - }, - onFiltered(filteredItems) { - this.searchTotalFilteredRows = filteredItems.length; - }, - onChangeSearchInput(event) { - this.searchFilter = event; - }, - exportFileNameByDate() { - // Create export file name based on date - let date = new Date(); - date = - date.toISOString().slice(0, 10) + - '_' + - date.toString().split(':').join('-').split(' ')[4]; - return this.$t('pageSensors.exportFilePrefix') + date; - }, - }, -}; -</script> diff --git a/src/views/Health/Sensors/index.js b/src/views/Health/Sensors/index.js deleted file mode 100644 index fc71b611..00000000 --- a/src/views/Health/Sensors/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Sensors from './Sensors.vue'; -export default Sensors; |