From d794bca673dbcdc469ed4a53211cfce846347583 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Thu, 10 Feb 2022 16:05:30 +0000 Subject: [PATCH 1/2] fix: missing machine performance data on the dashboard machine overview page --- lib/machine-loader.js | 26 +++++++++++++++-- .../Machines/MachineComponents/Overview.js | 28 ++++++------------- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/lib/machine-loader.js b/lib/machine-loader.js index ce62e05c..68748f5b 100644 --- a/lib/machine-loader.js +++ b/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, diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js index 6c7c9f65..36b6b5df 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js +++ b/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 }) => {
Last ping -

{makeLastPing(data.lastPing)}

+

+ {data.lastPing + ? formatDistance(new Date(data.lastPing), new Date(), { + addSuffix: true + }) + : 'unknown'} +

From cc4700a4134a250c06b8ff46eb18ba9513bed1dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Wed, 16 Feb 2022 01:46:49 +0000 Subject: [PATCH 2/2] fix: machine dashboard screen more up to spec --- .../machineActions/MachineActions.js | 9 +---- .../MachineComponents/Cassettes/Cassettes.js | 8 ++-- .../MachineComponents/Commissions/helper.js | 4 +- .../Machines/MachineComponents/Details.js | 3 +- .../Machines/MachineComponents/Overview.js | 40 +++++++++++-------- .../src/pages/Machines/Machines.styles.js | 11 ++++- new-lamassu-admin/src/utils/machine.js | 3 +- 7 files changed, 45 insertions(+), 33 deletions(-) diff --git a/new-lamassu-admin/src/components/machineActions/MachineActions.js b/new-lamassu-admin/src/components/machineActions/MachineActions.js index 815d8e90..06c1d6b1 100644 --- a/new-lamassu-admin/src/components/machineActions/MachineActions.js +++ b/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
{children}
-} - 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 (
- +

Actions

{ elements.push({ name: 'edit', header: 'Edit', - width: 87, + width: widthsByNumberOfCassettes[numberOfCassettes].editWidth, view: () => { return ( { { 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 diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js index e3b5811e..ae0e3be2 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js +++ b/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 }) => {
Machine model -

{data.model}

+

{modelPrettifier[data.model]}

Software version diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js index 36b6b5df..a2504a37 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js +++ b/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 ( - <> +

{data.name}

@@ -23,14 +23,22 @@ const Overview = ({ data, onActionSuccess }) => {
- Status + Status {data && data.statuses ? : null}
- Last ping -

+ Ping +

+ {data.responseTime + ? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms' + : 'unavailable'} +

+
+
+ Last ping +

{data.lastPing ? formatDistance(new Date(data.lastPing), new Date(), { addSuffix: true @@ -38,11 +46,9 @@ const Overview = ({ data, onActionSuccess }) => { : 'unknown'}

-
-
- Network speed -

+ Network speed +

{data.downloadSpeed ? new BigNumber(data.downloadSpeed).toFixed(4).toString() + ' MB/s' @@ -50,22 +56,22 @@ const Overview = ({ data, onActionSuccess }) => {

-
- -
- Device ID -

+ Device ID +

{data.deviceId}

- +
+ +
+
) } diff --git a/new-lamassu-admin/src/pages/Machines/Machines.styles.js b/new-lamassu-admin/src/pages/Machines/Machines.styles.js index d338147d..2a524939 100644 --- a/new-lamassu-admin/src/pages/Machines/Machines.styles.js +++ b/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 + } } } diff --git a/new-lamassu-admin/src/utils/machine.js b/new-lamassu-admin/src/utils/machine.js index b4e89845..3c6f0864 100644 --- a/new-lamassu-admin/src/utils/machine.js +++ b/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 }