Added DHCP enable/disable feature

- DHCP toggle for enablement was not present, It is now added in
  the Networks page.
- DHCP when enabled, if there is no address, it picks up an address on its own.When it is disabled, we need to manually configure it.

Signed-off-by: Nikhil Ashoka <[email protected]>
Change-Id: I32a9e0df28e6609945f3757a6bd69dc66a86f480

src/locales/en-US.json

@@ -703,6 +703,9 @@
         "speed": "Speed (mbps)",
         "staticDns": "Static DNS",
         "modal": {
+            "confirmDisableDhcp": "Are you sure you want to disable DHCP?",
+            "confirmEnableDhcp": "When DHCP is enabled, static IP addresses will not be accessible.",
+            "dhcpConfirmTitle": "%{dhcpState} DHCP",
             "editHostnameTitle": "Edit hostname",
             "editMacAddressTitle": "Edit MAC address",
             "gateway": "Gateway",

src/store/modules/Settings/NetworkStore.js

@@ -40,6 +40,7 @@ const NetworkStore = {
           dhcpAddress: IPv4Addresses.filter(
             (ipv4) => ipv4.AddressOrigin === 'DHCP'
           ),
+          dhcpEnabled: DHCPv4.DHCPEnabled,
           hostname: HostName,
           macAddress: MACAddress,
           linkStatus: LinkStatus,
@@ -87,6 +88,32 @@ const NetworkStore = {
           console.log('Network Data:', error);
         });
     },
+    async saveDhcpEnabledState({ state, dispatch }, dhcpState) {
+      const data = {
+        DHCPv4: {
+          DHCPEnabled: dhcpState,
+        },
+      };
+      return api
+        .patch(
+          `/redfish/v1/Managers/bmc/EthernetInterfaces/${state.selectedInterfaceId}`,
+          data
+        )
+        .then(dispatch('getEthernetData'))
+        .then(() => {
+          return i18n.t('pageNetwork.toast.successSaveNetworkSettings', {
+            setting: i18n.t('pageNetwork.dhcp'),
+          });
+        })
+        .catch((error) => {
+          console.log(error);
+          throw new Error(
+            i18n.t('pageNetwork.toast.errorSaveNetworkSettings', {
+              setting: i18n.t('pageNetwork.dhcp'),
+            })
+          );
+        });
+    },
     async saveDomainNameState({ commit, state }, domainState) {
       commit('setDomainNameState', domainState);
       const data = {

src/views/Settings/Network/TableIpv4.vue

@@ -1,5 +1,26 @@
 <template>
   <page-section :section-title="$t('pageNetwork.ipv4')">
+    <b-row class="mb-4">
+      <b-col lg="2" md="6">
+        <dl>
+          <dt>{{ $t('pageNetwork.dhcp') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="dhcpSwitch"
+              v-model="dhcpEnabledState"
+              data-test-id="networkSettings-switch-dhcpEnabled"
+              switch
+              @change="changeDhcpEnabledState"
+            >
+              <span v-if="dhcpEnabledState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
     <b-row>
       <b-col>
         <h3 class="h5">
@@ -105,6 +126,19 @@ export default {
   },
   computed: {
     ...mapState('network', ['ethernetData']),
+    selectedInterface() {
+      return this.$store.getters['network/selectedInterfaceIndex'];
+    },
+    dhcpEnabledState: {
+      get() {
+        return this.$store.getters['network/globalNetworkSettings'][
+          this.selectedInterface
+        ].dhcpEnabled;
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
   },
   watch: {
     // Watch for change in tab index
@@ -164,6 +198,37 @@ export default {
     initAddIpv4Address() {
       this.$bvModal.show('modal-add-ipv4');
     },
+    changeDhcpEnabledState(state) {
+      this.$bvModal
+        .msgBoxConfirm(
+          state
+            ? this.$t('pageNetwork.modal.confirmEnableDhcp')
+            : this.$t('pageNetwork.modal.confirmDisableDhcp'),
+          {
+            title: this.$t('pageNetwork.modal.dhcpConfirmTitle', {
+              dhcpState: state
+                ? this.$t('global.action.enable')
+                : this.$t('global.action.disable'),
+            }),
+            okTitle: state
+              ? this.$t('global.action.enable')
+              : this.$t('global.action.disable'),
+            okVariant: 'danger',
+            cancelTitle: this.$t('global.action.cancel'),
+          }
+        )
+        .then((dhcpEnableConfirmed) => {
+          if (dhcpEnableConfirmed) {
+            this.$store
+              .dispatch('network/saveDhcpEnabledState', state)
+              .then((message) => this.successToast(message))
+              .catch(({ message }) => this.errorToast(message));
+          } else {
+            let onDhcpCancel = document.getElementById('dhcpSwitch');
+            onDhcpCancel.checked = !state;
+          }
+        });
+    },
   },
 };
 </script>