Adding delay to Delete and disabling tables (#155)

- Delete would take time to update the table as add and edit, Added delay to delete as well.
- Also, disabling the tables when the process of add, edit, delete and other related property changes are in-progress to avoid issues.
- Defect: https://jazz07.rchland.ibm.com:13443/jazz/web/projects/CSSD#action=com.ibm.team.workitem.viewWorkItem&id=578982

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

Author: Nikhil-Ashoka

src/store/modules/Settings/NetworkStore.js

@@ -11,6 +11,7 @@ const NetworkStore = {
     networkSettings: [],
     selectedInterfaceId: '', // which tab is selected
     selectedInterfaceIndex: 0, // which tab is selected
+    isTableBusy: false,
   },
   getters: {
     dchpEnabledState: (state) => state.dchpEnabledState,
@@ -19,6 +20,7 @@ const NetworkStore = {
     networkSettings: (state) => state.networkSettings,
     selectedInterfaceId: (state) => state.selectedInterfaceId,
     selectedInterfaceIndex: (state) => state.selectedInterfaceIndex,
+    isTableBusy: (state) => state.isTableBusy,
   },
   mutations: {
     setDchpEnabledState: (state, dchpEnabledState) =>
@@ -39,6 +41,7 @@ const NetworkStore = {
       (state.selectedInterfaceId = selectedInterfaceId),
     setSelectedInterfaceIndex: (state, selectedInterfaceIndex) =>
       (state.selectedInterfaceIndex = selectedInterfaceIndex),
+    setIsTableBusy: (state, isTableBusy) => (state.isTableBusy = isTableBusy),
     setNetworkSettings: (state, data) => {
       state.networkSettings = data.map(({ data }) => {
         const {
@@ -121,10 +124,14 @@ const NetworkStore = {
           console.log('Network Data:', error);
         });
     },
-    async getEthernetDataAfterDelay({ dispatch }) {
+    async getEthernetDataAfterDelay({ commit, dispatch }) {
+      commit('setIsTableBusy', true);
       setTimeout(() => {
         dispatch('getEthernetData');
       }, 10000);
+      setTimeout(() => {
+        commit('setIsTableBusy', false);
+      }, 15000);
     },
     async saveDomainNameState({ commit, state, dispatch }, domainState) {
       commit('setDomainNameState', domainState);
@@ -295,10 +302,8 @@ const NetworkStore = {
         .then(() => {
           // Getting Ethernet data here so that the toggle gets updated
           dispatch('getEthernetData');
-          setTimeout(() => {
-            // Getting Ethernet data here so that the IPv6 table gets updated
-            dispatch('getEthernetData');
-          }, 10000);
+          // Getting Ethernet data here so that the IPv6 table gets updated
+          dispatch('getEthernetDataAfterDelay');
         })
         .then(() => {
           return i18n.t('pageNetwork.toast.successSaveNetworkSettings', {
@@ -459,7 +464,12 @@ const NetworkStore = {
           `/redfish/v1/Managers/bmc/EthernetInterfaces/${state.selectedInterfaceId}`,
           { IPv4StaticAddresses: newIpv4Array }
         )
-        .then(dispatch('getEthernetData'))
+        .then(() => {
+          // Getting Ethernet data here so that the address is deleted immediately
+          dispatch('getEthernetData');
+          // Getting Ethernet data here so that the IPv4 table gets updated
+          dispatch('getEthernetDataAfterDelay');
+        })
         .then(() => {
           return i18n.t('pageNetwork.toast.successDeletingIpv4Server');
         })
@@ -484,7 +494,12 @@ const NetworkStore = {
           `/redfish/v1/Managers/bmc/EthernetInterfaces/${state.selectedInterfaceId}`,
           { IPv6StaticAddresses: newIpv6Array }
         )
-        .then(dispatch('getEthernetData'))
+        .then(() => {
+          // Getting Ethernet data here so that the address is deleted immediately
+          dispatch('getEthernetData');
+          // Getting Ethernet data here so that the IPv6 table gets updated
+          dispatch('getEthernetDataAfterDelay');
+        })
         .then(() => {
           return i18n.t('pageNetwork.toast.successDeletingIpv6Server');
         })
@@ -513,7 +528,12 @@ const NetworkStore = {
           `/redfish/v1/Managers/bmc/EthernetInterfaces/${state.selectedInterfaceId}`,
           { IPv6StaticDefaultGateways: newIpv6Array }
         )
-        .then(dispatch('getEthernetData'))
+        .then(() => {
+          // Getting Ethernet data here so that the address is deleted immediately
+          dispatch('getEthernetData');
+          // Getting Ethernet data here so that the table gets updated
+          dispatch('getEthernetDataAfterDelay');
+        })
         .then(() => {
           return i18n.t(
             'pageNetwork.toast.successDeletingIpv6StaticDefaultGateway'

src/views/Settings/Network/Network.vue

@@ -290,7 +290,7 @@ export default {
     setEndLoaderAfterDelay() {
       setTimeout(() => {
         this.endLoader();
-      }, 10000);
+      }, 15000);
     },
   },
 };

src/views/Settings/Network/TableIpv4.vue

@@ -11,6 +11,7 @@
                 v-model="dhcpEnabledState"
                 data-test-id="networkSettings-switch-dhcpEnabled"
                 switch
+                :disabled="isTablesDisabled"
                 @change="changeDhcpEnabledState"
               >
                 <span v-if="dhcpEnabledState">
@@ -24,7 +25,11 @@
       </b-row>
       <b-row>
         <b-col class="text-right">
-          <b-button variant="primary" @click="initIpv4Modal()">
+          <b-button
+            variant="primary"
+            :disabled="isTablesDisabled"
+            @click="initIpv4Modal()"
+          >
             <icon-add />
             {{ $t('pageNetwork.table.addIpv4Address') }}
           </b-button>
@@ -36,6 +41,7 @@
         :fields="ipv4TableFields"
         :items="form.ipv4TableItems"
         :empty-text="$t('global.table.emptyMessage')"
+        :busy="isTablesDisabled"
         class="mb-0"
         show-empty
       >
@@ -121,6 +127,9 @@ export default {
     };
   },
   computed: {
+    isTablesDisabled() {
+      return this.$store.getters['network/isTableBusy'];
+    },
     network() {
       return this.$store.getters['network/networkSettings'];
     },
@@ -180,12 +189,14 @@ export default {
       });
     },
     onIpv4TableAction(action, $event, item) {
-      if ($event === 'edit') {
-        this.$root.$emit('edit-address', item);
-        this.initIpv4Modal();
-      }
-      if ($event === 'delete') {
-        this.deleteIpv4TableRow(item);
+      if (!this.isTablesDisabled) {
+        if ($event === 'edit') {
+          this.$root.$emit('edit-address', item);
+          this.initIpv4Modal();
+        }
+        if ($event === 'delete') {
+          this.deleteIpv4TableRow(item);
+        }
       }
     },
     deleteIpv4TableRow(item) {
@@ -216,7 +227,13 @@ export default {
           if (deleteConfirmed) {
             this.$store
               .dispatch('network/deleteIpv4Address', newIpv4Array)
-              .then((message) => this.successToast(message))
+              .then((message) => {
+                this.successToast(message);
+                this.startLoader();
+                setTimeout(() => {
+                  this.endLoader();
+                }, 15000);
+              })
               .catch(({ message }) => this.errorToast(message));
           }
         });
@@ -252,7 +269,7 @@ export default {
                 this.startLoader();
                 setTimeout(() => {
                   this.endLoader();
-                }, 10000);
+                }, 15000);
               })
               .catch(({ message }) => this.errorToast(message));
           } else {

src/views/Settings/Network/TableIpv6.vue

@@ -10,6 +10,7 @@
                 id="dhcpIpv6Switch"
                 v-model="dhcpEnabledState"
                 switch
+                :disabled="isTablesDisabled"
                 @change="changeIpv6DhcpEnabledState"
               >
                 <span v-if="dhcpEnabledState">
@@ -28,7 +29,7 @@
                 id="ipv6AutoConfigSwitch"
                 v-model="ipv6AutoConfigState"
                 switch
-                :disabled="!isAutoConfigLoaded"
+                :disabled="isTablesDisabled"
                 @change="changeIpv6AutoConfigState"
               >
                 <span v-if="ipv6AutoConfigState">
@@ -48,7 +49,11 @@
       </b-row>
       <b-row>
         <b-col class="text-right">
-          <b-button variant="primary" @click="initIpv6Modal()">
+          <b-button
+            variant="primary"
+            :disabled="isTablesDisabled"
+            @click="initIpv6Modal()"
+          >
             <icon-add />
             {{ $t('pageNetwork.table.addIpv6Address') }}
           </b-button>
@@ -60,6 +65,7 @@
         :fields="ipv6TableFields"
         :items="form.ipv6TableItems"
         :empty-text="$t('global.table.emptyMessage')"
+        :busy="isTablesDisabled"
         class="mb-0"
         show-empty
       >
@@ -110,7 +116,6 @@ export default {
   },
   data() {
     return {
-      isAutoConfigLoaded: true,
       form: {
         ipv6TableItems: [],
       },
@@ -142,6 +147,9 @@ export default {
     };
   },
   computed: {
+    isTablesDisabled() {
+      return this.$store.getters['network/isTableBusy'];
+    },
     network() {
       return this.$store.getters['network/networkSettings'];
     },
@@ -219,12 +227,14 @@ export default {
       });
     },
     onIpv6TableAction(action, $event, item) {
-      if ($event === 'edit') {
-        this.$root.$emit('edit-address', item);
-        this.initIpv6Modal();
-      }
-      if ($event === 'delete') {
-        this.deleteIpv6TableRow(item);
+      if (!this.isTablesDisabled) {
+        if ($event === 'edit') {
+          this.$root.$emit('edit-address', item);
+          this.initIpv6Modal();
+        }
+        if ($event === 'delete') {
+          this.deleteIpv6TableRow(item);
+        }
       }
     },
     deleteIpv6TableRow(item) {
@@ -254,7 +264,13 @@ export default {
           if (deleteConfirmed) {
             this.$store
               .dispatch('network/deleteIpv6Address', newIpv6Array)
-              .then((message) => this.successToast(message))
+              .then((message) => {
+                this.successToast(message);
+                this.startLoader();
+                setTimeout(() => {
+                  this.endLoader();
+                }, 15000);
+              })
               .catch(({ message }) => this.errorToast(message));
           }
         });
@@ -270,26 +286,21 @@ export default {
           this.startLoader();
           setTimeout(() => {
             this.endLoader();
-          }, 10000);
+          }, 15000);
         })
         .catch(({ message }) => this.errorToast(message));
     },
     changeIpv6AutoConfigState(state) {
-      this.isAutoConfigLoaded = false;
       this.$store
         .dispatch('network/saveIpv6AutoConfigState', state)
         .then((success) => {
           this.startLoader();
           this.successToast(success);
           setTimeout(() => {
-            this.isAutoConfigLoaded = true;
             this.endLoader();
-          }, 10000);
+          }, 15000);
         })
-        .catch(({ message }) => {
-          this.isAutoConfigLoaded = true;
-          this.errorToast(message);
-        });
+        .catch(({ message }) => this.errorToast(message));
     },
   },
 };

src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue

@@ -3,7 +3,11 @@
     <page-section :section-title="$t('pageNetwork.ipv6StaticDefaultGateway')">
       <b-row>
         <b-col class="text-right">
-          <b-button variant="primary" @click="initIpv6DefaultGatewayModal()">
+          <b-button
+            variant="primary"
+            :disabled="isTablesDisabled"
+            @click="initIpv6DefaultGatewayModal()"
+          >
             <icon-add />
             {{ $t('pageNetwork.table.addIpv6StaticDefaultGateway') }}
           </b-button>
@@ -15,6 +19,7 @@
         :fields="ipv6DefaultGatewayTableFields"
         :items="form.ipv6DefaultGatewayTableItems"
         :empty-text="$t('global.table.emptyMessage')"
+        :busy="isTablesDisabled"
         class="mb-0"
         show-empty
       >
@@ -94,6 +99,9 @@ export default {
     };
   },
   computed: {
+    isTablesDisabled() {
+      return this.$store.getters['network/isTableBusy'];
+    },
     network() {
       return this.$store.getters['network/networkSettings'];
     },
@@ -139,12 +147,14 @@ export default {
       });
     },
     onIpv6DefaultGatewayTableAction(action, $event, item) {
-      if ($event === 'edit') {
-        this.$root.$emit('edit-address', item);
-        this.initIpv6DefaultGatewayModal();
-      }
-      if ($event === 'delete') {
-        this.deleteIpv6DefaultGatewayTableRow(item);
+      if (!this.isTablesDisabled) {
+        if ($event === 'edit') {
+          this.$root.$emit('edit-address', item);
+          this.initIpv6DefaultGatewayModal();
+        }
+        if ($event === 'delete') {
+          this.deleteIpv6DefaultGatewayTableRow(item);
+        }
       }
     },
     deleteIpv6DefaultGatewayTableRow(item) {
@@ -177,7 +187,13 @@ export default {
                 'network/deleteIpv6StaticDefaultGatewayAddress',
                 newIpv6Array
               )
-              .then((message) => this.successToast(message))
+              .then((message) => {
+                this.successToast(message);
+                this.startLoader();
+                setTimeout(() => {
+                  this.endLoader();
+                }, 15000);
+              })
               .catch(({ message }) => this.errorToast(message));
           }
         });