nullable http code and code documentation

omursahin · omursahin · commit 72de59ab2d2a · 2025-07-09T11:28:21.000+02:00
diff --git a/src/main/resources/wfc/schemas/report.yaml b/src/main/resources/wfc/schemas/report.yaml
@@ -99,7 +99,7 @@ $defs:
         uniqueItems: true
     required: ["endpointId","testCaseId","httpStatus"]
   HttpStatus:
-    type: integer
+    type: [integer,"null"]
     minimum: 0
     maximum: 599
   FoundFault:
diff --git a/web-report/src/AppProvider.tsx b/web-report/src/AppProvider.tsx
@@ -44,7 +44,29 @@ export const AppProvider = ({ children }: AppProviderProps) => {
                     setInvalidReportErrors(report.error.issues);
                     return;
                 }
-                setData(jsonData);
+
+                const result = jsonData?.problemDetails?.rest?.coveredHttpStatus?.map(status => {
+                    const httpStatus = status?.httpStatus ?? [null];
+                    const httpStatusArray = Array.isArray(httpStatus) ? httpStatus : [httpStatus];
+                    const updatedHttpStatus = httpStatusArray.map(code => code === null ? -1 : code);
+                    return {
+                        ...status,
+                        httpStatus: updatedHttpStatus
+                    };
+                }) ?? [];
+
+                const updatedJsonData = {
+                    ...jsonData,
+                    problemDetails: {
+                        ...jsonData.problemDetails,
+                        rest: {
+                            ...jsonData.problemDetails.rest,
+                            coveredHttpStatus: result
+                        }
+                    }
+                } as WebFuzzingCommonsReport;
+
+                setData(updatedJsonData);
             } catch (error: Error | unknown) {
                 if (error instanceof Error) {
                     setError("Could not load the report file. Please check if the file exists and is accessible in main folder.");
diff --git a/web-report/src/components/EndpointAccordion.tsx b/web-report/src/components/EndpointAccordion.tsx
@@ -66,7 +66,7 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
                 <div className="flex flex-wrap justify-end gap-2 mr-4">
                     {sortedStatusCodes.map((code, idx) => (
                         <Badge key={`_${idx}`} className={`${getColor(code.code, true, false)} font-mono`}>
-                            H{code.code}
+                            {code.code == -1 ? "NO-RESPONSE" : `H${code.code}`}
                         </Badge>
                     ))}
                     {sortedFaults.map((code, idx) => (
@@ -87,7 +87,7 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
                                     setIsFault(false);
                                 }}
                                        className={`${getColor(code.code, true, false)} ${getSelectedStyle(code.code, false)} hover:bg-green-600 cursor-pointer text-white font-mono text-base border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
-                                    {code.code}
+                                    {code.code == -1 ? "NO-RESPONSE" : `H${code.code}`}
                                 </Badge>
                             ))
                         }
diff --git a/web-report/src/components/StatusCodeFilterButton.tsx b/web-report/src/components/StatusCodeFilterButton.tsx
@@ -17,7 +17,7 @@ export function StatusCodeFilterButton({ code, initialState = "inactive", onChan
         if(isFault) {
             return "bg-red-500"
         }
-
+        if (code == -1) return "bg-gray-500"
         if (code >= 200 && code < 300) return "bg-green-500"
         if (code >= 300 && code < 400) return "bg-blue-500"
         if (code >= 400 && code < 500) return "bg-orange-500"
@@ -49,7 +49,7 @@ export function StatusCodeFilterButton({ code, initialState = "inactive", onChan
 
     return (
         <Badge className={getStyles()} onClick={toggleState}>
-            {isFault ? `F${-1 * code}`: `H${code}`}
+            {isFault ? `F${-1 * code}`: code == -1 ? `NO-RESPONSE`:`H${code}`}
         </Badge>
     )
 }
diff --git a/web-report/src/components/StatusCodeFilters.tsx b/web-report/src/components/StatusCodeFilters.tsx
@@ -1,6 +1,7 @@
 import {useState} from "react"
 import {StatusCodeFilterButton} from "./StatusCodeFilterButton"
 import {ITransformedReport} from "@/lib/utils.tsx";
+import {StatusCodeModal} from "@/components/StatusCodeModal.tsx";
 
 type FilterState = "inactive" | "active" | "removed"
 
@@ -38,6 +39,9 @@ export function StatusCodeFilters({data, onFiltersChange}: StatusCodeFiltersProp
         onFiltersChange(newFilters)
     }
 
+    const [isModalOpen, setIsModalOpen] = useState(false)
+
+
     return (
         <div className="mb-6">
             <div className="items-center mb-2">
@@ -68,7 +72,11 @@ export function StatusCodeFilters({data, onFiltersChange}: StatusCodeFiltersProp
                 </div>
             </div>
             <div className="text-xs text-gray-500 mt-1">Click to toggle: Default → Active → Removed → Default</div>
+            <div className="items-center mb-2 flex justify-end">
+                <div className="text-sm font-mono text-red-500 mt-1 cursor-help hover:text-green-300" onClick={() => setIsModalOpen(true)}>Code Documentation</div>
+            </div>
             <div className="border-t border-black my-2"></div>
+            <StatusCodeModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} statusCode={-1} />
         </div>
     )
 }
diff --git a/web-report/src/components/TestCaseButton.tsx b/web-report/src/components/TestCaseButton.tsx
@@ -31,7 +31,7 @@ export function TestCaseButton({ testName, statusCode, onClick, isFault }: TestC
                 <span className="font-mono text-sm text-left">{testName}</span>
             </div>
             <div className="flex items-center">
-                <span className={`font-bold mr-2 ${getColor(statusCode, false, isFault)}`}>{statusCode}</span>
+                <span className={`font-bold mr-2 ${getColor(statusCode, false, isFault)}`}>{statusCode == -1 ? "NO-RESPONSE" : statusCode}</span>
                 <ChevronRight
                     className={`${
                         isHovered ? "text-blue-600 transform translate-x-1" : "text-gray-400"
diff --git a/web-report/src/lib/utils.tsx b/web-report/src/lib/utils.tsx
@@ -6,10 +6,15 @@ export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
-export const getColor = (code: string | number, isBackground: boolean, isFault: boolean) => {
+export const getColor = (code: string | number | null | undefined, isBackground: boolean, isFault: boolean) => {
     if (isFault) {
         return isBackground ? "bg-red-500" : "text-red-500";
     }
+
+    if(code === null || code === undefined || code === "") {
+        return isBackground ? "bg-gray-500" : "text-gray-500";
+    }
+
     if (typeof code === "number") {
         return getColorNumber(code, isBackground);
     }
@@ -69,6 +74,7 @@ export const extractCodeLines = (
 
 export const calculateAllStatusCounts = (coveredHttpStatus: CoveredEndpoint[], endpointIds:string[]) => {
     const allStatusCounts ={
+        "NO_RESPONSE": 0,
         "2XX": 0,
         "3XX": 0,
         "4XX": 0,
@@ -84,6 +90,7 @@ export const calculateAllStatusCounts = (coveredHttpStatus: CoveredEndpoint[], e
             const uniqueStatusCodes = [...new Set(allStatusCodes)];
 
             const isContainStatusCode = {
+                "NO_RESPONSE": false,
                 "2XX": false,
                 "3XX": false,
                 "4XX": false,
@@ -92,7 +99,10 @@ export const calculateAllStatusCounts = (coveredHttpStatus: CoveredEndpoint[], e
 
             uniqueStatusCodes.map(
                 (status) => {
-                    if (status >= 200 && status < 300) {
+                    if(status == null) {
+                        isContainStatusCode["NO_RESPONSE"] = true;
+                    }
+                    else if (status >= 200 && status < 300) {
                         isContainStatusCode["2XX"] = true;
                     } else if (status >= 300 && status < 400) {
                         isContainStatusCode["3XX"] = true;
@@ -103,7 +113,9 @@ export const calculateAllStatusCounts = (coveredHttpStatus: CoveredEndpoint[], e
                     }
                 }
             )
-
+            if(isContainStatusCode["NO_RESPONSE"]){
+                allStatusCounts["NO_RESPONSE"]++;
+            }
             if (isContainStatusCode["2XX"]) {
                 allStatusCounts["2XX"]++;
             }
@@ -259,12 +271,15 @@ export const transformWebFuzzingReport = (original: WebFuzzingCommonsReport | nu
 
         const endpointData = endpointMap.get(status.endpointId);
 
-        status.httpStatus.forEach(code => {
+        status.httpStatus?.forEach(code => {
             if (!endpointData) {
                 return;
             }
             let existingStatus = endpointData.httpStatusCodes.find((s: { code: number; }) => s.code === code);
             if (!existingStatus) {
+                if(code === null || code === undefined) {
+                    code = -1;
+                }
                 existingStatus = {code, testCases: []};
                 endpointData.httpStatusCodes.push(existingStatus);
             }
diff --git a/web-report/src/pages/TestResults.tsx b/web-report/src/pages/TestResults.tsx
@@ -28,10 +28,16 @@ export const TestResults: React.FC<IProps> = ({testCaseName}) => {
     const allFaultCodes = relatedFaults.map((fault) =>
         fault.faultCategories.map((f) => f.code)).flat();
     const uniqueFaultCodes = [...new Set(allFaultCodes)].sort((a, b) => a - b);
-
     const allStatusCodes = relatedHttpStatus.map((status) =>
-        status.httpStatus.map((s) => s)).flat();
-    const uniqueStatusCodes = [...new Set(allStatusCodes)].sort((a, b) => a - b);
+        status.httpStatus?.map((s) => s)).flat();
+    const uniqueStatusCodes = [...new Set(allStatusCodes)].sort((a, b) => {
+        const codeA = Number(a);
+        const codeB = Number(b);
+        if (isNaN(codeA) || isNaN(codeB)) {
+            return String(a).localeCompare(String(b));
+        }
+        return codeA - codeB;
+    });
     const currentFile = testFiles.find((file) => file.name === testCase?.filePath);
 
 
diff --git a/web-report/src/types/GeneratedTypes.tsx b/web-report/src/types/GeneratedTypes.tsx
@@ -13,7 +13,7 @@ export type OperationId = string;
  * A unique identifier for a test case. It could include its name and file location.
  */
 export type TestCaseId = string;
-export type HttpStatus = number;
+export type HttpStatus = number | null;
 /**
  * A relative path used to unique locate a test suite file.
  */
diff --git a/web-report/src/types/GeneratedTypesZod.ts b/web-report/src/types/GeneratedTypesZod.ts
@@ -5,7 +5,7 @@ export const operationIdSchema = z.string();
 
 export const testCaseIdSchema = z.string();
 
-export const httpStatusSchema = z.number();
+export const httpStatusSchema = z.number().nullable();
 
 export const testFilePathSchema = z.string();
 

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export function StatusCodeFilterButton({ code, initialState = "inactive", onChan`
`17`	`17`	`if(isFault) {`
`18`	`18`	`return "bg-red-500"`
`19`	`19`	`}`
`20`		`-`
	`20`	`+ if (code == -1) return "bg-gray-500"`
`21`	`21`	`if (code >= 200 && code < 300) return "bg-green-500"`
`22`	`22`	`if (code >= 300 && code < 400) return "bg-blue-500"`
`23`	`23`	`if (code >= 400 && code < 500) return "bg-orange-500"`
`@@ -49,7 +49,7 @@ export function StatusCodeFilterButton({ code, initialState = "inactive", onChan`
`49`	`49`
`50`	`50`	`return (`
`51`	`51`	`<Badge className={getStyles()} onClick={toggleState}>`
`52`		- {isFault ? `F${-1 * code}`: `H${code}`}
	`52`	+ {isFault ? `F${-1 * code}`: code == -1 ? `NO-RESPONSE`:`H${code}`}
`53`	`53`	`</Badge>`
`54`	`54`	`)`
`55`	`55`	`}`