From 5776751de067005624867a13ff3048fc930084ed Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Mon, 17 Oct 2022 13:51:32 +0300 Subject: [PATCH 1/4] Updating data format & improving error handling --- src/pages/index.tsx | 6 +----- src/utils/getData.ts | 23 ++++++++++++----------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 56d5de1..d9639f0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -31,12 +31,8 @@ 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) } getStatuses() diff --git a/src/utils/getData.ts b/src/utils/getData.ts index fe00e5a..f365155 100644 --- a/src/utils/getData.ts +++ b/src/utils/getData.ts @@ -9,7 +9,7 @@ export async function getData(): Promise { if (!response || response.status !== 200 || !response.data) console.log('ERROR: no data recieved') - const data = [...response.data] + const data = response.data console.log('1. data length', data.length) console.log('1. data ', data) @@ -20,33 +20,34 @@ export async function getData(): Promise { } export function getSummary(network: string, data: Status[]): Summary[] { - console.log('2. data', data) + console.log('2. data', network, data) try { if (data) { let status: Status data.forEach((element) => { if (element.network === network) return (status = element) }) + console.log('network status: ', status) 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 From e3749b7c71de3ad638e732374c58ac879cd59043 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Mon, 17 Oct 2022 15:34:22 +0300 Subject: [PATCH 2/4] Showing emoji for network status --- src/@types/index.ts | 5 +++++ src/pages/index.tsx | 33 +++++++++++++++++++++------------ src/utils/getData.ts | 28 ++++++++++++++++++++++------ 3 files changed, 48 insertions(+), 18 deletions(-) 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/pages/index.tsx b/src/pages/index.tsx index d9639f0..c9b5ccf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,18 +1,26 @@ 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' 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.Warning) { + return '🚧' + } else if (state === State.Down) { + return '🚨' + } + } function statusStyle(state: State) { - console.log('state', state) if (state === State.Down) { return styles.down } else if (state === State.Warning) { @@ -34,13 +42,12 @@ export default function HomePage(): ReactElement { if (statusData) setStatuses(statusData) 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 (
@@ -56,13 +63,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 f365155..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) return data } catch (error) { @@ -20,14 +18,13 @@ export async function getData(): Promise { } export function getSummary(network: string, data: Status[]): Summary[] { - console.log('2. data', network, data) try { if (data) { let status: Status data.forEach((element) => { if (element.network === network) return (status = element) }) - console.log('network status: ', status) + const summary: Summary[] = [ { component: 'Aquarius', status: status?.aquarius?.status }, { component: 'Provider', status: status?.provider?.status }, @@ -59,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 +} From 9a753b7d254eeb9c1b81b42d5e4fe1d62d1a92a3 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Mon, 17 Oct 2022 15:36:37 +0300 Subject: [PATCH 3/4] Removing console logs --- src/pages/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c9b5ccf..dc6bcd1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,17 +6,16 @@ import { getData, getNetworkSUmmary, getSummary } from '../utils/getData' export default function HomePage(): ReactElement { const [network, setNetwork] = useState('mainnet') - const [statuses, setStatuses] = useState() const [summary, setSummary] = useState() const [networks, setNetworks] = useState() function statusIcon(state: State): string { if (state === State.Up) { return '✅' - } else if (state === State.Warning) { - return '🚧' } else if (state === State.Down) { return '🚨' + } else { + return '🚧' } } @@ -39,7 +38,6 @@ export default function HomePage(): ReactElement { useEffect(() => { async function getStatuses() { const statusData = await getData() - if (statusData) setStatuses(statusData) const summaryData = getSummary(network, statusData) if (summaryData) setSummary(summaryData) const networkSummary = getNetworkSUmmary(statusData) From 77c757c19052d6b66f776996d2ade3eaf7fb45dd Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Mon, 17 Oct 2022 16:32:51 +0300 Subject: [PATCH 4/4] Adding Ocean logo --- src/images/logo.svg | 26 ++++++++++++++++++++++++++ src/pages/index.tsx | 4 ++++ 2 files changed, 30 insertions(+) create mode 100644 src/images/logo.svg 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 dc6bcd1..389bfa9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,6 +3,8 @@ import React, { ReactElement, useEffect, useState } from 'react' import { Status, State, Summary, NetworkSummary } from '../@types' import styles from '../styles/Home.module.css' 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') @@ -54,6 +56,8 @@ export default function HomePage(): ReactElement {
+ + {/* Ocean Protocol Logo */}

Ocean Status

Current Status of Ocean Components{' '}