Added failed scan chip

Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>

src/__tests__/Explore/Explore.test.js

@@ -127,6 +127,23 @@ const mockImageList = {
             Count: 10
           }
         }
+      },
+      {
+        Name: 'base',
+        Size: '369311301',
+        LastUpdated: '2022-08-23T00:20:40.144281895Z',
+        NewestImage: {
+          Tag: 'latest',
+          Description: '',
+          IsSigned: true,
+          Licenses: '',
+          Vendor: '',
+          Labels: '',
+          Vulnerabilities: {
+            MaxSeverity: '',
+            Count: 10
+          }
+        }
       }
     ]
   }
@@ -167,7 +184,7 @@ describe('Explore component', () => {
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageList } });
     render(<StateExploreWrapper />);
     expect(await screen.findAllByTestId('unverified-icon')).toHaveLength(1);
-    expect(await screen.findAllByTestId('verified-icon')).toHaveLength(5);
+    expect(await screen.findAllByTestId('verified-icon')).toHaveLength(6);
   });
 
   it('renders vulnerability icons', async () => {
@@ -178,7 +195,8 @@ describe('Explore component', () => {
     expect(await screen.findAllByTestId('critical-vulnerability-icon')).toHaveLength(1);
     expect(await screen.findAllByTestId('none-vulnerability-icon')).toHaveLength(1);
     expect(await screen.findAllByTestId('medium-vulnerability-icon')).toHaveLength(1);
-    // expect(await screen.findAllByTestId('unknown-vulnerability-icon')).toHaveLength(1);
+    expect(await screen.findAllByTestId('unknown-vulnerability-icon')).toHaveLength(1);
+    expect(await screen.findAllByTestId('failed-vulnerability-icon')).toHaveLength(1);
   });
 
   it("should log an error when data can't be fetched", async () => {

src/__tests__/RepoPage/Repo.test.js

@@ -72,27 +72,49 @@ const mockRepoDetailsNone = {
   }
 };
 
-// const mockRepoDetailsUnknown = {
+const mockRepoDetailsUnknown = {
-//   ExpandedRepoInfo: {
+  ExpandedRepoInfo: {
-//     Images: [
+    Images: [
-//       {
+      {
-//         Digest: '2aa7ff5ca352d4d25fc6548f9930a436aacd64d56b1bd1f9ff4423711b9c8718',
+        Digest: '2aa7ff5ca352d4d25fc6548f9930a436aacd64d56b1bd1f9ff4423711b9c8718',
-//         Tag: 'latest'
+        Tag: 'latest'
-//       }
+      }
-//     ],
+    ],
-//     Summary: {
+    Summary: {
-//       Name: 'test1',
+      Name: 'test1',
-//       NewestImage: {
+      NewestImage: {
-//         RepoName: 'mongo',
+        RepoName: 'mongo',
-//         IsSigned: true,
+        IsSigned: true,
-//         Vulnerabilities: {
+        Vulnerabilities: {
-//           MaxSeverity: 'UNKNOWN',
+          MaxSeverity: 'UNKNOWN',
-//           Count: 15
+          Count: 15
-//         }
+        }
-//       }
+      }
-//     }
+    }
-//   }
+  }
-// };
+};
+
+const mockRepoDetailsFailed = {
+  ExpandedRepoInfo: {
+    Images: [
+      {
+        Digest: '2aa7ff5ca352d4d25fc6548f9930a436aacd64d56b1bd1f9ff4423711b9c8718',
+        Tag: 'latest'
+      }
+    ],
+    Summary: {
+      Name: 'test1',
+      NewestImage: {
+        RepoName: 'mongo',
+        IsSigned: true,
+        Vulnerabilities: {
+          MaxSeverity: '',
+          Count: 15
+        }
+      }
+    }
+  }
+};
 
 const mockRepoDetailsLow = {
   ExpandedRepoInfo: {
@@ -179,9 +201,12 @@ describe('Repo details component', () => {
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockRepoDetailsNone } });
     render(<RepoDetails />);
     expect(await screen.findAllByTestId('none-vulnerability-icon')).toHaveLength(1);
-    // jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockRepoDetailsUnknown } });
+    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockRepoDetailsUnknown } });
-    // render(<RepoDetails />);
+    render(<RepoDetails />);
-    // expect(await screen.findAllByTestId('unknown-vulnerability-icon')).toHaveLength(1);
+    expect(await screen.findAllByTestId('unknown-vulnerability-icon')).toHaveLength(1);
+    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockRepoDetailsFailed } });
+    render(<RepoDetails />);
+    expect(await screen.findAllByTestId('failed-vulnerability-icon')).toHaveLength(1);
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockRepoDetailsLow } });
     render(<RepoDetails />);
     expect(await screen.findAllByTestId('low-vulnerability-icon')).toHaveLength(1);

