88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
import Button from '@material-ui/core/Button'
|
|
import Grid from '@material-ui/core/Grid'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import React, { useState } from 'react'
|
|
|
|
import CollapsibleCard, { cardState } from 'src/components/CollapsibleCard'
|
|
import { H4, Label1 } from 'src/components/typography'
|
|
|
|
import Alerts from './Alerts'
|
|
import styles from './Dashboard.styles'
|
|
import SystemStatus from './SystemStatus'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const ShrunkCard = ({ title, buttonName, onUnshrink }) => {
|
|
const classes = useStyles()
|
|
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>
|
|
</>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const RightSide = () => {
|
|
const classes = useStyles()
|
|
const [systemStatusSize, setSystemStatusSize] = useState(cardState.DEFAULT)
|
|
const [alertsSize, setAlertsSize] = useState(cardState.DEFAULT)
|
|
|
|
const onReset = () => {
|
|
setAlertsSize(cardState.DEFAULT)
|
|
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>
|
|
)
|
|
}
|
|
|
|
export default RightSide
|