xref: /openbmc/webui-vue/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue (revision ce7db82c9582c4dac04ac81d9af6b557ae7965e3)
1<template>
2  <page-section :section-title="$t('pageInventory.bmcManager')">
3    <b-table
4      responsive="md"
5      hover
6      :items="items"
7      :fields="fields"
8      show-empty
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-expandBmc"
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      <!-- Toggle identify LED -->
33      <template #cell(identifyLed)="row">
34        <b-form-checkbox
35          v-if="hasIdentifyLed(row.item.identifyLed)"
36          v-model="row.item.identifyLed"
37          name="switch"
38          switch
39          @change="toggleIdentifyLedValue(row.item)"
40        >
41          <span v-if="row.item.identifyLed">
42            {{ $t('global.status.on') }}
43          </span>
44          <span v-else> {{ $t('global.status.off') }} </span>
45        </b-form-checkbox>
46        <div v-else>--</div>
47      </template>
48
49      <template #row-details="{ item }">
50        <b-container fluid>
51          <b-row>
52            <b-col class="mt-2" sm="6" xl="6">
53              <dl>
54                <!-- Name -->
55                <dt>{{ $t('pageInventory.table.name') }}:</dt>
56                <dd>{{ dataFormatter(item.name) }}</dd>
57                <!-- Part number -->
58                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
59                <dd>{{ dataFormatter(item.partNumber) }}</dd>
60                <!-- Serial number -->
61                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
62                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
63                <!-- Spare part number -->
64                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
65                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
66                <!-- Model -->
67                <dt>{{ $t('pageInventory.table.model') }}:</dt>
68                <dd>{{ dataFormatter(item.model) }}</dd>
69                <!-- UUID -->
70                <dt>{{ $t('pageInventory.table.uuid') }}:</dt>
71                <dd>{{ dataFormatter(item.uuid) }}</dd>
72                <!-- Service entry point UUID -->
73                <dt>{{ $t('pageInventory.table.serviceEntryPointUuid') }}:</dt>
74                <dd>{{ dataFormatter(item.serviceEntryPointUuid) }}</dd>
75              </dl>
76            </b-col>
77            <b-col class="mt-2" sm="6" xl="6">
78              <dl>
79                <!-- Status state -->
80                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
81                <dd>{{ dataFormatter(item.statusState) }}</dd>
82                <!-- Power state -->
83                <dt>{{ $t('pageInventory.table.power') }}:</dt>
84                <dd>{{ dataFormatter(item.powerState) }}</dd>
85                <!-- Health rollup -->
86                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
87                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
88                <!-- BMC date and time -->
89                <dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt>
90                <dd>
91                  {{ $filters.formatDate(item.dateTime) }}
92                  {{ $filters.formatTime(item.dateTime) }}
93                </dd>
94                <!-- Reset date and time -->
95                <dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt>
96                <dd>
97                  {{ $filters.formatDate(item.lastResetTime) }}
98                  {{ $filters.formatTime(item.lastResetTime) }}
99                </dd>
100              </dl>
101            </b-col>
102          </b-row>
103          <div class="section-divider mb-3 mt-3"></div>
104          <b-row>
105            <b-col class="mt-2" sm="6" xl="6">
106              <dl>
107                <!-- Manufacturer -->
108                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
109                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
110                <!-- Description -->
111                <dt>{{ $t('pageInventory.table.description') }}:</dt>
112                <dd>{{ dataFormatter(item.description) }}</dd>
113                <!-- Manager type -->
114                <dt>{{ $t('pageInventory.table.managerType') }}:</dt>
115                <dd>{{ dataFormatter(item.managerType) }}</dd>
116              </dl>
117            </b-col>
118            <b-col class="mt-2" sm="6" xl="6">
119              <!-- Firmware Version  -->
120              <dl>
121                <dt>{{ $t('pageInventory.table.firmwareVersion') }}:</dt>
122                <dd>{{ item.firmwareVersion }}</dd>
123              </dl>
124              <!-- Graphical console -->
125              <p class="mt-1 mb-2 h6 float-none m-0">
126                {{ $t('pageInventory.table.graphicalConsole') }}
127              </p>
128              <dl class="ml-4">
129                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
130                <dd>
131                  {{ dataFormatterArray(item.graphicalConsoleConnectTypes) }}
132                </dd>
133                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
134                <dd>
135                  {{ dataFormatter(item.graphicalConsoleMaxSessions) }}
136                </dd>
137                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
138                <dd>
139                  {{ dataFormatter(item.graphicalConsoleEnabled) }}
140                </dd>
141              </dl>
142              <!-- Serial console -->
143              <p class="mt-1 mb-2 h6 float-none m-0">
144                {{ $t('pageInventory.table.serialConsole') }}
145              </p>
146              <dl class="ml-4">
147                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
148                <dd>
149                  {{ dataFormatterArray(item.serialConsoleConnectTypes) }}
150                </dd>
151                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
152                <dd>{{ dataFormatter(item.serialConsoleMaxSessions) }}</dd>
153                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
154                <dd>{{ dataFormatter(item.serialConsoleEnabled) }}</dd>
155              </dl>
156            </b-col>
157          </b-row>
158        </b-container>
159      </template>
160    </b-table>
161  </page-section>
162</template>
163
164<script>
165import PageSection from '@/components/Global/PageSection';
166import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
167import StatusIcon from '@/components/Global/StatusIcon';
168import BVToastMixin from '@/components/Mixins/BVToastMixin';
169import TableRowExpandMixin, {
170  expandRowLabel,
171} from '@/components/Mixins/TableRowExpandMixin';
172import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
173import { useI18n } from 'vue-i18n';
174import i18n from '@/i18n';
175
176export default {
177  components: { IconChevron, PageSection, StatusIcon },
178  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
179  data() {
180    return {
181      $t: useI18n().t,
182      isBusy: true,
183      fields: [
184        {
185          key: 'expandRow',
186          label: '',
187          tdClass: 'table-row-expand',
188        },
189        {
190          key: 'id',
191          label: i18n.global.t('pageInventory.table.id'),
192          formatter: this.dataFormatter,
193        },
194        {
195          key: 'health',
196          label: i18n.global.t('pageInventory.table.health'),
197          formatter: this.dataFormatter,
198        },
199        {
200          key: 'locationNumber',
201          label: i18n.global.t('pageInventory.table.locationNumber'),
202          formatter: this.dataFormatter,
203        },
204        {
205          key: 'identifyLed',
206          label: i18n.global.t('pageInventory.table.identifyLed'),
207          formatter: this.dataFormatter,
208        },
209      ],
210      expandRowLabel: expandRowLabel,
211    };
212  },
213  computed: {
214    bmc() {
215      return this.$store.getters['bmc/bmc'];
216    },
217    items() {
218      if (this.bmc) {
219        return [this.bmc];
220      } else {
221        return [];
222      }
223    },
224  },
225  created() {
226    this.$store.dispatch('bmc/getBmcInfo').finally(() => {
227      // Emit initial data fetch complete to parent component
228      this.$root.$emit('hardware-status-bmc-manager-complete');
229      this.isBusy = false;
230    });
231  },
232  methods: {
233    toggleIdentifyLedValue(row) {
234      this.$store
235        .dispatch('bmc/updateIdentifyLedValue', {
236          uri: row.uri,
237          identifyLed: row.identifyLed,
238        })
239        .then((message) => this.successToast(message))
240        .catch(({ message }) => this.errorToast(message));
241    },
242    // TO DO: remove hasIdentifyLed method once the following story is merged:
243    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/43179
244    hasIdentifyLed(identifyLed) {
245      return typeof identifyLed === 'boolean';
246    },
247  },
248};
249</script>
250