mirror of
https://github.com/oceanprotocol/status-frontend.git
synced 2024-11-23 10:27:27 +01:00
huge data flow simplification
This commit is contained in:
parent
224873fb6e
commit
574e6c7d30
GPG Key ID:
606EEEF3C479A91F
@ -1,2 +1 @@
|
||||
NEXT_PUBLIC_STATUS_API_URI='http://localhost:8080'
|
||||
NEXT_PUBLIC_NETWORKS='["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'
|
||||
@ -1,7 +1,4 @@
|
||||
module.exports = {
|
||||
statusApiUri:
|
||||
process.env.NEXT_PUBLIC_STATUS_API_URI || 'http://localhost:8000',
|
||||
availableNetworks:
|
||||
process.env.NEXT_PUBLIC_NETWORKS ||
|
||||
'["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'
|
||||
process.env.NEXT_PUBLIC_STATUS_API_URI || 'http://localhost:8000'
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@ export interface Status {
|
||||
daoGrants: State
|
||||
lastUpdatedOn: number
|
||||
}
|
||||
|
||||
export interface ProviderStatus {
|
||||
status: State
|
||||
response?: number
|
||||
@ -55,6 +56,7 @@ export interface OperatorStatus {
|
||||
environments?: number
|
||||
limitReached?: boolean
|
||||
}
|
||||
|
||||
export interface FaucetStatus {
|
||||
status: State
|
||||
response?: number
|
||||
@ -63,23 +65,3 @@ export interface FaucetStatus {
|
||||
oceanBalance?: BigNumber
|
||||
oceanBalanceSufficient?: boolean
|
||||
}
|
||||
|
||||
export interface Network {
|
||||
name: string
|
||||
chainId: string
|
||||
test?: boolean
|
||||
faucetWallet?: string
|
||||
rpcUrl?: string
|
||||
oceanAddress?: string
|
||||
}
|
||||
|
||||
export interface Summary {
|
||||
component: string
|
||||
status: State
|
||||
version?: string
|
||||
}
|
||||
|
||||
export interface NetworkSummary {
|
||||
name: string
|
||||
status: State
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import Head from 'next/head'
|
||||
import React, { Fragment, ReactElement, useEffect, useState } from 'react'
|
||||
import { State, Summary, NetworkSummary } from '../@types'
|
||||
import { State, Status } from '../@types'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import { getData, getNetworkSUmmary, getSummary } from '../utils/getData'
|
||||
import { getData } from '../utils/getData'
|
||||
import LogoAsset from '../images/logo.svg'
|
||||
import CheckAsset from '../images/check.svg'
|
||||
|
||||
@ -27,16 +27,12 @@ function statusStyle(state: State) {
|
||||
}
|
||||
|
||||
export default function HomePage(): ReactElement {
|
||||
const [summary, setSummary] = useState<Summary[]>()
|
||||
const [networks, setNetworks] = useState<NetworkSummary[]>()
|
||||
const [data, setData] = useState<{ [key: string]: Status }>()
|
||||
|
||||
useEffect(() => {
|
||||
async function getStatuses() {
|
||||
const statusData = await getData()
|
||||
const summaryData = getSummary('mainnet', statusData)
|
||||
if (summaryData) setSummary(summaryData)
|
||||
const networkSummary = getNetworkSUmmary(statusData)
|
||||
if (networkSummary) setNetworks(networkSummary)
|
||||
const data = await getData()
|
||||
setData(data)
|
||||
}
|
||||
getStatuses()
|
||||
}, [])
|
||||
@ -53,39 +49,48 @@ export default function HomePage(): ReactElement {
|
||||
<LogoAsset className={styles.logo} />
|
||||
|
||||
<h1 className={styles.title}>Ocean Status</h1>
|
||||
<p className={styles.description}>
|
||||
Current Status of Ocean Components{' '}
|
||||
</p>
|
||||
<p className={styles.description}>Current Status of Ocean Components</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{networks?.map((network: NetworkSummary, i: number) => (
|
||||
<Fragment key={i}>
|
||||
<h2 className={styles.networkName}>{network.name}</h2>
|
||||
|
||||
{Object.entries(data || {}).map(([key, value]) => (
|
||||
<Fragment key={key}>
|
||||
<h2 className={styles.networkName}>{key}</h2>
|
||||
<div className={styles.grid}>
|
||||
{summary?.map((value: Summary) => (
|
||||
<div
|
||||
key={value.component}
|
||||
className={`${styles.card} ${statusStyle(value.status)}`}
|
||||
>
|
||||
<h2>
|
||||
{statusIcon(value.status)} {value.component}
|
||||
</h2>
|
||||
<code className={styles.version}>{value.version}</code>
|
||||
</div>
|
||||
))}
|
||||
{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>
|
||||
{statusIcon(
|
||||
key === 'market' || key === 'dataFarming'
|
||||
? value
|
||||
: value.status
|
||||
)}{' '}
|
||||
{key}
|
||||
</h2>
|
||||
<code className={styles.version}>{value.version}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Fragment>
|
||||
// <button
|
||||
// key={i}
|
||||
// className={`${styles.network} ${networkStyle(network.name)}`}
|
||||
// onClick={() => setNetwork(network.name)}
|
||||
// >
|
||||
// <span>
|
||||
// {network.name} {statusIcon(network.status)}
|
||||
// </span>
|
||||
// </button>
|
||||
))}
|
||||
</main>
|
||||
|
||||
|
||||
@ -1,95 +1,19 @@
|
||||
import axios, { AxiosResponse } from 'axios'
|
||||
import { NetworkSummary, State, Status, Summary } from '../@types'
|
||||
import { Status } from '../@types'
|
||||
import { statusApiUri } from '../../app.config'
|
||||
import { availableNetworks } from '../../app.config'
|
||||
|
||||
export async function getData(): Promise<Status[][]> {
|
||||
export async function getData(): Promise<{ [key: string]: Status }> {
|
||||
try {
|
||||
const response: AxiosResponse<Status[][]> = await axios.get(
|
||||
`${statusApiUri}`
|
||||
const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`)
|
||||
if (!response?.data || response.status !== 200)
|
||||
throw Error('ERROR: no data recieved')
|
||||
|
||||
// transform data into object with network names as keys
|
||||
const output = Object.fromEntries(
|
||||
response.data.map((item) => [item.network, item])
|
||||
)
|
||||
if (!response || response.status !== 200 || !response.data)
|
||||
console.log('ERROR: no data recieved')
|
||||
|
||||
const data = response.data
|
||||
|
||||
return data
|
||||
return output
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
export function getSummary(network: string, data: Status[][]): Summary[] {
|
||||
try {
|
||||
if (data) {
|
||||
let status: Status
|
||||
|
||||
data.forEach((element) => {
|
||||
if (element[0].network === network) return (status = element[0])
|
||||
})
|
||||
|
||||
// TODO: this is not fun. Needs a smart iteration over response instead of
|
||||
// aall this hardcoding
|
||||
const summary: Summary[] = [
|
||||
{
|
||||
component: 'Aquarius',
|
||||
status: status?.aquarius?.status,
|
||||
version: status?.aquarius?.version
|
||||
},
|
||||
{
|
||||
component: 'Provider',
|
||||
status: status?.provider?.status,
|
||||
version: status?.provider?.version
|
||||
},
|
||||
{
|
||||
component: 'Subgraph',
|
||||
status: status?.subgraph?.status,
|
||||
version: status?.subgraph?.version
|
||||
},
|
||||
{
|
||||
component: 'Market',
|
||||
status: status?.market
|
||||
},
|
||||
{
|
||||
component: 'Data Farming',
|
||||
status: status?.dataFarming
|
||||
},
|
||||
{
|
||||
component: 'Operator Service',
|
||||
status: status?.operator?.status,
|
||||
version: status?.operator?.version
|
||||
}
|
||||
]
|
||||
status?.faucet?.status &&
|
||||
summary.push({
|
||||
component: 'Faucet',
|
||||
status: status.faucet.status
|
||||
})
|
||||
|
||||
return summary
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
export function getNetworkSUmmary(data: Status[][]): NetworkSummary[] {
|
||||
const networks: string[] = JSON.parse(availableNetworks)
|
||||
const networkSummary: NetworkSummary[] = []
|
||||
|
||||
networks.forEach((network) => {
|
||||
const summary = getSummary(network, data)
|
||||
let status = State.Up
|
||||
|
||||
summary?.forEach((service) => {
|
||||
if (service.status === State.Down) return (status = State.Down)
|
||||
})
|
||||
if (status === State.Up) {
|
||||
summary?.forEach((service) => {
|
||||
if (service.status === State.Warning) return (status = State.Warning)
|
||||
})
|
||||
}
|
||||
networkSummary.push({ name: network, status })
|
||||
})
|
||||
return networkSummary
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user