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              <dl>
91                <!-- Description -->
92                <dt>{{ $t('pageInventory.table.description') }}:</dt>
93                <dd>{{ dataFormatter(item.description) }}</dd>
94              </dl>
95              <dl>
96                <!-- Memory Type -->
97                <dt>{{ $t('pageInventory.table.memoryType') }}:</dt>
98                <dd>{{ dataFormatter(item.memoryType) }}</dd>
99              </dl>
100            </b-col>
101            <b-col sm="6" xl="6">
102              <dl>
103                <!-- Memory Size in kb -->
104                <dt>{{ $t('pageInventory.table.memorySize') }}:</dt>
105                <dd>{{ dataFormatter(item.memorySize) }} KB</dd>
106              </dl>
107              <dl>
108                <!-- Status-->
109                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
110                <dd>{{ dataFormatter(item.statusState) }}</dd>
111              </dl>
112            </b-col>
113          </b-row>
114        </b-container>
115      </template>
116    </b-table>
117  </page-section>
118</template>
119
120<script>
121import PageSection from '@/components/Global/PageSection';
122import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
123
124import StatusIcon from '@/components/Global/StatusIcon';
125import TableCellCount from '@/components/Global/TableCellCount';
126
127import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
128import TableSortMixin from '@/components/Mixins/TableSortMixin';
129import Search from '@/components/Global/Search';
130import SearchFilterMixin, {
131  searchFilter,
132} from '@/components/Mixins/SearchFilterMixin';
133import TableRowExpandMixin, {
134  expandRowLabel,
135} from '@/components/Mixins/TableRowExpandMixin';
136
137export default {
138  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
139  mixins: [
140    TableRowExpandMixin,
141    DataFormatterMixin,
142    TableSortMixin,
143    SearchFilterMixin,
144  ],
145  data() {
146    return {
147      fields: [
148        {
149          key: 'expandRow',
150          label: '',
151          tdClass: 'table-row-expand',
152        },
153        {
154          key: 'id',
155          label: this.$t('pageInventory.table.id'),
156          formatter: this.dataFormatter,
157        },
158        {
159          key: 'health',
160          label: this.$t('pageInventory.table.health'),
161          formatter: this.dataFormatter,
162          tdClass: 'text-nowrap',
163        },
164        {
165          key: 'locationNumber',
166          label: this.$t('pageInventory.table.locationNumber'),
167          formatter: this.dataFormatter,
168        },
169        {
170          key: 'identifyLed',
171          label: this.$t('pageInventory.table.identifyLed'),
172          formatter: this.dataFormatter,
173        },
174      ],
175      searchFilter: searchFilter,
176      searchTotalFilteredRows: 0,
177      expandRowLabel: expandRowLabel,
178    };
179  },
180  computed: {
181    filteredRows() {
182      return this.searchFilter
183        ? this.searchTotalFilteredRows
184        : this.dimms.length;
185    },
186    dimms() {
187      return this.$store.getters['memory/dimms'];
188    },
189  },
190  created() {
191    this.$store.dispatch('memory/getDimms').finally(() => {
192      // Emit initial data fetch complete to parent component
193      this.$root.$emit('hardware-status-dimm-slot-complete');
194    });
195  },
196  methods: {
197    sortCompare(a, b, key) {
198      if (key === 'health') {
199        return this.sortStatus(a, b, key);
200      }
201    },
202    onFiltered(filteredItems) {
203      this.searchTotalFilteredRows = filteredItems.length;
204    },
205    toggleIdentifyLedValue(row) {
206      this.$store
207        .dispatch('memory/updateIdentifyLedValue', {
208          uri: row.uri,
209          identifyLed: row.identifyLed,
210        })
211        .catch(({ message }) => this.errorToast(message));
212    },
213  },
214};
215</script>
216