visual tweaks, refactoring

src/components/pages/History/ComputeDetails.module.css

@@ -0,0 +1,3 @@
+.title {
+  margin-bottom: calc(var(--spacer) / 4);
+}

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)
@@ -43,7 +47,7 @@ export default function ComputeDetailsModal({
       }
     }
     getDetails()
-  }, [ocean, status, account, isOpen])
+  }, [ocean, status, account, isOpen, computeJob, isFinished])
 
   return (
     <Modal
@@ -51,18 +55,22 @@ export default function ComputeDetailsModal({
       isOpen={isOpen}
       onToggleModal={onToggleModal}
     >
-      {isLoading ? (
+      <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.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) => {
@@ -70,7 +78,7 @@ export default function ComputeDetailsModal({
               })}{' '}
             </p>
           </>
-      )}
+        ))}
     </Modal>
   )
 }

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

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)

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

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

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

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 }) {