job styling

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;
 }
-

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 (
         <article className={styles.assetList}>
@@ -37,10 +39,28 @@ export default function JobTeaser({ job }: { job: any }) {
                 </div>
             </div>
             <div className={styles.listRow}>
-            <div>Job status</div>
-            <div>{job.statusText}</div>
+                <div>Job status</div>
+                <div>{job.statusText}</div>
+            </div>
+            <div>
+                {job.algorithmLogUrl ? (
+                    <a href={job.algorithmLogUrl}> Algorithm log</a>
+                ) : (
+                    ''
+                )}
+            </div>
+            <div>
+                {job.resultsUrl ? (
+                    <>
+                        <div>Output URL</div>
+                        {job.resultsUrl.map((result: string) => (
+                            <a href={result}> {result.substring(0, 52)}...</a>
+                        ))}
+                    </>
+                ) : (
+                    ''
+                )}
             </div>
-            <div>{job.resultsUrl}</div>
         </article>
     )
-}
+}

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 {

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<any[]>([])
     const [isLoading, setIsLoading] = useState(false)
     useEffect(() => {
@@ -18,22 +16,19 @@ export default function JobsUser() {
             setIsLoading(false)
         }
         getJobs()
-    }, [account,ocean])
-
+    }, [account, ocean])
 
     return (
         <>
-            {isLoading ?
+            {isLoading ? (
                 <Spinner />
-                : jobList.length ?
-                    jobList.map((job: any) => 
-                        (
-                            <JobTeaser key={job.jobId} job={job} />
-                           
-                        )
-                    ) : ''
-            }
-    </>
-                )
-
-}
+            ) : jobList.length ? (
+                jobList
+                    .reverse()
+                    .map((job: any) => <JobTeaser key={job.jobId} job={job} />)
+            ) : (
+                ''
+            )}
+        </>
+    )
+}

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;
+    }
+}

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 !== '' && (
                         <div className={styles.error}>{error}</div>
                     )}
+                    {isPublished ? (
+                        <div className={styles.success}>
+                            <p>Your job started!</p>
+                            <Button link to={'/history/'}>
+                                Watch the progress in the history page.
+                            </Button>
+                        </div>
+                    ) : (
+                        ''
+                    )}
                 </div>
             </div>
         </>

client/src/components/templates/Asset/index.tsx

@@ -63,13 +63,7 @@ class Asset extends Component<AssetProps, AssetState> {
     }
 
     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 !== ''

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 (
             <Route title="History">