From c4f862baa5fa835ec3ff3aafeefa60f524d011b2 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 17 Jun 2019 20:31:14 +0200 Subject: [PATCH 01/12] switch to using squid-js for version numbers --- .../molecules/VersionNumbers/VersionTable.tsx | 54 +++--- .../molecules/VersionNumbers/index.tsx | 173 ++++++------------ 2 files changed, 81 insertions(+), 146 deletions(-) diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index b9c05be..5dd9913 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -1,14 +1,16 @@ import React, { Fragment } from 'react' -import { VersionNumbersState as VersionTableProps } from '.' +import { OceanPlatformTechStatus } from '@oceanprotocol/squid' +import { VersionNumbersState } from '.' import styles from './VersionTable.module.scss' import slugify from '@sindresorhus/slugify' -import Spinner from '../../atoms/Spinner' const VersionTableContracts = ({ contracts, network }: { - contracts: any + contracts: { + [contractName: string]: string + } network: string }) => ( @@ -41,23 +43,21 @@ const VersionTableContracts = ({ ) const VersionNumber = ({ - isLoading, - software, + name, version, - network + network, + status }: { - isLoading: boolean - software: string - version: string - network: string + name: string + version?: string + network?: string + status: OceanPlatformTechStatus }) => - isLoading ? ( - - ) : version ? ( + version ? ( <> v{version} @@ -65,47 +65,47 @@ const VersionNumber = ({ {network && `(${network})`} ) : ( - Could not get version + {status || 'Could not get version'} ) -const VersionTable = ({ data }: { data: VersionTableProps }) => ( +const VersionTable = ({ data }: { data: VersionNumbersState }) => (
{Object.entries(data).map(([key, value]) => ( - + - {key === 'keeperContracts' && data.brizo.contracts && ( + {/* {value.contracts && ( - )} + )} */} ))} diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx index fb34a23..b1e27b2 100644 --- a/client/src/components/molecules/VersionNumbers/index.tsx +++ b/client/src/components/molecules/VersionNumbers/index.tsx @@ -1,14 +1,17 @@ import React, { PureComponent } from 'react' -import { Logger } from '@oceanprotocol/squid' +import { + OceanPlatformVersions, + OceanPlatformTechStatus, + Logger +} from '@oceanprotocol/squid' import axios from 'axios' import { version } from '../../../../package.json' -import { version as versionSquid } from '@oceanprotocol/squid/package.json' import styles from './index.module.scss' -import { aquariusUri, brizoUri, faucetUri } from '../../../config' +import { faucetUri } from '../../../config' +import { User } from '../../../context' import VersionTable from './VersionTable' -import { isJsonString } from './utils' export const commonsVersion = process.env.NODE_ENV === 'production' ? version : `${version}-dev` @@ -17,40 +20,15 @@ interface VersionNumbersProps { minimal?: boolean } -export interface VersionNumbersState { +export interface VersionNumbersState extends OceanPlatformVersions { commons: { - software: string + name: string version: string } - squidJs: { - software: string - version: string - } - aquarius: { - isLoading: boolean - software: string - version: string - } - brizo: { - isLoading: boolean - software: string - version: string - network: string - 'keeper-version': string - 'keeper-url': string - contracts: any - } - keeperContracts: { - isLoading: boolean - software: string - version: string - network: string - contracts: any - } faucet: { - isLoading: boolean - software?: string - version?: string + name: string + version: string + status: OceanPlatformTechStatus } } @@ -58,99 +36,60 @@ export default class VersionNumbers extends PureComponent< VersionNumbersProps, VersionNumbersState > { - public state = { - commons: { software: 'Commons', version: commonsVersion }, - squidJs: { - software: 'Squid-js', - version: versionSquid - }, - aquarius: { - isLoading: true, - software: 'Aquarius', - version: '' - }, - brizo: { - isLoading: true, - software: 'Brizo', - version: '', - contracts: {} as any, - network: '', - 'keeper-version': '0.0.0', - 'keeper-url': '' - }, - keeperContracts: { - isLoading: true, - software: 'Keeper Contracts', - version: '', - contracts: {} as any, - network: '' + public static contextType = User + + public state: VersionNumbersState = { + commons: { + name: 'Commons', + version: commonsVersion }, faucet: { - isLoading: true, - software: 'Faucet', - version: '' + name: 'Faucet', + version: '', + status: OceanPlatformTechStatus.Loading + }, + squid: { + name: 'Squid-js', + status: OceanPlatformTechStatus.Loading + }, + aquarius: { + name: 'Aquarius', + status: OceanPlatformTechStatus.Loading + }, + brizo: { + name: 'Brizo', + status: OceanPlatformTechStatus.Loading } } // for canceling axios requests public signal = axios.CancelToken.source() - public componentWillMount() { - this.setAquarius() - this.setBrizoAndKeeper() - this.setFaucet() + public componentDidMount() { + this.getOceanVersions() } public componentWillUnmount() { this.signal.cancel() } - private async setAquarius() { - const aquarius = await this.getData(aquariusUri) - aquarius && - aquarius.version !== undefined && - this.setState({ aquarius: { isLoading: false, ...aquarius } }) - } + private async getOceanVersions() { + const { ocean } = this.context + const { versions } = ocean + const componentVersions = versions && (await versions.get()) + const { squid, brizo, aquarius } = componentVersions + console.log(componentVersions) - private async setBrizoAndKeeper() { - const brizo = await this.getData(brizoUri) + // const faucet = await this.getData(faucetUri) - const keeperVersion = - brizo['keeper-version'] && brizo['keeper-version'].replace('v', '') - const keeperNetwork = - brizo['keeper-url'] && - new URL(brizo['keeper-url']).hostname.split('.')[0] - - brizo && - 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(faucetUri) - - // backwards compatibility - isJsonString(faucet) === false && - this.setState({ - faucet: { ...this.state.faucet, isLoading: false } - }) - - // the new thing - faucet && - faucet.version !== undefined && - this.setState({ faucet: { isLoading: false, ...faucet } }) + this.setState({ + commons: { ...this.state.commons }, + squid, + brizo, + aquarius + // faucet + }) + console.log(this.state) } private async getData(uri: string) { @@ -171,15 +110,11 @@ export default class VersionNumbers extends PureComponent< public render() { const { minimal } = this.props - const { commons, squidJs, brizo, aquarius, faucet } = this.state + const { commons, squid, brizo, aquarius } = this.state - const mimimalOutput = `${squidJs.software} v${squidJs.version} \n${ - brizo.software - } v${brizo.version} \n${aquarius.software} v${ - aquarius.version - } \nKeeper Contracts ${brizo['keeper-version']} \n${faucet.software} v${ - faucet.version - }` + const mimimalOutput = `${squid.name} v${squid.version}\n${ + brizo.name + } v${brizo.version}\n${aquarius.name} v${aquarius.version}` return minimal ? (

From d92c3e92f464e6ec53a9f741ac02f881f2dce72f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Jun 2019 13:28:35 +0200 Subject: [PATCH 02/12] wait for ocean object, sort contracts --- .../molecules/VersionNumbers/VersionTable.tsx | 111 +++++++++--------- .../molecules/VersionNumbers/index.tsx | 32 +++-- 2 files changed, 78 insertions(+), 65 deletions(-) diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index 5dd9913..412a24d 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -16,28 +16,31 @@ const VersionTableContracts = ({

- {value.software} + {value.name}
{contracts && - Object.keys(contracts).map(key => { - const submarineLink = `https://submarine${ - network === 'duero' - ? '.duero' - : network === 'pacific' - ? '.pacific' - : '' - }.dev-ocean.com/address/${contracts[key]}` + Object.keys(contracts) + // sort alphabetically + .sort((a, b) => a.localeCompare(b)) + .map(key => { + const submarineLink = `https://submarine${ + network === 'duero' + ? '.duero' + : network === 'pacific' + ? '.pacific' + : '' + }.dev-ocean.com/address/${contracts[key]}` - return ( - - - - - ) - })} + return ( + + + + + ) + })}
- {key} - - - {contracts[key]} - -
+ {key} + + + {contracts[key]} + +
) @@ -72,42 +75,44 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => (
- {Object.entries(data).map(([key, value]) => ( - - - - - - {/* {value.contracts && ( + {Object.entries(data) + .filter(([key, value]) => key !== 'status') + .map(([key, value]) => ( + - + - )} */} - - ))} + {value.contracts && ( + + + + )} + + ))}
- - {value.name} - - - -
- + + {value.name} + + +
+ +
diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx index b1e27b2..8337fcb 100644 --- a/client/src/components/molecules/VersionNumbers/index.tsx +++ b/client/src/components/molecules/VersionNumbers/index.tsx @@ -8,7 +8,7 @@ import axios from 'axios' import { version } from '../../../../package.json' import styles from './index.module.scss' -import { faucetUri } from '../../../config' +// import { faucetUri } from '../../../config' import { User } from '../../../context' import VersionTable from './VersionTable' @@ -43,11 +43,6 @@ export default class VersionNumbers extends PureComponent< name: 'Commons', version: commonsVersion }, - faucet: { - name: 'Faucet', - version: '', - status: OceanPlatformTechStatus.Loading - }, squid: { name: 'Squid-js', status: OceanPlatformTechStatus.Loading @@ -58,7 +53,18 @@ export default class VersionNumbers extends PureComponent< }, brizo: { name: 'Brizo', + network: 'Nile', status: OceanPlatformTechStatus.Loading + }, + faucet: { + name: 'Faucet', + version: '', + status: OceanPlatformTechStatus.Loading + }, + status: { + ok: false, + contracts: false, + network: false } } @@ -75,10 +81,12 @@ export default class VersionNumbers extends PureComponent< private async getOceanVersions() { const { ocean } = this.context - const { versions } = ocean - const componentVersions = versions && (await versions.get()) - const { squid, brizo, aquarius } = componentVersions - console.log(componentVersions) + + // wait until ocean object is properly populated + if (ocean.versions === undefined) return + + const response = await ocean.versions.get() + const { squid, brizo, aquarius, status } = response // const faucet = await this.getData(faucetUri) @@ -86,10 +94,10 @@ export default class VersionNumbers extends PureComponent< commons: { ...this.state.commons }, squid, brizo, - aquarius + aquarius, + status // faucet }) - console.log(this.state) } private async getData(uri: string) { From 15ebb3493162b35f477359a4726902e68346dfcc Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Jun 2019 13:37:38 +0200 Subject: [PATCH 03/12] fetch faucet --- .../molecules/VersionNumbers/VersionTable.tsx | 11 ++++------ .../molecules/VersionNumbers/index.tsx | 22 +++++++++++-------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index 412a24d..495c2e7 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -82,19 +82,16 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => ( {value.name} Date: Tue, 18 Jun 2019 14:35:18 +0200 Subject: [PATCH 04/12] collapse contracts by default --- client/package-lock.json | 9 ++ client/package.json | 1 + client/src/@types/react-collapsed/index.d.ts | 1 + .../VersionNumbers/VersionTable.module.scss | 17 +++ .../molecules/VersionNumbers/VersionTable.tsx | 119 +++++++++++------- .../molecules/VersionNumbers/index.tsx | 26 ++-- 6 files changed, 120 insertions(+), 53 deletions(-) create mode 100644 client/src/@types/react-collapsed/index.d.ts diff --git a/client/package-lock.json b/client/package-lock.json index 92179ec..539084e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -12982,6 +12982,15 @@ } } }, + "react-collapsed": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/react-collapsed/-/react-collapsed-2.0.1.tgz", + "integrity": "sha512-ullymRST/C5iy0szhxpYmIaLUhi+IC8EpFySmUjttoc+ErotaKAx+z1ff0d2PCJF7ksW8crTiOrIwGtFqYw3Tg==", + "requires": { + "@babel/runtime": "^7.3.1", + "raf": "^3.4.0" + } + }, "react-datepicker": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.6.0.tgz", diff --git a/client/package.json b/client/package.json index 2186d8b..b093d2f 100644 --- a/client/package.json +++ b/client/package.json @@ -25,6 +25,7 @@ "moment": "^2.24.0", "query-string": "^6.5.0", "react": "^16.8.6", + "react-collapsed": "^2.0.1", "react-datepicker": "^2.5.0", "react-dom": "^16.8.6", "react-dotdotdot": "^1.3.0", diff --git a/client/src/@types/react-collapsed/index.d.ts b/client/src/@types/react-collapsed/index.d.ts new file mode 100644 index 0000000..cde8d94 --- /dev/null +++ b/client/src/@types/react-collapsed/index.d.ts @@ -0,0 +1 @@ +declare module 'react-collapsed' diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss index 348288e..bbdb0c3 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss +++ b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss @@ -10,6 +10,10 @@ display: table; border-top: 1px solid $brand-grey-lighter; + tr { + position: relative; + } + table { display: table; margin-left: $spacer; @@ -57,3 +61,16 @@ 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; +} diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index 495c2e7..9124a37 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -1,8 +1,9 @@ -import React, { Fragment } from 'react' +import React, { Fragment, useState } from 'react' import { OceanPlatformTechStatus } from '@oceanprotocol/squid' +import slugify from '@sindresorhus/slugify' +import useCollapse from 'react-collapsed' import { VersionNumbersState } from '.' import styles from './VersionTable.module.scss' -import slugify from '@sindresorhus/slugify' const VersionTableContracts = ({ contracts, @@ -71,48 +72,78 @@ const VersionNumber = ({ {status || 'Could not get version'} ) -const VersionTable = ({ data }: { data: VersionNumbersState }) => ( -
- - - {Object.entries(data) - .filter(([key, value]) => key !== 'status') - .map(([key, value]) => ( - - - - - - {value.contracts && ( - - - +const VersionRow = ({ value }: { value: any }) => { + const collapseStyles = { + transitionDuration: '0.1s' + } + + const expandStyles = { + transitionDuration: '0.1s' + } + + const { getCollapseProps, getToggleProps, isOpen } = useCollapse({ + collapseStyles, + expandStyles + }) + + return ( + <> + + -
- - {value.name} - - - -
- -
+ {value.contracts && ( +
-
-) + + )} + + {value.name} + + + + + + + {value.contracts && ( + + + + + + )} + + ) +} + +const VersionTable = ({ data }: { data: VersionNumbersState }) => { + return ( +
+ + + {Object.entries(data) + .filter(([key, value]) => key !== 'status') + .map(([key, value]) => ( + + ))} + +
+
+ ) +} export default VersionTable diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx index 1529f16..6f48074 100644 --- a/client/src/components/molecules/VersionNumbers/index.tsx +++ b/client/src/components/molecules/VersionNumbers/index.tsx @@ -120,20 +120,28 @@ export default class VersionNumbers extends PureComponent< } } - public render() { - const { minimal } = this.props + private MinimalOutput = () => { const { commons, squid, brizo, aquarius } = this.state - const mimimalOutput = `${squid.name} v${squid.version}\n${ - brizo.name - } v${brizo.version}\n${aquarius.name} v${aquarius.version}` - - return minimal ? ( + return (

- - v{commons.version} {brizo.network && `(${brizo.network})`} + + v{commons.version} {squid.network && `(${squid.network})`}

+ ) + } + + public render() { + const { minimal } = this.props + + return minimal ? ( + ) : (

From 059ae62f967f40d9635cc729d31ab84fa913df8b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Jun 2019 16:08:37 +0200 Subject: [PATCH 05/12] output overall status --- .../VersionNumbers/VersionStatus.module.scss | 36 +++++++ .../VersionNumbers/VersionStatus.tsx | 29 ++++++ .../VersionNumbers/VersionTable.module.scss | 18 ---- .../molecules/VersionNumbers/VersionTable.tsx | 96 +----------------- .../VersionTableRow.module.scss | 19 ++++ .../VersionNumbers/VersionTableRow.tsx | 99 +++++++++++++++++++ .../molecules/VersionNumbers/index.tsx | 10 +- .../molecules/VersionNumbers/utils.test.ts | 11 --- .../molecules/VersionNumbers/utils.ts | 8 -- 9 files changed, 194 insertions(+), 132 deletions(-) create mode 100644 client/src/components/molecules/VersionNumbers/VersionStatus.module.scss create mode 100644 client/src/components/molecules/VersionNumbers/VersionStatus.tsx create mode 100644 client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss create mode 100644 client/src/components/molecules/VersionNumbers/VersionTableRow.tsx delete mode 100644 client/src/components/molecules/VersionNumbers/utils.test.ts delete mode 100644 client/src/components/molecules/VersionNumbers/utils.ts diff --git a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss b/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss new file mode 100644 index 0000000..18ef84f --- /dev/null +++ b/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; +} diff --git a/client/src/components/molecules/VersionNumbers/VersionStatus.tsx b/client/src/components/molecules/VersionNumbers/VersionStatus.tsx new file mode 100644 index 0000000..4cdc632 --- /dev/null +++ b/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 ( +
+ {Object.entries(status).map(([key, value]) => ( +
+ + {value} + + {key} +
+ ))} +
+ ) +} + +export default VersionStatus diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss index bbdb0c3..a300bd9 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss +++ b/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; -} diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index 9124a37..be5d003 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -1,11 +1,9 @@ -import React, { Fragment, useState } from 'react' -import { OceanPlatformTechStatus } from '@oceanprotocol/squid' -import slugify from '@sindresorhus/slugify' -import useCollapse from 'react-collapsed' +import React from 'react' 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 = ({ ) -const VersionNumber = ({ - name, - version, - network, - status -}: { - name: string - version?: string - network?: string - status: OceanPlatformTechStatus -}) => - version ? ( - <> - - v{version} - - {network && `(${network})`} - - ) : ( - {status || 'Could not get version'} - ) - -const VersionRow = ({ value }: { value: any }) => { - const collapseStyles = { - transitionDuration: '0.1s' - } - - const expandStyles = { - transitionDuration: '0.1s' - } - - const { getCollapseProps, getToggleProps, isOpen } = useCollapse({ - collapseStyles, - expandStyles - }) - - return ( - <> - - - {value.contracts && ( - - )} - - {value.name} - - - - - - - {value.contracts && ( - - - - - - )} - - ) -} - const VersionTable = ({ data }: { data: VersionNumbersState }) => { return (
{Object.entries(data) - .filter(([key, value]) => key !== 'status') + .filter(([key]) => key !== 'status') .map(([key, value]) => ( - + ))}
diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss b/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss new file mode 100644 index 0000000..22c9340 --- /dev/null +++ b/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; +} diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx b/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx new file mode 100644 index 0000000..a2c5cf0 --- /dev/null +++ b/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 ? ( + <> + + v{version} + + {network && `(${network})`} + + ) : ( + + {status === OceanPlatformTechStatus.Loading ? ( + + ) : ( + status || 'Could not get version' + )} + + ) + +const VersionTableRow = ({ value }: { value: any }) => { + const collapseStyles = { + transition: '0.01s' + } + + const expandStyles = { + transition: '0.01s' + } + + const { getCollapseProps, getToggleProps, isOpen } = useCollapse({ + collapseStyles, + expandStyles + }) + + return ( + <> + + + {value.contracts && ( + + )} + + {value.name} + + + + + + + {value.contracts && ( + + + + + + )} + + ) +} + +export default VersionTableRow diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx index 6f48074..a0bd001 100644 --- a/client/src/components/molecules/VersionNumbers/index.tsx +++ b/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< ) : (

- Ocean Components in use + Ocean Components Status

+
) diff --git a/client/src/components/molecules/VersionNumbers/utils.test.ts b/client/src/components/molecules/VersionNumbers/utils.test.ts deleted file mode 100644 index 0fa7677..0000000 --- a/client/src/components/molecules/VersionNumbers/utils.test.ts +++ /dev/null @@ -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('') - expect(testNonJson).toBeFalsy() - }) -}) diff --git a/client/src/components/molecules/VersionNumbers/utils.ts b/client/src/components/molecules/VersionNumbers/utils.ts deleted file mode 100644 index 0b12378..0000000 --- a/client/src/components/molecules/VersionNumbers/utils.ts +++ /dev/null @@ -1,8 +0,0 @@ -export function isJsonString(str: string) { - try { - JSON.parse(str) - } catch (e) { - return false - } - return true -} From 8e9a4c1fd2fdabd2305ace46cb8673dfbc4df7c1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 18 Jun 2019 16:27:23 +0200 Subject: [PATCH 06/12] fix tests --- .../molecules/VersionNumbers/index.test.tsx | 88 ++++++++----------- 1 file changed, 39 insertions(+), 49 deletions(-) diff --git a/client/src/components/molecules/VersionNumbers/index.test.tsx b/client/src/components/molecules/VersionNumbers/index.test.tsx index 6cb97dd..1aad7c9 100644 --- a/client/src/components/molecules/VersionNumbers/index.test.tsx +++ b/client/src/components/molecules/VersionNumbers/index.test.tsx @@ -10,81 +10,71 @@ afterEach(() => { }) const stateMock = { - commons: { software: 'Commons', version: commonsVersion }, - squidJs: { - software: 'Squid-js', - version: versionSquid + commons: { + name: 'Commons', + version: commonsVersion + }, + squid: { + name: 'Squid-js', + status: 'Loading' }, aquarius: { - isLoading: false, - software: 'Aquarius', - version: '' + name: 'Aquarius', + status: 'Loading' }, brizo: { - isLoading: false, - software: 'Brizo', - version: '', - contracts: {}, - network: '', - 'keeper-version': '0.0.0', - 'keeper-url': '' - }, - keeperContracts: { - isLoading: false, - software: 'Keeper Contracts', - version: '', - contracts: {}, - network: '' + name: 'Brizo', + network: 'Nile', + status: 'Loading' }, faucet: { - isLoading: false, - software: 'Faucet', - version: '' + name: 'Faucet', + version: '', + status: 'Loading' + }, + status: { + ok: false, + network: false, + contracts: false } } const stateMockIncomplete = { - commons: { software: 'Commons', version: commonsVersion }, - squidJs: { - software: 'Squid-js', - version: versionSquid + commons: { + name: 'Commons', + version: commonsVersion + }, + squid: { + name: 'Squid-js', + version: undefined }, aquarius: { - isLoading: false, - software: 'Aquarius', + name: 'Aquarius', version: undefined }, brizo: { - isLoading: false, - software: 'Brizo', + name: 'Brizo', version: undefined, contracts: undefined, network: undefined, - 'keeper-version': undefined, - 'keeper-url': undefined - }, - keeperContracts: { - isLoading: false, - software: 'Keeper Contracts', - version: undefined, - contracts: undefined, - network: undefined + keeperVersion: undefined, + keeperUrl: undefined }, faucet: { - isLoading: false, - software: 'Faucet', + name: 'Faucet', version: undefined + }, + status: { + ok: false, + network: false, + contracts: false } } const mockResponse = { data: { - software: 'Brizo', - version: '6.6.6', - contracts: { Hello: 'Hello', Another: 'Hello' }, - network: 'hello', - 'keeper-url': 'https://squid.com', - 'keeper-version': '6.6.6' + software: 'Faucet', + version: '6.6.6' } } From 512f06f7d4555694c44e2632cedf8de96b0d6cc4 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 19 Jun 2019 11:30:25 +0200 Subject: [PATCH 07/12] commit output, network output, keeper version output --- .../VersionNumbers/VersionNumber.module.scss | 22 ++++++++ .../VersionNumbers/VersionNumber.tsx | 53 +++++++++++++++++++ .../VersionNumbers/VersionStatus.module.scss | 1 + .../VersionNumbers/VersionStatus.tsx | 4 +- .../VersionNumbers/VersionTable.module.scss | 10 +++- .../molecules/VersionNumbers/VersionTable.tsx | 16 +++++- .../VersionTableRow.module.scss | 5 -- .../VersionNumbers/VersionTableRow.tsx | 37 ++----------- .../molecules/VersionNumbers/index.tsx | 11 +++- 9 files changed, 115 insertions(+), 44 deletions(-) create mode 100644 client/src/components/molecules/VersionNumbers/VersionNumber.module.scss create mode 100644 client/src/components/molecules/VersionNumbers/VersionNumber.tsx diff --git a/client/src/components/molecules/VersionNumbers/VersionNumber.module.scss b/client/src/components/molecules/VersionNumbers/VersionNumber.module.scss new file mode 100644 index 0000000..0c6e31e --- /dev/null +++ b/client/src/components/molecules/VersionNumbers/VersionNumber.module.scss @@ -0,0 +1,22 @@ +@import '../../../styles/variables'; + +.spinner { + composes: spinner, small from '../../atoms/Spinner.module.scss'; + margin-right: $spacer; +} + +.commit { + margin-left: $spacer / 8; + + code { + color: $brand-grey-light; + font-size: $font-size-mini; + } +} + +.network { + color: $brand-grey-light; + text-transform: capitalize; + margin-left: $spacer / 8; + font-size: $font-size-mini; +} diff --git a/client/src/components/molecules/VersionNumbers/VersionNumber.tsx b/client/src/components/molecules/VersionNumbers/VersionNumber.tsx new file mode 100644 index 0000000..7fcc403 --- /dev/null +++ b/client/src/components/molecules/VersionNumbers/VersionNumber.tsx @@ -0,0 +1,53 @@ +import React from 'react' +import { OceanPlatformTechStatus } from '@oceanprotocol/squid' +import slugify from '@sindresorhus/slugify' +import Spinner from '../../atoms/Spinner' +import styles from './VersionNumber.module.scss' + +const VersionNumber = ({ + name, + version, + network, + status, + commit +}: { + name: string + version?: string + network?: string + status?: OceanPlatformTechStatus + commit?: string +}) => + version ? ( + <> + + v{version} + + {commit && ( + + {commit.substring(0, 7)} + + )} + {network && {` ${network}`}} + + ) : ( + + {status === OceanPlatformTechStatus.Loading ? ( + + ) : ( + status || 'Could not get version' + )} + + ) + +export default VersionNumber diff --git a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss b/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss index 18ef84f..ed2f600 100644 --- a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss +++ b/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss @@ -33,4 +33,5 @@ .indicatorLabel { font-family: $font-family-title; color: $brand-grey; + text-transform: capitalize; } diff --git a/client/src/components/molecules/VersionNumbers/VersionStatus.tsx b/client/src/components/molecules/VersionNumbers/VersionStatus.tsx index 4cdc632..8740a06 100644 --- a/client/src/components/molecules/VersionNumbers/VersionStatus.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionStatus.tsx @@ -19,7 +19,9 @@ const VersionStatus = ({ > {value} - {key} + + {key === 'ok' ? 'components' : key} +
))}

diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss index a300bd9..1a61c31 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss +++ b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss @@ -23,12 +23,20 @@ td { padding: $spacer / 6 $spacer / 2; - // stylelint-disable-next-line selector-max-compound-selectors + // stylelint-disable selector-max-compound-selectors &, code { font-size: $font-size-mini; } } + + tr:first-child td { + &, + code { + font-size: $font-size-small; + } + } + // stylelint-enable selector-max-compound-selectors } td { diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index be5d003..995c045 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -2,18 +2,32 @@ import React from 'react' import { VersionNumbersState } from '.' import VersionTableRow from './VersionTableRow' import styles from './VersionTable.module.scss' +import VersionNumber from './VersionNumber' export const VersionTableContracts = ({ contracts, - network + network, + keeperVersion }: { contracts: { [contractName: string]: string } network: string + keeperVersion?: string }) => ( + + + + {contracts && Object.keys(contracts) // sort alphabetically diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss b/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss index 22c9340..5d5ebfe 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss +++ b/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss @@ -12,8 +12,3 @@ cursor: pointer; color: $brand-grey-light; } - -.spinner { - composes: spinner, small from '../../atoms/Spinner.module.scss'; - margin-right: $spacer; -} diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx b/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx index a2c5cf0..10e6824 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx @@ -1,42 +1,9 @@ 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 ? ( - <> - - v{version} - - {network && `(${network})`} - - ) : ( - - {status === OceanPlatformTechStatus.Loading ? ( - - ) : ( - status || 'Could not get version' - )} - - ) +import VersionNumber from './VersionNumber' const VersionTableRow = ({ value }: { value: any }) => { const collapseStyles = { @@ -79,6 +46,7 @@ const VersionTableRow = ({ value }: { value: any }) => { version={value.version} status={value.status} network={value.network} + commit={value.commit} /> @@ -88,6 +56,7 @@ const VersionTableRow = ({ value }: { value: any }) => { diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx index a0bd001..b6545f8 100644 --- a/client/src/components/molecules/VersionNumbers/index.tsx +++ b/client/src/components/molecules/VersionNumbers/index.tsx @@ -8,14 +8,17 @@ import axios from 'axios' import { version } from '../../../../package.json' import styles from './index.module.scss' -import { faucetUri } from '../../../config' +import { nodeUri, faucetUri } from '../../../config' import { User } from '../../../context' import VersionTable from './VersionTable' import VersionStatus from './VersionStatus' +// construct values which are not part of any response export const commonsVersion = process.env.NODE_ENV === 'production' ? version : `${version}-dev` +const commonsNetwork = new URL(nodeUri).hostname.split('.')[0] +const faucetNetwork = new URL(faucetUri).hostname.split('.')[1] interface VersionNumbersProps { minimal?: boolean @@ -25,10 +28,12 @@ export interface VersionNumbersState extends OceanPlatformVersions { commons: { name: string version: string + network: string } faucet: { name: string version: string + network: string status: OceanPlatformTechStatus } } @@ -39,9 +44,11 @@ export default class VersionNumbers extends PureComponent< > { public static contextType = User + // define a minimal default state to fill UI public state: VersionNumbersState = { commons: { name: 'Commons', + network: commonsNetwork, version: commonsVersion }, squid: { @@ -54,12 +61,12 @@ export default class VersionNumbers extends PureComponent< }, brizo: { name: 'Brizo', - network: 'Nile', status: OceanPlatformTechStatus.Loading }, faucet: { name: 'Faucet', version: '', + network: faucetNetwork, status: OceanPlatformTechStatus.Loading }, status: { From 3e912f9203ac7176d84ed00a217c978843de464d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 19 Jun 2019 11:50:28 +0200 Subject: [PATCH 08/12] output select commons config values --- .../VersionNumbers/VersionTable.module.scss | 10 +---- .../molecules/VersionNumbers/VersionTable.tsx | 37 +++++++++++++++++++ .../VersionTableRow.module.scss | 1 + .../VersionNumbers/VersionTableRow.tsx | 11 +++++- 4 files changed, 48 insertions(+), 11 deletions(-) diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss index 1a61c31..a300bd9 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.module.scss +++ b/client/src/components/molecules/VersionNumbers/VersionTable.module.scss @@ -23,20 +23,12 @@ td { padding: $spacer / 6 $spacer / 2; - // stylelint-disable selector-max-compound-selectors + // stylelint-disable-next-line selector-max-compound-selectors &, code { font-size: $font-size-mini; } } - - tr:first-child td { - &, - code { - font-size: $font-size-small; - } - } - // stylelint-enable selector-max-compound-selectors } td { diff --git a/client/src/components/molecules/VersionNumbers/VersionTable.tsx b/client/src/components/molecules/VersionNumbers/VersionTable.tsx index 995c045..864e2f9 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTable.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTable.tsx @@ -4,6 +4,26 @@ import VersionTableRow from './VersionTableRow' import styles from './VersionTable.module.scss' import VersionNumber from './VersionNumber' +import { + serviceUri, + nodeUri, + aquariusUri, + brizoUri, + brizoAddress, + secretStoreUri, + faucetUri +} from '../../../config' + +const commonsConfig = { + serviceUri, + nodeUri, + aquariusUri, + brizoUri, + brizoAddress, + secretStoreUri, + faucetUri +} + export const VersionTableContracts = ({ contracts, network, @@ -58,6 +78,23 @@ export const VersionTableContracts = ({
+ Keeper Contracts + + +
) +export const VersionTableCommons = () => ( + + + {Object.entries(commonsConfig).map(([key, value]) => ( + + + + + ))} + +
+ {key} + + {value} +
+) + const VersionTable = ({ data }: { data: VersionNumbersState }) => { return (
diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss b/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss index 5d5ebfe..53de934 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss +++ b/client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss @@ -8,6 +8,7 @@ padding: 0; margin: 0; margin-left: -1rem; + margin-top: -.1rem; padding-right: .5rem; cursor: pointer; color: $brand-grey-light; diff --git a/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx b/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx index 10e6824..57c4805 100644 --- a/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx +++ b/client/src/components/molecules/VersionNumbers/VersionTableRow.tsx @@ -2,7 +2,7 @@ import React from 'react' import useCollapse from 'react-collapsed' import slugify from '@sindresorhus/slugify' import styles from './VersionTableRow.module.scss' -import { VersionTableContracts } from './VersionTable' +import { VersionTableContracts, VersionTableCommons } from './VersionTable' import VersionNumber from './VersionNumber' const VersionTableRow = ({ value }: { value: any }) => { @@ -23,7 +23,7 @@ const VersionTableRow = ({ value }: { value: any }) => { <> - {value.contracts && ( + {(value.name === 'Commons' || value.contracts) && (