From c5eaaf8d454637c81113a0a5b868f3977a492c29 Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Wed, 4 Aug 2021 15:26:03 +0300 Subject: [PATCH] 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 --- ...css => AssetActionHistoryTable.module.css} | 17 +++-- .../organisms/AssetActionHistoryTable.tsx | 36 +++++++++ .../organisms/AssetActions/Compute/index.tsx | 12 ++- .../AssetActions/Pool/Transactions.tsx | 36 --------- .../organisms/AssetActions/Pool/index.tsx | 9 ++- .../pages/History/ComputeJobs/index.tsx | 75 ++++++++++++++----- 6 files changed, 121 insertions(+), 64 deletions(-) rename src/components/organisms/{AssetActions/Pool/Transactions.module.css => AssetActionHistoryTable.module.css} (78%) create mode 100644 src/components/organisms/AssetActionHistoryTable.tsx delete mode 100644 src/components/organisms/AssetActions/Pool/Transactions.tsx diff --git a/src/components/organisms/AssetActions/Pool/Transactions.module.css b/src/components/organisms/AssetActionHistoryTable.module.css similarity index 78% rename from src/components/organisms/AssetActions/Pool/Transactions.module.css rename to src/components/organisms/AssetActionHistoryTable.module.css index a9e4e1eb9..20f1fd78e 100644 --- a/src/components/organisms/AssetActions/Pool/Transactions.module.css +++ b/src/components/organisms/AssetActionHistoryTable.module.css @@ -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; } diff --git a/src/components/organisms/AssetActionHistoryTable.tsx b/src/components/organisms/AssetActionHistoryTable.tsx new file mode 100644 index 000000000..5e3a86b83 --- /dev/null +++ b/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 ( +
+ {/* TODO: onClick on h3 is nasty but we're in a hurry */} +

+ {`${title} `} + +

+ {open === true && children} +
+ ) +} diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx index ec32d2acf..f8bb95943 100644 --- a/src/components/organisms/AssetActions/Compute/index.tsx +++ b/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 = () => ( - - {open === true && ( - - )} - - ) -} diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx index cb26f3af9..5079e1fd0 100644 --- a/src/components/organisms/AssetActions/Pool/index.tsx +++ b/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 { )} - {accountId && } + {accountId && ( + + + + )} )} diff --git a/src/components/pages/History/ComputeJobs/index.tsx b/src/components/pages/History/ComputeJobs/index.tsx index 8d3ea9bed..ae6c31899 100644 --- a/src/components/pages/History/ComputeJobs/index.tsx +++ b/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([]) + 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 ? ( <> - - + {jobs.length <= 0 || minimal || ( + + )}