+
{statuses.length > 1 && }
diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js
index 5a5417e6..f17f76e0 100644
--- a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js
+++ b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js
@@ -1,20 +1,22 @@
import { useMutation } from '@apollo/react-hooks'
-import { Dialog, DialogContent } from '@material-ui/core'
+import { Grid, Divider } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import gql from 'graphql-tag'
import moment from 'moment'
import React, { useState } from 'react'
-import { DialogTitle, ConfirmDialog } from 'src/components/ConfirmDialog'
+import { ConfirmDialog } from 'src/components/ConfirmDialog'
import { Status } from 'src/components/Status'
import ActionButton from 'src/components/buttons/ActionButton'
-import { Label1, H4 } from 'src/components/typography'
+import { ReactComponent as LinkIcon } from 'src/styling/icons/button/link/zodiac.svg'
import { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg'
import { ReactComponent as RebootIcon } from 'src/styling/icons/button/reboot/zodiac.svg'
+import { ReactComponent as ShutdownReversedIcon } from 'src/styling/icons/button/shut down/white.svg'
+import { ReactComponent as ShutdownIcon } from 'src/styling/icons/button/shut down/zodiac.svg'
import { ReactComponent as UnpairReversedIcon } from 'src/styling/icons/button/unpair/white.svg'
import { ReactComponent as UnpairIcon } from 'src/styling/icons/button/unpair/zodiac.svg'
-import styles from './MachineDetailsCard.styles'
+import { labelStyles, machineDetailsStyles } from './MachineDetailsCard.styles'
const MACHINE_ACTION = gql`
mutation MachineAction($deviceId: ID!, $action: MachineAction!) {
@@ -24,150 +26,172 @@ const MACHINE_ACTION = gql`
}
`
-const useStyles = makeStyles(styles)
+const supportArtices = [
+ {
+ // Default article for non-maped statuses
+ code: undefined,
+ label: 'Troubleshooting',
+ article:
+ 'https://support.lamassu.is/hc/en-us/categories/115000075249-Troubleshooting'
+ }
+]
+
+const article = ({ code: status }) =>
+ supportArtices.find(({ code: article }) => article === status)
+
+const useLStyles = makeStyles(labelStyles)
const Label = ({ children }) => {
- const classes = useStyles()
- return
{children}
+ const classes = useLStyles()
+
+ return
{children}
}
-const MachineDetailsRow = ({ it: machine }) => {
- const [errorDialog, setErrorDialog] = useState(false)
- const [dialogOpen, setOpen] = useState(false)
- const [actionMessage, setActionMessage] = useState(null)
- const classes = useStyles()
+const useMDStyles = makeStyles(machineDetailsStyles)
- const unpairDialog = () => setOpen(true)
+const Container = ({ children, ...props }) => (
+
+ {children}
+
+)
+
+const Item = ({ children, ...props }) => (
+
+ {children}
+
+)
+
+const MachineDetailsRow = ({ it: machine, onActionSuccess }) => {
+ const [action, setAction] = useState('')
+ const [dialogOpen, setOpen] = useState(false)
+ const [errorMessage, setErrorMessage] = useState(null)
+ const classes = useMDStyles()
+
+ const confirmDialog = action => setAction(action) || setOpen(true)
const [machineAction, { loading }] = useMutation(MACHINE_ACTION, {
- onError: ({ graphQLErrors, message }) => {
- const errorMessage = graphQLErrors[0] ? graphQLErrors[0].message : message
- setActionMessage(errorMessage)
- setErrorDialog(true)
+ onError: ({ message }) => {
+ const errorMessage = message ?? 'An error ocurred'
+ setErrorMessage(errorMessage)
+ },
+ onCompleted: () => {
+ // TODO: custom onActionSuccess needs to be passed down from the machinestatus table
+ onActionSuccess ? onActionSuccess() : window.location.reload()
+ setOpen(false)
}
})
return (
<>
-
-
-
-
-
+
+ -
+
+
-
-
+
{machine.statuses.map((status, index) => (
-
+ -
+
+
))}
-
-
-
+
+
+
-
-
- {machine.statuses.map((...[, index]) => (
- // TODO new-admin: support articles
-
- ))}
-
-
-
-
-
-
-
-
+
+ {machine.statuses
+ .map(article)
+ .map(({ label, article }, index) => (
+ -
+
+ '{label}'
+
+
+ ))}
+
+
+
+
+
+
{
+ setErrorMessage(null)
+ machineAction({
+ variables: {
+ deviceId: machine.deviceId,
+ action: `${action}`.toLowerCase()
+ }
+ })
+ }}
+ onDissmised={() => {
+ setOpen(false)
+ setErrorMessage(null)
+ }}
+ />
+ -
+
+
-
-
{machine.model ?? 'unknown'}
-
-
+
{machine.model}
+
+ {/*
-
+
+ {machine.machineLocation}
+
*/}
+
-
-
- {machine.pairedAt
- ? moment(machine.pairedAt).format('YYYY-MM-DD HH:mm:ss')
- : 'N/A'}
-
-
-
-
-
+
+ {moment(machine.pairedAt).format('YYYY-MM-DD HH:mm:ss')}
+
+
+
+
+ -
-
+
+ onClick={() => confirmDialog('Unpair')}>
Unpair
-
{
- setOpen(false)
- machineAction({
- variables: {
- deviceId: machine.deviceId,
- action: 'unpair'
- }
- })
- }}
- onDissmised={() => {
- setOpen(false)
- }}
- />
{
- machineAction({
- variables: {
- deviceId: machine.deviceId,
- action: 'reboot'
- }
- })
- }}>
+ onClick={() => confirmDialog('Reboot')}>
Reboot
{
- machineAction({
- variables: {
- deviceId: machine.deviceId,
- action: 'restartServices'
- }
- })
- }}>
- Restart Services
+ Icon={ShutdownIcon}
+ InverseIcon={ShutdownReversedIcon}
+ onClick={() => confirmDialog('Shutdown')}>
+ Shutdown
-
-
-
-
+
+
+
+
>
)
}
diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js
index fbc07811..c375d80a 100644
--- a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js
+++ b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js
@@ -1,53 +1,55 @@
import { fade } from '@material-ui/core/styles/colorManipulator'
-import { fontSize4, offColor, comet } from 'src/styling/variables'
+import {
+ detailsRowStyles,
+ labelStyles
+} from 'src/pages/Transactions/Transactions.styles'
+import { spacer, comet, primaryColor, fontSize4 } from 'src/styling/variables'
-export default {
+const machineDetailsStyles = {
+ ...detailsRowStyles,
+ colDivider: {
+ width: 1,
+ margin: [[spacer * 2, spacer * 4]],
+ backgroundColor: comet,
+ border: 'none'
+ },
+ inlineChip: {
+ marginInlineEnd: '0.25em'
+ },
+ stack: {
+ display: 'flex',
+ flexDirection: 'row'
+ },
wrapper: {
display: 'flex',
marginTop: 24,
marginBottom: 32,
fontSize: fontSize4
},
- column1: {
- width: 600
- },
- column2: {
- flex: 1
- },
- lastRow: {
- display: 'flex',
- flexDirection: 'row'
- },
row: {
display: 'flex',
flexDirection: 'row',
marginBottom: 36
},
- actionRow: {
- display: 'flex',
- flexDirection: 'row',
- marginLeft: -4
+ list: {
+ padding: 0,
+ margin: 0,
+ listStyle: 'none',
+ '& > li': {
+ height: spacer * 3,
+ marginBottom: spacer * 1.5,
+ '& > a, & > a:visited': {
+ color: primaryColor,
+ textDecoration: 'none'
+ }
+ }
},
- action: {
- marginRight: 4,
- marginLeft: 4
+ divider: {
+ margin: '0 1rem'
},
- dialog: {
- width: 434
- },
- label: {
- color: offColor,
- margin: [[0, 0, 6, 0]]
- },
- chips: {
- marginLeft: -2
- },
- status: {
- width: 248
- },
- machineModel: {
- width: 198
+ mr: {
+ marginRight: spacer
},
separator: {
width: 1,
@@ -58,3 +60,5 @@ export default {
background: fade(comet, 0.5)
}
}
+
+export { labelStyles, machineDetailsStyles }
diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
index acd39a42..497fea10 100644
--- a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
+++ b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
@@ -5,13 +5,12 @@ import moment from 'moment'
import * as R from 'ramda'
import React from 'react'
+import { MainStatus } from 'src/components/Status'
+import Title from 'src/components/Title'
import DataTable from 'src/components/tables/DataTable'
-
-import { MainStatus } from '../../components/Status'
-import Title from '../../components/Title'
-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 { mainStyles } from 'src/pages/Transactions/Transactions.styles'
+import { ReactComponent as WarningIcon } from 'src/styling/icons/status/pumpkin.svg'
+import { ReactComponent as ErrorIcon } from 'src/styling/icons/status/tomato.svg'
import MachineDetailsRow from './MachineDetailsCard'
@@ -22,10 +21,13 @@ const GET_MACHINES = gql`
deviceId
lastPing
pairedAt
+ version
paired
cashbox
cassette1
cassette2
+ version
+ model
statuses {
label
type
@@ -68,7 +70,7 @@ const MachineStatus = () => {
width: 200,
size: 'sm',
textAlign: 'left',
- view: m => m.softwareVersion || 'unknown'
+ view: m => m.version || 'unknown'
}
]
diff --git a/new-lamassu-admin/src/styling/icons/button/reboot/white.svg b/new-lamassu-admin/src/styling/icons/button/reboot/white.svg
index 2594d934..0531c087 100644
--- a/new-lamassu-admin/src/styling/icons/button/reboot/white.svg
+++ b/new-lamassu-admin/src/styling/icons/button/reboot/white.svg
@@ -1,5 +1,5 @@
-