diff options
Diffstat (limited to 'src/views/Overview/OverviewNetwork.vue')
-rw-r--r-- | src/views/Overview/OverviewNetwork.vue | 121 |
1 files changed, 73 insertions, 48 deletions
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue index bfb378a9..fbb81c65 100644 --- a/src/views/Overview/OverviewNetwork.vue +++ b/src/views/Overview/OverviewNetwork.vue @@ -1,63 +1,88 @@ <template> - <div> - <div v-if="ethernetData.length === 0"> - {{ $t('global.status.notAvailable') }} - </div> - <div - v-for="ethernetInterface in ethernetData" - v-else - :key="ethernetInterface.id" - > - <h3 class="h5 font-weight-bold"> - {{ ethernetInterface.Id }} - </h3> - <b-row> - <b-col lg="6" xl="4"> - <dl> - <dt>{{ $t('pageOverview.network.hostname') }}</dt> - <dd>{{ ethernetInterface.HostName }}</dd> - </dl> - </b-col> - <b-col lg="6" xl="4"> - <dl> - <dt>{{ $t('pageOverview.network.macAddress') }}</dt> - <dd>{{ ethernetInterface.MACAddress }}</dd> - </dl> - </b-col> - <b-col lg="6" xl="4"> - <dl> - <dt>{{ $t('pageOverview.network.ipAddress') }}</dt> - <dd - v-for="(ip, $index) in ethernetInterface.IPv4Addresses" - :key="$index" - > - {{ ip.Address }} - </dd> - </dl> - </b-col> - </b-row> - </div> - </div> + <overview-card + :title="$t('pageOverview.networkInformation')" + :to="`/settings/network`" + > + <b-row class="mt-3"> + <b-col sm="6"> + <dl> + <dt>{{ $t('pageOverview.hostname') }}</dt> + <dd>{{ tableFormatter(hostname) }}</dd> + </dl> + </b-col> + <b-col sm="6"> + <dl> + <dt>{{ $t('pageOverview.linkStatus') }}</dt> + <dd> + {{ tableFormatter(linkStatus) }} + </dd> + </dl> + </b-col> + </b-row> + <b-row> + <b-col> + <dl> + <dt>{{ $t('pageOverview.ipv4') }}</dt> + <dd> + {{ tableFormatter(ipStaticAddress) }} + </dd> + </dl> + </b-col> + <b-col> + <dl> + <dt>{{ $t('pageOverview.dhcp') }}</dt> + <dd> + {{ tableFormatter(ipDhcpAddress) }} + </dd> + </dl> + </b-col> + </b-row> + </overview-card> </template> <script> +import OverviewCard from './OverviewCard'; +import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; +import { mapState } from 'vuex'; + export default { name: 'Network', + components: { + OverviewCard, + }, + mixins: [TableDataFormatterMixin], + data() { + return { + ipDhcpAddress: '', + }; + }, computed: { - ethernetData() { - return this.$store.getters['network/ethernetData']; - }, + ...mapState({ + ethernetData: (state) => state.network.ethernetData[0], + hostname() { + return this.ethernetData?.HostName; + }, + linkStatus() { + return this.ethernetData?.LinkStatus; + }, + ipStaticAddress() { + return this.ethernetData?.IPv4StaticAddresses[0].Address; + }, + }), }, created() { this.$store.dispatch('network/getEthernetData').finally(() => { this.$root.$emit('overview-network-complete'); }); + this.getDhcpInfo(); + }, + methods: { + getDhcpInfo() { + const dhcp = this.ethernetData.IPv4Addresses.filter( + (ipv4) => ipv4.AddressOrigin === 'DHCP' + ); + this.ipDhcpAddress = dhcp[0].Address; + }, }, }; </script> - -<style lang="scss" scoped> -dd { - margin-bottom: 0; -} -</style> |