job history

client/src/components/molecules/JobTeaser.module.scss

@@ -0,0 +1,27 @@
+@import '../../styles/variables';
+
+.assetList {
+    
+        color: $brand-grey-dark;
+        border-bottom: 1px solid $brand-grey-lighter;
+        padding-top: $spacer / 2;
+        padding-bottom: $spacer / 2;
+       
+    h1 {
+        font-size: $font-size-base;
+        color: inherit;
+        margin: 0;
+    }
+}
+
+.listRow{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.date {
+    font-size: $font-size-small;
+    color: $brand-grey-light;
+}
+

client/src/components/molecules/JobTeaser.tsx

@@ -1,13 +1,46 @@
-import React, { useEffect, useState } from 'react'
-import { getUserJobs } from '../../utils/getUserJobs'
+import React, { useEffect, useState, useContext } from 'react'
 import { User } from '../../context';
-import Spinner from '../atoms/Spinner'
+import moment from 'moment';
+import styles from './JobTeaser.module.scss'
 
 
+export default function JobTeaser({ job }: { job: any }) {
+    const { ocean } = useContext(User);
+    const [assetName, setAssetName] = useState()
+    useEffect(() => {
+        async function getAsset() {
+            try {
+                const { did } = await (ocean as any).keeper.agreementStoreManager.getAgreement(job.agreementId)
+                const asset = await (ocean as any).assets.resolve(did)
+                const { attributes } = asset.findServiceByType('metadata')
+                const { main } = attributes
+                setAssetName(main.name)
+             
 
-export default function JobTeaser() {
+            } catch (error) {
+                console.log(error)
+            }
+        }
+
+        getAsset()
+    }, [ocean,job.agreementId])
 
     return (
-        <div>Job teaser</div>
+        <article className={styles.assetList}>
+            <div className={styles.listRow}>
+                <h1>{assetName}</h1>
+                <div
+                    className={styles.date}
+                    title={`Created on ${job.dateCreated}`}
+                >
+                    {moment.unix(job.dateCreated).fromNow()}
+                </div>
+            </div>
+            <div className={styles.listRow}>
+            <div>Job status</div>
+            <div>{job.statusText}</div>
+            </div>
+            <div>{job.resultsUrl}</div>
+        </article>
     )
 }

client/src/components/organisms/JobsUser.tsx

@@ -13,14 +13,12 @@ export default function JobsUser() {
     useEffect(() => {
         setIsLoading(true)
         async function getJobs() {
-            console.log(account)
             const userJobs = await getUserJobs(ocean, account)
-            console.log('user jobs', userJobs)
             setJobList(userJobs as any)
             setIsLoading(false)
         }
         getJobs()
-    }, [account])
+    }, [account,ocean])
 
 
     return (
@@ -30,7 +28,7 @@ export default function JobsUser() {
                 : jobList.length ?
                     jobList.map((job: any) => 
                         (
-                            <JobTeaser key={job.agreementId} />
+                            <JobTeaser key={job.jobId} job={job} />
                            
                         )
                     ) : ''

client/src/routes/History.tsx

@@ -17,7 +17,7 @@ class History extends Component {
                     {!this.context.isLogged && <Web3message />}
                     <div>Assets</div>
                     <AssetsUser list />
-                    <div>Jobs</div>
+                    <div>Compute Jobs</div>
                     <JobsUser />
                 </Content>
             </Route>

client/src/utils/getUserJobs.ts

@@ -4,7 +4,7 @@ const tempList =
         "algorithmLogUrl": null,
         "dateCreated": 1585581794.73346,
         "dateFinished": null,
-        "jobId": "5e67cdffc2224907b10cdb80820033ee",
+        "jobId": "5e67cdffc2224907b10cdb802820033ee",
         "owner": "0x4D156A2ef69ffdDC55838176C6712C90f60a2285",
         "removed": 0,
         "resultsDid": "",
@@ -14,7 +14,7 @@ const tempList =
         "stopreq": 0
     },
     {
-        "agreementId": "a40d4fbdd434c45fb988b3f47e7fb8d50386ee8c968c94a0db6909cd96582e6cd",
+        "agreementId": "a40d4fbddf7c45fb988b3f47e7fb8d50386ee8c968c94a0db6909cd96582e6cd",
         "algorithmLogUrl": null,
         "dateCreated": 1585581794.73346,
         "dateFinished": null,
@@ -37,8 +37,6 @@ export async function getUserJobs(ocean: any, account: string) {
         //const jobList = await ocean.compute.status(account)
        // const jobList = await ocean.compute.status(accounts[0])
 
-
-
         return tempList;