Show compute jobs history in asset detail page (#735)

* displayed compute jobs on asset detail page

* filter compute jobs by datatoken address

* lint error fix

* changed query name for selecting compute orders by datatoken

* renamed Transactions component and moved it outside Pool directory

* style compose path fix

* query just one subgraph based on ddo chainId

* fixed displayed columns, added Finished column, table scroll fix

* changed AssetActionsHistoryTable titles

* made tabel cell width smaller

src/components/organisms/AssetActionHistoryTable.module.css

@@ -1,5 +1,5 @@
-.transactions {
+.actions {
-  composes: container from './index.module.css';
+  composes: container from './AssetActions/Pool/index.module.css';
   border-top: 1px solid var(--border-color);
   margin-top: calc(var(--spacer) / 1.5);
   padding: calc(var(--spacer) / 1.5);
@@ -7,12 +7,12 @@
   margin-bottom: -2rem;
 }
 
-.transactions [class*='rdt_Pagination'] {
+.actions [class*='rdt_Pagination'] {
   margin-bottom: -1rem;
 }
 
 .title {
-  composes: title from './index.module.css';
+  composes: title from './AssetActions/Pool/index.module.css';
   margin-bottom: 0;
   display: flex;
   align-items: center;
@@ -44,7 +44,7 @@
   transform: rotate(180deg);
 }
 
-.transactions [class*='Table-module--table'] {
+.actions [class*='Table-module--table'] {
   /* 
     react-data-table-component sets a default width: 100% 
     which often leads to unneccessary overflows. Following lines make
@@ -52,6 +52,9 @@
     when enough space is available. But it also destroys overflow table on narrow
     viewports.
   */
-  width: fit-content !important;
+  width: 100%;
-  min-width: 100%;
+}
+
+.actions [class*='TableCell'] {
+  width: 140px;
 }

src/components/organisms/AssetActionHistoryTable.tsx

@@ -0,0 +1,36 @@
+import React, { ReactElement, useState } from 'react'
+import Button from '../atoms/Button'
+import styles from './AssetActionHistoryTable.module.css'
+import { ReactComponent as Caret } from '../../images/caret.svg'
+import { ReactNode } from 'react-markdown'
+
+export default function AssetActionHistoryTable({
+  title,
+  children
+}: {
+  title: string
+  children: ReactNode
+}): ReactElement {
+  const [open, setOpen] = useState(false)
+  function handleClick() {
+    setOpen(!open)
+  }
+
+  return (
+    <div className={`${styles.actions} ${open === true ? styles.open : ''}`}>
+      {/* TODO: onClick on h3 is nasty but we're in a hurry */}
+      <h3 className={styles.title} onClick={handleClick}>
+        {`${title} `}
+        <Button
+          style="text"
+          size="small"
+          onClick={handleClick}
+          className={styles.toggle}
+        >
+          {open ? 'Hide' : 'Show'} <Caret />
+        </Button>
+      </h3>
+      {open === true && children}
+    </div>
+  )
+}

src/components/organisms/AssetActions/Compute/index.tsx

@@ -38,7 +38,8 @@ import { secondsToString } from '../../../../utils/metadata'
 import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
 import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
 import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
-import { chainIds } from '../../../../../app.config'
+import AssetActionHistoryTable from '../../AssetActionHistoryTable'
+import ComputeJobs from '../../../pages/History/ComputeJobs'
 
 const SuccessAction = () => (
   <Button style="text" to="/history?defaultTab=ComputeJobs" size="small">
@@ -473,6 +474,15 @@ export default function Compute({
           />
         )}
       </footer>
+      {accountId && (
+        <AssetActionHistoryTable title="Your Compute Jobs">
+          <ComputeJobs
+            minimal
+            assetDTAddress={ddo.dataTokenInfo.address}
+            chainId={ddo.chainId}
+          />
+        </AssetActionHistoryTable>
+      )}
     </>
   )
 }

src/components/organisms/AssetActions/Pool/Transactions.tsx

@@ -1,36 +0,0 @@
-import React, { ReactElement, useState } from 'react'
-import Button from '../../../atoms/Button'
-import PoolTransactions from '../../../molecules/PoolTransactions'
-import styles from './Transactions.module.css'
-import { ReactComponent as Caret } from '../../../../images/caret.svg'
-import { useAsset } from '../../../../providers/Asset'
-
-export default function Transactions(): ReactElement {
-  const [open, setOpen] = useState(false)
-  const { price } = useAsset()
-  function handleClick() {
-    setOpen(!open)
-  }
-
-  return (
-    <div
-      className={`${styles.transactions} ${open === true ? styles.open : ''}`}
-    >
-      {/* TODO: onClick on h3 is nasty but we're in a hurry */}
-      <h3 className={styles.title} onClick={handleClick}>
-        Your Pool Transactions{' '}
-        <Button
-          style="text"
-          size="small"
-          onClick={handleClick}
-          className={styles.toggle}
-        >
-          {open ? 'Hide' : 'Show'} <Caret />
-        </Button>
-      </h3>
-      {open === true && (
-        <PoolTransactions poolAddress={price?.address} minimal />
-      )}
-    </div>
-  )
-}

src/components/organisms/AssetActions/Pool/index.tsx

@@ -12,13 +12,14 @@ import Token from './Token'
 import TokenList from './TokenList'
 import { graphql, useStaticQuery } from 'gatsby'
 import { PoolBalance } from '../../../../@types/TokenBalance'
-import Transactions from './Transactions'
+import AssetActionHistoryTable from '../../AssetActionHistoryTable'
 import Graph from './Graph'
 import { useAsset } from '../../../../providers/Asset'
 import { gql, OperationResult } from 'urql'
 import { PoolLiquidity } from '../../../../@types/apollo/PoolLiquidity'
 import { useOcean } from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
+import PoolTransactions from '../../../molecules/PoolTransactions'
 import { fetchData, getQueryContext } from '../../../../utils/subgraph'
 
 const REFETCH_INTERVAL = 5000
@@ -383,7 +384,11 @@ export default function Pool(): ReactElement {
             )}
           </div>
 
-          {accountId && <Transactions />}
+          {accountId && (
+            <AssetActionHistoryTable title="Your Pool Transactions">
+              <PoolTransactions poolAddress={price?.address} minimal />
+            </AssetActionHistoryTable>
+          )}
         </>
       )}
     </>

