output overall status

client/src/components/molecules/VersionNumbers/VersionStatus.module.scss

@@ -0,0 +1,36 @@
+@import '../../../styles/variables';
+
+.status {
+    text-align: center;
+    padding-top: $spacer / 2;
+    padding-bottom: $spacer;
+    display: flex;
+    justify-content: space-between;
+}
+
+.element {
+    display: inline-block;
+    margin-left: $spacer / 2;
+    margin-right: $spacer / 2;
+    text-align: center;
+}
+
+.indicator,
+.indicatorActive {
+    display: inline-block;
+    margin-right: $spacer / 4;
+    margin-bottom: -.1rem;
+}
+
+.indicator {
+    composes: statusIndicator from '../AccountStatus/Indicator.module.scss';
+}
+
+.indicatorActive {
+    composes: statusIndicatorActive from '../AccountStatus/Indicator.module.scss';
+}
+
+.indicatorLabel {
+    font-family: $font-family-title;
+    color: $brand-grey;
+}

client/src/components/molecules/VersionNumbers/VersionStatus.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import styles from './VersionStatus.module.scss'
+
+const VersionStatus = ({
+    status
+}: {
+    status: { ok: boolean; contracts: boolean; network: boolean }
+}) => {
+    return (
+        <div className={styles.status}>
+            {Object.entries(status).map(([key, value]) => (
+                <div className={styles.element} key={key}>
+                    <span
+                        className={
+                            value === true
+                                ? styles.indicatorActive
+                                : styles.indicator
+                        }
+                    >
+                        {value}
+                    </span>
+                    <span className={styles.indicatorLabel}>{key}</span>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default VersionStatus

client/src/components/molecules/VersionNumbers/VersionTable.module.scss

@@ -56,21 +56,3 @@
         }
     }
 }
-
-.spinner {
-    composes: spinner, small from '../../atoms/Spinner.module.scss';
-    margin-right: $spacer;
-}
-
-.handle {
-    display: inline-block;
-    border: 0;
-    background: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    margin-left: -1rem;
-    padding-right: .5rem;
-    cursor: pointer;
-    color: $brand-grey-light;
-}

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -1,11 +1,9 @@
-import React, { Fragment, useState } from 'react'
+import React from 'react'
-import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
-import slugify from '@sindresorhus/slugify'
-import useCollapse from 'react-collapsed'
 import { VersionNumbersState } from '.'
+import VersionTableRow from './VersionTableRow'
 import styles from './VersionTable.module.scss'
 
-const VersionTableContracts = ({
+export const VersionTableContracts = ({
     contracts,
     network
 }: {
@@ -46,99 +44,15 @@ const VersionTableContracts = ({
     </table>
 )
 
-const VersionNumber = ({
-    name,
-    version,
-    network,
-    status
-}: {
-    name: string
-    version?: string
-    network?: string
-    status: OceanPlatformTechStatus
-}) =>
-    version ? (
-        <>
-            <a
-                href={`https://github.com/oceanprotocol/${slugify(
-                    name
-                )}/releases/tag/v${version}`}
-            >
-                <code>v{version}</code>
-            </a>
-            {network && `(${network})`}
-        </>
-    ) : (
-        <span>{status || 'Could not get version'}</span>
-    )
-
-const VersionRow = ({ value }: { value: any }) => {
-    const collapseStyles = {
-        transitionDuration: '0.1s'
-    }
-
-    const expandStyles = {
-        transitionDuration: '0.1s'
-    }
-
-    const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
-        collapseStyles,
-        expandStyles
-    })
-
-    return (
-        <>
-            <tr>
-                <td>
-                    {value.contracts && (
-                        <button className={styles.handle} {...getToggleProps()}>
-                            {isOpen ? (
-                                <span>&#9660;</span>
-                            ) : (
-                                <span>&#9658;</span>
-                            )}
-                        </button>
-                    )}
-                    <a
-                        href={`https://github.com/oceanprotocol/${slugify(
-                            value.name || value.software
-                        )}`}
-                    >
-                        <strong>{value.name}</strong>
-                    </a>
-                </td>
-                <td>
-                    <VersionNumber
-                        name={value.name || value.software}
-                        version={value.version}
-                        status={value.status}
-                        network={value.network}
-                    />
-                </td>
-            </tr>
-            {value.contracts && (
-                <tr {...getCollapseProps()}>
-                    <td colSpan={2}>
-                        <VersionTableContracts
-                            contracts={value.contracts}
-                            network={value.network || ''}
-                        />
-                    </td>
-                </tr>
-            )}
-        </>
-    )
-}
-
 const VersionTable = ({ data }: { data: VersionNumbersState }) => {
     return (
         <div className={styles.tableWrap}>
             <table className={styles.table}>
                 <tbody>
                     {Object.entries(data)
-                        .filter(([key, value]) => key !== 'status')
+                        .filter(([key]) => key !== 'status')
                         .map(([key, value]) => (
-                            <VersionRow key={key} value={value} />
+                            <VersionTableRow key={key} value={value} />
                         ))}
                 </tbody>
             </table>

client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss

@@ -0,0 +1,19 @@
+@import '../../../styles/variables';
+
+.handle {
+    display: inline-block;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    margin-left: -1rem;
+    padding-right: .5rem;
+    cursor: pointer;
+    color: $brand-grey-light;
+}
+
+.spinner {
+    composes: spinner, small from '../../atoms/Spinner.module.scss';
+    margin-right: $spacer;
+}

client/src/components/molecules/VersionNumbers/VersionTableRow.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import useCollapse from 'react-collapsed'
+import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
+import slugify from '@sindresorhus/slugify'
+import Spinner from '../../atoms/Spinner'
+import styles from './VersionTableRow.module.scss'
+import { VersionTableContracts } from './VersionTable'
+
+const VersionNumber = ({
+    name,
+    version,
+    network,
+    status
+}: {
+    name: string
+    version?: string
+    network?: string
+    status: OceanPlatformTechStatus
+}) =>
+    version ? (
+        <>
+            <a
+                href={`https://github.com/oceanprotocol/${slugify(
+                    name
+                )}/releases/tag/v${version}`}
+            >
+                <code>v{version}</code>
+            </a>
+            {network && `(${network})`}
+        </>
+    ) : (
+        <span>
+            {status === OceanPlatformTechStatus.Loading ? (
+                <Spinner className={styles.spinner} small />
+            ) : (
+                status || 'Could not get version'
+            )}
+        </span>
+    )
+
+const VersionTableRow = ({ value }: { value: any }) => {
+    const collapseStyles = {
+        transition: '0.01s'
+    }
+
+    const expandStyles = {
+        transition: '0.01s'
+    }
+
+    const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
+        collapseStyles,
+        expandStyles
+    })
+
+    return (
+        <>
+            <tr>
+                <td>
+                    {value.contracts && (
+                        <button className={styles.handle} {...getToggleProps()}>
+                            {isOpen ? (
+                                <span>&#9660;</span>
+                            ) : (
+                                <span>&#9658;</span>
+                            )}
+                        </button>
+                    )}
+                    <a
+                        href={`https://github.com/oceanprotocol/${slugify(
+                            value.name || value.software
+                        )}`}
+                    >
+                        <strong>{value.name}</strong>
+                    </a>
+                </td>
+                <td>
+                    <VersionNumber
+                        name={value.name || value.software}
+                        version={value.version}
+                        status={value.status}
+                        network={value.network}
+                    />
+                </td>
+            </tr>
+            {value.contracts && (
+                <tr {...getCollapseProps()}>
+                    <td colSpan={2}>
+                        <VersionTableContracts
+                            contracts={value.contracts}
+                            network={value.network || ''}
+                        />
+                    </td>
+                </tr>
+            )}
+        </>
+    )
+}
+
+export default VersionTableRow

client/src/components/molecules/VersionNumbers/index.tsx

@@ -12,6 +12,7 @@ import { faucetUri } from '../../../config'
 import { User } from '../../../context'
 
 import VersionTable from './VersionTable'
+import VersionStatus from './VersionStatus'
 
 export const commonsVersion =
     process.env.NODE_ENV === 'production' ? version : `${version}-dev`
@@ -63,15 +64,15 @@ export default class VersionNumbers extends PureComponent<
         },
         status: {
             ok: false,
-            contracts: false,
+            network: false,
-            network: false
+            contracts: false
         }
     }
 
     // for canceling axios requests
     public signal = axios.CancelToken.source()
 
-    public componentDidMount() {
+    public async componentDidMount() {
         this.getOceanVersions()
         this.getFaucetVersion()
     }
@@ -145,8 +146,9 @@ export default class VersionNumbers extends PureComponent<
         ) : (
             <div className={styles.versions} id="#oceanversions">
                 <h2 className={styles.versionsTitle}>
-                    Ocean Components in use
+                    Ocean Components Status
                 </h2>
+                <VersionStatus status={this.state.status} />
                 <VersionTable data={this.state} />
             </div>
         )

client/src/components/molecules/VersionNumbers/utils.test.ts

@@ -1,11 +0,0 @@
-import { isJsonString } from './utils'
-
-describe('isJsonString', () => {
-    it('detects json correctly', () => {
-        const testJson = isJsonString('{ "hello": "squid" }')
-        expect(testJson).toBeTruthy()
-
-        const testNonJson = isJsonString('<strong>')
-        expect(testNonJson).toBeFalsy()
-    })
-})

client/src/components/molecules/VersionNumbers/utils.ts

@@ -1,8 +0,0 @@
-export function isJsonString(str: string) {
-    try {
-        JSON.parse(str)
-    } catch (e) {
-        return false
-    }
-    return true
-}