status-frontend/src/pages/index.tsx

import Head from 'next/head'
import React, { Fragment, ReactElement } from 'react'
import { State } from '../@types'
import styles from '../styles/Home.module.css'
import { getData } from '../utils/getData'
import LogoAsset from '../images/logo.svg'
import CheckAsset from '../images/check.svg'
import GithubAsset from '../images/github.svg'
import addresses from '@oceanprotocol/contracts/addresses/address.json'
import { statusApiUri } from '../../app.config'
import relativeDate from 'tiny-relative-date'
import useSWR from 'swr'

function statusIcon(state: State): ReactElement {
  if (state === State.Normal) {
    return <CheckAsset className={`${styles.icon} ${styles.check}`} />
  } else if (state === State.Outage) {
    return <span className={styles.icon}>🚨</span>
  } else {
    return <span className={styles.icon}>🚧</span>
  }
}

function statusStyle(state: State) {
  if (state === State.Outage) {
    return styles.outage
  } else if (state === State.Degraded) {
    return styles.degraded
  } else {
    return styles.normal
  }
}

export default function HomePage(): ReactElement {
  const { data, error } = useSWR(statusApiUri, getData, {
    refreshInterval: 60000
  })
  const isLoading = !data && !error

  return (
    <div className={styles.app}>
      <Head>
        <title>Ocean Protocol Status</title>
        <meta
          name="description"
          content="Status overview of all deployed components hosted by the Ocean Protocol Foundation."
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <header className={styles.header}>
        <LogoAsset className={styles.logo} />

        <h1 className={styles.title}>Ocean Protocol Status</h1>
        <p className={styles.description}>
          Status overview of all{' '}
          <a href="https://docs.oceanprotocol.com/core-concepts/networks">
            deployed components
          </a>{' '}
          hosted by the Ocean Protocol Foundation.
        </p>
      </header>

      <main className={styles.content}>
        {isLoading ? (
          <div className={styles.loading}>Loading...</div>
        ) : error ? (
          <div className={styles.loading}>{error}</div>
        ) : (
          Object.entries(data || {}).map(([networkName, value]) => (
            <Fragment key={networkName}>
              <h2 className={styles.networkName}>
                {networkName == 'general' ? null : (
                  <>
                    {networkName}
                    <span
                      className={styles.date}
                      title={`Last update: ${new Date(value.lastUpdatedOn)}`}
                    >
                      {relativeDate(new Date(value.lastUpdatedOn))}
                    </span>
                  </>
                )}
              </h2>
              <div className={styles.grid}>
                {value.components.map((component) => (
                  <div
                    key={component.name}
                    className={`${styles.card} ${statusStyle(
                      component.status
                    )}`}
                  >
                    <h2 className={styles.titleComponent}>
                      {statusIcon(component.status)}{' '}
                      <a
                        href={component.url}
                        title="Go to tested endpoint"
                        target="_blank"
                        rel="noreferrer"
                      >
                        {component.name}
                      </a>
                      <code className={styles.version} title="deployed version">
                        {component.version}
                      </code>
                    </h2>

                    {component.statusMessages?.length ? (
                      <ul className={styles.messages}>
                        {component.statusMessages.map(
                          (message: string, i: number) => (
                            <li key={i} className={styles.statusMessage}>
                              {message}
                            </li>
                          )
                        )}
                      </ul>
                    ) : null}
                    <footer className={styles.links}>
                      {component.name !== 'data-farming' &&
                        component.name !== 'cexa' && (
                          <a
                            href={`https://github.com/oceanprotocol/${
                              component.name === 'subgraph' ? 'ocean-' : ''
                            }${
                              component.name === 'event-monitor'
                                ? 'aquarius'
                                : component.name
                            }`}
                            target="_blank"
                            rel="noreferrer"
                            title="Go to GitHub repository"
                          >
                            <GithubAsset className={styles.icon} />
                          </a>
                        )}
                    </footer>
                  </div>
                ))}
              </div>

              {networkName !== 'general' && (
                <details className={styles.contracts}>
                  <summary>
                    <h3 className={styles.titleComponent}>
                      Deployed Contracts
                    </h3>
                  </summary>
                  <ul>
                    {Object.entries((addresses as any)[networkName]).map(
                      ([key, value]: [
                        key: string,
                        value: string | { [key: number]: string }
                      ]) =>
                        key !== 'chainId' &&
                        key !== 'startBlock' && (
                          <li key={key}>
                            <code className={styles.key}>{key}</code>
                            <code>
                              {typeof value === 'string'
                                ? value
                                : JSON.stringify(value, null, 2)}
                            </code>
                          </li>
                        )
                    )}
                  </ul>
                </details>
              )}
            </Fragment>
          ))
        )}
      </main>

      <footer className={styles.footer}></footer>
    </div>
  )
}
next.js setup 2022-09-29 16:25:10 +02:00			`import Head from 'next/head'`
data fetching with useSWR 2022-10-20 11:14:31 +02:00			`import React, { Fragment, ReactElement } from 'react'`
			`import { State } from '../@types'`
