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
53      <template #row-details="{ item }">
54        <b-container fluid>
55          <b-row>
56            <b-col sm="6" xl="4">
57              <dl>
58                <!-- Status state -->
59                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
60                <dd>{{ tableFormatter(item.statusState) }}</dd>
61              </dl>
62            </b-col>
63          </b-row>
64        </b-container>
65      </template>
66    </b-table>
67  </page-section>
68</template>
69
70<script>
71import PageSection from '@/components/Global/PageSection';
72import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
73
74import StatusIcon from '@/components/Global/StatusIcon';
75import TableCellCount from '@/components/Global/TableCellCount';
76
77import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
78import TableSortMixin from '@/components/Mixins/TableSortMixin';
79import Search from '@/components/Global/Search';
80import SearchFilterMixin, {
81  searchFilter,
82} from '@/components/Mixins/SearchFilterMixin';
83import TableRowExpandMixin, {
84  expandRowLabel,
85} from '@/components/Mixins/TableRowExpandMixin';
86
87export default {
88  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
89  mixins: [
90    TableRowExpandMixin,
91    TableDataFormatterMixin,
92    TableSortMixin,
93    SearchFilterMixin,
94  ],
95  data() {
96    return {
97      fields: [
98        {
99          key: 'expandRow',
100          label: '',
101          tdClass: 'table-row-expand',
102          sortable: false,
103        },
104        {
105          key: 'id',
106          label: this.$t('pageInventory.table.id'),
107          formatter: this.tableFormatter,
108          sortable: true,
109        },
110        {
111          key: 'health',
112          label: this.$t('pageInventory.table.health'),
113          formatter: this.tableFormatter,
114          sortable: true,
115          tdClass: 'text-nowrap',
116        },
117        {
118          key: 'partNumber',
119          label: this.$t('pageInventory.table.partNumber'),
120          formatter: this.tableFormatter,
121          sortable: true,
122        },
123        {
124          key: 'serialNumber',
125          label: this.$t('pageInventory.table.serialNumber'),
126          formatter: this.tableFormatter,
127          sortable: true,
128        },
129      ],
130      searchFilter: searchFilter,
131      searchTotalFilteredRows: 0,
132      expandRowLabel: expandRowLabel,
133    };
134  },
135  computed: {
136    filteredRows() {
137      return this.searchFilter
138        ? this.searchTotalFilteredRows
139        : this.dimms.length;
140    },
141    dimms() {
142      return this.$store.getters['memory/dimms'];
143    },
144  },
145  created() {
146    this.$store.dispatch('memory/getDimms').finally(() => {
147      // Emit initial data fetch complete to parent component
148      this.$root.$emit('hardware-status-dimm-slot-complete');
149    });
150  },
151  methods: {
152    sortCompare(a, b, key) {
153      if (key === 'health') {
154        return this.sortStatus(a, b, key);
155      }
156    },
157    onFiltered(filteredItems) {
158      this.searchTotalFilteredRows = filteredItems.length;
159    },
160  },
161};
162</script>
163