diff --git a/client/src/components/molecules/JobTeaser.module.scss b/client/src/components/molecules/JobTeaser.module.scss new file mode 100644 index 0000000..f39ce57 --- /dev/null +++ b/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; +} + diff --git a/client/src/components/molecules/JobTeaser.tsx b/client/src/components/molecules/JobTeaser.tsx index e19a726..2e0e93c 100644 --- a/client/src/components/molecules/JobTeaser.tsx +++ b/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 ( -
Job teaser
+
+
+

{assetName}

+
+ {moment.unix(job.dateCreated).fromNow()} +
+
+
+
Job status
+
{job.statusText}
+
+
{job.resultsUrl}
+
) } \ No newline at end of file diff --git a/client/src/components/organisms/JobsUser.tsx b/client/src/components/organisms/JobsUser.tsx index 691bb17..946348d 100644 --- a/client/src/components/organisms/JobsUser.tsx +++ b/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) => ( - + ) ) : '' diff --git a/client/src/routes/History.tsx b/client/src/routes/History.tsx index 213e242..1f4988b 100644 --- a/client/src/routes/History.tsx +++ b/client/src/routes/History.tsx @@ -17,7 +17,7 @@ class History extends Component { {!this.context.isLogged && }
Assets
-
Jobs
+
Compute Jobs
diff --git a/client/src/utils/getUserJobs.ts b/client/src/utils/getUserJobs.ts index c3aa6e9..01545c3 100644 --- a/client/src/utils/getUserJobs.ts +++ b/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;