feat: dynamic control coverage

AirWalk-Digital · Jun 16, 2023 · d8652b3 · d8652b3
1 parent 1a6bc36
commit d8652b3
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 79 deletions.
diff --git a/components/services/ServicesView.jsx b/components/services/ServicesView.jsx
@@ -80,23 +80,30 @@ export function ServicesView({
     setPrint(!print);
     setMenuOpen(print);
 
-    if (mdxContainer.current !== null) {
-      const paged = new Previewer();
-      const contentMdx = `${mdxContainer.current?.innerHTML}`;
-      paged
-        .preview(contentMdx, ['/pdf.css'], previewContainer.current)
-        .then((flow) => {
-          // // console.log('====flow====')
-          // // console.log(flow)
-        });
-      // return () => {
-      //   document.head
-      //     .querySelectorAll("[data-pagedjs-inserted-styles]")
-      //     .forEach((e) => e.parentNode?.removeChild(e));
-      // };
-    }
+
   };
 
+  const controlCoverage = createControlCoverage(controls);
+  useEffect(() => {
+    if (print) {
+      if (mdxContainer.current !== null) {
+        const paged = new Previewer();
+        const contentMdx = `${mdxContainer.current?.innerHTML}`;
+        paged
+          .preview(contentMdx, ['/pdf.css'], previewContainer.current)
+          .then((flow) => {
+            // // console.log('====flow====')
+            // // console.log(flow)
+          });
+        // return () => {
+        //   document.head
+        //     .querySelectorAll("[data-pagedjs-inserted-styles]")
+        //     .forEach((e) => e.parentNode?.removeChild(e));
+        // };
+      }
+    }
+  }, [print])
+
 
   return (
     <ThemeProvider theme={baseTheme}>
@@ -115,27 +122,27 @@ export function ServicesView({
       />
       <div
         style={{
-          marginTop: topBarHeight,
+          marginTop: (print ? 0 : topBarHeight),
           // paddingLeft: menuOpen ? navDrawerWidth : 0,
           paddingLeft: (print || !menuOpen) ? 0 : navDrawerWidth,
 
         }}
       >
-         <Button onClick={() => handlePrint()} sx={{ displayPrint: 'none' }}>{ print ? 'Exit' : 'Print View'}</Button>
+        <Button onClick={() => handlePrint()} sx={{ displayPrint: 'none' }}>{print ? 'Exit' : 'Print View'}</Button>
         <Box sx={{ px: '5%' }}>
-          {frontmatter && !print && <ServicesHeader frontmatter={frontmatter} />}
+          {frontmatter && !print && <ServicesHeader frontmatter={frontmatter} controlCoverage={controlCoverage}/>}
 
         </Box>
         <AsideAndMainContainer>
           <Main>
-          <div className="pagedjs_page" ref={previewContainer} style={{ display: print ? 'block' : 'none' }}></div>
+            <div className="pagedjs_page" ref={previewContainer} style={{ display: print ? 'block' : 'none' }}></div>
 
-          <div ref={mdxContainer} style={{ display: print ? 'none' : 'block' }}>
-            {print && frontmatter && <ServicesHeader frontmatter={frontmatter} />}
-            {children && children}
+            <div ref={mdxContainer} style={{ display: print ? 'none' : 'block' }}>
+              {print && <ServicesHeader frontmatter={frontmatter} controlCoverage={controlCoverage} style={{ display: print ? 'block' : 'none' }} />}
+              {children && children}
             </div>
           </Main>
-          <Aside sx={{ displayPrint: 'none', display: print ? 'none' : ''}}>
+          <Aside sx={{ displayPrint: 'none', display: print ? 'none' : '' }}>
             <ButtonMenu
               menuTitle="Controls"
               menuItems={createControlMenu(controls)}
@@ -150,18 +157,18 @@ export function ServicesView({
       </div>
       {/* Dialog box */}
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} fullWidth={true} maxWidth={'lg'}>
-      <DialogActions>
+        <DialogActions>
           <Button onClick={() => setDialogOpen(false)}>Close</Button>
         </DialogActions>
         <DialogTitle>Control {controlUrl.label}</DialogTitle>
-       
+
         <DialogContent>
           {/* Add your control component or content here */}
           {/* For example: */}
-          
+
           {controlUrl.selectedControl && <ControlDataDisplay data={controlUrl.selectedControl} />}
         </DialogContent>
-       
+
       </Dialog>
 
 
@@ -172,6 +179,30 @@ export function ServicesView({
 
 
 
+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 })
+};
+
+
 function createControlMenu(controls) {
   console.log('createControlMenu:controls: ', controls)
   try {
@@ -254,11 +285,22 @@ function ServiceMenu({ services, providers, open, top, drawerWidth }) {
 
 
 
-function ServicesHeader(frontmatter) {
+function ServicesHeader({frontmatter, controlCoverage}) {
   if (!frontmatter) { return <></> }
-  frontmatter = frontmatter.frontmatter
+  // frontmatter = frontmatter.frontmatter
+  console.log('ServicesHeader:controlCoverage: ', controlCoverage)
   // console.log('ServicesHeader:frontmatter: ', frontmatter)
-  const iconcolor = 'primary';
+
+  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 (
     <>
       {/* <Container sx={{ px: '0px', mb: '2%' }}> */}
@@ -283,9 +325,9 @@ function ServicesHeader(frontmatter) {
           <MiniStatisticsCard
             color="text.highlight"
             title="Controls"
-            count="13"
-            percentage={{ value: '55%', text: "coverage" }}
-            icon={{ color: "success", icon: 'check' }}
+            count={controlCoverage.controlCount}
+            percentage={{ value: controlCoverage.controlCoverage ? controlCoverage.controlCoverage : '0', text: "% coverage" }}
+            icon={icon}
           />
         </Grid>
       </Grid>

diff --git a/constants/mdxProvider.js b/constants/mdxProvider.js
@@ -97,7 +97,7 @@ function MdxImage({ props, baseContext }) {
 
       return () => window.removeEventListener('resize', updateSize);
     }, []);
-    console.log('useContainerSize:ref', ref)
+    console.log('useContainerSize:size', size)
     return [size, ref];
   }
 
@@ -148,8 +148,8 @@ function MdxImage({ props, baseContext }) {
             src={src}
             alt={alt}
             onLoad={handleImageLoad}
-            maxWidth={containerSize.width * 0.7}
-            // height={imageSize.height}
+            // maxWidth={containerSize.width * 0.7}
+            style={{ objectFit: 'contain', maxWidth: containerSize.width }}
           />
         </Box>
         <Dialog

diff --git a/pages/services/[...service].jsx b/pages/services/[...service].jsx
@@ -38,49 +38,6 @@ export default function Page({ providers, services, content, file, controls }) {
 
 
 
-
-// function useMDX(source) {
-//   const remarkPlugins = []
-
-//   remarkPlugins.push(remarkGfm);
-//   remarkPlugins.push(remarkFrontmatter);
-//   remarkPlugins.push(remarkMdxFrontmatter);
-//   remarkPlugins.push(remarkUnwrapImages);
-//   const exports = evaluateSync(source, {
-//     ...provider,
-//     ...runtime,
-//     useDynamicImport: true,
-//     remarkPlugins,
-//   });
-
-//   return { mdxContent: exports.default, frontmatter: exports.frontmatter };
-// }
-
-
-// function useMDX2(source) {
-//   const [exports, setExports] = useState({ default: undefined });
-//   const remarkPlugins = []
-
-//   remarkPlugins.push(remarkGfm);
-//   remarkPlugins.push(remarkFrontmatter);
-//   remarkPlugins.push(remarkMdxFrontmatter);
-//   remarkPlugins.push(remarkUnwrapImages);
-
-//   useEffect(() => {
-//     const processContent = () => {
-//       const exports = evaluateSync(source, {
-//         ...provider,
-//         ...runtime,
-//         useDynamicImport: true,
-//         remarkPlugins,
-//       });
-//       setExports(exports);
-//     };
-//     processContent();
-//   }, [source]);
-//   return { content: exports.default, frontmatter: exports.frontmatter };
-// }
-
 export async function getStaticPaths() {
   let pages = [];
   try {