1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-15 01:34:57 +01:00

visual tweaks, refactoring

This commit is contained in:
Matthias Kretschmann 2020-10-22 14:09:42 +02:00
parent 5e38ae572b
commit f4a31ef393
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 85 additions and 57 deletions

View File

@ -0,0 +1,3 @@
.title {
margin-bottom: calc(var(--spacer) / 4);
}

View File

@ -3,9 +3,11 @@ import { useOcean } from '@oceanprotocol/react'
import React, { ReactElement, useEffect, useState } from 'react' import React, { ReactElement, useEffect, useState } from 'react'
import Loader from '../../atoms/Loader' import Loader from '../../atoms/Loader'
import Modal from '../../atoms/Modal' import Modal from '../../atoms/Modal'
import { ComputeJobMetaData } from '@types/ComputeJobMetaData' import { ComputeJobMetaData } from '../../../@types/ComputeJobMetaData'
import Time from '../../atoms/Time' import Time from '../../atoms/Time'
import shortid from 'shortid' import shortid from 'shortid'
import styles from './ComputeDetails.module.css'
import { Status } from './ComputeJobs'
export default function ComputeDetailsModal({ export default function ComputeDetailsModal({
computeJob, computeJob,
@ -19,9 +21,11 @@ export default function ComputeDetailsModal({
const { ocean, status, account } = useOcean() const { ocean, status, account } = useOcean()
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const isFinished = computeJob.dateFinished !== null
useEffect(() => { useEffect(() => {
async function getDetails() { async function getDetails() {
if (!account || !ocean || !computeJob || !isOpen) return if (!account || !ocean || !computeJob || !isOpen || !isFinished) return
try { try {
setIsLoading(true) setIsLoading(true)
@ -32,7 +36,7 @@ export default function ComputeDetailsModal({
) )
if (job && job.length > 0) { if (job && job.length > 0) {
computeJob.algorithmLogUrl = job[0].algorithmLogUrl computeJob.algorithmLogUrl = job[0].algorithmLogUrl
//hack because ComputeJob returns resultsUrl instead of resultsUrls, issue created already // hack because ComputeJob returns resultsUrl instead of resultsUrls, issue created already
computeJob.resultsUrls = computeJob.resultsUrls =
(job[0] as any).resultsUrl !== '' ? (job[0] as any).resultsUrl : [] (job[0] as any).resultsUrl !== '' ? (job[0] as any).resultsUrl : []
} }
@ -43,7 +47,7 @@ export default function ComputeDetailsModal({
} }
} }
getDetails() getDetails()
}, [ocean, status, account, isOpen]) }, [ocean, status, account, isOpen, computeJob, isFinished])
return ( return (
<Modal <Modal
@ -51,18 +55,22 @@ export default function ComputeDetailsModal({
isOpen={isOpen} isOpen={isOpen}
onToggleModal={onToggleModal} onToggleModal={onToggleModal}
> >
{isLoading ? ( <h3 className={styles.title}>{computeJob.assetName}</h3>
<p>
Created on <Time date={computeJob.dateCreated} isUnix />
</p>
<Status>{computeJob.statusText}</Status>
{computeJob.dateFinished && (
<p>
Finished on <Time date={computeJob.dateFinished} isUnix />
</p>
)}
{isFinished &&
(isLoading ? (
<Loader /> <Loader />
) : ( ) : (
<> <>
<p>{computeJob.assetName}</p>
<p>
<Time date={computeJob.dateCreated} isUnix />
</p>
<p>
<Time date={computeJob.dateFinished} isUnix />
</p>
<p>{computeJob.statusText}</p>
<p>{computeJob.algorithmLogUrl}</p> <p>{computeJob.algorithmLogUrl}</p>
<p> <p>
{computeJob.resultsUrls?.map((url) => { {computeJob.resultsUrls?.map((url) => {
@ -70,7 +78,7 @@ export default function ComputeDetailsModal({
})}{' '} })}{' '}
</p> </p>
</> </>
)} ))}
</Modal> </Modal>
) )
} }

View File

@ -0,0 +1,8 @@
.status {
text-transform: uppercase;
color: var(--color-secondary);
}
.table {
composes: table from './PoolTransactions.module.css';
}

View File

@ -2,24 +2,26 @@ import { useOcean } from '@oceanprotocol/react'
import React, { ReactElement, useEffect, useState } from 'react' import React, { ReactElement, useEffect, useState } from 'react'
import DataTable from 'react-data-table-component' import DataTable from 'react-data-table-component'
import Time from '../../atoms/Time' import Time from '../../atoms/Time'
import styles from './PoolTransactions.module.css' import styles from './ComputeJobs.module.css'
import Loader from '../../atoms/Loader' import Loader from '../../atoms/Loader'
import Tooltip from '../../atoms/Tooltip' import Tooltip from '../../atoms/Tooltip'
import Button from '../../atoms/Button' import Button from '../../atoms/Button'
import ComputeDetailsModal from './ComputeDetailsModal' import ComputeDetails from './ComputeDetails'
import { ComputeJobMetaData } from '@types/ComputeJobMetaData' import { ComputeJobMetaData } from '../../../@types/ComputeJobMetaData'
import { Link } from 'gatsby' import { Link } from 'gatsby'
import { Logger } from '@oceanprotocol/lib' import { Logger } from '@oceanprotocol/lib'
import Empty from './Empty'
import Dotdotdot from 'react-dotdotdot'
function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement { function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement {
const [isDialogOpen, setIsDialogOpen] = useState(false) const [isDialogOpen, setIsDialogOpen] = useState(false)
return ( return (
<> <>
<Button name="Details" onClick={() => setIsDialogOpen(true)}> <Button style="text" size="small" onClick={() => setIsDialogOpen(true)}>
Details Show Details
</Button> </Button>
<ComputeDetailsModal <ComputeDetails
computeJob={row} computeJob={row}
isOpen={isDialogOpen} isOpen={isDialogOpen}
onToggleModal={() => setIsDialogOpen(false)} onToggleModal={() => setIsDialogOpen(false)}
@ -28,15 +30,25 @@ function DetailsButton({ row }: { row: ComputeJobMetaData }): ReactElement {
) )
} }
function Empty() { export function Status({ children }: { children: string }): ReactElement {
return <div className={styles.empty}>No results found</div> return <div className={styles.status}>{children}</div>
} }
const columns = [ const columns = [
{
name: 'Data Set',
selector: function getAssetRow(row: ComputeJobMetaData) {
return (
<Dotdotdot clamp={2}>
<Link to={`/asset/${row.did}`}>{row.assetName}</Link>
</Dotdotdot>
)
}
},
{ {
name: 'Created', name: 'Created',
selector: function getTimeRow(row: ComputeJobMetaData) { selector: function getTimeRow(row: ComputeJobMetaData) {
return <Time date={row.dateCreated} isUnix /> return <Time date={row.dateCreated} isUnix relative />
} }
}, },
{ {
@ -45,20 +57,10 @@ const columns = [
return <Time date={row.dateFinished} isUnix /> return <Time date={row.dateFinished} isUnix />
} }
}, },
{
name: 'Name',
selector: function getAssetRow(row: ComputeJobMetaData) {
return (
<Tooltip content={row.assetName}>
<Link to={`/asset/${row.did}`}>{row.assetName}</Link>{' '}
</Tooltip>
)
}
},
{ {
name: 'Status', name: 'Status',
selector: function getStatus(row: ComputeJobMetaData) { selector: function getStatus(row: ComputeJobMetaData) {
return <>{row.statusText}</> return <Status>{row.statusText}</Status>
} }
}, },
{ {
@ -90,7 +92,7 @@ export default function ComputeJobs(): ReactElement {
'compute', 'compute',
100 100
) )
let jobs: ComputeJobMetaData[] = [] const jobs: ComputeJobMetaData[] = []
for (let i = 0; i < orderHistory.length; i++) { for (let i = 0; i < orderHistory.length; i++) {
const assetName = await getTitle(orderHistory[i].did) const assetName = await getTitle(orderHistory[i].did)

View File

@ -0,0 +1,7 @@
.empty {
width: 100%;
text-align: left;
color: var(--color-secondary);
font-size: var(--font-size-small);
font-style: italic;
}

View File

@ -0,0 +1,6 @@
import React, { ReactElement } from 'react'
import styles from './Empty.module.css'
export default function Empty(): ReactElement {
return <div className={styles.empty}>No results found</div>
}

View File

@ -5,11 +5,3 @@
.table [role='columnheader'] { .table [role='columnheader'] {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
.empty {
width: 100%;
text-align: left;
color: var(--color-secondary);
font-size: var(--font-size-small);
font-style: italic;
}

View File

@ -7,14 +7,16 @@ import DataTable from 'react-data-table-component'
import EtherscanLink from '../../atoms/EtherscanLink' import EtherscanLink from '../../atoms/EtherscanLink'
import Time from '../../atoms/Time' import Time from '../../atoms/Time'
import styles from './PoolTransactions.module.css' import styles from './PoolTransactions.module.css'
import Empty from './Empty'
import Dotdotdot from 'react-dotdotdot'
function AssetTitle({ did }: { did: string }): ReactElement { function AssetTitle({ did }: { did: string }): ReactElement {
const { title } = useMetadata(did) const { title } = useMetadata(did)
return <Link to={`/asset/${did}`}>{title || did}</Link> return (
} <Dotdotdot clamp={2}>
<Link to={`/asset/${did}`}>{title || did}</Link>
function Empty() { </Dotdotdot>
return <div className={styles.empty}>No results found</div> )
} }
function Title({ row }: { row: PoolTransaction }) { function Title({ row }: { row: PoolTransaction }) {