lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chore: post-rebase fixes

Browse source
This commit is contained in:
csrapr 2021-02-05 00:05:50 +00:00 • committed by Josh Harvey
parent c0106592eb
commit ef60b15d82
29 changed files with 224 additions and 470 deletions
Download patch file Download diff file Expand all files Collapse all files

10
lib/new-admin/graphql/schema.js
View file

@ -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 }),

201
lib/notifier/index.js
View file

@ -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,

20
lib/notifier/queries.js
View file

@ -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
}

5
lib/notifier/sms.js
View file

@ -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,

13
lib/plugins.js
View file

@ -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,17 +162,6 @@ 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 counts = argv.cassettes ? argv.cassettes.split(',') : rec.counts
const cassettes = [
{
denomination: parseInt(denominations[0], 10),

1
new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
View file

@ -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'

1
new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js
View file

@ -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'

1
new-lamassu-admin/src/components/layout/Header.js
View file

@ -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'

76
new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
View file

@ -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,85 +35,48 @@ 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 (
<>
<div
style={{
display: 'flex',
justifyContent: 'space-between'
}}>
<H4 className={classes.h4}>{`Alerts ${
data ? `(${alerts.length})` : 0
}`}</H4>
{(showAllItems || cardState.cardSize === 'small') && (
<>
<Label1
style={{
textAlign: 'center',
marginBottom: 0,
marginTop: 0
}}>
<div className={classes.container}>
<H4 className={classes.h4}>{`Alerts (${alertsLength})`}</H4>
{showAllItems && (
<Label1 className={classes.upperButtonLabel}>
<Button
onClick={reset}
onClick={() => {
console.log('aaaa')
onReset()
}}
size="small"
disableRipple
disableFocusRipple
className={classes.button}>
{cardState.buttonName}
{'Show less'}
</Button>
</Label1>
</>
)}
</div>
{cardState.cardSize !== 'small' && (
<>
<Grid container spacing={1}>
<Grid item xs={12}>
<Grid item xs={12} className={classes.alertsTableMargin}>
<AlertsTable
numToRender={showAllItems ? alerts.length : NUM_TO_RENDER}
alerts={alerts}
machines={machines}
/>
{showExpandButton && (
<>
<Label1 style={{ textAlign: 'center', marginBottom: 0 }}>
{!showAllItems && alertsLength > NUM_TO_RENDER && (
<Label1 className={classes.centerLabel}>
<Button
onClick={showAllClick}
onClick={() => onExpand('alerts')}
size="small"
disableRipple
disableFocusRipple
@ -119,13 +84,10 @@ const Alerts = ({ cardState, setRightSideState }) => {
{`Show all (${alerts.length})`}
</Button>
</Label1>
</>
)}
</Grid>
</Grid>
</>
)}
</>
)
}
export default Alerts

26
new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js
View file

@ -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'
},

24
new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.js
View file

@ -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: <WarningIcon style={{ height: 20, width: 20, marginRight: 12 }} />,
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 (
<List dense className={classes.table}>
{alerts.map((alert, idx) => {
if (idx < numToRender) {
{alertsToRender.map((alert, idx) => {
return (
<StyledListItem key={idx}>
<ListItem key={idx}>
{icons[alert.type] || (
<Wrench style={{ height: 23, width: 23, marginRight: 8 }} />
)}
<P className={classes.listItemText}>{`${alert.message}${alert
.detail.deviceId &&
' - ' + machines[alert.detail.deviceId]}`}</P>
<P className={classes.listItemText}>{`${alert.message}${alert.detail
.deviceId && ' - ' + machines[alert.detail.deviceId]}`}</P>
<LinkIcon
className={classes.linkIcon}
onClick={() => history.push(links[alert.type] || '/dashboard')}
/>
</StyledListItem>
</ListItem>
)
} else return null
})}
</List>
)

1
new-lamassu-admin/src/pages/Dashboard/Dashboard.js
View file

@ -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'

8
new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js
View file

@ -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
}
}

1
new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js
View file

@ -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'

15
new-lamassu-admin/src/pages/Dashboard/RightSide.js
View file

@ -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,17 +34,17 @@ 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 (
<Grid item xs={6}>
{/* <CollapsibleCard
<CollapsibleCard
className={classes.alertsCard}
state={alertsSize}
shrunkComponent={
@ -61,7 +62,7 @@ const RightSide = () => {
onReset={onReset}
size={alertsSize}
/>
</CollapsibleCard> */}
</CollapsibleCard>
<CollapsibleCard
state={systemStatusSize}
shrunkComponent={
@ -74,7 +75,7 @@ const RightSide = () => {
<SystemStatus
onExpand={() => {
setSystemStatusSize(cardState.EXPANDED)
// setAlertsSize(cardState.SHRUNK)
setAlertsSize(cardState.SHRUNK)
}}
onReset={onReset}
size={systemStatusSize}

63
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.js
View file

@ -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 (
<>
<Operation />
{value > 25 && <span className={classes.label}>{` ${value}%`}</span>}
</>
)
}
if (value >= 10) {
return <Operation />
const buildPercentageView = value => {
if (value > 15) {
return <Label1 className={classes.label}>{` ${value}%`}</Label1>
}
}
return (
<div className={classes.wrapper}>
<div className={classnames(classes.percentageBox, classes.cashIn)}>
<div
className={classnames(
classes.percentageBox,
classes.inColor,
// if value between [1, 4], percentage box should not go below 6 px and border radius is 2px
// if value is 0 or 100, then width will be allowed to be 0px in one of the boxes, making it disappear
value < 5 && value > 0 ? classes.other : null
)}
style={{ width: `${value}%`, marginRight: 4 }}>
{buildPercentageView(value, 'cashIn')}
</div>
<div className={classnames(classes.percentageBox, classes.cashOut)}>
<div
className={classnames(
classes.percentageBox,
classes.outColor,
100 - value < 5 && 100 - value > 0 ? classes.other : null
)}
style={{ width: `${100 - value}%` }}>
{buildPercentageView(100 - value, 'cashOut')}
</div>
</div>

1
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.js
View file

@ -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 => {

1
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
View file

@ -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 }) => {

1
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.js
View file

@ -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'

49
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
View file

@ -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,8 +208,24 @@ const SystemPerformance = () => {
<LineChart timeFrame={selectedRange} data={transactionsToShow} />
</Grid>
<Grid item xs={4}>
<Label2>Direction</Label2>
<Grid container>
<Grid item style={{ marginRight: 34 }}>
<Label2>Direction</Label2>
</Grid>
<Grid
item
className={classnames(
classes.directionLabelContainer,
classes.dirLabContMargin
)}>
<div className={classes.outSquare} />
<Label1 className={classes.directionLabel}>Out</Label1>
</Grid>
<Grid item className={classes.directionLabelContainer}>
<div className={classes.inSquare} />
<Label1 className={classes.directionLabel}>In</Label1>
</Grid>
</Grid>
<Grid item xs>
<PercentageChart
cashIn={getDirectionPercent().cashIn}
@ -216,37 +234,10 @@ const SystemPerformance = () => {
</Grid>
</Grid>
</Grid>
</Grid>
</>
)}
</>
)
}
/**
<Grid item xs={4}>
<div style={{ display: 'flex' }}>
<Label2>Direction</Label2>
<div style={{ marginLeft: 8, display: 'flex' }}>
<div
style={{
width: 8,
height: 8,
borderRadius: 2,
marginTop: 18,
marginRight: 8,
backgroundColor: 'pink'
}}
/>
<p>In</p>
</div>
</div>
<Grid container>
<Grid item xs>
<PercentageChart data={getDirectionPercent()} />
</Grid>
</Grid>
</Grid>
*/
export default SystemPerformance

26
new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js
View file

@ -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
}
}

1
new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js
View file

@ -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'

1
new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js
View file

@ -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'

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

@ -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'

1
new-lamassu-admin/src/pages/Machines/MachineComponents/Commissions/Commissions.js
View file

@ -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'

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

@ -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'

1
new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js
View file

@ -8,6 +8,7 @@ import {
CellMeasurer,
CellMeasurerCache
} from 'react-virtualized'
import {
Table,
TBody,

1
new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js
View file

@ -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'

1
new-lamassu-admin/src/pages/Machines/Machines.js
View file

@ -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'