oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-11-22 09:56:58 +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

41
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,30 +71,30 @@ 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={componentName} key={component.name}
className={`${styles.card} ${statusStyle(value.status)}`} className={`${styles.card} ${statusStyle(
component.status
)}`}
> >
<h2 className={styles.titleComponent}> <h2 className={styles.titleComponent}>
{statusIcon(value.status)} {componentName} {statusIcon(component.status)} {component.name}
<code <code className={styles.version} title="deployed version">
className={styles.version} {component.version}
title="deployed version"
>
{value.version}
</code> </code>
</h2> </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}
@ -98,13 +104,15 @@ export default function HomePage(): ReactElement {
</ul> </ul>
) : null} ) : null}
</div> </div>
) ))}
)}
</div> </div>
{networkName !== 'general' && (
<details className={styles.contracts}> <details className={styles.contracts}>
<summary> <summary>
<h3 className={styles.titleComponent}>Deployed Contracts</h3> <h3 className={styles.titleComponent}>
Deployed Contracts
</h3>
</summary> </summary>
<ul> <ul>
{Object.entries((addresses as any)[networkName]).map( {Object.entries((addresses as any)[networkName]).map(
@ -119,6 +127,7 @@ export default function HomePage(): ReactElement {
)} )}
</ul> </ul>
</details> </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])
) )