From 99320cffe464e556cec317f6f250aba7c8c3df86 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 19 Oct 2022 16:40:44 +0100 Subject: [PATCH] data structure updates --- src/@types/index.ts | 48 ++++------------- src/pages/index.tsx | 103 ++++++++++++++++++++----------------- src/styles/Home.module.css | 5 ++ src/utils/getData.ts | 3 +- 4 files changed, 74 insertions(+), 85 deletions(-) diff --git a/src/@types/index.ts b/src/@types/index.ts index 72e1c52..39ca08f 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -10,50 +10,24 @@ export enum State { export interface Status { network: string - currentBlock: number lastUpdatedOn: number - components: { - market: ComponentStatusBase - faucet: FaucetStatus | Record - 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 diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5842a57..5958095 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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() + const [error, setError] = useState() 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 {
Ocean Protocol Status - + @@ -65,60 +71,63 @@ export default function HomePage(): ReactElement {
{isLoading ? (
Loading...
+ ) : error ? ( +
{error}
) : ( Object.entries(data || {}).map(([networkName, value]) => (

{networkName}

- {Object.entries(value.components).map( - ([componentName, value]) => ( -
-

- {statusIcon(value.status)} {componentName} - - {value.version} - -

+ {value.components.map((component) => ( +
+

+ {statusIcon(component.status)} {component.name} + + {component.version} + +

- {value.statusMessages?.length ? ( -
    - {value.statusMessages.map( - (message: string, i: number) => ( -
  • - {message} -
    • - ) - )} -
- ) : null} -
- ) - )} + {component.statusMessages?.length ? ( +
    + {component.statusMessages.map( + (message: string, i: number) => ( +
  • + {message} +
    • + ) + )} +
+ ) : null} +
+ ))}
-
- -

Deployed Contracts

- -
    - {Object.entries((addresses as any)[networkName]).map( - ([key, value]) => - key !== 'chainId' && - key !== 'startBlock' && ( -
  • - {key}:{' '} - {JSON.stringify(value)} -
    • - ) - )} -
-
+ {networkName !== 'general' && ( +
+ +

+ Deployed Contracts +

+ +
    + {Object.entries((addresses as any)[networkName]).map( + ([key, value]) => + key !== 'chainId' && + key !== 'startBlock' && ( +
  • + {key}:{' '} + {JSON.stringify(value)} +
    • + ) + )} +
+
+ )} )) )} diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css index f535d06..92eddd9 100644 --- a/src/styles/Home.module.css +++ b/src/styles/Home.module.css @@ -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; diff --git a/src/utils/getData.ts b/src/utils/getData.ts index 1ee7be6..51a8e07 100644 --- a/src/utils/getData.ts +++ b/src/utils/getData.ts @@ -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]) )