Image Vulnerabilities Tab for Pod Detail View

frontend/packages/container-security/src/components/image-manifest-vuln.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import * as classNames from 'classnames';
+import { Tooltip } from '@patternfly/react-core';
 import { sortable } from '@patternfly/react-table';
 import { SecurityIcon } from '@patternfly/react-icons';
 import {
@@ -12,7 +13,8 @@ import {
   ListPage,
   RowFunction,
 } from '@console/internal/components/factory';
-import { referenceForModel, PodKind } from '@console/internal/module/k8s';
+import { GreenCheckCircleIcon } from '@console/shared/';
+import { referenceForModel, PodKind, ContainerStatus } from '@console/internal/module/k8s';
 import { match } from 'react-router';
 import {
   ResourceLink,
@@ -21,6 +23,9 @@ import {
   SectionHeading,
   ResourceSummary,
   DetailsItem,
+  Firehose,
+  FirehoseResult,
+  Loading,
 } from '@console/internal/components/utils';
 import { ChartDonut } from '@patternfly/react-charts';
 import { DefaultList } from '@console/internal/components/default-resource';
@@ -29,6 +34,7 @@ import { ImageManifestVuln, Feature, Vulnerability } from '../types';
 import { ImageManifestVulnModel } from '../models';
 import { quayURLFor } from './summary';
 import './image-manifest-vuln.scss';
+import { ContainerLink } from '@console/internal/components/pod';
 
 const shortenImage = (img: string) =>
   img
@@ -305,19 +311,136 @@ export const ImageManifestVulnPage: React.FC<ImageManifestVulnPageProps> = (prop
       ]}
       flatten={(resources) => _.get(resources.imageManifestVuln, 'data', [])}
       title="Image Manifest Vulnerabilities"
+      canCreate={false}
       showTitle
+      hideNameFilter
+      hideLabelFilter
       ListComponent={ImageManifestVulnList}
     />
   );
 };
 
