Implement remount and mountstatus in backupsview

dashboard/src/views/BackupsView.vue

@@ -21,34 +21,46 @@ const manualBackupApps = ref([]);
 const config = ref({});
 const mountOptions = ref({});
 const mountStatus = ref({});
-const remountBusy = ref(false);
 
 const backupDialog = useTemplateRef('backupDialog');
 function onConfigure() {
   backupDialog.value.open();
 }
 
-function onRemount() {
-  // TODO
+const remountBusy = ref(false);
+
+async function onRemount() {
+  if (!mountlike(config.value.provider)) return;
+
+  remountBusy.value = true;
+
+  const [error] = await backupsModel.remount();
+  if (error) {
+    console.error('Failed to remount backup storage.', error);
+    window.pankow.notify({ text: `Remount failed: ${error.message}`, persistent: true, type: 'danger' });
+  }
+
+  // give the backend some time
+  setTimeout(() => {
+    remountBusy.value = false;
+    refresh();
+  }, 2000);
 }
 
 async function refresh() {
-  const [error, result] = await backupsModel.getConfig();
+  let [error, result] = await backupsModel.getConfig();
   if (error) return console.error(error);
 
   config.value = result;
   mountOptions.value = result.mountOptions || {};
+  mountStatus.value = {};
 
-  // $scope.backupConfig = backupConfig;
-  // $scope.mountStatus = null;
+  if (!mountlike(config.value.provider)) return;
 
-  // if (!$scope.mountlike($scope.backupConfig.provider)) return;
+  [error, result] = await backupsModel.mountStatus();
+  if (error) return console.error(error);
 
-  // Client.getBackupMountStatus(function (error, mountStatus) {
-  //     if (error) return console.error(error);
-
-  //     $scope.mountStatus = mountStatus;
-  // });
+  mountStatus.value = result;
 }
 
 onMounted(async () => {
@@ -88,7 +100,7 @@ onMounted(async () => {
         <div class="info-value">
           <span v-show="config.provider === 'filesystem'">{{ config.backupFolder }}</span>
           <span v-show="mountlike(config.provider)">
-            <StateLED v-if="mountStatus" :state="mountStatus.state === 'active' ? 'success' : 'danger'" v-tooltip="mountStatus.message"/>
+            <StateLED v-if="mountStatus" :state="mountStatus.state === 'active' ? 'success' : 'danger'" v-tooltip="mountStatus.message" style="margin-right: 6px"/>
             <span v-show="config.provider === 'disk' || config.provider === 'filesystem' || config.provider === 'ext4' || config.provider === 'xfs' || config.provider === 'mountpoint'">{{ mountOptions.diskPath || config.mountPoint }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
             <span v-show="config.provider === 'cifs' || config.provider === 'nfs' || config.provider === 'sshfs'">{{ mountOptions.host }}:{{ mountOptions.remoteDir }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
           </span>