63 lines
2 KiB
JavaScript
63 lines
2 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import List from '@material-ui/core/List'
|
|
import ListItem from '@material-ui/core/ListItem'
|
|
import * as R from 'ramda'
|
|
import React from 'react'
|
|
import { useHistory } from 'react-router-dom'
|
|
|
|
import { P } from 'src/components/typography/index'
|
|
import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg'
|
|
import { ReactComponent as LinkIcon } from 'src/styling/icons/button/link/zodiac.svg'
|
|
import { ReactComponent as CashBoxEmpty } from 'src/styling/icons/cassettes/cashbox-empty.svg'
|
|
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg'
|
|
|
|
import styles from './Alerts.styles'
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const icons = {
|
|
error: <WarningIcon style={{ height: 20, width: 20, marginRight: 12 }} />,
|
|
fiatBalance: (
|
|
<CashBoxEmpty style={{ height: 18, width: 18, marginRight: 14 }} />
|
|
)
|
|
}
|
|
|
|
const links = {
|
|
error: '/maintenance/machine-status',
|
|
fiatBalance: '/maintenance/cash-cassettes',
|
|
cryptoBalance: '/maintenance/funding'
|
|
}
|
|
|
|
const AlertsTable = ({ numToRender, alerts, machines }) => {
|
|
const history = useHistory()
|
|
const classes = useStyles()
|
|
const alertsToRender = R.slice(0, numToRender, alerts)
|
|
|
|
const alertMessage = alert => {
|
|
const deviceId = alert.detail.deviceId
|
|
if (!deviceId) return `${alert.message}`
|
|
|
|
const deviceName = R.defaultTo('Unpaired device', machines[deviceId])
|
|
return `${alert.message} - ${deviceName}`
|
|
}
|
|
|
|
return (
|
|
<List dense className={classes.table}>
|
|
{alertsToRender.map((alert, idx) => {
|
|
return (
|
|
<ListItem key={idx}>
|
|
{icons[alert.type] || (
|
|
<Wrench style={{ height: 23, width: 23, marginRight: 8 }} />
|
|
)}
|
|
<P className={classes.listItemText}>{alertMessage(alert)}</P>
|
|
<LinkIcon
|
|
className={classes.linkIcon}
|
|
onClick={() => history.push(links[alert.type] || '/dashboard')}
|
|
/>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
)
|
|
}
|
|
|
|
export default AlertsTable
|