xref: /openbmc/webui-vue/src/views/Settings/Network/NetworkGlobalSettings.vue (revision c4b8757ed88ecea369e6044548d2fbe072d5bd4a) 
1<template>
2  <page-section
3    v-if="firstInterface"
4    :section-title="$t('pageNetwork.networkSettings')"
5  >
6    <b-row>
7      <b-col md="3">
8        <dl>
9          <dt>{{ $t('pageNetwork.hostname') }}</dt>
10          <dd>{{ dataFormatter(firstInterface.hostname) }}</dd>
11        </dl>
12      </b-col>
13      <b-col md="3">
14        <dl>
15          <dt>{{ $t('pageNetwork.useDomainName') }}</dt>
16          <dd>
17            <b-form-checkbox
18              id="useDomainNameSwitch"
19              v-model="useDomainNameState"
20              data-test-id="networkSettings-switch-useDomainName"
21              switch
22              @change="changeDomainNameState"
23            >
24              <span v-if="useDomainNameState">
25                {{ $t('global.status.enabled') }}
26              </span>
27              <span v-else>{{ $t('global.status.disabled') }}</span>
28            </b-form-checkbox>
29          </dd>
30        </dl>
31      </b-col>
32      <b-col md="3">
33        <dl>
34          <dt>{{ $t('pageNetwork.useDns') }}</dt>
35          <dd>
36            <b-form-checkbox
37              id="useDnsSwitch"
38              v-model="useDnsState"
39              data-test-id="networkSettings-switch-useDns"
40              switch
41              @change="changeDnsState"
42            >
43              <span v-if="useDnsState">
44                {{ $t('global.status.enabled') }}
45              </span>
46              <span v-else>{{ $t('global.status.disabled') }}</span>
47            </b-form-checkbox>
48          </dd>
49        </dl>
50      </b-col>
51      <b-col md="3">
52        <dl>
53          <dt>{{ $t('pageNetwork.useNtp') }}</dt>
54          <dd>
55            <b-form-checkbox
56              id="useNtpSwitch"
57              v-model="useNtpState"
58              data-test-id="networkSettings-switch-useNtp"
59              switch
60              @change="changeNtpState"
61            >
62              <span v-if="useNtpState">
63                {{ $t('global.status.enabled') }}
64              </span>
65              <span v-else>{{ $t('global.status.disabled') }}</span>
66            </b-form-checkbox>
67          </dd>
68        </dl>
69      </b-col>
70    </b-row>
71  </page-section>
72</template>
73
74<script>
75import BVToastMixin from '@/components/Mixins/BVToastMixin';
76import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
77import PageSection from '@/components/Global/PageSection';
78import { mapState } from 'vuex';
79
80export default {
81  name: 'GlobalNetworkSettings',
82  components: { PageSection },
83  mixins: [BVToastMixin, DataFormatterMixin],
84
85  data() {
86    return {
87      hostname: '',
88    };
89  },
90  computed: {
91    ...mapState('network', ['ethernetData']),
92    firstInterface() {
93      return this.$store.getters['network/globalNetworkSettings'][0];
94    },
95    useDomainNameState: {
96      get() {
97        return this.$store.getters['network/globalNetworkSettings'][0]
98          .useDomainNameEnabled;
99      },
100      set(newValue) {
101        return newValue;
102      },
103    },
104    useDnsState: {
105      get() {
106        return this.$store.getters['network/globalNetworkSettings'][0]
107          .useDnsEnabled;
108      },
109      set(newValue) {
110        return newValue;
111      },
112    },
113    useNtpState: {
114      get() {
115        return this.$store.getters['network/globalNetworkSettings'][0]
116          .useNtpEnabled;
117      },
118      set(newValue) {
119        return newValue;
120      },
121    },
122  },
123  created() {
124    this.$store.dispatch('network/getEthernetData').finally(() => {
125      // Emit initial data fetch complete to parent component
126      this.$root.$emit('network-global-settings-complete');
127    });
128  },
129  methods: {
130    changeDomainNameState(state) {
131      this.$store
132        .dispatch('network/saveDomainNameState', state)
133        .then((success) => {
134          this.successToast(success);
135        })
136        .catch(({ message }) => this.errorToast(message));
137    },
138    changeDnsState(state) {
139      this.$store
140        .dispatch('network/saveDnsState', state)
141        .then((message) => this.successToast(message))
142        .catch(({ message }) => this.errorToast(message));
143    },
144    changeNtpState(state) {
145      this.$store
146        .dispatch('network/saveNtpState', state)
147        .then((message) => this.successToast(message))
148        .catch(({ message }) => this.errorToast(message));
149    },
150  },
151};
152</script>
153