update compute details and compute results UI and style

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

@@ -62,6 +62,20 @@
 .assetMeta code {
   color: var(--color-secondary);
   font-size: var(--font-size-small);
+  overflow: hidden;
+  width: 100%;
+  flex: 4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assetMeta span {
+  flex: 1;
+}
+
+.assetMeta {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .meta {

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

@@ -33,7 +33,8 @@ function Asset({
         </a>
       </h3>
       <p className={styles.assetMeta}>
-        {symbol} | <code>{did}</code>
+        <span> {`${symbol} | `}</span>
+        <code>{did}</code>
       </p>
     </div>
   )
@@ -97,7 +98,7 @@ export default function Details({
             />
           )}
           <MetaItem title="Job ID" content={<code>{job.jobId}</code>} />
-          {/* {job.resultsDid && (
+          {/* {job.results[0]. && (
             <MetaItem
               title="Published Results DID"
               content={<code>{job.resultsDid}</code>}

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

@@ -4,7 +4,6 @@ import {
   Provider
 } from '@oceanprotocol/lib'
 import React, { ReactElement, useState } from 'react'
-import Loader from '@shared/atoms/Loader'
 import { ListItem } from '@shared/atoms/Lists'
 import Button from '@shared/atoms/Button'
 import styles from './Results.module.css'
@@ -20,74 +19,53 @@ export default function Results({
   const providerInstance = new Provider()
   const { accountId, web3 } = useWeb3()
   const [isLoading, setIsLoading] = useState(false)
-  const [hasFetched, setHasFetched] = useState(false)
   const isFinished = job.dateFinished !== null
 
-  async function getResults() {
+  async function downloadResults(resultIndex: number) {
     if (!accountId || !job) return
 
     try {
       setIsLoading(true)
-      console.log(' Job: ', job)
       const jobResult = await providerInstance.getComputeResultUrl(
         'https://v4.provider.rinkeby.oceanprotocol.com/',
         web3,
         accountId,
         job.jobId,
-        0
+        resultIndex
       )
       await downloadFileBrowser(jobResult)
     } catch (error) {
       LoggerInstance.error(error.message)
     } finally {
       setIsLoading(false)
-      setHasFetched(true)
     }
   }
 
   return (
     <div className={styles.results}>
-      {hasFetched ? (
+      {isFinished ? (
         <ul>
-          <ListItem>
-            {/* {job.algorithmLogUrl ? (
-              <a href={job.algorithmLogUrl} target="_blank" rel="noreferrer">
-                View Log
-              </a>
-            ) : (
-              'No logs found.'
-            )} */}
-          </ListItem>
-
-          {/* {job.resultsUrl &&
-            Array.isArray(job.resultsUrl) &&
-            job.resultsUrl.map((url, i) =>
-              url ? (
-                <ListItem key={job.jobId}>
-                  <a href={url} target="_blank" rel="noreferrer">
-                    View Result {i + 1}
-                  </a>
+          {job.results &&
+            Array.isArray(job.results) &&
+            job.results.map((jobResult, i) =>
+              jobResult.filename ? (
+                <ListItem key={i}>
+                  <Button
+                    style="primary"
+                    size="small"
+                    onClick={() => downloadResults(i)}
+                    disabled={isLoading || !isFinished}
+                  >
+                    {jobResult.filename}
+                  </Button>
                 </ListItem>
               ) : (
                 <ListItem>No results found.</ListItem>
               )
-            )} */}
+            )}
         </ul>
       ) : (
-        <Button
-          style="primary"
-          size="small"
-          onClick={() => getResults()}
-          disabled={isLoading || !isFinished}
-        >
-          {isLoading ? (
-            <Loader />
-          ) : !isFinished ? (
-            'Waiting for results...'
-          ) : (
-            'Get Results'
-          )}
-        </Button>
+        <p> Waiting for results...</p>
       )}
       <FormHelp className={styles.help}>{content.compute.storage}</FormHelp>
     </div>