frontend: ethernet: Refresh interface immediately after write actions

Author: nicoschmdt

core/frontend/src/components/ethernet/EthernetManager.vue

@@ -3,20 +3,20 @@
     elevation="1"
     width="400"
   >
-    <v-expansion-panels v-if="are_interfaces_available && !updating_interfaces">
+    <v-expansion-panels v-show="are_interfaces_available && !updating_interfaces">
       <interface-card
         v-for="(ethernet_interface, key) in available_interfaces"
         :key="key"
         :adapter="ethernet_interface"
       />
     </v-expansion-panels>
-    <v-container v-else-if="updating_interfaces">
+    <v-container v-if="updating_interfaces">
       <spinning-logo
         size="30%"
         subtitle="Fetching available ethernet interfaces..."
       />
     </v-container>
-    <v-container v-else>
+    <v-container v-else-if="!are_interfaces_available">
       <div>
         No ethernet interfaces available
       </div>

core/frontend/src/components/ethernet/EthernetUpdater.vue

@@ -12,11 +12,17 @@ export default Vue.extend({
   name: 'EthernetUpdater',
   data() {
     return {
-      fetch_available_interfaces_task: new OneMoreTime({ delay: 5000, disposeWith: this }),
+      fetch_available_interfaces_task: new OneMoreTime({ delay: 5000, disposeWith: this, autostart: false }),
     }
   },
-  mounted() {
-    this.fetch_available_interfaces_task.setAction(this.fetchAvailableEthernetInterfaces)
+  async mounted() {
+    try {
+      await this.fetchAvailableEthernetInterfaces()
+    } finally {
+      ethernet.setUpdatingInterfaces(false)
+      this.fetch_available_interfaces_task.setAction(this.fetchAvailableEthernetInterfaces)
+      this.fetch_available_interfaces_task.start()
+    }
   },
   methods: {
     async fetchAvailableEthernetInterfaces(): Promise<void> {

core/frontend/src/components/ethernet/InterfaceCard.vue

@@ -319,16 +319,12 @@ export default Vue.extend({
       await ethernet.deleteAddress({ interface_name: this.adapter.name, ip_address: ip })
     },
     async triggerForDynamicIP(): Promise<void> {
-      ethernet.setUpdatingInterfaces(true)
-
       await ethernet.triggerDynamicIP(this.adapter.name)
     },
     openDHCPServerDialog(): void {
       this.show_dhcp_server_dialog = true
     },
     async removeDHCPServer(): Promise<void> {
-      ethernet.setUpdatingInterfaces(true)
-
       await ethernet.RemoveDHCPServer(this.adapter.name)
     },
     async fetchLeases(): Promise<void> {

core/frontend/src/store/ethernet.ts

@@ -32,7 +32,6 @@ class EthernetStore extends VuexModule {
   @Mutation
   setInterfaces(ethernet_interfaces: EthernetInterface[]): void {
     this.available_interfaces = ethernet_interfaces
-    this.updating_interfaces = false
   }
 
   @Action
@@ -52,6 +51,10 @@ class EthernetStore extends VuexModule {
         notifier.pushBackError('ETHERNET_ADDRESS_CREATION_FAIL', error)
         throw error
       })
+      .finally(async () => {
+        await this.context.dispatch('refreshInterfaces')
+        this.context.commit('setUpdatingInterfaces', false)
+      })
   }
 
   @Action
@@ -71,6 +74,10 @@ class EthernetStore extends VuexModule {
         notifier.pushError('ETHERNET_ADDRESS_DELETE_FAIL', error)
         throw error
       })
+      .finally(async () => {
+        await this.context.dispatch('refreshInterfaces')
+        this.context.commit('setUpdatingInterfaces', false)
+      })
   }
 
   @Action
@@ -91,13 +98,16 @@ class EthernetStore extends VuexModule {
         notifier.pushBackError('DHCP_SERVER_ADD_FAIL', error)
         throw error
       })
-      .finally(() => {
+      .finally(async () => {
+        await this.context.dispatch('refreshInterfaces')
         this.context.commit('setUpdatingInterfaces', false)
       })
   }
 
   @Action
   async RemoveDHCPServer(interface_name: string): Promise<void> {
+    this.context.commit('setUpdatingInterfaces', true)
+
     await back_axios({
       method: 'delete',
       url: `${this.API_URL}/dhcp`,
@@ -110,6 +120,10 @@ class EthernetStore extends VuexModule {
         const message = `Could not remove DHCP server from interface '${interface_name}': ${error.message}.`
         notifier.pushError('DHCP_SERVER_REMOVE_FAIL', message)
       })
+      .finally(async () => {
+        await this.context.dispatch('refreshInterfaces')
+        this.context.commit('setUpdatingInterfaces', false)
+      })
   }
 
   @Action
@@ -189,6 +203,16 @@ class EthernetStore extends VuexModule {
       })
   }
 
+  @Action
+  async refreshInterfaces(): Promise<void> {
+    try {
+      const response = await this.context.dispatch('getAvailableEthernetInterfaces')
+      this.context.commit('setInterfaces', response.data)
+    } catch {
+      // Errors are already pushed to the notifier by getAvailableEthernetInterfaces.
+    }
+  }
+
   @Action
   async setInterfacesPriority(interfaces: { name: string, priority: number }[]): Promise<void> {
     await back_axios({
@@ -213,6 +237,8 @@ class EthernetStore extends VuexModule {
 
   @Action
   async triggerDynamicIP(interface_name: string): Promise<void> {
+    this.context.commit('setUpdatingInterfaces', true)
+
     await back_axios({
       method: 'post',
       url: `${this.API_URL}/dynamic_ip`,
@@ -225,6 +251,10 @@ class EthernetStore extends VuexModule {
         const message = `Could not trigger for dynamic IP address on '${interface_name}': ${error.message}.`
         notifier.pushError('DYNAMIC_IP_TRIGGER_FAIL', message)
       })
+      .finally(async () => {
+        await this.context.dispatch('refreshInterfaces')
+        this.context.commit('setUpdatingInterfaces', false)
+      })
   }
 }