fix: move machine internet performance indicators to expandable row

new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js

@@ -1,5 +1,6 @@
 import { Grid /*, Divider */ } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import BigNumber from 'bignumber.js'
 import React from 'react'
 
 import MachineActions from 'src/components/machineActions/MachineActions'
@@ -107,6 +108,33 @@ const MachineDetailsRow = ({ it: machine, onActionSuccess, timezone }) => {
               machine={machine}
               onActionSuccess={onActionSuccess}></MachineActions>
           </Item>
+          <Item xs={2}>
+            <Label>Network speed</Label>
+            <span>
+              {machine.downloadSpeed
+                ? new BigNumber(machine.downloadSpeed).toFixed(4).toString() +
+                  '  MB/s'
+                : 'unavailable'}
+            </span>
+          </Item>
+          <Item xs={2}>
+            <Label>Latency</Label>
+            <span>
+              {machine.responseTime
+                ? new BigNumber(machine.responseTime).toFixed(3).toString() +
+                  '  ms'
+                : 'unavailable'}
+            </span>
+          </Item>
+          <Item xs={2}>
+            <Label>Packet Loss</Label>
+            <span>
+              {machine.packetLoss
+                ? new BigNumber(machine.packetLoss).toFixed(3).toString() +
+                  '  %'
+                : 'unavailable'}
+            </span>
+          </Item>
         </Container>
       </Item>
     </Container>

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

@@ -1,6 +1,5 @@
 import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
-import BigNumber from 'bignumber.js'
 import gql from 'graphql-tag'
 import moment from 'moment'
 import * as R from 'ramda'
@@ -62,7 +61,7 @@ const MachineStatus = () => {
   const elements = [
     {
       header: 'Machine Name',
-      width: 150,
+      width: 250,
       size: 'sm',
       textAlign: 'left',
       view: m => (
@@ -80,48 +79,18 @@ const MachineStatus = () => {
     },
     {
       header: 'Status',
-      width: 150,
+      width: 350,
       size: 'sm',
       textAlign: 'left',
       view: m => <MainStatus statuses={m.statuses} />
     },
     {
       header: 'Last ping',
-      width: 175,
+      width: 200,
       size: 'sm',
       textAlign: 'left',
       view: m => (m.lastPing ? moment(m.lastPing).fromNow() : 'unknown')
     },
-    {
-      header: 'Network speed',
-      width: 150,
-      size: 'sm',
-      textAlign: 'left',
-      view: m =>
-        m.downloadSpeed
-          ? new BigNumber(m.downloadSpeed).toFixed(4).toString() + '  MB/s'
-          : 'unavailable'
-    },
-    {
-      header: 'Latency',
-      width: 150,
-      size: 'sm',
-      textAlign: 'left',
-      view: m =>
-        m.responseTime
-          ? new BigNumber(m.responseTime).toFixed(3).toString() + '  ms'
-          : 'unavailable'
-    },
-    {
-      header: 'Packet Loss',
-      width: 125,
-      size: 'sm',
-      textAlign: 'left',
-      view: m =>
-        m.packetLoss
-          ? new BigNumber(m.packetLoss).toFixed(3).toString() + '  %'
-          : 'unavailable'
-    },
     {
       header: 'Software Version',
       width: 200,