src/components/pages/History/ComputeJobs/index.tsx

@@ -46,6 +46,27 @@ const getComputeOrders = gql`
   }
 `
 
+const getComputeOrdersByDatatokenAddress = gql`
+  query ComputeOrdersByDatatokenAddress(
+    $user: String!
+    $datatokenAddress: String!
+  ) {
+    tokenOrders(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { payer: $user, datatokenId: $datatokenAddress }
+    ) {
+      id
+      serviceId
+      datatokenId {
+        address
+      }
+      tx
+      timestamp
+    }
+  }
+`
+
 interface TokenOrder {
   id: string
   serviceId: number
@@ -127,13 +148,23 @@ async function getAssetMetadata(
   return result.results
 }
 
-export default function ComputeJobs(): ReactElement {
+export default function ComputeJobs({
+  minimal,
+  assetDTAddress,
+  chainId
+}: {
+  minimal?: boolean
+  assetDTAddress?: string
+  chainId?: number
+}): ReactElement {
   const { ocean, account, config, connect } = useOcean()
   const { accountId, networkId } = useWeb3()
-  const { chainIds } = useUserPreferences()
   const [isLoading, setIsLoading] = useState(true)
+  const { chainIds } = useUserPreferences()
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
 
+  const columnsMinimal = [columns[4], columns[5], columns[3]]
+
   useEffect(() => {
     async function initOcean() {
       const oceanInitialConfig = getOceanConfig(networkId)
@@ -147,11 +178,18 @@ export default function ComputeJobs(): ReactElement {
   async function getJobs() {
     if (!accountId) return
     setIsLoading(true)
-    const variables = { user: accountId?.toLowerCase() }
+    const variables = assetDTAddress
+      ? {
+          user: accountId?.toLowerCase(),
+          datatokenAddress: assetDTAddress.toLowerCase()
+        }
+      : {
+          user: accountId?.toLowerCase()
+        }
     const result = await fetchDataForMultipleChains(
-      getComputeOrders,
+      assetDTAddress ? getComputeOrdersByDatatokenAddress : getComputeOrders,
       variables,
-      chainIds
+      assetDTAddress ? [chainId] : chainIds
     )
     let data: TokenOrder[] = []
     for (let i = 0; i < result.length; i++) {
@@ -293,20 +331,21 @@ export default function ComputeJobs(): ReactElement {
 
   return accountId ? (
     <>
-      <Button
+      {jobs.length <= 0 || minimal || (
-        style="text"
+        <Button
-        size="small"
+          style="text"
-        title="Refresh compute jobs"
+          size="small"
-        onClick={() => getJobs()}
+          title="Refresh compute jobs"
-        disabled={isLoading}
+          onClick={() => getJobs()}
-        className={styles.refresh}
+          disabled={isLoading}
-      >
+          className={styles.refresh}
-        <Refresh />
+        >
-        Refresh
+          <Refresh />
-      </Button>
+          Refresh
-
+        </Button>
+      )}
       <Table
-        columns={columns}
+        columns={minimal ? columnsMinimal : columns}
         data={jobs}
         isLoading={isLoading}
         defaultSortField="row.dateCreated"