diff options
-rw-r--r-- | src/locales/en.json | 24 | ||||
-rw-r--r-- | src/store/modules/Configuration/NetworkSettingsStore.js | 50 | ||||
-rw-r--r-- | src/views/Overview/Overview.vue | 73 | ||||
-rw-r--r-- | src/views/Overview/OverviewEvents.vue | 67 | ||||
-rw-r--r-- | src/views/Overview/OverviewNetwork.vue | 72 |
5 files changed, 195 insertions, 91 deletions
diff --git a/src/locales/en.json b/src/locales/en.json index 9d89ce60..dd3d588b 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 ee58a77b..3b1f2320 100644 --- a/src/store/modules/Configuration/NetworkSettingsStore.js +++ b/src/store/modules/Configuration/NetworkSettingsStore.js @@ -3,40 +3,36 @@ import api from '../../api'; 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 9fbc0dd5..17d66849 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 @@ export default { 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 @@ export default { this.$store.dispatch('firmware/getFirmwareInfo'); this.$store.dispatch('powerConsumption/getPowerData'); this.$store.dispatch('powerCap/getPowerCapData'); - this.$store.dispatch('networkSettings/getNetworkData'); } } }; @@ -143,6 +134,12 @@ export default { <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 a08fb549..b85142b8 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 @@ export default { } }; </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 00000000..69a727de --- /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> |