From ef60b15d823c7f627b5ed29e25b9faa22d9ad69e Mon Sep 17 00:00:00 2001 From: csrapr <26280794+csrapr@users.noreply.github.com> Date: Fri, 5 Feb 2021 00:05:50 +0000 Subject: [PATCH] Chore: post-rebase fixes --- lib/new-admin/graphql/schema.js | 10 +- lib/notifier/index.js | 201 ------------------ lib/notifier/queries.js | 20 +- lib/notifier/sms.js | 5 - lib/plugins.js | 57 ++--- .../NotificationCenter/NotificationCenter.js | 1 + .../NotificationCenter/NotificationRow.js | 1 + .../src/components/layout/Header.js | 1 + .../src/pages/Dashboard/Alerts/Alerts.js | 114 ++++------ .../pages/Dashboard/Alerts/Alerts.styles.js | 26 +-- .../src/pages/Dashboard/Alerts/AlertsTable.js | 42 ++-- .../src/pages/Dashboard/Dashboard.js | 1 + .../src/pages/Dashboard/Dashboard.styles.js | 8 +- .../src/pages/Dashboard/Footer/Footer.js | 1 + .../src/pages/Dashboard/RightSide.js | 47 ++-- .../Graphs/PercentageChart.js | 63 +++--- .../SystemPerformance/Graphs/RefLineChart.js | 1 + .../Graphs/RefScatterplot.js | 1 + .../pages/Dashboard/SystemPerformance/Nav.js | 1 + .../SystemPerformance/SystemPerformance.js | 57 +++-- .../SystemPerformance.styles.js | 26 ++- .../Dashboard/SystemStatus/MachinesTable.js | 1 + .../Dashboard/SystemStatus/SystemStatus.js | 1 + .../MachineComponents/Cassettes/Cassettes.js | 3 +- .../Commissions/Commissions.js | 1 + .../Machines/MachineComponents/Details.js | 1 + .../Transactions/DataTable.js | 1 + .../Transactions/Transactions.js | 1 + .../src/pages/Machines/Machines.js | 1 + 29 files changed, 224 insertions(+), 470 deletions(-) diff --git a/lib/new-admin/graphql/schema.js b/lib/new-admin/graphql/schema.js index d3eae0bf..67412e19 100644 --- a/lib/new-admin/graphql/schema.js +++ b/lib/new-admin/graphql/schema.js @@ -248,12 +248,6 @@ const typeDefs = gql` rate: Float } - type Rate { - code: String - name: String - rate: Float - } - type Notification { id: ID! type: String @@ -297,6 +291,7 @@ const typeDefs = gql` cryptoRates: JSONObject fiatRates: [Rate] notifications: [Notification] + alerts: [Notification] hasUnreadNotifications: Boolean } @@ -396,7 +391,8 @@ const resolvers = { }), fiatRates: () => forex.getFiatRates(), notifications: () => notifierQueries.getNotifications(), - hasUnreadNotifications: () => notifierQueries.hasUnreadNotifications() + hasUnreadNotifications: () => notifierQueries.hasUnreadNotifications(), + alerts: () => notifierQueries.getAlerts() }, Mutation: { machineAction: (...[, { deviceId, action, cashbox, cassette1, cassette2, newName }]) => machineAction({ deviceId, action, cashbox, cassette1, cassette2, newName }), diff --git a/lib/notifier/index.js b/lib/notifier/index.js index ce4af396..0466b4dd 100644 --- a/lib/notifier/index.js +++ b/lib/notifier/index.js @@ -356,207 +356,6 @@ const customerComplianceNotify = (customer, deviceId, code, days = null) => { .catch(console.error) } -const clearOldCryptoNotifications = (balances) => { - // get valid crypto notifications from DB - // first, for each DB notification, if it doesn't exist in balances then it is old and should not be valid anymore - // if it exists in balances, add the index of it in balances to the array of duplicates - // return the array of duplicates so that balancesNotify doesn't add them - return queries.getAllValidNotifications(CRYPTO_BALANCE).then(res => { - const notifications = _.map(it => { - return { - id: it.id, - cryptoCode: it.detail.cryptoCode, - code: it.detail.code - } - }, res) - const duplicateIndexes = [] - const idsToInvalidate = [] - _.forEach(notification => { - const idx = _.findIndex(balance => { - return balance.code === notification.code && balance.cryptoCode === notification.cryptoCode - }, balances) - - if (idx === -1) { - // if notification in DB doesnt exist in balances anymore then it is invalid now - idsToInvalidate.push(notification.id) - } - else { - // if it exists then it is a duplicate, add it to array - duplicateIndexes.push(idx) - } - }, notifications) - return (idsToInvalidate.length > 0 ? queries.batchInvalidate(idsToInvalidate) : Promise.resolve()).then(() => duplicateIndexes) - }) -} - -const cryptoBalancesNotify = (cryptoWarnings) => { - return clearOldCryptoNotifications(cryptoWarnings).then(duplicateIndexes => { - return cryptoWarnings.forEach((balance, idx) => { - if(duplicateIndexes.includes(idx)) { - return - } - const fiat = utils.formatCurrency(balance.fiatBalance.balance, balance.fiatCode) - const message = `${balance.code === 'HIGH_CRYPTO_BALANCE' ? 'High' : 'Low'} balance in ${balance.cryptoCode} [${fiat}]` - console.log(`Adding ${balance.code === 'HIGH_CRYPTO_BALANCE' ? 'high' : 'low'} balance notification for ${balance.cryptoCode}`) - const detailB = utils.buildDetail({cryptoCode: balance.cryptoCode, code: balance.code}) - return queries.addNotification(CRYPTO_BALANCE, message, detailB) - }) - }) -} - -const clearOldFiatNotifications = (balances) => { - return queries.getAllValidNotifications(FIAT_BALANCE).then(notifications => { - const duplicateIndexes = [] - const idsToInvalidate = [] - _.forEach(notification => { - const idx = _.findIndex(balance => { - return notification.detail.deviceId === balance.deviceId && notification.detail.cassette === balance.cassette - }, balances) - - if (idx === -1) { - // if notification in DB doesnt exist in balances anymore then it is invalid now - idsToInvalidate.push(notification.id) - } - else { - // if it exists then it is a duplicate, add it to array - duplicateIndexes.push(idx) - } - }, notifications) - return (idsToInvalidate.length > 0 ? queries.batchInvalidate(idsToInvalidate) : Promise.resolve()).then(() => duplicateIndexes) - }) -} - -const fiatBalancesNotify = (fiatWarnings) => { - return clearOldFiatNotifications(fiatWarnings).then(duplicateIndexes => { - return fiatWarnings.forEach((balance, idx) => { - if(duplicateIndexes.includes(idx)) { - return - } - console.log(`Adding low cash balance notification for cassette ${balance.cassette} at ${balance.machineName}`) - const message = `Cash-out cassette ${balance.cassette} almost empty!` - const detailB = utils.buildDetail({deviceId: balance.deviceId, cassette: balance.cassette}) - return queries.addNotification(FIAT_BALANCE, message, detailB) - }) - }) -} - -const balancesNotify = (balances) => { - const cryptoFilter = o => o.code === 'HIGH_CRYPTO_BALANCE' || o.code === 'LOW_CRYPTO_BALANCE' - const fiatFilter = o => o.code === 'LOW_CASH_OUT' - const cryptoWarnings = _.filter(cryptoFilter, balances) - const fiatWarnings = _.filter(fiatFilter, balances) - return Promise.all([cryptoBalancesNotify(cryptoWarnings), fiatBalancesNotify(fiatWarnings)]).catch(console.error) -} - - -const clearOldErrorNotifications = (alerts) => { - return queries.getAllValidNotifications(ERROR).then(res => { - const indexesToInvalidate = [] - _.forEach(notification => { - const idx = _.findIndex(alert => { - return alert.code === notification.detail.code && alert.deviceId === notification.detail.deviceId - }, alerts) - if(idx !== -1) { - return - } - // if the notification doesn't exist, then it is outdated and is not valid anymore - indexesToInvalidate.push(notification.id) - }, res) - return indexesToInvalidate.length > 0 ? queries.batchInvalidate(indexesToInvalidate) : null - }).catch(console.log) -} - -const errorAlertsNotify = (alertRec) => { - let alerts = [] - _.keys(alertRec.devices).forEach(function (device) { - // embed device ID in each alert object inside the deviceAlerts array - alertRec.devices[device].deviceAlerts = _.map(alert => { - return {...alert, deviceId: device} - }, alertRec.devices[device].deviceAlerts) - // concat every array into one - alerts = _.concat(alerts, alertRec.devices[device].deviceAlerts) - }) - - // now that we have all the alerts, we want to add PING and STALE alerts to the DB - // if there is a valid alert on the DB that doesn't exist on the new alerts array, - // that alert should be considered invalid - // after that, for the alerts array, we have to see if there is a valid alert of - // the sorts already on the DB - return clearOldErrorNotifications(alerts).then(() => { - _.forEach(alert => { - switch(alert.code) { - case PING: { - const detailB = utils.buildDetail({code: PING, age: alert.age ? alert.age : -1, deviceId: alert.deviceId}) - return queries.getValidNotifications(ERROR, _.omit(['age'], detailB)).then(res => { - if(res.length > 0) { - return Promise.resolve() - } - console.log("Adding PING alert on database for " + alert.machineName) - const message = `Machine down` - return queries.addNotification(ERROR, message, detailB) - }) - } - case STALE: { - const detailB = utils.buildDetail({code: STALE, deviceId: alert.deviceId}) - return queries.getValidNotifications(ERROR, detailB).then(res => { - if(res.length > 0) { - return Promise.resolve() - } - console.log("Adding STALE alert on database for " + alert.machineName) - const message = `Machine is stuck on ${alert.state} screen` - return queries.addNotification(ERROR, message, detailB) - }) - } - default: - return - } - }, alerts) - }).catch(console.error) -} - -const blacklistNotify = (tx, isAddressReuse) => { - let message = '' - let detailB = {} - if(isAddressReuse) { - detail = `${tx.cryptoCode}_REUSED_${tx.toAddress}` - detailB = utils.buildDetail({cryptoCode: tx.cryptoCode, code: 'REUSED', cryptoAddress: tx.toAddress}) - message = `Blocked reused address: ${tx.cryptoCode} ${tx.toAddress.substr(0,10)}...` - } else { - detail = `${tx.cryptoCode}_BLOCKED_${tx.toAddress}` - detailB = utils.buildDetail({cryptoCode: tx.cryptoCode, code: 'BLOCKED', cryptoAddress: tx.toAddress}) - message = `Blocked blacklisted address: ${tx.cryptoCode} ${tx.toAddress.substr(0,10)}...` - } - return queries.addNotification(COMPLIANCE, message, detailB) -} - -const clearBlacklistNotification = (cryptoCode, cryptoAddress) => { - return queries.clearBlacklistNotification(cryptoCode, cryptoAddress).catch(console.error) -} - -const clearOldCustomerSuspendedNotifications = (customerId, deviceId) => { - const detailB = utils.buildDetail({code: 'SUSPENDED', customerId, deviceId}) - return queries.invalidateNotification(detailB, 'compliance') -} - -const customerComplianceNotify = (customer, deviceId, code, days = null) => { - // code for now can be "BLOCKED", "SUSPENDED" - const detailB = utils.buildDetail({customerId: customer.id, code, deviceId}) - const date = new Date() - if (days) { - date.setDate(date.getDate() + days) - } - const message = code === "SUSPENDED" ? `Customer suspended until ${date.toLocaleString()}` : `Customer blocked` - - return clearOldCustomerSuspendedNotifications(customer.id, deviceId).then(() => { - return queries.getValidNotifications(COMPLIANCE, detailB) - }).then(res => { - if (res.length > 0) { - return Promise.resolve() - } - return queries.addNotification(COMPLIANCE, message, detailB) - }).catch(console.error) -} - module.exports = { transactionNotify, checkNotification, diff --git a/lib/notifier/queries.js b/lib/notifier/queries.js index bca51fa7..39f1bd1c 100644 --- a/lib/notifier/queries.js +++ b/lib/notifier/queries.js @@ -46,27 +46,27 @@ const getValidNotifications = (type, detail) => { return db.any(sql, [type, detail]) } -const getNotificationsGql = () => { +const getNotifications = () => { const sql = `SELECT * FROM notifications ORDER BY created DESC` return db.any(sql) } -const markAsReadGql = (id) => { +const markAsRead = (id) => { const sql = `UPDATE notifications SET read = 't' WHERE id = $1` return db.none(sql, [id]) } -const markAllAsReadGql = () => { +const markAllAsRead = () => { const sql = `UPDATE notifications SET read = 't'` return db.none(sql) } -const hasUnreadNotificationsGql = () => { +const hasUnreadNotifications = () => { const sql = `SELECT EXISTS (SELECT 1 FROM notifications WHERE read = 'f' LIMIT 1)` return db.oneOrNone(sql).then(res => res.exists) } -const getAlertsGql = () => { +const getAlerts = () => { const types = ['fiatBalance', 'cryptoBalance', 'error'] const sql = `SELECT * FROM notifications WHERE valid = 't' AND type IN ($1:list) ORDER BY created DESC` return db.any(sql, [types]) @@ -80,9 +80,9 @@ module.exports = { batchInvalidate, clearBlacklistNotification, getValidNotifications, - getNotificationsGql, - markAsReadGql, - markAllAsReadGql, - hasUnreadNotificationsGql, - getAlertsGql + getNotifications, + markAsRead, + markAllAsRead, + hasUnreadNotifications, + getAlerts } diff --git a/lib/notifier/sms.js b/lib/notifier/sms.js index 592a8a45..fd088394 100644 --- a/lib/notifier/sms.js +++ b/lib/notifier/sms.js @@ -29,11 +29,6 @@ function printSmsAlerts (alertRec, config) { _.map('cryptoCode', entry[1]), ) - const cryptoCodes = _.filter( - _.negate(_.isEmpty), - _.map('cryptoCode', entry[1]) - ) - return { codeDisplay: utils.codeDisplay(code), machineNames, diff --git a/lib/plugins.js b/lib/plugins.js index 8da6fa99..f1a91bcd 100644 --- a/lib/plugins.js +++ b/lib/plugins.js @@ -25,8 +25,6 @@ const promoCodes = require('./promo-codes') const notifier = require('./notifier') -const notifier = require('./notifier/index') - const mapValuesWithKey = _.mapValues.convert({ cap: false }) @@ -164,41 +162,30 @@ function plugins (settings, deviceId) { ? argv.cassettes.split(',') : rec.counts - return Promise.all([ - dbm.cassetteCounts(deviceId), - cashOutHelper.redeemableTxs(deviceId, excludeTxId) - ]).then(([rec, _redeemableTxs]) => { - const redeemableTxs = _.reject( - _.matchesProperty('id', excludeTxId), - _redeemableTxs - ) + const cassettes = [ + { + denomination: parseInt(denominations[0], 10), + count: parseInt(counts[0], 10) + }, + { + denomination: parseInt(denominations[1], 10), + count: parseInt(counts[1], 10) + } + ] - const counts = argv.cassettes ? argv.cassettes.split(',') : rec.counts - - const cassettes = [ - { - denomination: parseInt(denominations[0], 10), - count: parseInt(counts[0], 10) - }, - { - denomination: parseInt(denominations[1], 10), - count: parseInt(counts[1], 10) + try { + return { + cassettes: computeAvailableCassettes(cassettes, redeemableTxs), + virtualCassettes + } + } catch (err) { + logger.error(err) + return { + cassettes, + virtualCassettes + } } - ] - - try { - return { - cassettes: computeAvailableCassettes(cassettes, redeemableTxs), - virtualCassettes - } - } catch (err) { - logger.error(err) - return { - cassettes, - virtualCassettes - } - } - }) + }) } function fetchCurrentConfigVersion () { diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js index c165f765..b2d78f5a 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' + import ActionButton from 'src/components/buttons/ActionButton' import { H5 } from 'src/components/typography' import { ReactComponent as NotificationIconZodiac } from 'src/styling/icons/menu/notification-zodiac.svg' diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js index c62d8077..b01312ce 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import classnames from 'classnames' import prettyMs from 'pretty-ms' import React from 'react' + import { Label1, Label2, TL2 } from 'src/components/typography' import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg' import { ReactComponent as Transaction } from 'src/styling/icons/arrow/transaction.svg' diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js index b69f9cd4..98601869 100644 --- a/new-lamassu-admin/src/components/layout/Header.js +++ b/new-lamassu-admin/src/components/layout/Header.js @@ -6,6 +6,7 @@ import classnames from 'classnames' import gql from 'graphql-tag' import React, { memo, useState } from 'react' import { NavLink, useHistory } from 'react-router-dom' + import NotificationCenter from 'src/components/NotificationCenter' import ActionButton from 'src/components/buttons/ActionButton' import { H4 } from 'src/components/typography' diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js index d0ad8adb..28486e24 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js +++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js @@ -4,7 +4,9 @@ import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import * as R from 'ramda' -import React, { useState, useEffect } from 'react' +import React from 'react' + +import { cardState as cardState_ } from 'src/components/CollapsibleCard' import { Label1, H4 } from 'src/components/typography' import styles from '../Dashboard.styles' @@ -33,98 +35,58 @@ const GET_ALERTS = gql` const useStyles = makeStyles(styles) -const Alerts = ({ cardState, setRightSideState }) => { +const Alerts = ({ onReset, onExpand, size }) => { const classes = useStyles() - const [showAllItems, setShowAllItems] = useState(false) + const showAllItems = size === cardState_.EXPANDED const { data } = useQuery(GET_ALERTS) - const alerts = R.path(['alerts'])(data) ?? [] const machines = R.compose( R.map(R.prop('name')), R.indexBy(R.prop('deviceId')) )(data?.machines ?? []) - - const showExpandButton = alerts.length > NUM_TO_RENDER && !showAllItems - - useEffect(() => { - if (cardState.cardSize === 'small' || cardState.cardSize === 'default') { - setShowAllItems(false) - } - }, [cardState.cardSize]) - - const reset = () => { - setRightSideState({ - systemStatus: { cardSize: 'default', buttonName: 'Show less' }, - alerts: { cardSize: 'default', buttonName: 'Show less' } - }) - setShowAllItems(false) - } - - const showAllClick = () => { - setShowAllItems(true) - setRightSideState({ - systemStatus: { cardSize: 'small', buttonName: 'Show machines' }, - alerts: { cardSize: 'big', buttonName: 'Show less' } - }) - } + const alertsLength = alerts.length return ( <> -
-

{`Alerts ${ - data ? `(${alerts.length})` : 0 - }`}

- {(showAllItems || cardState.cardSize === 'small') && ( - <> - +
+

{`Alerts (${alertsLength})`}

+ {showAllItems && ( + + + + )} +
+ + + + {!showAllItems && alertsLength > NUM_TO_RENDER && ( + - - )} -
- {cardState.cardSize !== 'small' && ( - <> - - - - {showExpandButton && ( - <> - - - - - )} - - - - )} + )} + + ) } diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js index 8b0d0c5f..382102eb 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js @@ -45,27 +45,10 @@ const styles = { statusHeader: { marginLeft: 2 }, - /* table: { - maxHeight: 440, - '&::-webkit-scrollbar': { - width: 7 - }, - '&::-webkit-scrollbar-thumb': { - backgroundColor: offColor, - borderRadius: 5 - } - }, */ table: { - paddingTop: spacer * 4, + marginTop: spacer * 4, maxHeight: 465, - overflow: 'auto', - '&::-webkit-scrollbar': { - width: 7 - }, - '&::-webkit-scrollbar-thumb': { - backgroundColor: offColor, - borderRadius: 5 - } + overflow: 'auto' }, tableBody: { overflow: 'auto' @@ -78,11 +61,6 @@ const styles = { marginBottom: 0, marginTop: 0 }, - root: { - '&:nth-of-type(odd)': { - backgroundColor: backgroundColor - } - }, listItemText: { margin: '8px 0 8px 0' }, diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.js index f5a8c416..22429bee 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.js +++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.js @@ -1,8 +1,10 @@ -import { withStyles, makeStyles } from '@material-ui/core' +import { makeStyles } from '@material-ui/core' import List from '@material-ui/core/List' import ListItem from '@material-ui/core/ListItem' +import * as R from 'ramda' import React from 'react' import { useHistory } from 'react-router-dom' + import { P } from 'src/components/typography/index' import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg' import { ReactComponent as LinkIcon } from 'src/styling/icons/button/link/zodiac.svg' @@ -12,12 +14,6 @@ import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/to import styles from './Alerts.styles' const useStyles = makeStyles(styles) -const StyledListItem = withStyles(() => ({ - root: { - ...styles.root - } -}))(ListItem) - const icons = { error: , fiatBalance: ( @@ -34,25 +30,23 @@ const links = { const AlertsTable = ({ numToRender, alerts, machines }) => { const history = useHistory() const classes = useStyles() + const alertsToRender = R.slice(0, numToRender, alerts) return ( - {alerts.map((alert, idx) => { - if (idx < numToRender) { - return ( - - {icons[alert.type] || ( - - )} -

{`${alert.message}${alert - .detail.deviceId && - ' - ' + machines[alert.detail.deviceId]}`}

- history.push(links[alert.type] || '/dashboard')} - /> - - ) - } else return null + {alertsToRender.map((alert, idx) => { + return ( + + {icons[alert.type] || ( + + )} +

{`${alert.message}${alert.detail + .deviceId && ' - ' + machines[alert.detail.deviceId]}`}

+ history.push(links[alert.type] || '/dashboard')} + /> + + ) })} ) diff --git a/new-lamassu-admin/src/pages/Dashboard/Dashboard.js b/new-lamassu-admin/src/pages/Dashboard/Dashboard.js index c345be9c..dd875662 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.js +++ b/new-lamassu-admin/src/pages/Dashboard/Dashboard.js @@ -2,6 +2,7 @@ import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import classnames from 'classnames' import React from 'react' + import TitleSection from 'src/components/layout/TitleSection' import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg' import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg' diff --git a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js b/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js index faf0ec9e..3bcd8960 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js @@ -52,11 +52,17 @@ const styles = { upperButtonLabel: { textAlign: 'center', marginBottom: 0, - marginTop: 16, + marginTop: 0, marginLeft: spacer }, alertsCard: { marginBottom: 16 + }, + h4: { + marginTop: 0 + }, + alertsTableMargin: { + marginTop: -30 } } diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js index dd9a8ffa..1f9b2034 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js +++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js @@ -6,6 +6,7 @@ import classnames from 'classnames' import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' + import { Label2 } from 'src/components/typography' import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg' import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg' diff --git a/new-lamassu-admin/src/pages/Dashboard/RightSide.js b/new-lamassu-admin/src/pages/Dashboard/RightSide.js index 3aa2df48..ce437834 100644 --- a/new-lamassu-admin/src/pages/Dashboard/RightSide.js +++ b/new-lamassu-admin/src/pages/Dashboard/RightSide.js @@ -2,10 +2,11 @@ import Button from '@material-ui/core/Button' import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import React, { useState } from 'react' + import CollapsibleCard, { cardState } from 'src/components/CollapsibleCard' import { H4, Label1 } from 'src/components/typography' -// import Alerts from './Alerts' +import Alerts from './Alerts' import styles from './Dashboard.styles' import SystemStatus from './SystemStatus' @@ -33,35 +34,35 @@ const ShrunkCard = ({ title, buttonName, onUnshrink }) => { } const RightSide = () => { - // const classes = useStyles() + const classes = useStyles() const [systemStatusSize, setSystemStatusSize] = useState(cardState.DEFAULT) - // const [alertsSize, setAlertsSize] = useState(cardState.DEFAULT) + const [alertsSize, setAlertsSize] = useState(cardState.DEFAULT) const onReset = () => { - // setAlertsSize(cardState.DEFAULT) + setAlertsSize(cardState.DEFAULT) setSystemStatusSize(cardState.DEFAULT) } return ( - {/* - }> - { - setAlertsSize(cardState.EXPANDED) - setSystemStatusSize(cardState.SHRUNK) - }} - onReset={onReset} - size={alertsSize} + - */} + }> + { + setAlertsSize(cardState.EXPANDED) + setSystemStatusSize(cardState.SHRUNK) + }} + onReset={onReset} + size={alertsSize} + /> + { { setSystemStatusSize(cardState.EXPANDED) - // setAlertsSize(cardState.SHRUNK) + setAlertsSize(cardState.SHRUNK) }} onReset={onReset} size={systemStatusSize} diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.js index f6b412f7..878d1ee1 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.js @@ -1,9 +1,9 @@ import { makeStyles } from '@material-ui/core' import classnames from 'classnames' import React from 'react' -import { ReactComponent as CashIn } from 'src/styling/icons/direction/cash-in.svg' -import { ReactComponent as CashOut } from 'src/styling/icons/direction/cash-out.svg' -import { fontSize3, fontSecondary, fontColor } from 'src/styling/variables' + +import { Label1 } from 'src/components/typography/index' +import { java, neon, white } from 'src/styling/variables' const styles = { wrapper: { @@ -20,47 +20,52 @@ const styles = { whiteSpace: 'pre' }, label: { - fontSize: fontSize3, - fontFamily: fontSecondary, - fontWeight: 700, - color: fontColor + color: white }, - cashIn: ({ value }) => ({ - width: `${value}%`, - marginRight: 4 - }), - cashOut: ({ value }) => ({ - width: `${100 - value}%` - }) + inColor: { + backgroundColor: java + }, + outColor: { + backgroundColor: neon + }, + other: { + minWidth: '6px', + borderRadius: 2 + } } const useStyles = makeStyles(styles) const PercentageChart = ({ cashIn, cashOut }) => { + const classes = useStyles() const value = cashIn || cashOut !== 0 ? cashIn : 50 - const classes = useStyles({ value }) - const buildPercentageView = (value, direction) => { - const Operation = direction === 'cashIn' ? CashIn : CashOut - if (value > 25) { - return ( - <> - - {value > 25 && {` ${value}%`}} - - ) - } - if (value >= 10) { - return + const buildPercentageView = value => { + if (value > 15) { + return {` ${value}%`} } } return (
-
+
0 ? classes.other : null + )} + style={{ width: `${value}%`, marginRight: 4 }}> {buildPercentageView(value, 'cashIn')}
-
+
0 ? classes.other : null + )} + style={{ width: `${100 - value}%` }}> {buildPercentageView(100 - value, 'cashOut')}
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js index c90f8048..29d92d4f 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js @@ -1,6 +1,7 @@ import * as d3 from 'd3' import * as R from 'ramda' import React, { useEffect, useRef, useCallback } from 'react' + import { backgroundColor, zircon, primaryColor } from 'src/styling/variables' const transactionProfit = tx => { diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js index a26da0a3..4d7da250 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js @@ -2,6 +2,7 @@ import * as d3 from 'd3' import moment from 'moment' import * as R from 'ramda' import React, { useEffect, useRef, useCallback } from 'react' + import { backgroundColor, java, neon } from 'src/styling/variables' const RefScatterplot = ({ data: realData, timeFrame }) => { diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.js index c0de11d5..04c9bd7a 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.js @@ -2,6 +2,7 @@ import { makeStyles } from '@material-ui/core/styles' import classnames from 'classnames' import * as R from 'ramda' import React, { useState } from 'react' + import { H4 } from 'src/components/typography' import styles from './SystemPerformance.styles' diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js index 41facd6a..8acd5b77 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js @@ -2,11 +2,13 @@ import { useQuery } from '@apollo/react-hooks' import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import BigNumber from 'bignumber.js' +import classnames from 'classnames' import gql from 'graphql-tag' import moment from 'moment' import * as R from 'ramda' import React, { useState } from 'react' -import { Label2 } from 'src/components/typography/index' + +import { Label1, Label2 } from 'src/components/typography/index' import { ReactComponent as TriangleDown } from 'src/styling/icons/arrow/triangle_down.svg' import { ReactComponent as TriangleUp } from 'src/styling/icons/arrow/triangle_up.svg' import { fromNamespace } from 'src/utils/config' @@ -206,14 +208,29 @@ const SystemPerformance = () => { - Direction - - + + Direction + +
+ Out + + +
+ In + + + + @@ -223,30 +240,4 @@ const SystemPerformance = () => { ) } -/** - -
- Direction -
-
-

In

-
-
- - - - - - - */ - export default SystemPerformance diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js index 8ceb429c..0c87aad2 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js @@ -6,7 +6,9 @@ import { fontSecondary, fontColor, spring4, - tomato + tomato, + java, + neon } from 'src/styling/variables' const styles = { @@ -90,6 +92,28 @@ const styles = { }, gridContainer: { marginTop: 30 + }, + inSquare: { + width: 8, + height: 8, + borderRadius: 2, + marginTop: 18, + marginRight: 4, + backgroundColor: java + }, + outSquare: { + width: 8, + height: 8, + borderRadius: 2, + marginTop: 18, + marginRight: 4, + backgroundColor: neon + }, + directionLabelContainer: { + display: 'flex' + }, + dirLabContMargin: { + marginRight: 20 } } diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js index bbea843f..df375db7 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js @@ -8,6 +8,7 @@ import TableRow from '@material-ui/core/TableRow' import classnames from 'classnames' import React from 'react' import { useHistory } from 'react-router-dom' + import { Status } from 'src/components/Status' import { Label2, TL2 } from 'src/components/typography' // import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg' diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js index aea73b0f..189c0902 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js @@ -4,6 +4,7 @@ import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React from 'react' + import { cardState as cardState_ } from 'src/components/CollapsibleCard' // import ActionButton from 'src/components/buttons/ActionButton' import { H4, TL2, Label1 } from 'src/components/typography' diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.js index 0b82420b..9cf06374 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.js @@ -2,11 +2,12 @@ import { useMutation } from '@apollo/react-hooks' import { makeStyles } from '@material-ui/core' import gql from 'graphql-tag' import React from 'react' +import * as Yup from 'yup' + import { Table as EditableTable } from 'src/components/editableTable' import { CashOut } from 'src/components/inputs/cashbox/Cashbox' import { NumberInput } from 'src/components/inputs/formik' import { fromNamespace } from 'src/utils/config' -import * as Yup from 'yup' import styles from './Cassettes.styles' diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Commissions/Commissions.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Commissions/Commissions.js index f19d95d9..6b569961 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Commissions/Commissions.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Commissions/Commissions.js @@ -2,6 +2,7 @@ import { useQuery, useMutation } from '@apollo/react-hooks' import gql from 'graphql-tag' import * as R from 'ramda' import React from 'react' + import { Table as EditableTable } from 'src/components/editableTable' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js index 2787eb28..a47adfc7 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js @@ -1,6 +1,7 @@ import { makeStyles } from '@material-ui/core/styles' import moment from 'moment' import React from 'react' + import { Label3, P } from 'src/components/typography' import styles from '../Machines.styles' diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js index eaab5696..55bef3af 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js @@ -8,6 +8,7 @@ import { CellMeasurer, CellMeasurerCache } from 'react-virtualized' + import { Table, TBody, diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js index af6d90d2..b0835749 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js @@ -5,6 +5,7 @@ import gql from 'graphql-tag' import moment from 'moment' import * as R from 'ramda' import React, { useEffect, useState } from 'react' + import DetailsRow from 'src/pages/Transactions/DetailsCard' import { mainStyles } from 'src/pages/Transactions/Transactions.styles' import { getStatus } from 'src/pages/Transactions/helper' diff --git a/new-lamassu-admin/src/pages/Machines/Machines.js b/new-lamassu-admin/src/pages/Machines/Machines.js index af8f3fdf..43914f98 100644 --- a/new-lamassu-admin/src/pages/Machines/Machines.js +++ b/new-lamassu-admin/src/pages/Machines/Machines.js @@ -8,6 +8,7 @@ import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState, useEffect } from 'react' import { Link, useLocation } from 'react-router-dom' + import { TL1, TL2, Label3 } from 'src/components/typography' import Cassettes from './MachineComponents/Cassettes'