feat: add restoresize to download button

src/components/Backups/index.stories.tsx

@@ -21,6 +21,7 @@ const backupsData = [
     restore: {
       status: 'completed',
       restoreLocation: 'https://example.com/backup',
+      restoreSize: 300
     },
   },
   {

src/components/Backups/index.tsx

@@ -14,6 +14,7 @@ export interface BackupsProps {
     restore: {
       status: 'completed' | 'pending' | 'failed';
       restoreLocation?: string;
+      restoreSize?: number;
     };
   }[];
 }

src/components/RestoreButton/index.js

@@ -3,6 +3,12 @@ import React from 'react';
 import Button from 'components/Button';
 import Prepare from 'components/RestoreButton/Prepare';
 
+
+function humanFileSize(size) {
+  var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+}
+
 /**
  * A button to restore a backup.
  */
@@ -13,7 +19,7 @@ const RestoreButton = ({ backup: { backupId, restore } }) => {
 
   if (restore.status === 'failed') return <Button disabled>Retrieve failed</Button>;
 
-  return <Button href={restore.restoreLocation}>Download</Button>;
+  return <Button href={restore.restoreLocation}>Download ({humanFileSize(restore.restoreSize)})</Button>;
 };
 
 export default RestoreButton;

src/lib/query/EnvironmentWithBackups.js

@@ -20,6 +20,7 @@ export default gql`
           id
           status
           restoreLocation
+          restoreSize
         }
       }
     }