blob: 1c1001e159021189921f677b0b283271eeb43741 [file] [log] [blame]
Dixsie Wolmers9d40e302020-02-13 13:29:40 -06001<template>
Dixsie Wolmers6a192d52021-09-02 15:26:58 -05002 <overview-card
3 :title="$t('pageOverview.networkInformation')"
4 :to="`/settings/network`"
5 >
6 <b-row class="mt-3">
7 <b-col sm="6">
8 <dl>
9 <dt>{{ $t('pageOverview.hostname') }}</dt>
Dixsie Wolmers9726f9a2021-09-07 15:33:16 -050010 <dd>{{ dataFormatter(hostname) }}</dd>
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050011 </dl>
12 </b-col>
13 <b-col sm="6">
14 <dl>
15 <dt>{{ $t('pageOverview.linkStatus') }}</dt>
16 <dd>
Dixsie Wolmers9726f9a2021-09-07 15:33:16 -050017 {{ dataFormatter(linkStatus) }}
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050018 </dd>
19 </dl>
20 </b-col>
21 </b-row>
22 <b-row>
23 <b-col>
24 <dl>
25 <dt>{{ $t('pageOverview.ipv4') }}</dt>
26 <dd>
Dixsie Wolmers9726f9a2021-09-07 15:33:16 -050027 {{ dataFormatter(ipStaticAddress) }}
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050028 </dd>
29 </dl>
30 </b-col>
31 <b-col>
32 <dl>
33 <dt>{{ $t('pageOverview.dhcp') }}</dt>
34 <dd>
Dixsie Wolmers9726f9a2021-09-07 15:33:16 -050035 {{ dataFormatter(ipDhcpAddress) }}
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050036 </dd>
37 </dl>
38 </b-col>
39 </b-row>
40 </overview-card>
Dixsie Wolmers9d40e302020-02-13 13:29:40 -060041</template>
42
43<script>
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050044import OverviewCard from './OverviewCard';
Dixsie Wolmers9726f9a2021-09-07 15:33:16 -050045import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050046import { mapState } from 'vuex';
47
Dixsie Wolmers9d40e302020-02-13 13:29:40 -060048export default {
49 name: 'Network',
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050050 components: {
51 OverviewCard,
52 },
Dixsie Wolmers9726f9a2021-09-07 15:33:16 -050053 mixins: [DataFormatterMixin],
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050054 data() {
55 return {
56 ipDhcpAddress: '',
57 };
58 },
Dixsie Wolmers9d40e302020-02-13 13:29:40 -060059 computed: {
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050060 ...mapState({
61 ethernetData: (state) => state.network.ethernetData[0],
62 hostname() {
63 return this.ethernetData?.HostName;
64 },
65 linkStatus() {
66 return this.ethernetData?.LinkStatus;
67 },
68 ipStaticAddress() {
69 return this.ethernetData?.IPv4StaticAddresses[0].Address;
70 },
71 }),
Dixsie Wolmers9d40e302020-02-13 13:29:40 -060072 },
73 created() {
Sandeepa Singhf67f7692021-07-19 18:04:18 +053074 this.$store.dispatch('network/getEthernetData').finally(() => {
Sukanya Pandeyedb8a772020-10-29 11:33:42 +053075 this.$root.$emit('overview-network-complete');
Yoshie Muranaka598bf7e2020-05-01 12:26:00 -070076 });
Dixsie Wolmers6a192d52021-09-02 15:26:58 -050077 this.getDhcpInfo();
78 },
79 methods: {
80 getDhcpInfo() {
81 const dhcp = this.ethernetData.IPv4Addresses.filter(
82 (ipv4) => ipv4.AddressOrigin === 'DHCP'
83 );
84 this.ipDhcpAddress = dhcp[0].Address;
85 },
Derick Montague602e98a2020-10-21 16:20:00 -050086 },
Dixsie Wolmers9d40e302020-02-13 13:29:40 -060087};
88</script>