Feat: link from alert to some page

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

@@ -33,8 +33,7 @@ const GET_ALERTS = gql`
 
 const useStyles = makeStyles(styles)
 
-const Alerts = props => {
-  const { cardState, setRightSideState } = props
+const Alerts = ({ cardState, setRightSideState }) => {
   const classes = useStyles()
   const [showAllItems, setShowAllItems] = useState(false)
   const { data } = useQuery(GET_ALERTS)

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

@@ -85,6 +85,10 @@ const styles = {
   },
   listItemText: {
     margin: '8px 0 8px 0'
+  },
+  linkIcon: {
+    marginLeft: 'auto',
+    cursor: 'pointer'
   }
 }
 export default styles

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

@@ -2,8 +2,10 @@ import { withStyles, makeStyles } from '@material-ui/core'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 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'
 import { ReactComponent as CashBoxEmpty } from 'src/styling/icons/cassettes/cashbox-empty.svg'
 import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg'
 
@@ -23,7 +25,14 @@ const icons = {
   )
 }
 
+const links = {
+  error: '/maintenance/machine-status',
+  fiatBalance: '/maintenance/cash-cassettes',
+  cryptoBalance: '/maintenance/funding'
+}
+
 const AlertsTable = ({ numToRender, alerts, machines }) => {
+  const history = useHistory()
   const classes = useStyles()
   return (
     <List dense className={classes.table}>
@@ -37,6 +46,10 @@ const AlertsTable = ({ numToRender, alerts, machines }) => {
               <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>
           )
         } else return null

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

@@ -1,8 +1,6 @@
-import { useQuery } from '@apollo/react-hooks'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import React from 'react'
 import TitleSection from 'src/components/layout/TitleSection'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
@@ -13,28 +11,9 @@ import Footer from './Footer'
 import LeftSide from './LeftSide'
 import RightSide from './RightSide'
 const useStyles = makeStyles(styles)
-const GET_ALERTS = gql`
-  query getAlerts {
-    alerts {
-      id
-      type
-      detail
-      message
-      created
-      read
-      valid
-    }
-    machines {
-      deviceId
-      name
-    }
-  }
-`
 
 const Dashboard = () => {
-  const { data } = useQuery(GET_ALERTS)
   const classes = useStyles()
-  console.log(data)
 
   return (
     <>

new-lamassu-admin/src/routing/routes.js

@@ -303,7 +303,6 @@ const Routes = () => {
       <Route exact path="/">
         <Redirect to={{ pathname: '/transactions' }} />
       </Route>
-      {/* <Route path="/dashboard" /> */}
       <Route path={'/dashboard'}>
         <Transition
           className={classes.wrapper}