src/__tests__/TagPage/TagDetails.test.js

@@ -101,6 +101,26 @@ const mockImageUnknown = {
   }
 };
 
+const mockImageFailed = {
+  Image: {
+    RepoName: 'centos',
+    Tag: '8',
+    Digest: 'sha256:63a795ca90aa6e7cca60941e826810a4cd0a2e73ea02bf458241df2a5c973e29',
+    LastUpdated: '2020-12-08T00:22:52.526672082Z',
+    Size: '75183423',
+    ConfigDigest: 'sha256:8dd57e171a61368ffcfde38045ddb6ed74a32950c271c1da93eaddfb66a77e78',
+    Platform: {
+      Os: 'linux',
+      Arch: 'amd64'
+    },
+    Vulnerabilities: {
+      MaxSeverity: '',
+      Count: 10
+    },
+    Vendor: 'CentOS'
+  }
+};
+
 const mockImageLow = {
   Image: {
     RepoName: 'centos',
@@ -226,6 +246,10 @@ describe('Tags details', () => {
     render(<TagDetails />);
     expect(await screen.findByTestId('unknown-vulnerability-icon')).toBeInTheDocument();
 
+    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageFailed } });
+    render(<TagDetails />);
+    expect(await screen.findByTestId('failed-vulnerability-icon')).toBeInTheDocument();
+
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageLow } });
     render(<TagDetails />);
     expect(await screen.findByTestId('low-vulnerability-icon')).toBeInTheDocument();

src/utilities/vulnerabilityAndSignatureCheck.js

@@ -14,7 +14,10 @@ import {
   VerifiedSignatureIcon,
   UnverifiedSignatureChip,
   VerifiedSignatureChip,
-  UnknownVulnerabilityIcon
+  UnknownVulnerabilityIcon,
+  UnknownVulnerabilityChip,
+  FailedScanIcon,
+  FailedScanChip
 } from './vulnerabilityAndSignatureComponents';
 
 const VulnerabilityIconCheck = ({ vulnerabilitySeverity }) => {
@@ -42,6 +45,9 @@ const VulnerabilityIconCheck = ({ vulnerabilitySeverity }) => {
     case 'UNKNOWN':
       result = <UnknownVulnerabilityIcon vulnerabilityStringTitle={vulnerabilityStringTitle} />;
       break;
+    case '':
+      result = <FailedScanIcon />;
+      break;
     default:
       result = <></>;
   }
@@ -66,6 +72,12 @@ const VulnerabilityChipCheck = ({ vulnerabilitySeverity }) => {
     case 'CRITICAL':
       result = <CriticalVulnerabilityChip />;
       break;
+    case 'UNKNOWN':
+      result = <UnknownVulnerabilityChip />;
+      break;
+    case '':
+      result = <FailedScanChip />;
+      break;
     default:
       result = <></>;
   }

src/utilities/vulnerabilityAndSignatureComponents.jsx

@@ -39,6 +39,23 @@ const UnknownVulnerabilityIcon = ({ vulnerabilityStringTitle }) => {
     </Tooltip>
   );
 };
+const FailedScanIcon = () => {
+  return (
+    <Tooltip title="Failed to scan" placement="top">
+      <PestControlOutlinedIcon
+        sx={{
+          color: '#F6F7F9!important',
+          padding: '0.2rem',
+          background: '#848484',
+          borderRadius: '1rem',
+          height: '1.5rem',
+          width: '1.6rem'
+        }}
+        data-testid="failed-vulnerability-icon"
+      />
+    </Tooltip>
+  );
+};
 const LowVulnerabilityIcon = ({ vulnerabilityStringTitle }) => {
   return (
     <Tooltip title={`${vulnerabilityStringTitle} Vulnerability`} placement="top">
@@ -136,6 +153,20 @@ const UnknownVulnerabilityChip = () => {
     />
   );
 };
+const FailedScanChip = () => {
+  return (
+    <Chip
+      label="Failed to scan"
+      sx={{ backgroundColor: '#848484', color: '#F6F7F9', fontSize: '0.8125rem' }}
+      variant="filled"
+      onDelete={() => {
+        return;
+      }}
+      deleteIcon={<PestControlOutlinedIcon sx={{ color: '#F6F7F9!important' }} />}
+      data-testid="failed-vulnerability-chip"
+    />
+  );
+};
 const LowVulnerabilityChip = () => {
   return (
     <Chip
@@ -271,5 +302,7 @@ export {
   UnverifiedSignatureIcon,
   VerifiedSignatureIcon,
   UnverifiedSignatureChip,
-  VerifiedSignatureChip
+  VerifiedSignatureChip,
+  FailedScanIcon,
+  FailedScanChip
 };