diff --git a/client/src/components/molecules/JobTeaser.module.scss b/client/src/components/molecules/JobTeaser.module.scss index f39ce57..5002948 100644 --- a/client/src/components/molecules/JobTeaser.module.scss +++ b/client/src/components/molecules/JobTeaser.module.scss @@ -1,12 +1,11 @@ @import '../../styles/variables'; .assetList { - - color: $brand-grey-dark; - border-bottom: 1px solid $brand-grey-lighter; - padding-top: $spacer / 2; - padding-bottom: $spacer / 2; - + 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; @@ -14,7 +13,7 @@ } } -.listRow{ +.listRow { display: flex; justify-content: space-between; align-items: center; @@ -24,4 +23,3 @@ 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 2e0e93c..b5c354a 100644 --- a/client/src/components/molecules/JobTeaser.tsx +++ b/client/src/components/molecules/JobTeaser.tsx @@ -1,29 +1,31 @@ import React, { useEffect, useState, useContext } from 'react' -import { User } from '../../context'; -import moment from 'moment'; +import { User } from '../../context' +import moment from 'moment' import styles from './JobTeaser.module.scss' - +import Dotdotdot from 'react-dotdotdot' export default function JobTeaser({ job }: { job: any }) { - const { ocean } = useContext(User); + 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 { + 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) - - } catch (error) { console.log(error) } } getAsset() - }, [ocean,job.agreementId]) + }, [ocean, job.agreementId]) return (
@@ -37,10 +39,28 @@ export default function JobTeaser({ job }: { job: any }) {
-
Job status
-
{job.statusText}
+
Job status
+
{job.statusText}
+
+
+ {job.algorithmLogUrl ? ( + Algorithm log + ) : ( + '' + )} +
+
+ {job.resultsUrl ? ( + <> +
Output URL
+ {job.resultsUrl.map((result: string) => ( + {result.substring(0, 52)}... + ))} + + ) : ( + '' + )}
-
{job.resultsUrl}
) -} \ No newline at end of file +} diff --git a/client/src/components/organisms/AssetsLatest.module.scss b/client/src/components/organisms/AssetsLatest.module.scss index bba896b..20e5c55 100644 --- a/client/src/components/organisms/AssetsLatest.module.scss +++ b/client/src/components/organisms/AssetsLatest.module.scss @@ -2,7 +2,7 @@ .latestAssetsWrap { // full width break out of container - // margin-right: calc(-50vw + 50%); + // margin-right: calc(-50vw + 50%); } .latestAssets { diff --git a/client/src/components/organisms/JobsUser.tsx b/client/src/components/organisms/JobsUser.tsx index 946348d..a30a188 100644 --- a/client/src/components/organisms/JobsUser.tsx +++ b/client/src/components/organisms/JobsUser.tsx @@ -1,13 +1,11 @@ import React, { useEffect, useState } from 'react' import { getUserJobs } from '../../utils/getUserJobs' -import { User } from '../../context'; +import { User } from '../../context' import Spinner from '../atoms/Spinner' -import JobTeaser from '../molecules/JobTeaser'; - - +import JobTeaser from '../molecules/JobTeaser' export default function JobsUser() { - const { ocean, account } = React.useContext(User); + const { ocean, account } = React.useContext(User) const [jobList, setJobList] = useState([]) const [isLoading, setIsLoading] = useState(false) useEffect(() => { @@ -18,22 +16,19 @@ export default function JobsUser() { setIsLoading(false) } getJobs() - }, [account,ocean]) - + }, [account, ocean]) return ( <> - {isLoading ? + {isLoading ? ( - : jobList.length ? - jobList.map((job: any) => - ( - - - ) - ) : '' - } - - ) - -} \ No newline at end of file + ) : jobList.length ? ( + jobList + .reverse() + .map((job: any) => ) + ) : ( + '' + )} + + ) +} diff --git a/client/src/components/templates/Asset/AssetJob.module.scss b/client/src/components/templates/Asset/AssetJob.module.scss index 9dbca89..b0c47bf 100644 --- a/client/src/components/templates/Asset/AssetJob.module.scss +++ b/client/src/components/templates/Asset/AssetJob.module.scss @@ -63,3 +63,40 @@ color: $red; font-size: $font-size-small; } + +.message { + margin-bottom: $spacer; +} + +.success { + margin-top: $spacer / 1.5; + composes: message; + background: $green; + padding: $spacer / 1.5; + border-radius: $border-radius; + color: $brand-white; + font-weight: $font-weight-bold; + text-align: center; + + &, + a, + button { + color: $brand-white; + } + + a, + button { + transition: color .2s ease-out; + + &:hover, + &:focus { + color: $brand-pink; + transform: none; + } + } + + a { + display: inline-block; + margin-right: $spacer; + } +} diff --git a/client/src/components/templates/Asset/AssetJob.tsx b/client/src/components/templates/Asset/AssetJob.tsx index c0e3b3f..d54bfb7 100644 --- a/client/src/components/templates/Asset/AssetJob.tsx +++ b/client/src/components/templates/Asset/AssetJob.tsx @@ -29,7 +29,7 @@ export default function AssetsJobs({ ddo, ocean }: JobsProps) { const [computeType, setComputeType] = useState('') const [computeValue, setComputeValue] = useState({}) const [algorithmRawCode, setAlgorithmRawCode] = useState('') - + const [isPublished, setIsPublished] = useState(false) const [file, setFile] = useState(null) const onDrop = async (files: any) => { @@ -51,6 +51,7 @@ export default function AssetsJobs({ ddo, ocean }: JobsProps) { const startJob = async () => { try { setIsJobStarting(true) + setIsPublished(false) setError('') const accounts = await ocean.accounts.list() const ComputeOutput = { @@ -78,8 +79,11 @@ export default function AssetsJobs({ ddo, ocean }: JobsProps) { rawAlgorithmMeta, ComputeOutput ) + setIsPublished(true) + setFile(null) } catch (error) { setError('Failed to start job!') + console.log(error) } setIsJobStarting(false) } @@ -146,6 +150,16 @@ export default function AssetsJobs({ ddo, ocean }: JobsProps) { {error !== '' && (
{error}
)} + {isPublished ? ( +
+

Your job started!

+ +
+ ) : ( + '' + )} diff --git a/client/src/components/templates/Asset/index.tsx b/client/src/components/templates/Asset/index.tsx index a4a0569..de5c47f 100644 --- a/client/src/components/templates/Asset/index.tsx +++ b/client/src/components/templates/Asset/index.tsx @@ -63,13 +63,7 @@ class Asset extends Component { } public render() { - const { - metadata, - ddo, - error, - isLoading, - ocean - } = this.state + const { metadata, ddo, error, isLoading, ocean } = this.state const { main, additionalInformation } = metadata const hasError = error !== '' diff --git a/client/src/routes/History.tsx b/client/src/routes/History.tsx index 1f4988b..a1263d5 100644 --- a/client/src/routes/History.tsx +++ b/client/src/routes/History.tsx @@ -9,7 +9,7 @@ import JobsUser from '../components/organisms/JobsUser' class History extends Component { public static contextType = User - + public render() { return (