oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-11-21 17:36:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Showing emoji for network status

Browse Source
This commit is contained in:
Jamie Hewitt 2022-10-17 15:34:22 +03:00
parent 5776751de0
commit e3749b7c71
3 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/@types/index.ts
View File

@ -75,3 +75,8 @@ export interface Summary {
component: string component: string
status: State status: State
} }
export interface NetworkSummary {
name: string
status: State
}

33
src/pages/index.tsx
View File

@ -1,18 +1,26 @@
import Head from 'next/head' import Head from 'next/head'
import React, { ReactElement, useEffect, useState } from 'react' 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 styles from '../styles/Home.module.css'
import { getData, getSummary } from '../utils/getData' import { getData, getNetworkSUmmary, getSummary } from '../utils/getData'
import { availableNetworks } from '../../app.config'
export default function HomePage(): ReactElement { export default function HomePage(): ReactElement {
const [network, setNetwork] = useState<string>('mainnet') const [network, setNetwork] = useState<string>('mainnet')
const [statuses, setStatuses] = useState<Status[]>() const [statuses, setStatuses] = useState<Status[]>()
const [summary, setSummary] = useState<Summary[]>() const [summary, setSummary] = useState<Summary[]>()
const networks = JSON.parse(availableNetworks) const [networks, setNetworks] = useState<NetworkSummary[]>()
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) { function statusStyle(state: State) {
console.log('state', state)
if (state === State.Down) { if (state === State.Down) {
return styles.down return styles.down
} else if (state === State.Warning) { } else if (state === State.Warning) {
@ -34,13 +42,12 @@ export default function HomePage(): ReactElement {
if (statusData) setStatuses(statusData) if (statusData) setStatuses(statusData)
const summaryData = getSummary(network, statusData) const summaryData = getSummary(network, statusData)
if (summaryData) setSummary(summaryData) if (summaryData) setSummary(summaryData)
const networkSummary = getNetworkSUmmary(statusData)
if (networkSummary) setNetworks(networkSummary)
} }
getStatuses() getStatuses()
}, [network]) }, [network])
console.log('summary', summary)
console.log('~ networks', networks)
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Head> <Head>
@ -56,13 +63,15 @@ export default function HomePage(): ReactElement {
<div className={styles.grid}> <div className={styles.grid}>
{networks && ( {networks && (
<> <>
{networks.map((value: string, i: number) => ( {networks.map((network: NetworkSummary, i: number) => (
<button <button
key={i} key={i}
className={`${styles.network} ${networkStyle(value)}`} className={`${styles.network} ${networkStyle(network.name)}`}
onClick={() => setNetwork(value)} onClick={() => setNetwork(network.name)}
> >
{value} <span>
{network.name} {statusIcon(network.status)}
</span>
</button> </button>
))} ))}
</> </>

28
src/utils/getData.ts
View File

@ -1,17 +1,15 @@
import axios, { AxiosResponse } from 'axios' import axios, { AxiosResponse } from 'axios'
import { Status, Summary } from '../@types' import { NetworkSummary, State, Status, Summary } from '../@types'
import { statusApiUri } from '../../app.config' import { statusApiUri } from '../../app.config'
import { availableNetworks } from '../../app.config'
export async function getData(): Promise<Status[]> { export async function getData(): Promise<Status[]> {
try { try {
console.log(`${statusApiUri}`)
const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`) const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`)
if (!response || response.status !== 200 || !response.data) if (!response || response.status !== 200 || !response.data)
console.log('ERROR: no data recieved') 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)
return data return data
} catch (error) { } catch (error) {
@ -20,14 +18,13 @@ export async function getData(): Promise<Status[]> {
} }
export function getSummary(network: string, data: Status[]): Summary[] { export function getSummary(network: string, data: Status[]): Summary[] {
console.log('2. data', network, data)
try { try {
if (data) { if (data) {
let status: Status let status: Status
data.forEach((element) => { data.forEach((element) => {
if (element.network === network) return (status = element) if (element.network === network) return (status = element)
}) })
console.log('network status: ', status)
const summary: Summary[] = [ const summary: Summary[] = [
{ component: 'Aquarius', status: status?.aquarius?.status }, { component: 'Aquarius', status: status?.aquarius?.status },
{ component: 'Provider', status: status?.provider?.status }, { component: 'Provider', status: status?.provider?.status },
@ -59,3 +56,22 @@ export function getSummary(network: string, data: Status[]): Summary[] {
console.log(error) 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
}