Merge pull request #385 from cisagov/398-vulnerabilities-table-xpanse…

…-data-getting-cut-off Vulnerabilities table xpanse data getting cut off
cisagov · Jul 3, 2024 · 373a49c · 373a49c
2 parents f9d11d7 + 6874fd5
commit 373a49c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx b/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx
@@ -23,6 +23,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { getSeverityColor } from 'pages/Risk/utils';
 import { differenceInCalendarDays, parseISO } from 'date-fns';
+import { truncateString } from 'utils/dataTransformUtils';
 
 export interface ApiResponse {
   result: Vulnerability[];
@@ -242,23 +243,28 @@ export const Vulnerabilities: React.FC<{ groupBy?: string }> = ({
       field: 'title',
       headerName: 'Vulnerability',
       minWidth: 100,
-      flex: 1,
+      flex: 1.2,
       renderCell: (cellValues: GridRenderCellParams) => {
+        if (cellValues.row.title.startsWith('CVE')) {
+          return (
+            <Button
+              aria-label={`View NIST entry for ${cellValues.row.title}`}
+              tabIndex={cellValues.tabIndex}
+              color="primary"
+              style={{ textDecorationLine: 'underline' }}
+              endIcon={<OpenInNewIcon />}
+              onClick={() =>
+                window.open(
+                  'https://nvd.nist.gov/vuln/detail/' + cellValues.row.title
+                )
+              }
+            >
+              {cellValues.row.title}
+            </Button>
+          );
+        }
         return (
-          <Button
-            aria-label={`View NIST entry for ${cellValues.row.title}`}
-            tabIndex={cellValues.tabIndex}
-            color="primary"
-            style={{ textDecorationLine: 'underline' }}
-            endIcon={<OpenInNewIcon />}
-            onClick={() =>
-              window.open(
-                'https://nvd.nist.gov/vuln/detail/' + cellValues.row.title
-              )
-            }
-          >
-            {cellValues.row.title}
-          </Button>
+          <Typography pl={1}>{truncateString(cellValues.row.title)}</Typography>
         );
       }
     },
@@ -308,7 +314,7 @@ export const Vulnerabilities: React.FC<{ groupBy?: string }> = ({
       field: 'kev',
       headerName: 'KEV',
       minWidth: 50,
-      flex: 0.5
+      flex: 0.3
     },
     {
       field: 'domain',

diff --git a/frontend/src/utils/dataTransformUtils.ts b/frontend/src/utils/dataTransformUtils.ts
@@ -0,0 +1,16 @@
+export function truncateString(inputString: string) {
+  // Truncate string if " (" and " at" appears
+  const firstParenthesis = inputString.indexOf(' (');
+  const firstAt = inputString.indexOf(' at');
+  let cutOffIndex;
+  if (firstParenthesis === -1 && firstAt === -1) {
+    cutOffIndex = inputString.length;
+  } else if (firstParenthesis === -1) {
+    cutOffIndex = firstAt;
+  } else if (firstAt === -1) {
+    cutOffIndex = firstParenthesis;
+  } else {
+    cutOffIndex = Math.min(firstParenthesis, firstAt);
+  }
+  return inputString.substring(0, cutOffIndex);
+}