Ffix: Update compute history to reflect v3 changes

package.json

@@ -29,7 +29,7 @@
     "@loadable/component": "^5.15.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^0.19.2",
+    "@oceanprotocol/lib": "^0.20.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.1.0",
     "@sindresorhus/slugify": "^2.1.0",

src/components/organisms/AssetActions/Compute/index.tsx

@@ -337,6 +337,7 @@ export default function Compute({
             appConfig.marketFeeAddress,
             undefined,
             null,
+            null,
             false
           )
 
@@ -358,6 +359,7 @@ export default function Compute({
             appConfig.marketFeeAddress,
             undefined,
             null,
+            null,
             false
           )
 

src/components/organisms/AssetActions/Edit/DebugEditAdvancedSettings.tsx

@@ -1,8 +1,9 @@
-import { DDO, Credentials, CredentialType } from '@oceanprotocol/lib'
+import { DDO, Credentials } from '@oceanprotocol/lib'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { AdvancedSettingsForm } from '../../../../models/FormEditCredential'
 import { useOcean } from '../../../../providers/Ocean'
 import DebugOutput from '../../../atoms/DebugOutput'
+import { CredentialType } from './EditAdvancedSettings'
 
 export interface AdvancedSettings {
   credentail: Credentials

src/components/organisms/AssetActions/Edit/EditAdvancedSettings.tsx

@@ -3,7 +3,7 @@ import React, { ReactElement, useState } from 'react'
 import { useAsset } from '../../../../providers/Asset'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import styles from './index.module.css'
-import { Logger, CredentialType, DDO } from '@oceanprotocol/lib'
+import { Logger, DDO } from '@oceanprotocol/lib'
 import MetadataFeedback from '../../../molecules/MetadataFeedback'
 import { graphql, useStaticQuery } from 'gatsby'
 import { useWeb3 } from '../../../../providers/Web3'
@@ -51,6 +51,12 @@ const contentQuery = graphql`
   }
 `
 
+export enum CredentialType {
+  address = 'address',
+  credential3Box = 'credential3Box',
+  domain = 'domain'
+}
+
 function getDefaultCredentialType(credentialType: string): CredentialType {
   switch (credentialType) {
     case 'address':

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

@@ -114,12 +114,12 @@ export default function Details({
             />
           )}
           <MetaItem title="Job ID" content={<code>{job.jobId}</code>} />
-          {job.resultsDid && (
+          {/* {job.resultsDid && (
             <MetaItem
               title="Published Results DID"
               content={<code>{job.resultsDid}</code>}
             />
-          )}
+          )} */}
         </div>
       </Modal>
     </>

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

@@ -6,3 +6,7 @@
 .help {
   margin-top: calc(var(--spacer) / 3);
 }
+
+.result {
+  cursor: pointer;
+}

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

@@ -1,5 +1,5 @@
 import { DDO, Logger } from '@oceanprotocol/lib'
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import Loader from '../../../../atoms/Loader'
 import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
 import { ListItem } from '../../../../atoms/Lists'
@@ -8,6 +8,7 @@ import { useOcean } from '../../../../../providers/Ocean'
 import styles from './Results.module.css'
 import FormHelp from '../../../../atoms/Input/Help'
 import { graphql, useStaticQuery } from 'gatsby'
+import { ComputeResult } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
 
 export const contentQuery = graphql`
   query HistoryPageComputeResultsQuery {
@@ -40,74 +41,81 @@ export default function Results({
   const [hasFetched, setHasFetched] = useState(false)
   const isFinished = job.dateFinished !== null
 
-  async function getResults() {
-    if (!account || !ocean || !job) return
+  useEffect(() => {
+    async function getResults() {
+      if (!account || !ocean || !job) return
+
+      try {
+        setIsLoading(true)
+        const computeService = ddo.findServiceByType('compute')
+        const jobStatus = await ocean.compute.status(
+          account,
+          job.did,
+          ddo,
+          computeService,
+          job.jobId
+        )
+        if (jobStatus) {
+          console.log('results', jobStatus)
+          job.results = jobStatus[0].results
+        }
+      } catch (error) {
+        Logger.error(error.message)
+      } finally {
+        setIsLoading(false)
+        setHasFetched(true)
+      }
+    }
 
+    getResults()
+  }, [ocean, account, job, ddo])
+
+  async function accessResult(result: ComputeResult, index: number) {
+    if (!account || !ocean || !job) return
     try {
-      setIsLoading(true)
       const computeService = ddo.findServiceByType('compute')
-      const jobStatus = await ocean.compute.status(
+      const jobResult = await ocean.compute.getResult(
         account,
+        job.jobId,
+        index,
+        undefined,
         job.did,
         ddo,
-        computeService,
-        job.jobId
+        computeService
       )
-      if (jobStatus?.length > 0) {
-        job.algorithmLogUrl = jobStatus[0].algorithmLogUrl
-        job.resultsUrl = jobStatus[0].resultsUrl
-      }
+      return jobResult
     } catch (error) {
       Logger.error(error.message)
-    } finally {
-      setIsLoading(false)
-      setHasFetched(true)
     }
   }
 
   return (
     <div className={styles.results}>
       {hasFetched ? (
         <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 ? (
+          {job.results &&
+            Array.isArray(job.results) &&
+            job.results.map((result, index) =>
+              result ? (
                 <ListItem key={job.jobId}>
-                  <a href={url} target="_blank" rel="noreferrer">
-                    View Result {i + 1}
+                  <a
+                    className={styles.result}
+                    onClick={() => accessResult(result, index)}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {result.filename}
                   </a>
                 </ListItem>
               ) : (
                 <ListItem>No results found.</ListItem>
               )
             )}
         </ul>
+      ) : isLoading ? (
+        <Loader />
       ) : (
-        <Button
-          style="primary"
-          size="small"
-          onClick={() => getResults()}
-          disabled={isLoading || !isFinished}
-        >
-          {isLoading ? (
-            <Loader />
-          ) : !isFinished ? (
-            'Waiting for results...'
-          ) : (
-            'Get Results'
-          )}
-        </Button>
+        !isFinished && <> Waiting for results...</>
       )}
       <FormHelp className={styles.help}>{content.compute.storage}</FormHelp>
     </div>

src/hooks/useConsume.ts

@@ -65,6 +65,7 @@ function useConsume(): UseConsume {
               marketFeeAddress,
               undefined,
               null,
+              null,
               false
             )
             Logger.log('order created', orderId)

src/models/FormEditCredential.ts

@@ -2,10 +2,10 @@ import {
   CredentialAction,
   Credential,
   Credentials,
-  CredentialType,
   DDO
 } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
+import { CredentialType } from '../components/organisms/AssetActions/Edit/EditAdvancedSettings'
 
 export interface AdvancedSettingsForm {
   allow: string[]

src/utils/compute.ts

@@ -165,8 +165,7 @@ async function getJobs(
         '',
         account,
         undefined,
-        undefined,
-        false
+        undefined
       )) as ComputeJob[]
 
       // means the provider uri is not good, so we ignore it and move on