version number fixes

* add loading state * add error state * handle connection errors * backwards compatibility for all components * small spinner variant
2023-03-15 18:03:00 +01:00 · 2019-06-11 20:27:02 +02:00 · 2019-06-11 20:27:02 +02:00 · 1b336e2e80
commit 1b336e2e80
parent 89b04e93fd
6 changed files with 171 additions and 73 deletions
--- a/client/src/components/atoms/Spinner.module.scss
+++ b/client/src/components/atoms/Spinner.module.scss
@ -29,6 +29,20 @@
    padding-top: $spacer / 4;
 }

+.small {
+    composes: spinner;
+    margin: 0;
+    display: inline-block;
+
+    &:before {
+        width: $font-size-small;
+        height: $font-size-small;
+        margin-top: -($font-size-small);
+        margin-left: -($font-size-small / 2);
+        border-width: .1rem;
+    }
+}
+
@keyframes spinner {
    to {
        transform: rotate(360deg);
--- a/client/src/components/atoms/Spinner.tsx
+++ b/client/src/components/atoms/Spinner.tsx
@ -1,15 +1,27 @@
 import React from 'react'
 import styles from './Spinner.module.scss'

-const Spinner = ({ message }: { message?: string }) => (
-    <div className={styles.spinner}>
-        {message && (
-            <div
-                className={styles.spinnerMessage}
-                dangerouslySetInnerHTML={{ __html: message }}
-            />
-        )}
-    </div>
-)
+const Spinner = ({
+    message,
+    small,
+    className
+}: {
+    message?: string
+    small?: boolean
+    className?: string
+}) => {
+    const classes = className || (small ? styles.small : styles.spinner)
+
+    return (
+        <div className={classes}>
+            {message && (
+                <div
+                    className={styles.spinnerMessage}
+                    dangerouslySetInnerHTML={{ __html: message }}
+                />
+            )}
+        </div>
+    )
+}

 export default Spinner
--- a/client/src/components/atoms/VersionNumbers/VersionTable.module.scss
+++ b/client/src/components/atoms/VersionNumbers/VersionTable.module.scss
@ -52,3 +52,8 @@
        }
    }
 }
+
+.spinner {
+    composes: spinner, small from '../Spinner.module.scss';
+    margin-right: $spacer;
+}
--- a/client/src/components/atoms/VersionNumbers/VersionTable.tsx
+++ b/client/src/components/atoms/VersionNumbers/VersionTable.tsx
@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 import { VersionNumbersState as VersionTableProps } from '.'
 import styles from './VersionTable.module.scss'
 import slugify from '@sindresorhus/slugify'
