xref: /openbmc/webui-vue/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue (revision ce7db82c9582c4dac04ac81d9af6b557ae7965e3)
1<template>
2  <page-section :section-title="$t('pageInventory.assemblies')">
3    <b-table
4      sort-icon-left
5      no-sort-reset
6      hover
7      responsive="md"
8      :items="items"
9      :fields="fields"
10      show-empty
11      :empty-text="$t('global.table.emptyMessage')"
12      :busy="isBusy"
13    >
14      <!-- Expand chevron icon -->
15      <template #cell(expandRow)="row">
16        <b-button
17          variant="link"
18          data-test-id="hardwareStatus-button-expandAssembly"
19          :title="expandRowLabel"
20          class="btn-icon-only"
21          @click="toggleRowDetails(row)"
22        >
23          <icon-chevron />
24          <span class="sr-only">{{ expandRowLabel }}</span>
25        </b-button>
26      </template>
27
28      <!-- Toggle identify LED -->
29      <template #cell(identifyLed)="row">
30        <b-form-checkbox
31          v-if="hasIdentifyLed(row.item.identifyLed)"
32          v-model="row.item.identifyLed"
33          name="switch"
34          switch
35          @change="toggleIdentifyLedValue(row.item)"
36        >
37          <span v-if="row.item.identifyLed">
38            {{ $t('global.status.on') }}
39          </span>
40          <span v-else> {{ $t('global.status.off') }} </span>
41        </b-form-checkbox>
42        <div v-else>--</div>
43      </template>
44
45      <template #row-details="{ item }">
46        <b-container fluid>
47          <b-row>
48            <b-col class="mt-2" sm="6" xl="6">
49              <!-- Nmae -->
50              <dt>{{ $t('pageInventory.table.name') }}:</dt>
51              <dd>{{ dataFormatter(item.name) }}</dd>
52              <!-- Serial number -->
53              <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
54              <dd>{{ dataFormatter(item.serialNumber) }}</dd>
55            </b-col>
56            <b-col class="mt-2" sm="6" xl="6">
57              <!-- Model-->
58              <dt>Model</dt>
59              <dd>{{ dataFormatter(item.model) }}</dd>
60              <!-- Spare Part Number -->
61              <dt>Spare Part Number</dt>
62              <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
63            </b-col>
64          </b-row>
65        </b-container>
66      </template>
67    </b-table>
68  </page-section>
69</template>
70
71<script>
72import PageSection from '@/components/Global/PageSection';
73import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
74import BVToastMixin from '@/components/Mixins/BVToastMixin';
75import TableRowExpandMixin, {
76  expandRowLabel,
77} from '@/components/Mixins/TableRowExpandMixin';
78import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
79import { useI18n } from 'vue-i18n';
80import i18n from '@/i18n';
81
82export default {
83  components: { IconChevron, PageSection },
84  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
85  data() {
86    return {
87      $t: useI18n().t,
88      isBusy: true,
89      fields: [
90        {
91          key: 'expandRow',
92          label: '',
93          tdClass: 'table-row-expand',
94        },
95        {
96          key: 'name',
97          label: i18n.global.t('pageInventory.table.id'),
98          formatter: this.dataFormatter,
99          sortable: true,
100        },
101        {
102          key: 'partNumber',
103          label: i18n.global.t('pageInventory.table.partNumber'),
104          formatter: this.dataFormatter,
105          sortable: true,
106        },
107        {
108          key: 'locationNumber',
109          label: i18n.global.t('pageInventory.table.locationNumber'),
110          formatter: this.dataFormatter,
111          sortable: true,
112        },
113        {
114          key: 'identifyLed',
115          label: i18n.global.t('pageInventory.table.identifyLed'),
116          formatter: this.dataFormatter,
117        },
118      ],
119      expandRowLabel: expandRowLabel,
120    };
121  },
122  computed: {
123    assemblies() {
124      return this.$store.getters['assemblies/assemblies'];
125    },
126    items() {
127      if (this.assemblies) {
128        return this.assemblies;
129      } else {
130        return [];
131      }
132    },
133  },
134  created() {
135    this.$store.dispatch('assemblies/getAssemblyInfo').finally(() => {
136      // Emit initial data fetch complete to parent component
137      this.$root.$emit('hardware-status-assembly-complete');
138      this.isBusy = false;
139    });
140  },
141  methods: {
142    toggleIdentifyLedValue(row) {
143      this.$store
144        .dispatch('assemblies/updateIdentifyLedValue', {
145          uri: row.uri,
146          memberId: row.id,
147          identifyLed: row.identifyLed,
148        })
149        .then((message) => this.successToast(message))
150        .catch(({ message }) => this.errorToast(message));
151    },
152    hasIdentifyLed(identifyLed) {
153      return typeof identifyLed === 'boolean';
154    },
155  },
156};
157</script>
158