compute history

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

package-lock.json

@@ -4462,9 +4462,9 @@
       "integrity": "sha512-LING+GvW37I0L40rZdPCZ1SvcZurDSGGhT0WOVPNO8oyh2C3bXModDBNE4+gCFa8pTbQBOc4ot1/Zoj9PfT/zA=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.6.5.tgz",
-      "integrity": "sha512-GH7ZujwmV997kZT4GJy7cZF0TBitM/RVm+xBLtqpr5qmrP/4Pq38WODbOol3dGEHsyT62qzDTvCGoBYSRSCU1g==",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.6.7.tgz",
+      "integrity": "sha512-6Il5PJfaZXXkXO8ECZCsH13OOGlPaN9vK3pLW9EQ6Zj9NlESeLdh0lmvvYSyvloYU999rOY4+X9ujhN6P18clw==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.6",

package.json

@@ -22,7 +22,7 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.6.5",
+    "@oceanprotocol/lib": "^0.6.7",
     "@oceanprotocol/react": "^0.2.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",

src/@types/ComputeJobMetaData.d.ts

@@ -0,0 +1,10 @@
+export interface ComputeJobMetaData {
+  did: string
+  dateCreated: string
+  dateFinished: string
+  assetName: string
+  status: number
+  statusText: string
+  algorithmLogUrl: string
+  resultsUrls: string[]
+}

src/components/pages/History/ComputeDetailsModal.tsx

@@ -5,13 +5,15 @@ import Loader from '../../atoms/Loader'
 import AssetList from '../../organisms/AssetList'
 import BaseDialog from '../../atoms/BaseDialog'
 import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/ComputeJob'
+import { ComputeJobMetaData } from '@types/ComputeJobMetaData'
+import Time from '../../atoms/Time'
 
 export default function ComputeDetailsModal({
   computeJob,
   open,
   onClose
 }: {
-  computeJob: ComputeJob
+  computeJob: ComputeJobMetaData
   open: boolean
   onClose: () => void
 }): ReactElement {
@@ -33,7 +35,26 @@ export default function ComputeDetailsModal({
 
   return (
     <BaseDialog open={open} onClose={onClose} title="Compute job details">
-      {isLoading ? <Loader /> : <>Details</>}
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <>
+          <p>{computeJob.assetName}</p>
+          <p>
+            <Time date={computeJob.dateCreated} isUnix />
+          </p>
+          <p>
+            <Time date={computeJob.dateFinished} isUnix />
+          </p>
+          <p>{computeJob.statusText}</p>
+          <p>{computeJob.algorithmLogUrl}</p>
+          <p>
+            {computeJob.resultsUrls?.map((url) => {
+              return <span>{url}</span>
+            })}{' '}
+          </p>
+        </>
+      )}
     </BaseDialog>
   )
 }

src/components/pages/History/ComputeJobs.tsx

@@ -1,33 +1,16 @@
-import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/ComputeJob'
 import { useOcean } from '@oceanprotocol/react'
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import DataTable from 'react-data-table-component'
 import Time from '../../atoms/Time'
 import styles from './PoolTransactions.module.css'
 import Loader from '../../atoms/Loader'
+import Tooltip from '../../atoms/Tooltip'
 import Button from '../../atoms/Button'
 import ComputeDetailsModal from './ComputeDetailsModal'
+import { ComputeJobMetaData } from '@types/ComputeJobMetaData'
+import { Link } from 'gatsby'
 
