From 8d0160a3e7d07ecbd099998e11c8da534b033515 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Mon, 30 Mar 2026 10:25:26 +0200
Subject: [PATCH] app configure: refresh app when a task is started

---
 dashboard/src/components/app/Email.vue     |  4 +++-
 dashboard/src/components/app/Location.vue  |  3 ++-
 dashboard/src/components/app/Repair.vue    |  9 +++++----
 dashboard/src/components/app/Resources.vue | 19 ++++++++-----------
 dashboard/src/components/app/Services.vue  |  4 +++-
 dashboard/src/components/app/Storage.vue   | 12 +++++-------
 dashboard/src/views/AppConfigureView.vue   | 14 ++++++++------
 7 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/dashboard/src/components/app/Email.vue b/dashboard/src/components/app/Email.vue
index 2bd4c3015..91d164a31 100644
--- a/dashboard/src/components/app/Email.vue
+++ b/dashboard/src/components/app/Email.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-const props = defineProps([ 'app' ]);
+const props = defineProps([ 'app', 'refreshApp' ]);
 
 import { ref, onMounted } from 'vue';
 import { Button, Radiobutton, InputGroup, FormGroup, TextInput, SingleSelect } from '@cloudron/pankow';
@@ -55,6 +55,7 @@ async function onSendmailSubmit() {
     return console.error(error);
   }
 
+  await props.refreshApp();
   sendmailBusy.value = false;
 }
 
@@ -78,6 +79,7 @@ async function onRecvmailSubmit() {
     return console.error(error);
   }
 
+  await props.refreshApp();
   recvmailBusy.value = false;
 }
 
diff --git a/dashboard/src/components/app/Location.vue b/dashboard/src/components/app/Location.vue
index a2444255d..47f5e65de 100644
--- a/dashboard/src/components/app/Location.vue
+++ b/dashboard/src/components/app/Location.vue
@@ -8,7 +8,7 @@ import PortBindings from '../PortBindings.vue';
 import AppsModel from '../../models/AppsModel.js';
 import DomainsModel from '../../models/DomainsModel.js';
 
-const props = defineProps([ 'app' ]);
+const props = defineProps([ 'app', 'refreshApp' ]);
 
 const appsModel = AppsModel.create();
 const domainsModel = DomainsModel.create();
@@ -139,6 +139,7 @@ async function onSubmit() {
     return console.error(error);
   }
 
+  await props.refreshApp();
   busy.value = false;
 }
 
diff --git a/dashboard/src/components/app/Repair.vue b/dashboard/src/components/app/Repair.vue
index 317f864b4..b4e00221b 100644
--- a/dashboard/src/components/app/Repair.vue
+++ b/dashboard/src/components/app/Repair.vue
@@ -6,7 +6,7 @@ import { taskNameFromInstallationState } from '../../utils.js';
 import { ISTATES } from '../../constants.js';
 import AppsModel from '../../models/AppsModel.js';
 
-const props = defineProps([ 'app' ]);
+const props = defineProps([ 'app', 'refreshApp' ]);
 
 const appsModel = AppsModel.create();
 const busyRepair = ref(false);
@@ -28,8 +28,8 @@ async function onToggleDebugMode() {
     return console.error(error);
   }
 
