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