fix: UI fixes for restore row and settings modal

internal/api/downloadhandler.go

@@ -55,7 +55,12 @@ func NewDownloadHandler(oplog *oplog.OpLog) http.Handler {
 		w.Header().Set("Content-Type", "application/gzip")
 		w.Header().Set("Content-Transfer-Encoding", "binary")
 
-		gzw, _ := gzip.NewWriterLevel(w, gzip.BestSpeed)
+		gzw, err := gzip.NewWriterLevel(w, gzip.BestSpeed)
+		if err != nil {
+			zap.S().Errorf("error creating gzip writer: %v", err)
+			http.Error(w, "error creating gzip writer", http.StatusInternalServerError)
+			return
+		}
 		if err := tarDirectory(gzw, fullPath); err != nil {
 			zap.S().Errorf("error creating tar archive: %v", err)
 			http.Error(w, "error creating tar archive", http.StatusInternalServerError)

webui/src/components/OperationRow.tsx

@@ -157,7 +157,7 @@ export const OperationRow = ({
                   }}
                 >
                   <BigOperationDataVerbatim logref={operation.logref!} />
-                </Modal>,
+                </Modal>
               );
             }}
           >
@@ -232,15 +232,17 @@ export const OperationRow = ({
     );
   } else if (operation.op.case === "operationRestore") {
     const restore = operation.op.value;
+    const progress = Math.round((details.percentage || 0) * 1000) / 10;
+    const st = restore.status! || {};
+
     body = (
       <>
         Restore {restore.path} to {restore.target}
         {details.percentage !== undefined ? (
-          <Progress percent={details.percentage || 0} status="active" />
+          <Progress percent={progress} status="active" />
         ) : null}
         {operation.status == OperationStatus.STATUS_SUCCESS ? (
           <>
-            <br />
             <Button
               type="link"
               onClick={() => {
@@ -251,7 +253,7 @@ export const OperationRow = ({
                   })
                   .catch((e) => {
                     alertApi?.error(
-                      "Failed to fetch download URL: " + e.message,
+                      "Failed to fetch download URL: " + e.message
                     );
                   });
               }}
@@ -260,6 +262,19 @@ export const OperationRow = ({
             </Button>
           </>
         ) : null}
+        <Row gutter={16}>
+          <Col span={12}>
+            <Typography.Text strong>Bytes Done/Total</Typography.Text>
+            <br />
+            {formatBytes(Number(st.bytesRestored))}/
+            {formatBytes(Number(st.totalBytes))}
+          </Col>
+          <Col span={12}>
+            <Typography.Text strong>Files Done/Total</Typography.Text>
+            <br />
+            {Number(st.filesRestored)}/{Number(st.totalFiles)}
+          </Col>
+        </Row>
       </>
     );
   } else if (operation.op.case === "operationRunHook") {
@@ -281,7 +296,7 @@ export const OperationRow = ({
           {details.state ? details.state + ": " : null}
           {displayMessage}
         </pre>
-      </>,
+      </>
     );
   }
 
@@ -366,7 +381,7 @@ const BackupOperationStatus = ({
     const st = status.entry.value;
     const progress =
       Math.round(
-        (Number(st.bytesDone) / Math.max(Number(st.totalBytes), 1)) * 1000,
+        (Number(st.bytesDone) / Math.max(Number(st.totalBytes), 1)) * 1000
       ) / 10;
     return (
       <>
@@ -514,7 +529,7 @@ const BigOperationDataVerbatim = ({ logref }: { logref: string }) => {
       .getLogs(
         new LogDataRequest({
           ref: logref,
-        }),
+        })
       )
       .then((resp) => {
         setOutput(new TextDecoder("utf-8").decode(resp.value));

webui/src/views/SettingsModal.tsx

@@ -70,7 +70,7 @@ export const SettingsModal = () => {
 
       if (!newConfig.auth?.users && !newConfig.auth?.disabled) {
         throw new Error(
-          "At least one user must be configured or authentication must be disabled",
+          "At least one user must be configured or authentication must be disabled"
         );
       }
 
@@ -127,7 +127,7 @@ export const SettingsModal = () => {
               </p>
             </>
           )}
-          <Tooltip title="The instance name will be used to identify this backrest install. It will be used to tag snapshots (as `bkrst-inst:instancename`) and will identify backups created by this instance if using multiple backrest installations.">
+          <Tooltip title="The instance name will be used to identify this backrest install. Pick a value carefully as it cannot be changed later.">
             <Form.Item
               hasFeedback
               name="instance"
@@ -199,11 +199,11 @@ export const SettingsModal = () => {
                               onFocus={() => {
                                 form.setFieldValue(
                                   ["auth", "users", index, "needsBcrypt"],
-                                  true,
+                                  true
                                 );
                                 form.setFieldValue(
                                   ["auth", "users", index, "passwordBcrypt"],
-                                  "",
+                                  ""
                                 );
                               }}
                             />