diff --git a/src/@types/index.ts b/src/@types/index.ts index be192b6..5ba3da0 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -75,3 +75,8 @@ export interface Summary { component: string status: State } + +export interface NetworkSummary { + name: string + status: State +} diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000..8464f77 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 56d5de1..389bfa9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,18 +1,27 @@ import Head from 'next/head' import React, { ReactElement, useEffect, useState } from 'react' -import { Status, State, Summary } from '../@types' +import { Status, State, Summary, NetworkSummary } from '../@types' import styles from '../styles/Home.module.css' -import { getData, getSummary } from '../utils/getData' -import { availableNetworks } from '../../app.config' +import { getData, getNetworkSUmmary, getSummary } from '../utils/getData' +import Logo from '../images/logo.svg' +import Image from 'next/image' export default function HomePage(): ReactElement { const [network, setNetwork] = useState('mainnet') - const [statuses, setStatuses] = useState() const [summary, setSummary] = useState() - const networks = JSON.parse(availableNetworks) + const [networks, setNetworks] = useState() + + function statusIcon(state: State): string { + if (state === State.Up) { + return '✅' + } else if (state === State.Down) { + return '🚨' + } else { + return '🚧' + } + } function statusStyle(state: State) { - console.log('state', state) if (state === State.Down) { return styles.down } else if (state === State.Warning) { @@ -31,20 +40,14 @@ export default function HomePage(): ReactElement { useEffect(() => { async function getStatuses() { const statusData = await getData() - console.log('statusData', statusData) - if (statusData) setStatuses(statusData) - console.log('statuses', statuses) - - const summaryData = getSummary(network, statuses) - console.log('summaryData', summaryData) + const summaryData = getSummary(network, statusData) if (summaryData) setSummary(summaryData) + const networkSummary = getNetworkSUmmary(statusData) + if (networkSummary) setNetworks(networkSummary) } getStatuses() }, [network]) - console.log('summary', summary) - console.log('~ networks', networks) - return (
@@ -53,6 +56,8 @@ export default function HomePage(): ReactElement {
+ + {/* Ocean Protocol Logo */}

Ocean Status

Current Status of Ocean Components{' '} @@ -60,13 +65,15 @@ export default function HomePage(): ReactElement {

{networks && ( <> - {networks.map((value: string, i: number) => ( + {networks.map((network: NetworkSummary, i: number) => ( ))} diff --git a/src/utils/getData.ts b/src/utils/getData.ts index fe00e5a..b64db0b 100644 --- a/src/utils/getData.ts +++ b/src/utils/getData.ts @@ -1,17 +1,15 @@ import axios, { AxiosResponse } from 'axios' -import { Status, Summary } from '../@types' +import { NetworkSummary, State, Status, Summary } from '../@types' import { statusApiUri } from '../../app.config' +import { availableNetworks } from '../../app.config' export async function getData(): Promise { try { - console.log(`${statusApiUri}`) const response: AxiosResponse = await axios.get(`${statusApiUri}`) if (!response || response.status !== 200 || !response.data) console.log('ERROR: no data recieved') - const data = [...response.data] - console.log('1. data length', data.length) - console.log('1. data ', data) + const data = response.data return data } catch (error) { @@ -20,33 +18,33 @@ export async function getData(): Promise { } export function getSummary(network: string, data: Status[]): Summary[] { - console.log('2. data', data) try { if (data) { let status: Status data.forEach((element) => { if (element.network === network) return (status = element) }) + const summary: Summary[] = [ - { component: 'Aquarius', status: status.aquarius.status }, - { component: 'Provider', status: status.provider.status }, - { component: 'Subgraph', status: status.subgraph.status }, - { component: 'Market', status: status.market }, - { component: 'Port', status: status.port }, + { component: 'Aquarius', status: status?.aquarius?.status }, + { component: 'Provider', status: status?.provider?.status }, + { component: 'Subgraph', status: status?.subgraph?.status }, + { component: 'Market', status: status?.market }, + { component: 'Port', status: status?.port }, { component: 'Data Farming', - status: status.dataFarming + status: status?.dataFarming }, { component: 'Operator Service', - status: status.operator.status + status: status?.operator?.status }, { component: 'DAO Grants', - status: status.daoGrants + status: status?.daoGrants } ] - status.faucet.status && + status?.faucet?.status && summary.push({ component: 'Faucet', status: status.faucet.status @@ -58,3 +56,22 @@ export function getSummary(network: string, data: Status[]): Summary[] { console.log(error) } } + +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 +}