Build Reachability Frontend

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+.vscode/*
 
 # debug
 npm-debug.log*

src/components/reachabilityAnalysis/reachability-analysis.tsx

@@ -0,0 +1,80 @@
+import React, { FormEventHandler, useState } from "react"
+import { ReachabilityAnalysisResponse} from "./reachability-types"
+import AnalysisResultsTable from "./renderData"
+
+const apiBaseURL = 'http://localhost:8080/api/v1/'
+
+export function ReachabilityAnalysisHero() {
+    return (
+        <div className="bg-[#0D1017] pt-24">
+            <div className="mx-auto text-center max-w-4xl px-6 max-lg:text-center lg:max-w-7xl">
+                <h1 className="text-balance text-5xl font-semibold tracking-tight text-white sm:text-6xl lg:text-pretty">
+                    Reachability Analysis 
+                </h1>
+                <p className="mx-auto mt-6 max-w-2xl text-pretty text-lg font-medium text-gray-400 max-lg:mx-auto sm:text-xl/8">
+                    This page enables you to search for a npm package and get a list of all CVEs associated with it. 
+                    Additionally you get information about whether the CVE is actually affecting this package or not. 
+                </p>
+            </div>
+            <br/> <br/>
+            <br/> 
+        </div>
+    )
+}
+
+export const apiCall = ( baseURL: string,params: string,init?: RequestInit) => {
+   return fetch(baseURL + params,init)
+}
+
+export function ReachabilityAnalysisSearchBar() {
+    const [input,setInput] = useState("")
+    const [data, setData] = useState<ReachabilityAnalysisResponse>();
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [error, setError] = useState<boolean>(false);
+
+    const getData = async () => {
+        setIsLoading(true)
+        try{
+            const response = await fetch(apiBaseURL+input)
+            const data = await response.json()
+            setIsLoading(false)
+
+            if (!data || !response.ok) {
+                window.alert("error when trying to fetch data from api endpoint")
+            }
+            setData(data)
+        }catch{
+            setError(true)
+        }finally{
+            setIsLoading(false)
+        }
+    }
+
+    const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
+        e.preventDefault()
+        getData()
+    }
+
+
+    return (
+    <div className="block pt-20 pb-20 bg-[#0D1017]" >
+        <form onSubmit={onSubmit}>
+      <label htmlFor="name" className="ml-px block text-center pl-2 text-4xl font-semibold text-white content-center">
+        Search Package
+      </label>
+      <div className="flex flex-row gap-4 mx-auto mt-4 w-1/2">
+        <input
+          id="name"
+          name="package"
+          type="text"
+          placeholder="type away..."
+          onChange={(e) => {setInput(e.target.value)}}
+          className="text-center block w-1/3 mx-auto focus:w-full text-xl rounded-full bg-white/5 px-5 py-2 text-white outline outline-1 -outline-offset-1 outline-white/50 focus:outline-3 focus:outline-white/70 placeholder:text-gray-500 focus:placeholder:opacity-0 transition-all duration-300 ease-in-out"
+        />
+      </div>
+      </form>
+      <AnalysisResultsTable loading={isLoading} error={error} data={data} />
+    </div>
+    )
+}                        
+/* <input type="submit" className="block bg-primary p-2 rounded-md text-black font-semibold hover:bg-accent hover:text-accent-foreground" /> */

src/components/reachabilityAnalysis/reachability-types.tsx

@@ -0,0 +1,63 @@
+
+export interface ReachabilityAnalysisResponse{
+    bomFormat : string
+    specVersion : string
+    serialNumber : string
+    version : number
+    metadata : Metadata
+    components : Component[]
+    vulnerabilities : Vulnerability[]
+}
+
+interface Metadata{
+    timestamp : string
+    tools : Tool[]
+}
+
+interface Tool{
+    vendor : string
+    name : string
+    version : string
+}
+
+interface Component {
+    type : string
+    name : string
+    purl : string
+    "bom-ref" : string
+}
+
+interface Vulnerability{
+    "bom-ref" : string
+    id : string
+    description : string
+    affects : Affect[]
+    analysis : Analysis
+}
+
+interface Affect{
+    ref : string
+}
+
+interface Analysis {
+    state : string
+    detail : string
+    evidence : Evidence[]
+}
+
+interface Evidence {
+    path : PathElement[]
+}
+
+
+interface PathElement{
+    id: number;
+    cve_id: string;
+    signature: string;
+    filename: string;
+    start_line: number;
+    end_line: number;
+    evidence: string;
+    purl: string;
+    calls_id: number | null;
+}

src/components/reachabilityAnalysis/renderData.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { ReachabilityAnalysisResponse } from "./reachability-types";
+import { d } from "nextra/dist/types-BhjhW0gX";
+
+interface fetchResults{
+    loading: boolean
+    error : boolean
+    data? : ReachabilityAnalysisResponse
+}
+
+interface tableEntry {
+    component : string
+    type : string
+    count : string
+}
+
+const AnalysisResultsTable: React.FC<fetchResults> = ({loading,error,data}) => {
+    if (loading && !error) {
+        return <div>Loading</div>
+    }
+    if (!loading && error){
+        return <div>Error occurred</div>
+    }
+    if (!data){
+        return <div>No data in response</div>
+    }
+
+    if (!loading && !error && data){
+        return (
+            <div className="flex flex-row justify-center items-center mt-20">
+                <table className="divide-y text-center rounded-lg w-1/2">
+                    <thead className="text-3xl bg-gray-800/75 divide-gray-200">
+                    <tr>
+                        <th className="py-3 px-10 font-semibold">Component</th>
+                        <th className="py-3 px-10 font-semibold">Type</th>
+                    </tr>
+                    </thead>
+                    <tbody className="divide-y text-xl bg-gray-800/50">
+                    {data.components.map((component, index) => (
+                        <tr key={index}>
+                            <td className="py-3 px-5">{component.purl}</td>
+                            <td className="py-3 px-5">{component.type}</td>
+                        </tr>
+                    ))}
+                    </tbody>
+                </table>
+            </div>
+        )
+    }
+    return <div>undefined behavior</div>
+}
+
+export default AnalysisResultsTable

src/pages/_meta.ts

@@ -1,3 +1,5 @@
+import { title } from "process";
+
 export default {
     index: {
         theme: {
@@ -11,6 +13,12 @@ export default {
         },
         display: 'hidden',
     },
+    "reachability-analysis": {
+        theme: {
+            layout: 'raw'
+        },
+        display: 'hidden',
+    },
     'terms-of-use': {
         display: 'hidden',
     },
@@ -37,6 +45,11 @@ export default {
         type: 'page',
         href: '/introduction',
     },
+    'header-reachability':{
+        title: 'Reachability',
+        type: 'page',
+        href: '/reachability-analysis'
+    },
     '404': {
         theme: {
             layout: 'raw',

src/pages/reachability-analysis.mdx

@@ -0,0 +1,7 @@
+import {
+    ReachabilityAnalysisHero,
+    ReachabilityAnalysisSearchBar,
+} from '../components/reachabilityAnalysis/reachability-analysis'
+
+<ReachabilityAnalysisHero />
+<ReachabilityAnalysisSearchBar />