mirror of
https://github.com/oceanprotocol/status-frontend.git
synced 2024-11-21 17:36:58 +01:00
data structure updates
This commit is contained in:
parent
a0bcd34c98
commit
99320cffe4
GPG Key ID:
606EEEF3C479A91F
@ -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
|
||||
|
||||
@ -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,30 +71,30 @@ 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]) => (
|
||||
{value.components.map((component) => (
|
||||
<div
|
||||
key={componentName}
|
||||
className={`${styles.card} ${statusStyle(value.status)}`}
|
||||
key={component.name}
|
||||
className={`${styles.card} ${statusStyle(
|
||||
component.status
|
||||
)}`}
|
||||
>
|
||||
<h2 className={styles.titleComponent}>
|
||||
{statusIcon(value.status)} {componentName}
|
||||
<code
|
||||
className={styles.version}
|
||||
title="deployed version"
|
||||
>
|
||||
{value.version}
|
||||
{statusIcon(component.status)} {component.name}
|
||||
<code className={styles.version} title="deployed version">
|
||||
{component.version}
|
||||
</code>
|
||||
</h2>
|
||||
|
||||
{value.statusMessages?.length ? (
|
||||
{component.statusMessages?.length ? (
|
||||
<ul className={styles.messages}>
|
||||
{value.statusMessages.map(
|
||||
{component.statusMessages.map(
|
||||
(message: string, i: number) => (
|
||||
<li key={i} className={styles.statusMessage}>
|
||||
{message}
|
||||
@ -98,13 +104,15 @@ export default function HomePage(): ReactElement {
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
|
||||
{networkName !== 'general' && (
|
||||
<details className={styles.contracts}>
|
||||
<summary>
|
||||
<h3 className={styles.titleComponent}>Deployed Contracts</h3>
|
||||
<h3 className={styles.titleComponent}>
|
||||
Deployed Contracts
|
||||
</h3>
|
||||
</summary>
|
||||
<ul>
|
||||
{Object.entries((addresses as any)[networkName]).map(
|
||||
@ -119,6 +127,7 @@ export default function HomePage(): ReactElement {
|
||||
)}
|
||||
</ul>
|
||||
</details>
|
||||
)}
|
||||
</Fragment>
|
||||
))
|
||||
)}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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])
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user