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 {
network: string
currentBlock: number
market: State
faucet: FaucetStatus | Record<string, never>
aquarius: AquariusStatus
provider: ProviderStatus
subgraph: SubgraphStatus
operator: OperatorStatus
dataFarming: State
lastUpdatedOn: number
components: {
market: ComponentStatusBase
faucet: FaucetStatus | Record<string, never>
aquarius: AquariusStatus
provider: ProviderStatus
subgraph: SubgraphStatus
operator: OperatorStatus
dataFarming: ComponentStatusBase
}
}
export interface ComponentStatusBase {
status: State
statusMessages: string
statusMessages: string[]
response: number
version: string
}

131
src/pages/index.tsx
View File

@ -66,86 +66,61 @@ export default function HomePage(): ReactElement {
{isLoading ? (
<div className={styles.loading}>Loading...</div>
) : (
Object.entries(data || {}).map(([key, value]) => {
const networkKey = key
Object.entries(data || {}).map(([networkName, value]) => (
<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 (
<Fragment key={networkKey}>
<h2 className={styles.networkName}>{networkKey}</h2>
<div className={styles.grid}>
{Object.entries(value)
.filter(
// TODO: Remove this filter if we fix this on API level
// Needs a new `components` key under Status response
([key]) =>
key !== 'currentBlock' &&
key !== 'lastUpdatedOn' &&
key !== 'network' &&
key !== '_id' &&
key !== '__v'
)
.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?.length ? (
<ul className={styles.messages}>
{value.statusMessages.map(
(message: string, i: number) => (
<li key={i} className={styles.statusMessage}>
{message}
</li>
)
)}
</ul>
) : null}
</div>
)
)}
</div>
{value.statusMessages && value.statusMessages !== '' && (
<ul className={styles.messages}>
{value.statusMessages
.split(',')
.map((message: string, i: number) => (
<li key={i} className={styles.statusMessage}>
{message}
</li>
))}
</ul>
)}
</div>
))}
</div>
<details className={styles.contracts}>
<summary>
<h3 className={styles.titleComponent}>
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>
)
})
<details className={styles.contracts}>
<summary>
<h3 className={styles.titleComponent}>Deployed Contracts</h3>
</summary>
<ul>
{Object.entries((addresses as any)[networkName]).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>

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

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