Update overview events table and overview network layout
- Convert events list group to bootstrap table
- Add ethernet interfaces to overview using redfish
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I633f03ba4a65358861664a869b35adf5358c45e6
diff --git a/src/locales/en.json b/src/locales/en.json
index 9d89ce6..dd3d588 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -5,6 +5,10 @@
},
"on": "on",
"off": "off",
+ "state": {
+ "notAvailable": "Not available",
+ "notEnabled": "Not enabled"
+ },
"actions": {
"confirm": "Confirm",
"cancel": "Cancel",
@@ -54,27 +58,31 @@
},
"overview": {
"events": {
- "noHighEventsMsg": "There are no high priority events to display at this time."
+ "noHighEventsMsg": "There are no high priority events to display at this time.",
+ "date": "Date",
+ "description": "Description",
+ "id": "ID",
+ "refCode": "Reference code",
+ "viewAllButton": "View all event logs"
},
"firmwareVersion": "Firmware version",
- "hostname": "Hostname",
- "ipAddress": "IP address",
- "macAddress": "MAC address",
"manufacturer": "Manufacturer",
"model": "Model",
+ "network": {
+ "hostname": "Hostname",
+ "ipAddress": "IP address",
+ "macAddress": "MAC address"
+ },
"powerCap": "Power cap",
"powerConsumption": "Power consumption",
"sectionTitle": {
"bmcInformation": "BMC information",
"highPriorityEvents": "High priority events",
+ "networkInformation": "Network information",
"powerConsumption": "@:overview.powerConsumption",
"serverInformation": "Server information"
},
"serialNumber": "Serial number",
- "state": {
- "notAvailable": "Not available",
- "notEnabled": "Not enabled"
- },
"quicklinks": {
"bmcTime": "BMC time",
"editNetworkSettings": "Edit network settings",
diff --git a/src/store/modules/Configuration/NetworkSettingsStore.js b/src/store/modules/Configuration/NetworkSettingsStore.js
index ee58a77..3b1f232 100644
--- a/src/store/modules/Configuration/NetworkSettingsStore.js
+++ b/src/store/modules/Configuration/NetworkSettingsStore.js
@@ -3,40 +3,36 @@
const NetworkSettingsStore = {
namespaced: true,
state: {
- networkData: null,
- ipAddress: '--',
- macAddress: '--'
+ ethernetData: []
},
getters: {
- networkData: state => state.networkData,
- ipAddress: state => state.ipAddress,
- macAddress: state => state.macAddress
+ ethernetData: state => state.ethernetData
},
mutations: {
- setNetworkData: (state, networkData) => (state.networkData = networkData),
- setIpAddress: (state, ipAddress) => (state.ipAddress = ipAddress),
- setMacAddress: (state, macAddress) => (state.macAddress = macAddress)
+ setEthernetData: (state, ethernetData) =>
+ (state.ethernetData = ethernetData)
},
actions: {
- getNetworkData({ commit }) {
+ getEthernetData({ commit }) {
api
- .get('/xyz/openbmc_project/network/enumerate')
- .then(response => {
- const networkData = response.data.data;
- const ipAddresses = [];
- const interfaceId = /eth[0-9]/;
- for (let key in networkData) {
- if (key.includes('ipv4')) {
- ipAddresses.push(networkData[key].Address);
- }
- if (
- key.match(interfaceId) &&
- networkData[key].MACAddress !== undefined
- ) {
- commit('setMacAddress', networkData[key].MACAddress);
- }
- }
- commit('setIpAddress', ipAddresses);
+ .get('/redfish/v1/Managers/bmc/EthernetInterfaces')
+ .then(response =>
+ response.data.Members.map(
+ ethernetInterface => ethernetInterface['@odata.id']
+ )
+ )
+ .then(ethernetInterfaceIds =>
+ api.all(
+ ethernetInterfaceIds.map(ethernetInterface =>
+ api.get(ethernetInterface)
+ )
+ )
+ )
+ .then(ethernetInterfaces => {
+ const ethernetData = ethernetInterfaces.map(
+ ethernetInterface => ethernetInterface.data
+ );
+ commit('setEthernetData', ethernetData);
})
.catch(error => {
console.log('Network Data:', error);
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 9fbc0dd..17d6684 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -5,11 +5,32 @@
<overview-quick-links />
</div>
<b-row>
- <b-col lg="8" sm="12">
+ <b-col>
<page-section
:section-title="$t('overview.sectionTitle.serverInformation')"
>
<b-row>
+ <b-col>
+ <dl>
+ <dt>Firmware version</dt>
+ <dd>{{ bmcActiveVersion }}</dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </page-section>
+ <b-row>
+ <b-col>
+ <page-section
+ :section-title="$t('overview.sectionTitle.networkInformation')"
+ >
+ <overview-network />
+ </page-section>
+ </b-col>
+ </b-row>
+ </b-col>
+ <b-col>
+ <page-section section-title="Server information">
+ <b-row>
<b-col sm="6">
<dl>
<dt>{{ $t('overview.model') }}</dt>
@@ -37,36 +58,6 @@
</b-row>
</page-section>
<page-section
- :section-title="$t('overview.sectionTitle.bmcInformation')"
- >
- <b-row>
- <b-col sm="6">
- <dl>
- <dt>{{ $t('overview.hostname') }}</dt>
- <dd>{{ hostName }}</dd>
- </dl>
- </b-col>
- <b-col sm="6">
- <dl>
- <dt>{{ $t('overview.macAddress') }}</dt>
- <dd>{{ macAddress }}</dd>
- </dl>
- </b-col>
- <b-col sm="6">
- <dl>
- <dt>{{ $t('overview.ipAddress') }}</dt>
- <dd v-for="ip in ipAddress" :key="ip.id">{{ ip }}</dd>
- </dl>
- </b-col>
- <b-col sm="6">
- <dl>
- <dt>{{ $t('overview.firmwareVersion') }}</dt>
- <dd>{{ bmcActiveVersion }}</dd>
- </dl>
- </b-col>
- </b-row>
- </page-section>
- <page-section
:section-title="$t('overview.sectionTitle.powerConsumption')"
>
<b-row>
@@ -74,7 +65,7 @@
<dl>
<dt>{{ $t('overview.powerConsumption') }}</dt>
<dd v-if="!powerConsumption">
- {{ $t('overview.state.notAvailable') }}
+ {{ $t('global.state.notAvailable') }}
</dd>
<dd v-else>{{ powerConsumption }} W</dd>
</dl>
@@ -83,7 +74,7 @@
<dl>
<dt>{{ $t('overview.powerCap') }}</dt>
<dd v-if="powerCapData">{{ powerCapData }} W</dd>
- <dd v-else>{{ $t('overview.state.notEnabled') }}</dd>
+ <dd v-else>{{ $t('global.state.notEnabled') }}</dd>
</dl>
</b-col>
</b-row>
@@ -101,14 +92,17 @@
<script>
import OverviewQuickLinks from './OverviewQuickLinks';
import OverviewEvents from './OverviewEvents';
+import OverviewNetwork from './OverviewNetwork';
import PageTitle from '../../components/Global/PageTitle';
import PageSection from '../../components/Global/PageSection';
import { mapState } from 'vuex';
+
export default {
name: 'Overview',
components: {
OverviewQuickLinks,
OverviewEvents,
+ OverviewNetwork,
PageTitle,
PageSection
},
@@ -120,9 +114,7 @@
hostActiveVersion: state => state.firmware.hostActiveVersion,
bmcActiveVersion: state => state.firmware.bmcActiveVersion,
powerConsumption: state => state.powerConsumption.powerConsumption,
- powerCapData: state => state.powerCap.powerCapData,
- ipAddress: state => state.networkSettings.ipAddress,
- macAddress: state => state.networkSettings.macAddress
+ powerCapValue: state => state.powerCap.powerCapValue
}),
created() {
this.getOverviewInfo();
@@ -134,7 +126,6 @@
this.$store.dispatch('firmware/getFirmwareInfo');
this.$store.dispatch('powerConsumption/getPowerData');
this.$store.dispatch('powerCap/getPowerCapData');
- this.$store.dispatch('networkSettings/getNetworkData');
}
}
};
@@ -143,6 +134,12 @@
<style lang="scss" scoped>
.quicklinks-section {
margin-bottom: $spacer * 2;
- margin-left: -1rem;
+ margin-left: $spacer * -1;
+}
+
+dd {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
</style>
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index a08fb54..b85142b 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -1,30 +1,55 @@
<template>
<div>
- <b-list-group v-for="logData in eventLogData" :key="logData.id">
- <b-list-group-item href="#" class="flex-column align-items-start">
- {{ '#' + logData.logId }}
- <b-badge variant="danger">{{ logData.priority }}</b-badge>
- <div class="d-flex w-100 justify-content-between">
- <small>{{
- logData.Timestamp | date('MMM DD YYYY HH:MM:SS A ZZ')
- }}</small>
- <chevron-right16 />
- </div>
- <p class="mb-1">{{ logData.eventID }}: {{ logData.description }}</p>
- </b-list-group-item>
- </b-list-group>
- <b-list-group v-if="eventLogData.length === 0">
+ <div v-if="eventLogData.length == 0">
{{ $t('overview.events.noHighEventsMsg') }}
- </b-list-group>
+ </div>
+ <div v-else>
+ <!-- TODO: link to event log -->
+ <b-button variant="link" href="#">
+ {{ $t('overview.events.viewAllButton') }}
+ </b-button>
+ <b-table
+ head-variant="dark"
+ per-page="5"
+ sort-by="logId"
+ sort-desc
+ stacked="sm"
+ :items="eventLogData"
+ :fields="fields"
+ >
+ <template v-slot:cell(timestamp)="data">
+ {{ data.value | date('hh:MM:SS A') }} <br />
+ {{ data.value | date('dddd, MMM DD, YYYY') }}
+ </template>
+ </b-table>
+ </div>
</div>
</template>
<script>
-import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
export default {
name: 'Events',
- components: {
- ChevronRight16
+ data() {
+ return {
+ fields: [
+ {
+ key: 'logId',
+ label: this.$t('overview.events.id')
+ },
+ {
+ key: 'eventID',
+ label: this.$t('overview.events.refCode')
+ },
+ {
+ key: 'timestamp',
+ label: this.$t('overview.events.date')
+ },
+ {
+ key: 'description',
+ label: this.$t('overview.events.description')
+ }
+ ]
+ };
},
computed: {
eventLogData() {
@@ -41,3 +66,9 @@
}
};
</script>
+
+<style lang="scss" scoped>
+.btn {
+ @include float-right;
+}
+</style>
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
new file mode 100644
index 0000000..69a727d
--- /dev/null
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -0,0 +1,72 @@
+<template>
+ <div>
+ <div v-if="ethernetData.length === 0">
+ {{ $t('global.state.notAvailable') }}
+ </div>
+ <div
+ v-for="ethernetInterface in ethernetData"
+ v-else
+ :key="ethernetInterface.id"
+ >
+ <p class="h6 interface-name font-weight-bold">
+ {{ ethernetInterface.Id }}
+ </p>
+ <b-row>
+ <b-col md="12" lg="4">
+ <dl>
+ <dt>{{ $t('overview.network.hostname') }}</dt>
+ <dd>{{ ethernetInterface.HostName }}</dd>
+ </dl>
+ </b-col>
+ <b-col md="12" lg="4">
+ <dl>
+ <dt>{{ $t('overview.network.macAddress') }}</dt>
+ <dd>{{ ethernetInterface.MACAddress }}</dd>
+ </dl>
+ </b-col>
+ <b-col md="12" lg="4">
+ <dl>
+ <dt>{{ $t('overview.network.ipAddress') }}</dt>
+ <dd
+ v-for="(ip, $index) in ethernetInterface.IPv4Addresses"
+ :key="$index"
+ >
+ {{ ip.Address }}
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Network',
+ computed: {
+ ethernetData() {
+ return this.$store.getters['networkSettings/ethernetData'];
+ }
+ },
+ created() {
+ this.getEthernetData();
+ },
+ methods: {
+ getEthernetData() {
+ this.$store.dispatch('networkSettings/getEthernetData');
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+.interface-name {
+ text-transform: capitalize;
+}
+dd {
+ margin-bottom: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+</style>