From 3c1e8f1e047383fa1b9121f4173eb8163a1b6c7e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 22 Oct 2020 14:31:34 +0200
Subject: [PATCH] tweak job output

---
 .../pages/History/ComputeDetails.tsx          | 37 +++++++++++++------
 src/components/pages/History/ComputeJobs.tsx  |  1 -
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/History/ComputeDetails.tsx b/src/components/pages/History/ComputeDetails.tsx
index f7bca49f4..a4023f9ef 100644
--- a/src/components/pages/History/ComputeDetails.tsx
+++ b/src/components/pages/History/ComputeDetails.tsx
@@ -8,6 +8,7 @@ import Time from '../../atoms/Time'
 import shortid from 'shortid'
 import styles from './ComputeDetails.module.css'
 import { Status } from './ComputeJobs'
+import { ListItem } from 'components/atoms/Lists'
 
 export default function ComputeDetailsModal({
   computeJob,
@@ -58,25 +59,39 @@ export default function ComputeDetailsModal({
       <h3 className={styles.title}>{computeJob.assetName}</h3>
       <p>
         Created on <Time date={computeJob.dateCreated} isUnix />
+        {computeJob.dateFinished && (
+          <>
+            <br />
+            Finished on <Time date={computeJob.dateFinished} isUnix />
+          </>
+        )}
       </p>
       <Status>{computeJob.statusText}</Status>
-      {computeJob.dateFinished && (
-        <p>
-          Finished on <Time date={computeJob.dateFinished} isUnix />
-        </p>
-      )}
 
       {isFinished &&
         (isLoading ? (
           <Loader />
         ) : (
           <>
-            <p>{computeJob.algorithmLogUrl}</p>
-            <p>
-              {computeJob.resultsUrls?.map((url) => {
-                return <span key={shortid.generate()}>{url}</span>
-              })}{' '}
-            </p>
+            <ul>
+              <ListItem>
+                <a
+                  href={computeJob.algorithmLogUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  View Log
+                </a>
+              </ListItem>
+
+              {computeJob.resultsUrls?.map((url, i) => (
+                <ListItem key={shortid.generate()}>
+                  <a href={url} target="_blank" rel="noreferrer">
+                    View Result {i}
+                  </a>
+                </ListItem>
+              ))}
+            </ul>
           </>
         ))}
     </Modal>
diff --git a/src/components/pages/History/ComputeJobs.tsx b/src/components/pages/History/ComputeJobs.tsx
index e8c0a4197..8470e623c 100644
--- a/src/components/pages/History/ComputeJobs.tsx
+++ b/src/components/pages/History/ComputeJobs.tsx
@@ -4,7 +4,6 @@ import DataTable from 'react-data-table-component'
 import Time from '../../atoms/Time'
 import styles from './ComputeJobs.module.css'
 import Loader from '../../atoms/Loader'
-import Tooltip from '../../atoms/Tooltip'
 import Button from '../../atoms/Button'
 import ComputeDetails from './ComputeDetails'
 import { ComputeJobMetaData } from '../../../@types/ComputeJobMetaData'