From f1b450dfcbfc148a2bb12598b15ac017c89ff2ac Mon Sep 17 00:00:00 2001 From: Rob Ellison Date: Thu, 15 Jun 2023 13:32:40 +0000 Subject: [PATCH] feat: fix images --- components/compliance/ControlData.jsx | 10 +- components/services/ServicesView.jsx | 343 ++++++++++-------- constants/mdxProvider.js | 175 ++++++--- pages/business-units/[bu_id].jsx | 2 +- pages/debug/{github.js => github.js.notused} | 0 pages/services/[...service].jsx | 34 +- ...caled-1150x647.png => image-not-found.png} | Bin 7 files changed, 337 insertions(+), 227 deletions(-) rename pages/debug/{github.js => github.js.notused} (100%) rename public/{image-not-found-scaled-1150x647.png => image-not-found.png} (100%) diff --git a/components/compliance/ControlData.jsx b/components/compliance/ControlData.jsx index 34e15a25..b68672a0 100644 --- a/components/compliance/ControlData.jsx +++ b/components/compliance/ControlData.jsx @@ -66,7 +66,8 @@ function MethodCard({ method }) { function MethodsList({ methods }) { return ( - Methods + Methods + Technical or Audit/Manual methods in place to enforce the control {methods.map((method, index) => ( @@ -79,7 +80,10 @@ function MethodsList({ methods }) { export function ControlDataDisplay({ data }) { - data = data[0].data + + console.log('ControlDataDisplay:data: ', data) + + data = data.data return ( {data?.name || 'N/A'} @@ -99,6 +103,8 @@ export function ControlDataDisplay({ data }) { Quality Model: {data?.quality_model || 'N/A'} + + Frameworks {data?.frameworks?.map((framework, index) => ( ))} diff --git a/components/services/ServicesView.jsx b/components/services/ServicesView.jsx index e6737bd8..b9f84de9 100644 --- a/components/services/ServicesView.jsx +++ b/components/services/ServicesView.jsx @@ -13,10 +13,19 @@ import { Chip } from '@mui/material' import { TopBar } from '@/components/dashboard'; import { MiniStatisticsCard } from "@/components/dashboard"; import { MDXProvider } from '@mdx-js/react'; -import { Menu, NavigationDrawer } from '../../components/airview-ui'; +import { Menu, ButtonMenu, NavigationDrawer } from '@/components/airview-ui'; import { ControlTable } from '@/components/compliance/ControlTable'; +import { ControlDataDisplay } from '@/components/compliance/ControlData'; import { useMdx } from '@/lib/content/mdx' import Container from '@mui/material/Container'; +import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material'; +import { + + AsideAndMainContainer, + Aside, + Main, + +} from '@/components/airview-ui'; import { Tile } from '@/components/dashboard/Tiles' @@ -25,113 +34,136 @@ import path from 'path'; import { siteConfig } from "../../site.config.js"; export function ServicesView({ - services, - providers, - children, - frontmatter - }) { - - // // console.log('IndexView:menu: ', menu) + services, + providers, + children, + frontmatter, + controls +}) { + + // // console.log('IndexView:menu: ', menu) // console.log('ServicesView:services: ', services) // console.log('ServicesView:providers: ', providers) // console.log('ServicesView:frontmatter: ', frontmatter) // console.log('ServicesView:children: ', children) - // const navItems = []; - // const { navItems, csp } = createMenu(services, providers); - // // console.log('IndexView:navItems: ', navItems) - - const navDrawerWidth = 300; - const topBarHeight = 64; - const [menuOpen, setMenuOpen] = useState(true); - - const handleOnNavButtonClick = () => setMenuOpen((prevState) => !prevState); - return ( - - - - - -
- {frontmatter && } + // const navItems = []; + // const { navItems, csp } = createMenu(services, providers); + // // console.log('IndexView:navItems: ', navItems) + + const navDrawerWidth = 300; + const topBarHeight = 64; + const [menuOpen, setMenuOpen] = useState(true); + const [dialogOpen, setDialogOpen] = useState(false); + const [controlUrl, setControlUrl] = useState(''); + const handleOnNavButtonClick = () => setMenuOpen((prevState) => !prevState); + const handleControlClick = (url, label) => { + // Show the dialog box + setDialogOpen(true); + const selectedControl = controls.find((control) => control.file === url); + setControlUrl({ url, label, selectedControl }); + + }; + const handleButtonClick = (url, label) => { + // Update the state or perform any other desired actions with the URL + // console.log("Clicked Label:", label); + // Update the 'control' state in your page component + console.log("Clicked Label:", label); + }; + return ( + + + + + +
+ + {frontmatter && } + + + +
{children && children} - -
- - ) - } - + + + +
+ {/* Dialog box */} + setDialogOpen(false)}> + Control {controlUrl.label} + + {/* Add your control component or content here */} + {/* For example: */} + + {controlUrl.selectedControl && } + + + + + + + + + ) +} -function createMenu2(menu) { - if (!menu) { - return [ - { - groupTitle: "N/A", - links: [] - }] - } - let csp = []; - let paths = []; - let services = []; - let navItems = []; - - // add CSPs - menu.forEach((x, i) => { - if (x && x.frontmatter && x.frontmatter.title) { - if (x && x.file.split('/').length === 4) { - csp.push({ name: x.frontmatter.title, path: x.file.replace("/index.mdx", "") }) - paths.push(x.file.replace("/index.mdx", "")) - } - } - }); - menu.forEach((x, i) => { - if (x && x.frontmatter && x.frontmatter.title) { - if (x && x.file.split('/').length === 5) { - const path = x.file.split("/") - services.push({ base: path.slice(0, 3).join("/"), label: x.frontmatter.title, url: x.file.replace("/index.mdx", "") }) - } - } - }); - paths.forEach((x, i) => { - let links = []; - services.forEach((y, i) => { - if (x === y.base) { - links.push({ label: y.label, url: y.url }) - } - }); - let rootcsp = ''; - csp.forEach((z, i) => { - if (x === z.path) { - rootcsp = z.name - } - }) - navItems.push({ groupTitle: rootcsp, links: links }) +function createControlMenu(controls) { + console.log('createControlMenu:controls: ', controls) + try { + const links = controls.map((control) => { + const label = control.data.id || ''; // Adjust the property name according to your control data structure + const url = control.file; - }); + return { + label, + url, + }; + }); - return { navItems, csp } + return [ + { + links: links + }]; + } catch (error) { + // console.log('createControlMenu:error: ', error) -} + return [ + { + groupTitle: "Controls", + links: [], + }] + } +}; -function ServiceMenu({services, providers, open, top, drawerWidth}) { +function ServiceMenu({ services, providers, open, top, drawerWidth }) { let menu = []; let providerPaths = []; @@ -152,81 +184,72 @@ function ServiceMenu({services, providers, open, top, drawerWidth}) { if (!result[provider]) { result[provider] = []; } - result[provider].push({label: obj.frontmatter.title, url: obj.file}); + result[provider].push({ label: obj.frontmatter.title, url: obj.file }); return result; }, {}); - // services.forEach((x, i) => { - // if (x.frontmatter && x.frontmatter.provider) { - // providerPaths.indexOf(x.frontmatter.provider)['services'].push({ name: x.frontmatter?.title, path: x?.file }); - // } - // }); - // console.log('ServiceMenu:groupedData: ', groupedData) - // console.log('ServiceMenu:csp: ', csp) - - return ( + return ( - {csp && csp.map((x, i) => - - )} - + open={open} + top={top} + drawerWidth={drawerWidth} + > + {csp && csp.map((x, i) => + + )} + ); - } - +} + function ServicesHeader(frontmatter) { - if (!frontmatter) { return <> } - frontmatter = frontmatter.frontmatter - // console.log('ServicesHeader:frontmatter: ', frontmatter) - const iconcolor = 'primary'; - return ( - <> - {/* */} - - - {frontmatter.title} - - {frontmatter.status === 'approved' ? : } - {(frontmatter?.resilience?.redundancy) ? : } - {frontmatter?.resilience?.find(item => item.name === "availability") ? ( - item.name === "availability").availability}`} - color="success" - /> - ) : ( - - )} - - - - - - - - {/* */} - - ) - } - \ No newline at end of file + if (!frontmatter) { return <> } + frontmatter = frontmatter.frontmatter + // console.log('ServicesHeader:frontmatter: ', frontmatter) + const iconcolor = 'primary'; + return ( + <> + {/* */} + + + {frontmatter.title} + + {frontmatter.status === 'approved' ? : } + {(frontmatter?.resilience?.redundancy) ? : } + {frontmatter?.resilience?.find(item => item.name === "availability") ? ( + item.name === "availability").availability}`} + color="success" + /> + ) : ( + + )} + + + + + + + + {/* */} + + ) +} diff --git a/constants/mdxProvider.js b/constants/mdxProvider.js index fa2ef918..d15793d8 100644 --- a/constants/mdxProvider.js +++ b/constants/mdxProvider.js @@ -1,5 +1,5 @@ import React from "react"; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; // import { MDXProvider } from "@mdx-js/react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; @@ -39,6 +39,9 @@ import { ProgressTable } from '../components/Tables.jsx'; // import {Layout, Column, Item } from './Layouts'; import path from 'path'; +import { Dialog, DialogContent, IconButton, Box} from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; + function MdxImage({ props, baseContext }) { @@ -59,71 +62,135 @@ function MdxImage({ props, baseContext }) { src = '/api/content/' + baseContext.owner + '/' + baseContext.repo + '?path=' + src + '&branch=' + baseContext.branch; -} else { + } else { src = '/image-not-found.png'; }; - const [isFullScreen, setIsFullScreen] = useState(false); - const [imageSize, setImageSize] = useState({ width: 0, height: 0 }); - const handleImageLoad = (event) => { - // // console.log('handleImageLoad:event', event) - const { naturalWidth, naturalHeight } = event.target; - setImageSize({ width: naturalWidth, height: naturalHeight }); - }; - const toggleFullScreen = () => { - setIsFullScreen(!isFullScreen); - }; + // Custom hook for getting window size + function useWindowSize() { + const [size, setSize] = useState([0, 0]); + useEffect(() => { + function updateSize() { + setSize([window.innerWidth, window.innerHeight]); + } + window.addEventListener('resize', updateSize); + updateSize(); + return () => window.removeEventListener('resize', updateSize); + }, []); + console.log('useWindowSize:size', size) + return size; + } + function useContainerSize() { + const ref = useRef(null); + const [size, setSize] = useState({ width: 0, height: 0 }); + + useEffect(() => { + function updateSize() { + setSize({ + width: ref.current.offsetWidth, + height: ref.current.offsetHeight + }); + } + window.addEventListener('resize', updateSize); + updateSize(); + + return () => window.removeEventListener('resize', updateSize); + }, []); + console.log('useContainerSize:ref', ref) + return [size, ref]; + } - const aspectRatio = imageSize.width / imageSize.height; - const maxWidth = '70%'; - const maxHeight = 'auto'; - const cursorStyle = { cursor: 'zoom-in' }; - const objectPosition = isFullScreen ? 'center center' : 'initial'; - return ( -
-
-
{ + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleImageLoad = (event) => { + console.log('handleImageLoad:event', event.target) + const { naturalWidth, naturalHeight } = event.target; + setImageSize({ width: naturalWidth, height: naturalHeight }); + }; + + return ( + <> + + - {props.alt} -
-
-
- ); + + + + + + {alt}/ + + + + ); + } + + + + return ( + + ) + } diff --git a/pages/business-units/[bu_id].jsx b/pages/business-units/[bu_id].jsx index e0da5a46..d69664d2 100644 --- a/pages/business-units/[bu_id].jsx +++ b/pages/business-units/[bu_id].jsx @@ -36,7 +36,7 @@ function Page({ bu }) { return ( - +
{bu && bu.name && {bu.name}} diff --git a/pages/debug/github.js b/pages/debug/github.js.notused similarity index 100% rename from pages/debug/github.js rename to pages/debug/github.js.notused diff --git a/pages/services/[...service].jsx b/pages/services/[...service].jsx index 916d3f89..df252db9 100644 --- a/pages/services/[...service].jsx +++ b/pages/services/[...service].jsx @@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react' import { siteConfig } from "../../site.config.js"; import { mdComponents } from "../../constants/mdxProvider"; import * as matter from 'gray-matter'; +import { parse } from 'toml'; import { MDXProvider } from '@mdx-js/react'; import { getAllFiles, getFileContent } from '@/lib/github' import { useMDX } from '@/lib/content/mdx' @@ -10,27 +11,27 @@ import { useMDX } from '@/lib/content/mdx' import { ServicesView } from '@/components/services' import { FullScreenSpinner } from '@/components/dashboard/index.js'; -import { basename } from 'path'; +import { dirname, basename } from 'path'; -export default function Page({ providers, services, content, file }) { +export default function Page({ providers, services, content, file, controls }) { const [pageContent, setContent] = useState({ content: undefined, frontmatter: undefined }); useEffect(() => { const { mdxContent, frontmatter } = useMDX(content); setContent({ content: mdxContent, frontmatter: frontmatter }); - },[content]) + }, [content]) - const context = { file: file, ...siteConfig.content.services}; + const context = { file: file, ...siteConfig.content.services }; if (pageContent.content && pageContent.frontmatter) { const Content = pageContent.content; - return + return } else { - return + return } }; @@ -89,7 +90,7 @@ export async function getStaticPaths() { // }) pages = services .filter((file) => basename(file) !== 'README.md') - .map((file) => {return '/' + file }); + .map((file) => { return '/' + file }); return { fallback: true, @@ -135,14 +136,27 @@ export async function getStaticProps(context) { const pageContent = await getFileContent(siteConfig.content.services.owner, siteConfig.content.services.repo, siteConfig.content.services.branch, file); const pageContentText = Buffer.from(pageContent).toString("utf-8") - // // console.log('pageContentText: ', pageContentText) - // menu = await Promise.all(pagePromises); + // controls + const controlLocation = siteConfig.content.services.path + '/' + dirname(context.params.service.join('/')); + console.log('controlLocation: ', controlLocation) + + const controlFiles = await getAllFiles(siteConfig.content.services.owner, siteConfig.content.services.repo, siteConfig.content.services.branch, controlLocation, true, '.toml') + // const files = await getAllFiles(controlLocation, '/**/*.toml'); + console.log('files: ', controlFiles) + const controlContent = controlFiles.map(async (file) => { + const content = await getFileContent(siteConfig.content.services.owner, siteConfig.content.services.repo, siteConfig.content.services.branch, file); + return { data: parse(content), file: file }; + + }); + + return { props: { providers: await Promise.all(providersContent), services: await Promise.all(servicesContent), content: pageContentText || null, - file: file + file: file, + controls: await Promise.all(controlContent) }, }; } diff --git a/public/image-not-found-scaled-1150x647.png b/public/image-not-found.png similarity index 100% rename from public/image-not-found-scaled-1150x647.png rename to public/image-not-found.png