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="identifyLedSwitchSystem"
34          v-model="item.locationIndicatorActive"
35          data-test-id="inventorySystem-toggle-identifyLed"
36          switch
37          @change="toggleIdentifyLedSwitch"
38        >
39          <span v-if="item.locationIndicatorActive">
40            {{ $t('global.status.on') }}
41          </span>
42          <span v-else>{{ $t('global.status.off') }}</span>
43        </b-form-checkbox>
44      </template>
45
46      <template #row-details="{ item }">
47        <b-container fluid>
48          <b-row>
49            <b-col class="mt-2" sm="6">
50              <dl>
51                <!-- Serial number -->
52                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
53                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
54                <!-- Model -->
55                <dt>{{ $t('pageInventory.table.model') }}:</dt>
56                <dd>{{ dataFormatter(item.model) }}</dd>
57                <!-- Asset tag -->
58                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
59                <dd class="mb-2">
60                  {{ dataFormatter(item.assetTag) }}
61                </dd>
62              </dl>
63            </b-col>
64            <b-col class="mt-2" sm="6">
65              <dl>
66                <!-- Status state -->
67                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
68                <dd>{{ dataFormatter(item.statusState) }}</dd>
69                <!-- Power state -->
70                <dt>{{ $t('pageInventory.table.power') }}:</dt>
71                <dd>{{ dataFormatter(item.powerState) }}</dd>
72                <!-- Health rollup -->
73                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
74                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
75              </dl>
76            </b-col>
77          </b-row>
78          <div class="section-divider mb-3 mt-3"></div>
79          <b-row>
80            <b-col class="mt-1" sm="6">
81              <dl>
82                <!-- Manufacturer -->
83                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
84                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
85                <!-- Description -->
86                <dt>{{ $t('pageInventory.table.description') }}:</dt>
87                <dd>{{ dataFormatter(item.description) }}</dd>
88                <!-- Sub Model -->
89                <dt>{{ $t('pageInventory.table.subModel') }}:</dt>
90                <dd>
91                  {{ dataFormatter(item.subModel) }}
92                </dd>
93                <!-- System Type -->
94                <dt>{{ $t('pageInventory.table.systemType') }}:</dt>
95                <dd>
96                  {{ dataFormatter(item.systemType) }}
97                </dd>
98              </dl>
99            </b-col>
100            <b-col sm="6">
101              <!-- Memory Summary -->
102              <p class="mt-1 mb-2 h6 float-none m-0">
103                {{ $t('pageInventory.table.memorySummary') }}
104              </p>
105              <dl class="ml-4">
106                <!-- Status state -->
107                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
108                <dd>{{ dataFormatter(item.memorySummaryState) }}</dd>
109                <!-- Health -->
110                <dt>{{ $t('pageInventory.table.health') }}:</dt>
111                <dd>{{ dataFormatter(item.memorySummaryHealth) }}</dd>
112                <!-- Health Roll  -->
113                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
114                <dd>{{ dataFormatter(item.memorySummaryHealthRollup) }}</dd>
115                <!-- Total system memory -->
116                <dt>{{ $t('pageInventory.table.totalSystemMemoryGiB') }}:</dt>
117                <dd>{{ dataFormatter(item.totalSystemMemoryGiB) }}GB</dd>
118              </dl>
119              <!-- Processor Summary -->
120              <p class="mt-1 mb-2 h6 float-none m-0">
121                {{ $t('pageInventory.table.processorSummary') }}
122              </p>
123              <dl class="ml-4">
124                <!-- Status state -->
125                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
126                <dd>{{ dataFormatter(item.processorSummaryState) }}</dd>
127                <!-- Health -->
128                <dt>{{ $t('pageInventory.table.health') }}:</dt>
129                <dd>{{ dataFormatter(item.processorSummaryHealth) }}</dd>
130                <!-- Health Rollup -->
131                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
132                <dd>{{ dataFormatter(item.processorSummaryHealthRoll) }}</dd>
133                <!-- Count -->
134                <dt>{{ $t('pageInventory.table.count') }}:</dt>
135                <dd>{{ dataFormatter(item.processorSummaryCount) }}</dd>
136                <!-- Core Count -->
137                <dt>{{ $t('pageInventory.table.coreCount') }}:</dt>
138                <dd>{{ dataFormatter(item.processorSummaryCoreCount) }}</dd>
139              </dl>
140            </b-col>
141          </b-row>
142        </b-container>
143      </template>
144    </b-table>
145  </page-section>
146</template>
147
148<script>
149import BVToastMixin from '@/components/Mixins/BVToastMixin';
150import PageSection from '@/components/Global/PageSection';
151import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
152
153import StatusIcon from '@/components/Global/StatusIcon';
154
155import TableRowExpandMixin, {
156  expandRowLabel,
157} from '@/components/Mixins/TableRowExpandMixin';
158import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
159
160export default {
161  components: { IconChevron, PageSection, StatusIcon },
162  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
163  data() {
164    return {
165      fields: [
166        {
167          key: 'expandRow',
168          label: '',
169          tdClass: 'table-row-expand',
170        },
171        {
172          key: 'id',
173          label: this.$t('pageInventory.table.id'),
174          formatter: this.dataFormatter,
175        },
176        {
177          key: 'hardwareType',
178          label: this.$t('pageInventory.table.hardwareType'),
179          formatter: this.dataFormatter,
180          tdClass: 'text-nowrap',
181        },
182        {
183          key: 'health',
184          label: this.$t('pageInventory.table.health'),
185          formatter: this.dataFormatter,
186          tdClass: 'text-nowrap',
187        },
188        {
189          key: 'locationNumber',
190          label: this.$t('pageInventory.table.locationNumber'),
191          formatter: this.dataFormatter,
192        },
193        {
194          key: 'locationIndicatorActive',
195          label: this.$t('pageInventory.table.identifyLed'),
196          formatter: this.dataFormatter,
197        },
198      ],
199      expandRowLabel: expandRowLabel,
200    };
201  },
202  computed: {
203    systems() {
204      return this.$store.getters['system/systems'];
205    },
206  },
207  created() {
208    this.$store.dispatch('system/getSystem').finally(() => {
209      // Emit initial data fetch complete to parent component
210      this.$root.$emit('hardware-status-system-complete');
211    });
212  },
213  methods: {
214    toggleIdentifyLedSwitch(state) {
215      this.$store
216        .dispatch('system/changeIdentifyLedState', state)
217        .catch(({ message }) => this.errorToast(message));
218    },
219  },
220};
221</script>
222