oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

output overall status

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-06-18 16:08:37 +02:00
parent 838757f5e8
commit 059ae62f96
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 194 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/components/molecules/VersionNumbers/VersionStatus.module.scss Normal file
View File

@ -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;
}

29
client/src/components/molecules/VersionNumbers/VersionStatus.tsx Normal file
View File

@ -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

18
client/src/components/molecules/VersionNumbers/VersionTable.module.scss
View File

@ -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;
}

96
client/src/components/molecules/VersionNumbers/VersionTable.tsx
View File

@ -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 = ({
</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>

19
client/src/components/molecules/VersionNumbers/VersionTableRow.module.scss Normal file
View File

@ -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;
}

99
client/src/components/molecules/VersionNumbers/VersionTableRow.tsx Normal file
View File

@ -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

10
client/src/components/molecules/VersionNumbers/index.tsx
View File

@ -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>
)

11
client/src/components/molecules/VersionNumbers/utils.test.ts
View File

@ -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()
})
})

8
client/src/components/molecules/VersionNumbers/utils.ts
View File

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