feat: add PolicyReportsPage status and severity filter (#63)

Updates the PolicyReportsPage component to now render 1 big table showing all failed policies. It's now also possible to filter policies by status and severity

---------

Signed-off-by: Jonas Beck <dev@jonasbeck.dk>

Author: Jonas-Beck

.changeset/crazy-dingos-add.md

@@ -0,0 +1,5 @@
+---
+'@kyverno/backstage-plugin-policy-reporter': minor
+---
+
+Add Status and Severity filter to `PolicyReportsPage` component and updates the UI to now be 1 big table that by default show all failing policies

.changeset/true-seals-fall.md

@@ -0,0 +1,5 @@
+---
+'@kyverno/backstage-plugin-policy-reporter': patch
+---
+
+Update the `PolicyReportsPage` component's exported name to match the documentation. It was previously set to `PolicyReporterPage` by mistake and has now been corrected to `PolicyReportsPage`.

packages/app/src/App.tsx

@@ -20,7 +20,7 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
-import { PolicyReporterPage } from '@kyverno/backstage-plugin-policy-reporter';
+import { PolicyReportsPage } from '@kyverno/backstage-plugin-policy-reporter';
 
 const app = createApp({
   apis,
@@ -44,7 +44,7 @@ const routes = (
     >
       {entityPage}
     </Route>
-    <Route path="/kyverno" element={<PolicyReporterPage />} />
+    <Route path="/kyverno" element={<PolicyReportsPage />} />
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
   </FlatRoutes>

plugins/policy-reporter/src/components/PolicyReportsPage/PolicyReportsPage.test.tsx

@@ -54,8 +54,6 @@ describe('EntityKyvernoPolicyReportsContent component', () => {
 
     // Assert
     expect(extension.getByText('Policy Reports')).toBeTruthy();
-    expect(extension.getByText('Failing Policy Results')).toBeTruthy();
-    expect(extension.getByText('Passing Policy Results')).toBeTruthy();
-    expect(extension.getByText('Skipped Policy Results')).toBeTruthy();
+    expect(extension.getByText('Policy Results')).toBeTruthy();
   });
 });

plugins/policy-reporter/src/components/PolicyReportsPage/PolicyReportsPage.tsx

@@ -9,6 +9,13 @@ import { useEnvironments } from '../../hooks/useEnvironments';
 import { SelectEnvironment } from '../SelectEnvironment';
 import { Grid } from '@material-ui/core';
 import { PolicyReportsTable } from '../PolicyReportsTable';
+import { useState } from 'react';
+import {
+  Severity,
+  Status,
+} from '@kyverno/backstage-plugin-policy-reporter-common';
+import { SelectStatus } from '../SelectStatus';
+import { SelectSeverity } from '../SelectSeverity';
 
 export interface PolicyReportsPageProps {
   title?: string;
@@ -28,6 +35,9 @@ export const PolicyReportsPage = ({
     currentEnvironment,
   } = useEnvironments();
 
+  const [status, setStatus] = useState<Status[]>(['fail']);
+  const [severity, setSeverity] = useState<Severity[]>([]);
+
   // Fetching environments
   if (environmentsLoading) return <Progress />;
 
@@ -39,6 +49,11 @@ export const PolicyReportsPage = ({
       <Header title={title} subtitle={subtitle} />
       <Content>
         <ContentHeader>
+          <SelectStatus currentStatus={status} setStatus={setStatus} />
+          <SelectSeverity
+            currentSeverity={severity}
+            setSeverity={setSeverity}
+          />
           <SelectEnvironment
             environments={environments}
             currentEnvironment={currentEnvironment}
@@ -50,33 +65,13 @@ export const PolicyReportsPage = ({
             <PolicyReportsTable
               currentEnvironment={currentEnvironment}
               filter={{
-                status: ['fail', 'warn', 'error'],
-              }}
-              title="Failing Policy Results"
-              emptyContentText="No failing policies"
-              policyDocumentationUrl={policyDocumentationUrl}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <PolicyReportsTable
-              currentEnvironment={currentEnvironment}
-              filter={{
-                status: ['pass'],
-              }}
-              title="Passing Policy Results"
-              emptyContentText="No passing policies"
-              policyDocumentationUrl={policyDocumentationUrl}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <PolicyReportsTable
-              currentEnvironment={currentEnvironment}
-              filter={{
-                status: ['skip'],
+                status: status,
+                severities: severity,
               }}
-              title="Skipped Policy Results"
-              emptyContentText="No skipped policies"
+              title="Policy Results"
+              emptyContentText="No policies found"
               policyDocumentationUrl={policyDocumentationUrl}
+              pagination={{ offset: 25 }}
             />
           </Grid>
         </Grid>

plugins/policy-reporter/src/components/PolicyReportsTable/PolicyReportsTable.tsx

@@ -7,6 +7,7 @@ import { useMemo, useState } from 'react';
 import {
   Filter,
   ListResult,
+  Pagination,
 } from '@kyverno/backstage-plugin-policy-reporter-common';
 import { Drawer, makeStyles } from '@material-ui/core';
 import Chip from '@material-ui/core/Chip';
@@ -24,6 +25,8 @@ interface PolicyReportsTableProps {
   emptyContentText: string;
   policyDocumentationUrl?: string;
   enableSearch?: boolean;
+  pagination?: Partial<Pagination>;
+  pageSizeOptions?: number[];
 }
 
 export const PolicyReportsTable = ({
@@ -33,6 +36,8 @@ export const PolicyReportsTable = ({
   filter,
   policyDocumentationUrl,
   enableSearch,
+  pagination,
+  pageSizeOptions,
 }: PolicyReportsTableProps) => {
   const useStyles = makeStyles(theme => ({
     empty: {
@@ -119,10 +124,11 @@ export const PolicyReportsTable = ({
     policies,
     policiesError,
     currentPage,
+    currentOffset,
     setCurrentPage,
     setCurrentOffset,
     initialLoading,
-  } = usePaginatedPolicies(currentEnvironment, mergedFilter);
+  } = usePaginatedPolicies(currentEnvironment, mergedFilter, pagination);
 
   if (policiesError) return <ResponseErrorPanel error={policiesError} />;
 
@@ -152,6 +158,8 @@ export const PolicyReportsTable = ({
           sorting: true,
           padding: 'dense',
           search: enableSearch,
+          pageSize: currentOffset,
+          pageSizeOptions: pageSizeOptions,
         }}
         onRowClick={(
           event?: React.MouseEvent<Element, MouseEvent>,

plugins/policy-reporter/src/components/SelectSeverity/SelectSeverity.tsx

@@ -0,0 +1,70 @@
+import MenuItem from '@material-ui/core/MenuItem';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import { Severity } from '@kyverno/backstage-plugin-policy-reporter-common';
+import { makeStyles } from '@material-ui/core/styles';
+import { Checkbox, ListItemText } from '@material-ui/core';
+
+// This could be moved into the common package if needed in multiple places
+const SEVERITY_VALUES: Severity[] = [
+  'unknown',
+  'low',
+  'medium',
+  'high',
+  'critical',
+  'info',
+];
+
+const useStyles = makeStyles({
+  formControl: {
+    margin: 8,
+    minWidth: 150,
+  },
+});
+
+export type SelectSeverityProps = {
+  currentSeverity: Severity[];
+  setSeverity: (Status: Severity[]) => void;
+};
+
+export const SelectSeverity = ({
+  currentSeverity: currentSeverity,
+  setSeverity: setSeverity,
+}: SelectSeverityProps) => {
+  const classes = useStyles();
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setSeverity(event.target.value as Severity[]);
+  };
+
+  return (
+    <FormControl className={classes.formControl}>
+      <InputLabel id="select-severity-label" shrink>
+        Severity
+      </InputLabel>
+      <Select
+        labelId="select-severity-label"
+        id="select-severity"
+        multiple
+        displayEmpty
+        value={currentSeverity}
+        renderValue={selected => {
+          if ((selected as Severity[]).length === 0) {
+            return 'All';
+          }
+
+          return (selected as Severity[]).join(', ');
+        }}
+        onChange={handleChange}
+      >
+        {SEVERITY_VALUES.map(severity => (
+          <MenuItem key={severity} value={severity}>
+            <Checkbox checked={currentSeverity.includes(severity)} />
+            <ListItemText primary={severity} />
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};

plugins/policy-reporter/src/components/SelectSeverity/index.ts

@@ -0,0 +1 @@
+export { SelectSeverity, type SelectSeverityProps } from './SelectSeverity';

plugins/policy-reporter/src/components/SelectStatus/SelectStatus.tsx

@@ -0,0 +1,70 @@
+import MenuItem from '@material-ui/core/MenuItem';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import { Status } from '@kyverno/backstage-plugin-policy-reporter-common';
+import { makeStyles } from '@material-ui/core/styles';
+import { Checkbox, ListItemText } from '@material-ui/core';
+
+// This could be moved into the common package if needed in multiple places
+const STATUS_VALUES: Status[] = [
+  'fail',
+  'skip',
+  'pass',
+  'warn',
+  'error',
+  'summary',
+];
+
+const useStyles = makeStyles({
+  formControl: {
+    margin: 8,
+    minWidth: 150,
+  },
+});
+
+export type SelectStatusProps = {
+  currentStatus: Status[];
+  setStatus: (Status: Status[]) => void;
+};
+
+export const SelectStatus = ({
+  currentStatus,
+  setStatus,
+}: SelectStatusProps) => {
+  const classes = useStyles();
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setStatus(event.target.value as Status[]);
+  };
+
+  return (
+    <FormControl className={classes.formControl}>
+      <InputLabel id="select-status-label" shrink>
+        Status
+      </InputLabel>
+      <Select
+        labelId="select-status-label"
+        id="select-status"
+        multiple
+        displayEmpty
+        value={currentStatus}
+        renderValue={selected => {
+          if ((selected as Status[]).length === 0) {
+            return 'All';
+          }
+
+          return (selected as Status[]).join(', ');
+        }}
+        onChange={handleChange}
+      >
+        {STATUS_VALUES.map(status => (
+          <MenuItem key={status} value={status}>
+            <Checkbox checked={currentStatus.includes(status)} />
+            <ListItemText primary={status} />
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};

plugins/policy-reporter/src/components/SelectStatus/index.ts

@@ -0,0 +1 @@
+export { SelectStatus, type SelectStatusProps } from './SelectStatus';