1<template>
2  <page-section :section-title="$t('pageInventory.fans')">
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="fans.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      responsive="md"
22      sort-by="health"
23      show-empty
24      :items="fans"
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-expandFans"
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      <template #row-details="{ item }">
61        <b-container fluid>
62          <b-row>
63            <b-col sm="6" xl="4">
64              <dl>
65                <!-- ID -->
66                <dt>{{ $t('pageInventory.table.id') }}:</dt>
67                <dd>{{ dataFormatter(item.id) }}</dd>
68              </dl>
69              <dl>
70                <!-- Serial number -->
71                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
72                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
73              </dl>
74              <dl>
75                <!-- Part number -->
76                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
77                <dd>{{ dataFormatter(item.partNumber) }}</dd>
78              </dl>
79              <dl>
80                <!-- Fan speed -->
81                <dt>{{ $t('pageInventory.table.fanSpeed') }}:</dt>
82                <dd>
83                  {{ dataFormatter(item.speed) }}
84                  {{ $t('unit.RPM') }}
85                </dd>
86              </dl>
87            </b-col>
88            <b-col sm="6" xl="4">
89              <dl>
90                <!-- Status state -->
91                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
92                <dd>{{ dataFormatter(item.statusState) }}</dd>
93              </dl>
94              <dl>
95                <!-- Health Rollup state -->
96                <dt>{{ $t('pageInventory.table.statusHealthRollup') }}:</dt>
97                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
98              </dl>
99            </b-col>
100          </b-row>
101        </b-container>
102      </template>
103    </b-table>
104  </page-section>
105</template>
106
107<script>
108import PageSection from '@/components/Global/PageSection';
109import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
110import TableCellCount from '@/components/Global/TableCellCount';
111
112import StatusIcon from '@/components/Global/StatusIcon';
113import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
114import TableSortMixin from '@/components/Mixins/TableSortMixin';
115import Search from '@/components/Global/Search';
116import SearchFilterMixin, {
117  searchFilter,
118} from '@/components/Mixins/SearchFilterMixin';
119import TableRowExpandMixin, {
120  expandRowLabel,
121} from '@/components/Mixins/TableRowExpandMixin';
122
123export default {
124  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
125  mixins: [
126    TableRowExpandMixin,
127    DataFormatterMixin,
128    TableSortMixin,
129    SearchFilterMixin,
130  ],
131  data() {
132    return {
133      isBusy: true,
134      fields: [
135        {
136          key: 'expandRow',
137          label: '',
138          tdClass: 'table-row-expand',
139          sortable: false,
140        },
141        {
142          key: 'name',
143          label: this.$t('pageInventory.table.name'),
144          formatter: this.dataFormatter,
145          sortable: true,
146        },
147        {
148          key: 'health',
149          label: this.$t('pageInventory.table.health'),
150          formatter: this.dataFormatter,
151          sortable: true,
152          tdClass: 'text-nowrap',
153        },
154        {
155          key: 'statusState',
156          label: this.$t('pageInventory.table.state'),
157          formatter: this.dataFormatter,
158          tdClass: 'text-nowrap',
159        },
160        {
161          key: 'partNumber',
162          label: this.$t('pageInventory.table.partNumber'),
163          formatter: this.dataFormatter,
164          sortable: true,
165        },
166        {
167          key: 'serialNumber',
168          label: this.$t('pageInventory.table.serialNumber'),
169          formatter: this.dataFormatter,
170        },
171      ],
172      searchFilter: searchFilter,
173      searchTotalFilteredRows: 0,
174      expandRowLabel: expandRowLabel,
175    };
176  },
177  computed: {
178    filteredRows() {
179      return this.searchFilter
180        ? this.searchTotalFilteredRows
181        : this.fans.length;
182    },
183    fans() {
184      return this.$store.getters['fan/fans'];
185    },
186  },
187  created() {
188    this.$store.dispatch('fan/getFanInfo').finally(() => {
189      // Emit initial data fetch complete to parent component
190      this.$root.$emit('hardware-status-fans-complete');
191      this.isBusy = false;
192    });
193  },
194  methods: {
195    sortCompare(a, b, key) {
196      if (key === 'health') {
197        return this.sortStatus(a, b, key);
198      } else if (key === 'statusState') {
199        return this.sortStatusState(a, b, key);
200      }
201    },
202    onFiltered(filteredItems) {
203      this.searchTotalFilteredRows = filteredItems.length;
204    },
205    /**
206     * Returns the appropriate icon based on the given status.
207     *
208     * @param {string} status - The status to determine the icon for.
209     * @return {string} The icon corresponding to the given status.
210     */
211    statusStateIcon(status) {
212      switch (status) {
213        case 'Enabled':
214          return 'success';
215        case 'Absent':
216          return 'warning';
217        default:
218          return '';
219      }
220    },
221    /**
222     * Sorts the status state of two objects based on the provided key.
223     *
224     * @param {Object} a - The first object to compare.
225     * @param {Object} b - The second object to compare.
226     * @param {string} key - The key to use for comparison.
227     */
228    sortStatusState(a, b, key) {
229      const statusState = ['Enabled', 'Absent'];
230      return statusState.indexOf(a[key]) - statusState.indexOf(b[key]);
231    },
232  },
233};
234</script>
235