xref: /openbmc/webui-vue/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue (revision 7385e139b0c9efca7430458cee982e63e282f4ae) 
1<template>
2  <page-section :section-title="$t('pageInventory.system')">
3    <b-table
4      responsive="md"
5      hover
6      show-empty
7      :items="systems"
8      :fields="fields"
9      :empty-text="$t('global.table.emptyMessage')"
10      :busy="isBusy"
11    >
12      <!-- Expand chevron icon -->
13      <template #cell(expandRow)="row">
14        <b-button
15          variant="link"
16          data-test-id="hardwareStatus-button-expandSystem"
17          :title="expandRowLabel"
18          class="btn-icon-only"
19          @click="toggleRowDetails(row)"
20        >
21          <icon-chevron />
22          <span class="sr-only">{{ expandRowLabel }}</span>
23        </b-button>
24      </template>
25
26      <!-- Health -->
27      <template #cell(health)="{ value }">
28        <status-icon :status="statusIcon(value)" />
29        {{ value }}
30      </template>
31
32      <template #cell(locationIndicatorActive)="{ item }">
33        <b-form-checkbox
34          id="identifyLedSwitchSystem"
35          v-model="item.locationIndicatorActive"
36          data-test-id="inventorySystem-toggle-identifyLed"
37          switch
38          @change="toggleIdentifyLedSwitch"
39        >
40          <span v-if="item.locationIndicatorActive">
41            {{ $t('global.status.on') }}
42          </span>
43          <span v-else>{{ $t('global.status.off') }}</span>
44        </b-form-checkbox>
45      </template>
46
47      <template #row-details="{ item }">
48        <b-container fluid>
49          <b-row>
50            <b-col class="mt-2" sm="6">
51              <dl>
52                <!-- Serial number -->
53                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
54                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
55                <!-- Model -->
56                <dt>{{ $t('pageInventory.table.model') }}:</dt>
57                <dd>{{ dataFormatter(item.model) }}</dd>
58                <!-- Asset tag -->
59                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
60                <dd class="mb-2">
61                  {{ dataFormatter(item.assetTag) }}
62                </dd>
63              </dl>
64            </b-col>
65            <b-col class="mt-2" sm="6">
66              <dl>
67                <!-- Status state -->
68                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
69                <dd>{{ dataFormatter(item.statusState) }}</dd>
70                <!-- Power state -->
71                <dt>{{ $t('pageInventory.table.power') }}:</dt>
72                <dd>{{ dataFormatter(item.powerState) }}</dd>
73                <!-- Health rollup -->
74                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
75                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
76              </dl>
77            </b-col>
78          </b-row>
79          <div class="section-divider mb-3 mt-3"></div>
80          <b-row>
81            <b-col class="mt-1" sm="6">
82              <dl>
83                <!-- Manufacturer -->
84                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
85                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
86                <!-- Description -->
87                <dt>{{ $t('pageInventory.table.description') }}:</dt>
88                <dd>{{ dataFormatter(item.description) }}</dd>
89                <!-- Sub Model -->
90                <dt>{{ $t('pageInventory.table.subModel') }}:</dt>
91                <dd>
92                  {{ dataFormatter(item.subModel) }}
93                </dd>
94                <!-- System Type -->
95                <dt>{{ $t('pageInventory.table.systemType') }}:</dt>
96                <dd>
97                  {{ dataFormatter(item.systemType) }}
98                </dd>
99              </dl>
100            </b-col>
101            <b-col sm="6">
102              <!-- Memory Summary -->
103              <p class="mt-1 mb-2 h6 float-none m-0">
104                {{ $t('pageInventory.table.memorySummary') }}
105              </p>
106              <dl class="ml-4">
107                <!-- Status state -->
108                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
109                <dd>{{ dataFormatter(item.memorySummaryState) }}</dd>
110                <!-- Health -->
111                <dt>{{ $t('pageInventory.table.health') }}:</dt>
112                <dd>{{ dataFormatter(item.memorySummaryHealth) }}</dd>
113                <!-- Health Roll  -->
114                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
115                <dd>{{ dataFormatter(item.memorySummaryHealthRollup) }}</dd>
116                <!-- Total system memory -->
117                <dt>{{ $t('pageInventory.table.totalSystemMemoryGiB') }}:</dt>
118                <dd>{{ dataFormatter(item.totalSystemMemoryGiB) }}GB</dd>
119              </dl>
120              <!-- Processor Summary -->
121              <p class="mt-1 mb-2 h6 float-none m-0">
122                {{ $t('pageInventory.table.processorSummary') }}
123              </p>
124              <dl class="ml-4">
125                <!-- Status state -->
126                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
127                <dd>{{ dataFormatter(item.processorSummaryState) }}</dd>
128                <!-- Health -->
129                <dt>{{ $t('pageInventory.table.health') }}:</dt>
130                <dd>{{ dataFormatter(item.processorSummaryHealth) }}</dd>
131                <!-- Health Rollup -->
132                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
133                <dd>{{ dataFormatter(item.processorSummaryHealthRoll) }}</dd>
134                <!-- Count -->
135                <dt>{{ $t('pageInventory.table.count') }}:</dt>
136                <dd>{{ dataFormatter(item.processorSummaryCount) }}</dd>
137                <!-- Core Count -->
138                <dt>{{ $t('pageInventory.table.coreCount') }}:</dt>
139                <dd>{{ dataFormatter(item.processorSummaryCoreCount) }}</dd>
140              </dl>
141            </b-col>
142          </b-row>
143        </b-container>
144      </template>
145    </b-table>
146  </page-section>
147</template>
148
149<script>
150import BVToastMixin from '@/components/Mixins/BVToastMixin';
151import PageSection from '@/components/Global/PageSection';
152import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
153
154import StatusIcon from '@/components/Global/StatusIcon';
155
156import TableRowExpandMixin, {
157  expandRowLabel,
158} from '@/components/Mixins/TableRowExpandMixin';
159import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
160
161export default {
162  components: { IconChevron, PageSection, StatusIcon },
163  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
164  data() {
165    return {
166      isBusy: true,
167      fields: [
168        {
169          key: 'expandRow',
170          label: '',
171          tdClass: 'table-row-expand',
172        },
173        {
174          key: 'id',
175          label: this.$t('pageInventory.table.id'),
176          formatter: this.dataFormatter,
177        },
178        {
179          key: 'hardwareType',
180          label: this.$t('pageInventory.table.hardwareType'),
181          formatter: this.dataFormatter,
182          tdClass: 'text-nowrap',
183        },
184        {
185          key: 'health',
186          label: this.$t('pageInventory.table.health'),
187          formatter: this.dataFormatter,
188          tdClass: 'text-nowrap',
189        },
190        {
191          key: 'locationNumber',
192          label: this.$t('pageInventory.table.locationNumber'),
193          formatter: this.dataFormatter,
194        },
195        {
196          key: 'locationIndicatorActive',
197          label: this.$t('pageInventory.table.identifyLed'),
198          formatter: this.dataFormatter,
199        },
200      ],
201      expandRowLabel: expandRowLabel,
202    };
203  },
204  computed: {
205    systems() {
206      return this.$store.getters['system/systems'];
207    },
208  },
209  created() {
210    this.$store.dispatch('system/getSystem').finally(() => {
211      // Emit initial data fetch complete to parent component
212      this.$root.$emit('hardware-status-system-complete');
213      this.isBusy = false;
214    });
215  },
216  methods: {
217    toggleIdentifyLedSwitch(state) {
218      this.$store
219        .dispatch('system/changeIdentifyLedState', state)
220        .catch(({ message }) => this.errorToast(message));
221    },
222  },
223};
224</script>
225