output statusMessages

src/@types/index.ts

@@ -12,54 +12,46 @@ export interface Status {
   network: string
   currentBlock: number
   market: State
-  port: State
   faucet: FaucetStatus | Record<string, never>
   aquarius: AquariusStatus
   provider: ProviderStatus
   subgraph: SubgraphStatus
   operator: OperatorStatus
   dataFarming: State
-  daoGrants: State
   lastUpdatedOn: number
 }
 
-export interface ProviderStatus {
+export interface ComponentStatusBase {
   status: State
-  response?: number
-  version?: string
-  latestRelease?: string
+  statusMessages: string
+  response: number
+  version: string
 }
 
-export interface AquariusStatus {
-  status: State
-  response?: number
-  validChainList?: boolean
-  version?: string
-  monitorVersion?: string
-  latestRelease?: string
-  block?: number
-  validQuery?: boolean
-}
-export interface SubgraphStatus {
-  status: State
-  response?: number
-  version?: string
-  latestRelease?: string
-  block?: number
+export interface ProviderStatus extends ComponentStatusBase {
+  latestRelease: string
 }
 
-export interface OperatorStatus {
-  status: State
-  response?: number
-  version?: string
-  latestRelease?: string
-  environments?: number
-  limitReached?: boolean
+export interface AquariusStatus extends ComponentStatusBase {
+  validChainList: boolean
+  monitorVersion: string
+  latestRelease: string
+  block: number
+  validQuery: boolean
 }
 
-export interface FaucetStatus {
-  status: State
-  response?: number
+export interface SubgraphStatus extends ComponentStatusBase {
+  latestRelease: string
+  block: number
+}
+
+export interface OperatorStatus extends ComponentStatusBase {
+  latestRelease: string
+  environments: number
+  limitReached: boolean
+}
+
+export interface FaucetStatus extends ComponentStatusBase {
   ethBalance?: BigNumber
   ethBalanceSufficient?: boolean
   oceanBalance?: BigNumber

src/pages/index.tsx

@@ -85,8 +85,20 @@ export default function HomePage(): ReactElement {
                           : value.status
                       )}{' '}
                       {key}
+                      <code className={styles.version}>{value.version}</code>
                     </h2>
-                    <code className={styles.version}>{value.version}</code>
+
+                    {value.statusMessages && value.statusMessages !== '' && (
+                      <ul className={styles.messages}>
+                        {value.statusMessages
+                          .split(',')
+                          .map((message: string, i: number) => (
+                            <li key={i} className={styles.statusMessage}>
+                              {message}
+                            </li>
+                          ))}
+                      </ul>
+                    )}
                   </div>
                 ))}
             </div>

src/styles/Home.module.css

@@ -47,6 +47,7 @@
 .card h2 {
   margin: 0 0 1rem 0;
   font-size: var(--font-size-large);
+  margin: 0;
 }
 
 .warning {
@@ -59,6 +60,8 @@
 
 .version {
   color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  margin-left: calc(var(--spacer) / 4);
 }
 
 .logo {
@@ -73,3 +76,16 @@
   fill: var(--brand-alert-green);
   margin-right: calc(var(--spacer) / 6);
 }
+
+.messages {
+  list-style-type: square;
+  margin-left: 1rem;
+  margin-top: calc(var(--spacer) / 4);
+}
+
+.messages li {
+  display: list-item;
+  margin-top: calc(var(--spacer) / 8);
+  list-style-position: outside;
+  color: var(--brand-alert-orange);
+}

src/utils/getData.ts

@@ -10,7 +10,7 @@ export async function getData(): Promise<{ [key: string]: Status }> {
 
     // transform data into object with network names as keys
     const output = Object.fromEntries(
-      response.data.map((item) => [item.network, item])
+      response.data?.map((item) => [item.network, item])
     )
     return output
   } catch (error) {