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/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>