From e3749b7c71de3ad638e732374c58ac879cd59043 Mon Sep 17 00:00:00 2001 From: Jamie Hewitt Date: Mon, 17 Oct 2022 15:34:22 +0300 Subject: [PATCH] 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 +}