Merge pull request #5 from CrowdStrike/pod-tab

Pod tab

README.md

@@ -4,13 +4,19 @@
 
 # Falcon OpenShift Console Plugin
 
-[![Docker Repository on Quay](https://quay.io/repository/crowdstrike/falcon-openshift-console-plugin/status "Docker Repository on Quay")](https://quay.io/repository/crowdstrike/falcon-openshift-console-plugin)
+[![Docker Repository on Quay](https://quay.io/repository/crowdstrike/falcon-openshift-console-plugin/status 'Docker Repository on Quay')](https://quay.io/repository/crowdstrike/falcon-openshift-console-plugin)
 
 This is a dynamic plugin for the Red Hat OpenShift console. The plugin provides additional visibility
 to the Falcon operator and Falcon-protected virtual machines.
 
+### Extension to the VirtualMachine page
+
 ![Screenshot of the virtual machine page extension.](img/screenshot-vm.png)
 
+### Extension to the Pod page
+
+![Screenshot of the pod page extension.](img/screenshot-pod.png)
+
 ## Support
 
 The Falcon OpenShift Console Plugin is an open source project, not a CrowdStrike product. As such, it carries no formal support, expressed or implied.
@@ -49,7 +55,7 @@ helm upgrade -i  my-plugin charts/openshift-console-plugin -n plugin__console-pl
 
 > [!NOTE]
 > This configuration assumes any user with access to read secrets in the chosen namespace should
-have access to the API client itself, as well as the related data from the Falcon platform.
+> have access to the API client itself, as well as the related data from the Falcon platform.
 
 If you have multiple namespaces with VM workloads, you will need to configure a `crowdstrike-api` secret
 in each.

package.json

@@ -82,6 +82,6 @@
     }
   },
   "dependencies": {
-    "crowdstrike-falcon": "^0.3.1"
+    "crowdstrike-falcon": "^0.4.0"
   }
 }

src/components/pod/ImageAssessment.tsx

@@ -0,0 +1,69 @@
+import {
+  Alert,
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Spinner,
+} from '@patternfly/react-core';
+import * as React from 'react';
+
+export default function ImageAssessment({ client, containerStatus }) {
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [assessment, setAssessment] = React.useState(null);
+
+  const digest = containerStatus.imageID.split(':')[1];
+
+  React.useEffect(() => {
+    if (client == null) return;
+
+    client.containerImages
+      .getCombinedImages(`image_digest:'${digest}'`)
+      .then((resp) => {
+        if (resp['resources'].length > 0) {
+          setAssessment(resp['resources'][0]);
+        }
+      })
+      .catch((e) => {
+        setError(e.message);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [client]);
+
+  return (
+    <>
+      <Card>
+        <CardTitle>{containerStatus.name}</CardTitle>
+        <CardBody>
+          {error && (
+            <Alert variant="warning" title="Something went wrong">
+              {error}
+            </Alert>
+          )}
+          <DescriptionList>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Image name</DescriptionListTerm>
+              <DescriptionListDescription>{containerStatus.image}</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Image ID</DescriptionListTerm>
+              <DescriptionListDescription>{containerStatus.imageID}</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Base OS</DescriptionListTerm>
+              <DescriptionListDescription>
+                {assessment ? assessment.baseOs : loading && <Spinner size="md" />}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardBody>
+      </Card>
+    </>
+  );
+}

src/components/pod/ImageDetectionsCard.tsx

@@ -0,0 +1,95 @@
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
+import * as React from 'react';
+import SeverityLabel from '../shared/SeverityLabel';
+import FindingsList from '../shared/FindingsList';
+import { FalconClient } from 'crowdstrike-falcon';
+
+interface ImageDetectionsCardProps {
+  client: FalconClient;
+  pod: any;
+}
+
+export default function ImageDetectionsCard({ client, pod }: ImageDetectionsCardProps) {
+  const [promise, setPromise] = React.useState(null);
+
+  const sevs = ['unknown', 'informational', 'low', 'medium', 'high', 'critical'];
+  function sorter(a, b) {
+    return sevs.indexOf(b.detectionSeverity) - sevs.indexOf(a.detectionSeverity);
+  }
+
+  const header = [
+    {
+      field: 'title',
+      width: 4,
+    },
+    {
+      field: 'detectionType',
+      width: 1,
+    },
+    {
+      field: 'detectionSeverity',
+      width: 1,
+    },
+  ] as {
+    // ensure width matches the component params, not generic number
+    field: string;
+    width?: 1 | 2 | 3 | 4 | 5;
+  }[];
+
+  const body = [
+    {
+      field: 'description',
+    },
+    {
+      field: 'remediation',
+    },
+    {
+      field: 'details',
+    },
+  ];
+
+  const displayFns = {
+    detectionSeverity: function (s) {
+      return <SeverityLabel name={s} />;
+    },
+    details: function (d) {
+      return d.length > 0 ? (
+        <ul>
+          {d.map((dd) => {
+            return <li key={dd}>{dd}</li>;
+          })}
+        </ul>
+      ) : (
+        'no additional details'
+      );
+    },
+  };
+
+  React.useEffect(() => {
+    if (client == null) return;
+
+    const filter = pod.status.containerStatuses.map((c) => {
+      // format: quay.io/crowdstrike/vulnapp@sha256:1f559a24375b141c129dcee744abb7c7cd6409ea3d598b835c086212673377ba
+      // split at @ first in case the registry has a port e.g. quay.io:9000
+      return `image_digest:'${c.imageID.split('@')[1].split(':')[1]}'`;
+    });
+
+    setPromise(client.containerDetections.readCombinedDetections(filter));
+  }, [client]);
+
+  return (
+    <Card>
+      <CardTitle>Image detections</CardTitle>
+      <CardBody>
+        <FindingsList
+          queryPromise={promise}
+          sortFn={sorter}
+          idField="detectionId"
+          header={header}
+          body={body}
+          displayFns={displayFns}
+        />
+      </CardBody>
+    </Card>
+  );
+}

src/components/pod/ImageVulnsCard.tsx

@@ -0,0 +1,87 @@
+import { Card, CardTitle, CardBody, Label } from '@patternfly/react-core';
+import * as React from 'react';
+import SeverityLabel from '../shared/SeverityLabel';
+import FindingsList from '../shared/FindingsList';
+import { FalconClient } from 'crowdstrike-falcon';
+
+interface ImageVulnsCardProps {
+  client: FalconClient;
+  pod: any;
+}
+
+export default function ImageVulnsCard({ client, pod }: ImageVulnsCardProps) {
+  const [promise, setPromise] = React.useState(null);
+
+  function sorter(a, b) {
+    return b.cvssScore - a.cvssScore;
+  }
+
+  const header = [
+    {
+      field: 'cveId',
+      width: 3,
+    },
+    {
+      field: 'cvssScore',
+      width: 1,
+    },
+    {
+      field: 'exploitedStatusString',
+      width: 1,
+    },
+    {
+      field: 'severity',
+      width: 1,
+    },
+  ] as {
+    field: string;
+    width?: 1 | 2 | 3 | 4 | 5;
+  }[];
+
+  const body = [
+    {
+      field: 'description',
+    },
+  ];
+
+  const displayFns = {
+    severity: function (s) {
+      return <SeverityLabel name={s} />;
+    },
+    exploitedStatusString: function (exploited) {
+      return exploited == 'Available' ? (
+        <Label color="red">Known exploit</Label>
+      ) : (
+        <Label>Unproven</Label>
+      );
+    },
+  };
+
+  React.useEffect(() => {
+    if (client == null) return;
+
+    const filter = pod.status.containerStatuses.map((c) => {
+      // format: quay.io/crowdstrike/vulnapp@sha256:1f559a24375b141c129dcee744abb7c7cd6409ea3d598b835c086212673377ba
+      // split at @ first in case the registry has a port e.g. quay.io:9000
+      return `image_digest:'${c.imageID.split('@')[1].split(':')[1]}'`;
+    });
+
+    setPromise(client.containerVulnerabilities.readCombinedVulnerabilities(filter));
+  }, [client]);
+
+  return (
+    <Card>
+      <CardTitle>Image vulnerabilities</CardTitle>
+      <CardBody>
+        <FindingsList
+          queryPromise={promise}
+          sortFn={sorter}
+          idField="cveId"
+          header={header}
+          body={body}
+          displayFns={displayFns}
+        />
+      </CardBody>
+    </Card>
+  );
+}