Grid item and better responsiveness for vuln summary

Author: celdrake

libs/i18n/locales/en/translation.json

@@ -1513,7 +1513,7 @@
   "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.",
+  "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",

libs/ui-components/src/components/SecurityOverview/SecurityOverviewSummary.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Divider, Flex, FlexItem, Icon, Stack, StackItem } from '@patternfly/react-core';
+import { Divider, Flex, FlexItem, Grid, GridItem, Icon, Stack, StackItem } from '@patternfly/react-core';
 import { Vulnerability } from '@flightctl/types/alpha';
 import SeverityUndefinedIcon from '@patternfly/react-icons/dist/js/icons/severity-undefined-icon';
 
@@ -65,6 +65,7 @@ const SecurityOverviewSummary = () => {
 
   const statusItems = getVulnerabilitySeverityStatusItems(t);
   const severityThresholdIndex = VULNERABILITY_SEVERITY_ORDER.indexOf(Vulnerability.severity.LOW);
+  const severityColumnSpan = hasAllSeverities ? 4 : 3;
 
   return (
     <Stack hasGutter>
@@ -83,15 +84,7 @@ const SecurityOverviewSummary = () => {
         <Divider className="pf-v6-u-my-md" />
       </StackItem>
       <StackItem>
-        <div
-          role="group"
-          aria-label={t('Vulnerability counts by severity')}
-          style={{
-            display: 'grid',
-            gridTemplateColumns: `repeat(${hasAllSeverities ? 3 : 4}, minmax(0, 1fr))`,
-            gap: 'var(--pf-t--global--spacer--md)',
-          }}
-        >
+        <Grid hasGutter role="group" aria-label={t('Vulnerability counts by severity')}>
           {VULNERABILITY_SEVERITY_ORDER.map((severity, index) => {
             // If none/unknown severities are present, we show all severities.
             // Otherwise, we only show severities of the main categories (Critical to Low)
@@ -101,15 +94,12 @@ const SecurityOverviewSummary = () => {
 
             const item = statusItems.find((item) => item.id === severity) || defaultVulnerabilitySeverityStatusItem(t);
             return (
-              <SeverityStat
-                key={severity}
-                count={getSeverityCountValue(severity, counts)}
-                severity={severity}
-                item={item}
-              />
+              <GridItem key={severity} xl={severityColumnSpan} span={6}>
+                <SeverityStat severity={severity} item={item} count={getSeverityCountValue(severity, counts)} />
+              </GridItem>
             );
           })}
-        </div>
+        </Grid>
       </StackItem>
     </Stack>
   );

libs/ui-components/src/types/rbac.ts

@@ -13,7 +13,6 @@ export enum RESOURCE {
   CATALOG_ITEM = 'catalogitems',
   FLEET = 'fleets',
   DEVICE = 'devices',
-  // CELIA-WIP: confirm vulnerabilities resource path with backend RBAC before release.
   VULNERABILITY = 'vulnerabilities',
   DEVICE_CONSOLE = 'devices/console',
   DEVICE_DECOMMISSION = 'devices/decommission',