oceanprotocol
/
status-frontend
mirror of https://github.com/oceanprotocol/status-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Showing emoji for network status

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
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 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<string>('mainnet')
const [statuses, setStatuses] = useState<Status[]>()
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) {
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 (
<div className={styles.container}>
<Head>
@ -56,13 +63,15 @@ export default function HomePage(): ReactElement {
<div className={styles.grid}>
{networks && (
<>
{networks.map((value: string, i: number) => (
{networks.map((network: NetworkSummary, i: number) => (
<button
key={i}
className={`${styles.network} ${networkStyle(value)}`}
onClick={() => setNetwork(value)}
className={`${styles.network} ${networkStyle(network.name)}`}
onClick={() => setNetwork(network.name)}
>
{value}
<span>
{network.name} {statusIcon(network.status)}
</span>
</button>
))}
</>

28
src/utils/getData.ts
View File

@ -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<Status[]> {
try {
console.log(`${statusApiUri}`)
const response: AxiosResponse<Status[]> = 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<Status[]> {
}
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
}