Feat: cards same height in Dashboard

Fix: merge alerts.new.styles into alerts.styles

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

@@ -1,5 +1,6 @@
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -26,13 +27,9 @@ const useStyles = makeStyles(styles)
 const CollapsibleCard = ({ className, state, shrunkComponent, children }) => {
   const classes = useStyles()
   return (
-    <div className={className}>
+    <Grid item className={classnames(className, classes.card)}>
-      <Grid item>
+      {state === cardState.SHRUNK ? shrunkComponent : children}
-        <div className={classes.card}>
+    </Grid>
-          {state === cardState.SHRUNK ? shrunkComponent : children}
-        </div>
-      </Grid>
-    </div>
   )
 }
 

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

@@ -7,11 +7,10 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 
-import { cardState as cardState_ } from 'src/components/CollapsibleCard'
+import { cardState } from 'src/components/CollapsibleCard'
 import { Label1, H4 } from 'src/components/typography'
 
-import styles from '../Dashboard.styles'
+import styles from './Alerts.styles'
-
 import AlertsTable from './AlertsTable'
 
 const NUM_TO_RENDER = 3
@@ -38,7 +37,7 @@ const useStyles = makeStyles(styles)
 
 const Alerts = ({ onReset, onExpand, size }) => {
   const classes = useStyles()
-  const showAllItems = size === cardState_.EXPANDED
+  const showAllItems = size === cardState.EXPANDED
   const { data } = useQuery(GET_ALERTS)
   const alerts = R.path(['alerts'])(data) ?? []
   const machines = R.compose(
@@ -73,9 +72,9 @@ const Alerts = ({ onReset, onExpand, size }) => {
         className={classnames(alertsTableContainerClasses)}
         container
         spacing={1}>
-        <Grid item xs={12} className={classes.alertsTableMargin}>
+        <Grid item xs={12}>
           {!alerts.length && (
-            <Label1 className={classes.notAlertsLabel}>
+            <Label1 className={classes.noAlertsLabel}>
               No new alerts. Your system is running smoothly.
             </Label1>
           )}
@@ -84,20 +83,22 @@ const Alerts = ({ onReset, onExpand, size }) => {
             alerts={alerts}
             machines={machines}
           />
-          {!showAllItems && alertsLength > NUM_TO_RENDER && (
-            <Label1 className={classes.centerLabel}>
-              <Button
-                onClick={() => onExpand('alerts')}
-                size="small"
-                disableRipple
-                disableFocusRipple
-                className={classes.button}>
-                {`Show all (${alerts.length})`}
-              </Button>
-            </Label1>
-          )}
         </Grid>
       </Grid>
+      {!showAllItems && alertsLength > NUM_TO_RENDER && (
+        <Grid item xs={12}>
+          <Label1 className={classes.centerLabel}>
+            <Button
+              onClick={() => onExpand('alerts')}
+              size="small"
+              disableRipple
+              disableFocusRipple
+              className={classes.button}>
+              {`Show all (${alerts.length})`}
+            </Button>
+          </Label1>
+        </Grid>
+      )}
     </>
   )
 }

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

@@ -1,39 +1,26 @@
-import {
+import { primaryColor, comet } from 'src/styling/variables'
-  backgroundColor,
-  offColor,
-  errorColor,
-  primaryColor,
-  spacer
-} from 'src/styling/variables'
 
 const styles = {
   container: {
     display: 'flex',
     justifyContent: 'space-between'
   },
-  centerLabel: {
+  h4: {
-    textAlign: 'center',
-    marginBottom: 0,
-    marginTop: 0
-  },
-  label: {
     margin: 0,
-    color: offColor
+    marginBottom: 10
   },
-  row: {
+  centerLabel: {
-    backgroundColor: backgroundColor,
+    marginBottom: 0,
-    borderBottom: 'none'
+    padding: 0,
+    textAlign: 'center'
   },
-  header: {
+  upperButtonLabel: {
-    display: 'flex',
+    marginTop: -3,
-    alignItems: 'center',
+    marginBottom: 24
-    whiteSpace: 'pre'
-  },
-  error: {
-    color: errorColor
   },
   button: {
     color: primaryColor,
+    marginTop: 0,
     minHeight: 0,
     minWidth: 0,
     padding: 0,
@@ -42,24 +29,21 @@ const styles = {
       backgroundColor: 'transparent'
     }
   },
-  statusHeader: {
+  alertsTableContainer: {
-    marginLeft: 2
+    margin: 0
+  },
+  expandedAlertsTableContainer: {
+    margin: 0,
+    maxHeight: 460
+  },
+  noAlertsLabel: {
+    color: comet,
+    marginLeft: -5
   },
   table: {
-    marginTop: spacer * 4,
     maxHeight: 465,
-    overflow: 'auto'
+    overflowX: 'hidden',
-  },
+    overflowY: 'auto'
-  tableBody: {
-    overflow: 'auto'
-  },
-  h4: {
-    marginTop: 0
-  },
-  buttonLabel: {
-    textAlign: 'center',
-    marginBottom: 0,
-    marginTop: 0
   },
   listItemText: {
     margin: '8px 0 8px 0'

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

@@ -34,10 +34,15 @@ const Dashboard = () => {
           </div>
         </div>
       </TitleSection>
+
       <div className={classes.root}>
         <Grid container>
-          <LeftSide />
+          <Grid container direction="column" item xs={6}>
-          <RightSide />
+            <LeftSide />
+          </Grid>
+          <Grid container direction="column" item xs={6}>
+            <RightSide />
+          </Grid>
         </Grid>
       </div>
       <Footer />

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

@@ -20,7 +20,7 @@ const styles = {
   },
   root: {
     flexGrow: 1,
-    marginBottom: 108
+    display: 'flex'
   },
   footer: {
     margin: [['auto', 0, spacer * 3, 'auto']]
@@ -30,9 +30,8 @@ const styles = {
     boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)',
     borderRadius: 12,
     padding: 24,
-    backgroundColor: white
+    backgroundColor: white,
-  },
+    flex: 1,
-  leftSideMargin: {
     marginRight: 24
   },
   container: {
@@ -56,24 +55,11 @@ const styles = {
     marginLeft: spacer
   },
   alertsCard: {
-    marginBottom: 16
+    marginBottom: spacer
   },
   h4: {
     marginTop: 0
   },
-  alertsTableMargin: {
-    marginTop: -30
-  },
-  alertsTableContainer: {
-    height: 220,
-    overflowX: 'hidden',
-    overflowY: 'auto'
-  },
-  expandedAlertsTableContainer: {
-    minHeight: 476,
-    overflowX: 'hidden',
-    overflowY: 'auto'
-  },
   centerLabel: {
     marginTop: 40,
     marginBottom: 0
@@ -81,6 +67,21 @@ const styles = {
   notAlertsLabel: {
     marginTop: 40,
     color: comet
+  },
+  systemStatusCard: {
+    flex: 1,
+    marginTop: spacer
+  },
+  expandedCard: {
+    flex: 0.9
+  },
+  shrunkCard: {
+    flex: 0.1
+  },
+  displayFlex: {
+    display: 'flex',
+    flex: 0.85,
+    flexDirection: 'column'
   }
 }
 

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

@@ -39,7 +39,10 @@ const styles = {
   content: {
     width: 1200,
     backgroundColor: white,
-    zIndex: 1
+    zIndex: 1,
+    position: 'fixed',
+    bottom: -spacer,
+    transform: 'translateY(-100%)'
   },
   footerContainer: ({ expanded, bigFooter }) => ({
     marginLeft: spacer * 5,

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

@@ -11,12 +11,10 @@ const LeftSide = () => {
   const classes = useStyles()
 
   return (
-    <Grid item xs={6}>
+    <Grid item xs={12} className={classes.displayFlex}>
-      <Grid item className={classes.leftSideMargin}>
+      <div className={classes.card}>
-        <div className={classes.card}>
+        <SystemPerformance />
-          <SystemPerformance />
+      </div>
-        </div>
-      </Grid>
     </Grid>
   )
 }

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

@@ -1,6 +1,7 @@
 import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
 import React, { useState } from 'react'
 
 import CollapsibleCard, { cardState } from 'src/components/CollapsibleCard'
@@ -17,18 +18,16 @@ const ShrunkCard = ({ title, buttonName, onUnshrink }) => {
   return (
     <div className={classes.container}>
       <H4 className={classes.h4}>{title}</H4>
-      <>
+      <Label1 className={classes.upperButtonLabel}>
-        <Label1 className={classes.upperButtonLabel}>
+        <Button
-          <Button
+          onClick={onUnshrink}
-            onClick={onUnshrink}
+          size="small"
-            size="small"
+          disableRipple
-            disableRipple
+          disableFocusRipple
-            disableFocusRipple
+          className={classes.button}>
-            className={classes.button}>
+          {buttonName}
-            {buttonName}
+        </Button>
-          </Button>
+      </Label1>
-        </Label1>
-      </>
     </div>
   )
 }
@@ -43,44 +42,57 @@ const RightSide = () => {
     setSystemStatusSize(cardState.DEFAULT)
   }
   return (
-    <Grid item xs={6}>
+    <Grid item xs={12} className={classes.displayFlex}>
-      <CollapsibleCard
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-        className={classes.alertsCard}
+        <>
-        state={alertsSize}
+          <CollapsibleCard
-        shrunkComponent={
+            className={classnames({
-          <ShrunkCard
+              [classes.alertsCard]: alertsSize !== cardState.SHRUNK,
-            title={'Alerts'}
+              [classes.shrunkCard]: alertsSize === cardState.SHRUNK,
-            buttonName={'Show alerts'}
+              [classes.expandedCard]: alertsSize === cardState.EXPANDED
-            onUnshrink={onReset}
+            })}
-          />
+            state={alertsSize}
-        }>
+            shrunkComponent={
-        <Alerts
+              <ShrunkCard
-          onExpand={() => {
+                title={'Alerts'}
-            setAlertsSize(cardState.EXPANDED)
+                buttonName={'Show alerts'}
-            setSystemStatusSize(cardState.SHRUNK)
+                onUnshrink={onReset}
-          }}
+              />
-          onReset={onReset}
+            }>
-          size={alertsSize}
+            <Alerts
-        />
+              onExpand={() => {
-      </CollapsibleCard>
+                setAlertsSize(cardState.EXPANDED)
-      <CollapsibleCard
+                setSystemStatusSize(cardState.SHRUNK)
-        state={systemStatusSize}
+              }}
-        shrunkComponent={
+              onReset={onReset}
-          <ShrunkCard
+              size={alertsSize}
-            title={'System status'}
+            />
-            buttonName={'Show machines'}
+          </CollapsibleCard>
-            onUnshrink={onReset}
+          <CollapsibleCard
-          />
+            className={classnames({
-        }>
+              [classes.shrunkCard]: systemStatusSize === cardState.SHRUNK,
-        <SystemStatus
+              [classes.systemStatusCard]: systemStatusSize !== cardState.SHRUNK,
-          onExpand={() => {
+              [classes.expandedCard]: alertsSize === cardState.EXPANDED
-            setSystemStatusSize(cardState.EXPANDED)
+            })}
-            setAlertsSize(cardState.SHRUNK)
+            state={systemStatusSize}
-          }}
+            shrunkComponent={
-          onReset={onReset}
+              <ShrunkCard
-          size={systemStatusSize}
+                title={'System status'}
-        />
+                buttonName={'Show machines'}
-      </CollapsibleCard>
+                onUnshrink={onReset}
+              />
+            }>
+            <SystemStatus
+              onExpand={() => {
+                setSystemStatusSize(cardState.EXPANDED)
+                setAlertsSize(cardState.SHRUNK)
+              }}
+              onReset={onReset}
+              size={systemStatusSize}
+            />
+          </CollapsibleCard>
+        </>
+      </div>
     </Grid>
   )
 }

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

@@ -48,6 +48,8 @@ const styles = {
   },
   newHighlightedLabel: {
     cursor: 'pointer',
+    color: primaryColor,
+    fontWeight: 700,
     borderRadius: 0,
     minHeight: 0,
     minWidth: 0,

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

@@ -37,7 +37,8 @@ const styles = {
     textTransform: 'none',
     '&:hover': {
       backgroundColor: 'transparent'
-    }
+    },
+    marginBottom: -40
   },
   buttonLabel: {
     position: 'absolute',
@@ -76,11 +77,16 @@ const styles = {
   },
   machinesTableContainer: {
     marginTop: 10,
-    height: 230
+    height: 220
   },
   expandedMachinesTableContainer: {
     marginTop: 10,
-    height: 442
+    height: 414
+  },
+  centerLabel: {
+    marginBottom: 0,
+    padding: 0,
+    textAlign: 'center'
   }
 }
 

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

@@ -17,7 +17,7 @@ import styles from './MachinesTable.styles'
 const useStyles = makeStyles(styles)
 
 // number of machines in the table to render on page load
-const NUM_TO_RENDER = 3
+const NUM_TO_RENDER = 4
 
 const GET_DATA = gql`
   query getData {
@@ -112,22 +112,22 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
                 numToRender={showAllItems ? Infinity : NUM_TO_RENDER}
                 machines={machines}
               />
-              {!showAllItems && machines.length > NUM_TO_RENDER && (
-                <>
-                  <Label1 className={classes.buttonLabel}>
-                    <Button
-                      onClick={() => onExpand()}
-                      size="small"
-                      disableRipple
-                      disableFocusRipple
-                      className={classes.button}>
-                      {`Show all (${machines.length})`}
-                    </Button>
-                  </Label1>
-                </>
-              )}
             </Grid>
           </Grid>
+          {!showAllItems && machines.length > NUM_TO_RENDER && (
+            <Grid item xs={12}>
+              <Label1 className={classes.centerLabel}>
+                <Button
+                  onClick={() => onExpand()}
+                  size="small"
+                  disableRipple
+                  disableFocusRipple
+                  className={classes.button}>
+                  {`Show all (${machines.length})`}
+                </Button>
+              </Label1>
+            </Grid>
+          )}
         </>
       )}
     </>