Merge pull request #12 from secureCodeBox/doc-integration-examples

Doc integration examples

Author: SirDany

gatsby-node.js

@@ -53,16 +53,6 @@ exports.createPages = ({ graphql, actions }) => {
               }
             }
           }
-          scannerExamples: allFile(filter: {absolutePath: {regex: "/scanners/(.*)/examples/"}, extension: {eq: "yaml"}}) {
-            edges {
-              node {
-                id
-                name
-                extension
-                dir
-              }
-            }
-          }
           persistenceProvider: allMarkdownRemark(
             filter: { fileAbsolutePath: { regex: "/integrations/persistence-provider/" } }
           ) {
@@ -108,15 +98,6 @@ exports.createPages = ({ graphql, actions }) => {
               id: node.id
             }
           });
-
-          const examplesComponent = path.resolve("src/templates/scannerExamples.js");
-          createPage({
-            path: `integrations/${node.frontmatter.path}/examples`,
-            component: examplesComponent,
-            context: {
-              basePath: `/${node.frontmatter.path}/examples/`
-            }
-          });
         });
         result.data.persistenceProvider.edges.forEach(({ node }) => {
           const component = path.resolve("src/templates/integration.js");

src/components/ScannerExamples.js

@@ -0,0 +1,74 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+
+const PREFIX = 23
+export default function ScannerExamples(props) {
+
+    console.log(props.scanner);
+
+    const scanner = props.scanner.substring(PREFIX);
+    const query = graphql`
+            query {
+                examples: allFile(filter: {base: {regex: "/^(findings|scan).yaml/"}, extension: {eq: "yaml"}}) {
+                    edges {
+                      node {
+                            base
+                            relativeDirectory
+                      }
+                    }
+                    nodes {
+                        fields {
+                           content
+                           fileName
+                           scanTarget
+                        }
+                    }
+                }
+            }`;
+    const data = useStaticQuery(query);
+    const targets = [];
+    const examples = [];
+
+    const length = data.examples.edges.length
+    let i;
+    for (i = 0; i < length; i++) {
+        const edge = data.examples.edges[i];
+        const node = data.examples.nodes[i];
+        if (edge.node.relativeDirectory.includes(scanner)) {
+            const target = data.examples.nodes[i].fields.scanTarget
+            if(!targets.includes(target))
+                targets.push(target);
+            examples.push(node);
+        }
+    }
+
+    return (
+        <div className="container-fluid">
+            <h2 className="title">Examples</h2>
+            <Tabs>
+                <TabList>
+                    {targets.map(target => (<Tab key={target}>{target}</Tab>))}
+                </TabList>
+                {targets.map(target => (<TabPanel key={target}>
+                    <Tabs>
+                        <TabList>
+                            {/* We are reversing to ensure that the scan.yaml is shown before the findings.yaml */}
+                            {examples.filter(example => example.fields.scanTarget === target).reverse().map((example, index) => (
+                                <Tab key={index}>{example.fields.fileName.split(".")[0]}</Tab>
+                            ))}
+                        </TabList>
+
+                        {/* We are reversing to ensure that the right text ist displayed for the right file */}
+                        {examples.filter(example => example.fields.scanTarget === target).reverse().map((example, index) => (
+                            <TabPanel key={index}>
+                                <pre><code>{example.fields.content}</code></pre>
+                            </TabPanel>
+                        ))}
+                    </Tabs>
+                </TabPanel>))}
+            </Tabs>
+        </div>
+    );
+}

src/pages/integrations/index.js

@@ -5,7 +5,7 @@ import Layout from '../../components/Layout';
 import IntegrationCard from '../../components/IntegrationCard';
 
 const Integrations = (props) => {
-  const scanner = props.data.scanner.edges;
+  const scanners = props.data.scanner.edges;
   const hook = props.data.hook.edges;
   const persistenceProvider = props.data.persistenceProvider.edges;
 
@@ -44,7 +44,7 @@ const Integrations = (props) => {
               use.
             </p>
           </div>
-          {scanner.map((edge, index) => (
+          {scanners.map((edge, index) => (
             <div
               key={index}
               className="col-12 col-md-6 col-lg-6 col-sm-12 no-highlight"

src/templates/integration.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { graphql, Link } from "gatsby";
 import Layout from "../components/Layout";
+import ScannerExamples from "../components/ScannerExamples.js";
 
 const Integration = props => {
   const { title } = props.data.markdownRemark.frontmatter;
@@ -47,6 +48,7 @@ const Integration = props => {
               className="content"
               dangerouslySetInnerHTML={{ __html: html }}
             />
+          <ScannerExamples scanner={props.path} />
           </div>
         </div>
       </div>