Merge pull request #414 from deltaDAO/enhancement/compute-results

enhancement: add file name and size to compute results

src/components/@shared/FormInput/InputElement/FilesInput/utils.ts

@@ -3,6 +3,7 @@ export function prettySize(
   separator = ' ',
   postFix = ''
 ): string {
+  if (bytes === 0) return '0 Bytes'
   if (!bytes) return 'n/a'
 
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']

src/components/Profile/History/ComputeJobs/Results.module.css

@@ -9,6 +9,10 @@
   margin-bottom: calc(var(--spacer) / 3);
 }
 
+.downloadButton {
+  text-transform: none;
+}
+
 .help {
   margin-top: calc(var(--spacer) / 3);
 }

src/components/Profile/History/ComputeJobs/Results.tsx

@@ -13,6 +13,7 @@ import content from '../../../../../content/pages/history.json'
 import { useWeb3 } from '@context/Web3'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { getAsset } from '@utils/aquarius'
+import { prettySize } from '@components/@shared/FormInput/InputElement/FilesInput/utils'
 
 export default function Results({
   job
@@ -34,23 +35,26 @@ export default function Results({
     getAssetMetadata()
   }, [job.inputDID, newCancelToken])
 
-  function getDownloadButtonValue(type: ComputeResultType): string {
+  function getDownloadButtonValue(
+    type: ComputeResultType,
+    name: string
+  ): string {
     let buttonName
     switch (type) {
       case 'output':
-        buttonName = 'results'
+        buttonName = `RESULTS (${name})`
         break
       case 'algorithmLog':
-        buttonName = 'algorithm logs'
+        buttonName = 'ALGORITHM LOGS'
         break
       case 'configrationLog':
-        buttonName = 'configuration logs'
+        buttonName = 'CONFIGURATION LOGS'
         break
       case 'publishLog':
-        buttonName = 'publish logs'
+        buttonName = 'PUBLISH LOGS'
         break
       default:
-        buttonName = 'results'
+        buttonName = `RESULTS (${name})`
         break
     }
     return buttonName
@@ -86,10 +90,14 @@ export default function Results({
                   <Button
                     style="text"
                     size="small"
+                    className={styles.downloadButton}
                     onClick={() => downloadResults(i)}
                     download
                   >
-                    {getDownloadButtonValue(jobResult.type)}
+                    {`${getDownloadButtonValue(
+                      jobResult.type,
+                      jobResult.filename
+                    )} - ${prettySize(jobResult.filesize)}`}
                   </Button>
                 </ListItem>
               ) : (