next.js setup 2022-09-29 16:25:10 +02:00			`import styles from '../styles/Home.module.css'`
huge data flow simplification 2022-10-18 19:17:32 +02:00			`import { getData } from '../utils/getData'`
layout & style updates 2022-10-18 16:27:41 +02:00			`import LogoAsset from '../images/logo.svg'`
switch checkmark to asset, remove port & dao grants 2022-10-18 17:20:56 +02:00			`import CheckAsset from '../images/check.svg'`
link some things 2022-10-19 21:20:09 +02:00			`import GithubAsset from '../images/github.svg'`
output contract addresses 2022-10-18 21:52:14 +02:00			`import addresses from '@oceanprotocol/contracts/addresses/address.json'`
data structure updates 2022-10-19 17:40:44 +02:00			`import { statusApiUri } from '../../app.config'`
show last updated on per-network basis 2022-10-19 19:17:15 +02:00			`import relativeDate from 'tiny-relative-date'`
data fetching with useSWR 2022-10-20 11:14:31 +02:00			`import useSWR from 'swr'`
Calling getStatus from home page 2022-09-30 12:47:53 +02:00
switch checkmark to asset, remove port & dao grants 2022-10-18 17:20:56 +02:00			`function statusIcon(state: State): ReactElement {`
update state 2022-10-20 10:32:03 +02:00			`if (state === State.Normal) {`
style updates 2022-10-18 20:14:49 +02:00			return <CheckAsset className={`${styles.icon} ${styles.check}`} />
update state 2022-10-20 10:32:03 +02:00			`} else if (state === State.Outage) {`
style updates 2022-10-18 20:14:49 +02:00			`return <span className={styles.icon}>🚨</span>`
layout & style updates 2022-10-18 16:27:41 +02:00			`} else {`
style updates 2022-10-18 20:14:49 +02:00			`return <span className={styles.icon}>🚧</span>`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`}`
layout & style updates 2022-10-18 16:27:41 +02:00			`}`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00
layout & style updates 2022-10-18 16:27:41 +02:00			`function statusStyle(state: State) {`
update state 2022-10-20 10:32:03 +02:00			`if (state === State.Outage) {`
adapt styles to new severities 2022-10-20 11:00:36 +02:00			`return styles.outage`
update state 2022-10-20 10:32:03 +02:00			`} else if (state === State.Degraded) {`
adapt styles to new severities 2022-10-20 11:00:36 +02:00			`return styles.degraded`
layout & style updates 2022-10-18 16:27:41 +02:00			`} else {`
adapt styles to new severities 2022-10-20 11:00:36 +02:00			`return styles.normal`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00			`}`
layout & style updates 2022-10-18 16:27:41 +02:00			`}`
Calling getStatus from home page 2022-09-30 12:47:53 +02:00
layout & style updates 2022-10-18 16:27:41 +02:00			`export default function HomePage(): ReactElement {`
data fetching with useSWR 2022-10-20 11:14:31 +02:00			`const { data, error } = useSWR(statusApiUri, getData, {`
			`refreshInterval: 60000`
			`})`
			`const isLoading = !data && !error`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00
next.js setup 2022-09-29 16:25:10 +02:00			`return (`
layout tweaks 2022-10-19 19:10:04 +02:00			`<div className={styles.app}>`
next.js setup 2022-09-29 16:25:10 +02:00			`<Head>`
Editing page to show each component status 2022-09-29 16:42:07 +02:00			`<title>Ocean Protocol Status</title>`
data structure updates 2022-10-19 17:40:44 +02:00			`<meta`
			`name="description"`
			`content="Status overview of all deployed components hosted by the Ocean Protocol Foundation."`
			`/>`
next.js setup 2022-09-29 16:25:10 +02:00			`<link rel="icon" href="/favicon.ico" />`
			`</Head>`
new grid layout 2022-10-18 16:45:01 +02:00
layout tweaks 2022-10-19 19:10:04 +02:00			`<header className={styles.header}>`
layout & style updates 2022-10-18 16:27:41 +02:00			`<LogoAsset className={styles.logo} />`

output contract addresses 2022-10-18 21:52:14 +02:00			`<h1 className={styles.title}>Ocean Protocol Status</h1>`
			`<p className={styles.description}>`
			`Status overview of all{' '}`
			`<a href="https://docs.oceanprotocol.com/core-concepts/networks">`
			`deployed components`
			`</a>{' '}`
			`hosted by the Ocean Protocol Foundation.`
			`</p>`
new grid layout 2022-10-18 16:45:01 +02:00			`</header>`
layout & style updates 2022-10-18 16:27:41 +02:00
layout tweaks 2022-10-19 19:10:04 +02:00			`<main className={styles.content}>`
ui consistency 2022-10-18 22:51:23 +02:00			`{isLoading ? (`
			`<div className={styles.loading}>Loading...</div>`
