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/components/Status.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import Chip from '@material-ui/core/Chip'
+import { makeStyles } from '@material-ui/core/styles'
+
+import {
+  tomato,
+  mistyRose,
+  pumpkin,
+  secondaryColorDarker as spring4,
+  inputFontWeight,
+  spring3,
+  smallestFontSize,
+  inputFontFamily,
+  spacer
+} from '../styling/variables'
+
+const colors = {
+  error: tomato,
+  warning: pumpkin,
+  success: spring4
+}
+
+const backgroundColors = {
+  error: mistyRose,
+  warning: mistyRose,
+  success: spring3
+}
+
+const useStyles = makeStyles({
+  root: {
+    borderRadius: spacer / 2,
+    marginTop: spacer / 2,
+    marginRight: spacer / 4,
+    marginBottom: spacer / 2,
+    marginLeft: spacer / 4,
+    height: 18,
+    backgroundColor: ({ type }) => backgroundColors[type]
+  },
+  label: {
+    fontSize: smallestFontSize,
+    fontWeight: inputFontWeight,
+    fontFamily: inputFontFamily,
+    paddingRight: spacer / 2,
+    paddingLeft: spacer / 2,
+    color: ({ type }) => colors[type]
+  }
+})
+
+const Status = ({ status }) => {
+  const classes = useStyles({ type: status.type })
+  return <Chip type={status.type} label={status.label} classes={classes} />
+}
+
+const MainStatus = ({ statuses }) => {
+  const mainStatus =
+    statuses.find(s => s.type === 'error') ||
+    statuses.find(s => s.type === 'warning') ||
+    statuses[0]
+  const plus = { label: `+${statuses.length - 1}`, type: mainStatus.type }
+
+  return (
+    <div>
+      <Status status={mainStatus} />
+      {statuses.length > 1 && <Status status={plus} />}
+    </div>
+  )
+}
+
+export { Status, MainStatus }