Feat: make dashboard and machine profile page

2020-11-17 12:13:10 +00:00 · 2020-11-17 12:13:10 +00:00 · 19cd086436
commit 19cd086436
parent d17ca43abb
54 changed files with 11680 additions and 2611 deletions
--- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
+++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
@ -0,0 +1,122 @@
+import Button from '@material-ui/core/Button'
+import Grid from '@material-ui/core/Grid'
+import { makeStyles } from '@material-ui/core/styles'
+import React, { useState, useEffect } from 'react'
+
+import { Label1, H4 } from 'src/components/typography'
+
+import styles from '../Dashboard.styles'
+
+import AlertsTable from './AlertsTable'
+
+const NUM_TO_RENDER = 3
+
+const data = {
+  alerts: [
+    { text: 'alert 1' },
+    { text: 'alert 2' },
+    { text: 'alert 3' },
+    { text: 'alert 4' },
+    { text: 'alert 5' }
+  ]
+}
+
+const useStyles = makeStyles(styles)
+
+const Alerts = ({ cardState, setRightSideState }) => {
+  const classes = useStyles()
+  const [showAllItems, setShowAllItems] = useState(false)
+  const [showExpandButton, setShowExpandButton] = useState(false)
+  const [numToRender, setNumToRender] = useState(NUM_TO_RENDER)
+
+  useEffect(() => {
+    if (showAllItems) {
+      setShowExpandButton(false)
+      setNumToRender(data?.alerts.length)
+    } else if (data && data?.alerts.length > numToRender) {
+      setShowExpandButton(true)
+    }
+    if (cardState.cardSize === 'small' || cardState.cardSize === 'default') {
+      setShowAllItems(false)
+      setNumToRender(NUM_TO_RENDER)
+    }
+  }, [cardState.cardSize, numToRender, showAllItems])
+
+  const reset = () => {
+    setRightSideState({
+      systemStatus: { cardSize: 'default', buttonName: 'Show less' },
+      alerts: { cardSize: 'default', buttonName: 'Show less' }
+    })
+    setShowAllItems(false)
+    setNumToRender(NUM_TO_RENDER)
+  }
+
+  const showAllClick = () => {
+    setShowExpandButton(false)
+    setShowAllItems(true)
+    setRightSideState({
+      systemStatus: { cardSize: 'small', buttonName: 'Show machines' },
+      alerts: { cardSize: 'big', buttonName: 'Show less' }
+    })
+  }
+
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between'
+        }}>
+        <H4 className={classes.h4}>{`Alerts ${
+          data ? `(${data.alerts.length})` : 0
+        }`}</H4>
+        {(showAllItems || cardState.cardSize === 'small') && (
+          <>
+            <Label1
+              style={{
+                textAlign: 'center',
+                marginBottom: 0,
+                marginTop: 0
+              }}>
+              <Button
+                onClick={reset}
+                size="small"
+                disableRipple
+                disableFocusRipple
+                className={classes.button}>
+                {cardState.buttonName}
+              </Button>
+            </Label1>
+          </>
+        )}
+      </div>
+      {cardState.cardSize !== 'small' && (
+        <>
+          <Grid container spacing={1}>
+            <Grid item xs={12}>
+              <AlertsTable
+                numToRender={numToRender}
+                alerts={data?.alerts ?? []}
+              />
+              {showExpandButton && (
+                <>
+                  <Label1 style={{ textAlign: 'center', marginBottom: 0 }}>
+                    <Button
+                      onClick={showAllClick}
+                      size="small"
+                      disableRipple
+                      disableFocusRipple
+                      className={classes.button}>
+                      {`Show all (${data.alerts.length})`}
+                    </Button>
+                  </Label1>
+                </>
+              )}
+            </Grid>
+          </Grid>
+        </>
+      )}
+    </>
+  )
+}
+export default Alerts