fix: missing machine performance data on the dashboard machine overview page

lib/machine-loader.js

@@ -110,11 +110,17 @@ function getMachine (machineId, config) {
     else return toMachineObject(r)
   })
 
-  return Promise.all([queryMachine, dbm.machineEvents(), config])
-    .then(([machine, events, config]) => {
+  return Promise.all([queryMachine, dbm.machineEvents(), config, getNetworkHeartbeatByDevice(machineId), getNetworkPerformanceByDevice(machineId)])
+    .then(([machine, events, config, heartbeat, performance]) => {
       const pings = checkPings([machine])
+      const mergedMachine = {
+        ...machine,
+        responseTime: _.get('responseTime', heartbeat),
+        packetLoss: _.get('packetLoss', heartbeat),
+        downloadSpeed: _.get('downloadSpeed', performance),
+      }
 
-      return addName(pings, events, config)(machine)
+      return addName(pings, events, config)(mergedMachine)
     })
 }
 
@@ -234,6 +240,20 @@ function getNetworkHeartbeat () {
     .then(res => _.map(_.mapKeys(_.camelCase))(res))
 }
 
+function getNetworkPerformanceByDevice (deviceId) {
+  const sql = `SELECT device_id, download_speed FROM machine_network_performance WHERE device_id = $1`
+  return db.manyOrNone(sql, [deviceId])
+    .then(res => _.mapKeys(_.camelCase, _.find(it => it.device_id === deviceId, res)))
+}
+
+function getNetworkHeartbeatByDevice (deviceId) {
+  const sql = `SELECT AVG(average_response_time) AS response_time, AVG(average_packet_loss) AS packet_loss, device_id
+    FROM machine_network_heartbeat WHERE device_id = $1
+    GROUP BY device_id`
+  return db.manyOrNone(sql, [deviceId])
+    .then(res => _.mapKeys(_.camelCase, _.find(it => it.device_id === deviceId, res)))
+}
+
 module.exports = {
   getMachineName,
   getMachines,

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

@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
-import { differenceInSeconds } from 'date-fns/fp'
+import { formatDistance } from 'date-fns'
 import React from 'react'
 
 import { Status } from 'src/components/Status'
@@ -11,24 +11,6 @@ import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard.js'
 import styles from '../Machines.styles'
 const useStyles = makeStyles(styles)
 
-const makeLastPing = lastPing => {
-  if (!lastPing) return null
-  const secondsAgo = differenceInSeconds(lastPing, new Date())
-  if (secondsAgo < 60) {
-    return `${secondsAgo} ${secondsAgo === 1 ? 'second' : 'seconds'} ago`
-  }
-  if (secondsAgo < 3600) {
-    const minutes = Math.round(secondsAgo / 60)
-    return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`
-  }
-  if (secondsAgo < 3600 * 24) {
-    const hours = Math.round(secondsAgo / 3600)
-    return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`
-  }
-  const days = Math.round(secondsAgo / 3600 / 24)
-  return `${days} ${days === 1 ? 'day' : 'days'} ago`
-}
-
 const Overview = ({ data, onActionSuccess }) => {
   const classes = useStyles()
 
@@ -48,7 +30,13 @@ const Overview = ({ data, onActionSuccess }) => {
       <div className={classes.row}>
         <div className={classes.rowItem}>
           <Label3 className={classes.label3}>Last ping</Label3>
-          <P>{makeLastPing(data.lastPing)}</P>
+          <P>
+            {data.lastPing
+              ? formatDistance(new Date(data.lastPing), new Date(), {
+                  addSuffix: true
+                })
+              : 'unknown'}
+          </P>
         </div>
       </div>
       <div className={classes.row}>