compute fix, compute history

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

src/components/atoms/BaseDialog.module.css

@@ -4,3 +4,7 @@
   border-radius: 15px;
   margin: auto;
 }
+
+.dialogTitle {
+  margin-top: 30px !important;
+}

src/components/atoms/BaseDialog.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, ReactElement } from 'react'
 import styles from './BaseDialog.module.css'
 import { Modal } from 'react-responsive-modal'
-
+import 'react-responsive-modal/styles.css'
 export default function BaseDialog({
   open,
   title,
@@ -28,7 +28,7 @@ export default function BaseDialog({
       }}
       {...other}
     >
-      <h2>{title}</h2>
+      <h2 className={styles.dialogTitle}>{title}</h2>
       <div>{children}</div>
     </Modal>
   )

src/components/atoms/Time.tsx

@@ -3,12 +3,14 @@ import { format, formatDistance } from 'date-fns'
 
 export default function Time({
   date,
-  relative
+  relative,
+  isUnix
 }: {
   date: string
   relative?: boolean
+  isUnix?: boolean
 }): ReactElement {
-  const dateNew = new Date(date)
+  const dateNew = isUnix ? new Date(Number(date) * 1000) : new Date(date)
   const dateIso = dateNew.toISOString()
 
   return (

src/components/organisms/AssetActions/Compute.tsx

@@ -25,17 +25,15 @@ export default function Compute({
 }): ReactElement {
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
-  const computeService = ddo.findServiceByType('compute').attributes.main
+  const computeService = ddo.findServiceByType('compute')
   const metadataService = ddo.findServiceByType('metadata')
 
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [, setError] = useState('')
   const [computeType, setComputeType] = useState('nodejs')
-  const [computeContainer, setComputeContainer] = useState({
-    entrypoint: '',
-    image: '',
-    tag: ''
-  })
+  const [computeContainer, setComputeContainer] = useState(
+    computeOptions[0].value
+  )
   const [algorithmRawCode, setAlgorithmRawCode] = useState('')
   const [isPublished, setIsPublished] = useState(false)
   const [file, setFile] = useState(null)

src/components/pages/History/ComputeDetailsModal.tsx

@@ -0,0 +1,39 @@
+import { Logger } from '@oceanprotocol/lib'
+import { useOcean } from '@oceanprotocol/react'
+import React, { ReactElement, useEffect, useState } from 'react'
+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'
+
+export default function ComputeDetailsModal({
+  computeJob,
+  open,
+  onClose
+}: {
+  computeJob: ComputeJob
+  open: boolean
+  onClose: () => void
+}): ReactElement {
+  const { ocean, status, accountId } = useOcean()
+  const [isLoading, setIsLoading] = useState(false)
+  useEffect(() => {
+    async function getDetails() {
+      if (!accountId || !ocean || !computeJob) return
+      try {
+        setIsLoading(true)
+      } catch (error) {
+        Logger.error(error.message)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    getDetails()
+  }, [ocean, status, accountId])
+
+  return (
+    <BaseDialog open={open} onClose={onClose} title="Compute job details">
+      {isLoading ? <Loader /> : <>Details</>}
+    </BaseDialog>
+  )
+}

src/components/pages/History/ComputeJobs.tsx

@@ -0,0 +1,142 @@
+import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/ComputeJob'
+import { useOcean } from '@oceanprotocol/react'
+import React, { ReactElement, 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 Button from '../../atoms/Button'
+import ComputeDetailsModal from './ComputeDetailsModal'
+
+// 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 {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+  return (
+    <>
+      <Button name="Details" onClick={() => setIsDialogOpen(true)}>
+        Details
+      </Button>
+      <ComputeDetailsModal
+        computeJob={row}
+        open={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+      />
+    </>
+  )
+}
+
+function Empty() {
+  return <div className={styles.empty}>No results found</div>
+}
+
+const columns = [
+  {
+    name: 'Created',
+    selector: function getTimeRow(row: ComputeJob) {
+      return <Time date={row.dateCreated} isUnix />
+    }
+  },
+  {
+    name: 'Finished',
+    selector: function getTimeRow(row: ComputeJob) {
+      return <Time date={row.dateFinished} isUnix />
+    }
+  },
+  {
+    name: 'Name',
+    selector: function getAssetRow() {
+      //const did = row.dtAddress.replace('0x', 'did:op:')
+      // return <AssetTitle did={did} />
+      return <></>
+    }
+  },
+  {
+    name: 'Status',
+    selector: function getStatus(row: ComputeJob) {
+      return <>{row.statusText}</>
+    }
+  },
+  {
+    name: 'Actions',
+    selector: function getActions(row: ComputeJob) {
+      return <DetailsButton row={row} />
+    }
+  }
+]
+
+export default function ComputeJobs(): ReactElement {
+  const { ocean, account } = useOcean()
+  const [jobs] = useState<ComputeJob[]>()
+  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)
+    }
+  }
+
+  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>
+  )
+}

src/components/pages/History/PoolTransactions.tsx

@@ -60,9 +60,7 @@ const columns = [
   {
     name: 'Time',
     selector: function getTimeRow(row: PoolTransaction) {
-      return (
-        <Time date={new Date(row.timestamp * 1000).toUTCString()} relative />
-      )
+      return <Time date={row.timestamp.toString()} relative isUnix />
     }
   }
 ]

src/components/pages/History/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react'
+import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
 import PoolTransactions from './PoolTransactions'
 import PublishedList from './PublishedList'
@@ -14,7 +15,7 @@ const sections = [
   },
   {
     title: 'Compute Jobs',
-    component: 'Coming Soon...'
+    component: <ComputeJobs />
   }
 ]