+import Spinner from '../Spinner'

 const VersionTableContracts = ({
    contracts,
@ -12,23 +13,24 @@ const VersionTableContracts = ({
 }) => (
    <table>
        <tbody>
-            {Object.keys(contracts).map(key => (
-                <tr key={key}>
-                    <td>
-                        <span className={styles.label}>{key}</span>
-                    </td>
-                    <td>
-                        <a
-                            href={`https://submarine${network === 'duero' &&
-                                '.duero'}.dev-ocean.com/address/${
-                                contracts[key]
-                            }`}
-                        >
-                            <code>{contracts[key]}</code>
-                        </a>
-                    </td>
-                </tr>
-            ))}
+            {contracts &&
+                Object.keys(contracts).map(key => (
+                    <tr key={key}>
+                        <td>
+                            <span className={styles.label}>{key}</span>
+                        </td>
+                        <td>
+                            <a
+                                href={`https://submarine${network === 'duero' &&
+                                    '.duero'}.dev-ocean.com/address/${
+                                    contracts[key]
+                                }`}
+                            >
+                                <code>{contracts[key]}</code>
+                            </a>
+                        </td>
+                    </tr>
+                ))}
        </tbody>
    </table>
 )
@ -42,18 +44,30 @@ const VersionTable = ({ data }: { data: VersionTableProps }) => (
                        <tr key={key}>
                            <td>
                                <a
-                                    href={`https://github.com/oceanprotocol/${slugify(
-                                        value.software
-                                    )}`}
+                                    href={
+                                        value.software &&
+                                        `https://github.com/oceanprotocol/${slugify(
+                                            value.software
+                                        )}`
+                                    }
                                >
                                    <strong>{value.software}</strong>
                                </a>
                            </td>
                            <td>
-                                <code>v{value.version}</code>
+                                {value.isLoading ? (
+                                    <Spinner small className={styles.spinner} />
+                                ) : value.version ? (
+                                    <>
+                                        <code>v{value.version}</code>
+                                        {value.network && `(${value.network})`}
+                                    </>
+                                ) : (
+                                    'Could not get version'
+                                )}
                            </td>
                        </tr>
-                        {key === 'keeperContracts' && (
+                        {key === 'keeperContracts' && data.brizo.contracts && (
                            <tr>
                                <td colSpan={2}>
                                    <VersionTableContracts
--- a/client/src/components/atoms/VersionNumbers/index.tsx
+++ b/client/src/components/atoms/VersionNumbers/index.tsx
@ -36,10 +36,12 @@ export interface VersionNumbersState {
        version: string
    }
    aquarius: {
+        isLoading: boolean
        software: string
        version: string
    }
    brizo: {
+        isLoading: boolean
        software: string
        version: string
        network: string
@ -48,13 +50,16 @@ export interface VersionNumbersState {
        contracts: any
    }
    keeperContracts: {
+        isLoading: boolean
        software: string
        version: string
+        network: string
        contracts: any
    }
    faucet: {
-        software: string
-        version: string
+        isLoading: boolean
+        software?: string
+        version?: string
    }
 }

@ -68,73 +73,121 @@ export default class VersionNumbers extends PureComponent<
            software: 'Squid-js',
            version: versionSquid
        },
-        aquarius: { software: 'Aquarius', version: '0.0.0' },
+        aquarius: {
+            isLoading: true,
+            software: 'Aquarius',
+            version: ''
+        },
        brizo: {
+            isLoading: true,
            software: 'Brizo',
-            version: '0.0.0',
+            version: '',
            contracts: {} as any,
            network: '',
            'keeper-version': '0.0.0',
            'keeper-url': ''
        },
        keeperContracts: {
+            isLoading: true,
            software: 'Keeper Contracts',
-            version: '0.0.0',
+            version: '',
            contracts: {} as any,
            network: ''
        },
-        faucet: { software: 'Faucet', version: '0.0.0' }
+        faucet: {
+            isLoading: true,
+            software: 'Faucet',
+            version: ''
+        }
    }

    // for canceling axios requests
    public signal = axios.CancelToken.source()

    public componentWillMount() {
-        this.setComponentVersions()
+        this.setAquarius()
+        this.setBrizoAndKeeper()
+        this.setFaucet()
    }

    public componentWillUnmount() {
        this.signal.cancel()
    }

-    private async setComponentVersions() {
-        try {
-            const aquarius = await this.getData(
-                aquariusScheme,
-                aquariusHost,
-                aquariusPort
-            )
-            aquarius.version !== undefined && this.setState({ aquarius })
+    private async setAquarius() {
+        const aquarius = await this.getData(
+            aquariusScheme,
+            aquariusHost,
+            aquariusPort
+        )
+        aquarius.version !== undefined &&
+            this.setState({ aquarius: { isLoading: false, ...aquarius } })
+    }

-            const brizo = await this.getData(brizoScheme, brizoHost, brizoPort)
-            brizo.version !== undefined &&
-                this.setState({
-                    brizo,
-                    keeperContracts: {
-                        ...this.state.keeperContracts,
-                        version: brizo['keeper-version'].replace('v', ''),
-                        contracts: brizo.contracts
-                    }
-                })
+    private async setBrizoAndKeeper() {
+        const brizo = await this.getData(brizoScheme, brizoHost, brizoPort)

-            const faucet = await this.getData(
-                faucetScheme,
-                faucetHost,
-                faucetPort
-            )
+        const keeperVersion =
+            brizo['keeper-version'] && brizo['keeper-version'].replace('v', '')
+        const keeperNetwork =
+            brizo['keeper-url'] &&
+            new URL(brizo['keeper-url']).hostname.split('.')[0]

-            faucet.version !== undefined && this.setState({ faucet })
-        } catch (error) {
-            !axios.isCancel(error) && Logger.error(error.message)
+        brizo.version !== undefined &&
+            this.setState({
+                brizo: {
+                    isLoading: false,
+                    ...brizo
+                },
+                keeperContracts: {
+                    ...this.state.keeperContracts,
+                    isLoading: false,
+                    version: keeperVersion,
+                    contracts: brizo.contracts,
+                    network: keeperNetwork
+                }
+            })
+    }
+
+    private async setFaucet() {
+        const faucet = await this.getData(faucetScheme, faucetHost, faucetPort)
+
+        // backwards compatibility
+        function IsJsonString(str: string) {
+            try {
+                JSON.parse(str)
+            } catch (e) {
+                return false
+            }
+            return true
        }
+
+        IsJsonString(faucet) === false &&
+            this.setState({
+                faucet: { ...this.state.faucet, isLoading: false }
+            })
+
+        // the new thing
+        faucet.version !== undefined &&
+            this.setState({ faucet: { isLoading: false, ...faucet } })
    }

    private async getData(scheme: string, host: string, port: number | string) {
-        const { data } = await axios.get(`${scheme}://${host}:${port}`, {
-            headers: { Accept: 'application/json' },
-            cancelToken: this.signal.token
-        })
-        return data
+        try {
+            const response = await axios.get(`${scheme}://${host}:${port}`, {
+                headers: { Accept: 'application/json' },
+                cancelToken: this.signal.token
+            })
+
+            if (response.status !== 200) {
+                Logger.error(response.statusText)
+                return
+            }
+
+            return response.data
+        } catch (error) {
+            !axios.isCancel(error) && Logger.error(error.message)
+        }
    }

    public render() {
@ -152,7 +205,7 @@ export default class VersionNumbers extends PureComponent<
        return minimal ? (
            <p className={styles.versionsMinimal}>
                <a title={mimimalOutput} href={'/about'}>
-                    v{commons.version} ({brizo.network})
+                    v{commons.version} {brizo.network && `(${brizo.network})`}
                </a>
            </p>
        ) : (
--- a/library.json
+++ b/library.json
@ -11,7 +11,7 @@
    },
    {
      "name": "brizo",
-      "version": "~0.3.6"
+      "version": "~0.3.9"
    },
    {
      "name": "aquarius",
@ -23,7 +23,7 @@
    },
    {
      "name": "faucet",
-      "version": "~0.2.0"
+      "version": "~0.2.4"
    }
  ]
 }