oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-11-24 19:10:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

data structure updates

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-10-19 16:40:44 +01:00
parent a0bcd34c98
commit 99320cffe4
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 74 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/@types/index.ts
View File

@ -10,50 +10,24 @@ export enum State {
export interface Status { export interface Status {
network: string network: string
currentBlock: number
lastUpdatedOn: number lastUpdatedOn: number
components: { currentBlock?: number
market: ComponentStatusBase components: Component[]
faucet: FaucetStatus | Record<string, never>
aquarius: AquariusStatus
provider: ProviderStatus
subgraph: SubgraphStatus
operator: OperatorStatus
dataFarming: ComponentStatusBase
}
} }
export interface ComponentStatusBase { export interface Component {
name: string
status: State status: State
statusMessages: string[] statusMessages: string[]
response: number response: number
version: string version: string
} latestRelease?: string
validChainList?: boolean
export interface ProviderStatus extends ComponentStatusBase { monitorVersion?: string
latestRelease: string block?: number
} validQuery?: boolean
environments?: number
export interface AquariusStatus extends ComponentStatusBase { limitReached?: boolean
validChainList: boolean
monitorVersion: string
latestRelease: string
block: number
validQuery: boolean
}
export interface SubgraphStatus extends ComponentStatusBase {
latestRelease: string
block: number
}
export interface OperatorStatus extends ComponentStatusBase {
latestRelease: string
environments: number
limitReached: boolean
}
export interface FaucetStatus extends ComponentStatusBase {
ethBalance?: BigNumber ethBalance?: BigNumber
ethBalanceSufficient?: boolean ethBalanceSufficient?: boolean
oceanBalance?: BigNumber oceanBalance?: BigNumber

103
src/pages/index.tsx
View File

@ -6,6 +6,7 @@ import { getData } from '../utils/getData'
import LogoAsset from '../images/logo.svg' import LogoAsset from '../images/logo.svg'
import CheckAsset from '../images/check.svg' import CheckAsset from '../images/check.svg'
import addresses from '@oceanprotocol/contracts/addresses/address.json' import addresses from '@oceanprotocol/contracts/addresses/address.json'
import { statusApiUri } from '../../app.config'
function statusIcon(state: State): ReactElement { function statusIcon(state: State): ReactElement {
if (state === State.Up) { if (state === State.Up) {
@ -30,11 +31,13 @@ function statusStyle(state: State) {
export default function HomePage(): ReactElement { export default function HomePage(): ReactElement {
const [data, setData] = useState<{ [key: string]: Status }>() const [data, setData] = useState<{ [key: string]: Status }>()
const [isLoading, setIsloading] = useState<boolean>() const [isLoading, setIsloading] = useState<boolean>()
const [error, setError] = useState<string>()
useEffect(() => { useEffect(() => {
async function getStatuses() { async function getStatuses() {
setIsloading(true) setIsloading(true)
const data = await getData() const data = await getData()
if (!data) setError(`Could not fetch data from ${statusApiUri}`)
setData(data) setData(data)
setIsloading(false) setIsloading(false)
} }
@ -45,7 +48,10 @@ export default function HomePage(): ReactElement {
<div className={styles.container}> <div className={styles.container}>
<Head> <Head>
<title>Ocean Protocol Status</title> <title>Ocean Protocol Status</title>
<meta name="description" content="Generated by create next app" /> <meta
name="description"
content="Status overview of all deployed components hosted by the Ocean Protocol Foundation."
/>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
@ -65,60 +71,63 @@ export default function HomePage(): ReactElement {
<main> <main>
{isLoading ? ( {isLoading ? (
<div className={styles.loading}>Loading...</div> <div className={styles.loading}>Loading...</div>
) : error ? (
<div className={styles.loading}>{error}</div>
) : ( ) : (
Object.entries(data || {}).map(([networkName, value]) => ( Object.entries(data || {}).map(([networkName, value]) => (
<Fragment key={networkName}> <Fragment key={networkName}>
<h2 className={styles.networkName}>{networkName}</h2> <h2 className={styles.networkName}>{networkName}</h2>
<div className={styles.grid}> <div className={styles.grid}>
{Object.entries(value.components).map( {value.components.map((component) => (
([componentName, value]) => ( <div
<div key={component.name}
key={componentName} className={`${styles.card} ${statusStyle(
className={`${styles.card} ${statusStyle(value.status)}`} component.status
> )}`}
<h2 className={styles.titleComponent}> >
{statusIcon(value.status)} {componentName} <h2 className={styles.titleComponent}>
<code {statusIcon(component.status)} {component.name}
className={styles.version} <code className={styles.version} title="deployed version">
title="deployed version" {component.version}
> </code>
{value.version} </h2>
</code>
</h2>
{value.statusMessages?.length ? ( {component.statusMessages?.length ? (
<ul className={styles.messages}> <ul className={styles.messages}>
{value.statusMessages.map( {component.statusMessages.map(
(message: string, i: number) => ( (message: string, i: number) => (
<li key={i} className={styles.statusMessage}> <li key={i} className={styles.statusMessage}>
{message} {message}
</li> </li>
) )
)} )}
</ul> </ul>
) : null} ) : null}
</div> </div>
) ))}
)}
</div> </div>
<details className={styles.contracts}> {networkName !== 'general' && (
<summary> <details className={styles.contracts}>
<h3 className={styles.titleComponent}>Deployed Contracts</h3> <summary>
</summary> <h3 className={styles.titleComponent}>
<ul> Deployed Contracts
{Object.entries((addresses as any)[networkName]).map( </h3>
([key, value]) => </summary>
key !== 'chainId' && <ul>
key !== 'startBlock' && ( {Object.entries((addresses as any)[networkName]).map(
<li key={key}> ([key, value]) =>
<code className={styles.key}>{key}</code>:{' '} key !== 'chainId' &&
<code>{JSON.stringify(value)}</code> key !== 'startBlock' && (
</li> <li key={key}>
) <code className={styles.key}>{key}</code>:{' '}
)} <code>{JSON.stringify(value)}</code>
</ul> </li>
</details> )
)}
</ul>
</details>
)}
</Fragment> </Fragment>
)) ))
)} )}

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

@ -3,6 +3,7 @@
margin: 0 auto; margin: 0 auto;
background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg') background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
no-repeat center 13.5rem; no-repeat center 13.5rem;
min-height: 100vh;
} }
@media screen and (min-width: 50rem) { @media screen and (min-width: 50rem) {
@ -106,6 +107,10 @@
color: var(--brand-alert-orange); color: var(--brand-alert-orange);
} }
.down .messages {
color: var(--brand-alert-red);
}
.contracts { .contracts {
margin-top: var(--spacer); margin-top: var(--spacer);
margin-left: 1rem; margin-left: 1rem;

3
src/utils/getData.ts
View File

@ -8,7 +8,8 @@ export async function getData(): Promise<{ [key: string]: Status }> {
if (!response?.data || response.status !== 200) if (!response?.data || response.status !== 200)
throw Error('ERROR: no data recieved') throw Error('ERROR: no data recieved')
// transform data into object with network names as keys // transform data into object with network names as keys,
// and make sure 'general' is always the first key
const output = Object.fromEntries( const output = Object.fromEntries(
response.data?.map((item) => [item.network, item]) response.data?.map((item) => [item.network, item])
) )