feat: add machine status page (#344)

* feat: add confirm-dialog component

* feat: add MachineStatus to router

* feat: add machine details to api endpoints

* feat: add machine-status expandabletable

* fix: add missing property to TextInput on story

* style: minor style fixes

* feat: useAxios to unpair and reboot specific machinees

* fix: style fixes
use shutdown instead of reboot
use named colors

* fix: use new ExpTable

* fix: class instead of sttyles, use named colors

* feat: use ConfirmDialog to confirm unpair action

* chore: eslint fix

* refactor: use gql, new ExpTable and ramda on machine-status

* fix: 'fallback' status instead of the 'all good' one

* fix: makeStyles instead of withStyles

* refactor: simplify StatusChip

* fix: css spacing instead of nbsp

* fix: move makeStyles outside component

* refactor: makeStyles instead of withStyles

* refactor: adapting based props for Status

* refactor: moar simple Status chip

* feat: use graphql mutation instead of rest for machine action
feat: use graphql instead of rest on MachineDetailsCard

* fix: Dialog close must be handled outside

* fix: just pass down onDissmissed and onConfirmed to the component
https://github.com/lamassu/lamassu-server/pull/344#discussion_r370136028

* refactor: machineAction on separate file and 404 handling

* feat: basic handling of graphql exceptions on machineAction

new-lamassu-admin/src/pages/maintenance/MachineStatus.js

@@ -0,0 +1,103 @@
+import { makeStyles } from '@material-ui/core'
+import { useQuery } from '@apollo/react-hooks'
+import { gql } from 'apollo-boost'
+import moment from 'moment'
+import * as R from 'ramda'
+import React from 'react'
+
+import ExpTable from '../../components/expandable-table/ExpTable'
+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 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',
+      size: 232,
+      textAlign: 'left',
+      view: m => m.name
+    },
+    {
+      header: 'Status',
+      size: 349,
+      textAlign: 'left',
+      view: m => <MainStatus statuses={m.statuses} />
+    },
+    {
+      header: 'Last ping',
+      size: 192,
+      textAlign: 'left',
+      view: m => moment(m.lastPing).fromNow()
+    },
+    {
+      header: 'Ping Time',
+      size: 155,
+      textAlign: 'left',
+      view: m => m.pingTime || 'unknown'
+    },
+    {
+      header: 'Software Version',
+      size: 201,
+      textAlign: 'left',
+      view: m => m.softwareVersion || 'unknown'
+    },
+    {
+      size: 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