Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 1 | <template> |
| 2 | <page-section :section-title="$t('pageHardwareStatus.system')"> |
SurenNeware | 307382e | 2020-07-27 20:45:14 +0530 | [diff] [blame] | 3 | <b-table |
| 4 | responsive="md" |
Sukanya Pandey | fde429e | 2020-09-14 20:48:39 +0530 | [diff] [blame] | 5 | hover |
SurenNeware | 307382e | 2020-07-27 20:45:14 +0530 | [diff] [blame] | 6 | show-empty |
| 7 | :items="systems" |
| 8 | :fields="fields" |
| 9 | :empty-text="$t('global.table.emptyMessage')" |
| 10 | > |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 11 | <!-- Expand chevron icon --> |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 12 | <template #cell(expandRow)="row"> |
Dixsie Wolmers | 8313376 | 2020-07-15 08:45:19 -0500 | [diff] [blame] | 13 | <b-button |
| 14 | variant="link" |
| 15 | data-test-id="hardwareStatus-button-expandSystem" |
Dixsie Wolmers | 30f11f8 | 2020-11-10 16:07:56 -0600 | [diff] [blame] | 16 | :title="expandRowLabel" |
| 17 | class="btn-icon-only" |
Dixsie Wolmers | b53e086 | 2020-09-08 14:13:38 -0500 | [diff] [blame] | 18 | @click="toggleRowDetails(row)" |
Dixsie Wolmers | 8313376 | 2020-07-15 08:45:19 -0500 | [diff] [blame] | 19 | > |
Dixsie Wolmers | 30f11f8 | 2020-11-10 16:07:56 -0600 | [diff] [blame] | 20 | <icon-chevron /> |
SurenNeware | 6e2cb97 | 2020-12-24 20:58:16 +0530 | [diff] [blame] | 21 | <span class="sr-only">{{ expandRowLabel }}</span> |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 22 | </b-button> |
| 23 | </template> |
| 24 | |
| 25 | <!-- Health --> |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 26 | <template #cell(health)="{ value }"> |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 27 | <status-icon :status="statusIcon(value)" /> |
| 28 | {{ value }} |
| 29 | </template> |
| 30 | |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 31 | <template #row-details="{ item }"> |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 32 | <b-container fluid> |
| 33 | <b-row> |
| 34 | <b-col sm="6" xl="4"> |
| 35 | <dl> |
| 36 | <!-- Asset tag --> |
| 37 | <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt> |
| 38 | <dd>{{ tableFormatter(item.assetTag) }}</dd> |
| 39 | <br /> |
| 40 | <!-- Description --> |
| 41 | <dt>{{ $t('pageHardwareStatus.table.description') }}:</dt> |
| 42 | <dd>{{ tableFormatter(item.description) }}</dd> |
| 43 | <br /> |
| 44 | <!-- Indicator LED --> |
| 45 | <dt>{{ $t('pageHardwareStatus.table.indicatorLed') }}:</dt> |
SurenNeware | bbf896c | 2021-01-27 21:50:22 +0530 | [diff] [blame^] | 46 | <dd v-if="item.locationIndicatorActive === true"> |
| 47 | {{ $t('global.status.on') }} |
| 48 | </dd> |
| 49 | <dd v-else-if="item.locationIndicatorActive === false"> |
| 50 | {{ $t('global.status.off') }} |
| 51 | </dd> |
| 52 | <dd v-else>--</dd> |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 53 | <br /> |
| 54 | <!-- Model --> |
| 55 | <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt> |
| 56 | <dd>{{ tableFormatter(item.model) }}</dd> |
| 57 | </dl> |
| 58 | </b-col> |
| 59 | <b-col sm="6" xl="4"> |
| 60 | <dl> |
| 61 | <!-- Power state --> |
| 62 | <dt>{{ $t('pageHardwareStatus.table.powerState') }}:</dt> |
| 63 | <dd>{{ tableFormatter(item.powerState) }}</dd> |
| 64 | <br /> |
| 65 | <!-- Health rollup --> |
| 66 | <dt> |
| 67 | {{ $t('pageHardwareStatus.table.statusHealthRollup') }}: |
| 68 | </dt> |
| 69 | <dd>{{ tableFormatter(item.healthRollup) }}</dd> |
| 70 | <br /> |
| 71 | <!-- Status state --> |
| 72 | <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt> |
| 73 | <dd>{{ tableFormatter(item.statusState) }}</dd> |
| 74 | <br /> |
| 75 | <!-- System type --> |
| 76 | <dt>{{ $t('pageHardwareStatus.table.systemType') }}:</dt> |
| 77 | <dd>{{ tableFormatter(item.systemType) }}</dd> |
| 78 | </dl> |
| 79 | </b-col> |
| 80 | </b-row> |
| 81 | </b-container> |
| 82 | </template> |
| 83 | </b-table> |
| 84 | </page-section> |
| 85 | </template> |
| 86 | |
| 87 | <script> |
| 88 | import PageSection from '@/components/Global/PageSection'; |
| 89 | import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; |
| 90 | |
| 91 | import StatusIcon from '@/components/Global/StatusIcon'; |
Dixsie Wolmers | b53e086 | 2020-09-08 14:13:38 -0500 | [diff] [blame] | 92 | |
SurenNeware | ba91c49 | 2020-10-27 14:18:54 +0530 | [diff] [blame] | 93 | import TableRowExpandMixin, { |
| 94 | expandRowLabel, |
| 95 | } from '@/components/Mixins/TableRowExpandMixin'; |
Yoshie Muranaka | 386df45 | 2020-06-18 12:45:13 -0700 | [diff] [blame] | 96 | import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 97 | |
| 98 | export default { |
| 99 | components: { IconChevron, PageSection, StatusIcon }, |
Dixsie Wolmers | b53e086 | 2020-09-08 14:13:38 -0500 | [diff] [blame] | 100 | mixins: [TableRowExpandMixin, TableDataFormatterMixin], |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 101 | data() { |
| 102 | return { |
| 103 | fields: [ |
| 104 | { |
| 105 | key: 'expandRow', |
| 106 | label: '', |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 107 | tdClass: 'table-row-expand', |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 108 | }, |
| 109 | { |
| 110 | key: 'id', |
| 111 | label: this.$t('pageHardwareStatus.table.id'), |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 112 | formatter: this.tableFormatter, |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 113 | }, |
| 114 | { |
| 115 | key: 'health', |
| 116 | label: this.$t('pageHardwareStatus.table.health'), |
Dixsie Wolmers | a04d46f | 2020-10-22 06:34:56 -0500 | [diff] [blame] | 117 | formatter: this.tableFormatter, |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 118 | tdClass: 'text-nowrap', |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 119 | }, |
| 120 | { |
| 121 | key: 'partNumber', |
| 122 | label: this.$t('pageHardwareStatus.table.partNumber'), |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 123 | formatter: this.tableFormatter, |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 124 | }, |
| 125 | { |
| 126 | key: 'serialNumber', |
| 127 | label: this.$t('pageHardwareStatus.table.serialNumber'), |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 128 | formatter: this.tableFormatter, |
| 129 | }, |
| 130 | ], |
SurenNeware | ba91c49 | 2020-10-27 14:18:54 +0530 | [diff] [blame] | 131 | expandRowLabel: expandRowLabel, |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 132 | }; |
| 133 | }, |
| 134 | computed: { |
| 135 | systems() { |
| 136 | return this.$store.getters['system/systems']; |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 137 | }, |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 138 | }, |
| 139 | created() { |
| 140 | this.$store.dispatch('system/getSystem').finally(() => { |
Gunnar Mills | defc9e2 | 2020-07-07 20:29:03 -0500 | [diff] [blame] | 141 | // Emit initial data fetch complete to parent component |
Sukanya Pandey | edb8a77 | 2020-10-29 11:33:42 +0530 | [diff] [blame] | 142 | this.$root.$emit('hardware-status-system-complete'); |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 143 | }); |
Derick Montague | 602e98a | 2020-10-21 16:20:00 -0500 | [diff] [blame] | 144 | }, |
Yoshie Muranaka | 56ee769 | 2020-05-28 13:28:29 -0700 | [diff] [blame] | 145 | }; |
| 146 | </script> |