mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
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
This commit is contained in:
parent
46cf119afe
commit
c5eaaf8d45
@ -1,5 +1,5 @@
|
||||
.transactions {
|
||||
composes: container from './index.module.css';
|
||||
.actions {
|
||||
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;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions [class*='TableCell'] {
|
||||
width: 140px;
|
||||
}
|
36
src/components/organisms/AssetActionHistoryTable.tsx
Normal file
36
src/components/organisms/AssetActionHistoryTable.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
@ -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,6 +331,7 @@ export default function ComputeJobs(): ReactElement {
|
||||
|
||||
return accountId ? (
|
||||
<>
|
||||
{jobs.length <= 0 || minimal || (
|
||||
<Button
|
||||
style="text"
|
||||
size="small"
|
||||
@ -304,9 +343,9 @@ export default function ComputeJobs(): ReactElement {
|
||||
<Refresh />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
)}
|
||||
<Table
|
||||
columns={columns}
|
||||
columns={minimal ? columnsMinimal : columns}
|
||||
data={jobs}
|
||||
isLoading={isLoading}
|
||||
defaultSortField="row.dateCreated"
|
||||
|
Loading…
Reference in New Issue
Block a user