fix: machine dashboard screen more up to spec

new-lamassu-admin/src/components/machineActions/MachineActions.js

@@ -5,6 +5,7 @@ import React, { memo, useState } from 'react'
 
 import { ConfirmDialog } from 'src/components/ConfirmDialog'
 import ActionButton from 'src/components/buttons/ActionButton'
+import { H3 } from 'src/components/typography'
 import { ReactComponent as EditReversedIcon } from 'src/styling/icons/button/edit/white.svg'
 import { ReactComponent as EditIcon } from 'src/styling/icons/button/edit/zodiac.svg'
 import { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg'
@@ -62,12 +63,6 @@ const getState = machineEventsLazy =>
   JSON.parse(machineEventsLazy.machine.latestEvent?.note ?? '{"state": null}')
     .state
 
-const Label = ({ children }) => {
-  const classes = useStyles()
-
-  return <div className={classes.label}>{children}</div>
-}
-
 const MachineActions = memo(({ machine, onActionSuccess }) => {
   const [action, setAction] = useState({ command: null })
   const [preflightOptions, setPreflightOptions] = useState({})
@@ -115,7 +110,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
 
   return (
     <div>
-      <Label>Actions</Label>
+      <H3>Actions</H3>
       <div className={classes.stack}>
         <ActionButton
           color="primary"

new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.js

@@ -18,9 +18,9 @@ import styles from './Cassettes.styles'
 const useStyles = makeStyles(styles)
 
 const widthsByNumberOfCassettes = {
-  2: { cashbox: 116, cassette: 280, cassetteGraph: 80, editWidth: 174 },
-  3: { cashbox: 106, cassette: 200, cassetteGraph: 60, editWidth: 145 },
-  4: { cashbox: 106, cassette: 164, cassetteGraph: 40, editWidth: 90 }
+  2: { cashbox: 203, cassette: 280, cassetteGraph: 80, editWidth: 87 },
+  3: { cashbox: 164, cassette: 200, cassetteGraph: 60, editWidth: 87 },
+  4: { cashbox: 131, cassette: 158, cassetteGraph: 40, editWidth: 87 }
 }
 
 const ValidationSchema = Yup.object().shape({
@@ -159,7 +159,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => {
   elements.push({
     name: 'edit',
     header: 'Edit',
-    width: 87,
+    width: widthsByNumberOfCassettes[numberOfCassettes].editWidth,
     view: () => {
       return (
         <IconButton

new-lamassu-admin/src/pages/Machines/MachineComponents/Commissions/helper.js

@@ -49,7 +49,7 @@ const getOverridesFields = currency => {
     {
       name: 'fixedFee',
       display: 'Fixed fee',
-      width: 144,
+      width: 155,
       doubleHeader: 'Cash-in only',
       textAlign: 'right',
       suffix: currency
@@ -57,7 +57,7 @@ const getOverridesFields = currency => {
     {
       name: 'minimumTx',
       display: 'Minimun Tx',
-      width: 144,
+      width: 155,
       doubleHeader: 'Cash-in only',
       textAlign: 'right',
       suffix: currency

new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js

@@ -2,6 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
 
 import { Label3, P } from 'src/components/typography'
+import { modelPrettifier } from 'src/utils/machine'
 import { formatDate } from 'src/utils/timezones'
 
 import styles from '../Machines.styles'
@@ -21,7 +22,7 @@ const Details = ({ data, timezone }) => {
       </div>
       <div className={classes.rowItem}>
         <Label3 className={classes.label3}>Machine model</Label3>
-        <P>{data.model}</P>
+        <P>{modelPrettifier[data.model]}</P>
       </div>
       <div className={classes.rowItem}>
         <Label3 className={classes.label3}>Software version</Label3>

new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js

@@ -5,7 +5,7 @@ import React from 'react'
 
 import { Status } from 'src/components/Status'
 import MachineActions from 'src/components/machineActions/MachineActions'
-import { H3, Label3, P } from 'src/components/typography'
+import { H3, Label1, P } from 'src/components/typography'
 import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard.js'
 
 import styles from '../Machines.styles'
@@ -15,7 +15,7 @@ const Overview = ({ data, onActionSuccess }) => {
   const classes = useStyles()
 
   return (
-    <>
+    <div className={classes.contentContainer}>
       <div className={classes.row}>
         <div className={classes.rowItem}>
           <H3>{data.name}</H3>
@@ -23,14 +23,22 @@ const Overview = ({ data, onActionSuccess }) => {
       </div>
       <div className={classes.row}>
         <div className={classes.rowItem}>
-          <Label3 className={classes.label3}>Status</Label3>
+          <Label1 className={classes.label3}>Status</Label1>
           {data && data.statuses ? <Status status={data.statuses[0]} /> : null}
         </div>
       </div>
       <div className={classes.row}>
         <div className={classes.rowItem}>
-          <Label3 className={classes.label3}>Last ping</Label3>
-          <P>
+          <Label1 className={classes.label3}>Ping</Label1>
+          <P noMargin>
+            {data.responseTime
+              ? new BigNumber(data.responseTime).toFixed(3).toString() + '  ms'
+              : 'unavailable'}
+          </P>
+        </div>
+        <div className={classes.rowItem}>
+          <Label1 className={classes.label3}>Last ping</Label1>
+          <P noMargin>
             {data.lastPing
               ? formatDistance(new Date(data.lastPing), new Date(), {
                   addSuffix: true
@@ -38,11 +46,9 @@ const Overview = ({ data, onActionSuccess }) => {
               : 'unknown'}
           </P>
         </div>
-      </div>
-      <div className={classes.row}>
         <div className={classes.rowItem}>
-          <Label3 className={classes.label3}>Network speed</Label3>
-          <P>
+          <Label1 className={classes.label3}>Network speed</Label1>
+          <P noMargin>
             {data.downloadSpeed
               ? new BigNumber(data.downloadSpeed).toFixed(4).toString() +
                 '  MB/s'
@@ -50,22 +56,22 @@ const Overview = ({ data, onActionSuccess }) => {
           </P>
         </div>
       </div>
-      <div className={classes.row}>
-        <MachineActions
-          machine={data}
-          onActionSuccess={onActionSuccess}></MachineActions>
-      </div>
       <div className={classes.row}>
         <div className={classes.rowItem}>
-          <Label3 className={classes.label3}>Device ID</Label3>
-          <P>
+          <Label1 className={classes.label3}>Device ID</Label1>
+          <P noMargin>
             <CopyToClipboard buttonClassname={classes.copyToClipboard}>
               {data.deviceId}
             </CopyToClipboard>
           </P>
         </div>
       </div>
-    </>
+      <div className={classes.row}>
+        <MachineActions
+          machine={data}
+          onActionSuccess={onActionSuccess}></MachineActions>
+      </div>
+    </div>
   )
 }
 

new-lamassu-admin/src/pages/Machines/Machines.styles.js

@@ -21,7 +21,8 @@ const styles = {
   },
   label3: {
     color: comet,
-    marginTop: 0
+    marginTop: 0,
+    fontSize: 12
   },
   row: {
     display: 'flex',
@@ -51,6 +52,14 @@ const styles = {
   sidebarContainer: {
     height: 400,
     overflowY: 'auto'
+  },
+  contentContainer: {
+    '& > *': {
+      marginTop: 26
+    },
+    '& > *:first-child': {
+      marginTop: 0
+    }
   }
 }
 

new-lamassu-admin/src/utils/machine.js

@@ -1,7 +1,8 @@
 const modelPrettifier = {
   douro1: 'Douro',
   sintra: 'Sintra',
-  gaia: 'Gaia'
+  gaia: 'Gaia',
+  tejo: 'Tejo'
 }
 
 export { modelPrettifier }