79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import BigNumber from 'bignumber.js'
|
|
import { formatDistance } from 'date-fns'
|
|
import React from 'react'
|
|
|
|
import { Status } from 'src/components/Status'
|
|
import MachineActions from 'src/components/machineActions/MachineActions'
|
|
import { H3, Label1, P } from 'src/components/typography'
|
|
import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard.js'
|
|
|
|
import styles from '../Machines.styles'
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const Overview = ({ data, onActionSuccess }) => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<div className={classes.contentContainer}>
|
|
<div className={classes.row}>
|
|
<div className={classes.rowItem}>
|
|
<H3>{data.name}</H3>
|
|
</div>
|
|
</div>
|
|
<div className={classes.row}>
|
|
<div className={classes.rowItem}>
|
|
<Label1 className={classes.label3}>Status</Label1>
|
|
{data && data.statuses ? <Status status={data.statuses[0]} /> : null}
|
|
</div>
|
|
</div>
|
|
<div className={classes.row}>
|
|
<div className={classes.rowItem}>
|
|
<Label1 className={classes.label3}>Ping</Label1>
|
|
<P noMargin>
|
|
{data.responseTime
|
|
? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms'
|
|
: 'unavailable'}
|
|
</P>
|
|
</div>
|
|
<div className={classes.rowItem}>
|
|
<Label1 className={classes.label3}>Last ping</Label1>
|
|
<P noMargin>
|
|
{data.lastPing
|
|
? formatDistance(new Date(data.lastPing), new Date(), {
|
|
addSuffix: true
|
|
})
|
|
: 'unknown'}
|
|
</P>
|
|
</div>
|
|
<div className={classes.rowItem}>
|
|
<Label1 className={classes.label3}>Network speed</Label1>
|
|
<P noMargin>
|
|
{data.downloadSpeed
|
|
? new BigNumber(data.downloadSpeed)
|
|
.toFixed(data.downloadSpeed < 10 ? 2 : 0)
|
|
.toString() + ' MB/s'
|
|
: 'unavailable'}
|
|
</P>
|
|
</div>
|
|
</div>
|
|
<div className={classes.row}>
|
|
<div className={classes.rowItem}>
|
|
<Label1 className={classes.label3}>Device ID</Label1>
|
|
<P noMargin>
|
|
<CopyToClipboard buttonClassname={classes.copyToClipboard}>
|
|
{data.deviceId}
|
|
</CopyToClipboard>
|
|
</P>
|
|
</div>
|
|
</div>
|
|
<div className={classes.row}>
|
|
<MachineActions
|
|
machine={data}
|
|
onActionSuccess={onActionSuccess}></MachineActions>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Overview
|