143 lines
4.2 KiB
JavaScript
143 lines
4.2 KiB
JavaScript
import { Grid /*, Divider */ } from '@material-ui/core'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import BigNumber from 'bignumber.js'
|
|
import React from 'react'
|
|
|
|
// import { Status } from 'src/components/Status'
|
|
// import { ReactComponent as LinkIcon } from 'src/styling/icons/button/link/zodiac.svg'
|
|
import MachineActions from 'src/components/machineActions/MachineActions'
|
|
import { modelPrettifier } from 'src/utils/machine'
|
|
import { formatDate } from 'src/utils/timezones'
|
|
|
|
import { labelStyles, machineDetailsStyles } from './MachineDetailsCard.styles'
|
|
|
|
// const supportArtices = [
|
|
// {
|
|
// // Default article for non-maped statuses
|
|
// code: undefined,
|
|
// label: 'Troubleshooting',
|
|
// article:
|
|
// 'https://support.lamassu.is/hc/en-us/categories/115000075249-Troubleshooting'
|
|
// }
|
|
// // TODO add Stuck and Fully Functional statuses articles for the new-admins
|
|
// ]
|
|
|
|
// const article = ({ code: status }) =>
|
|
// supportArtices.find(({ code: article }) => article === status)
|
|
|
|
const useLStyles = makeStyles(labelStyles)
|
|
|
|
const Label = ({ children }) => {
|
|
const classes = useLStyles()
|
|
|
|
return <div className={classes.label}>{children}</div>
|
|
}
|
|
|
|
const useMDStyles = makeStyles(machineDetailsStyles)
|
|
|
|
const Container = ({ children, ...props }) => (
|
|
<Grid container spacing={4} {...props}>
|
|
{children}
|
|
</Grid>
|
|
)
|
|
|
|
const Item = ({ children, ...props }) => (
|
|
<Grid item xs {...props}>
|
|
{children}
|
|
</Grid>
|
|
)
|
|
|
|
const MachineDetailsRow = ({ it: machine, onActionSuccess, timezone }) => {
|
|
const classes = useMDStyles()
|
|
|
|
return (
|
|
<Container className={classes.wrapper}>
|
|
{/* <Item xs={5}>
|
|
<Container>
|
|
<Item>
|
|
<Label>Statuses</Label>
|
|
<ul className={classes.list}>
|
|
{machine.statuses.map((status, index) => (
|
|
<li className={classes.item} key={index}>
|
|
<Status status={status} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Item>
|
|
<Item>
|
|
<Label>Lamassu Support article</Label>
|
|
<ul className={classes.list}>
|
|
{machine.statuses
|
|
.map(article)
|
|
.map(({ label, article }, index) => (
|
|
<li className={classes.item} key={index}>
|
|
<a
|
|
className={classes.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href={article}>
|
|
'{label}' <LinkIcon />
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Item>
|
|
</Container>
|
|
</Item>
|
|
<Divider
|
|
orientation="vertical"
|
|
flexItem
|
|
className={classes.separator}
|
|
/> */}
|
|
<Item xs>
|
|
<Container className={classes.row}>
|
|
<Item xs={2}>
|
|
<Label>Machine model</Label>
|
|
<span>{modelPrettifier[machine.model]}</span>
|
|
</Item>
|
|
<Item xs={4}>
|
|
<Label>Paired at</Label>
|
|
<span>
|
|
{timezone &&
|
|
formatDate(machine.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')}
|
|
</span>
|
|
</Item>
|
|
<Item xs={6}>
|
|
<MachineActions
|
|
machine={machine}
|
|
onActionSuccess={onActionSuccess}></MachineActions>
|
|
</Item>
|
|
<Item xs={2}>
|
|
<Label>Network speed</Label>
|
|
<span>
|
|
{machine.downloadSpeed
|
|
? new BigNumber(machine.downloadSpeed).toFixed(4).toString() +
|
|
' MB/s'
|
|
: 'unavailable'}
|
|
</span>
|
|
</Item>
|
|
<Item xs={2}>
|
|
<Label>Latency</Label>
|
|
<span>
|
|
{machine.responseTime
|
|
? new BigNumber(machine.responseTime).toFixed(3).toString() +
|
|
' ms'
|
|
: 'unavailable'}
|
|
</span>
|
|
</Item>
|
|
<Item xs={2}>
|
|
<Label>Packet loss</Label>
|
|
<span>
|
|
{machine.packetLoss
|
|
? new BigNumber(machine.packetLoss).toFixed(3).toString() +
|
|
' %'
|
|
: 'unavailable'}
|
|
</span>
|
|
</Item>
|
|
</Container>
|
|
</Item>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default MachineDetailsRow
|