1<template>
2  <page-section :section-title="$t('pageInventory.system')">
3    <b-table
4      responsive="md"
5      hover
6      show-empty
7      :items="systems"
8      :fields="fields"
9      :empty-text="$t('global.table.emptyMessage')"
10    >
11      <!-- Expand chevron icon -->
12      <template #cell(expandRow)="row">
13        <b-button
14          variant="link"
15          data-test-id="hardwareStatus-button-expandSystem"
16          :title="expandRowLabel"
17          class="btn-icon-only"
18          @click="toggleRowDetails(row)"
19        >
20          <icon-chevron />
21          <span class="sr-only">{{ expandRowLabel }}</span>
22        </b-button>
23      </template>
24
25      <!-- Health -->
26      <template #cell(health)="{ value }">
27        <status-icon :status="statusIcon(value)" />
28        {{ value }}
29      </template>
30
31      <template #cell(locationIndicatorActive)="{ item }">
32        <b-form-checkbox
33          id="identifyLedSwitch"
34          v-model="item.locationIndicatorActive"
35          data-test-id="hardwareStatus-toggle-identifyLed"
36          switch
37          @change="toggleIdentifyLedSwitch"
38        >
39        </b-form-checkbox>
40      </template>
41
42      <template #row-details="{ item }">
43        <b-container fluid>
44          <b-row>
45            <b-col class="mt-2" sm="6">
46              <dl>
47                <!-- Serial number -->
48                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
49                <dd>{{ tableFormatter(item.serialNumber) }}</dd>
50                <!-- Model -->
51                <dt>{{ $t('pageInventory.table.model') }}:</dt>
52                <dd>{{ tableFormatter(item.model) }}</dd>
53                <!-- Asset tag -->
54                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
55                <dd class="mb-2">
56                  {{ tableFormatter(item.assetTag) }}
57                </dd>
58              </dl>
59            </b-col>
60            <b-col class="mt-2" sm="6">
61              <dl>
62                <!-- Status state -->
63                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
64                <dd>{{ tableFormatter(item.statusState) }}</dd>
65                <!-- Power state -->
66                <dt>{{ $t('pageInventory.table.power') }}:</dt>
67                <dd>{{ tableFormatter(item.powerState) }}</dd>
68                <!-- Health rollup -->
69                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
70                <dd>{{ tableFormatter(item.healthRollup) }}</dd>
71              </dl>
72            </b-col>
73          </b-row>
74          <div class="section-divider mb-3 mt-3"></div>
75          <b-row>
76            <b-col class="mt-1" sm="6">
77              <dl>
78                <!-- Manufacturer -->
79                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
80                <dd>{{ tableFormatter(item.assetTag) }}</dd>
81                <!-- Description -->
82                <dt>{{ $t('pageInventory.table.description') }}:</dt>
83                <dd>{{ tableFormatter(item.description) }}</dd>
84                <!-- Sub Model -->
85                <dt>{{ $t('pageInventory.table.subModel') }}:</dt>
86                <dd>
87                  {{ tableFormatter(item.subModel) }}
88                </dd>
89                <!-- System Type -->
90                <dt>{{ $t('pageInventory.table.systemType') }}:</dt>
91                <dd>
92                  {{ tableFormatter(item.systemType) }}
93                </dd>
94              </dl>
95            </b-col>
96            <b-col sm="6">
97              <dl>
98                <!-- Memory Summary -->
99                <dt class="mt-1 mb-2 font-weight-bold float-none">
100                  {{ $t('pageInventory.table.memorySummary') }}
101                </dt>
102                <!-- Status state -->
103                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
104                <dd>{{ tableFormatter(item.memorySummaryState) }}</dd>
105                <!-- Health -->
106                <dt>{{ $t('pageInventory.table.health') }}:</dt>
107                <dd>{{ tableFormatter(item.memorySummaryHealth) }}</dd>
108                <!-- Health Roll  -->
109                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
110                <dd>{{ tableFormatter(item.memorySummaryHealthRoll) }}</dd>
111
112                <!-- Processor Summary -->
113                <dt class="mt-1 mb-2 font-weight-bold float-none">
114                  {{ $t('pageInventory.table.processorSummary') }}
115                </dt>
116                <!-- Status state -->
117                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
118                <dd>{{ tableFormatter(item.processorSummaryState) }}</dd>
119                <!-- Health -->
120                <dt>{{ $t('pageInventory.table.health') }}:</dt>
121                <dd>{{ tableFormatter(item.processorSummaryHealth) }}</dd>
122                <!-- Health Rollup -->
123                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
124                <dd>{{ tableFormatter(item.processorSummaryHealthRoll) }}</dd>
125                <!-- Count -->
126                <dt>{{ $t('pageInventory.table.count') }}:</dt>
127                <dd>{{ tableFormatter(item.processorSummaryCount) }}</dd>
128              </dl>
129            </b-col>
130          </b-row>
131        </b-container>
132      </template>
133    </b-table>
134  </page-section>
135</template>
136
137<script>
138import BVToastMixin from '@/components/Mixins/BVToastMixin';
139import PageSection from '@/components/Global/PageSection';
140import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
141
142import StatusIcon from '@/components/Global/StatusIcon';
143
144import TableRowExpandMixin, {
145  expandRowLabel,
146} from '@/components/Mixins/TableRowExpandMixin';
147import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
148
149export default {
150  components: { IconChevron, PageSection, StatusIcon },
151  mixins: [BVToastMixin, TableRowExpandMixin, TableDataFormatterMixin],
152  data() {
153    return {
154      fields: [
155        {
156          key: 'expandRow',
157          label: '',
158          tdClass: 'table-row-expand',
159        },
160        {
161          key: 'id',
162          label: this.$t('pageInventory.table.id'),
163          formatter: this.tableFormatter,
164        },
165        {
166          key: 'hardwareType',
167          label: this.$t('pageInventory.table.hardwareType'),
168          formatter: this.tableFormatter,
169          tdClass: 'text-nowrap',
170        },
171        {
172          key: 'health',
173          label: this.$t('pageInventory.table.health'),
174          formatter: this.tableFormatter,
175          tdClass: 'text-nowrap',
176        },
177        {
178          key: 'locationNumber',
179          label: this.$t('pageInventory.table.locationNumber'),
180          formatter: this.tableFormatter,
181        },
182        {
183          key: 'locationIndicatorActive',
184          label: this.$t('pageInventory.table.identifyLed'),
185          formatter: this.tableFormatter,
186        },
187      ],
188      expandRowLabel: expandRowLabel,
189    };
190  },
191  computed: {
192    systems() {
193      return this.$store.getters['system/systems'];
194    },
195  },
196  created() {
197    this.$store.dispatch('system/getSystem').finally(() => {
198      // Emit initial data fetch complete to parent component
199      this.$root.$emit('hardware-status-system-complete');
200    });
201  },
202  methods: {
203    toggleIdentifyLedSwitch(state) {
204      this.$store
205        .dispatch('system/changeIdentifyLedState', state)
206        .catch(({ message }) => this.errorToast(message));
207    },
208  },
209};
210</script>
211