[Customer Portal] Improvements in the Security Center

apps/customer-portal/backend/modules/entity/types.bal

@@ -1407,6 +1407,10 @@ public type ProductVulnerabilitySearchPayload record {|
         int statusId?;
         # Severity ID
         int severityId?;
+        # Product name filter
+        string productName?;
+        # Product version filter
+        string productVersion?;
     } filters?;
     # Sort configuration
     SortBy sortBy?; // TODO: Check the correct sort by fields for vulnerabilities
@@ -1424,12 +1428,20 @@ public type ProductVulnerability record {|
     string vulnerabilityId;
     # Severity level
     ChoiceListItem severity;
+    # Name of the product
+    string productName?;
+    # Version of the product
+    string productVersion?;
     # Name of the component
     string componentName;
     # Version of the component
     string version;
     # Type
     string 'type;
+    # Type of the component
+    string componentType?;
+    # Update level for the vulnerability
+    string updateLevel?;
     # Use case description
     string? useCase;
     # Justification for the vulnerability
@@ -1442,10 +1454,6 @@ public type ProductVulnerability record {|
 # Product vulnerability information.
 public type ProductVulnerabilityResponse record {|
     *ProductVulnerability;
-    # Type of the component
-    string componentType?;
-    # Update level for the vulnerability
-    string updateLevel;
     json...;
 |};
 

apps/customer-portal/backend/modules/types/types.bal

@@ -814,6 +814,10 @@ public type ProductVulnerabilitySearchFilters record {|
     int statusId?;
     # Severity ID
     int severityId?;
+    # Product name filter
+    string productName?;
+    # Product version filter
+    string productVersion?;
 |};
 
 # Base product vulnerability.
@@ -826,12 +830,20 @@ public type ProductVulnerability record {|
     string vulnerabilityId;
     # Severity level
     ReferenceItem severity;
+    # Name of the product
+    string productName?;
+    # Version of the product
+    string productVersion?;
     # Name of the component
     string componentName;
     # Version of the component
     string version;
     # Type
     string 'type;
+    # Type of the component
+    string componentType?;
+    # Update level for the vulnerability
+    string updateLevel?;
     # Use case description
     string? useCase;
     # Justification

apps/customer-portal/backend/openapi.yaml

@@ -4636,9 +4636,21 @@ components:
           description: Vulnerability identifier
         severity:
           $ref: '#/components/schemas/ReferenceItem'
+        productName:
+          type: string
+          description: Name of the product
+        productVersion:
+          type: string
+          description: Version of the product
         componentName:
           type: string
           description: Name of the component
+        componentType:
+          type: string
+          description: Type of the component
+        updateLevel:
+          type: string
+          description: Update level for the vulnerability
         version:
           type: string
           description: Version of the component

apps/customer-portal/backend/utils.bal

@@ -374,9 +374,13 @@ public isolated function mapProductVulnerabilitySearchResponse(entity:ProductVul
         cveId: vulnerability.cveId,
         vulnerabilityId: vulnerability.vulnerabilityId,
         severity: {id: vulnerability.severity.id.toString(), label: vulnerability.severity.label},
+        productName: vulnerability.productName,
+        productVersion: vulnerability.productVersion,
         componentName: vulnerability.componentName,
         version: vulnerability.version,
         'type: vulnerability.'type,
+        componentType: vulnerability.componentType,
+        updateLevel: vulnerability.updateLevel,
         useCase: vulnerability.useCase,
         justification: vulnerability.justification,
         resolution: vulnerability.resolution
@@ -401,6 +405,8 @@ public isolated function mapProductVulnerabilityResponse(entity:ProductVulnerabi
         cveId: response.cveId,
         vulnerabilityId: response.vulnerabilityId,
         severity: {id: response.severity.id.toString(), label: response.severity.label},
+        productName: response.productName,
+        productVersion: response.productVersion,
         componentName: response.componentName,
         version: response.version,
         'type: response.'type,

apps/customer-portal/webapp/src/features/security/components/ProductVulnerabilitiesFilters.tsx

@@ -15,8 +15,9 @@
 // under the License.
 
 import {
+  Box,
+  Button,
   FormControl,
-  Grid,
   InputLabel,
   MenuItem,
   Select,
@@ -25,54 +26,133 @@ import {
 import type { JSX } from "react";
 import type { SelectChangeEvent } from "@wso2/oxygen-ui";
 import {
+  PRODUCT_VULNERABILITIES_ALL_PRODUCTS_LABEL,
+  PRODUCT_VULNERABILITIES_ALL_VERSIONS_LABEL,
+  PRODUCT_VULNERABILITIES_CLEAR_FILTERS_LABEL,
+  PRODUCT_VULNERABILITIES_PRODUCT_LABEL,
+  PRODUCT_VULNERABILITIES_PRODUCT_VERSION_LABEL,
   PRODUCT_VULNERABILITIES_SEVERITY_ALL_LABEL,
   PRODUCT_VULNERABILITIES_SEVERITY_LABEL,
 } from "@features/security/constants/securityConstants";
 import type { ProductVulnerabilitiesFiltersProps } from "@features/security/types/security";
 
 /**
- * ProductVulnerabilitiesFilters component to display filter dropdowns.
+ * ProductVulnerabilitiesFilters component to display filter dropdowns for
+ * severity, product name, and product version.
  *
- * @param {ProductVulnerabilitiesFiltersProps} props - Filter values and change handler.
+ * @param {ProductVulnerabilitiesFiltersProps} props - Filter values and change handlers.
  * @returns {JSX.Element} The rendered filter dropdowns.
  */
 export default function ProductVulnerabilitiesFilters({
   filters,
   severityOptions = [],
+  productOptions = [],
+  productVersionOptions = [],
   onFilterChange,
+  onClearFilters,
 }: ProductVulnerabilitiesFiltersProps): JSX.Element {
-  const handleSelectChange = (event: SelectChangeEvent<string | number>) => {
-    const val = event.target.value;
-    onFilterChange("severityId", val);
+  const handleSeverityChange = (event: SelectChangeEvent<string | number>) => {
+    onFilterChange("severityId", event.target.value);
+  };
+
+  const handleProductChange = (event: SelectChangeEvent<string | number>) => {
+    // Changing product resets version
+    onFilterChange("productVersion", "");
+    onFilterChange("productName", event.target.value);
+  };
+
+  const handleVersionChange = (event: SelectChangeEvent<string | number>) => {
+    onFilterChange("productVersion", event.target.value);
   };
 
   return (
-    <Grid container spacing={2} sx={{ mt: 1 }}>
-      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-        <FormControl fullWidth size="small">
-          <InputLabel id="severity-label">
-            {PRODUCT_VULNERABILITIES_SEVERITY_LABEL}
-          </InputLabel>
-          <Select
-            labelId="severity-label"
-            id="severityId"
-            value={filters.severityId || ""}
-            label={PRODUCT_VULNERABILITIES_SEVERITY_LABEL}
-            onChange={handleSelectChange}
-          >
-            <MenuItem value="">
-              <Typography variant="body2">
-                {PRODUCT_VULNERABILITIES_SEVERITY_ALL_LABEL}
-              </Typography>
+    <Box sx={{ display: "flex", gap: 2, alignItems: "flex-end", flexWrap: "wrap" }}>
+      {/* Severity */}
+      <FormControl size="small" sx={{ flex: 1, minWidth: 160 }}>
+        <InputLabel id="severity-label">
+          {PRODUCT_VULNERABILITIES_SEVERITY_LABEL}
+        </InputLabel>
+        <Select
+          labelId="severity-label"
+          value={filters.severityId || ""}
+          label={PRODUCT_VULNERABILITIES_SEVERITY_LABEL}
+          onChange={handleSeverityChange}
+        >
+          <MenuItem value="">
+            <Typography variant="body2">
+              {PRODUCT_VULNERABILITIES_SEVERITY_ALL_LABEL}
+            </Typography>
+          </MenuItem>
+          {severityOptions.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              <Typography variant="body2">{option.label}</Typography>
             </MenuItem>
-            {severityOptions.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                <Typography variant="body2">{option.label}</Typography>
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </Grid>
-    </Grid>
+          ))}
+        </Select>
+      </FormControl>
+
+      {/* Product */}
+      <FormControl size="small" sx={{ flex: 1, minWidth: 180 }}>
+        <InputLabel id="product-label">
+          {PRODUCT_VULNERABILITIES_PRODUCT_LABEL}
+        </InputLabel>
+        <Select
+          labelId="product-label"
+          value={filters.productName || ""}
+          label={PRODUCT_VULNERABILITIES_PRODUCT_LABEL}
+          onChange={handleProductChange}
+        >
+          <MenuItem value="">
+            <Typography variant="body2">
+              {PRODUCT_VULNERABILITIES_ALL_PRODUCTS_LABEL}
+            </Typography>
+          </MenuItem>
+          {productOptions.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              <Typography variant="body2">{option.label}</Typography>
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+
+      {/* Product Version */}
+      <FormControl
+        size="small"
+        sx={{ flex: 1, minWidth: 200 }}
+        disabled={!filters.productName}
+      >
+        <InputLabel id="product-version-label">
+          {PRODUCT_VULNERABILITIES_PRODUCT_VERSION_LABEL}
+        </InputLabel>
+        <Select
+          labelId="product-version-label"
+          value={filters.productVersion || ""}
+          label={PRODUCT_VULNERABILITIES_PRODUCT_VERSION_LABEL}
+          onChange={handleVersionChange}
+        >
+          <MenuItem value="">
+            <Typography variant="body2">
+              {PRODUCT_VULNERABILITIES_ALL_VERSIONS_LABEL}
+            </Typography>
+          </MenuItem>
+          {productVersionOptions.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              <Typography variant="body2">{option.label}</Typography>
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+
+      {/* Clear Filters */}
+      <Button
+        variant="outlined"
+        color="warning"
+        size="small"
+        onClick={onClearFilters}
+        sx={{ whiteSpace: "nowrap", height: 40 }}
+      >
+        {PRODUCT_VULNERABILITIES_CLEAR_FILTERS_LABEL}
+      </Button>
+    </Box>
   );
 }

apps/customer-portal/webapp/src/features/security/components/ProductVulnerabilitiesList.tsx

@@ -59,12 +59,18 @@ const ProductVulnerabilitiesList = ({
         <Table sx={{ minWidth: 650 }}>
           <TableHead>
             <TableRow>
-              <TableCell>CVE ID</TableCell>
+              <TableCell>CVE</TableCell>
               <TableCell>Vulnerability ID</TableCell>
               <TableCell>Severity</TableCell>
+              <TableCell>Product Name</TableCell>
+              <TableCell>Product Version</TableCell>
               <TableCell>Component Name</TableCell>
-              <TableCell>Version</TableCell>
-              <TableCell>Type</TableCell>
+              <TableCell>Component Version</TableCell>
+              <TableCell>Component Type</TableCell>
+              <TableCell>WSO2 Resolution</TableCell>
+              <TableCell>Usecase</TableCell>
+              <TableCell>Justification</TableCell>
+              <TableCell>Resolution</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -135,6 +141,16 @@ const ProductVulnerabilitiesList = ({
                         }}
                       />
                     </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" color="text.secondary">
+                        {row.productName ?? "--"}
+                      </Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" color="text.secondary">
+                        {row.productVersion ?? "--"}
+                      </Typography>
+                    </TableCell>
                     <TableCell sx={{ maxWidth: 180 }}>
                       <Typography
                         variant="body2"
@@ -150,7 +166,29 @@ const ProductVulnerabilitiesList = ({
                       </Typography>
                     </TableCell>
                     <TableCell>
-                      <Chip label={row.type} variant="outlined" size="small" />
+                      <Typography variant="body2" color="text.secondary">
+                        {row.componentType ?? "--"}
+                      </Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" color="text.secondary">
+                        {row.updateLevel ?? "--"}
+                      </Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" color="text.secondary">
+                        {row.useCase ?? "--"}
+                      </Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" color="text.secondary">
+                        {row.justification ?? "--"}
+                      </Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" color="text.secondary">
+                        {row.resolution ?? "--"}
+                      </Typography>
                     </TableCell>
                   </TableRow>
                 );