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>{{ dataFormatter(item.name) }}</dd>
56                <!-- Part number -->
57                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
58                <dd>{{ dataFormatter(item.partNumber) }}</dd>
59                <!-- Serial number -->
60                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
61                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
62                <!-- Spare part number -->
63                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
64                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
65                <!-- Model -->
66                <dt>{{ $t('pageInventory.table.model') }}:</dt>
67                <dd>{{ dataFormatter(item.model) }}</dd>
68                <!-- UUID -->
69                <dt>{{ $t('pageInventory.table.uuid') }}:</dt>
70                <dd>{{ dataFormatter(item.uuid) }}</dd>
71                <!-- Service entry point UUID -->
72                <dt>{{ $t('pageInventory.table.serviceEntryPointUuid') }}:</dt>
73                <dd>{{ dataFormatter(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>{{ dataFormatter(item.statusState) }}</dd>
81                <!-- Power state -->
82                <dt>{{ $t('pageInventory.table.power') }}:</dt>
83                <dd>{{ dataFormatter(item.powerState) }}</dd>
84                <!-- Health rollup -->
85                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
86                <dd>{{ dataFormatter(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>{{ dataFormatter(item.manufacturer) }}</dd>
109                <!-- Description -->
110                <dt>{{ $t('pageInventory.table.description') }}:</dt>
111                <dd>{{ dataFormatter(item.description) }}</dd>
112                <!-- Manager type -->
113                <dt>{{ $t('pageInventory.table.managerType') }}:</dt>
114                <dd>{{ dataFormatter(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('pageInventory.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('pageInventory.table.graphicalConsole') }}
126              </p>
127              <dl class="ml-4">
128                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
129                <dd>
130                  {{ dataFormatterArray(item.graphicalConsoleConnectTypes) }}
131                </dd>
132                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
133                <dd>
134                  {{ dataFormatter(item.graphicalConsoleMaxSessions) }}
135                </dd>
136                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
137                <dd>
138                  {{ dataFormatter(item.graphicalConsoleEnabled) }}
139                </dd>
140              </dl>
141              <!-- Serial console -->
142              <p class="mt-1 mb-2 h6 float-none m-0">
143                {{ $t('pageInventory.table.serialConsole') }}
144              </p>
145              <dl class="ml-4">
146                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
147                <dd>
148                  {{ dataFormatterArray(item.serialConsoleConnectTypes) }}
149                </dd>
150                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
151                <dd>{{ dataFormatter(item.serialConsoleMaxSessions) }}</dd>
152                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
153                <dd>{{ dataFormatter(item.serialConsoleEnabled) }}</dd>
154              </dl>
155            </b-col>
156          </b-row>
157        </b-container>
158      </template>
159    </b-table>
160  </page-section>
161</template>
162
163<script>
164import PageSection from '@/components/Global/PageSection';
165import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
166import StatusIcon from '@/components/Global/StatusIcon';
167import BVToastMixin from '@/components/Mixins/BVToastMixin';
168import TableRowExpandMixin, {
169  expandRowLabel,
170} from '@/components/Mixins/TableRowExpandMixin';
171import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
172
173export default {
174  components: { IconChevron, PageSection, StatusIcon },
175  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
176  data() {
177    return {
178      fields: [
179        {
180          key: 'expandRow',
181          label: '',
182          tdClass: 'table-row-expand',
183        },
184        {
185          key: 'id',
186          label: this.$t('pageInventory.table.id'),
187          formatter: this.dataFormatter,
188        },
189        {
190          key: 'health',
191          label: this.$t('pageInventory.table.health'),
192          formatter: this.dataFormatter,
193        },
194        {
195          key: 'locationNumber',
196          label: this.$t('pageInventory.table.locationNumber'),
197          formatter: this.dataFormatter,
198        },
199        {
200          key: 'identifyLed',
201          label: this.$t('pageInventory.table.identifyLed'),
202          formatter: this.dataFormatter,
203        },
204      ],
205      expandRowLabel: expandRowLabel,
206    };
207  },
208  computed: {
209    bmc() {
210      return this.$store.getters['bmc/bmc'];
211    },
212    items() {
213      if (this.bmc) {
214        return [this.bmc];
215      } else {
216        return [];
217      }
218    },
219  },
220  created() {
221    this.$store.dispatch('bmc/getBmcInfo').finally(() => {
222      // Emit initial data fetch complete to parent component
223      this.$root.$emit('hardware-status-bmc-manager-complete');
224    });
225  },
226  methods: {
227    toggleIdentifyLedValue(row) {
228      this.$store
229        .dispatch('bmc/updateIdentifyLedValue', {
230          uri: row.uri,
231          identifyLed: row.identifyLed,
232        })
233        .catch(({ message }) => this.errorToast(message));
234    },
235    // TO DO: remove hasIdentifyLed method once the following story is merged:
236    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/43179
237    hasIdentifyLed(identifyLed) {
238      return typeof identifyLed === 'boolean';
239    },
240  },
241};
242</script>
243