Fix update UI to show progress and allow to cancel update task

dashboard/src/components/SystemUpdate.vue

@@ -57,10 +57,9 @@ const apps = ref([]);
 const version = ref('');
 const ubuntuVersion = ref('');
 const currentPattern = ref('');
-const percent = ref(0);
-const message = ref('');
 const updateBusy = ref(false);
 const updateError = ref({});
+const stopError = ref({});
 const checkingBusy = ref(false);
 const pendingUpdate = ref(null);
 const skipBackup = ref(false);
@@ -107,6 +106,9 @@ async function refreshInfo() {
   const [error, result] = await updaterModel.getBoxUpdate();
   if (error) return console.error(error);
 
+  updateError.value = {};
+  stopError.value = {};
+
   pendingUpdate.value = result || null;
 }
 
@@ -201,14 +203,11 @@ async function refreshTasks() {
 async function onSubmitUpdate() {
   updateError.value = {};
   updateBusy.value = true;
-  percent.value = 0;
-  message.value = '';
 
   const [error] = await updaterModel.update(skipBackup.value);
-  updateBusy.value = false;
-
   if (error) {
     updateError.value.generic = error.message || 'Internal error';
+    updateBusy.value = false;
     return;
   }
 
@@ -227,6 +226,21 @@ async function onCheck() {
   checkingBusy.value = false;
 }
 
+async function onStop() {
+  const [error] = await tasksModel.stop(lastTask.value.id);
+  if (error) {
+    if (error.statusCode === 409) {
+      stopError.value.generic = 'No update is currently in progress';
+    } else {
+      console.error(error);
+      stopError.value.generic = error.message || 'Internal error';
+    }
+    return;
+  }
+
+  updateBusy.value = false;
+}
+
 onMounted(async () => {
   const [error, result] = await dashboardModel.config();
   if (error) return console.error(error);
@@ -257,8 +271,7 @@ onMounted(async () => {
         <div v-if="canUpdate">
           <p class="text-danger" v-if="pendingUpdate.unstable">{{ $t('settings.updateDialog.unstableWarning') }}</p>
           <p>{{ $t('settings.updateDialog.changes') }}:</p>
-          <ul>
-            <li v-for="change in pendingUpdate.changelog" :key="change">{{ change }}</li>
+          <ul class="changelogs">
             <li v-for="change in pendingUpdate.changelog" :key="change" v-html="marked.parse(change)"></li>
           </ul>
           <br/>
@@ -319,12 +332,25 @@ onMounted(async () => {
         </div>
       </SettingsItem>
 
-      <ProgressBar :value="percent" v-if="updateBusy" />
-      <p v-if="updateBusy">{{ message }}</p>
+      <ProgressBar :value="lastTask.percent" v-if="updateBusy && lastTask" />
+      <p v-if="updateBusy && lastTask">{{ lastTask.message }}</p>
 
-      <Button danger v-show="updateBusy" @click="onStop()">{{ $t('settings.updates.stopUpdateAction') }}</Button>
-      <Button v-show="!pendingUpdate" :disabled="checkingBusy" :loading="checkingBusy" @click="onCheck()">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
-      <Button :danger="(pendingUpdate && pendingUpdate.unstable) ? true : undefined" :success="(pendingUpdate && !pendingUpdate.unstable) ? true : undefined" v-show="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
+      <div class="error-label" v-if="stopError.generic">{{ stopError.generic }}</div>
+
+      <div class="button-bar">
+        <Button danger v-if="updateBusy" @click="onStop()">{{ $t('settings.updates.stopUpdateAction') }}</Button>
+        <Button :disabled="checkingBusy" :loading="checkingBusy" v-if="!updateBusy" @click="onCheck()">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
+        <Button :danger="(pendingUpdate && pendingUpdate.unstable) ? true : undefined" :success="(pendingUpdate && !pendingUpdate.unstable) ? true : undefined" v-show="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
+      </div>
     </Section>
   </div>
 </template>
+
+<style>
+
+.changelogs > li > p {
+  margin: 0;
+  padding: 0;
+}
+
+</style>