Update compute history (#958)

* use status function

* remobe get results button, use getResults function

* use default index

* lint fix

* ocean.js version change

* more lint fix

* function parameter fix

* credential type fix

* cursor pointer on link hover

Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com>

package.json

@@ -28,7 +28,7 @@
     "@coingecko/cryptoformat": "^0.4.4",
     "@loadable/component": "^5.15.0",
     "@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

@@ -333,6 +333,7 @@ export default function Compute({
             appConfig.marketFeeAddress,
             undefined,
             null,
+            null,
             false
           )
 
@@ -354,6 +355,7 @@ export default function Compute({
             appConfig.marketFeeAddress,
             undefined,
             null,
+            null,
             false
           )
 

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

@@ -1,4 +1,4 @@
-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'
@@ -9,6 +9,12 @@ export interface AdvancedSettings {
   isOrderDisabled: boolean
 }
 
+enum CredentialType {
+  address = 'address',
+  credential3Box = 'credential3Box',
+  domain = 'domain'
+}
+
 export default function DebugEditCredential({
   values,
   ddo,

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`
   }
 `
 
+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

@@ -1,5 +1,4 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import axios from 'axios'
 import { ComputeJobMetaData } from '../../../../../@types/ComputeJobMetaData'
 import Time from '../../../../atoms/Time'
 import Button from '../../../../atoms/Button'
@@ -101,12 +100,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,13 +1,13 @@
 import { 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'
-import Button from '../../../../atoms/Button'
 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 {
@@ -38,27 +38,45 @@ export default function Results({
   const [hasFetched, setHasFetched] = useState(false)
   const isFinished = job.dateFinished !== null
 
-  async function getResults() {
-    if (!account || !ocean || !job) return
-
-    try {
-      setIsLoading(true)
-      const jobStatus = await ocean.compute.status(
-        account,
-        job.did,
-        undefined,
-        undefined,
-        job.jobId
-      )
-      if (jobStatus?.length > 0) {
-        job.algorithmLogUrl = jobStatus[0].algorithmLogUrl
-        job.resultsUrl = jobStatus[0].resultsUrl
+  useEffect(() => {
+    async function getResults() {
+      if (!account || !ocean || !job) return
+      try {
+        setIsLoading(true)
+        const jobStatus = await ocean.compute.status(
+          account,
+          job.did,
+          undefined,
+          undefined,
+          job.jobId,
+          undefined
+        )
+        if (jobStatus) {
+          job.results = jobStatus[0].results
+        }
+      } catch (error) {
+        Logger.error(error.message)
+      } finally {
+        setIsLoading(false)
+        setHasFetched(true)
       }
+    }
+
+    getResults()
+  }, [ocean, account, job])
+
+  async function accessResult(result: ComputeResult, index: number) {
+    if (!account || !ocean || !job) return
+    try {
+      const jobResult = await ocean.compute.getResult(
+        account,
+        job.jobId,
+        index,
+        undefined
+      )
+      return jobResult
     } catch (error) {
       Logger.error(error.message)
-    } finally {
-      setIsLoading(false)
-      setHasFetched(true)
     }
   }
 
@@ -66,23 +84,18 @@ export default function Results({
     <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>
               ) : (
@@ -90,21 +103,10 @@ export default function Results({
               )
             )}
         </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,7 +2,6 @@ import {
   CredentialAction,
   Credential,
   Credentials,
-  CredentialType,
   DDO
 } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
@@ -13,6 +12,12 @@ export interface AdvancedSettingsForm {
   isOrderDisabled: boolean
 }
 
+enum CredentialType {
+  address = 'address',
+  credential3Box = 'credential3Box',
+  domain = 'domain'
+}
+
 export const validationSchema: Yup.SchemaOf<AdvancedSettingsForm> =
   Yup.object().shape({
     allow: Yup.array().nullable(),

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