feat: fix control definition

AirWalk-Digital · May 30, 2023 · 28abc89 · 28abc89
1 parent 7d9ffdd
commit 28abc89
Show file tree

Hide file tree

Showing 9 changed files with 227 additions and 82 deletions.
diff --git a/components/ControlTable.jsx b/components/ControlTable.jsx
@@ -0,0 +1,69 @@
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import { Stack } from '@mui/material'
+import { Chip } from '@mui/material'
+
+
+function Implementation({ children }) {
+    return (
+        <TableCell align="right">
+            <Stack direction="row-reverse" spacing={1} >
+                <Chip label="Azure Policy" color="success" />
+            </Stack>
+        </TableCell>
+    )
+
+}
+
+function createData(name, calories, fat, carbs, protein) {
+    return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+    createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+    createData('Eclair', 262, 16.0, 24, 6.0),
+    createData('Cupcake', 305, 3.7, 67, 4.3),
+    createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+
+export function ControlTable({controls, framework='NIST80053'}) {
+
+console.log('ControlTable:controls: ', controls)
+
+    return (
+        <TableContainer component={Paper}>
+            <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                <TableHead sx={{ color: 'background.primary' }} >
+                    <TableRow>
+                        <TableCell>Framework Section</TableCell>
+                        <TableCell align="right">Control</TableCell>
+                        <TableCell align="left">Description</TableCell>
+                        <TableCell align="right">Implementation(s)</TableCell>
+                        <TableCell align="right">Owner</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {controls.map((row, i) => (
+                        <TableRow
+                            key={i}
+                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                        >
+                            <TableCell component="th" scope="row"> {row.data?.framework?.[framework]?.section ?? null}                            </TableCell>
+                            <TableCell align="right">{row?.data?.id ?? null}</TableCell>
+                            <TableCell align="left">{row?.data?.description ?? null }</TableCell>
+                            <TableCell component={Implementation} align="right">{row?.carbs ?? null}</TableCell>
+                            <TableCell align="right">{row?.data?.control_owner ?? null}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+}
diff --git a/components/TopBar.jsx b/components/TopBar.jsx
@@ -77,6 +77,11 @@ function Topbar({
               Cloud Services
               </MenuItem>
             </Link>
+            <Link href="/frameworks" sx={{ textDecoration: 'none' }}>
+              <MenuItem>
+              Frameworks
+              </MenuItem>
+            </Link>
           </Menu>
           <Menu
             id="menu-applications"

diff --git a/content/services/azure/storage_accounts/SA-AC_010.toml b/content/services/azure/storage_accounts/SA-AC_010.toml
@@ -4,17 +4,23 @@ id = "SA-010"
 csp = "Azure"
 service = "Microsoft.Storage/StorageAccounts"
 control_owner = "Cloud"
-quality_model = "Security" #
+quality_model = "Security" # ISO10k Domain
 
-[framework."NIST80053"."Access Control"]
-control_id = "AC1"
-[framework."MSCSB"."Azure security baseline for Storage"]
-control_id = "NS-2"
+[[frameworks]]
+name = "NIST80053"
+section = "Access Control"
+control = "AC1" # optional control
 
-[tools.azurepolicy]
+[[frameworks]]
+name = "MSCSB"
+section = "Azure security baseline for Storage"
+control = "NS-2"
+
+[[methods]]
 system = "Azure Policy"
 reference = "/providers/Microsoft.Authorization/policyDefinitions/b2982f36-99f2-4db5-8eff-283140c09693"
 default_action = "Audit"
+custom = false # is the control an OOTB control or needs to be custom created.
 action = "Deny" # Deny | Audit | None |
 type = "Default" # Default | Custom
 ttl = 48 # hours before the control or resources are timed out and deemed to not exist

diff --git a/pages/_app.js b/pages/_app.js
@@ -6,7 +6,6 @@ import { CurrentSlideProvider } from "../context/CurrentSlideContext";
 import { ModeProvider } from "../context/ModeContext";
 import TransitionPage from "../layouts/TransitionPage";
 import Script from 'next/script';
-import ErrorBoundary from "../components/ErrorBoundary.jsx";
 
 import { MDXProvider } from '@mdx-js/react'
 import { mdComponents } from "../constants/mdxProvider";

diff --git a/pages/business-units/index.jsx b/pages/business-units/index.jsx
@@ -20,6 +20,7 @@ import Grid from '@mui/material/Grid';
 import Container from '@mui/material/Container';
 import { getBusinessUnits } from '../../backend/business-units';
 import Link from "next/link";
+import dynamic from 'next/dynamic'
 
 import { MiniStatisticsCard } from "../../components/dashboard";
 
@@ -205,8 +206,11 @@ export const AppTile = ({ name, app_id }) => {
     );
 };
 
+export default dynamic(() => Promise.resolve(Page), {
+    ssr: false,
+  });
 
-export default function Page({ businessUnits }) {
+function Page({ businessUnits }) {
 
     const topBarHeight = 64;
 

diff --git a/pages/frameworks/index.jsx b/pages/frameworks/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from 'react'
 import WarningIcon from "@mui/icons-material/Warning";
 import { Typography, Box } from "@mui/material";
 import {
@@ -26,67 +26,111 @@ import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Menu, NavigationDrawer } from '@/components/airview-ui';
 
-
-
-function FrameworkSection({domain}) {
+function FrameworkSection({ domain }) {
 
 
     return (
-        <Accordion sx={{my:'1%'}}>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1a-content"
-          id="panel1a-header"
-        >
-          <Typography sx={{ width: '50%', flexShrink: 0 }}>{domain.title} ({domain.id})</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-        {domain.controls ? (
-                                domain.controls.map((ct, i) => <FrameworkControl key={i} control={ct} />)
-                            ) : (
-                                null
-                            )}
+        <Accordion sx={{ my: '1%' }}>
+            <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls="panel1a-content"
+                id="panel1a-header"
+            >
+                <Typography sx={{ width: '50%', flexShrink: 0 }}>{domain.title} ({domain.id})</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+                {domain.controls ? (
+                    domain.controls.map((ct, i) => <FrameworkControl key={i} control={ct} />)
+                ) : (
+                    null
+                )}
 
-        </AccordionDetails>
-      </Accordion>
+            </AccordionDetails>
+        </Accordion>
     )
 }
 
-function FrameworkControl({control}) {
+function FrameworkControl({ control }) {
     console.log('control : ', control)
 
     return (
         <Box
-        sx={{
-            // bgcolor: 'background.paper',
-            // borderColor: 'error', //icon.color,
-            boxShadow: 0,
-            border: 1,
-            borderRadius: 2,
-            p: 2,
-            m: '1%'
-            // minWidth: 300,
-        }}
-    >
-        <Stack direction="row" spacing={1} sx={{ pt: '2%' }}  alignItems="center"   justifyContent="space-between">
-         <Typography variant="h4" color='text.main'>{control.title}</Typography>   
-        <Chip label={control.id} variant="outlined" sx={{ml:'auto', mr: '5%'}}/>
-        </Stack>
-        <Typography variant="body2" color='text.main'>{control.specification}</Typography>   
+            sx={{
+                // bgcolor: 'background.paper',
+                // borderColor: 'error', //icon.color,
+                boxShadow: 0,
+                border: 1,
+                borderRadius: 2,
+                p: 2,
+                m: '1%'
+                // minWidth: 300,
+            }}
+        >
+            <Stack direction="row" spacing={1} sx={{ pt: '2%' }} alignItems="center" justifyContent="space-between">
+                <Typography variant="h4" color='text.main'>{control.title}</Typography>
+                <Chip label={control.id} variant="outlined" sx={{ ml: 'auto', mr: '5%' }} />
+            </Stack>
+            <Typography variant="body2" color='text.main'>{control.specification}</Typography>
         </Box>
     )
 };
 
 export default function Page({ framework }) {
 
+    const navItemsDocs = [
+        {
+            groupTitle: "Infrastructure-as-Code",
+            links: [
+                {
+                    label: "terraform-azure-storage",
+                    url: "",
+                },
+            ],
+        },
+        {
+            groupTitle: "Designs",
+            links: [
+                {
+                    label: "Static Content Website",
+                    url: "",
+                },
+                {
+                    label: "Data Lakes",
+                    url: "",
+                },
+            ],
+        },
+    ];
+    const navDrawerWidth = 300;
     const topBarHeight = 64;
-    return (
+    const [menuOpen, setMenuOpen] = useState(true);
+
+    const handleOnNavButtonClick = () => setMenuOpen((prevState) => !prevState); return (
         <ThemeProvider theme={baseTheme}>
             <CssBaseline />
-            <Topbar menu={false} topBarHeight={topBarHeight} logo={true} />
-            <div style={{ marginTop: topBarHeight, paddingLeft: 0, }}
-            ><Box sx={{ px: '5%' }}>
+            <Topbar onNavButtonClick={handleOnNavButtonClick}
+                navOpen={menuOpen}
+                menu={true}
+                topBarHeight={topBarHeight} />
+            <NavigationDrawer
+                open={menuOpen}
+                top={topBarHeight}
+                drawerWidth={navDrawerWidth}
+            >
+                <Menu
+                    menuTitle="Mapped Frameworks"
+                    menuItems={navItemsDocs}
+                    initialCollapsed={false}
+                    loading={false}
+                    fetching={false}
+                    linkComponent={Link}
+
+                />
+            </NavigationDrawer>
+            <div style={{ marginTop: topBarHeight, paddingLeft: menuOpen ? navDrawerWidth : 0, }}>
+                <Box sx={{ px: '5%' }}>
                     <Typography variant="h1" component="h1">{framework.name} ({framework.version})</Typography>
                     <Grid container spacing={4} alignItems="stretch" sx={{ pt: '2%' }} justifyContent="center">
                         {/* <Grid item xs={3} md={3} sx={{ mb: '20px' }}>
@@ -127,15 +171,15 @@ export default function Page({ framework }) {
                         </Grid> */}
                     </Grid>
 
-                    <Container maxWidth="lg" sx={{ height: '100vh' }}>
-                        
-                            {framework.domains ? (
-                                framework.domains.map((fr, i) => <FrameworkSection key={i} domain={fr} />)
-                            ) : (
-                                null
-                            )}
-                        
-                    </Container>
+                    {/* <Container maxWidth="lg" sx={{ mx:'0px', px:'0px', height: '100vh' }}> */}
+                    <>
+                        {framework.domains ? (
+                            framework.domains.map((fr, i) => <FrameworkSection key={i} domain={fr} />)
+                        ) : (
+                            null
+                        )}
+                    </>
+                    {/* </Container> */}
                 </Box>
             </div>
         </ThemeProvider>

diff --git a/pages/index.js b/pages/index.js
@@ -14,7 +14,7 @@ import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import { ThemeProvider } from '@mui/material/styles';
-import { theme } from '../constants/baseTheme';
+import { baseTheme } from '@/constants/baseTheme';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { Menu as MenuIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
@@ -66,7 +66,7 @@ const SiteSection = ({ title, description, link }) => {
 }
 const LandingPage = () => {
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={baseTheme}>
       <CssBaseline />
       <Topbar logo={false}/>
       {/* Hero Section */}