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:
parent
6d544cc0ba
commit
47332703cc
@ -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 {
|
||||
|
@ -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>}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user