Feat: enable alerts card on dashboard

lib/new-admin/graphql/schema.js

@@ -256,7 +256,6 @@ const typeDefs = gql`
 
   type Notification {
     id: ID!
-    deviceName: String
     type: String
     detail: JSON
     message: String

migrations/1607009558538-create-notifications-table.js

@@ -23,8 +23,7 @@ exports.up = function (next) {
         "message" TEXT NOT NULL,
         "created" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
         "read" BOOLEAN NOT NULL DEFAULT 'false',
-        "valid" BOOLEAN NOT NULL DEFAULT 'true',
-        "modified" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP
+        "valid" BOOLEAN NOT NULL DEFAULT 'true'
     );
     CREATE INDEX ON notifications (valid);
     CREATE INDEX ON notifications (read);`

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js

@@ -19,7 +19,6 @@ const GET_NOTIFICATIONS = gql`
   query getNotifications {
     notifications {
       id
-      deviceName
       type
       detail
       message

new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js

@@ -35,8 +35,8 @@ const useStyles = makeStyles(styles)
 
 const Alerts = ({ cardState, setRightSideState }) => {
   const classes = useStyles()
-  const [showAllItems, setShowAllItems] = useState(false)
   const { data } = useQuery(GET_ALERTS)
+  const [showAllItems, setShowAllItems] = useState(false)
 
   const alerts = R.path(['alerts'])(data) ?? []
   const machines = R.compose(

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

@@ -2,7 +2,8 @@ import {
   backgroundColor,
   offColor,
   errorColor,
-  primaryColor
+  primaryColor,
+  spacer
 } from 'src/styling/variables'
 
 const styles = {
@@ -44,7 +45,7 @@ const styles = {
   statusHeader: {
     marginLeft: 2
   },
-  table: {
+  /*   table: {
     maxHeight: 440,
     '&::-webkit-scrollbar': {
       width: 7
@@ -53,6 +54,18 @@ const styles = {
       backgroundColor: offColor,
       borderRadius: 5
     }
+  }, */
+  table: {
+    paddingTop: spacer * 4,
+    maxHeight: 465,
+    overflow: 'auto',
+    '&::-webkit-scrollbar': {
+      width: 7
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: offColor,
+      borderRadius: 5
+    }
   },
   tableBody: {
     overflow: 'auto'
@@ -69,6 +82,9 @@ const styles = {
     '&:nth-of-type(odd)': {
       backgroundColor: backgroundColor
     }
+  },
+  listItemText: {
+    margin: '8px 0 8px 0'
   }
 }
 export default styles

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

@@ -1,19 +1,45 @@
+import { withStyles, makeStyles } from '@material-ui/core'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import * as R from 'ramda'
 import React from 'react'
+import { P } from 'src/components/typography/index'
+import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg'
+import { ReactComponent as CashBoxEmpty } from 'src/styling/icons/cassettes/cashbox-empty.svg'
+import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg'
 
-const AlertsTable = ({ numToRender, alerts }) => {
-  const alertsToRender = R.slice(0, numToRender, alerts)
+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: (
+    <CashBoxEmpty style={{ height: 18, width: 18, marginRight: 14 }} />
+  )
+}
+
+const AlertsTable = ({ numToRender, alerts, machines }) => {
+  const classes = useStyles()
   return (
-    <List dense>
-      {alertsToRender.map((alert, idx) => {
-        return (
-          <ListItem key={idx}>
-            <ListItemText primary={alert.text} />
-          </ListItem>
-        )
+    <List dense className={classes.table}>
+      {alerts.map((alert, idx) => {
+        if (idx < numToRender) {
+          return (
+            <StyledListItem 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>
+            </StyledListItem>
+          )
+        } else return null
       })}
     </List>
   )

new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js

@@ -51,20 +51,8 @@ const styles = {
   statusHeader: {
     marginLeft: 2
   },
-  /*   table: {
-    maxHeight: 440,
-    '&::-webkit-scrollbar': {
-      width: 7
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: offColor,
-      borderRadius: 5
-    }
-  }, */
-  // temporary, when notifications are enabled delete this one and decomment above
   table: {
-    maxHeight: 465,
-    minHeight: 465,
+    maxHeight: 440,
     '&::-webkit-scrollbar': {
       width: 7
     },

new-lamassu-admin/src/styling/icons/cassettes/cashbox-empty.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>07E3DD15-D5E4-46A8-BF7B-064F598230CE</title>
+    <g id="DASHBOARD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dashboard_v9#1-(week)" transform="translate(-772.000000, -212.000000)">
+            <g id="dashboard/row/alert/positive" transform="translate(756.000000, 204.000000)">
+                <g id="Group-2" transform="translate(16.000000, 8.000000)">
+                    <polygon id="Rectangle-2-Copy-45" fill="#FF584A" fill-rule="nonzero" points="0 11 16 11 16 16 0 16"></polygon>
+                    <rect id="Rectangle-Copy-10" stroke="#FF584A" stroke-width="2" x="1" y="1" width="14" height="14"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>