From f4a31ef393c2ea02f179720b48e6b3a4ecbaf8af Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 22 Oct 2020 14:09:42 +0200
Subject: [PATCH] visual tweaks, refactoring

---
 .../pages/History/ComputeDetails.module.css   |  3 ++
 ...uteDetailsModal.tsx => ComputeDetails.tsx} | 54 +++++++++++--------
 .../pages/History/ComputeJobs.module.css      |  8 +++
 src/components/pages/History/ComputeJobs.tsx  | 44 +++++++--------
 src/components/pages/History/Empty.module.css |  7 +++
 src/components/pages/History/Empty.tsx        |  6 +++
 .../pages/History/PoolTransactions.module.css |  8 ---
 .../pages/History/PoolTransactions.tsx        | 12 +++--
 8 files changed, 85 insertions(+), 57 deletions(-)
 create mode 100644 src/components/pages/History/ComputeDetails.module.css
 rename src/components/pages/History/{ComputeDetailsModal.tsx => ComputeDetails.tsx} (54%)
 create mode 100644 src/components/pages/History/ComputeJobs.module.css
 create mode 100644 src/components/pages/History/Empty.module.css
 create mode 100644 src/components/pages/History/Empty.tsx

diff --git a/src/components/pages/History/ComputeDetails.module.css b/src/components/pages/History/ComputeDetails.module.css
new file mode 100644
index 000000000..7fbc3bc43
--- /dev/null
+++ b/src/components/pages/History/ComputeDetails.module.css
@@ -0,0 +1,3 @@
+.title {
+  margin-bottom: calc(var(--spacer) / 4);
+}
diff --git a/src/components/pages/History/ComputeDetailsModal.tsx b/src/components/pages/History/ComputeDetails.tsx
similarity index 54%
rename from src/components/pages/History/ComputeDetailsModal.tsx
rename to src/components/pages/History/ComputeDetails.tsx
index 12e125444..f7bca49f4 100644
--- a/src/components/pages/History/ComputeDetailsModal.tsx
+++ b/src/components/pages/History/ComputeDetails.tsx
@@ -3,9 +3,11 @@ import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Loader from '../../atoms/Loader'
 import Modal from '../../atoms/Modal'
-import { ComputeJobMetaData } from '@types/ComputeJobMetaData'
+import { ComputeJobMetaData } from '../../../@types/ComputeJobMetaData'
 import Time from '../../atoms/Time'
 import shortid from 'shortid'
