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      @filtered="onFiltered"
32    >
33      <!-- Expand chevron icon -->
34      <template #cell(expandRow)="row">
35        <b-button
36          variant="link"
37          data-test-id="hardwareStatus-button-expandDimms"
38          :title="expandRowLabel"
39          class="btn-icon-only"
40          @click="toggleRowDetails(row)"
41        >
42          <icon-chevron />
43          <span class="sr-only">{{ expandRowLabel }}</span>
44        </b-button>
45      </template>
46
47      <!-- Health -->
48      <template #cell(health)="{ value }">
49        <status-icon :status="statusIcon(value)" />
50        {{ value }}
51      </template>
52      <!-- Toggle identify LED -->
53      <template #cell(identifyLed)="row">
54        <b-form-checkbox
55          v-model="row.item.identifyLed"
56          name="switch"
57          switch
58          @change="toggleIdentifyLedValue(row.item)"
59        >
60          <span v-if="row.item.identifyLed">
61            {{ $t('global.status.on') }}
62          </span>
63          <span v-else> {{ $t('global.status.off') }} </span>
64        </b-form-checkbox>
65      </template>
66      <template #row-details="{ item }">
67        <b-container fluid>
68          <b-row>
69            <b-col sm="6" xl="6">
70              <dl>
71                <!-- Part Number -->
72                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
73                <dd>{{ dataFormatter(item.partNumber) }}</dd>
74              </dl>
75              <dl>
76                <!-- Serial Number -->
77                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
78                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
79              </dl>
80              <dl>
81                <!-- Spare Part Number -->
82                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
83                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
84              </dl>
85              <dl>
86                <!-- Model -->
87                <dt>{{ $t('pageInventory.table.model') }}:</dt>
88                <dd>{{ dataFormatter(item.model) }}</dd>
89              </dl>
90            </b-col>
91            <b-col sm="6" xl="6">
92              <dl>
93                <!-- Memory Size in kb -->
94                <dt>{{ $t('pageInventory.table.memorySize') }}:</dt>
95                <dd>{{ dataFormatter(item.memorySize) }} KB</dd>
96              </dl>
97              <dl>
98                <!-- Status-->
99                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
100                <dd>{{ dataFormatter(item.statusState) }}</dd>
101              </dl>
102              <dl>
103                <!-- Enabled-->
104                <dt>{{ $t('pageInventory.table.enabled') }}:</dt>
105                <dd>{{ dataFormatter(item.enabled) }}</dd>
106              </dl>
107            </b-col>
108          </b-row>
109          <div class="section-divider mb-3 mt-3"></div>
110          <b-row>
111            <b-col sm="6" xl="6">
112              <dl>
113                <!-- Description -->
114                <dt>{{ $t('pageInventory.table.description') }}:</dt>
115                <dd>{{ dataFormatter(item.description) }}</dd>
116              </dl>
117              <dl>
118                <!-- Memory Type -->
119                <dt>{{ $t('pageInventory.table.memoryType') }}:</dt>
120                <dd>{{ dataFormatter(item.memoryType) }}</dd>
121              </dl>
122              <dl>
123                <!-- Base Module Type -->
124                <dt>{{ $t('pageInventory.table.baseModuleType') }}:</dt>
125                <dd>{{ dataFormatter(item.baseModuleType) }}</dd>
126              </dl>
127              <dl>
128                <!-- Capacity MiB -->
129                <dt>{{ $t('pageInventory.table.capacityMiB') }}:</dt>
130                <dd>{{ dataFormatter(item.capacityMiB) }}</dd>
131              </dl>
132            </b-col>
133            <b-col sm="6" xl="6">
134              <dl>
135                <!-- Bus Width Bits -->
136                <dt>{{ $t('pageInventory.table.busWidthBits') }}:</dt>
137                <dd>{{ dataFormatter(item.busWidthBits) }}</dd>
138              </dl>
139              <dl>
140                <!-- Data Width Bits -->
141                <dt>{{ $t('pageInventory.table.dataWidthBits') }}:</dt>
142                <dd>{{ dataFormatter(item.dataWidthBits) }}</dd>
143              </dl>
144              <dl>
145                <!-- Operating Speed Mhz -->
146                <dt>{{ $t('pageInventory.table.operatingSpeedMhz') }}:</dt>
147                <dd>{{ dataFormatter(item.operatingSpeedMhz) }} MHz</dd>
148              </dl>
149            </b-col>
150          </b-row>
151        </b-container>
152      </template>
153    </b-table>
154  </page-section>
155</template>
156
157<script>
158import PageSection from '@/components/Global/PageSection';
159import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
160
161import StatusIcon from '@/components/Global/StatusIcon';
162import TableCellCount from '@/components/Global/TableCellCount';
163
164import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
165import TableSortMixin from '@/components/Mixins/TableSortMixin';
166import Search from '@/components/Global/Search';
167import SearchFilterMixin, {
168  searchFilter,
169} from '@/components/Mixins/SearchFilterMixin';
170import TableRowExpandMixin, {
171  expandRowLabel,
172} from '@/components/Mixins/TableRowExpandMixin';
173
174export default {
175  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
176  mixins: [
177    TableRowExpandMixin,
178    DataFormatterMixin,
179    TableSortMixin,
180    SearchFilterMixin,
181  ],
182  data() {
183    return {
184      fields: [
185        {
186          key: 'expandRow',
187          label: '',
188          tdClass: 'table-row-expand',
189        },
190        {
191          key: 'id',
192          label: this.$t('pageInventory.table.id'),
193          formatter: this.dataFormatter,
194        },
195        {
196          key: 'health',
197          label: this.$t('pageInventory.table.health'),
198          formatter: this.dataFormatter,
199          tdClass: 'text-nowrap',
200        },
201        {
202          key: 'locationNumber',
203          label: this.$t('pageInventory.table.locationNumber'),
204          formatter: this.dataFormatter,
205        },
206        {
207          key: 'identifyLed',
208          label: this.$t('pageInventory.table.identifyLed'),
209          formatter: this.dataFormatter,
210        },
211      ],
212      searchFilter: searchFilter,
213      searchTotalFilteredRows: 0,
214      expandRowLabel: expandRowLabel,
215    };
216  },
217  computed: {
218    filteredRows() {
219      return this.searchFilter
220        ? this.searchTotalFilteredRows
221        : this.dimms.length;
222    },
223    dimms() {
224      return this.$store.getters['memory/dimms'];
225    },
226  },
227  created() {
228    this.$store.dispatch('memory/getDimms').finally(() => {
229      // Emit initial data fetch complete to parent component
230      this.$root.$emit('hardware-status-dimm-slot-complete');
231    });
232  },
233  methods: {
234    sortCompare(a, b, key) {
235      if (key === 'health') {
236        return this.sortStatus(a, b, key);
237      }
238    },
239    onFiltered(filteredItems) {
240      this.searchTotalFilteredRows = filteredItems.length;
241    },
242    toggleIdentifyLedValue(row) {
243      this.$store
244        .dispatch('memory/updateIdentifyLedValue', {
245          uri: row.uri,
246          identifyLed: row.identifyLed,
247        })
248        .catch(({ message }) => this.errorToast(message));
249    },
250  },
251};
252</script>
253