fix: improve handling of restore operations

- restore operations are split into a new flow
 - added support displaying restore operation percentage and other
   details in tree view

webui/src/components/OperationRow.tsx

@@ -259,7 +259,7 @@ export const OperationRow = ({
   } else if (operation.op.case === "operationRestore") {
     const restore = operation.op.value;
     const progress = Math.round((details.percentage || 0) * 10) / 10;
-    const st = restore.status! || {};
+    const st = restore.lastStatus! || {};
 
     body = (
       <>
@@ -288,6 +288,8 @@ export const OperationRow = ({
             </Button>
           </>
         ) : null}
+        <br />
+        Snapshot ID: {normalizeSnapshotId(operation.snapshotId!)}
         <Row gutter={16}>
           <Col span={12}>
             <Typography.Text strong>Bytes Done/Total</Typography.Text>

webui/src/components/OperationTree.tsx

@@ -3,6 +3,7 @@ import {
   BackupInfo,
   BackupInfoCollector,
   colorForStatus,
+  detailsForOperation,
   displayTypeToString,
   getOperations,
   getTypeForDisplay,
@@ -159,15 +160,26 @@ export const OperationTree = ({
               );
             } else if (b.backupLastStatus.entry.case === "status") {
               const s = b.backupLastStatus.entry.value;
-              const percent = Math.floor(
-                (Number(s.bytesDone) / Number(s.totalBytes)) * 100
-              );
+              const percent = Number(s.bytesDone / s.totalBytes) * 100;
               details.push(
-                `${percent}% processed ${formatBytes(
+                `${percent.toFixed(1)}% processed ${formatBytes(
                   Number(s.bytesDone)
                 )} / ${formatBytes(Number(s.totalBytes))}`
               );
             }
+          } else if (b.operations.length === 1) {
+            const op = b.operations[0];
+            const opDetails = detailsForOperation(op);
+            if (
+              opDetails.percentage &&
+              opDetails.percentage > 0.1 &&
+              opDetails.percentage < 99.9
+            ) {
+              details.push(opDetails.displayState);
+            }
+            if (op.snapshotId) {
+              details.push(`ID: ${normalizeSnapshotId(op.snapshotId)}`);
+            }
           }
           if (b.snapshotInfo) {
             details.push(`ID: ${normalizeSnapshotId(b.snapshotInfo.id)}`);

webui/src/components/SnapshotBrowser.tsx

@@ -242,6 +242,17 @@ const RestoreModal = ({
   const [form] = Form.useForm<RestoreSnapshotRequest>();
   const showModal = useShowModal();
 
+  const defaultPath = useMemo(() => {
+    if (path === pathSeparator) {
+      return "";
+    }
+    return path + "-backrest-restore-" + normalizeSnapshotId(snapshotId);
+  }, [path]);
+
+  useEffect(() => {
+    form.setFieldsValue({ target: defaultPath });
+  }, [defaultPath]);
+
   const handleCancel = () => {
     showModal(null);
   };
@@ -265,13 +276,6 @@ const RestoreModal = ({
     }
   };
 
-  const defaultPath = useMemo(() => {
-    if (path === pathSeparator) {
-      return "";
-    }
-    return path + "-backrest-restore-" + normalizeSnapshotId(snapshotId);
-  }, [path]);
-
   let targetPath = Form.useWatch("target", form);
   useEffect(() => {
     if (!targetPath) {
@@ -279,17 +283,18 @@ const RestoreModal = ({
     }
     (async () => {
       try {
-        if (targetPath.endsWith(pathSeparator)) {
-          targetPath = targetPath.slice(0, -1);
+        let p = targetPath;
+        if (p.endsWith(pathSeparator)) {
+          p = p.slice(0, -1);
         }
 
-        const dirname = basename(targetPath);
+        const dirname = basename(p);
         const files = await backrestService.pathAutocomplete(
           new StringValue({ value: dirname })
         );
 
         for (const file of files.values) {
-          if (dirname + file === targetPath) {
+          if (dirname + file === p) {
             form.setFields([
               {
                 name: "target",