-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactor of pages to use hooks
- Loading branch information
Rob Ellison
committed
Aug 8, 2023
1 parent
7c27e5a
commit 43212fa
Showing
17 changed files
with
584 additions
and
785 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import React from 'react' | ||
|
|
||
| import Grid from '@mui/material/Grid'; | ||
|
|
||
| import { Stack } from '@mui/material' | ||
| import { Chip } from '@mui/material' | ||
| import { MiniStatisticsCard } from "@/components/dashboard"; | ||
| import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Typography, Box } from '@mui/material'; | ||
| import { Container as MuiContainer } from "@mui/material"; | ||
|
|
||
|
|
||
| export function ServicesHeader({ frontmatter, extraData }) { | ||
|
|
||
| const controlCoverage = createControlCoverage(extraData); | ||
|
|
||
| if (!frontmatter) { return <></> } | ||
| // frontmatter = frontmatter.frontmatter | ||
| // console.log('ServicesHeader:controlCoverage: ', controlCoverage) | ||
| // // console.log('ServicesHeader:frontmatter: ', frontmatter) | ||
|
|
||
| let icon = { color: 'success', icon: 'check' } | ||
|
|
||
| if (controlCoverage && controlCoverage.controlCoverage < 50) { | ||
| icon = { color: 'error', icon: 'circle-exclamation' } | ||
| } else if (controlCoverage && controlCoverage.controlCoverage < 100) { | ||
| icon = { color: 'warning', icon: 'triangle-exclamation' } | ||
| } else if (!controlCoverage.controlCoverage) { | ||
| icon = { color: 'info', icon: 'circle-exclamation' } | ||
| } | ||
|
|
||
| return ( | ||
| <MuiContainer maxWidth={false} sx={{ paddingTop: 0, paddingBottom: 0 }}> | ||
| {/* <Box sx={{ display: "flex" }}>{children}</Box> */} | ||
|
|
||
| {/* <Container sx={{ px: '0px', mb: '2%' }}> */} | ||
| <Grid container spacing={2} alignItems="center" sx={{ mb: '3%' }} component="servicesHeader"> | ||
| <Grid item xs={8}> | ||
| <Typography variant="h1" component="h1">{frontmatter.title}</Typography> | ||
| <Stack direction="row" spacing={1}> | ||
| {frontmatter.status === 'approved' ? <Chip label="Approved for use" color="success" /> : <Chip label="Unapproved" color="error" />} | ||
| {(frontmatter?.resilience?.redundancy) ? <Chip label={`Redundancy: ${frontmatter.resilience.redundancy}`} color="success" /> : <Chip label="No Redundancy info" color="error" />} | ||
| {frontmatter?.resilience?.find(item => item.name === "availability") ? ( | ||
| <Chip | ||
| label={`Availability: ${frontmatter.resilience.find(item => item.name === "availability").availability}`} | ||
| color="success" | ||
| /> | ||
| ) : ( | ||
| <Chip label="No SLA Defined" color="error" /> | ||
| )} | ||
|
|
||
| </Stack> | ||
| </Grid> | ||
| <Grid item xs={4}> | ||
| <MiniStatisticsCard | ||
| color="text.highlight" | ||
| title="Controls" | ||
| count={controlCoverage.controlCount} | ||
| percentage={{ value: controlCoverage.controlCoverage ? controlCoverage.controlCoverage : '0', text: "% coverage" }} | ||
| icon={icon} | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| {/* </Container> */} | ||
| </MuiContainer> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| function createControlCoverage(controls) { | ||
| // // console.log('createControlCoverage:controls: ', controls) | ||
|
|
||
| let controlCountCovered = 0 | ||
| let controlCountUnCovered = 0 | ||
| let controlMethods = 0 | ||
| let controlCoverage = 0 | ||
|
|
||
|
|
||
| for (const control of controls) { | ||
| if (control.data && control.data.methods && control.data.methods.length > 0) { | ||
| controlMethods += control.data.methods.length | ||
| controlCountCovered++ | ||
| } else { | ||
| controlCountUnCovered++ | ||
| } | ||
| } | ||
| // calculate the percentage of covered controls vs controls | ||
| controlCoverage = Math.round((controlCountCovered / controls.length) * 100) | ||
| // // console.log('createControlCoverage:controlCoverage: ', controlCoverage) | ||
| return ({ controlCountCovered, controlCountUnCovered, controlMethods, controlCoverage, controlCount: controls.length }) | ||
| }; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { ServicesHeader } from './ServicesHeader' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React, { useState } from 'react' | ||
| import { ButtonMenu } from '@/components/airview-ui'; | ||
| import { ControlDataDisplay } from '@/components/compliance/ControlData'; | ||
| import CloseIcon from '@mui/icons-material/Close'; | ||
|
|
||
| import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Typography, Box } from '@mui/material'; | ||
|
|
||
|
|
||
| export function ControlsMenu({ | ||
| controls | ||
| }) { | ||
|
|
||
| const [dialogOpen, setDialogOpen] = useState(false); | ||
| const [controlUrl, setControlUrl] = useState(''); | ||
|
|
||
| const handleControlClick = (url, label) => { | ||
| // Show the dialog box | ||
| setDialogOpen(true); | ||
| const selectedControl = controls.find((control) => control.file === url); | ||
| setControlUrl({ url, label, selectedControl }); | ||
|
|
||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <ButtonMenu | ||
| menuTitle="Controls" | ||
| menuItems={createControlMenu(controls)} | ||
| initialCollapsed={false} | ||
| loading={false} | ||
| fetching={false} | ||
| handleButtonClick={handleControlClick} | ||
| /> | ||
|
|
||
| {controlUrl.selectedControl && | ||
| <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} fullWidth={true} maxWidth={'lg'} sx={{ | ||
| "& .MuiDialog-container": { | ||
| alignItems: "flex-start" | ||
| } | ||
| }} | ||
| scroll='paper'> | ||
| <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> | ||
| <Typography variant="h4">{controlUrl.selectedControl?.data?.name} ({controlUrl.selectedControl?.data?.id || 'N/A'})</Typography> | ||
| <IconButton edge="end" color="inherit" onClick={() => setDialogOpen(false)} aria-label="close"> | ||
| <CloseIcon /> | ||
| </IconButton> | ||
| </DialogTitle> | ||
| <DialogContent> | ||
| <ControlDataDisplay data={controlUrl.selectedControl} /> | ||
| </DialogContent> | ||
| </Dialog> | ||
| } | ||
| </> | ||
| ) | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
| function createControlMenu(controls) { | ||
| // console.log('createControlMenu:controls: ', controls) | ||
| try { | ||
| const links = controls.map((control) => { | ||
| const label = control.data.name || control.data.id || ''; // Adjust the property name according to your control data structure | ||
| const url = control.file; | ||
|
|
||
| return { | ||
| label, | ||
| url, | ||
| }; | ||
| }); | ||
|
|
||
| return [ | ||
| { | ||
| links: links | ||
| }]; | ||
| } catch (error) { | ||
| // // console.log('createControlMenu:error: ', error) | ||
|
|
||
| return [ | ||
| { | ||
| groupTitle: "Controls", | ||
| links: [], | ||
| }] | ||
| } | ||
| }; | ||
|
|
||
|
|
Oops, something went wrong.