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:
parent
5e38ae572b
commit
f4a31ef393
3
src/components/pages/History/ComputeDetails.module.css
Normal file
3
src/components/pages/History/ComputeDetails.module.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.title {
|
||||||
|
margin-bottom: calc(var(--spacer) / 4);
|
||||||
|
}
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
8
src/components/pages/History/ComputeJobs.module.css
Normal file
8
src/components/pages/History/ComputeJobs.module.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.status {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
composes: table from './PoolTransactions.module.css';
|
||||||
|
}
|
@ -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)
|
||||||
|
7
src/components/pages/History/Empty.module.css
Normal file
7
src/components/pages/History/Empty.module.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.empty {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-size: var(--font-size-small);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
6
src/components/pages/History/Empty.tsx
Normal file
6
src/components/pages/History/Empty.tsx
Normal 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>
|
||||||
|
}
|
@ -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;
|
|
||||||
}
|
|
||||||
|
@ -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 }) {
|
||||||
|
Loading…
Reference in New Issue
Block a user