data structure updates 2022-10-19 17:40:44 +02:00			`) : error ? (`
			`<div className={styles.loading}>{error}</div>`
ui consistency 2022-10-18 22:51:23 +02:00			`) : (`
data structure change, tweak messages display 2022-10-19 13:39:01 +02:00			`Object.entries(data \|\| {}).map(([networkName, value]) => (`
			`<Fragment key={networkName}>`
tweak data ordering 2022-10-19 19:05:19 +02:00			`<h2 className={styles.networkName}>`
show last updated on per-network basis 2022-10-19 19:17:15 +02:00			`{networkName == 'general' ? null : (`
			`<>`
			`{networkName}`
			`<span`
			`className={styles.date}`
			title={`Last update: ${new Date(value.lastUpdatedOn)}`}
			`>`
			`{relativeDate(new Date(value.lastUpdatedOn))}`
			`</span>`
			`</>`
			`)}`
tweak data ordering 2022-10-19 19:05:19 +02:00			`</h2>`
data structure change, tweak messages display 2022-10-19 13:39:01 +02:00			`<div className={styles.grid}>`
data structure updates 2022-10-19 17:40:44 +02:00			`{value.components.map((component) => (`
			`<div`
			`key={component.name}`
			className={`${styles.card} ${statusStyle(
			`component.status`
			)}`}
			`>`
			`<h2 className={styles.titleComponent}>`
link some things 2022-10-19 21:20:09 +02:00			`{statusIcon(component.status)}{' '}`
			`<a`
add url 2022-10-20 10:00:12 +02:00			`href={component.url}`
link some things 2022-10-19 21:20:09 +02:00			`title="Go to tested endpoint"`
			`target="_blank"`
			`rel="noreferrer"`
			`>`
			`{component.name}`
			`</a>`
data structure updates 2022-10-19 17:40:44 +02:00			`<code className={styles.version} title="deployed version">`
			`{component.version}`
			`</code>`
			`</h2>`
output contract addresses 2022-10-18 21:52:14 +02:00
data structure updates 2022-10-19 17:40:44 +02:00			`{component.statusMessages?.length ? (`
			`<ul className={styles.messages}>`
			`{component.statusMessages.map(`
			`(message: string, i: number) => (`
			`<li key={i} className={styles.statusMessage}>`
			`{message}`
			`</li>`
			`)`
			`)}`
			`</ul>`
			`) : null}`
link some things 2022-10-19 21:20:09 +02:00			`<footer className={styles.links}>`
			`{component.name !== 'data-farming' &&`
			`component.name !== 'cexa' && (`
			`<a`
			href={`https://github.com/oceanprotocol/${
			`component.name === 'subgraph' ? 'ocean-' : ''`
fix event-monitor github url 2022-10-31 16:58:54 +01:00			`}${`
			`component.name === 'event-monitor'`
			`? 'aquarius'`
			`: component.name`
			}`}
link some things 2022-10-19 21:20:09 +02:00			`target="_blank"`
			`rel="noreferrer"`
			`title="Go to GitHub repository"`
			`>`
			`<GithubAsset className={styles.icon} />`
			`</a>`
			`)}`
			`</footer>`
data structure updates 2022-10-19 17:40:44 +02:00			`</div>`
			`))}`
data structure change, tweak messages display 2022-10-19 13:39:01 +02:00			`</div>`
output contract addresses 2022-10-18 21:52:14 +02:00
data structure updates 2022-10-19 17:40:44 +02:00			`{networkName !== 'general' && (`
			`<details className={styles.contracts}>`
			`<summary>`
			`<h3 className={styles.titleComponent}>`
			`Deployed Contracts`
			`</h3>`
			`</summary>`
			`<ul>`
			`{Object.entries((addresses as any)[networkName]).map(`
contracts styling 2022-10-19 21:56:12 +02:00			`([key, value]: [`
			`key: string,`
			`value: string \| { [key: number]: string }`
			`]) =>`
data structure updates 2022-10-19 17:40:44 +02:00			`key !== 'chainId' &&`
			`key !== 'startBlock' && (`
			`<li key={key}>`
contracts styling 2022-10-19 21:56:12 +02:00			`<code className={styles.key}>{key}</code>`
			`<code>`
			`{typeof value === 'string'`
			`? value`
			`: JSON.stringify(value, null, 2)}`
			`</code>`
data structure updates 2022-10-19 17:40:44 +02:00			`</li>`
			`)`
			`)}`
			`</ul>`
			`</details>`
			`)}`
data structure change, tweak messages display 2022-10-19 13:39:01 +02:00			`</Fragment>`
			`))`
ui consistency 2022-10-18 22:51:23 +02:00			`)}`
next.js setup 2022-09-29 16:25:10 +02:00			`</main>`

Creating getData util 2022-09-30 12:16:56 +02:00			`<footer className={styles.footer}></footer>`
next.js setup 2022-09-29 16:25:10 +02:00			`</div>`
			`)`
			`}`