1<template>
2  <page-section :section-title="$t('pageInventory.dimmSlot')">
3    <b-row class="align-items-end">
4      <b-col sm="6" md="5" xl="4">
5        <search
6          @change-search="onChangeSearchInput"
7          @clear-search="onClearSearchInput"
8        />
9      </b-col>
10      <b-col sm="6" md="3" xl="2">
11        <table-cell-count
12          :filtered-items-count="filteredRows"
13          :total-number-of-cells="dimms.length"
14        ></table-cell-count>
15      </b-col>
16    </b-row>
17    <b-table
18      sort-icon-left
19      no-sort-reset
20      hover
21      sort-by="health"
22      responsive="md"
23      show-empty
24      :items="dimms"
25      :fields="fields"
26      :sort-desc="true"
27      :sort-compare="sortCompare"
28      :filter="searchFilter"
29      :empty-text="$t('global.table.emptyMessage')"
30      :empty-filtered-text="$t('global.table.emptySearchMessage')"
31      :busy="isBusy"
32      @filtered="onFiltered"
33    >
34      <!-- Expand chevron icon -->
35      <template #cell(expandRow)="row">
36        <b-button
37          variant="link"
38          data-test-id="hardwareStatus-button-expandDimms"
39          :title="expandRowLabel"
40          class="btn-icon-only"
41          @click="toggleRowDetails(row)"
42        >
43          <icon-chevron />
44          <span class="sr-only">{{ expandRowLabel }}</span>
45        </b-button>
46      </template>
47
48      <!-- Health -->
49      <template #cell(health)="{ value }">
50        <status-icon :status="statusIcon(value)" />
51        {{ value }}
52      </template>
53
54      <!-- StatusState -->
55      <template #cell(statusState)="{ value }">
56        <status-icon :status="statusStateIcon(value)" />
57        {{ value }}
58      </template>
59
60      <!-- Toggle identify LED -->
61      <template #cell(identifyLed)="row">
62        <b-form-checkbox
63          v-if="hasIdentifyLed(row.item.identifyLed)"
64          v-model="row.item.identifyLed"
65          name="switch"
66          switch
67          @change="toggleIdentifyLedValue(row.item)"
68        >
69          <span v-if="row.item.identifyLed">
70            {{ $t('global.status.on') }}
71          </span>
72          <span v-else> {{ $t('global.status.off') }} </span>
73        </b-form-checkbox>
74        <div v-else>--</div>
75      </template>
76      <template #row-details="{ item }">
77        <b-container fluid>
78          <b-row>
79            <b-col sm="6" xl="6">
80              <dl>
81                <!-- Manufacturer -->
82                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
83                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
84              </dl>
85              <dl>
86                <!-- Part Number -->
87                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
88                <dd>{{ dataFormatter(item.partNumber) }}</dd>
89              </dl>
90              <dl>
91                <!-- Serial Number -->
92                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
93                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
94              </dl>
95              <dl>
96                <!-- Spare Part Number -->
97                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
98                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
99              </dl>
100              <dl>
101                <!-- Model -->
102                <dt>{{ $t('pageInventory.table.model') }}:</dt>
103                <dd>{{ dataFormatter(item.model) }}</dd>
104              </dl>
105            </b-col>
106            <b-col sm="6" xl="6">
107              <dl>
108                <!-- Capacity MiB -->
109                <dt>{{ $t('pageInventory.table.capacityMiB') }}:</dt>
110                <dd>
111                  {{ dataFormatter(item.capacityMiB) }}
112                  {{ $t('unit.MiB') }}
113                </dd>
114              </dl>
115              <dl>
116                <!-- Rank Count -->
117                <dt>{{ $t('pageInventory.table.rankCount') }}:</dt>
118                <dd>{{ dataFormatter(item.rankCount) }}</dd>
119              </dl>
120              <dl>
121                <!-- Status-->
122                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
123                <dd>{{ dataFormatter(item.statusState) }}</dd>
124              </dl>
125              <dl>
126                <!-- Enabled-->
127                <dt>{{ $t('pageInventory.table.enabled') }}:</dt>
128                <dd>{{ dataFormatter(item.enabled) }}</dd>
129              </dl>
130            </b-col>
131          </b-row>
132          <div class="section-divider mb-3 mt-3"></div>
133          <b-row>
134            <b-col sm="6" xl="6">
135              <dl>
136                <!-- Description -->
137                <dt>{{ $t('pageInventory.table.description') }}:</dt>
138                <dd>{{ dataFormatter(item.description) }}</dd>
139              </dl>
140              <dl>
141                <!-- Memory Type -->
142                <dt>{{ $t('pageInventory.table.memoryType') }}:</dt>
143                <dd>{{ dataFormatter(item.memoryType) }}</dd>
144              </dl>
145              <dl>
146                <!-- Base Module Type -->
147                <dt>{{ $t('pageInventory.table.baseModuleType') }}:</dt>
148                <dd>{{ dataFormatter(item.baseModuleType) }}</dd>
149              </dl>
150            </b-col>
151            <b-col sm="6" xl="6">
152              <dl>
153                <!-- Bus Width Bits -->
154                <dt>{{ $t('pageInventory.table.busWidthBits') }}:</dt>
155                <dd>
156                  {{ dataFormatter(item.busWidthBits) }}
157                  {{ $t('unit.bit') }}
158                </dd>
159              </dl>
160              <dl>
161                <!-- Data Width Bits -->
162                <dt>{{ $t('pageInventory.table.dataWidthBits') }}:</dt>
163                <dd>
164                  {{ dataFormatter(item.dataWidthBits) }}
165                  {{ $t('unit.bit') }}
166                </dd>
167              </dl>
168              <dl>
169                <!-- Operating Speed Mhz -->
170                <dt>{{ $t('pageInventory.table.operatingSpeedMhz') }}:</dt>
171                <dd>
172                  {{ dataFormatter(item.operatingSpeedMhz) }}
173                  {{ $t('unit.MHz') }}
174                </dd>
175              </dl>
176              <dl>
177                <!-- Error Correction -->
178                <dt>{{ $t('pageInventory.table.errorCorrection') }}:</dt>
179                <dd>{{ dataFormatter(item.errorCorrection) }}</dd>
180              </dl>
181            </b-col>
182          </b-row>
183        </b-container>
184      </template>
185    </b-table>
186  </page-section>
187</template>
188
189<script>
190import PageSection from '@/components/Global/PageSection';
191import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
192
193import StatusIcon from '@/components/Global/StatusIcon';
194import TableCellCount from '@/components/Global/TableCellCount';
195
196import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
197import TableSortMixin from '@/components/Mixins/TableSortMixin';
198import Search from '@/components/Global/Search';
199import SearchFilterMixin, {
200  searchFilter,
201} from '@/components/Mixins/SearchFilterMixin';
202import TableRowExpandMixin, {
203  expandRowLabel,
204} from '@/components/Mixins/TableRowExpandMixin';
205
206export default {
207  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
208  mixins: [
209    TableRowExpandMixin,
210    DataFormatterMixin,
211    TableSortMixin,
212    SearchFilterMixin,
213  ],
214  data() {
215    return {
216      isBusy: true,
217      fields: [
218        {
219          key: 'expandRow',
220          label: '',
221          tdClass: 'table-row-expand',
222        },
223        {
224          key: 'id',
225          label: this.$t('pageInventory.table.id'),
226          formatter: this.dataFormatter,
227        },
228        {
229          key: 'health',
230          label: this.$t('pageInventory.table.health'),
231          formatter: this.dataFormatter,
232          tdClass: 'text-nowrap',
233        },
234        {
235          key: 'statusState',
236          label: this.$t('pageInventory.table.state'),
237          formatter: this.dataFormatter,
238          tdClass: 'text-nowrap',
239        },
240        {
241          key: 'locationNumber',
242          label: this.$t('pageInventory.table.locationNumber'),
243          formatter: this.dataFormatter,
244        },
245        {
246          key: 'identifyLed',
247          label: this.$t('pageInventory.table.identifyLed'),
248          formatter: this.dataFormatter,
249        },
250      ],
251      searchFilter: searchFilter,
252      searchTotalFilteredRows: 0,
253      expandRowLabel: expandRowLabel,
254    };
255  },
256  computed: {
257    filteredRows() {
258      return this.searchFilter
259        ? this.searchTotalFilteredRows
260        : this.dimms.length;
261    },
262    dimms() {
263      return this.$store.getters['memory/dimms'];
264    },
265  },
266  created() {
267    this.$store.dispatch('memory/getDimms').finally(() => {
268      // Emit initial data fetch complete to parent component
269      this.$root.$emit('hardware-status-dimm-slot-complete');
270      this.isBusy = false;
271    });
272  },
273  methods: {
274    sortCompare(a, b, key) {
275      if (key === 'health') {
276        return this.sortStatus(a, b, key);
277      } else if (key === 'statusState') {
278        return this.sortStatusState(a, b, key);
279      }
280    },
281    onFiltered(filteredItems) {
282      this.searchTotalFilteredRows = filteredItems.length;
283    },
284    toggleIdentifyLedValue(row) {
285      this.$store
286        .dispatch('memory/updateIdentifyLedValue', {
287          uri: row.uri,
288          identifyLed: row.identifyLed,
289        })
290        .catch(({ message }) => this.errorToast(message));
291    },
292    hasIdentifyLed(identifyLed) {
293      return typeof identifyLed === 'boolean';
294    },
295    statusStateIcon(status) {
296      switch (status) {
297        case 'Enabled':
298          return 'success';
299        case 'Absent':
300          return 'warning';
301        default:
302          return '';
303      }
304    },
305    sortStatusState(a, b, key) {
306      const statusState = ['Enabled', 'Absent'];
307      return statusState.indexOf(a[key]) - statusState.indexOf(b[key]);
308    },
309  },
310};
311</script>
312