Quickfix-Dashboard

src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/overview/page.tsx

@@ -15,6 +15,7 @@ import CVERainbowBadge from "../../../../../../components/CVERainbowBadge";
 import Page from "../../../../../../components/Page";
 import { RiskHistoryDistributionDiagram } from "../../../../../../components/RiskHistoryDistributionDiagram";
 import SeverityCard from "../../../../../../components/SeverityCard";
+import QuickfixNotification from "../../../../../../components/QuickfixNotification";
 import { AsyncButton, Button } from "../../../../../../components/ui/button";
 import {
   Card,
@@ -52,12 +53,14 @@ import {
   normalizeContentTree,
   reduceRiskHistories,
   sortRisk,
+  withMockFixableRiskHistory,
 } from "../../../../../../utils/view";
 import useRouterQuery from "../../../../../../hooks/useRouterQuery";
 import Link from "next/link";
 import { toast } from "sonner";
 import { useSession } from "@/context/SessionContext";
 import { browserApiClient } from "../../../../../../services/devGuardApi";
+import Callout from "@/components/common/Callout";
 
 const OverviewPage = () => {
   const search = useSearchParams();
@@ -178,7 +181,10 @@ const OverviewPage = () => {
   );
 
   const completeRiskHistory: RiskHistory[][] = useMemo(() => {
-    const groups = groupBy(riskHistory ?? [], "day");
+    const groups = groupBy(
+      withMockFixableRiskHistory(riskHistory ?? []),
+      "day",
+    );
     const days = Object.keys(groups).sort();
     return days.map((day) => {
       return groups[day];
@@ -252,6 +258,59 @@ const OverviewPage = () => {
     );
   }, [completeRiskHistory, mode]);
 
+  const criticalFixableAmount = useMemo(() => {
+    if (completeRiskHistory.length === 0) return 0;
+    return completeRiskHistory[completeRiskHistory.length - 1].reduce(
+      (sum, r) => sum + (r?.cvePurlFixableCritical ?? 0),
+      0,
+    );
+  }, [completeRiskHistory]);
+
+  const highFixableAmount = useMemo(() => {
+    if (completeRiskHistory.length === 0) return 0;
+    return completeRiskHistory[completeRiskHistory.length - 1].reduce(
+      (sum, r) => sum + (r?.cvePurlFixableHigh ?? 0),
+      0,
+    );
+  }, [completeRiskHistory]);
+
+  const mediumFixableAmount = useMemo(() => {
+    if (completeRiskHistory.length === 0) return 0;
+    return completeRiskHistory[completeRiskHistory.length - 1].reduce(
+      (sum, r) => sum + (r?.cvePurlFixableMedium ?? 0),
+      0,
+    );
+  }, [completeRiskHistory]);
+
+  const lowFixableAmount = useMemo(() => {
+    if (completeRiskHistory.length === 0) return 0;
+    return completeRiskHistory[completeRiskHistory.length - 1].reduce(
+      (sum, r) => sum + (r?.cvePurlFixableLow ?? 0),
+      0,
+    );
+  }, [completeRiskHistory]);
+
+  const totalAmount = useMemo(() => {
+    if (completeRiskHistory.length === 0) return 0;
+    return completeRiskHistory[completeRiskHistory.length - 1].reduce(
+      (sum, r) =>
+        sum +
+        (r?.totalAmount ??
+          (r?.cvePurlLow ?? 0) +
+            (r?.cvePurlMedium ?? 0) +
+            (r?.cvePurlHigh ?? 0) +
+            (r?.cvePurlCritical ?? 0)),
+      0,
+    );
+  }, [completeRiskHistory]);
+  const quickfixAmount =
+    criticalFixableAmount +
+    highFixableAmount +
+    mediumFixableAmount +
+    lowFixableAmount;
+
+  console.log(quickfixAmount);
+
   const vulnerableArtifacts = useMemo(() => {
     if (completeRiskHistory.length === 0) return [];
     const latestRiskHistory =
@@ -357,6 +416,7 @@ const OverviewPage = () => {
                 isLoading={riskHistoryLoading}
                 variant="critical"
                 currentAmount={criticalAmount}
+                fixableAmount={criticalFixableAmount}
                 queryIntervalStart={8.9}
                 queryIntervalEnd={10}
                 mode={mode}
@@ -365,6 +425,7 @@ const OverviewPage = () => {
                 isLoading={riskHistoryLoading}
                 variant="high"
                 currentAmount={highAmount}
+                fixableAmount={highFixableAmount}
                 queryIntervalStart={6.9}
                 queryIntervalEnd={9}
                 mode={mode}
@@ -373,6 +434,7 @@ const OverviewPage = () => {
                 isLoading={riskHistoryLoading}
                 variant="medium"
                 currentAmount={mediumAmount}
+                fixableAmount={mediumFixableAmount}
                 queryIntervalStart={3.9}
                 queryIntervalEnd={7}
                 mode={mode}
@@ -381,11 +443,21 @@ const OverviewPage = () => {
                 isLoading={riskHistoryLoading}
                 variant="low"
                 currentAmount={lowAmount}
+                fixableAmount={lowFixableAmount}
                 queryIntervalStart={0}
                 queryIntervalEnd={4}
                 mode={mode}
               />
             </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="col-2">
+                <QuickfixNotification
+                  totalAmount={totalAmount}
+                  fixableAmount={quickfixAmount}
+                  isLoading={riskHistoryLoading}
+                />
+              </div>
+            </div>
             <div className="grid grid-cols-4 gap-4">
               <div className="grid grid-cols-2 col-span-2 gap-4">
                 <AverageFixingTimeChart

src/components/QuickfixNotification.tsx

@@ -0,0 +1,70 @@
+import { FunctionComponent } from "react";
+import { ArrowRightIcon, FileTextIcon, WrenchIcon } from "lucide-react";
+import { Button } from "./ui/button";
+import { Card, CardContent } from "./ui/card";
+import { Progress } from "./ui/progress";
+import Image from "next/image";
+
+interface Props {
+  totalAmount: number;
+  fixableAmount: number;
+  isLoading: boolean;
+}
+
+const QuickfixNotification: FunctionComponent<Props> = ({
+  totalAmount,
+  fixableAmount,
+  isLoading = false,
+}) => {
+  if (isLoading || fixableAmount <= 0 || totalAmount <= 0) {
+    return null;
+  }
+  const fixableCount = Math.min(fixableAmount, totalAmount);
+  const manualReportCount = Math.max(0, totalAmount - fixableCount);
+
+  return (
+    <Card className="w-full shadow-sm">
+      <CardContent className="space-y-4 p-4">
+        <div className="rounded-xl border p-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1 border-r border-border/60 pr-4">
+              <div className="flex items-center gap-2 text-3xl font-semibold text-yellow-500">
+                <WrenchIcon className="h-5 w-5" />
+                <span>{fixableCount}</span>
+              </div>
+              <div className="text-sm text-muted-foreground">Quick-fixable</div>
+            </div>
+
+            <div className="space-y-1 pl-4">
+              <div className="flex items-center gap-2 text-3xl font-semibold text-muted-foreground">
+                <FileTextIcon className="h-5 w-5" />
+                <span>{manualReportCount}</span>
+              </div>
+              <div className="text-sm text-muted-foreground">Manual report</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">{totalAmount}</span>
+            <span>total vulnerabilities</span>
+          </div>
+
+          <Button variant="default" className="gap-2">
+            <Image
+              src="/assets/renovate.svg"
+              alt="Renovate icon"
+              width={16}
+              height={16}
+            />
+            Create PR
+            <ArrowRightIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default QuickfixNotification;

src/components/SeverityCard.tsx

@@ -15,9 +15,11 @@ import {
 } from "./ui/card";
 import { Skeleton } from "./ui/skeleton";
 import { useSearchParams } from "next/navigation";
+import { WrenchIcon } from "lucide-react";
 
 interface Props {
   currentAmount: number;
+  fixableAmount: number;
   queryIntervalStart: number;
   queryIntervalEnd: number;
   variant: "high" | "medium" | "low" | "critical";
@@ -27,6 +29,7 @@ interface Props {
 
 const SeverityCard: FunctionComponent<Props> = ({
   currentAmount,
+  fixableAmount,
   variant,
   queryIntervalStart,
   queryIntervalEnd,
@@ -77,7 +80,13 @@ const SeverityCard: FunctionComponent<Props> = ({
     );
   }
   return (
-    <Card>
+    <Card className="relative">
+      {fixableAmount > 0 && (
+        <div className="absolute right-3 top-3 z-10 flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-medium text-yellow-500 shadow-sm">
+          <WrenchIcon className="h-3.5 w-3.5" />
+          <span>{fixableAmount}</span>
+        </div>
+      )}
       <CardHeader className="pb-2">
         <CardTitle className="flex flex-row items-start justify-between">
           <span>

src/types/api/api.ts

@@ -805,6 +805,18 @@ export interface RiskHistory {
   cvePurlMediumCvss: number;
   cvePurlHighCvss: number;
   cvePurlCriticalCvss: number;
+
+  totalAmount?: number;
+
+  fixableLow: number;
+  fixableMedium: number;
+  fixableHigh: number;
+  fixableCritical: number;
+
+  cvePurlFixableLow: number;
+  cvePurlFixableMedium: number;
+  cvePurlFixableHigh: number;
+  cvePurlFixableCritical: number;
 }
 
 export type ReleaseRiskHistory = Omit<

src/utils/server.ts

@@ -91,6 +91,18 @@ export function padRiskHistory<T extends RiskHistoryEl>(
           cvePurlHighCvss: 0,
           cvePurlMediumCvss: 0,
           cvePurlLowCvss: 0,
+
+          totalAmount: 0,
+
+          fixableLow: 0,
+          fixableMedium: 0,
+          fixableHigh: 0,
+          fixableCritical: 0,
+
+          cvePurlFixableLow: 0,
+          cvePurlFixableMedium: 0,
+          cvePurlFixableHigh: 0,
+          cvePurlFixableCritical: 0,
         },
         ...r.riskHistory,
       ];

src/utils/view.ts

@@ -319,6 +319,32 @@ export const generateColor = (str: string) => {
   return colors[hash % colors.length];
 };
 
+export const withMockFixableRiskHistory = (
+  data: RiskHistory[],
+): RiskHistory[] => {
+  return data.map((entry) => ({
+    ...entry,
+    totalAmount:
+      entry.totalAmount ??
+      entry.cvePurlLow +
+        entry.cvePurlMedium +
+        entry.cvePurlHigh +
+        entry.cvePurlCritical,
+    fixableLow: entry.fixableLow ?? 2,
+    fixableMedium: entry.fixableMedium ?? 7,
+    fixableHigh: entry.fixableHigh ?? entry.high * 9,
+    fixableCritical: entry.fixableCritical ?? entry.critical * 15,
+    cvePurlFixableLow:
+      entry.cvePurlFixableLow ?? Math.floor(entry.cvePurlLow / 2),
+    cvePurlFixableMedium:
+      entry.cvePurlFixableMedium ?? Math.floor(entry.cvePurlMedium / 4),
+    cvePurlFixableHigh:
+      entry.cvePurlFixableHigh ?? Math.floor(entry.cvePurlHigh / 3),
+    cvePurlFixableCritical:
+      entry.cvePurlFixableCritical ?? Math.floor(entry.cvePurlCritical / 2),
+  }));
+};
+
 export const reduceRiskHistories = (
   histories: RiskHistory[][],
 ): Array<ReleaseRiskHistory> => {
@@ -329,10 +355,15 @@ export const reduceRiskHistories = (
         acc.cvePurlMedium += curr.cvePurlMedium;
         acc.cvePurlHigh += curr.cvePurlHigh;
         acc.cvePurlCritical += curr.cvePurlCritical;
+        acc.cvePurlFixableLow += curr.cvePurlFixableLow ?? 0;
+        acc.cvePurlFixableMedium += curr.cvePurlFixableMedium ?? 0;
+        acc.cvePurlFixableHigh += curr.cvePurlFixableHigh ?? 0;
+        acc.cvePurlFixableCritical += curr.cvePurlFixableCritical ?? 0;
         acc.cvePurlLowCvss += curr.cvePurlLowCvss;
         acc.cvePurlMediumCvss += curr.cvePurlMediumCvss;
         acc.cvePurlHighCvss += curr.cvePurlHighCvss;
         acc.cvePurlCriticalCvss += curr.cvePurlCriticalCvss;
+        acc.totalAmount = (acc.totalAmount ?? 0) + (curr.totalAmount ?? 0);
         return acc;
       },
       {
@@ -344,10 +375,15 @@ export const reduceRiskHistories = (
         cvePurlMedium: 0,
         cvePurlHigh: 0,
         cvePurlCritical: 0,
+        cvePurlFixableLow: 0,
+        cvePurlFixableMedium: 0,
+        cvePurlFixableHigh: 0,
+        cvePurlFixableCritical: 0,
         cvePurlLowCvss: 0,
         cvePurlMediumCvss: 0,
         cvePurlHighCvss: 0,
         cvePurlCriticalCvss: 0,
+        totalAmount: 0,
       } as RiskHistory,
     );
   });