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