blob: fa083a0117a4d3e65599328823489c735f29b267 [file] [log] [blame]
Yoshie Muranaka56ee7692020-05-28 13:28:29 -07001<template>
2 <page-section :section-title="$t('pageHardwareStatus.system')">
SurenNeware307382e2020-07-27 20:45:14 +05303 <b-table
4 responsive="md"
Sukanya Pandeyfde429e2020-09-14 20:48:39 +05305 hover
SurenNeware307382e2020-07-27 20:45:14 +05306 show-empty
7 :items="systems"
8 :fields="fields"
9 :empty-text="$t('global.table.emptyMessage')"
10 >
Yoshie Muranaka56ee7692020-05-28 13:28:29 -070011 <!-- Expand chevron icon -->
Derick Montague602e98a2020-10-21 16:20:00 -050012 <template #cell(expandRow)="row">
Dixsie Wolmers83133762020-07-15 08:45:19 -050013 <b-button
14 variant="link"
15 data-test-id="hardwareStatus-button-expandSystem"
Dixsie Wolmers30f11f82020-11-10 16:07:56 -060016 :title="expandRowLabel"
17 class="btn-icon-only"
Dixsie Wolmersb53e0862020-09-08 14:13:38 -050018 @click="toggleRowDetails(row)"
Dixsie Wolmers83133762020-07-15 08:45:19 -050019 >
Dixsie Wolmers30f11f82020-11-10 16:07:56 -060020 <icon-chevron />
SurenNeware6e2cb972020-12-24 20:58:16 +053021 <span class="sr-only">{{ expandRowLabel }}</span>
Yoshie Muranaka56ee7692020-05-28 13:28:29 -070022 </b-button>
23 </template>
24
25 <!-- Health -->
Derick Montague602e98a2020-10-21 16:20:00 -050026 <template #cell(health)="{ value }">
Yoshie Muranaka56ee7692020-05-28 13:28:29 -070027 <status-icon :status="statusIcon(value)" />
28 {{ value }}
29 </template>
30
Derick Montague602e98a2020-10-21 16:20:00 -050031 <template #row-details="{ item }">
Yoshie Muranaka56ee7692020-05-28 13:28:29 -070032 <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>
SurenNewarebbf896c2021-01-27 21:50:22 +053046 <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 Muranaka56ee7692020-05-28 13:28:29 -070053 <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>
88import PageSection from '@/components/Global/PageSection';
89import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
90
91import StatusIcon from '@/components/Global/StatusIcon';
Dixsie Wolmersb53e0862020-09-08 14:13:38 -050092
SurenNewareba91c492020-10-27 14:18:54 +053093import TableRowExpandMixin, {
94 expandRowLabel,
95} from '@/components/Mixins/TableRowExpandMixin';
Yoshie Muranaka386df452020-06-18 12:45:13 -070096import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
Yoshie Muranaka56ee7692020-05-28 13:28:29 -070097
98export default {
99 components: { IconChevron, PageSection, StatusIcon },
Dixsie Wolmersb53e0862020-09-08 14:13:38 -0500100 mixins: [TableRowExpandMixin, TableDataFormatterMixin],
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700101 data() {
102 return {
103 fields: [
104 {
105 key: 'expandRow',
106 label: '',
Derick Montague602e98a2020-10-21 16:20:00 -0500107 tdClass: 'table-row-expand',
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700108 },
109 {
110 key: 'id',
111 label: this.$t('pageHardwareStatus.table.id'),
Derick Montague602e98a2020-10-21 16:20:00 -0500112 formatter: this.tableFormatter,
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700113 },
114 {
115 key: 'health',
116 label: this.$t('pageHardwareStatus.table.health'),
Dixsie Wolmersa04d46f2020-10-22 06:34:56 -0500117 formatter: this.tableFormatter,
Derick Montague602e98a2020-10-21 16:20:00 -0500118 tdClass: 'text-nowrap',
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700119 },
120 {
121 key: 'partNumber',
122 label: this.$t('pageHardwareStatus.table.partNumber'),
Derick Montague602e98a2020-10-21 16:20:00 -0500123 formatter: this.tableFormatter,
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700124 },
125 {
126 key: 'serialNumber',
127 label: this.$t('pageHardwareStatus.table.serialNumber'),
Derick Montague602e98a2020-10-21 16:20:00 -0500128 formatter: this.tableFormatter,
129 },
130 ],
SurenNewareba91c492020-10-27 14:18:54 +0530131 expandRowLabel: expandRowLabel,
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700132 };
133 },
134 computed: {
135 systems() {
136 return this.$store.getters['system/systems'];
Derick Montague602e98a2020-10-21 16:20:00 -0500137 },
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700138 },
139 created() {
140 this.$store.dispatch('system/getSystem').finally(() => {
Gunnar Millsdefc9e22020-07-07 20:29:03 -0500141 // Emit initial data fetch complete to parent component
Sukanya Pandeyedb8a772020-10-29 11:33:42 +0530142 this.$root.$emit('hardware-status-system-complete');
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700143 });
Derick Montague602e98a2020-10-21 16:20:00 -0500144 },
Yoshie Muranaka56ee7692020-05-28 13:28:29 -0700145};
146</script>