Merge pull request #1 from oceanprotocol/improvements
Showing an emoji to indicate the status of the network
This commit is contained in:
Jamie Hewitt
GitHub
commit
d7afe55abc
|
|
@ -75,3 +75,8 @@ export interface Summary {
|
|||
component: string
|
||||
status: State
|
||||
}
|
||||
|
||||
export interface NetworkSummary {
|
||||
name: string
|
||||
status: State
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<svg width="394" height="399" viewBox="0 0 394 399" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M196.742 57.2631C212.525 57.2631 225.33 44.4482 225.33 28.6321C225.33 12.82 212.525 0 196.742 0C180.944 0 168.139 12.82 168.139 28.6321C168.139 44.4482 180.944 57.2631 196.742 57.2631Z" />
|
||||
<path d="M29.167 213.019C40.8609 213.019 50.3274 203.527 50.3274 191.826C50.3274 180.125 40.8609 170.644 29.167 170.644C17.4833 170.644 8.00663 180.125 8.00663 191.826C8.00663 203.527 17.4833 213.019 29.167 213.019Z" />
|
||||
<path d="M365.451 213.019C377.129 213.019 386.606 203.527 386.606 191.826C386.606 180.125 377.129 170.644 365.451 170.644C353.762 170.644 344.285 180.125 344.285 191.826C344.285 203.527 353.762 213.019 365.451 213.019Z" />
|
||||
<path d="M218.467 275.433C218.467 287.132 208.991 296.623 197.309 296.623C185.622 296.623 176.146 287.132 176.146 275.433C176.146 263.733 185.622 254.248 197.309 254.248C208.991 254.248 218.467 263.733 218.467 275.433Z" />
|
||||
<path d="M112.662 255.393C124.355 255.393 133.825 245.902 133.825 234.206C133.825 222.5 124.355 213.019 112.662 213.019C100.975 213.019 91.5044 222.5 91.5044 234.206C91.5044 245.902 100.975 255.393 112.662 255.393Z" />
|
||||
<path d="M301.965 234.206C301.965 245.902 292.489 255.393 280.807 255.393C269.114 255.393 259.644 245.902 259.644 234.206C259.644 222.5 269.114 213.019 280.807 213.019C292.489 213.019 301.965 222.5 301.965 234.206Z" />
|
||||
<path d="M29.1748 270.282C37.0689 270.282 43.4646 263.864 43.4646 255.971C43.4646 248.058 37.0689 241.65 29.1748 241.65C21.2703 241.65 14.8695 248.058 14.8695 255.971C14.8695 263.864 21.2703 270.282 29.1748 270.282Z" />
|
||||
<path d="M379.743 255.971C379.743 263.864 373.338 270.282 365.446 270.282C357.548 270.282 351.148 263.864 351.148 255.971C351.148 248.058 357.548 241.65 365.446 241.65C373.338 241.65 379.743 248.058 379.743 255.971Z" />
|
||||
<path d="M197.312 355.031C205.196 355.031 211.604 348.613 211.604 340.705C211.604 332.802 205.196 326.4 197.312 326.4C189.422 326.4 183.009 332.802 183.009 340.705C183.009 348.613 189.422 355.031 197.312 355.031Z" />
|
||||
<path d="M126.962 298.346C126.962 306.251 120.563 312.656 112.67 312.656C104.772 312.656 98.3672 306.251 98.3672 298.346C98.3672 290.435 104.772 284.025 112.67 284.025C120.563 284.025 126.962 290.435 126.962 298.346Z" />
|
||||
<path d="M280.812 312.656C288.693 312.656 295.102 306.251 295.102 298.346C295.102 290.435 288.693 284.025 280.812 284.025C272.91 284.025 266.507 290.435 266.507 298.346C266.507 306.251 272.91 312.656 280.812 312.656Z" />
|
||||
<path d="M36.6018 306.35C36.6018 310.469 33.2752 313.802 29.1697 313.802C25.0588 313.802 21.7323 310.469 21.7323 306.35C21.7323 302.241 25.0588 298.913 29.1697 298.913C33.2752 298.913 36.6018 302.241 36.6018 306.35Z" />
|
||||
<path d="M365.448 313.802C369.546 313.802 372.88 310.469 372.88 306.35C372.88 302.241 369.546 298.913 365.448 298.913C361.335 298.913 358.011 302.241 358.011 306.35C358.011 310.469 361.335 313.802 365.448 313.802Z" />
|
||||
<path d="M204.741 391.102C204.741 395.214 201.407 398.551 197.309 398.551C193.201 398.551 189.872 395.214 189.872 391.102C189.872 386.989 193.201 383.663 197.309 383.663C201.407 383.663 204.741 386.989 204.741 391.102Z" />
|
||||
<path d="M112.662 356.176C116.768 356.176 120.1 352.839 120.1 348.732C120.1 344.615 116.768 341.288 112.662 341.288C108.562 341.288 105.23 344.615 105.23 348.732C105.23 352.839 108.562 356.176 112.662 356.176Z" />
|
||||
<path d="M288.239 348.732C288.239 352.839 284.905 356.176 280.807 356.176C276.688 356.176 273.369 352.839 273.369 348.732C273.369 344.615 276.688 341.288 280.807 341.288C284.905 341.288 288.239 344.615 288.239 348.732Z" />
|
||||
<path d="M225.33 113.381C225.33 129.195 212.525 142.012 196.742 142.012C180.944 142.012 168.139 129.195 168.139 113.381C168.139 97.572 180.944 84.7494 196.742 84.7494C212.525 84.7494 225.33 97.572 225.33 113.381Z" />
|
||||
<path d="M196.742 225.617C212.525 225.617 225.33 212.797 225.33 196.99C225.33 181.173 212.525 168.353 196.742 168.353C180.944 168.353 168.139 181.173 168.139 196.99C168.139 212.797 180.944 225.617 196.742 225.617Z" />
|
||||
<path d="M393.469 113.381C393.469 129.195 380.667 142.012 364.876 142.012C349.081 142.012 336.279 129.195 336.279 113.381C336.279 97.572 349.081 84.7494 364.876 84.7494C380.667 84.7494 393.469 97.572 393.469 113.381Z" />
|
||||
<path d="M28.5977 142.012C44.3907 142.012 57.1903 129.195 57.1903 113.381C57.1903 97.572 44.3907 84.7494 28.5977 84.7494C12.8046 84.7494 0 97.572 0 113.381C0 129.195 12.8046 142.012 28.5977 142.012Z" />
|
||||
<path d="M141.832 71.0062C141.832 86.818 129.031 99.6378 113.237 99.6378C97.4422 99.6378 84.6416 86.818 84.6416 71.0062C84.6416 55.1842 97.4422 42.3747 113.237 42.3747C129.031 42.3747 141.832 55.1842 141.832 71.0062Z" />
|
||||
<path d="M113.237 183.242C129.031 183.242 141.832 170.421 141.832 154.608C141.832 138.8 129.031 125.979 113.237 125.979C97.4422 125.979 84.6416 138.8 84.6416 154.608C84.6416 170.421 97.4422 183.242 113.237 183.242Z" />
|
||||
<path d="M309.971 71.0062C309.971 86.818 297.167 99.6378 281.373 99.6378C265.58 99.6378 252.781 86.818 252.781 71.0062C252.781 55.1842 265.58 42.3747 281.373 42.3747C297.167 42.3747 309.971 55.1842 309.971 71.0062Z" />
|
||||
<path d="M281.373 183.242C297.167 183.242 309.971 170.421 309.971 154.608C309.971 138.8 297.167 125.979 281.373 125.979C265.58 125.979 252.781 138.8 252.781 154.608C252.781 170.421 265.58 183.242 281.373 183.242Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -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<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.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 (
|
||||
<div className={styles.container}>
|
||||
<Head>
|
||||
|
|
@ -53,6 +56,8 @@ export default function HomePage(): ReactElement {
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<main className={styles.main}>
|
||||
<Image src={Logo} height="80rem" />
|
||||
{/* <img src={require('../images/logo.svg')} alt="Ocean Protocol Logo" /> */}
|
||||
<h1 className={styles.title}>Ocean Status</h1>
|
||||
<p className={styles.description}>
|
||||
Current Status of Ocean Components{' '}
|
||||
|
|
@ -60,13 +65,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>
|
||||
))}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
const data = response.data
|
||||
|
||||
return data
|
||||
} catch (error) {
|
||||
|
|
@ -20,33 +18,33 @@ export async function getData(): Promise<Status[]> {
|
|||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue