oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-12-22 09:13:36 +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 {
network: string
currentBlock: number
lastUpdatedOn: number
components: {
market: ComponentStatusBase
faucet: FaucetStatus | Record<string, never>
aquarius: AquariusStatus
provider: ProviderStatus
subgraph: SubgraphStatus
operator: OperatorStatus
dataFarming: ComponentStatusBase
}
currentBlock?: number
components: Component[]
}
export interface ComponentStatusBase {
export interface Component {
name: string
status: State
statusMessages: string[]
response: number
version: string
}
export interface ProviderStatus extends ComponentStatusBase {
latestRelease: string
}
export interface AquariusStatus extends ComponentStatusBase {
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 {
latestRelease?: string
validChainList?: boolean
monitorVersion?: string
block?: number
validQuery?: boolean
environments?: number
limitReached?: boolean
ethBalance?: BigNumber
ethBalanceSufficient?: boolean
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 CheckAsset from '../images/check.svg'
import addresses from '@oceanprotocol/contracts/addresses/address.json'
import { statusApiUri } from '../../app.config'
function statusIcon(state: State): ReactElement {
if (state === State.Up) {
@ -30,11 +31,13 @@ function statusStyle(state: State) {
export default function HomePage(): ReactElement {
const [data, setData] = useState<{ [key: string]: Status }>()
const [isLoading, setIsloading] = useState<boolean>()
const [error, setError] = useState<string>()
useEffect(() => {
async function getStatuses() {
setIsloading(true)
const data = await getData()
if (!data) setError(`Could not fetch data from ${statusApiUri}`)
setData(data)
setIsloading(false)
}
@ -45,7 +48,10 @@ export default function HomePage(): ReactElement {
<div className={styles.container}>
<Head>
<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" />
</Head>
@ -65,60 +71,63 @@ export default function HomePage(): ReactElement {
<main>
{isLoading ? (
<div className={styles.loading}>Loading...</div>
) : error ? (
<div className={styles.loading}>{error}</div>
) : (
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>
{value.components.map((component) => (
<div
key={component.name}
className={`${styles.card} ${statusStyle(
component.status
)}`}
>
<h2 className={styles.titleComponent}>
{statusIcon(component.status)} {component.name}
<code className={styles.version} title="deployed version">
{component.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>
)
)}
{component.statusMessages?.length ? (
<ul className={styles.messages}>
{component.statusMessages.map(
(message: string, i: number) => (
<li key={i} className={styles.statusMessage}>
{message}
</li>
)
)}
</ul>
) : null}
</div>
))}
</div>
<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>
{networkName !== 'general' && (
<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>
))
)}

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

@ -3,6 +3,7 @@
margin: 0 auto;
background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
no-repeat center 13.5rem;
min-height: 100vh;
}
@media screen and (min-width: 50rem) {
@ -106,6 +107,10 @@
color: var(--brand-alert-orange);
}
.down .messages {
color: var(--brand-alert-red);
}
.contracts {
margin-top: var(--spacer);
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)
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(
response.data?.map((item) => [item.network, item])
)