1<template>
2  <page-section :section-title="$t('pageInventory.processors')">
3    <!-- Search -->
4    <b-row class="align-items-end">
5      <b-col sm="6" md="5" xl="4">
6        <search
7          @change-search="onChangeSearchInput"
8          @clear-search="onClearSearchInput"
9        />
10      </b-col>
11      <b-col sm="6" md="3" xl="2">
12        <table-cell-count
13          :filtered-items-count="filteredRows"
14          :total-number-of-cells="processors.length"
15        ></table-cell-count>
16      </b-col>
17    </b-row>
18    <b-table
19      sort-icon-left
20      no-sort-reset
21      hover
22      responsive="md"
23      show-empty
24      :items="processors"
25      :fields="fields"
26      :sort-desc="true"
27      :filter="searchFilter"
28      :empty-text="$t('global.table.emptyMessage')"
29      :empty-filtered-text="$t('global.table.emptySearchMessage')"
30      :busy="isBusy"
31      @filtered="onFiltered"
32    >
33      <!-- Expand button -->
34      <template #cell(expandRow)="row">
35        <b-button
36          variant="link"
37          data-test-id="hardwareStatus-button-expandProcessors"
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      <!-- Health -->
47      <template #cell(health)="{ value }">
48        <status-icon :status="statusIcon(value)" />
49        {{ value }}
50      </template>
51
52      <!-- Toggle identify LED -->
53      <template #cell(identifyLed)="row">
54        <b-form-checkbox
55          v-if="hasIdentifyLed(row.item.identifyLed)"
56          v-model="row.item.identifyLed"
57          name="switch"
58          switch
59          @change="toggleIdentifyLedValue(row.item)"
60        >
61          <span v-if="row.item.identifyLed">
62            {{ $t('global.status.on') }}
63          </span>
64          <span v-else> {{ $t('global.status.off') }} </span>
65        </b-form-checkbox>
66        <div v-else>--</div>
67      </template>
68
69      <template #row-details="{ item }">
70        <b-container fluid>
71          <b-row>
72            <b-col class="mt-2" sm="6" xl="6">
73              <dl>
74                <!-- Name -->
75                <dt>{{ $t('pageInventory.table.name') }}:</dt>
76                <dd>{{ dataFormatter(item.name) }}</dd>
77                <!-- Part Number -->
78                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
79                <dd>{{ dataFormatter(item.partNumber) }}</dd>
80                <!-- Serial Number -->
81                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
82                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
83                <!-- Spare Part Number -->
84                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
85                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
86                <!-- Model -->
87                <dt>{{ $t('pageInventory.table.model') }}:</dt>
88                <dd>{{ dataFormatter(item.model) }}</dd>
89                <!-- Asset Tag -->
90                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
91                <dd>{{ dataFormatter(item.assetTag) }}</dd>
92              </dl>
93            </b-col>
94            <b-col class="mt-2" sm="6" xl="6">
95              <dl>
96                <!-- Status state -->
97                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
98                <dd>{{ dataFormatter(item.statusState) }}</dd>
99                <!-- Health Rollup -->
100                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
101                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
102              </dl>
103            </b-col>
104          </b-row>
105          <div class="section-divider mb-3 mt-3"></div>
106          <b-row>
107            <b-col class="mt-1" sm="6" xl="6">
108              <dl>
109                <!-- Manufacturer -->
110                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
111                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
112                <!-- Processor Type -->
113                <dt>{{ $t('pageInventory.table.processorType') }}:</dt>
114                <dd>{{ dataFormatter(item.processorType) }}</dd>
115                <!-- Processor Architecture -->
116                <dt>{{ $t('pageInventory.table.processorArchitecture') }}:</dt>
117                <dd>{{ dataFormatter(item.processorArchitecture) }}</dd>
118                <!-- Instruction Set -->
119                <dt>{{ $t('pageInventory.table.instructionSet') }}:</dt>
120                <dd>{{ dataFormatter(item.instructionSet) }}</dd>
121                <!-- Version -->
122                <dt>{{ $t('pageInventory.table.version') }}:</dt>
123                <dd>{{ dataFormatter(item.version) }}</dd>
124              </dl>
125            </b-col>
126            <b-col class="mt-1" sm="6" xl="6">
127              <dl>
128                <!-- Min Speed MHz -->
129                <dt>{{ $t('pageInventory.table.minSpeedMHz') }}:</dt>
130                <dd>
131                  {{ dataFormatter(item.minSpeedMHz) }}
132                  {{ $t('unit.MHz') }}
133                </dd>
134                <!-- Max Speed MHz -->
135                <dt>{{ $t('pageInventory.table.maxSpeedMHz') }}:</dt>
136                <dd>
137                  {{ dataFormatter(item.maxSpeedMHz) }}
138                  {{ $t('unit.MHz') }}
139                </dd>
140                <!-- Total Cores -->
141                <dt>{{ $t('pageInventory.table.totalCores') }}:</dt>
142                <dd>{{ dataFormatter(item.totalCores) }}</dd>
143                <!-- Total Threads -->
144                <dt>{{ $t('pageInventory.table.totalThreads') }}:</dt>
145                <dd>{{ dataFormatter(item.totalThreads) }}</dd>
146              </dl>
147            </b-col>
148          </b-row>
149        </b-container>
150      </template>
151    </b-table>
152  </page-section>
153</template>
154
155<script>
156import PageSection from '@/components/Global/PageSection';
157import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
158import StatusIcon from '@/components/Global/StatusIcon';
159import TableCellCount from '@/components/Global/TableCellCount';
160import BVToastMixin from '@/components/Mixins/BVToastMixin';
161import TableSortMixin from '@/components/Mixins/TableSortMixin';
162import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
163import Search from '@/components/Global/Search';
164import SearchFilterMixin, {
165  searchFilter,
166} from '@/components/Mixins/SearchFilterMixin';
167import TableRowExpandMixin, {
168  expandRowLabel,
169} from '@/components/Mixins/TableRowExpandMixin';
170
171export default {
172  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
173  mixins: [
174    BVToastMixin,
175    TableRowExpandMixin,
176    DataFormatterMixin,
177    TableSortMixin,
178    SearchFilterMixin,
179  ],
180  data() {
181    return {
182      isBusy: true,
183      fields: [
184        {
185          key: 'expandRow',
186          label: '',
187          tdClass: 'table-row-expand',
188          sortable: false,
189        },
190        {
191          key: 'id',
192          label: this.$t('pageInventory.table.id'),
193          formatter: this.dataFormatter,
194          sortable: true,
195        },
196        {
197          key: 'health',
198          label: this.$t('pageInventory.table.health'),
199          formatter: this.dataFormatter,
200          sortable: true,
201          tdClass: 'text-nowrap',
202        },
203        {
204          key: 'locationNumber',
205          label: this.$t('pageInventory.table.locationNumber'),
206          formatter: this.dataFormatter,
207          sortable: true,
208        },
209        {
210          key: 'identifyLed',
211          label: this.$t('pageInventory.table.identifyLed'),
212          formatter: this.dataFormatter,
213          sortable: false,
214        },
215      ],
216      searchFilter: searchFilter,
217      searchTotalFilteredRows: 0,
218      expandRowLabel: expandRowLabel,
219    };
220  },
221  computed: {
222    filteredRows() {
223      return this.searchFilter
224        ? this.searchTotalFilteredRows
225        : this.processors.length;
226    },
227    processors() {
228      return this.$store.getters['processors/processors'];
229    },
230  },
231  created() {
232    this.$store.dispatch('processors/getProcessorsInfo').finally(() => {
233      // Emit initial data fetch complete to parent component
234      this.$root.$emit('hardware-status-processors-complete');
235      this.isBusy = false;
236    });
237  },
238  methods: {
239    onFiltered(filteredItems) {
240      this.searchTotalFilteredRows = filteredItems.length;
241    },
242    toggleIdentifyLedValue(row) {
243      this.$store
244        .dispatch('processors/updateIdentifyLedValue', {
245          uri: row.uri,
246          identifyLed: row.identifyLed,
247        })
248        .catch(({ message }) => this.errorToast(message));
249    },
250    // TO DO: remove hasIdentifyLed when the following is merged:
251    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045
252    hasIdentifyLed(identifyLed) {
253      return typeof identifyLed === 'boolean';
254    },
255  },
256};
257</script>
258