EDM-3715: Vulnerability management

Author: celdrake

apps/ocp-plugin/console-extensions.json

@@ -105,6 +105,14 @@
       "component": { "$codeRef": "CatalogEditFleetWizard" }
     }
   },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": ["/edge/security-overview"],
+      "component": { "$codeRef": "SecurityOverviewPage" }
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {

apps/ocp-plugin/package.json

@@ -29,6 +29,7 @@
       "EnrollmentRequestDetailsPage": "./src/components/EnrollmentRequests/EnrollmentRequestDetailsPage.tsx",
       "appContext": "./src/components/AppContext/AppContext.tsx",
       "OverviewTab": "./src/components/OverviewTab/OverviewTab.tsx",
+      "SecurityOverviewPage": "./src/components/SecurityOverview/SecurityOverviewPage.tsx",
       "CatalogPage": "./src/components/Catalog/CatalogPage.tsx",
       "AddCatalogItemWizard": "./src/components/Catalog/AddCatalogItemWizard.tsx",
       "CatalogInstallWizard": "./src/components/Catalog/CatalogInstallWizard.tsx",

apps/ocp-plugin/src/components/AppContext/AppContext.tsx

@@ -71,6 +71,7 @@ const appRoutes = {
   [ROUTE.CATALOG_INSTALL]: '/edge/catalog/install',
   [ROUTE.CATALOG_FLEET_EDIT]: '/edge/fleets/catalog',
   [ROUTE.CATALOG_DEVICE_EDIT]: '/edge/devices/catalog',
+  [ROUTE.SECURITY_OVERVIEW]: '/edge/security-overview',
 };
 
 export const useValuesAppContext = (): AppContextProps => {

apps/ocp-plugin/src/components/SecurityOverview/SecurityOverviewPage.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import SecurityOverviewPage from '@flightctl/ui-components/src/components/SecurityOverview/SecurityOverviewPage';
+import WithPageLayout from '../common/WithPageLayout';
+
+const OcpSecurityOverviewPage = () => {
+  return (
+    <WithPageLayout>
+      <SecurityOverviewPage />
+    </WithPageLayout>
+  );
+};
+
+export default OcpSecurityOverviewPage;

apps/ocp-plugin/src/utils/apiCalls.ts

@@ -16,7 +16,7 @@ declare global {
   }
 }
 
-type Api = 'flightctl' | 'imagebuilder' | 'alerts' | 'catalog';
+type Api = 'flightctl' | 'imagebuilder' | 'alerts' | 'catalog' | 'vulnerability';
 
 const addRequiredHeaders = (options: RequestInit, api?: Api): RequestInit => {
   const token = getCSRFToken();
@@ -49,6 +49,7 @@ export const apiProxy = `${uiProxy}/api`;
 const alertsAPI = `${apiProxy}/alerts`;
 const imageBuilderPathRegex = /^image(builds|exports)/;
 const catalogPathRegex = /^(catalogs|catalogitems)/;
+const vulnerabilityPathRegex = /^vulnerabilities/;
 
 export const wsEndpoint = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${apiServer}`;
 
@@ -65,13 +66,14 @@ const getFullApiUrl = (path: string): { api: Api; url: string } => {
   if (imageBuilderPathRegex.test(path)) {
     return { api: 'imagebuilder', url: `${apiProxy}/imagebuilder/api/v1/${path}` };
   }
+
+  let apiName: Api = 'flightctl';
   if (catalogPathRegex.test(path)) {
-    return {
-      api: 'catalog',
-      url: `${apiProxy}/flightctl/api/v1/${path}`,
-    };
+    apiName = 'catalog';
+  } else if (vulnerabilityPathRegex.test(path)) {
+    apiName = 'vulnerability';
   }
-  return { api: 'flightctl', url: `${apiProxy}/flightctl/api/v1/${path}` };
+  return { api: apiName, url: `${apiProxy}/flightctl/api/v1/${path}` };
 };
 
 const handleAlertsJSONResponse = async <R>(response: Response): Promise<R> => {
@@ -94,7 +96,28 @@ const handleAlertsJSONResponse = async <R>(response: Response): Promise<R> => {
   throw new Error(await getErrorMsgFromAlertsApiResponse(response));
 };
 
-export const handleApiJSONResponse = async <R>(response: Response): Promise<R> => {
+const handleVulnerabilityJSONResponse = async <R>(response: Response): Promise<R> => {
+  if (response.ok) {
+    const data = (await response.json()) as R;
+    return data;
+  }
+
+  if (response.status === 404) {
+    throw new Error(`Error ${response.status}: ${response.statusText}`);
+  }
+
+  // API returns 501 for disabled vulnerabilities API.
+  if (response.status === 501) {
+    throw new Error(`${response.status}`);
+  }
+
+  throw new Error(await getErrorMsgFromApiResponse(response));
+};
+
+export const handleApiJSONResponse = async <R>(api: Api, response: Response): Promise<R> => {
+  if (api === 'vulnerability') {
+    return handleVulnerabilityJSONResponse(response);
+  }
   if (response.ok) {
     const data = (await response.json()) as R;
     return data;
@@ -125,7 +148,7 @@ const putOrPostData = async <TRequest, TResponse = TRequest>(
   const options = addRequiredHeaders(baseOptions, api);
   try {
     const response = await fetch(url, options);
-    return handleApiJSONResponse(response);
+    return handleApiJSONResponse(api, response);
   } catch (error) {
     console.error(`Error making ${method} request for ${kind}:`, error);
     throw error;
@@ -148,7 +171,7 @@ export const deleteData = async <R>(kind: string, abortSignal?: AbortSignal): Pr
   const options = addRequiredHeaders(baseOptions, api);
   try {
     const response = await fetch(url, options);
-    return handleApiJSONResponse(response);
+    return handleApiJSONResponse(api, response);
   } catch (error) {
     console.error('Error making DELETE request:', error);
     throw error;
@@ -169,7 +192,7 @@ export const patchData = async <R>(kind: string, data: PatchRequest, abortSignal
   const options = addRequiredHeaders(baseOptions, api);
   try {
     const response = await fetch(url, options);
-    return handleApiJSONResponse(response);
+    return handleApiJSONResponse(api, response);
   } catch (error) {
     console.error('Error making PATCH request:', error);
     throw error;
@@ -190,7 +213,7 @@ export const fetchData = async <R>(path: string, abortSignal?: AbortSignal): Pro
     if (api === 'alerts') {
       return handleAlertsJSONResponse(response);
     }
-    return handleApiJSONResponse(response);
+    return handleApiJSONResponse(api, response);
   } catch (error) {
     console.error('Error making GET request:', error);
     throw error;

apps/standalone/src/app/routes.tsx

@@ -61,6 +61,9 @@ const FleetDetails = React.lazy(
 );
 
 const OverviewPage = React.lazy(() => import('@flightctl/ui-components/src/components/OverviewPage/OverviewPage'));
+const SecurityOverviewPage = React.lazy(
+  () => import('@flightctl/ui-components/src/components/SecurityOverview/SecurityOverviewPage'),
+);
 const PendingEnrollmentRequestsBadge = React.lazy(
   () => import('@flightctl/ui-components/src/components/EnrollmentRequest/PendingEnrollmentRequestsBadge'),
 );
@@ -172,6 +175,15 @@ const getAppRoutes = (t: TFunction): ExtendedRouteObject[] => [
       </TitledRoute>
     ),
   },
+  {
+    path: '/security-overview',
+    title: t('Security overview'),
+    element: (
+      <TitledRoute title={t('Security overview')}>
+        <SecurityOverviewPage />
+      </TitledRoute>
+    ),
+  },
   {
     // Route is only exposed for the standalone app
     path: '/command-line-tools',

apps/standalone/src/app/utils/apiCalls.ts

@@ -17,6 +17,7 @@ export const apiProxy = `${uiProxy}/api`;
 
 const imageBuilderPathRegex = /^image(builds|exports)/;
 const catalogPathRegex = /^(catalogs|catalogitems)/;
+const vulnerabilityPathRegex = /^vulnerabilities/;
 
 export const wsEndpoint = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${apiServer}`;
 
@@ -45,20 +46,23 @@ export const fetchUiProxy = async (endpoint: string, requestInit: RequestInit):
   return await fetch(`${apiProxy}/${endpoint}`, options);
 };
 
-const getFullApiUrl = (path: string): { api: 'flightctl' | 'imagebuilder' | 'alerts' | 'catalog'; url: string } => {
+type Api = 'flightctl' | 'imagebuilder' | 'alerts' | 'catalog' | 'vulnerability';
+
+const getFullApiUrl = (path: string): { api: Api; url: string } => {
   if (path.startsWith('alerts')) {
     return { api: 'alerts', url: `${apiProxy}/alerts/api/v2/${path}` };
   }
   if (imageBuilderPathRegex.test(path)) {
     return { api: 'imagebuilder', url: `${apiProxy}/imagebuilder/api/v1/${path}` };
   }
+
+  let apiName: Api = 'flightctl';
   if (catalogPathRegex.test(path)) {
-    return {
-      api: 'catalog',
-      url: `${apiProxy}/flightctl/api/v1/${path}`,
-    };
+    apiName = 'catalog';
+  } else if (vulnerabilityPathRegex.test(path)) {
+    apiName = 'vulnerability';
   }
-  return { api: 'flightctl', url: `${apiProxy}/flightctl/api/v1/${path}` };
+  return { api: apiName, url: `${apiProxy}/flightctl/api/v1/${path}` };
 };
 
 export const logout = async () => {
@@ -78,7 +82,10 @@ export const redirectToLogin = () => {
   window.location.href = '/login';
 };
 
-const handleApiJSONResponse = async <R>(response: Response): Promise<R> => {
+const handleApiJSONResponse = async <R>(api: Api, response: Response): Promise<R> => {
+  if (api === 'vulnerability') {
+    return handleVulnerabilityJSONResponse(response);
+  }
   if (response.ok) {
     const data = (await response.json()) as R;
     return data;
@@ -116,6 +123,24 @@ const handleAlertsJSONResponse = async <R>(response: Response): Promise<R> => {
   throw new Error(await getErrorMsgFromAlertsApiResponse(response));
 };
 
+const handleVulnerabilityJSONResponse = async <R>(response: Response): Promise<R> => {
+  if (response.ok) {
+    const data = (await response.json()) as R;
+    return data;
+  }
+
+  if (response.status === 404) {
+    throw new Error(`Error ${response.status}: ${response.statusText}`);
+  }
+
+  // API returns 501 for disabled vulnerabilities API.
+  if (response.status === 501) {
+    throw new Error(`${response.status}`);
+  }
+
+  throw new Error(await getErrorMsgFromApiResponse(response));
+};
+
 const fetchWithRetry = async <R>(path: string, init?: RequestInit): Promise<R> => {
   const { api, url } = getFullApiUrl(path);
 
@@ -136,7 +161,7 @@ const fetchWithRetry = async <R>(path: string, init?: RequestInit): Promise<R> =
   if (api === 'alerts') {
     return handleAlertsJSONResponse(response);
   }
-  return handleApiJSONResponse(response);
+  return handleApiJSONResponse(api, response);
 };
 
 const putOrPostData = async <TRequest, TResponse = TRequest>(

eslint.config.js

@@ -101,6 +101,11 @@ module.exports = defineConfig([
               importNames: ['WizardFooterWrapper', 'WizardFooter'],
               message: 'Use FlightCtlWizardFooter wrapper',
             },
+            {
+              name: '@patternfly/react-core',
+              importNames: ['Drawer', 'DrawerPanelContent'],
+              message: 'Use FlightCtlPageDrawer wrapper',
+            },
             {
               name: 'react-i18next',
               importNames: ['useTranslation'],

libs/i18n/locales/en/translation.json

@@ -25,6 +25,7 @@
   "404 Page Not Found": "404 Page Not Found",
   "Error page - details should be displayed here": "Error page - details should be displayed here",
   "Overview": "Overview",
+  "Security overview": "Security overview",
   "Command line tools": "Command line tools",
   "Enrollment Request Details": "Enrollment Request Details",
   "Enrollment Request": "Enrollment Request",
@@ -289,7 +290,6 @@
   "You do not have permission to deploy": "You do not have permission to deploy",
   "A channel must be selected": "A channel must be selected",
   "A version must be selected": "A version must be selected",
-  "Resize panel": "Resize panel",
   "Restore": "Restore",
   "This catalog item is managed by a resource sync and cannot be directly restored. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.": "This catalog item is managed by a resource sync and cannot be directly restored. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.",
   "Deprecate": "Deprecate",
@@ -520,6 +520,7 @@
   "Add label": "Add label",
   "Unexpected error occurred": "Unexpected error occurred",
   "Please reload the page and try again.": "Please reload the page and try again.",
+  "Resize panel": "Resize panel",
   "Next": "Next",
   "Back": "Back",
   "Show less": "Show less",
@@ -632,13 +633,12 @@
   "You can add devices and label them to match fleets, or you can <2>start with a fleet</2> and add devices into it.": "You can add devices and label them to match fleets, or you can <2>start with a fleet</2> and add devices into it.",
   "You can add devices and label them to match fleets": "You can add devices and label them to match fleets",
   "No decommissioning or decommissioned devices here!": "No decommissioning or decommissioned devices here!",
-  "Name / Alias": "Name / Alias",
   "Clear all filters": "Clear all filters",
   "Searching...": "Searching...",
   "No results": "No results",
   "Fleet and label filter toggle": "Fleet and label filter toggle",
   "Clear filter text": "Clear filter text",
-  "Name and alias": "Name and alias",
+  "Enter a valid CVE ID in the form CVE-YYYY-sequence, with sequence containing at least 4 digits (for example, CVE-2024-12345).": "Enter a valid CVE ID in the form CVE-YYYY-sequence, with sequence containing at least 4 digits (for example, CVE-2024-12345).",
   "Labels and fleets": "Labels and fleets",
   "Filter by labels and fleets": "Filter by labels and fleets",
   "Decommission devices": "Decommission devices",
@@ -1205,6 +1205,7 @@
   "Failed": "Failed",
   "Canceling": "Canceling",
   "Canceled": "Canceled",
+  "Scanning for vulnerabilities": "Scanning for vulnerabilities",
   "Converting": "Converting",
   "Image built successfully": "Image built successfully",
   "Export images": "Export images",
@@ -1388,6 +1389,8 @@
   "This area displays current notifications about your monitored devices and fleets.": "This area displays current notifications about your monitored devices and fleets.",
   "Alerts will appear here if an issue is detected.": "Alerts will appear here if an issue is detected.",
   "View devices": "View devices",
+  "Security risks across your devices. Resolve critical vulnerabilities immediately to prevent migration failure and protect your infrastructure.": "Security risks across your devices. Resolve critical vulnerabilities immediately to prevent migration failure and protect your infrastructure.",
+  "View all CVEs": "View all CVEs",
   "{{count}} Devices_one": "{{count}} Device",
   "{{count}} Devices_other": "{{count}} Devices",
   "Review pending devices_one": "Review pending device",
@@ -1500,6 +1503,46 @@
   "Resource sync {{rsId}} could not be found": "Resource sync {{rsId}} could not be found",
   "Resource sync {{rsId}}": "Resource sync {{rsId}}",
   "Could not find the details for the resource sync <1>{rsId}</1>": "Could not find the details for the resource sync <1>{rsId}</1>",
+  "Vulnerability reporting is not enabled in this environment.": "Vulnerability reporting is not enabled in this environment.",
+  "Total active vulnerabilities.": "Total active vulnerabilities.",
+  "CVEs affecting images deployed across your managed fleet and devices.": "CVEs affecting images deployed across your managed fleet and devices.",
+  "Vulnerability counts by severity": "Vulnerability counts by severity",
+  "No CVEs detected": "No CVEs detected",
+  "All managed devices have been scanned. No CVEs were found affecting images currently deployed across your fleets and devices.": "All managed devices have been scanned. No CVEs were found affecting images currently deployed across your fleets and devices.",
+  "No vulnerability data to display.": "No vulnerability data to display.",
+  "There are currently no deployed devices. Scan results will be available once devices have been added.": "There are currently no deployed devices. Scan results will be available once devices have been added.",
+  "Severity": "Severity",
+  "Affected devices": "Affected devices",
+  "Affected images": "Affected images",
+  "Published": "Published",
+  "Filter by severity": "Filter by severity",
+  "Find by name": "Find by name",
+  "Vulnerabilities table": "Vulnerabilities table",
+  "Show more": "Show more",
+  "CVE record - {{ cveId }}": "CVE record - {{ cveId }}",
+  "{{ advisoryId }} - Red Hat Security Advisory": "{{ advisoryId }} - Red Hat Security Advisory",
+  "Published: {{ date }}": "Published: {{ date }}",
+  "Scanner name": "Scanner name",
+  "<0>{deviceCount}</0> devices in this fleet are running images affected by this vulnerability. Update or replace the affected images to remediate._one": "<0>{deviceCount}</0> device in this fleet is running images affected by this vulnerability. Update or replace the affected images to remediate.",
+  "<0>{deviceCount}</0> devices in this fleet are running images affected by this vulnerability. Update or replace the affected images to remediate._other": "<0>{deviceCount}</0> devices in this fleet are running images affected by this vulnerability. Update or replace the affected images to remediate.",
+  "<0>{deviceCount}</0> devices in <2>1</2> fleet are running images affected by this vulnerability. Update or replace the affected images to remediate._one": "<0>{deviceCount}</0> device in <2>1</2> fleet is running images affected by this vulnerability. Update or replace the affected images to remediate.",
+  "<0>{deviceCount}</0> devices in <2>1</2> fleet are running images affected by this vulnerability. Update or replace the affected images to remediate._other": "<0>{deviceCount}</0> devices in <2>1</2> fleet are running images affected by this vulnerability. Update or replace the affected images to remediate.",
+  "<0>{deviceCount}</0> devices across <2>{fleetCount}</2> fleets are running images affected by this vulnerability. Update or replace the affected images to remediate._one": "<0>{deviceCount}</0> device is running an image affected by this vulnerability. Update or replace the affected image to remediate.",
+  "<0>{deviceCount}</0> devices across <2>{fleetCount}</2> fleets are running images affected by this vulnerability. Update or replace the affected images to remediate._other": "<0>{deviceCount}</0> devices across <2>{fleetCount}</2> fleets are running images affected by this vulnerability. Update or replace the affected images to remediate.",
+  "This device is running an image affected by this vulnerability. Update or replace the affected image to remediate.": "This device is running an image affected by this vulnerability. Update or replace the affected image to remediate.",
+  "Vulnerability impact table": "Vulnerability impact table",
+  "Total affected fleets": "Total affected fleets",
+  "Total {{ count }} fleets_one": "Total {{ count }} fleet",
+  "Total {{ count }} fleets_other": "Total {{ count }} fleets",
+  "Total affected devices": "Total affected devices",
+  "Total {{ count }} devices_one": "Total {{ count }} device",
+  "Total {{ count }} devices_other": "Total {{ count }} devices",
+  "Total affected images": "Total affected images",
+  "Total {{ count }} images_one": "Total {{ count }} image",
+  "Total {{ count }} images_other": "Total {{ count }} images",
+  "Unable to load vulnerability impact data": "Unable to load vulnerability impact data",
+  "Impact data could not be loaded. Try again later.": "Impact data could not be loaded. Try again later.",
+  "Impact summary": "Impact summary",
   "CPU": "CPU",
   "Memory": "Memory",
   "Disk": "Disk",
@@ -1586,6 +1629,8 @@
   "Online": "Online",
   "Pending sync": "Pending sync",
   "Suspended": "Suspended",
+  "Name and alias": "Name and alias",
+  "CVE ID": "CVE ID",
   "Decommissioned": "Decommissioned",
   "Decommissioning": "Decommissioning",
   "Enrolled": "Enrolled",
@@ -1628,5 +1673,10 @@
   "Reloading": "Reloading",
   "Refreshing": "Refreshing",
   "Maintenance": "Maintenance",
+  "Undefined": "Undefined",
+  "Critical": "Critical",
+  "Important": "Important",
+  "Moderate": "Moderate",
+  "Low": "Low",
   "{{ count }} devices matching the labels were selected._zero": "There are no devices matching these labels."
 }