mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
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
This commit is contained in:
parent
e4994308ad
commit
ee4d1820ab
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
@ -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 (
|
|
||||||
<p className={styles.version}>
|
|
||||||
<a
|
|
||||||
title={componentsOutput}
|
|
||||||
href={`https://github.com/oceanprotocol/commons/releases/tag/${commons}`}
|
|
||||||
>
|
|
||||||
{commons}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
73
client/src/components/atoms/VersionNumbers/VersionTable.tsx
Normal file
73
client/src/components/atoms/VersionNumbers/VersionTable.tsx
Normal file
@ -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
|
||||||
|
}) => (
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)
|
||||||
|
|
||||||
|
const VersionTable = ({ data }: { data: VersionTableProps }) => (
|
||||||
|
<div className={styles.tableWrap}>
|
||||||
|
<table className={styles.table}>
|
||||||
|
<tbody>
|
||||||
|
{Object.entries(data).map(([key, value]) => (
|
||||||
|
<Fragment key={key}>
|
||||||
|
<tr key={key}>
|
||||||
|
<td>
|
||||||
|
<a
|
||||||
|
href={`https://github.com/oceanprotocol/${slugify(
|
||||||
|
value.software
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
<strong>{value.software}</strong>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{value.version}</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{key === 'keeperContracts' && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={2}>
|
||||||
|
<VersionTableContracts
|
||||||
|
contracts={data.brizo.contracts}
|
||||||
|
network={data.brizo.network}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default VersionTable
|
16
client/src/components/atoms/VersionNumbers/index.module.scss
Normal file
16
client/src/components/atoms/VersionNumbers/index.module.scss
Normal file
@ -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;
|
||||||
|
}
|
@ -1,21 +1,32 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { render, waitForElement } from '@testing-library/react'
|
import { render, waitForElement } from '@testing-library/react'
|
||||||
import mockAxios from 'jest-mock-axios'
|
import mockAxios from 'jest-mock-axios'
|
||||||
import VersionNumbers from './VersionNumbers'
|
import VersionNumbers from '.'
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
mockAxios.reset()
|
mockAxios.reset()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const mockResponse = {
|
||||||
|
data: {
|
||||||
|
software: 'Brizo',
|
||||||
|
version: '6.6.6',
|
||||||
|
contracts: { Hello: 'Hello', Another: 'Hello' },
|
||||||
|
network: 'hello'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
describe('VersionNumbers', () => {
|
describe('VersionNumbers', () => {
|
||||||
it('renders without crashing', () => {
|
it('renders without crashing', () => {
|
||||||
const { container } = render(<VersionNumbers />)
|
const { container } = render(<VersionNumbers />)
|
||||||
|
mockAxios.mockResponse(mockResponse)
|
||||||
|
expect(mockAxios.get).toHaveBeenCalled()
|
||||||
expect(container.firstChild).toBeInTheDocument()
|
expect(container.firstChild).toBeInTheDocument()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('returns component versions in link title, prefixed with `v`', async () => {
|
it('minimal component versions in link title, prefixed with `v`', async () => {
|
||||||
const { getByTitle } = render(<VersionNumbers />)
|
const { getByTitle } = render(<VersionNumbers minimal />)
|
||||||
mockAxios.mockResponse({ data: { version: '6.6.6' } })
|
mockAxios.mockResponse(mockResponse)
|
||||||
expect(mockAxios.get).toHaveBeenCalled()
|
expect(mockAxios.get).toHaveBeenCalled()
|
||||||
await waitForElement(() => getByTitle(/v6.6.6/))
|
await waitForElement(() => getByTitle(/v6.6.6/))
|
||||||
})
|
})
|
167
client/src/components/atoms/VersionNumbers/index.tsx
Normal file
167
client/src/components/atoms/VersionNumbers/index.tsx
Normal file
@ -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 ? (
|
||||||
|
<p className={styles.versionsMinimal}>
|
||||||
|
<a title={mimimalOutput} href={'/about'}>
|
||||||
|
{commons.version} ({brizo.network})
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className={styles.versions} id="#oceanversions">
|
||||||
|
<h2 className={styles.versionsTitle}>
|
||||||
|
Ocean Components in use
|
||||||
|
</h2>
|
||||||
|
<VersionTable data={this.state} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
@ -31,7 +31,7 @@ const Footer = () => (
|
|||||||
<AiCommons />
|
<AiCommons />
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<VersionNumbers />
|
<VersionNumbers minimal />
|
||||||
</Content>
|
</Content>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import Route from '../components/templates/Route'
|
import Route from '../components/templates/Route'
|
||||||
import Content from '../components/atoms/Content'
|
import Content from '../components/atoms/Content'
|
||||||
|
import VersionNumbers from '../components/atoms/VersionNumbers'
|
||||||
|
|
||||||
class About extends Component {
|
class About extends Component {
|
||||||
public render() {
|
public render() {
|
||||||
@ -34,6 +35,10 @@ class About extends Component {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Content>
|
</Content>
|
||||||
|
|
||||||
|
<Content>
|
||||||
|
<VersionNumbers />
|
||||||
|
</Content>
|
||||||
</Route>
|
</Route>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -275,34 +275,32 @@ code,
|
|||||||
kbd,
|
kbd,
|
||||||
pre,
|
pre,
|
||||||
samp {
|
samp {
|
||||||
// lots of !important to overwrite prims.js theme
|
font-family: $font-family-monospace;
|
||||||
font-family: $font-family-monospace !important;
|
font-size: $font-size-small;
|
||||||
font-size: $font-size-small !important;
|
border-radius: $border-radius;
|
||||||
border-radius: $border-radius !important;
|
text-shadow: none;
|
||||||
text-shadow: none !important;
|
|
||||||
|
|
||||||
h1 &,
|
h1 &,
|
||||||
h2 &,
|
h2 &,
|
||||||
h3 &,
|
h3 &,
|
||||||
h4 &,
|
h4 &,
|
||||||
h5 & {
|
h5 & {
|
||||||
font-size: inherit !important;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(pre) > code {
|
:not(pre) > code {
|
||||||
background: darken($brand-white, 5%) !important;
|
color: $brand-grey-dark;
|
||||||
color: $brand-grey-dark !important;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: .3rem !important;
|
padding-left: .15rem;
|
||||||
padding-right: .3rem !important;
|
padding-right: .15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: $spacer !important;
|
margin-bottom: $spacer;
|
||||||
padding: 0 !important;
|
padding: 0;
|
||||||
background: $brand-black !important;
|
background: $brand-black;
|
||||||
|
|
||||||
// make 'em scrollable
|
// make 'em scrollable
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
@ -312,7 +310,7 @@ pre {
|
|||||||
padding: $spacer;
|
padding: $spacer;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
display: block;
|
display: block;
|
||||||
color: $brand-grey-lighter !important;
|
color: $brand-grey-lighter;
|
||||||
overflow-wrap: normal;
|
overflow-wrap: normal;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
|
Loading…
Reference in New Issue
Block a user