-// function AssetTitle({ row }: { row: ComputeJob }): ReactElement {
-//     const { ocean } = useOcean()
-
-//     useEffect(() => {
-//         if (!ocean) return
-
-//         async function getDid() {
-//             const { did } = await ocean.keeper.agreementStoreManager.getAgreement(
-//                 job.agreementId
-//             )
-//             ocean.
-
-//             const ddo = await ocean.assets.resolve(did)
-//         }
-//         getDid()
-//     }, [ocean, row])
-//     return <Link to={`/asset/${did}`}>{title || did}</Link>
-// }
-
-function DetailsButton({ row }: { row: ComputeJob }): ReactElement {
+function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement {
   const [isDialogOpen, setIsDialogOpen] = useState(false)
 
   return (
@@ -51,33 +34,35 @@ function Empty() {
 const columns = [
   {
     name: 'Created',
-    selector: function getTimeRow(row: ComputeJob) {
+    selector: function getTimeRow(row: ComputeJobMetaData) {
       return <Time date={row.dateCreated} isUnix />
     }
   },
   {
     name: 'Finished',
-    selector: function getTimeRow(row: ComputeJob) {
+    selector: function getTimeRow(row: ComputeJobMetaData) {
       return <Time date={row.dateFinished} isUnix />
     }
   },
   {
     name: 'Name',
-    selector: function getAssetRow() {
-      //const did = row.dtAddress.replace('0x', 'did:op:')
-      // return <AssetTitle did={did} />
-      return <></>
+    selector: function getAssetRow(row: ComputeJobMetaData) {
+      return (
+        <Tooltip content={row.assetName}>
+          <Link to={`/asset/${row.did}`}>{row.assetName}</Link>{' '}
+        </Tooltip>
+      )
     }
   },
   {
     name: 'Status',
-    selector: function getStatus(row: ComputeJob) {
+    selector: function getStatus(row: ComputeJobMetaData) {
       return <>{row.statusText}</>
     }
   },
   {
     name: 'Actions',
-    selector: function getActions(row: ComputeJob) {
+    selector: function getActions(row: ComputeJobMetaData) {
       return <DetailsButton row={row} />
     }
   }
@@ -85,58 +70,75 @@ const columns = [
 
 export default function ComputeJobs(): ReactElement {
   const { ocean, account } = useOcean()
-  const [jobs,setJobs] = useState<ComputeJob[]>()
+  const [jobs, setJobs] = useState<ComputeJobMetaData[]>()
   const [isLoading, setIsLoading] = useState(false)
   const [userAgreed, setUserAgreed] = useState(false)
 
-  const getJobs = async () => {
-    if (!ocean || !account) return
-    setIsLoading(true)
-    try {
-      const orderHistory = await ocean.assets.getOrderHistory(
-        account,
-        'compute',
-        100
-      )
-      console.log('orders', orderHistory)
-       const userJobs = await ocean.compute.status(account)
-
-      setJobs(userJobs.sort((a, b) => {
-          if (a.dateCreated > b.dateCreated) return -1
-          if (a.dateCreated < b.dateCreated) return 1
-          return 0
-      }))
-      setUserAgreed(true)
-    } catch (e) {
-      console.log(e)
-    } finally {
-      setIsLoading(false)
-    }
+  const getTitle = async (did: string) => {
+    const ddo = await ocean.metadatacache.retrieveDDO(did)
+    const metadata = ddo.findServiceByType('metadata')
+    return metadata.attributes.main.name
   }
 
+  useEffect(() => {
+    async function getJobs() {
+      if (!ocean || !account) return
+      setIsLoading(true)
+      try {
+        console.log('get jobs')
+        const orderHistory = await ocean.assets.getOrderHistory(
+          account,
+          'compute',
+          100
+        )
+        console.log('orders', orderHistory)
+        let jobs: ComputeJobMetaData[] = []
+
+        for (let i = 0; i < orderHistory.length; i++) {
+          const assetName = await getTitle(orderHistory[i].did)
+          const computeJob = await ocean.compute.status(
+            account,
+            orderHistory[i].did
+          )
+          console.log(computeJob)
+          computeJob.forEach((item) => {
+            jobs.push({
+              did: orderHistory[i].did,
+              dateCreated: item.dateCreated,
+              dateFinished: item.dateFinished,
+              assetName: assetName,
+              status: item.status,
+              statusText: item.statusText,
+              algorithmLogUrl: item.algorithmLogUrl,
+              resultsUrls:
+                (item as any).resultsUrl !== '' ? (item as any).resultsUrl : []
+            })
+          })
+        }
+        console.log(jobs)
+        setJobs(jobs)
+
+        setUserAgreed(true)
+      } catch (e) {
+        console.log(e)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    getJobs()
+  }, [ocean, account])
+
   return isLoading ? (
     <Loader />
-  ) : account && ocean ? (
-    userAgreed ? (
-      <>
-        <DataTable
-          columns={columns}
-          data={jobs}
-          className={styles.table}
-          noHeader
-          pagination={jobs?.length >= 9}
-          paginationPerPage={10}
-          noDataComponent={<Empty />}
-        />
-      </>
-    ) : (
-      <div>
-        <Button onClick={getJobs} name="Get jobs">
-          Sign to retrieve jobs
-        </Button>
-      </div>
-    )
   ) : (
-    <div>Connect your wallet to see your compute jobs.</div>
+    <DataTable
+      columns={columns}
+      data={jobs}
+      className={styles.table}
+      noHeader
+      pagination={jobs?.length >= 9}
+      paginationPerPage={10}
+      noDataComponent={<Empty />}
+    />
   )
 }

src/components/pages/History/PoolTransactions.tsx

@@ -1,5 +1,6 @@
 import { PoolTransaction } from '@oceanprotocol/lib/dist/node/balancer/OceanPool'
 import { useMetadata, useOcean } from '@oceanprotocol/react'
+import Loader from '../../atoms/Loader'
 import { Link } from 'gatsby'
 import React, { ReactElement, useEffect, useState } from 'react'
 import DataTable from 'react-data-table-component'
@@ -68,11 +69,12 @@ const columns = [
 export default function PoolTransactions(): ReactElement {
   const { ocean, accountId } = useOcean()
   const [logs, setLogs] = useState<PoolTransaction[]>()
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     async function getLogs() {
       if (!ocean || !accountId) return
-
+      setIsLoading(true)
       const logs = await ocean.pool.getAllPoolLogs(accountId)
       setLogs(
         // sort logs by date, newest first
@@ -82,11 +84,14 @@ export default function PoolTransactions(): ReactElement {
           return 0
         })
       )
+      setIsLoading(false)
     }
     getLogs()
   }, [ocean, accountId])
 
-  return (
+  return isLoading ? (
+    <Loader />
+  ) : (
     <DataTable
       columns={columns}
       data={logs}

src/helpers/NetworkMonitor.tsx

@@ -19,6 +19,15 @@ export function NetworkMonitor(): ReactElement {
         // add metadataCacheUri only when defined
         ...(metadataCacheUri && { metadataCacheUri })
       }
+      if (chainId === '8996') {
+        newConfig.factoryAddress = '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f'
+        newConfig.poolFactoryAddress =
+          '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4'
+        newConfig.fixedRateExchangeAddress =
+          '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8'
+        newConfig.metadataContractAddress =
+          '0xEBe77E16736359Bf0F9013F6017242a5971cAE76'
+      }
 
       try {
         await connect(newConfig)