diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-02-13 22:29:40 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-02-25 01:50:31 +0300 |
commit | 9d40e308fb33d5cef91deb8d78451ab021614898 (patch) | |
tree | 08a2c0b46fecb551bb95becc5138e2803486cef5 /src/views/Overview | |
parent | 0e893f03bbcb2fa2cc6ce128091ba68b8ea93e8f (diff) | |
download | webui-vue-9d40e308fb33d5cef91deb8d78451ab021614898.tar.xz |
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
Diffstat (limited to 'src/views/Overview')
-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 |
3 files changed, 156 insertions, 56 deletions
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> |