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