103 lines
2.3 KiB
JavaScript
103 lines
2.3 KiB
JavaScript
import { useQuery } from '@apollo/react-hooks'
|
|
import { makeStyles } from '@material-ui/core'
|
|
import { gql } from 'apollo-boost'
|
|
import moment from 'moment'
|
|
import * as R from 'ramda'
|
|
import React from 'react'
|
|
|
|
import { MainStatus } from '../../components/Status'
|
|
import Title from '../../components/Title'
|
|
import ExpTable from '../../components/expandable-table/ExpTable'
|
|
import { ReactComponent as WarningIcon } from '../../styling/icons/status/pumpkin.svg'
|
|
import { ReactComponent as ErrorIcon } from '../../styling/icons/status/tomato.svg'
|
|
import { mainStyles } from '../Transactions/Transactions.styles'
|
|
|
|
import MachineDetailsRow from './MachineDetailsCard'
|
|
|
|
const GET_MACHINES = gql`
|
|
{
|
|
machines {
|
|
name
|
|
deviceId
|
|
paired
|
|
cashbox
|
|
cassette1
|
|
cassette2
|
|
statuses {
|
|
label
|
|
type
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
const useStyles = makeStyles(mainStyles)
|
|
|
|
const MachineStatus = () => {
|
|
const classes = useStyles()
|
|
|
|
const { data: machinesResponse } = useQuery(GET_MACHINES)
|
|
|
|
const elements = [
|
|
{
|
|
header: 'Machine Name',
|
|
width: 232,
|
|
textAlign: 'left',
|
|
view: m => m.name
|
|
},
|
|
{
|
|
header: 'Status',
|
|
width: 349,
|
|
textAlign: 'left',
|
|
view: m => <MainStatus statuses={m.statuses} />
|
|
},
|
|
{
|
|
header: 'Last ping',
|
|
width: 192,
|
|
textAlign: 'left',
|
|
view: m => moment(m.lastPing).fromNow()
|
|
},
|
|
{
|
|
header: 'Ping Time',
|
|
width: 155,
|
|
textAlign: 'left',
|
|
view: m => m.pingTime || 'unknown'
|
|
},
|
|
{
|
|
header: 'Software Version',
|
|
width: 201,
|
|
textAlign: 'left',
|
|
view: m => m.softwareVersion || 'unknown'
|
|
},
|
|
{
|
|
width: 71
|
|
}
|
|
]
|
|
|
|
return (
|
|
<>
|
|
<div className={classes.titleWrapper}>
|
|
<div className={classes.titleAndButtonsContainer}>
|
|
<Title>Machine Status</Title>
|
|
</div>
|
|
<div className={classes.headerLabels}>
|
|
<div>
|
|
<WarningIcon />
|
|
<span>Warning</span>
|
|
</div>
|
|
<div>
|
|
<ErrorIcon />
|
|
<span>Error</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ExpTable
|
|
elements={elements}
|
|
data={R.path(['machines'])(machinesResponse)}
|
|
Details={MachineDetailsRow}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MachineStatus
|