Merge pull request #1 from oceanprotocol/improvements

Showing an emoji to indicate the status of the network

src/@types/index.ts

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

src/images/logo.svg

@@ -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>

src/pages/index.tsx

@@ -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>
               ))}
             </>

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<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
+}