Feat: cards same height in Dashboard

Fix: merge alerts.new.styles into alerts.styles
2021-02-11 19:33:24 +00:00 · 2021-02-11 19:33:24 +00:00 · 3f042410f7
commit 3f042410f7
parent eb5693d42b
11 changed files with 168 additions and 159 deletions
--- a/new-lamassu-admin/src/components/CollapsibleCard.js
+++ b/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>
-        <div className={classes.card}>
-          {state === cardState.SHRUNK ? shrunkComponent : children}
-        </div>
-      </Grid>
-    </div>
+    <Grid item className={classnames(className, classes.card)}>
+      {state === cardState.SHRUNK ? shrunkComponent : children}
+    </Grid>
  )
 }

--- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
+++ b/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>
+      )}
    </>
  )
 }
--- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js
+++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js
@ -1,39 +1,26 @@
-import {
-  backgroundColor,
-  offColor,
-  errorColor,
-  primaryColor,
-  spacer
-} from 'src/styling/variables'
+import { primaryColor, comet } from 'src/styling/variables'

 const styles = {
  container: {
    display: 'flex',
    justifyContent: 'space-between'
  },
-  centerLabel: {
-    textAlign: 'center',
-    marginBottom: 0,
-    marginTop: 0
-  },
-  label: {
+  h4: {
    margin: 0,
-    color: offColor
+    marginBottom: 10
  },
-  row: {
-    backgroundColor: backgroundColor,
-    borderBottom: 'none'
+  centerLabel: {
+    marginBottom: 0,
+    padding: 0,
+    textAlign: 'center'
  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    whiteSpace: 'pre'
-  },
-  error: {
-    color: errorColor
+  upperButtonLabel: {
+    marginTop: -3,
+    marginBottom: 24
  },
  button: {
    color: primaryColor,
+    marginTop: 0,
    minHeight: 0,
    minWidth: 0,
    padding: 0,
@ -42,24 +29,21 @@ const styles = {
      backgroundColor: 'transparent'
    }
  },
-  statusHeader: {
-    marginLeft: 2
+  alertsTableContainer: {
+    margin: 0
+  },
+  expandedAlertsTableContainer: {
+    margin: 0,
+    maxHeight: 460
+  },
+  noAlertsLabel: {
+    color: comet,
+    marginLeft: -5
  },
  table: {
-    marginTop: spacer * 4,
    maxHeight: 465,
-    overflow: 'auto'
-  },
-  tableBody: {
-    overflow: 'auto'
-  },
-  h4: {
-    marginTop: 0
-  },
-  buttonLabel: {
-    textAlign: 'center',
-    marginBottom: 0,
-    marginTop: 0
+    overflowX: 'hidden',
+    overflowY: 'auto'
  },
  listItemText: {
    margin: '8px 0 8px 0'
--- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.js
+++ b/new-lamassu-admin/src/pages/Dashboard/Dashboard.js
@ -34,10 +34,15 @@ const Dashboard = () => {
          </div>
        </div>
      </TitleSection>
+
      <div className={classes.root}>
        <Grid container>
-          <LeftSide />
-          <RightSide />
+          <Grid container direction="column" item xs={6}>
+            <LeftSide />
+          </Grid>
+          <Grid container direction="column" item xs={6}>
+            <RightSide />
+          </Grid>
        </Grid>
      </div>
      <Footer />
--- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js
+++ b/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
-  },
-  leftSideMargin: {
+    backgroundColor: white,
+    flex: 1,
    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'
  }
 }

--- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js
+++ b/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,
--- a/new-lamassu-admin/src/pages/Dashboard/LeftSide.js
+++ b/new-lamassu-admin/src/pages/Dashboard/LeftSide.js
@ -11,12 +11,10 @@ const LeftSide = () => {
  const classes = useStyles()

  return (
-    <Grid item xs={6}>
-      <Grid item className={classes.leftSideMargin}>
-        <div className={classes.card}>
-          <SystemPerformance />
-        </div>
-      </Grid>
+    <Grid item xs={12} className={classes.displayFlex}>
+      <div className={classes.card}>
+        <SystemPerformance />
+      </div>
    </Grid>
  )
 }
--- a/new-lamassu-admin/src/pages/Dashboard/RightSide.js
+++ b/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}>
-          <Button
-            onClick={onUnshrink}
-            size="small"
-            disableRipple
-            disableFocusRipple
-            className={classes.button}>
-            {buttonName}
-          </Button>
-        </Label1>
-      </>
+      <Label1 className={classes.upperButtonLabel}>
+        <Button
+          onClick={onUnshrink}
+          size="small"
+          disableRipple
+          disableFocusRipple
+          className={classes.button}>
+          {buttonName}
+        </Button>
+      </Label1>
    </div>
  )
 }
@ -43,44 +42,57 @@ const RightSide = () => {
    setSystemStatusSize(cardState.DEFAULT)
  }
  return (
-    <Grid item xs={6}>
-      <CollapsibleCard
-        className={classes.alertsCard}
-        state={alertsSize}
-        shrunkComponent={
-          <ShrunkCard
-            title={'Alerts'}
-            buttonName={'Show alerts'}
-            onUnshrink={onReset}
-          />
-        }>
-        <Alerts
-          onExpand={() => {
-            setAlertsSize(cardState.EXPANDED)
-            setSystemStatusSize(cardState.SHRUNK)
-          }}
-          onReset={onReset}
-          size={alertsSize}
-        />
-      </CollapsibleCard>
-      <CollapsibleCard
-        state={systemStatusSize}
-        shrunkComponent={
-          <ShrunkCard
-            title={'System status'}
-            buttonName={'Show machines'}
-            onUnshrink={onReset}
-          />
-        }>
-        <SystemStatus
-          onExpand={() => {
-            setSystemStatusSize(cardState.EXPANDED)
-            setAlertsSize(cardState.SHRUNK)
-          }}
-          onReset={onReset}
-          size={systemStatusSize}
-        />
-      </CollapsibleCard>
+    <Grid item xs={12} className={classes.displayFlex}>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+        <>
+          <CollapsibleCard
+            className={classnames({
+              [classes.alertsCard]: alertsSize !== cardState.SHRUNK,
+              [classes.shrunkCard]: alertsSize === cardState.SHRUNK,
+              [classes.expandedCard]: alertsSize === cardState.EXPANDED
+            })}
+            state={alertsSize}
+            shrunkComponent={
+              <ShrunkCard
+                title={'Alerts'}
+                buttonName={'Show alerts'}
+                onUnshrink={onReset}
+              />
+            }>
+            <Alerts
+              onExpand={() => {
+                setAlertsSize(cardState.EXPANDED)
+                setSystemStatusSize(cardState.SHRUNK)
+              }}
+              onReset={onReset}
+              size={alertsSize}
+            />
+          </CollapsibleCard>
+          <CollapsibleCard
+            className={classnames({
+              [classes.shrunkCard]: systemStatusSize === cardState.SHRUNK,
+              [classes.systemStatusCard]: systemStatusSize !== cardState.SHRUNK,
+              [classes.expandedCard]: alertsSize === cardState.EXPANDED
+            })}
+            state={systemStatusSize}
+            shrunkComponent={
+              <ShrunkCard
+                title={'System status'}
+                buttonName={'Show machines'}
+                onUnshrink={onReset}
+              />
+            }>
+            <SystemStatus
+              onExpand={() => {
+                setSystemStatusSize(cardState.EXPANDED)
+                setAlertsSize(cardState.SHRUNK)
+              }}
+              onReset={onReset}
+              size={systemStatusSize}
+            />
+          </CollapsibleCard>
+        </>
+      </div>
    </Grid>
  )
 }
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js
+++ b/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,
--- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js
+++ b/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'
  }
 }

--- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js
+++ b/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>
+          )}
        </>
      )}
    </>