From 574e6c7d301266cf5105e0c34352a7681d4aaa46 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Oct 2022 18:17:32 +0100 Subject: [PATCH] huge data flow simplification --- .env.example | 1 - app.config.js | 5 +-- src/@types/index.ts | 22 +--------- src/pages/index.tsx | 77 ++++++++++++++++++----------------- src/utils/getData.ts | 96 +++++--------------------------------------- 5 files changed, 54 insertions(+), 147 deletions(-) diff --git a/.env.example b/.env.example index d3b8f44..6cc7290 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1 @@ NEXT_PUBLIC_STATUS_API_URI='http://localhost:8080' -NEXT_PUBLIC_NETWORKS='["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]' \ No newline at end of file diff --git a/app.config.js b/app.config.js index 0e328cf..3c0a057 100644 --- a/app.config.js +++ b/app.config.js @@ -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' } diff --git a/src/@types/index.ts b/src/@types/index.ts index bdf3a63..245c662 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -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 -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a20e339..779a034 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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() - const [networks, setNetworks] = useState() + 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 {

Ocean Status

-

- Current Status of Ocean Components{' '} -

+

Current Status of Ocean Components

- {networks?.map((network: NetworkSummary, i: number) => ( - -

{network.name}

- + {Object.entries(data || {}).map(([key, value]) => ( + +

{key}

- {summary?.map((value: Summary) => ( -
-

- {statusIcon(value.status)} {value.component} -

- {value.version} -
- ))} + {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]) => ( +
+

+ {statusIcon( + key === 'market' || key === 'dataFarming' + ? value + : value.status + )}{' '} + {key} +

+ {value.version} +
+ ))}
- // ))}
diff --git a/src/utils/getData.ts b/src/utils/getData.ts index 18b5ceb..0a2812e 100644 --- a/src/utils/getData.ts +++ b/src/utils/getData.ts @@ -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 { +export async function getData(): Promise<{ [key: string]: Status }> { try { - const response: AxiosResponse = await axios.get( - `${statusApiUri}` + const response: AxiosResponse = 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 -}