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