+import styles from './ComputeDetails.module.css'
+import { Status } from './ComputeJobs'
 
 export default function ComputeDetailsModal({
   computeJob,
@@ -19,9 +21,11 @@ export default function ComputeDetailsModal({
   const { ocean, status, account } = useOcean()
   const [isLoading, setIsLoading] = useState(false)
 
+  const isFinished = computeJob.dateFinished !== null
+
   useEffect(() => {
     async function getDetails() {
-      if (!account || !ocean || !computeJob || !isOpen) return
+      if (!account || !ocean || !computeJob || !isOpen || !isFinished) return
 
       try {
         setIsLoading(true)
@@ -32,7 +36,7 @@ export default function ComputeDetailsModal({
         )
         if (job && job.length > 0) {
           computeJob.algorithmLogUrl = job[0].algorithmLogUrl
-          //hack because ComputeJob returns resultsUrl instead of resultsUrls, issue created already
+          // hack because ComputeJob returns resultsUrl instead of resultsUrls, issue created already
           computeJob.resultsUrls =
             (job[0] as any).resultsUrl !== '' ? (job[0] as any).resultsUrl : []
         }
@@ -43,7 +47,7 @@ export default function ComputeDetailsModal({
       }
     }
     getDetails()
-  }, [ocean, status, account, isOpen])
+  }, [ocean, status, account, isOpen, computeJob, isFinished])
 
   return (
     <Modal
@@ -51,26 +55,30 @@ export default function ComputeDetailsModal({
       isOpen={isOpen}
       onToggleModal={onToggleModal}
     >
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <>
-          <p>{computeJob.assetName}</p>
-          <p>
-            <Time date={computeJob.dateCreated} isUnix />
-          </p>
-          <p>
-            <Time date={computeJob.dateFinished} isUnix />
-          </p>
-          <p>{computeJob.statusText}</p>
-          <p>{computeJob.algorithmLogUrl}</p>
-          <p>
-            {computeJob.resultsUrls?.map((url) => {
-              return <span key={shortid.generate()}>{url}</span>
-            })}{' '}
-          </p>
-        </>
+      <h3 className={styles.title}>{computeJob.assetName}</h3>
+      <p>
+        Created on <Time date={computeJob.dateCreated} 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>
+          </>
+        ))}
     </Modal>
   )
 }
diff --git a/src/components/pages/History/ComputeJobs.module.css b/src/components/pages/History/ComputeJobs.module.css
new file mode 100644
index 000000000..1e648c17b
--- /dev/null
+++ b/src/components/pages/History/ComputeJobs.module.css
@@ -0,0 +1,8 @@
+.status {
+  text-transform: uppercase;
+  color: var(--color-secondary);
+}
+
+.table {
+  composes: table from './PoolTransactions.module.css';
+}
diff --git a/src/components/pages/History/ComputeJobs.tsx b/src/components/pages/History/ComputeJobs.tsx
index a734fc137..73efd6cd7 100644
--- a/src/components/pages/History/ComputeJobs.tsx
+++ b/src/components/pages/History/ComputeJobs.tsx
@@ -2,24 +2,26 @@ import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import DataTable from 'react-data-table-component'
 import Time from '../../atoms/Time'
-import styles from './PoolTransactions.module.css'
+import styles from './ComputeJobs.module.css'
 import Loader from '../../atoms/Loader'
 import Tooltip from '../../atoms/Tooltip'
 import Button from '../../atoms/Button'
-import ComputeDetailsModal from './ComputeDetailsModal'
-import { ComputeJobMetaData } from '@types/ComputeJobMetaData'
+import ComputeDetails from './ComputeDetails'
+import { ComputeJobMetaData } from '../../../@types/ComputeJobMetaData'
 import { Link } from 'gatsby'
 import { Logger } from '@oceanprotocol/lib'
+import Empty from './Empty'
+import Dotdotdot from 'react-dotdotdot'
 
 function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement {
   const [isDialogOpen, setIsDialogOpen] = useState(false)
 
   return (
     <>
-      <Button name="Details" onClick={() => setIsDialogOpen(true)}>
-        Details
+      <Button style="text" size="small" onClick={() => setIsDialogOpen(true)}>
+        Show Details
       </Button>
-      <ComputeDetailsModal
+      <ComputeDetails
         computeJob={row}
         isOpen={isDialogOpen}
         onToggleModal={() => setIsDialogOpen(false)}
@@ -28,15 +30,25 @@ function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement {
   )
 }
 
-function Empty() {
-  return <div className={styles.empty}>No results found</div>
+export function Status({ children }: { children: string }): ReactElement {
+  return <div className={styles.status}>{children}</div>
 }
 
 const columns = [
+  {
+    name: 'Data Set',
+    selector: function getAssetRow(row: ComputeJobMetaData) {
+      return (
+        <Dotdotdot clamp={2}>
+          <Link to={`/asset/${row.did}`}>{row.assetName}</Link>
+        </Dotdotdot>
+      )
+    }
+  },
   {
     name: 'Created',
     selector: function getTimeRow(row: ComputeJobMetaData) {
-      return <Time date={row.dateCreated} isUnix />
+      return <Time date={row.dateCreated} isUnix relative />
     }
   },
   {
@@ -45,20 +57,10 @@ const columns = [
       return <Time date={row.dateFinished} isUnix />
     }
   },
-  {
-    name: 'Name',
-    selector: function getAssetRow(row: ComputeJobMetaData) {
-      return (
-        <Tooltip content={row.assetName}>
-          <Link to={`/asset/${row.did}`}>{row.assetName}</Link>{' '}
-        </Tooltip>
-      )
-    }
-  },
   {
     name: 'Status',
     selector: function getStatus(row: ComputeJobMetaData) {
-      return <>{row.statusText}</>
+      return <Status>{row.statusText}</Status>
     }
   },
   {
@@ -90,7 +92,7 @@ export default function ComputeJobs(): ReactElement {
           'compute',
           100
         )
-        let jobs: ComputeJobMetaData[] = []
+        const jobs: ComputeJobMetaData[] = []
 
         for (let i = 0; i < orderHistory.length; i++) {
           const assetName = await getTitle(orderHistory[i].did)
diff --git a/src/components/pages/History/Empty.module.css b/src/components/pages/History/Empty.module.css
new file mode 100644
index 000000000..37da6b45b
--- /dev/null
+++ b/src/components/pages/History/Empty.module.css
@@ -0,0 +1,7 @@
+.empty {
+  width: 100%;
+  text-align: left;
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  font-style: italic;
+}
diff --git a/src/components/pages/History/Empty.tsx b/src/components/pages/History/Empty.tsx
new file mode 100644
index 000000000..6b06bca14
--- /dev/null
+++ b/src/components/pages/History/Empty.tsx
@@ -0,0 +1,6 @@
+import React, { ReactElement } from 'react'
+import styles from './Empty.module.css'
+
+export default function Empty(): ReactElement {
+  return <div className={styles.empty}>No results found</div>
+}
diff --git a/src/components/pages/History/PoolTransactions.module.css b/src/components/pages/History/PoolTransactions.module.css
index 1bb347b03..32f41b6af 100644
--- a/src/components/pages/History/PoolTransactions.module.css
+++ b/src/components/pages/History/PoolTransactions.module.css
@@ -5,11 +5,3 @@
 .table [role='columnheader'] {
   font-weight: var(--font-weight-bold);
 }
-
-.empty {
-  width: 100%;
-  text-align: left;
-  color: var(--color-secondary);
-  font-size: var(--font-size-small);
-  font-style: italic;
-}
diff --git a/src/components/pages/History/PoolTransactions.tsx b/src/components/pages/History/PoolTransactions.tsx
index 1482662f9..1d6d94970 100644
--- a/src/components/pages/History/PoolTransactions.tsx
+++ b/src/components/pages/History/PoolTransactions.tsx
@@ -7,14 +7,16 @@ import DataTable from 'react-data-table-component'
 import EtherscanLink from '../../atoms/EtherscanLink'
 import Time from '../../atoms/Time'
 import styles from './PoolTransactions.module.css'
+import Empty from './Empty'
+import Dotdotdot from 'react-dotdotdot'
 
 function AssetTitle({ did }: { did: string }): ReactElement {
   const { title } = useMetadata(did)
-  return <Link to={`/asset/${did}`}>{title || did}</Link>
-}
-
-function Empty() {
-  return <div className={styles.empty}>No results found</div>
+  return (
+    <Dotdotdot clamp={2}>
+      <Link to={`/asset/${did}`}>{title || did}</Link>
+    </Dotdotdot>
+  )
 }
 
 function Title({ row }: { row: PoolTransaction }) {