diff options
Diffstat (limited to 'src/views/Overview/OverviewNetwork.vue')
-rw-r--r-- | src/views/Overview/OverviewNetwork.vue | 72 |
1 files changed, 72 insertions, 0 deletions
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> |