Getting summary data + mapping it onto homepage

@types/index.ts

@@ -21,14 +21,14 @@ export interface Status {
   lastUpdatedOn: number
 }
 export interface ProviderStatus {
-  status?: State
+  status: State
   response?: number
   version?: string
   latestRelease?: string
 }
 
 export interface AquariusStatus {
-  status?: State
+  status: State
   response?: number
   validChainList?: boolean
   version?: string
@@ -38,7 +38,7 @@ export interface AquariusStatus {
   validQuery?: boolean
 }
 export interface SubgraphStatus {
-  status?: State
+  status: State
   response?: number
   version?: string
   latestRelease?: string
@@ -46,7 +46,7 @@ export interface SubgraphStatus {
 }
 
 export interface OperatorStatus {
-  status?: State
+  status: State
   response?: number
   version?: string
   latestRelease?: string
@@ -54,7 +54,7 @@ export interface OperatorStatus {
   limitReached?: boolean
 }
 export interface FaucetStatus {
-  status?: State
+  status: State
   response?: number
   ethBalance?: BigNumber
   ethBalanceSufficient?: boolean
@@ -71,41 +71,7 @@ export interface Network {
   oceanAddress?: string
 }
 
-export interface dbRow {
-  network: string
-  currentBlock: number
-  aquariusStatus: State
-  aquariusResponse: number
-  aquariusChain: number
-  aquariusVersion: string
-  aquariusMonitorVersion: string
-  aquariusLatestRelease: string
-  aquariusBlock: number
-  aquariusValidQuery: number
-  providerStatus: State
-  providerResponse: number
-  providerVersion: string
-  providerLatestRelease: string
-  subgraphStatus: State
-  subgraphResponse: number
-  subgraphVersion: string
-  subgraphLatestRelease: string
-  subgraphBlock: number
-  operatorStatus: State
-  operatorResponse: number
-  operatorVersion: string
-  operatorLatestRelease: string
-  operatorEnvironments: number
-  operatorLimitReached: number
-  market: State
-  port: State
-  faucetStatus: State
-  faucetResponse: number
-  faucetEthBalance: BigNumber
-  faucetEthBalanceSufficient: number | string
-  faucetOceanBalance: BigNumber
-  faucetOceanBalanceSufficient: number | string
-  dataFarming: State
-  daoGrants: State
-  lastUpdatedOn: number
+export interface Data {
+  component: string
+  status: State
 }

pages/index.tsx

@@ -1,22 +1,39 @@
 import Head from 'next/head'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { Status } from '../@types'
+import { Status, State, Summary } from '../@types'
 import styles from '../styles/Home.module.css'
-import { getData } from '../utils/getData'
+import { getData, getSummary } from '../utils/getData'
 
 export default function HomePage(): ReactElement {
-  const [statuses, setStatuses] = useState<Status[]>()
-  const [network, setNetwork] = useState<number>(1)
+  const [network, setNetwork] = useState<number>(0)
+  const [data, setData] = useState<Summary[]>([
+    {
+      component: 'Loading',
+      status: State.Up
+    }
+  ])
+
+  function style(state: State) {
+    console.log('state', state)
+    if (state === State.Down) {
+      return styles.down
+    } else if (state === State.Warning) {
+      return styles.warning
+    } else {
+      return styles.up
+    }
+  }
 
   useEffect(() => {
     async function getStatuses() {
-      const data = await getData()
-      data && setStatuses(data)
-      // console.log('statuses', statuses)
-      // console.log('statuses?[1].aquarius.status', statuses[1].aquarius.status)
+      const summary = await getSummary(network)
+      console.log('summary', summary)
+      if (summary) setData(summary)
     }
     getStatuses()
-  }, [])
+  }, [network])
+
+  console.log('data', data)
 
   return (
     <div className={styles.container}>
@@ -31,48 +48,14 @@ export default function HomePage(): ReactElement {
           Current Status of Ocean Components{' '}
         </p>
         <div className={styles.grid}>
-          {statuses && (
+          {data && (
             <>
-              <div className={styles.card}>
-                <h2>Aquarius</h2>
-                <p>{statuses[network].aquarius.status}</p>
-              </div>
-              <div className={styles.card}>
-                <h2>Provider</h2>
-                <p>{statuses[network].provider.status}</p>
-              </div>
-
-              <div className={styles.card}>
-                <h2>Subgraph</h2>
-                <p>{statuses[network].subgraph.status}</p>
-              </div>
-
-              <div className={styles.card}>
-                <h2>Market</h2>
-                <p>{statuses[network].market}</p>
-              </div>
-              <div className={styles.card}>
-                <h2>Port</h2>
-                <p>{statuses[network].port}</p>
-              </div>
-              <div className={styles.card}>
-                <h2>Data Farming</h2>
-                <p>{statuses[network].dataFarming}</p>
-              </div>
-              <div className={styles.card}>
-                <h2>Operator Service</h2>
-                <p>{statuses[network].operator.status}</p>
-              </div>
-              {statuses[network].faucet.status && (
-                <div className={styles.card}>
-                  <h2>Faucet</h2>
-                  <p>{statuses[network].faucet.status}</p>
-                </div>
-              )}
-              <div className={styles.card}>
-                <h2>DAO Grants</h2>
-                <p>{statuses[network].daoGrants}</p>
+              {data.map((value: Summary) => (
+                <div className={`${styles.card} ${style(value.status)}`}>
+                  <h2>{value?.component}</h2>
+                  <p>{value?.status}</p>
                 </div>
+              ))}
             </>
           )}
         </div>
@@ -82,3 +65,47 @@ export default function HomePage(): ReactElement {
     </div>
   )
 }
+
+// <>
+//   <div className={`${styles.card} ${style(data[0].status)}`}>
+//     <h2>{data[0].component}</h2>
+//     <p>{data[0].status}</p>
+//   </div>
+//   <div className={styles.card}>
+//     <h2>Provider</h2>
+//     <p>{statuses[network].provider.status}</p>
+//   </div>
+
+//   <div className={styles.card}>
+//     <h2>Subgraph</h2>
+//     <p>{statuses[network].subgraph.status}</p>
+//   </div>
+
+//   <div className={styles.card}>
+//     <h2>Market</h2>
+//     <p>{statuses[network].market}</p>
+//   </div>
+//   <div className={styles.card}>
+//     <h2>Port</h2>
+//     <p>{statuses[network].port}</p>
+//   </div>
+//   <div className={styles.card}>
+//     <h2>Data Farming</h2>
+//     <p>{statuses[network].dataFarming}</p>
+//   </div>
+//   <div className={styles.card}>
+//     <h2>Operator Service</h2>
+//     <p>{statuses[network].operator.status}</p>
+//   </div>
+//   {statuses[network].faucet.status && (
+//     <div className={styles.card}>
+//       <h2>Faucet</h2>
+//       <p>{statuses[network].faucet.status}</p>
+//     </div>
+//   )}
+//   <div className={styles.card}>
+//     <h2>DAO Grants</h2>
+//     <p>{statuses[network].daoGrants}</p>
+//   </div>
+// </>
+// }

styles/Home.module.css

@@ -79,12 +79,16 @@
   text-align: left;
   color: inherit;
   text-decoration: none;
-  border: 1px solid #eaeaea;
+
   border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
   max-width: 300px;
 }
 
+.warning {
+  border: 1px solid #eac146;
+}
+
 .card:hover,
 .card:focus,
 .card:active {

utils/getData.ts

@@ -1,18 +1,56 @@
 import axios, { AxiosResponse } from 'axios'
-import { Status } from '../@types'
+import { Status, Summary } from '../@types'
 import { statusServiceUri } from '../app.config'
 
-export async function getData(): Promise<Status[] | void> {
+export async function getData(): Promise<Status[]> {
   try {
     const response: AxiosResponse<Status[]> = await axios.get(
       `${statusServiceUri}`
     )
-    if (!response || response.status !== 200 || !response.data) return
+    if (!response || response.status !== 200 || !response.data)
+      console.log('ERROR: no data recieved')
 
     const data = { ...response.data }
     console.log('data', data)
+
     return data
   } catch (error) {
     console.log(error)
   }
 }
+
+export async function getSummary(network: number): Promise<Summary[]> {
+  try {
+    const data = await getData()
+    console.log('data', data)
+
+    const summary: Summary[] = [
+      { component: 'Aquarius', status: data[network].aquarius.status },
+      { component: 'Provider', status: data[network].provider.status },
+      { component: 'Subgraph', status: data[network].subgraph.status },
+      { component: 'Market', status: data[network].market },
+      { component: 'Port', status: data[network].port },
+      {
+        component: 'Data Farming',
+        status: data[network].dataFarming
+      },
+      {
+        component: 'Operator Service',
+        status: data[network].operator.status
+      },
+      {
+        component: 'DAO Grants',
+        status: data[network].daoGrants
+      }
+    ]
+
+    return summary
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// data[network].faucet.status && {
+//   component: 'Faucet',
+//   status: data[network].faucet.status
+// }