huge data flow simplification

.env.example

@@ -1,2 +1 @@
 NEXT_PUBLIC_STATUS_API_URI='http://localhost:8080'
-NEXT_PUBLIC_NETWORKS='["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'

app.config.js

@@ -1,7 +1,4 @@
 module.exports = {
   statusApiUri:
-    process.env.NEXT_PUBLIC_STATUS_API_URI || 'http://localhost:8000',
+    process.env.NEXT_PUBLIC_STATUS_API_URI || 'http://localhost:8000'
-  availableNetworks:
-    process.env.NEXT_PUBLIC_NETWORKS ||
-    '["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'
 }

src/@types/index.ts

@@ -22,6 +22,7 @@ export interface Status {
   daoGrants: State
   lastUpdatedOn: number
 }
+
 export interface ProviderStatus {
   status: State
   response?: number
@@ -55,6 +56,7 @@ export interface OperatorStatus {
   environments?: number
   limitReached?: boolean
 }
+
 export interface FaucetStatus {
   status: State
   response?: number
@@ -63,23 +65,3 @@ export interface FaucetStatus {
   oceanBalance?: BigNumber
   oceanBalanceSufficient?: boolean
 }
-
-export interface Network {
-  name: string
-  chainId: string
-  test?: boolean
-  faucetWallet?: string
-  rpcUrl?: string
-  oceanAddress?: string
-}
-
-export interface Summary {
-  component: string
-  status: State
-  version?: string
-}
-
-export interface NetworkSummary {
-  name: string
-  status: State
-}

src/pages/index.tsx

@@ -1,8 +1,8 @@
 import Head from 'next/head'
 import React, { Fragment, ReactElement, useEffect, useState } from 'react'
-import { State, Summary, NetworkSummary } from '../@types'
+import { State, Status } from '../@types'
 import styles from '../styles/Home.module.css'
-import { getData, getNetworkSUmmary, getSummary } from '../utils/getData'
+import { getData } from '../utils/getData'
 import LogoAsset from '../images/logo.svg'
 import CheckAsset from '../images/check.svg'
 
@@ -27,16 +27,12 @@ function statusStyle(state: State) {
 }
 
 export default function HomePage(): ReactElement {
-  const [summary, setSummary] = useState<Summary[]>()
+  const [data, setData] = useState<{ [key: string]: Status }>()
-  const [networks, setNetworks] = useState<NetworkSummary[]>()
 
   useEffect(() => {
     async function getStatuses() {
-      const statusData = await getData()
+      const data = await getData()
-      const summaryData = getSummary('mainnet', statusData)
+      setData(data)
-      if (summaryData) setSummary(summaryData)
-      const networkSummary = getNetworkSUmmary(statusData)
-      if (networkSummary) setNetworks(networkSummary)
     }
     getStatuses()
   }, [])
@@ -53,39 +49,48 @@ export default function HomePage(): ReactElement {
         <LogoAsset className={styles.logo} />
 
         <h1 className={styles.title}>Ocean Status</h1>
-        <p className={styles.description}>
+        <p className={styles.description}>Current Status of Ocean Components</p>
-          Current Status of Ocean Components{' '}
-        </p>
       </header>
 
       <main>
-        {networks?.map((network: NetworkSummary, i: number) => (
+        {Object.entries(data || {}).map(([key, value]) => (
-          <Fragment key={i}>
+          <Fragment key={key}>
-            <h2 className={styles.networkName}>{network.name}</h2>
+            <h2 className={styles.networkName}>{key}</h2>
-
             <div className={styles.grid}>
-              {summary?.map((value: Summary) => (
+              {Object.entries(value)
-                <div
+                .filter(
-                  key={value.component}
+                  // TODO: Remove this filter if we fix this on API level
-                  className={`${styles.card} ${statusStyle(value.status)}`}
+                  // Needs a new `components` key under Status response
-                >
+                  ([key]) =>
-                  <h2>
+                    key !== 'currentBlock' &&
-                    {statusIcon(value.status)} {value.component}
+                    key !== 'lastUpdatedOn' &&
-                  </h2>
+                    key !== 'network' &&
-                  <code className={styles.version}>{value.version}</code>
+                    key !== '_id' &&
-                </div>
+                    key !== '__v'
-              ))}
+                )
+                .map(([key, value]) => (
+                  <div
+                    key={key}
+                    className={`${styles.card} ${statusStyle(
+                      // TODO: all component states should be of type Status on API level
+                      key === 'market' || key === 'dataFarming'
+                        ? value
+                        : value.status
+                    )}`}
+                  >
+                    <h2>
+                      {statusIcon(
+                        key === 'market' || key === 'dataFarming'
+                          ? value
+                          : value.status
+                      )}{' '}
+                      {key}
+                    </h2>
+                    <code className={styles.version}>{value.version}</code>
+                  </div>
+                ))}
             </div>
           </Fragment>
-          // <button
-          //   key={i}
-          //   className={`${styles.network} ${networkStyle(network.name)}`}
-          //   onClick={() => setNetwork(network.name)}
-          // >
-          //   <span>
-          //     {network.name} {statusIcon(network.status)}
-          //   </span>
-          // </button>
         ))}
       </main>
 

src/utils/getData.ts

@@ -1,95 +1,19 @@
 import axios, { AxiosResponse } from 'axios'
-import { NetworkSummary, State, Status, Summary } from '../@types'
+import { Status } from '../@types'
 import { statusApiUri } from '../../app.config'
-import { availableNetworks } from '../../app.config'
 
-export async function getData(): Promise<Status[][]> {
+export async function getData(): Promise<{ [key: string]: Status }> {
   try {
-    const response: AxiosResponse<Status[][]> = await axios.get(
+    const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`)
-      `${statusApiUri}`
+    if (!response?.data || response.status !== 200)
+      throw Error('ERROR: no data recieved')
+
+    // transform data into object with network names as keys
+    const output = Object.fromEntries(
+      response.data.map((item) => [item.network, item])
     )
-    if (!response || response.status !== 200 || !response.data)
+    return output
-      console.log('ERROR: no data recieved')
-
-    const data = response.data
-
-    return data
   } catch (error) {
     console.error(error.message)
   }
 }
-
-export function getSummary(network: string, data: Status[][]): Summary[] {
-  try {
-    if (data) {
-      let status: Status
-
-      data.forEach((element) => {
-        if (element[0].network === network) return (status = element[0])
-      })
-
-      // TODO: this is not fun. Needs a smart iteration over response instead of
-      // aall this hardcoding
-      const summary: Summary[] = [
-        {
-          component: 'Aquarius',
-          status: status?.aquarius?.status,
-          version: status?.aquarius?.version
-        },
-        {
-          component: 'Provider',
-          status: status?.provider?.status,
-          version: status?.provider?.version
-        },
-        {
-          component: 'Subgraph',
-          status: status?.subgraph?.status,
-          version: status?.subgraph?.version
-        },
-        {
-          component: 'Market',
-          status: status?.market
-        },
-        {
-          component: 'Data Farming',
-          status: status?.dataFarming
-        },
-        {
-          component: 'Operator Service',
-          status: status?.operator?.status,
-          version: status?.operator?.version
-        }
-      ]
-      status?.faucet?.status &&
-        summary.push({
-          component: 'Faucet',
-          status: status.faucet.status
-        })
-
-      return summary
-    }
-  } catch (error) {
-    console.error(error.message)
-  }
-}
-
-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
-}