From c2d03f94ac3d9101b83219c333dfc1e101877c7d Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Mon, 17 May 2021 17:04:17 +0300 Subject: [PATCH] Refetch compute status (#558) * WIP * use interval to refetch every minute * fixes * get jobs after verifications * refetch jobs on button click * fix loading when no jobs, hide refresh button then no jobs * button UI changes * styling updates Co-authored-by: Norbi Co-authored-by: Matthias Kretschmann --- .../History/ComputeJobs/index.module.css | 22 ++ .../pages/History/ComputeJobs/index.tsx | 245 ++++++++++-------- 2 files changed, 155 insertions(+), 112 deletions(-) diff --git a/src/components/pages/History/ComputeJobs/index.module.css b/src/components/pages/History/ComputeJobs/index.module.css index 1a04d262a..6bd78e0f5 100644 --- a/src/components/pages/History/ComputeJobs/index.module.css +++ b/src/components/pages/History/ComputeJobs/index.module.css @@ -2,3 +2,25 @@ text-transform: uppercase; color: var(--color-secondary); } + +.computeTableContainer { + display: flex; + align-items: center; +} + +.refresh, +.refresh:first-child { + margin-bottom: calc(var(--spacer) / 2); + margin-left: auto; + margin-right: auto; + display: block; +} + +.refresh svg { + display: inline-block; + fill: currentColor; + width: 1em; + height: 1em; + margin-right: calc(var(--spacer) / 6); + margin-bottom: -0.1rem; +} diff --git a/src/components/pages/History/ComputeJobs/index.tsx b/src/components/pages/History/ComputeJobs/index.tsx index bdea51aca..765a48171 100644 --- a/src/components/pages/History/ComputeJobs/index.tsx +++ b/src/components/pages/History/ComputeJobs/index.tsx @@ -6,6 +6,7 @@ import { DDO, Logger, Service, Provider } from '@oceanprotocol/lib' import { ComputeJobMetaData } from '../../../../@types/ComputeJobMetaData' import Dotdotdot from 'react-dotdotdot' import Table from '../../../atoms/Table' +import Button from '../../../atoms/Button' import { useOcean } from '../../../../providers/Ocean' import { gql, useQuery } from '@apollo/client' import { useWeb3 } from '../../../../providers/Web3' @@ -13,8 +14,9 @@ import { queryMetadata } from '../../../../utils/aquarius' import axios, { CancelToken } from 'axios' import { ComputeOrders } from '../../../../@types/apollo/ComputeOrders' import Details from './Details' -import styles from './index.module.css' import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute' +import { ReactComponent as Refresh } from '../../../../images/refresh.svg' +import styles from './index.module.css' const getComputeOrders = gql` query ComputeOrders($user: String!) { @@ -99,7 +101,7 @@ async function getAssetMetadata( export default function ComputeJobs(): ReactElement { const { ocean, account, config } = useOcean() const { accountId } = useWeb3() - const [isLoading, setIsLoading] = useState(false) + const [isLoading, setIsLoading] = useState(true) const [jobs, setJobs] = useState([]) const { data } = useQuery(getComputeOrders, { variables: { @@ -107,139 +109,158 @@ export default function ComputeJobs(): ReactElement { } }) - useEffect(() => { - if (data === undefined || !config?.metadataCacheUri) return + async function getJobs() { + if (!ocean || !account) return - async function getJobs() { - if (!ocean || !account) return + setIsLoading(true) - setIsLoading(true) + const dtList = [] + const computeJobs: ComputeJobMetaData[] = [] + for (let i = 0; i < data.tokenOrders.length; i++) { + dtList.push(data.tokenOrders[i].datatokenId.address) + } + const queryDtList = JSON.stringify(dtList) + .replace(/,/g, ' ') + .replace(/"/g, '') + .replace(/(\[|\])/g, '') - const dtList = [] - const computeJobs: ComputeJobMetaData[] = [] + try { + const source = axios.CancelToken.source() + const assets = await getAssetMetadata( + queryDtList, + config.metadataCacheUri, + source.token + ) + const providers: Provider[] = [] + const serviceEndpoints: string[] = [] for (let i = 0; i < data.tokenOrders.length; i++) { - dtList.push(data.tokenOrders[i].datatokenId.address) + try { + const did = web3.utils + .toChecksumAddress(data.tokenOrders[i].datatokenId.address) + .replace('0x', 'did:op:') + + const ddo = assets.filter((x) => x.id === did)[0] + + if (!ddo) continue + + const service = ddo.service.filter( + (x: Service) => x.index === data.tokenOrders[i].serviceId + )[0] + + if (!service || service.type !== 'compute') continue + const { serviceEndpoint } = service + + const wasProviderQueried = + serviceEndpoints.filter((x) => x === serviceEndpoint).length > 0 + + if (wasProviderQueried) continue + serviceEndpoints.push(serviceEndpoint) + } catch (err) { + Logger.error(err) + } } - const queryDtList = JSON.stringify(dtList) - .replace(/,/g, ' ') - .replace(/"/g, '') - .replace(/(\[|\])/g, '') try { - const source = axios.CancelToken.source() - const assets = await getAssetMetadata( - queryDtList, - config.metadataCacheUri, - source.token - ) - const providers: Provider[] = [] - const serviceEndpoints: string[] = [] - for (let i = 0; i < data.tokenOrders.length; i++) { - try { - const did = web3.utils - .toChecksumAddress(data.tokenOrders[i].datatokenId.address) - .replace('0x', 'did:op:') + for (let i = 0; i < serviceEndpoints.length; i++) { + const instanceConfig = { + config, + web3: config.web3Provider, + logger: Logger, + ocean: ocean + } + const provider = await Provider.getInstance(instanceConfig) + await provider.setBaseUrl(serviceEndpoints[i]) + const hasSameCompute = + providers.filter( + (x) => x.computeAddress === provider.computeAddress + ).length > 0 + if (!hasSameCompute) providers.push(provider) + } + } catch (err) { + Logger.error(err) + } + for (let i = 0; i < providers.length; i++) { + try { + const providerComputeJobs = (await providers[i].computeStatus( + '', + account, + undefined, + undefined, + false + )) as ComputeJob[] + // means the provider uri is not good, so we ignore it and move on + if (!providerComputeJobs) continue + providerComputeJobs.sort((a, b) => { + if (a.dateCreated > b.dateCreated) { + return -1 + } + if (a.dateCreated < b.dateCreated) { + return 1 + } + return 0 + }) + + for (let j = 0; j < providerComputeJobs.length; j++) { + const job = providerComputeJobs[j] + const did = job.inputDID[0] const ddo = assets.filter((x) => x.id === did)[0] if (!ddo) continue - - const service = ddo.service.filter( - (x: Service) => x.index === data.tokenOrders[i].serviceId + const serviceMetadata = ddo.service.filter( + (x: Service) => x.type === 'metadata' )[0] - if (!service || service.type !== 'compute') continue - const { serviceEndpoint } = service - - const wasProviderQueried = - serviceEndpoints.filter((x) => x === serviceEndpoint).length > 0 - - if (wasProviderQueried) continue - serviceEndpoints.push(serviceEndpoint) - } catch (err) { - Logger.error(err) - } - } - - try { - for (let i = 0; i < serviceEndpoints.length; i++) { - const instanceConfig = { - config, - web3: config.web3Provider, - logger: Logger, - ocean: ocean + const compJob: ComputeJobMetaData = { + ...job, + assetName: serviceMetadata.attributes.main.name, + assetDtSymbol: ddo.dataTokenInfo.symbol } - const provider = await Provider.getInstance(instanceConfig) - await provider.setBaseUrl(serviceEndpoints[i]) - const hasSameCompute = - providers.filter( - (x) => x.computeAddress === provider.computeAddress - ).length > 0 - if (!hasSameCompute) providers.push(provider) + computeJobs.push(compJob) } } catch (err) { Logger.error(err) } - for (let i = 0; i < providers.length; i++) { - try { - const providerComputeJobs = (await providers[i].computeStatus( - '', - account, - undefined, - undefined, - false - )) as ComputeJob[] - - // means the provider uri is not good, so we ignore it and move on - if (!providerComputeJobs) continue - providerComputeJobs.sort((a, b) => { - if (a.dateCreated > b.dateCreated) { - return -1 - } - if (a.dateCreated < b.dateCreated) { - return 1 - } - return 0 - }) - - for (let j = 0; j < providerComputeJobs.length; j++) { - const job = providerComputeJobs[j] - const did = job.inputDID[0] - const ddo = assets.filter((x) => x.id === did)[0] - - if (!ddo) continue - const serviceMetadata = ddo.service.filter( - (x: Service) => x.type === 'metadata' - )[0] - - const compJob: ComputeJobMetaData = { - ...job, - assetName: serviceMetadata.attributes.main.name, - assetDtSymbol: ddo.dataTokenInfo.symbol - } - computeJobs.push(compJob) - } - } catch (err) { - Logger.error(err) - } - } - setJobs(computeJobs) - } catch (error) { - Logger.log(error.message) - } finally { - setIsLoading(false) } + setJobs(computeJobs) + } catch (error) { + Logger.log(error.message) + } finally { + setIsLoading(false) + } + return true + } + + useEffect(() => { + if (data === undefined || !config?.metadataCacheUri) { + setIsLoading(false) + return } getJobs() }, [ocean, account, data, config?.metadataCacheUri]) return ( - + <> + {jobs.length > 0 && ( + + )} +
+ ) }