-  // let the task start
-  setTimeout(() => { debugModeBusy.value = false; }, 4000);
+  await props.refreshApp();
+  debugModeBusy.value = false;
 }
 
 async function onRepair() {
@@ -42,7 +42,8 @@ async function onRepair() {
     return;
   }
 
-  setTimeout(() => { busyRepair.value = false; }, 4000);
+  await props.refreshApp();
+  busyRepair.value = false;
 }
 
 async function onRestart() {
diff --git a/dashboard/src/components/app/Resources.vue b/dashboard/src/components/app/Resources.vue
index 8b6338638..581970bde 100644
--- a/dashboard/src/components/app/Resources.vue
+++ b/dashboard/src/components/app/Resources.vue
@@ -10,7 +10,7 @@ import SystemModel from '../../models/SystemModel.js';
 const appsModel = AppsModel.create();
 const systemModel = SystemModel.create();
 
-const props = defineProps([ 'app' ]);
+const props = defineProps([ 'app', 'refreshApp' ]);
 
 const memoryLimitBusy = ref(false);
 const memoryLimit = ref(0);
@@ -33,8 +33,8 @@ async function onSubmitMemoryLimit() {
   const [error] = await appsModel.configure(props.app.id, 'memory_limit', { memoryLimit: limit });
   if (error) return console.error(error);
 
-  // give polling some time
-  setTimeout(() => memoryLimitBusy.value = false, 4000);
+  await props.refreshApp();
+  memoryLimitBusy.value = false;
 }
 
 async function onSubmitCpuQuota() {
@@ -44,9 +44,8 @@ async function onSubmitCpuQuota() {
   if (error) return console.error(error);
 
   currentCpuQuota.value = parseInt(cpuQuota.value);
-
-  // give polling some time
-  setTimeout(() => cpuQuotaBusy.value = false, 4000);
+  await props.refreshApp();
+  cpuQuotaBusy.value = false;
 }
 
 async function onSubmitDevices() {
@@ -70,11 +69,9 @@ async function onSubmitDevices() {
     return;
   }
 
-  // give polling some time
-  setTimeout(() => {
-    devicesBusy.value = false;
-    currentDevices.value = Object.keys(devs);
-  }, 4000);
+  currentDevices.value = Object.keys(devs);
+  await props.refreshApp();
+  devicesBusy.value = false;
 }
 
 const devicesChanged = computed(() => {
diff --git a/dashboard/src/components/app/Services.vue b/dashboard/src/components/app/Services.vue
index e6b6f8b2b..e150a0d97 100644
--- a/dashboard/src/components/app/Services.vue
+++ b/dashboard/src/components/app/Services.vue
@@ -6,7 +6,7 @@ import { ISTATES } from '../../constants.js';
 import SettingsItem from '../SettingsItem.vue';
 import AppsModel from '../../models/AppsModel.js';
 
-const { app } = defineProps([ 'app' ]);
+const { app, refreshApp } = defineProps([ 'app', 'refreshApp' ]);
 
 const appsModel = AppsModel.create();
 
@@ -24,6 +24,7 @@ async function onTurnChange(value) {
     return console.error(error);
   }
 
+  await refreshApp();
   turnBusy.value = false;
 }
 
@@ -41,6 +42,7 @@ async function onRedisChange(value) {
     return console.error(error);
   }
 
+  await refreshApp();
   redisBusy.value = false;
 }
 
diff --git a/dashboard/src/components/app/Storage.vue b/dashboard/src/components/app/Storage.vue
index b355b4a4d..77095af4f 100644
--- a/dashboard/src/components/app/Storage.vue
+++ b/dashboard/src/components/app/Storage.vue
@@ -10,7 +10,7 @@ import { ISTATES } from '../../constants.js';
 import AppsModel from '../../models/AppsModel.js';
 import VolumesModel from '../../models/VolumesModel.js';
 
-const props = defineProps([ 'app' ]);
+const props = defineProps([ 'app', 'refreshApp' ]);
 
 const appsModel = AppsModel.create();
 const volumesModel = VolumesModel.create();
@@ -56,9 +56,8 @@ async function onSubmitMove() {
   }
 
   originalVolumeId.value = volumeId.value;
-
-  // give app refresh some time, ideally we wait for the task
-  setTimeout(() => moveBusy.value = false, 4000);
+  await props.refreshApp();
+  moveBusy.value = false;
 }
 
 function onMountAdd() {
@@ -90,10 +89,9 @@ async function onSubmitMounts() {
     return console.error(error);
   }
 
-  // make a copy, cannot clone due to Proxy objects
   originalMounts.value = mounts.value.map(m => { return { volumeId: m.volumeId, readOnly: m.readOnly }; });
-
-  setTimeout(() => mountsBusy.value = false, 2000);
+  await props.refreshApp();
+  mountsBusy.value = false;
 }
 
 const mountsValid = computed(() => {
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
index 7156947fb..be6acff52 100644
--- a/dashboard/src/views/AppConfigureView.vue
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -48,6 +48,8 @@ const sftpInfoDialog = useTemplateRef('sftpInfoDialog');
 
 let refreshTimer = null;
 async function refresh() {
+  clearTimeout(refreshTimer);
+
   const [error, result] = await appsModel.get(id.value);
   if (error) {
     if (error.status === 403) return window.location.hash = '/';
@@ -340,19 +342,19 @@ onBeforeUnmount(() => {
           <Transition name="slide-fade" mode="out-in">
             <Info v-if="currentView === 'info'" :app="app"/>
             <Display v-else-if="currentView === 'display'" :app="app"/>
-            <Location v-else-if="currentView === 'location'" :app="app"/>
+            <Location v-else-if="currentView === 'location'" :app="app" :refresh-app="refresh"/>
             <Proxy v-else-if="currentView === 'proxy'" :app="app"/>
             <Access v-else-if="currentView === 'access'" :app="app"/>
-            <Resources v-else-if="currentView === 'resources'" :app="app"/>
-            <Services v-else-if="currentView === 'services'" :app="app"/>
-            <Storage v-else-if="currentView === 'storage'" :app="app"/>
+            <Resources v-else-if="currentView === 'resources'" :app="app" :refresh-app="refresh"/>
+            <Services v-else-if="currentView === 'services'" :app="app" :refresh-app="refresh"/>
+            <Storage v-else-if="currentView === 'storage'" :app="app" :refresh-app="refresh"/>
             <Graphs v-else-if="currentView === 'graphs'" :app="app"/>
             <Security v-else-if="currentView === 'security'" :app="app"/>
-            <Email v-else-if="currentView === 'email'" :app="app"/>
+            <Email v-else-if="currentView === 'email'" :app="app" :refresh-app="refresh"/>
             <Cron v-else-if="currentView === 'cron'" :app="app"/>
             <Updates v-else-if="currentView === 'updates'" :app="app" :refresh-app="refresh"/>
             <Backups v-else-if="currentView === 'backups'" :app="app"/>
-            <Repair v-else-if="currentView === 'repair'" :app="app"/>
+            <Repair v-else-if="currentView === 'repair'" :app="app" :refresh-app="refresh"/>
             <Eventlog v-else-if="currentView === 'eventlog'" :app="app"/>
             <Uninstall v-else-if="currentView === 'uninstall'" :app="app"/>
           </Transition>