From ee4d1820ab79108051f86de6e838f465f72c7bdb Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 7 Jun 2019 20:47:34 +0200 Subject: [PATCH 1/2] additions to Ocean versions output * current component is now the minimal variant * new default variant outputting all versions in a table * show contract versions and infos about keeper-contracts (fetched from brizo) * new structure for local state, better typings * component splitup --- .../atoms/VersionNumbers.module.scss | 21 --- .../src/components/atoms/VersionNumbers.tsx | 110 ------------ .../VersionNumbers/VersionTable.module.scss | 54 ++++++ .../atoms/VersionNumbers/VersionTable.tsx | 73 ++++++++ .../atoms/VersionNumbers/index.module.scss | 16 ++ .../index.test.tsx} | 19 +- .../components/atoms/VersionNumbers/index.tsx | 167 ++++++++++++++++++ client/src/components/organisms/Footer.tsx | 2 +- client/src/routes/About.tsx | 5 + client/src/styles/global.scss | 26 ++- 10 files changed, 343 insertions(+), 150 deletions(-) delete mode 100644 client/src/components/atoms/VersionNumbers.module.scss delete mode 100644 client/src/components/atoms/VersionNumbers.tsx create mode 100644 client/src/components/atoms/VersionNumbers/VersionTable.module.scss create mode 100644 client/src/components/atoms/VersionNumbers/VersionTable.tsx create mode 100644 client/src/components/atoms/VersionNumbers/index.module.scss rename client/src/components/atoms/{VersionNumbers.test.tsx => VersionNumbers/index.test.tsx} (51%) create mode 100644 client/src/components/atoms/VersionNumbers/index.tsx diff --git a/client/src/components/atoms/VersionNumbers.module.scss b/client/src/components/atoms/VersionNumbers.module.scss deleted file mode 100644 index 4b7f97e..0000000 --- a/client/src/components/atoms/VersionNumbers.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import '../../styles/variables'; - -.version { - font-family: $font-family-monospace; - font-size: $font-size-mini; - margin-top: $spacer; -} - -.more { - cursor: help; - display: inline-block; - margin-left: $spacer / 4; - margin-bottom: -.1rem; - vertical-align: middle; - - svg { - width: $font-size-mini; - height: $font-size-mini; - fill: currentColor; - } -} diff --git a/client/src/components/atoms/VersionNumbers.tsx b/client/src/components/atoms/VersionNumbers.tsx deleted file mode 100644 index 0faaf99..0000000 --- a/client/src/components/atoms/VersionNumbers.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { PureComponent } from 'react' -import { 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 './VersionNumbers.module.scss' - -import { - aquariusHost, - aquariusPort, - aquariusScheme, - brizoHost, - brizoPort, - brizoScheme, - faucetHost, - faucetPort, - faucetScheme -} from '../../config' - -const commonsVersion = - process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev` - -interface VersionNumbersState { - commons: string - squidJs: string - aquarius: string - brizo: string - faucet: string -} - -export default class VersionNumbers extends PureComponent< - {}, - VersionNumbersState -> { - public state = { - commons: commonsVersion, - squidJs: `v${versionSquid}`, - aquarius: 'v0.0.0', - brizo: 'v0.0.0', - faucet: 'v0.0.0' - } - - // for canceling axios requests - public signal = axios.CancelToken.source() - - public componentWillMount() { - this.setComponentVersions() - } - - public componentWillUnmount() { - this.signal.cancel() - } - - private async setComponentVersions() { - try { - const versionAquarius = await this.getVersion( - aquariusScheme, - aquariusHost, - aquariusPort - ) - this.setState({ aquarius: `v${versionAquarius}` }) - - const versionBrizo = await this.getVersion( - brizoScheme, - brizoHost, - brizoPort - ) - this.setState({ brizo: `v${versionBrizo}` }) - - const versionFaucet = await this.getVersion( - faucetScheme, - faucetHost, - faucetPort - ) - this.setState({ faucet: `v${versionFaucet}` }) - } catch (error) { - !axios.isCancel(error) && Logger.error(error.message) - } - } - - private async getVersion( - scheme: string, - host: string, - port: number | string - ) { - const { data } = await axios.get(`${scheme}://${host}:${port}`, { - headers: { Accept: 'application/json' }, - cancelToken: this.signal.token - }) - const { version } = data - return version - } - - public render() { - const { commons, squidJs, brizo, aquarius, faucet } = this.state - - const componentsOutput = `Squid-js ${squidJs} \nBrizo ${brizo} \nAquarius ${aquarius} \nFaucet ${faucet}` - - return ( -

- - {commons} - -

- ) - } -} diff --git a/client/src/components/atoms/VersionNumbers/VersionTable.module.scss b/client/src/components/atoms/VersionNumbers/VersionTable.module.scss new file mode 100644 index 0000000..23e31f2 --- /dev/null +++ b/client/src/components/atoms/VersionNumbers/VersionTable.module.scss @@ -0,0 +1,54 @@ +@import '../../../styles/variables'; + +.tableWrap { + // make 'em scrollable + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.table { + display: table; + border-top: 1px solid $brand-grey-lighter; + + table { + display: table; + margin-left: $spacer; + width: calc(100% - #{$spacer}); + margin-bottom: -1px; + + td { + padding: $spacer / 6 $spacer / 2; + + // stylelint-disable-next-line selector-max-compound-selectors + &, + code { + font-size: $font-size-mini; + } + } + } + + td { + padding: $spacer / 4 $spacer / 2; + + &:last-child { + text-align: right; + } + + // stylelint-disable-next-line selector-no-qualifying-type + &[colspan] { + padding: 0; + } + } + + a { + color: $brand-grey; + + &:hover, + &:focus { + &, + code { + color: $brand-pink; + } + } + } +} diff --git a/client/src/components/atoms/VersionNumbers/VersionTable.tsx b/client/src/components/atoms/VersionNumbers/VersionTable.tsx new file mode 100644 index 0000000..c8d8b5d --- /dev/null +++ b/client/src/components/atoms/VersionNumbers/VersionTable.tsx @@ -0,0 +1,73 @@ +import React, { Fragment } from 'react' +import { VersionNumbersState as VersionTableProps } from '.' +import styles from './VersionTable.module.scss' +import slugify from '@sindresorhus/slugify' + +const VersionTableContracts = ({ + contracts, + network +}: { + contracts: any + network: string +}) => ( + + + {Object.keys(contracts).map(key => ( + + + + + ))} + +
+ {key} + + + {contracts[key]} + +
+) + +const VersionTable = ({ data }: { data: VersionTableProps }) => ( +
+ + + {Object.entries(data).map(([key, value]) => ( + + + + + + {key === 'keeperContracts' && ( + + + + )} + + ))} + +
+ + {value.software} + + + {value.version} +
+ +
+
+) + +export default VersionTable diff --git a/client/src/components/atoms/VersionNumbers/index.module.scss b/client/src/components/atoms/VersionNumbers/index.module.scss new file mode 100644 index 0000000..ec09158 --- /dev/null +++ b/client/src/components/atoms/VersionNumbers/index.module.scss @@ -0,0 +1,16 @@ +@import '../../../styles/variables'; + +.versions { + margin-top: $spacer * 2; +} + +.versionsTitle { + font-size: $font-size-large; + margin-bottom: $spacer / 2; +} + +.versionsMinimal { + font-family: $font-family-monospace; + font-size: $font-size-mini; + margin-top: $spacer; +} diff --git a/client/src/components/atoms/VersionNumbers.test.tsx b/client/src/components/atoms/VersionNumbers/index.test.tsx similarity index 51% rename from client/src/components/atoms/VersionNumbers.test.tsx rename to client/src/components/atoms/VersionNumbers/index.test.tsx index b67bf5b..330b3f9 100644 --- a/client/src/components/atoms/VersionNumbers.test.tsx +++ b/client/src/components/atoms/VersionNumbers/index.test.tsx @@ -1,21 +1,32 @@ import React from 'react' import { render, waitForElement } from '@testing-library/react' import mockAxios from 'jest-mock-axios' -import VersionNumbers from './VersionNumbers' +import VersionNumbers from '.' afterEach(() => { mockAxios.reset() }) +const mockResponse = { + data: { + software: 'Brizo', + version: '6.6.6', + contracts: { Hello: 'Hello', Another: 'Hello' }, + network: 'hello' + } +} + describe('VersionNumbers', () => { it('renders without crashing', () => { const { container } = render() + mockAxios.mockResponse(mockResponse) + expect(mockAxios.get).toHaveBeenCalled() expect(container.firstChild).toBeInTheDocument() }) - it('returns component versions in link title, prefixed with `v`', async () => { - const { getByTitle } = render() - mockAxios.mockResponse({ data: { version: '6.6.6' } }) + it('minimal component versions in link title, prefixed with `v`', async () => { + const { getByTitle } = render() + mockAxios.mockResponse(mockResponse) expect(mockAxios.get).toHaveBeenCalled() await waitForElement(() => getByTitle(/v6.6.6/)) }) diff --git a/client/src/components/atoms/VersionNumbers/index.tsx b/client/src/components/atoms/VersionNumbers/index.tsx new file mode 100644 index 0000000..4d71f39 --- /dev/null +++ b/client/src/components/atoms/VersionNumbers/index.tsx @@ -0,0 +1,167 @@ +import React, { PureComponent } from 'react' +import { 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 { + aquariusHost, + aquariusPort, + aquariusScheme, + brizoHost, + brizoPort, + brizoScheme, + faucetHost, + faucetPort, + faucetScheme +} from '../../../config' + +import VersionTable from './VersionTable' + +const commonsVersion = + process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev` + +interface VersionNumbersProps { + minimal?: boolean +} + +export interface VersionNumbersState { + commons: { + software: string + version: string + } + squidJs: { + software: string + version: string + } + aquarius: { + software: string + version: string + } + brizo: { + software: string + version: string + network: string + 'keeper-version': string + 'keeper-url': string + contracts: any + } + keeperContracts: { + software: string + version: string + contracts: any + } + faucet: { + software: string + version: string + } +} + +export default class VersionNumbers extends PureComponent< + VersionNumbersProps, + VersionNumbersState +> { + public state = { + commons: { software: 'Commons', version: commonsVersion }, + squidJs: { + software: 'Squid-js', + version: `v${versionSquid}` + }, + aquarius: { software: 'Aquarius', version: '0.0.0' }, + brizo: { + software: 'Brizo', + version: '0.0.0', + contracts: {} as any, + network: '', + 'keeper-version': '0.0.0', + 'keeper-url': '' + }, + keeperContracts: { + software: 'Keeper Contracts', + version: '0.0.0', + contracts: {} as any, + network: '' + }, + faucet: { software: 'Faucet', version: '0.0.0' } + } + + // for canceling axios requests + public signal = axios.CancelToken.source() + + public componentWillMount() { + this.setComponentVersions() + } + + public componentWillUnmount() { + this.signal.cancel() + } + + private async setComponentVersions() { + try { + const aquarius = await this.getData( + aquariusScheme, + aquariusHost, + aquariusPort + ) + aquarius.version !== undefined && this.setState({ aquarius }) + + const brizo = await this.getData(brizoScheme, brizoHost, brizoPort) + brizo.version !== undefined && + this.setState({ + brizo, + keeperContracts: { + ...this.state.keeperContracts, + version: brizo['keeper-version'], + contracts: brizo.contracts + } + }) + + const faucet = await this.getData( + faucetScheme, + faucetHost, + faucetPort + ) + + faucet.version !== undefined && this.setState({ faucet }) + } catch (error) { + !axios.isCancel(error) && Logger.error(error.message) + } + } + + 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 + } + + public render() { + const { minimal } = this.props + const { commons, squidJs, brizo, aquarius, faucet } = this.state + + const mimimalOutput = `${squidJs.software} ${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 + }` + + return minimal ? ( +

+ + {commons.version} ({brizo.network}) + +

+ ) : ( +
+

+ Ocean Components in use +

+ +
+ ) + } +} diff --git a/client/src/components/organisms/Footer.tsx b/client/src/components/organisms/Footer.tsx index 3fe9f56..bbfcfd4 100644 --- a/client/src/components/organisms/Footer.tsx +++ b/client/src/components/organisms/Footer.tsx @@ -31,7 +31,7 @@ const Footer = () => (

- + diff --git a/client/src/routes/About.tsx b/client/src/routes/About.tsx index d076246..512ef34 100644 --- a/client/src/routes/About.tsx +++ b/client/src/routes/About.tsx @@ -1,6 +1,7 @@ import React, { Component } from 'react' import Route from '../components/templates/Route' import Content from '../components/atoms/Content' +import VersionNumbers from '../components/atoms/VersionNumbers' class About extends Component { public render() { @@ -34,6 +35,10 @@ class About extends Component { + + + + ) } diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index f48f88d..2637d21 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -275,34 +275,32 @@ code, kbd, pre, samp { - // lots of !important to overwrite prims.js theme - font-family: $font-family-monospace !important; - font-size: $font-size-small !important; - border-radius: $border-radius !important; - text-shadow: none !important; + font-family: $font-family-monospace; + font-size: $font-size-small; + border-radius: $border-radius; + text-shadow: none; h1 &, h2 &, h3 &, h4 &, h5 & { - font-size: inherit !important; + font-size: inherit; } } :not(pre) > code { - background: darken($brand-white, 5%) !important; - color: $brand-grey-dark !important; + color: $brand-grey-dark; display: inline-block; - padding-left: .3rem !important; - padding-right: .3rem !important; + padding-left: .15rem; + padding-right: .15rem; } pre { display: block; - margin-bottom: $spacer !important; - padding: 0 !important; - background: $brand-black !important; + margin-bottom: $spacer; + padding: 0; + background: $brand-black; // make 'em scrollable overflow: auto; @@ -312,7 +310,7 @@ pre { padding: $spacer; white-space: pre; display: block; - color: $brand-grey-lighter !important; + color: $brand-grey-lighter; overflow-wrap: normal; word-wrap: normal; word-break: normal; From eb59b9dfda914d162796a06213fc2b0de97379ab Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 7 Jun 2019 21:01:34 +0200 Subject: [PATCH 2/2] v prefix fixes --- .../components/atoms/VersionNumbers/VersionTable.tsx | 2 +- client/src/components/atoms/VersionNumbers/index.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/components/atoms/VersionNumbers/VersionTable.tsx b/client/src/components/atoms/VersionNumbers/VersionTable.tsx index c8d8b5d..4533fa0 100644 --- a/client/src/components/atoms/VersionNumbers/VersionTable.tsx +++ b/client/src/components/atoms/VersionNumbers/VersionTable.tsx @@ -50,7 +50,7 @@ const VersionTable = ({ data }: { data: VersionTableProps }) => ( - {value.version} + v{value.version} {key === 'keeperContracts' && ( diff --git a/client/src/components/atoms/VersionNumbers/index.tsx b/client/src/components/atoms/VersionNumbers/index.tsx index 4d71f39..f706942 100644 --- a/client/src/components/atoms/VersionNumbers/index.tsx +++ b/client/src/components/atoms/VersionNumbers/index.tsx @@ -20,7 +20,7 @@ import { import VersionTable from './VersionTable' const commonsVersion = - process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev` + process.env.NODE_ENV === 'production' ? version : `${version}-dev` interface VersionNumbersProps { minimal?: boolean @@ -66,7 +66,7 @@ export default class VersionNumbers extends PureComponent< commons: { software: 'Commons', version: commonsVersion }, squidJs: { software: 'Squid-js', - version: `v${versionSquid}` + version: versionSquid }, aquarius: { software: 'Aquarius', version: '0.0.0' }, brizo: { @@ -112,7 +112,7 @@ export default class VersionNumbers extends PureComponent< brizo, keeperContracts: { ...this.state.keeperContracts, - version: brizo['keeper-version'], + version: brizo['keeper-version'].replace('v', ''), contracts: brizo.contracts } }) @@ -141,7 +141,7 @@ export default class VersionNumbers extends PureComponent< const { minimal } = this.props const { commons, squidJs, brizo, aquarius, faucet } = this.state - const mimimalOutput = `${squidJs.software} ${squidJs.version} \n${ + const mimimalOutput = `${squidJs.software} v${squidJs.version} \n${ brizo.software } v${brizo.version} \n${aquarius.software} v${ aquarius.version @@ -152,7 +152,7 @@ export default class VersionNumbers extends PureComponent< return minimal ? (

- {commons.version} ({brizo.network}) + v{commons.version} ({brizo.network})

) : (