+const podKey = (pod: PodKind) => [pod.metadata.namespace, pod.metadata.name].join('/');
+
+export const ContainerVulnerabilities: React.FC<ContainerVulnerabilitiesProps> = (props) => {
+  const vulnFor = (containerStatus: ContainerStatus) =>
+    _.get(props.imageManifestVuln, 'data', []).find(
+      (imv) =>
+        imv.status.affectedPods[podKey(props.pod)].some(
+          (id) => containerStatus.containerID === id,
+        ) || containerStatus.imageID.includes(imv.spec.manifest),
+    );
+
+  const withVuln = (
+    vuln: ImageManifestVuln,
+    exists: (vuln: ImageManifestVuln) => JSX.Element,
+    absent: () => JSX.Element,
+  ) => (vuln !== undefined ? exists(vuln) : absent());
+
+  return (
+    <div className="co-m-pane__body">
+      <div className="co-m-table-grid co-m-table-grid--bordered">
+        <div className="row co-m-table-grid__head">
+          <div className="col-md-3">Container</div>
+          <div className="col-md-4">Image</div>
+          <div className="col-md-2">
+            <Tooltip content="Results provided by Quay security scanner">
+              <span>Security Scan</span>
+            </Tooltip>
+          </div>
+        </div>
+        <div className="co-m-table-grid__body">
+          {props.pod.status.containerStatuses.map((status) => (
+            <div className="row" key={status.containerID}>
+              <div className="col-md-3">
+                <ContainerLink pod={props.pod} name={status.name} />
+              </div>
+              <div className="col-md-4 co-truncate co-nowrap co-select-to-copy">
+                {props.pod.spec.containers.find((c) => c.name === status.name).image}
+              </div>
+              <div className="col-md-3">
+                {props.loaded ? (
+                  withVuln(
+                    vulnFor(status),
+                    (vuln) => (
+                      <span style={{ display: 'flex', alignItems: 'center' }}>
+                        <SecurityIcon
+                          color={
+                            vulnPriority.find(({ title }) => vuln.status.highestSeverity === title)
+                              .color.value
+                          }
+                        />
+                        &nbsp;
+                        <ResourceLink
+                          kind={referenceForModel(ImageManifestVulnModel)}
+                          name={vuln.metadata.name}
+                          namespace={props.pod.metadata.namespace}
+                          title={vuln.metadata.uid}
+                          displayName={`${totalFor(
+                            vulnPriority.findKey(
+                              ({ title }) => vuln.status.highestSeverity === title,
+                            ),
+                          )(vuln)} ${vuln.status.highestSeverity}`}
+                          hideIcon
+                        />
+                      </span>
+                    ),
+                    () => (
+                      <span>
+                        <GreenCheckCircleIcon />
+                        &nbsp;No vulnerabilities found
+                      </span>
+                    ),
+                  )
+                ) : (
+                  <div>
+                    <Loading />
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ImageManifestVulnPodTab: React.FC<ImageManifestVulnPodTabProps> = (props) => {
+  return (
+    <Firehose
+      resources={[
+        {
+          isList: true,
+          kind: referenceForModel(ImageManifestVulnModel),
+          namespace: props.match.params.ns,
+          selector: {
+            matchLabels: { [podKey(props.obj)]: 'true' },
+          },
+          prop: 'imageManifestVuln',
+        },
+      ]}
+    >
+      {/* FIXME(alecmerdler): Hack because `Firehose` injects props without TypeScript knowing about it */}
+      <ContainerVulnerabilities pod={props.obj} {...(props as any)} />
+    </Firehose>
+  );
+};
+
+export type ContainerVulnerabilitiesProps = {
+  loaded: boolean;
+  pod: PodKind;
+  imageManifestVuln: FirehoseResult<ImageManifestVuln[]>;
+};
+
 export type ImageManifestVulnDetailsPageProps = {
   match: match<{ ns: string; name: string }>;
 };
 
 export type ImageManifestVulnPageProps = {
   namespace?: string;
   match?: match<{ ns?: string }>;
+  selector?: { [key: string]: string };
 };
 
 export type ImageManifestVulnListProps = {
@@ -344,8 +467,15 @@ export type ImageVulnerabilityRowProps = {
   packageName: string;
 };
 
+export type ImageManifestVulnPodTabProps = {
+  match: match<{ ns: string; name: string }>;
+  obj: PodKind;
+};
+
 ImageManifestVulnPage.displayName = 'ImageManifestVulnPage';
 ImageManifestVulnList.displayName = 'ImageManifestVulnList';
 AffectedPods.displayName = 'AffectedPods';
 ImageVulnerabilitiesTable.displayName = 'ImageVulnerabilitiesTable';
 ImageVulnerabilityRow.displayName = 'ImageVulnerabilityRow';
+ImageManifestVulnPodTab.displayName = 'ImageManifestVulnPodTab';
+ContainerVulnerabilities.displayName = 'ContainerVulnerabilities';

frontend/packages/container-security/src/const.ts

@@ -11,7 +11,7 @@ import {
 import { Map as ImmutableMap } from 'immutable';
 import { ImageManifestVuln } from './types';
 
-export const SecurityLabellerFlag = 'SECURITY_LABELLER';
+export const ContainerSecurityFlag = 'SECURITY_LABELLER';
 
 export enum Priority {
   Defcon1 = 'Defcon1',

frontend/packages/container-security/src/plugin.ts

@@ -10,13 +10,15 @@ import {
   RoutePage,
   ResourceDetailsPage,
   ResourceNSNavItem,
+  HorizontalNavTab,
 } from '@console/plugin-sdk';
 import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager';
 import { ImageManifestVulnModel } from './models';
-import { SecurityLabellerFlag } from './const';
+import { ContainerSecurityFlag } from './const';
 import { securityHealthHandler } from './components/summary';
 import { getKebabActionsForKind } from './kebab-actions';
 import { WatchImageVuln } from './types';
+import { PodModel } from '@console/internal/models';
 
 type ConsumedExtensions =
   | ModelDefinition
@@ -27,7 +29,8 @@ type ConsumedExtensions =
   | DashboardsOverviewHealthResourceSubsystem<WatchImageVuln>
   | RoutePage
   | KebabActions
-  | ResourceNSNavItem;
+  | ResourceNSNavItem
+  | HorizontalNavTab;
 
 const plugin: Plugin<ConsumedExtensions> = [
   {
@@ -40,7 +43,7 @@ const plugin: Plugin<ConsumedExtensions> = [
     type: 'FeatureFlag/Model',
     properties: {
       model: ImageManifestVulnModel,
-      flag: SecurityLabellerFlag,
+      flag: ContainerSecurityFlag,
     },
   },
   {
@@ -110,7 +113,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         ),
     },
     flags: {
-      required: [SecurityLabellerFlag],
+      required: [ContainerSecurityFlag],
     },
   },
   {
@@ -132,7 +135,24 @@ const plugin: Plugin<ConsumedExtensions> = [
       },
     },
     flags: {
-      required: [SecurityLabellerFlag],
+      required: [ContainerSecurityFlag],
+    },
+  },
+  {
+    type: 'HorizontalNavTab',
+    properties: {
+      model: PodModel,
+      page: {
+        name: 'Vulnerabilities',
+        href: 'vulnerabilities',
+      },
+      loader: () =>
+        import(
+          './components/image-manifest-vuln' /* webpackChunkName: "container-security" */
+        ).then((m) => m.ImageManifestVulnPodTab),
+    },
+    flags: {
+      required: [ContainerSecurityFlag],
     },
   },
 ];

frontend/public/components/pod.tsx

@@ -225,14 +225,15 @@ const PodTableHeader = () => {
 };
 PodTableHeader.displayName = 'PodTableHeader';
 
-const ContainerLink: React.FC<ContainerLinkProps> = ({ pod, name }) => (
+export const ContainerLink: React.FC<ContainerLinkProps> = ({ pod, name }) => (
   <span className="co-resource-item co-resource-item--inline">
     <ResourceIcon kind="Container" />
     <Link to={`/k8s/ns/${pod.metadata.namespace}/pods/${pod.metadata.name}/containers/${name}`}>
       {name}
     </Link>
   </span>
 );
+ContainerLink.displayName = 'ContainerLink';
 
 export const ContainerRow: React.FC<ContainerRowProps> = ({ pod, container }) => {
   const cstatus = getContainerStatus(pod, container.name);