supports scanType on dependency graph

README.md

@@ -175,4 +175,8 @@ Distributed under the AGPL-3.0-or-later License. See `LICENSE.txt` for more info
 [go.dev]: https://img.shields.io/badge/Go-00ADD8?style=for-the-badge&logo=go&logoColor=white
 [go-url]: https://go.dev
 
-docker run --network host -it -v ${PWD}:/application scanner devguard-scanner sca --assetName="test/projects/test/assets/devguard-frontend" --apiUrl="http://host.docker.internal:8080" --token="cb76b2575012202a6fdf4bdcabb35f0cb873e54eddfd1795bced05f1cd3c361a" --path="/application" --fail-on-risk=low
+
+## Build using kaniko
+```bash
+docker run --rm -v $(pwd):/workspace gcr.io/kaniko-project/executor:latest --dockerfile=/workspace/Dockerfile --context=/workspace --tarPath=/workspace/image.tar --no-push
+```

package.json

@@ -30,6 +30,7 @@
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@tailwindcss/forms": "^0.5.7",
         "@tanstack/react-table": "^8.11.2",
@@ -77,4 +78,4 @@
         "prettier": "^3.2.5",
         "prettier-plugin-tailwindcss": "^0.5.13"
     }
-}
+}

src/components/DependencyGraph.tsx

@@ -213,10 +213,11 @@ const DependencyGraph: FunctionComponent<{
       }
       return;
     }
+
     // just use the root node
     setViewPort({
-      x: rootNode.position.x + 10,
-      y: rootNode.position.y, // i have no idea why it fits with a -3 factor
+      x: -rootNode.position.x + 10,
+      y: -rootNode.position.y + height / 2, // i have no idea why it fits with a -3 factor
       zoom: 1,
     });
   }, [
@@ -230,11 +231,6 @@ const DependencyGraph: FunctionComponent<{
     router.query.pkg,
   ]);
 
-  const onConnect = useCallback(
-    (params: any) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges],
-  );
-
   return (
     <ReactFlow
       nodes={nodes}
@@ -247,7 +243,6 @@ const DependencyGraph: FunctionComponent<{
       }}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onConnect={onConnect}
       viewport={viewPort}
       onViewportChange={setViewPort}
     ></ReactFlow>

src/components/DependencyGraphNode.tsx

@@ -16,20 +16,17 @@
 import { FlawDTO } from "@/types/api/api";
 import { Handle, Position } from "@xyflow/react";
 import { FunctionComponent } from "react";
-
 import { classNames } from "@/utils/common";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { riskToSeverity, severityToColor } from "./common/Severity";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
-import FlawState from "./common/FlawState";
-import Link from "next/link";
-import Severity, { riskToSeverity, severityToColor } from "./common/Severity";
 
 export interface DependencyGraphNodeProps {
   data: {

src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-card p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/dependency-graph.tsx

@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "@/const/viewConstants";
 import { middleware } from "@/decorators/middleware";
 import { withAsset } from "@/decorators/withAsset";
@@ -40,6 +41,7 @@ import useDimensions from "@/hooks/useDimensions";
 import { getApiClientFromContext } from "@/services/devGuardApi";
 import { DependencyTreeNode, FlawDTO } from "@/types/api/api";
 import { ViewDependencyTreeNode } from "@/types/view/assetTypes";
+import { toSearchParams } from "@/utils/common";
 
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -177,6 +179,36 @@ const DependencyGraphPage: FunctionComponent<{
           </div>
         }
       >
+        <Tabs defaultValue="sca">
+          <TabsList>
+            <TabsTrigger
+              onClick={() =>
+                router.push({
+                  query: {
+                    ...router.query,
+                    scanType: "sca",
+                  },
+                })
+              }
+              value="sca"
+            >
+              Application
+            </TabsTrigger>
+            <TabsTrigger
+              onClick={() =>
+                router.push({
+                  query: {
+                    ...router.query,
+                    scanType: "container-scanning",
+                  },
+                })
+              }
+              value="container-scanning"
+            >
+              Container Image
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
         <div className="h-screen w-full rounded-lg border bg-white dark:bg-black">
           <DependencyGraph
             flaws={flaws}
@@ -269,10 +301,21 @@ export const getServerSideProps = middleware(
 
     const [resp, flawResp, versionsResp] = await Promise.all([
       apiClient(
-        uri + "dependency-graph" + (version ? "?version=" + version : " "),
+        uri +
+          "dependency-graph?" +
+          toSearchParams({
+            all: context.query.all === "1" ? "1" : undefined,
+            version: version,
+            scanType: context.query.scanType ?? "sca",
+          }),
       ),
       apiClient(
-        uri + "affected-packages" + (version ? "?version=" + version : " "),
+        uri +
+          "affected-packages?" +
+          toSearchParams({
+            version: version,
+            scanType: context.query.scanType ?? "sca",
+          }),
       ),
       apiClient(uri + "versions"),
     ]);

src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/index.tsx

@@ -82,7 +82,7 @@ const Index: FunctionComponent = () => {
       }
     >
       <DropdownMenu>
-        <DropdownMenuTrigger>
+        <DropdownMenuTrigger asChild>
           <Button variant={"secondary"}>Download SBOM</Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>

src/utils/common.ts

@@ -19,6 +19,20 @@ export function classNames(...classes: Array<string | undefined | Boolean>) {
   return classes.filter(Boolean).join(" ");
 }
 
+export function toSearchParams(obj: Record<string, any>): URLSearchParams {
+  const res = Object.keys(obj).reduce(
+    (acc, key) => {
+      if (obj[key] !== undefined) {
+        acc[key] = obj[key];
+      }
+      return acc;
+    },
+    {} as Record<string, any>,
+  );
+
+  return new URLSearchParams(res as Record<string, string>);
+}
+
 export function getBGColorByState(state: State) {
   switch (state) {
     case "verifiedFix":