oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-11-21 17:36:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

data structure change, tweak messages display

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-10-19 12:39:01 +01:00
parent b7fa93cd10
commit a0bcd34c98
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 68 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/@types/index.ts
View File

@ -11,19 +11,21 @@ export enum State {
export interface Status { export interface Status {
network: string network: string
currentBlock: number currentBlock: number
market: State
faucet: FaucetStatus | Record<string, never>
aquarius: AquariusStatus
provider: ProviderStatus
subgraph: SubgraphStatus
operator: OperatorStatus
dataFarming: State
lastUpdatedOn: number lastUpdatedOn: number
components: {
market: ComponentStatusBase
faucet: FaucetStatus | Record<string, never>
aquarius: AquariusStatus
provider: ProviderStatus
subgraph: SubgraphStatus
operator: OperatorStatus
dataFarming: ComponentStatusBase
}
} }
export interface ComponentStatusBase { export interface ComponentStatusBase {
status: State status: State
statusMessages: string statusMessages: string[]
response: number response: number
version: string version: string
} }

131
src/pages/index.tsx
View File

@ -66,86 +66,61 @@ export default function HomePage(): ReactElement {
{isLoading ? ( {isLoading ? (
<div className={styles.loading}>Loading...</div> <div className={styles.loading}>Loading...</div>
) : ( ) : (
Object.entries(data || {}).map(([key, value]) => { Object.entries(data || {}).map(([networkName, value]) => (
const networkKey = key <Fragment key={networkName}>
<h2 className={styles.networkName}>{networkName}</h2>
<div className={styles.grid}>
{Object.entries(value.components).map(
([componentName, value]) => (
<div
key={componentName}
className={`${styles.card} ${statusStyle(value.status)}`}
>
<h2 className={styles.titleComponent}>
{statusIcon(value.status)} {componentName}
<code
className={styles.version}
title="deployed version"
>
{value.version}
</code>
</h2>
return ( {value.statusMessages?.length ? (
<Fragment key={networkKey}> <ul className={styles.messages}>
<h2 className={styles.networkName}>{networkKey}</h2> {value.statusMessages.map(
<div className={styles.grid}> (message: string, i: number) => (
{Object.entries(value) <li key={i} className={styles.statusMessage}>
.filter( {message}
// TODO: Remove this filter if we fix this on API level </li>
// Needs a new `components` key under Status response )
([key]) => )}
key !== 'currentBlock' && </ul>
key !== 'lastUpdatedOn' && ) : null}
key !== 'network' && </div>
key !== '_id' && )
key !== '__v' )}
) </div>
.map(([key, value]) => (
<div
key={key}
className={`${styles.card} ${statusStyle(
// TODO: all component states should be of type Status on API level
key === 'market' || key === 'dataFarming'
? value
: value.status
)}`}
>
<h2 className={styles.titleComponent}>
{statusIcon(
key === 'market' || key === 'dataFarming'
? value
: value.status
)}{' '}
{key}
<code
className={styles.version}
title="deployed version"
>
{value.version}
</code>
</h2>
{value.statusMessages && value.statusMessages !== '' && ( <details className={styles.contracts}>
<ul className={styles.messages}> <summary>
{value.statusMessages <h3 className={styles.titleComponent}>Deployed Contracts</h3>
.split(',') </summary>
.map((message: string, i: number) => ( <ul>
<li key={i} className={styles.statusMessage}> {Object.entries((addresses as any)[networkName]).map(
{message} ([key, value]) =>
</li> key !== 'chainId' &&
))} key !== 'startBlock' && (
</ul> <li key={key}>
)} <code className={styles.key}>{key}</code>:{' '}
</div> <code>{JSON.stringify(value)}</code>
))} </li>
</div> )
)}
<details className={styles.contracts}> </ul>
<summary> </details>
<h3 className={styles.titleComponent}> </Fragment>
Deployed Contracts ))
</h3>
</summary>
<ul>
{Object.entries((addresses as any)[networkKey]).map(
([key, value]) =>
key !== 'chainId' &&
key !== 'startBlock' && (
<li key={key}>
<code className={styles.key}>{key}</code>:{' '}
<code>{JSON.stringify(value)}</code>
</li>
)
)}
</ul>
</details>
</Fragment>
)
})
)} )}
</main> </main>

5
src/styles/Home.module.css
View File

@ -92,12 +92,17 @@
list-style-type: square; list-style-type: square;
margin-left: 1rem; margin-left: 1rem;
margin-top: calc(var(--spacer) / 4); margin-top: calc(var(--spacer) / 4);
color: var(--color-secondary);
font-size: var(--font-size-small);
} }
.messages li { .messages li {
display: list-item; display: list-item;
margin-top: calc(var(--spacer) / 8); margin-top: calc(var(--spacer) / 8);
list-style-position: outside; list-style-position: outside;
}
.warning .messages {
color: var(--brand-alert-orange); color: var(--brand-alert-orange);
} }