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

update compute details and compute results UI and style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Profile/History/ComputeJobs/Details.module.css
View File

@ -62,6 +62,20 @@
.assetMeta code { .assetMeta code {
color: var(--color-secondary); color: var(--color-secondary);
font-size: var(--font-size-small); 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 { .meta {

5
src/components/Profile/History/ComputeJobs/Details.tsx
View File

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

58
src/components/Profile/History/ComputeJobs/Results.tsx
View File

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