1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

update compute details and compute results UI and style

This commit is contained in:
Bogdan Fazakas 2022-04-07 11:34:45 +03:00
parent 6d544cc0ba
commit 47332703cc
3 changed files with 35 additions and 42 deletions

View File

@ -62,6 +62,20 @@
.assetMeta code {
color: var(--color-secondary);
font-size: var(--font-size-small);
overflow: hidden;
width: 100%;
flex: 4;
text-overflow: ellipsis;
white-space: nowrap;
}
.assetMeta span {
flex: 1;
}
.assetMeta {
display: flex;
flex-wrap: wrap;
}
.meta {

View File

@ -33,7 +33,8 @@ function Asset({
</a>
</h3>
<p className={styles.assetMeta}>
{symbol} | <code>{did}</code>
<span> {`${symbol} | `}</span>
<code>{did}</code>
</p>
</div>
)
@ -97,7 +98,7 @@ export default function Details({
/>
)}
<MetaItem title="Job ID" content={<code>{job.jobId}</code>} />
{/* {job.resultsDid && (
{/* {job.results[0]. && (
<MetaItem
title="Published Results DID"
content={<code>{job.resultsDid}</code>}

View File

@ -4,7 +4,6 @@ import {
Provider
} from '@oceanprotocol/lib'
import React, { ReactElement, useState } from 'react'
import Loader from '@shared/atoms/Loader'
import { ListItem } from '@shared/atoms/Lists'
import Button from '@shared/atoms/Button'
import styles from './Results.module.css'
@ -20,74 +19,53 @@ export default function Results({
const providerInstance = new Provider()
const { accountId, web3 } = useWeb3()
const [isLoading, setIsLoading] = useState(false)
const [hasFetched, setHasFetched] = useState(false)
const isFinished = job.dateFinished !== null
async function getResults() {
async function downloadResults(resultIndex: number) {
if (!accountId || !job) return
try {
setIsLoading(true)
console.log(' Job: ', job)
const jobResult = await providerInstance.getComputeResultUrl(
'https://v4.provider.rinkeby.oceanprotocol.com/',
web3,
accountId,
job.jobId,
0
resultIndex
)
await downloadFileBrowser(jobResult)
} catch (error) {
LoggerInstance.error(error.message)
} finally {
setIsLoading(false)
setHasFetched(true)
}
}
return (
<div className={styles.results}>
{hasFetched ? (
{isFinished ? (
<ul>
<ListItem>
{/* {job.algorithmLogUrl ? (
<a href={job.algorithmLogUrl} target="_blank" rel="noreferrer">
View Log
</a>
) : (
'No logs found.'
)} */}
</ListItem>
{/* {job.resultsUrl &&
Array.isArray(job.resultsUrl) &&
job.resultsUrl.map((url, i) =>
url ? (
<ListItem key={job.jobId}>
<a href={url} target="_blank" rel="noreferrer">
View Result {i + 1}
</a>
{job.results &&
Array.isArray(job.results) &&
job.results.map((jobResult, i) =>
jobResult.filename ? (
<ListItem key={i}>
<Button
style="primary"
size="small"
onClick={() => downloadResults(i)}
disabled={isLoading || !isFinished}
>
{jobResult.filename}
</Button>
</ListItem>
) : (
<ListItem>No results found.</ListItem>
)
)} */}
)}
</ul>
) : (
<Button
style="primary"
size="small"
onClick={() => getResults()}
disabled={isLoading || !isFinished}
>
{isLoading ? (
<Loader />
) : !isFinished ? (
'Waiting for results...'
) : (
'Get Results'
)}
</Button>
<p> Waiting for results...</p>
)}
<FormHelp className={styles.help}>{content.compute.storage}</FormHelp>
</div>