app configure: refresh app when a task is started

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;
 }
 

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;
 }
 

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() {

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(() => {

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;
 }
 

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(() => {