@kyverno/backstage-plugin-policy-reporter 2.3.0 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @kyverno/backstage-plugin-policy-reporter
 
+## 2.4.1
+
+### Patch Changes
+
+- 3390a1d: Add missing environment component to the `PolicyReportsPage`, which is now shown when no `kubernetes-cluster` Resources with the `kyverno.io/endpoint` annotation are defined.
+
+## 2.4.0
+
+### Minor Changes
+
+- 0d6cf4b: 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
+
+### Patch Changes
+
+- 0d6cf4b: 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`.
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/components/PolicyReportsDrawerComponent/PolicyReportsDrawerComponent.esm.js

@@ -48,6 +48,22 @@ const useStyles = makeStyles((theme) => ({
     }
   }
 }));
+const GridItem = ({ label, value, ...gridProps }) => {
+  const classes = useStyles();
+  const isString = typeof value === "string";
+  return /* @__PURE__ */ jsx(Grid, { item: true, ...gridProps, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: label }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        className: classes.propertyValue,
+        component: isString ? "p" : "div",
+        children: value
+      }
+    )
+  ] }) });
+};
 const PolicyReportsDrawerComponent = ({
   content
 }) => {
@@ -60,55 +76,41 @@ const PolicyReportsDrawerComponent = ({
     /* @__PURE__ */ jsx(CardHeader, { title: "Policy Details" }),
     /* @__PURE__ */ jsxs(CardContent, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "General Information" }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "ID" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: content.id })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Name" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: content.name })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Namespace" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: content.namespace })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Kind" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: content.kind })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Resource ID" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: content.resourceId })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Timestamp" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: formattedDate })
-        ] }) })
-      ] }),
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: [
+        { label: "ID", value: content.id },
+        { label: "Name", value: content.name },
+        { label: "Namespace", value: content.namespace },
+        { label: "Kind", value: content.kind },
+        { label: "Resource ID", value: content.resourceId },
+        { label: "Timestamp", value: formattedDate }
+      ].map(({ label, value }, index) => /* @__PURE__ */ jsx(GridItem, { label, value, xs: 12, md: 6 }, index)) }),
       /* @__PURE__ */ jsx(Divider, { className: classes.divider }),
       /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Status Information" }),
       /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Status" }),
-          /* @__PURE__ */ jsx(StatusComponent, { status: content.status })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Severity" }),
-          /* @__PURE__ */ jsx(SeverityComponent, { severity: content.severity })
-        ] }) })
+        /* @__PURE__ */ jsx(
+          GridItem,
+          {
+            label: "Status",
+            value: /* @__PURE__ */ jsx(StatusComponent, { status: content.status }),
+            xs: 12,
+            md: 6
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GridItem,
+          {
+            label: "Severity",
+            value: /* @__PURE__ */ jsx(SeverityComponent, { severity: content.severity }),
+            xs: 12,
+            md: 6
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(Divider, { className: classes.divider }),
       /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Policy Information" }),
       /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Policy" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: content.policy })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Box, { className: classes.propertyContainer, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyLabel, children: "Rule" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.propertyValue, children: content.rule })
-        ] }) })
+        /* @__PURE__ */ jsx(GridItem, { label: "Policy", value: content.policy, xs: 12 }),
+        /* @__PURE__ */ jsx(GridItem, { label: "Rule", value: content.rule, xs: 12 })
       ] }),
       /* @__PURE__ */ jsx(Divider, { className: classes.divider }),
       /* @__PURE__ */ jsx(Typography, { variant: "h6", className: classes.sectionTitle, children: "Message" }),

package/dist/components/PolicyReportsDrawerComponent/PolicyReportsDrawerComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PolicyReportsDrawerComponent.esm.js","sources":["../../../src/components/PolicyReportsDrawerComponent/PolicyReportsDrawerComponent.tsx"],"sourcesContent":["import { ListResult } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  Typography,\n  Divider,\n  Grid,\n  Box,\n  Paper,\n  makeStyles,\n} from '@material-ui/core';\nimport { SeverityComponent } from '../SeverityComponent';\nimport { StatusComponent } from '../StatusComponent';\n\ninterface PolicyReportsDrawerProps {\n  content: ListResult | undefined;\n}\n\n// Material-UI styles\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginBottom: theme.spacing(2),\n    maxWidth: 800,\n  },\n  sectionTitle: {\n    marginBottom: theme.spacing(1),\n    fontWeight: 500,\n  },\n  propertyLabel: {\n    color: theme.palette.text.secondary,\n    fontWeight: 500,\n  },\n  propertyValue: {\n    textAlign: 'right',\n  },\n  propertyContainer: {\n    marginBottom: theme.spacing(1),\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  divider: {\n    margin: theme.spacing(2, 0),\n  },\n  message: {\n    padding: theme.spacing(2),\n    backgroundColor: theme.palette.grey[50],\n    borderRadius: theme.shape.borderRadius,\n    color: 'black',\n  },\n  propertiesContainer: {\n    padding: theme.spacing(2),\n    backgroundColor: theme.palette.grey[50],\n    borderRadius: theme.shape.borderRadius,\n  },\n  propertyItem: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    padding: theme.spacing(1, 0),\n    '&:last-child': {\n      borderBottom: 'none',\n    },\n  },\n}));\n\nexport const PolicyReportsDrawerComponent = ({\n  content,\n}: PolicyReportsDrawerProps) => {\n  const classes = useStyles();\n\n  if (!content) {\n    return (\n      <Paper className={classes.root}>\n        <Box p={2}>\n          <Typography variant=\"body1\" color=\"textSecondary\">\n            No policy information available\n          </Typography>\n        </Box>\n      </Paper>\n    );\n  }\n\n  // Format timestamp to readable date\n  const formattedDate = new Date(content.timestamp * 1000).toLocaleString();\n\n  return (\n    <Card className={classes.root} data-testid=\"policy-reports-drawer\">\n      <CardHeader title=\"Policy Details\" />\n      <CardContent>\n        {/* General Information */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          General Information\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                ID\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {content.id}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Name\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {content.name}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Namespace\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {content.namespace}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Kind\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {content.kind}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Resource ID\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {content.resourceId}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Timestamp\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {formattedDate}\n              </Typography>\n            </Box>\n          </Grid>\n        </Grid>\n\n        <Divider className={classes.divider} />\n\n        {/* Status Information */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          Status Information\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Status\n              </Typography>\n              <StatusComponent status={content.status} />\n            </Box>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Severity\n              </Typography>\n              <SeverityComponent severity={content.severity} />\n            </Box>\n          </Grid>\n        </Grid>\n\n        <Divider className={classes.divider} />\n\n        {/* Policy Information */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          Policy Information\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Policy\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {content.policy}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={12}>\n            <Box className={classes.propertyContainer}>\n              <Typography variant=\"body2\" className={classes.propertyLabel}>\n                Rule\n              </Typography>\n              <Typography variant=\"body2\" className={classes.propertyValue}>\n                {content.rule}\n              </Typography>\n            </Box>\n          </Grid>\n        </Grid>\n\n        <Divider className={classes.divider} />\n\n        {/* Message */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          Message\n        </Typography>\n        <Paper elevation={0} className={classes.message}>\n          <Typography variant=\"body2\">{content.message}</Typography>\n        </Paper>\n\n        {/* Additional Properties */}\n        {content.properties && Object.keys(content.properties).length > 0 && (\n          <>\n            <Divider className={classes.divider} />\n            <Typography variant=\"h6\" className={classes.sectionTitle}>\n              Additional Properties\n            </Typography>\n            <Paper elevation={0} className={classes.propertiesContainer}>\n              {Object.entries(content.properties).map(([key, value]) => (\n                <Box key={key} className={classes.propertyItem}>\n                  <Typography variant=\"body2\" className={classes.propertyLabel}>\n                    {key}\n                  </Typography>\n                  <Typography variant=\"body2\">{value}</Typography>\n                </Box>\n              ))}\n            </Paper>\n          </>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PolicyReportsDrawerComponent.esm.js","sources":["../../../src/components/PolicyReportsDrawerComponent/PolicyReportsDrawerComponent.tsx"],"sourcesContent":["import { ListResult } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  Typography,\n  Divider,\n  Grid,\n  Box,\n  Paper,\n  makeStyles,\n  GridProps,\n} from '@material-ui/core';\nimport { SeverityComponent } from '../SeverityComponent';\nimport { StatusComponent } from '../StatusComponent';\n\ninterface PolicyReportsDrawerProps {\n  content: ListResult | undefined;\n}\n\n// Material-UI styles\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginBottom: theme.spacing(2),\n    maxWidth: 800,\n  },\n  sectionTitle: {\n    marginBottom: theme.spacing(1),\n    fontWeight: 500,\n  },\n  propertyLabel: {\n    color: theme.palette.text.secondary,\n    fontWeight: 500,\n  },\n  propertyValue: {\n    textAlign: 'right',\n  },\n  propertyContainer: {\n    marginBottom: theme.spacing(1),\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  divider: {\n    margin: theme.spacing(2, 0),\n  },\n  message: {\n    padding: theme.spacing(2),\n    backgroundColor: theme.palette.grey[50],\n    borderRadius: theme.shape.borderRadius,\n    color: 'black',\n  },\n  propertiesContainer: {\n    padding: theme.spacing(2),\n    backgroundColor: theme.palette.grey[50],\n    borderRadius: theme.shape.borderRadius,\n  },\n  propertyItem: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    padding: theme.spacing(1, 0),\n    '&:last-child': {\n      borderBottom: 'none',\n    },\n  },\n}));\n\ninterface GridItemProps extends GridProps {\n  label: string;\n  value: string | React.ReactNode;\n}\n\nconst GridItem = ({ label, value, ...gridProps }: GridItemProps) => {\n  const classes = useStyles();\n  const isString = typeof value === 'string';\n\n  return (\n    <Grid item {...gridProps}>\n      <Box className={classes.propertyContainer}>\n        <Typography variant=\"body2\" className={classes.propertyLabel}>\n          {label}\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          className={classes.propertyValue}\n          component={isString ? 'p' : 'div'}\n        >\n          {value}\n        </Typography>\n      </Box>\n    </Grid>\n  );\n};\n\nexport const PolicyReportsDrawerComponent = ({\n  content,\n}: PolicyReportsDrawerProps) => {\n  const classes = useStyles();\n\n  if (!content) {\n    return (\n      <Paper className={classes.root}>\n        <Box p={2}>\n          <Typography variant=\"body1\" color=\"textSecondary\">\n            No policy information available\n          </Typography>\n        </Box>\n      </Paper>\n    );\n  }\n\n  // Format timestamp to readable date\n  const formattedDate = new Date(content.timestamp * 1000).toLocaleString();\n\n  return (\n    <Card className={classes.root} data-testid=\"policy-reports-drawer\">\n      <CardHeader title=\"Policy Details\" />\n      <CardContent>\n        {/* General Information */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          General Information\n        </Typography>\n        <Grid container spacing={2}>\n          {[\n            { label: 'ID', value: content.id },\n            { label: 'Name', value: content.name },\n            { label: 'Namespace', value: content.namespace },\n            { label: 'Kind', value: content.kind },\n            { label: 'Resource ID', value: content.resourceId },\n            { label: 'Timestamp', value: formattedDate },\n          ].map(({ label, value }, index) => (\n            <GridItem label={label} key={index} value={value} xs={12} md={6} />\n          ))}\n        </Grid>\n\n        <Divider className={classes.divider} />\n\n        {/* Status Information */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          Status Information\n        </Typography>\n        <Grid container spacing={2}>\n          <GridItem\n            label=\"Status\"\n            value={<StatusComponent status={content.status} />}\n            xs={12}\n            md={6}\n          />\n          <GridItem\n            label=\"Severity\"\n            value={<SeverityComponent severity={content.severity} />}\n            xs={12}\n            md={6}\n          />\n        </Grid>\n\n        <Divider className={classes.divider} />\n\n        {/* Policy Information */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          Policy Information\n        </Typography>\n        <Grid container spacing={2}>\n          <GridItem label=\"Policy\" value={content.policy} xs={12} />\n          <GridItem label=\"Rule\" value={content.rule} xs={12} />\n        </Grid>\n\n        <Divider className={classes.divider} />\n\n        {/* Message */}\n        <Typography variant=\"h6\" className={classes.sectionTitle}>\n          Message\n        </Typography>\n        <Paper elevation={0} className={classes.message}>\n          <Typography variant=\"body2\">{content.message}</Typography>\n        </Paper>\n\n        {/* Additional Properties */}\n        {content.properties && Object.keys(content.properties).length > 0 && (\n          <>\n            <Divider className={classes.divider} />\n            <Typography variant=\"h6\" className={classes.sectionTitle}>\n              Additional Properties\n            </Typography>\n            <Paper elevation={0} className={classes.propertiesContainer}>\n              {Object.entries(content.properties).map(([key, value]) => (\n                <Box key={key} className={classes.propertyItem}>\n                  <Typography variant=\"body2\" className={classes.propertyLabel}>\n                    {key}\n                  </Typography>\n                  <Typography variant=\"body2\">{value}</Typography>\n                </Box>\n              ))}\n            </Paper>\n          </>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,UAAY,EAAA;AAAA,GACd;AAAA,EACA,aAAe,EAAA;AAAA,IACb,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,IAC1B,UAAY,EAAA;AAAA,GACd;AAAA,EACA,aAAe,EAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACb;AAAA,EACA,iBAAmB,EAAA;AAAA,IACjB,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,OAAS,EAAA;AAAA,IACP,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC;AAAA,GAC5B;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,eAAiB,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,EAAE,CAAA;AAAA,IACtC,YAAA,EAAc,MAAM,KAAM,CAAA,YAAA;AAAA,IAC1B,KAAO,EAAA;AAAA,GACT;AAAA,EACA,mBAAqB,EAAA;AAAA,IACnB,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,eAAiB,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,EAAE,CAAA;AAAA,IACtC,YAAA,EAAc,MAAM,KAAM,CAAA;AAAA,GAC5B;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA,eAAA;AAAA,IAChB,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AAAA,IAChD,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,IAC3B,cAAgB,EAAA;AAAA,MACd,YAAc,EAAA;AAAA;AAChB;AAEJ,CAAE,CAAA,CAAA;AAOF,MAAM,WAAW,CAAC,EAAE,OAAO,KAAO,EAAA,GAAG,WAA+B,KAAA;AAClE,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,OAAO,KAAU,KAAA,QAAA;AAElC,EACE,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAE,EAAA,GAAG,WACb,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,iBACtB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,eAC5C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,WAAW,OAAQ,CAAA,aAAA;AAAA,QACnB,SAAA,EAAW,WAAW,GAAM,GAAA,KAAA;AAAA,QAE3B,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CACF,EAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,2BACG,KAAM,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EACxB,8BAAC,GAAI,EAAA,EAAA,CAAA,EAAG,CACN,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,OAAM,eAAgB,EAAA,QAAA,EAAA,iCAAA,EAElD,GACF,CACF,EAAA,CAAA;AAAA;AAKJ,EAAA,MAAM,gBAAgB,IAAI,IAAA,CAAK,QAAQ,SAAY,GAAA,GAAI,EAAE,cAAe,EAAA;AAExE,EAAA,4BACG,IAAK,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAM,eAAY,uBACzC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAM,gBAAiB,EAAA,CAAA;AAAA,yBAClC,WAEC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,IAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,cAAc,QAE1D,EAAA,qBAAA,EAAA,CAAA;AAAA,sBACC,GAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACtB,EAAA,QAAA,EAAA;AAAA,QACC,EAAE,KAAA,EAAO,IAAM,EAAA,KAAA,EAAO,QAAQ,EAAG,EAAA;AAAA,QACjC,EAAE,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,QAAQ,IAAK,EAAA;AAAA,QACrC,EAAE,KAAA,EAAO,WAAa,EAAA,KAAA,EAAO,QAAQ,SAAU,EAAA;AAAA,QAC/C,EAAE,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,QAAQ,IAAK,EAAA;AAAA,QACrC,EAAE,KAAA,EAAO,aAAe,EAAA,KAAA,EAAO,QAAQ,UAAW,EAAA;AAAA,QAClD,EAAE,KAAA,EAAO,WAAa,EAAA,KAAA,EAAO,aAAc;AAAA,QAC3C,GAAI,CAAA,CAAC,EAAE,KAAO,EAAA,KAAA,IAAS,KACvB,qBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAA0B,OAAc,EAAI,EAAA,EAAA,EAAI,IAAI,CAAjC,EAAA,EAAA,KAAoC,CAClE,CACH,EAAA,CAAA;AAAA,sBAEC,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,CAAA;AAAA,0BAGpC,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAW,EAAA,OAAA,CAAQ,cAAc,QAE1D,EAAA,oBAAA,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,QAAA;AAAA,YACN,KAAO,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,MAAA,EAAQ,QAAQ,MAAQ,EAAA,CAAA;AAAA,YAChD,EAAI,EAAA,EAAA;AAAA,YACJ,EAAI,EAAA;AAAA;AAAA,SACN;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,UAAA;AAAA,YACN,KAAO,kBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,QAAA,EAAU,QAAQ,QAAU,EAAA,CAAA;AAAA,YACtD,EAAI,EAAA,EAAA;AAAA,YACJ,EAAI,EAAA;AAAA;AAAA;AACN,OACF,EAAA,CAAA;AAAA,sBAEC,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,CAAA;AAAA,0BAGpC,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAW,EAAA,OAAA,CAAQ,cAAc,QAE1D,EAAA,oBAAA,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAS,KAAM,EAAA,QAAA,EAAS,OAAO,OAAQ,CAAA,MAAA,EAAQ,IAAI,EAAI,EAAA,CAAA;AAAA,wBACxD,GAAA,CAAC,YAAS,KAAM,EAAA,MAAA,EAAO,OAAO,OAAQ,CAAA,IAAA,EAAM,IAAI,EAAI,EAAA;AAAA,OACtD,EAAA,CAAA;AAAA,sBAEC,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,CAAA;AAAA,0BAGpC,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAW,EAAA,OAAA,CAAQ,cAAc,QAE1D,EAAA,SAAA,EAAA,CAAA;AAAA,sBACC,GAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,CAAA,EAAG,SAAW,EAAA,OAAA,CAAQ,OACtC,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAS,EAAA,QAAA,EAAA,OAAA,CAAQ,SAAQ,CAC/C,EAAA,CAAA;AAAA,MAGC,OAAA,CAAQ,cAAc,MAAO,CAAA,IAAA,CAAK,QAAQ,UAAU,CAAA,CAAE,MAAS,GAAA,CAAA,oBAE5D,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,CAAA;AAAA,4BACpC,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAW,EAAA,OAAA,CAAQ,cAAc,QAE1D,EAAA,uBAAA,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,SAAM,SAAW,EAAA,CAAA,EAAG,WAAW,OAAQ,CAAA,mBAAA,EACrC,QAAO,EAAA,MAAA,CAAA,OAAA,CAAQ,OAAQ,CAAA,UAAU,EAAE,GAAI,CAAA,CAAC,CAAC,GAAK,EAAA,KAAK,sBACjD,IAAA,CAAA,GAAA,EAAA,EAAc,SAAW,EAAA,OAAA,CAAQ,YAChC,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,eAC5C,QACH,EAAA,GAAA,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAS,QAAM,EAAA,KAAA,EAAA;AAAA,SAJ3B,EAAA,EAAA,GAKV,CACD,CACH,EAAA;AAAA,OACF,EAAA;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/PolicyReportsPage/PolicyReportsPage.esm.js

@@ -1,9 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Progress, Page, Header, Content, ContentHeader } from '@backstage/core-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Progress, Page, Header, Content, EmptyState, Link, ContentHeader } from '@backstage/core-components';
 import { useEnvironments } from '../../hooks/useEnvironments.esm.js';
 import { SelectEnvironment } from '../SelectEnvironment/SelectEnvironment.esm.js';
-import { Grid } from '@material-ui/core';
+import { Button, Grid } from '@material-ui/core';
 import { PolicyReportsTable } from '../PolicyReportsTable/PolicyReportsTable.esm.js';
+import { useState } from 'react';
+import { SelectStatus } from '../SelectStatus/SelectStatus.esm.js';
+import { SelectSeverity } from '../SelectSeverity/SelectSeverity.esm.js';
 
 const PolicyReportsPage = ({
   title = "Policy Reports",
@@ -16,57 +19,69 @@ const PolicyReportsPage = ({
     setCurrentEnvironment,
     currentEnvironment
   } = useEnvironments();
+  const [status, setStatus] = useState(["fail"]);
+  const [severity, setSeverity] = useState([]);
   if (environmentsLoading) return /* @__PURE__ */ jsx(Progress, {});
-  if (environments === void 0 || !currentEnvironment) return null;
+  if (environments === void 0 || !currentEnvironment)
+    return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+      /* @__PURE__ */ jsx(Header, { title, subtitle }),
+      /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          missing: "content",
+          title: "No kubernetes-cluster Resources found",
+          description: /* @__PURE__ */ jsxs(Fragment, { children: [
+            "You need to define a Resource with the kubernetes-cluster type and a",
+            /* @__PURE__ */ jsx("code", { children: " kyverno.io/endpoint " }),
+            " annotation for this plugin to work."
+          ] }),
+          action: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: "primary",
+              component: Link,
+              to: "https://github.com/kyverno/backstage-policy-reporter-plugin",
+              children: "Read More"
+            }
+          ) })
+        }
+      ) })
+    ] });
   return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
     /* @__PURE__ */ jsx(Header, { title, subtitle }),
     /* @__PURE__ */ jsxs(Content, { children: [
-      /* @__PURE__ */ jsx(ContentHeader, { children: /* @__PURE__ */ jsx(
-        SelectEnvironment,
-        {
-          environments,
-          currentEnvironment,
-          setCurrentEnvironment
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
-          PolicyReportsTable,
-          {
-            currentEnvironment,
-            filter: {
-              status: ["fail", "warn", "error"]
-            },
-            title: "Failing Policy Results",
-            emptyContentText: "No failing policies",
-            policyDocumentationUrl
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
-          PolicyReportsTable,
+      /* @__PURE__ */ jsxs(ContentHeader, { children: [
+        /* @__PURE__ */ jsx(SelectStatus, { currentStatus: status, setStatus }),
+        /* @__PURE__ */ jsx(
+          SelectSeverity,
           {
-            currentEnvironment,
-            filter: {
-              status: ["pass"]
-            },
-            title: "Passing Policy Results",
-            emptyContentText: "No passing policies",
-            policyDocumentationUrl
+            currentSeverity: severity,
+            setSeverity
           }
-        ) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
-          PolicyReportsTable,
+        ),
+        /* @__PURE__ */ jsx(
+          SelectEnvironment,
           {
+            environments,
             currentEnvironment,
-            filter: {
-              status: ["skip"]
-            },
-            title: "Skipped Policy Results",
-            emptyContentText: "No skipped policies",
-            policyDocumentationUrl
+            setCurrentEnvironment
           }
-        ) })
-      ] })
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+        PolicyReportsTable,
+        {
+          currentEnvironment,
+          filter: {
+            status,
+            severities: severity
+          },
+          title: "Policy Results",
+          emptyContentText: "No policies found",
+          policyDocumentationUrl,
+          pagination: { offset: 25 }
+        }
+      ) }) })
     ] })
   ] });
 };

package/dist/components/PolicyReportsPage/PolicyReportsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PolicyReportsPage.esm.js","sources":["../../../src/components/PolicyReportsPage/PolicyReportsPage.tsx"],"sourcesContent":["import {\n  Content,\n  ContentHeader,\n  Header,\n  Page,\n  Progress,\n} from '@backstage/core-components';\nimport { useEnvironments } from '../../hooks/useEnvironments';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport { Grid } from '@material-ui/core';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\n\nexport interface PolicyReportsPageProps {\n  title?: string;\n  policyDocumentationUrl?: string;\n  subtitle?: string;\n}\n\nexport const PolicyReportsPage = ({\n  title = 'Policy Reports',\n  subtitle = 'View all policy reports from a Kubernetes cluster',\n  policyDocumentationUrl,\n}: PolicyReportsPageProps) => {\n  const {\n    environments,\n    environmentsLoading,\n    setCurrentEnvironment,\n    currentEnvironment,\n  } = useEnvironments();\n\n  // Fetching environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (environments === undefined || !currentEnvironment) return null; // TODO: display missing kubernetes environments\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title={title} subtitle={subtitle} />\n      <Content>\n        <ContentHeader>\n          <SelectEnvironment\n            environments={environments}\n            currentEnvironment={currentEnvironment}\n            setCurrentEnvironment={setCurrentEnvironment}\n          />\n        </ContentHeader>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <PolicyReportsTable\n              currentEnvironment={currentEnvironment}\n              filter={{\n                status: ['fail', 'warn', 'error'],\n              }}\n              title=\"Failing Policy Results\"\n              emptyContentText=\"No failing policies\"\n              policyDocumentationUrl={policyDocumentationUrl}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <PolicyReportsTable\n              currentEnvironment={currentEnvironment}\n              filter={{\n                status: ['pass'],\n              }}\n              title=\"Passing Policy Results\"\n              emptyContentText=\"No passing policies\"\n              policyDocumentationUrl={policyDocumentationUrl}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <PolicyReportsTable\n              currentEnvironment={currentEnvironment}\n              filter={{\n                status: ['skip'],\n              }}\n              title=\"Skipped Policy Results\"\n              emptyContentText=\"No skipped policies\"\n              policyDocumentationUrl={policyDocumentationUrl}\n            />\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,KAAQ,GAAA,gBAAA;AAAA,EACR,QAAW,GAAA,mDAAA;AAAA,EACX;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,mBAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAA,MACE,eAAgB,EAAA;AAGpB,EAAI,IAAA,mBAAA,EAA4B,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAG1C,EAAA,IAAI,YAAiB,KAAA,KAAA,CAAA,IAAa,CAAC,kBAAA,EAA2B,OAAA,IAAA;AAE9D,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAc,QAAoB,EAAA,CAAA;AAAA,yBACzC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,YAAA;AAAA,UACA,kBAAA;AAAA,UACA;AAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,kBAAA;AAAA,UAAA;AAAA,YACC,kBAAA;AAAA,YACA,MAAQ,EAAA;AAAA,cACN,MAAQ,EAAA,CAAC,MAAQ,EAAA,MAAA,EAAQ,OAAO;AAAA,aAClC;AAAA,YACA,KAAM,EAAA,wBAAA;AAAA,YACN,gBAAiB,EAAA,qBAAA;AAAA,YACjB;AAAA;AAAA,SAEJ,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,kBAAA;AAAA,UAAA;AAAA,YACC,kBAAA;AAAA,YACA,MAAQ,EAAA;AAAA,cACN,MAAA,EAAQ,CAAC,MAAM;AAAA,aACjB;AAAA,YACA,KAAM,EAAA,wBAAA;AAAA,YACN,gBAAiB,EAAA,qBAAA;AAAA,YACjB;AAAA;AAAA,SAEJ,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,kBAAA;AAAA,UAAA;AAAA,YACC,kBAAA;AAAA,YACA,MAAQ,EAAA;AAAA,cACN,MAAA,EAAQ,CAAC,MAAM;AAAA,aACjB;AAAA,YACA,KAAM,EAAA,wBAAA;AAAA,YACN,gBAAiB,EAAA,qBAAA;AAAA,YACjB;AAAA;AAAA,SAEJ,EAAA;AAAA,OACF,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PolicyReportsPage.esm.js","sources":["../../../src/components/PolicyReportsPage/PolicyReportsPage.tsx"],"sourcesContent":["import {\n  Content,\n  ContentHeader,\n  EmptyState,\n  Header,\n  Link,\n  Page,\n  Progress,\n} from '@backstage/core-components';\nimport { useEnvironments } from '../../hooks/useEnvironments';\nimport { SelectEnvironment } from '../SelectEnvironment';\nimport { Button, Grid } from '@material-ui/core';\nimport { PolicyReportsTable } from '../PolicyReportsTable';\nimport { useState } from 'react';\nimport {\n  Severity,\n  Status,\n} from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { SelectStatus } from '../SelectStatus';\nimport { SelectSeverity } from '../SelectSeverity';\n\nexport interface PolicyReportsPageProps {\n  title?: string;\n  policyDocumentationUrl?: string;\n  subtitle?: string;\n}\n\nexport const PolicyReportsPage = ({\n  title = 'Policy Reports',\n  subtitle = 'View all policy reports from a Kubernetes cluster',\n  policyDocumentationUrl,\n}: PolicyReportsPageProps) => {\n  const {\n    environments,\n    environmentsLoading,\n    setCurrentEnvironment,\n    currentEnvironment,\n  } = useEnvironments();\n\n  const [status, setStatus] = useState<Status[]>(['fail']);\n  const [severity, setSeverity] = useState<Severity[]>([]);\n\n  // Fetching environments\n  if (environmentsLoading) return <Progress />;\n\n  // Environments missing\n  if (environments === undefined || !currentEnvironment)\n    return (\n      <Page themeId=\"tool\">\n        <Header title={title} subtitle={subtitle} />\n        <Content>\n          <EmptyState\n            missing=\"content\"\n            title=\"No kubernetes-cluster Resources found\"\n            description={\n              <>\n                You need to define a Resource with the kubernetes-cluster type\n                and a<code> kyverno.io/endpoint </code> annotation for this\n                plugin to work.\n              </>\n            }\n            action={\n              <>\n                <Button\n                  color=\"primary\"\n                  component={Link}\n                  to=\"https://github.com/kyverno/backstage-policy-reporter-plugin\"\n                >\n                  Read More\n                </Button>\n              </>\n            }\n          />\n        </Content>\n      </Page>\n    );\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title={title} subtitle={subtitle} />\n      <Content>\n        <ContentHeader>\n          <SelectStatus currentStatus={status} setStatus={setStatus} />\n          <SelectSeverity\n            currentSeverity={severity}\n            setSeverity={setSeverity}\n          />\n          <SelectEnvironment\n            environments={environments}\n            currentEnvironment={currentEnvironment}\n            setCurrentEnvironment={setCurrentEnvironment}\n          />\n        </ContentHeader>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <PolicyReportsTable\n              currentEnvironment={currentEnvironment}\n              filter={{\n                status: status,\n                severities: severity,\n              }}\n              title=\"Policy Results\"\n              emptyContentText=\"No policies found\"\n              policyDocumentationUrl={policyDocumentationUrl}\n              pagination={{ offset: 25 }}\n            />\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PolicyReportsTable/PolicyReportsTable.esm.js

@@ -15,7 +15,9 @@ const PolicyReportsTable = ({
   currentEnvironment,
   filter,
   policyDocumentationUrl,
-  enableSearch
+  enableSearch,
+  pagination,
+  pageSizeOptions
 }) => {
   const useStyles = makeStyles((theme) => ({
     empty: {
@@ -98,10 +100,11 @@ const PolicyReportsTable = ({
     policies,
     policiesError,
     currentPage,
+    currentOffset,
     setCurrentPage,
     setCurrentOffset,
     initialLoading
-  } = usePaginatedPolicies(currentEnvironment, mergedFilter);
+  } = usePaginatedPolicies(currentEnvironment, mergedFilter, pagination);
   if (policiesError) return /* @__PURE__ */ jsx(ResponseErrorPanel, { error: policiesError });
   if (initialLoading)
     return /* @__PURE__ */ jsx(
@@ -130,7 +133,9 @@ const PolicyReportsTable = ({
         options: {
           sorting: true,
           padding: "dense",
-          search: enableSearch
+          search: enableSearch,
+          pageSize: currentOffset,
+          pageSizeOptions
         },
         onRowClick: (event, rowData) => {
           event?.preventDefault();

package/dist/components/PolicyReportsTable/PolicyReportsTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PolicyReportsTable.esm.js","sources":["../../../src/components/PolicyReportsTable/PolicyReportsTable.tsx"],"sourcesContent":["import {\n  ResponseErrorPanel,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport { useMemo, useState } from 'react';\nimport {\n  Filter,\n  ListResult,\n} from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { Drawer, makeStyles } from '@material-ui/core';\nimport Chip from '@material-ui/core/Chip';\nimport { StatusComponent } from '../StatusComponent';\nimport { SeverityComponent } from '../SeverityComponent';\nimport Launch from '@material-ui/icons/Launch';\nimport { Environment } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { usePaginatedPolicies } from '../../hooks/usePaginatedPolicies';\nimport { PolicyReportsDrawerComponent } from '../PolicyReportsDrawerComponent/PolicyReportsDrawerComponent';\n\ninterface PolicyReportsTableProps {\n  currentEnvironment: Environment;\n  filter: Filter;\n  title: string;\n  emptyContentText: string;\n  policyDocumentationUrl?: string;\n  enableSearch?: boolean;\n}\n\nexport const PolicyReportsTable = ({\n  title,\n  emptyContentText,\n  currentEnvironment,\n  filter,\n  policyDocumentationUrl,\n  enableSearch,\n}: PolicyReportsTableProps) => {\n  const useStyles = makeStyles(theme => ({\n    empty: {\n      padding: theme.spacing(2),\n      display: 'flex',\n      justifyContent: 'center',\n    },\n  }));\n\n  const [search, setSearch] = useState<string | undefined>(undefined);\n  const mergedFilter = useMemo(\n    () => ({\n      ...filter,\n      search: search ?? filter.search, // override search if search state is defined\n    }),\n    [filter, search],\n  );\n\n  const [showDrawer, setShowDrawer] = useState<boolean>(false);\n  const [drawerContent, setDrawerContent] = useState<ListResult | undefined>(\n    undefined,\n  );\n  const classes = useStyles();\n\n  const columns: TableColumn<ListResult>[] = [\n    {\n      title: 'name',\n      field: 'name',\n    },\n    {\n      title: 'namespace',\n      field: 'namespace',\n    },\n    {\n      title: 'kind',\n      field: 'kind',\n    },\n    {\n      title: 'policy',\n      field: 'policy',\n      render: (listResult: ListResult) => {\n        // When policyDocumentationUrl is provided create link to the Policy section\n        if (policyDocumentationUrl)\n          return (\n            <Chip\n              label={listResult.policy}\n              component=\"a\"\n              target=\"_blank\"\n              href={`${policyDocumentationUrl}#${listResult.policy}`}\n              clickable\n              icon={<Launch fontSize=\"small\" />}\n            />\n          );\n\n        return <Chip label={listResult.policy} />;\n      },\n    },\n    {\n      title: 'rule',\n      field: 'rule',\n      render: (listResult: ListResult) => {\n        return <Chip label={listResult.rule} />;\n      },\n    },\n    {\n      title: 'status',\n      field: 'status',\n      width: '30',\n      render: (listResult: ListResult) => {\n        return <StatusComponent status={listResult.status} />;\n      },\n    },\n    {\n      title: 'severity',\n      field: 'severity',\n      width: '30',\n      render: (listResult: ListResult) => {\n        return <SeverityComponent severity={listResult.severity} />;\n      },\n    },\n  ];\n\n  const {\n    policies,\n    policiesError,\n    currentPage,\n    setCurrentPage,\n    setCurrentOffset,\n    initialLoading,\n  } = usePaginatedPolicies(currentEnvironment, mergedFilter);\n\n  if (policiesError) return <ResponseErrorPanel error={policiesError} />;\n\n  // Return loading table\n  if (initialLoading)\n    return (\n      <Table\n        options={{ paging: false, padding: 'dense' }}\n        data={[]}\n        columns={columns}\n        isLoading\n        title={title}\n      />\n    );\n\n  return (\n    <>\n      <Drawer\n        anchor=\"right\"\n        open={showDrawer}\n        onClose={() => setShowDrawer(false)}\n      >\n        <PolicyReportsDrawerComponent content={drawerContent} />\n      </Drawer>\n      <Table\n        options={{\n          sorting: true,\n          padding: 'dense',\n          search: enableSearch,\n        }}\n        onRowClick={(\n          event?: React.MouseEvent<Element, MouseEvent>,\n          rowData?: ListResult,\n        ) => {\n          event?.preventDefault();\n          setShowDrawer(true);\n          setDrawerContent(rowData);\n        }}\n        data={policies?.items ?? []}\n        columns={columns}\n        title={title}\n        totalCount={policies?.count}\n        page={currentPage}\n        onRowsPerPageChange={page => setCurrentOffset(page)}\n        onPageChange={page => setCurrentPage(page)}\n        emptyContent={<div className={classes.empty}>{emptyContentText}</div>}\n        onSearchChange={searchText => setSearch(searchText)}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PolicyReportsTable.esm.js","sources":["../../../src/components/PolicyReportsTable/PolicyReportsTable.tsx"],"sourcesContent":["import {\n  ResponseErrorPanel,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport { useMemo, useState } from 'react';\nimport {\n  Filter,\n  ListResult,\n  Pagination,\n} from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { Drawer, makeStyles } from '@material-ui/core';\nimport Chip from '@material-ui/core/Chip';\nimport { StatusComponent } from '../StatusComponent';\nimport { SeverityComponent } from '../SeverityComponent';\nimport Launch from '@material-ui/icons/Launch';\nimport { Environment } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { usePaginatedPolicies } from '../../hooks/usePaginatedPolicies';\nimport { PolicyReportsDrawerComponent } from '../PolicyReportsDrawerComponent';\n\ninterface PolicyReportsTableProps {\n  currentEnvironment: Environment;\n  filter: Filter;\n  title: string;\n  emptyContentText: string;\n  policyDocumentationUrl?: string;\n  enableSearch?: boolean;\n  pagination?: Partial<Pagination>;\n  pageSizeOptions?: number[];\n}\n\nexport const PolicyReportsTable = ({\n  title,\n  emptyContentText,\n  currentEnvironment,\n  filter,\n  policyDocumentationUrl,\n  enableSearch,\n  pagination,\n  pageSizeOptions,\n}: PolicyReportsTableProps) => {\n  const useStyles = makeStyles(theme => ({\n    empty: {\n      padding: theme.spacing(2),\n      display: 'flex',\n      justifyContent: 'center',\n    },\n  }));\n\n  const [search, setSearch] = useState<string | undefined>(undefined);\n  const mergedFilter = useMemo(\n    () => ({\n      ...filter,\n      search: search ?? filter.search, // override search if search state is defined\n    }),\n    [filter, search],\n  );\n\n  const [showDrawer, setShowDrawer] = useState<boolean>(false);\n  const [drawerContent, setDrawerContent] = useState<ListResult | undefined>(\n    undefined,\n  );\n  const classes = useStyles();\n\n  const columns: TableColumn<ListResult>[] = [\n    {\n      title: 'name',\n      field: 'name',\n    },\n    {\n      title: 'namespace',\n      field: 'namespace',\n    },\n    {\n      title: 'kind',\n      field: 'kind',\n    },\n    {\n      title: 'policy',\n      field: 'policy',\n      render: (listResult: ListResult) => {\n        // When policyDocumentationUrl is provided create link to the Policy section\n        if (policyDocumentationUrl)\n          return (\n            <Chip\n              label={listResult.policy}\n              component=\"a\"\n              target=\"_blank\"\n              href={`${policyDocumentationUrl}#${listResult.policy}`}\n              clickable\n              icon={<Launch fontSize=\"small\" />}\n            />\n          );\n\n        return <Chip label={listResult.policy} />;\n      },\n    },\n    {\n      title: 'rule',\n      field: 'rule',\n      render: (listResult: ListResult) => {\n        return <Chip label={listResult.rule} />;\n      },\n    },\n    {\n      title: 'status',\n      field: 'status',\n      width: '30',\n      render: (listResult: ListResult) => {\n        return <StatusComponent status={listResult.status} />;\n      },\n    },\n    {\n      title: 'severity',\n      field: 'severity',\n      width: '30',\n      render: (listResult: ListResult) => {\n        return <SeverityComponent severity={listResult.severity} />;\n      },\n    },\n  ];\n\n  const {\n    policies,\n    policiesError,\n    currentPage,\n    currentOffset,\n    setCurrentPage,\n    setCurrentOffset,\n    initialLoading,\n  } = usePaginatedPolicies(currentEnvironment, mergedFilter, pagination);\n\n  if (policiesError) return <ResponseErrorPanel error={policiesError} />;\n\n  // Return loading table\n  if (initialLoading)\n    return (\n      <Table\n        options={{ paging: false, padding: 'dense' }}\n        data={[]}\n        columns={columns}\n        isLoading\n        title={title}\n      />\n    );\n\n  return (\n    <>\n      <Drawer\n        anchor=\"right\"\n        open={showDrawer}\n        onClose={() => setShowDrawer(false)}\n      >\n        <PolicyReportsDrawerComponent content={drawerContent} />\n      </Drawer>\n      <Table\n        options={{\n          sorting: true,\n          padding: 'dense',\n          search: enableSearch,\n          pageSize: currentOffset,\n          pageSizeOptions: pageSizeOptions,\n        }}\n        onRowClick={(\n          event?: React.MouseEvent<Element, MouseEvent>,\n          rowData?: ListResult,\n        ) => {\n          event?.preventDefault();\n          setShowDrawer(true);\n          setDrawerContent(rowData);\n        }}\n        data={policies?.items ?? []}\n        columns={columns}\n        title={title}\n        totalCount={policies?.count}\n        page={currentPage}\n        onRowsPerPageChange={page => setCurrentOffset(page)}\n        onPageChange={page => setCurrentPage(page)}\n        emptyContent={<div className={classes.empty}>{emptyContentText}</div>}\n        onSearchChange={searchText => setSearch(searchText)}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SelectSeverity/SelectSeverity.esm.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { makeStyles } from '@material-ui/core/styles';
+import { Checkbox, ListItemText } from '@material-ui/core';
+
+const SEVERITY_VALUES = [
+  "unknown",
+  "low",
+  "medium",
+  "high",
+  "critical",
+  "info"
+];
+const useStyles = makeStyles({
+  formControl: {
+    margin: 8,
+    minWidth: 150
+  }
+});
+const SelectSeverity = ({
+  currentSeverity,
+  setSeverity
+}) => {
+  const classes = useStyles();
+  const handleChange = (event) => {
+    setSeverity(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { className: classes.formControl, children: [
+    /* @__PURE__ */ jsx(InputLabel, { id: "select-severity-label", shrink: true, children: "Severity" }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        labelId: "select-severity-label",
+        id: "select-severity",
+        multiple: true,
+        displayEmpty: true,
+        value: currentSeverity,
+        renderValue: (selected) => {
+          if (selected.length === 0) {
+            return "All";
+          }
+          return selected.join(", ");
+        },
+        onChange: handleChange,
+        children: SEVERITY_VALUES.map((severity) => /* @__PURE__ */ jsxs(MenuItem, { value: severity, children: [
+          /* @__PURE__ */ jsx(Checkbox, { checked: currentSeverity.includes(severity) }),
+          /* @__PURE__ */ jsx(ListItemText, { primary: severity })
+        ] }, severity))
+      }
+    )
+  ] });
+};
+
+export { SelectSeverity };
+//# sourceMappingURL=SelectSeverity.esm.js.map

package/dist/components/SelectSeverity/SelectSeverity.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectSeverity.esm.js","sources":["../../../src/components/SelectSeverity/SelectSeverity.tsx"],"sourcesContent":["import MenuItem from '@material-ui/core/MenuItem';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport { Severity } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Checkbox, ListItemText } from '@material-ui/core';\n\n// This could be moved into the common package if needed in multiple places\nconst SEVERITY_VALUES: Severity[] = [\n  'unknown',\n  'low',\n  'medium',\n  'high',\n  'critical',\n  'info',\n];\n\nconst useStyles = makeStyles({\n  formControl: {\n    margin: 8,\n    minWidth: 150,\n  },\n});\n\nexport type SelectSeverityProps = {\n  currentSeverity: Severity[];\n  setSeverity: (Status: Severity[]) => void;\n};\n\nexport const SelectSeverity = ({\n  currentSeverity: currentSeverity,\n  setSeverity: setSeverity,\n}: SelectSeverityProps) => {\n  const classes = useStyles();\n\n  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {\n    setSeverity(event.target.value as Severity[]);\n  };\n\n  return (\n    <FormControl className={classes.formControl}>\n      <InputLabel id=\"select-severity-label\" shrink>\n        Severity\n      </InputLabel>\n      <Select\n        labelId=\"select-severity-label\"\n        id=\"select-severity\"\n        multiple\n        displayEmpty\n        value={currentSeverity}\n        renderValue={selected => {\n          if ((selected as Severity[]).length === 0) {\n            return 'All';\n          }\n\n          return (selected as Severity[]).join(', ');\n        }}\n        onChange={handleChange}\n      >\n        {SEVERITY_VALUES.map(severity => (\n          <MenuItem key={severity} value={severity}>\n            <Checkbox checked={currentSeverity.includes(severity)} />\n            <ListItemText primary={severity} />\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,eAA8B,GAAA;AAAA,EAClC,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,MAAQ,EAAA,CAAA;AAAA,IACR,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAOM,MAAM,iBAAiB,CAAC;AAAA,EAC7B,eAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAiD,KAAA;AACrE,IAAY,WAAA,CAAA,KAAA,CAAM,OAAO,KAAmB,CAAA;AAAA,GAC9C;AAEA,EAAA,uBACG,IAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,uBAAwB,EAAA,MAAA,EAAM,MAAC,QAE9C,EAAA,UAAA,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,uBAAA;AAAA,QACR,EAAG,EAAA,iBAAA;AAAA,QACH,QAAQ,EAAA,IAAA;AAAA,QACR,YAAY,EAAA,IAAA;AAAA,QACZ,KAAO,EAAA,eAAA;AAAA,QACP,aAAa,CAAY,QAAA,KAAA;AACvB,UAAK,IAAA,QAAA,CAAwB,WAAW,CAAG,EAAA;AACzC,YAAO,OAAA,KAAA;AAAA;AAGT,UAAQ,OAAA,QAAA,CAAwB,KAAK,IAAI,CAAA;AAAA,SAC3C;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QAET,0BAAgB,GAAI,CAAA,CAAA,QAAA,qBAClB,IAAA,CAAA,QAAA,EAAA,EAAwB,OAAO,QAC9B,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,eAAgB,CAAA,QAAA,CAAS,QAAQ,CAAG,EAAA,CAAA;AAAA,0BACvD,GAAA,CAAC,YAAa,EAAA,EAAA,OAAA,EAAS,QAAU,EAAA;AAAA,SAAA,EAAA,EAFpB,QAGf,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/SelectStatus/SelectStatus.esm.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { makeStyles } from '@material-ui/core/styles';
+import { Checkbox, ListItemText } from '@material-ui/core';
+
+const STATUS_VALUES = [
+  "fail",
+  "skip",
+  "pass",
+  "warn",
+  "error",
+  "summary"
+];
+const useStyles = makeStyles({
+  formControl: {
+    margin: 8,
+    minWidth: 150
+  }
+});
+const SelectStatus = ({
+  currentStatus,
+  setStatus
+}) => {
+  const classes = useStyles();
+  const handleChange = (event) => {
+    setStatus(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { className: classes.formControl, children: [
+    /* @__PURE__ */ jsx(InputLabel, { id: "select-status-label", shrink: true, children: "Status" }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        labelId: "select-status-label",
+        id: "select-status",
+        multiple: true,
+        displayEmpty: true,
+        value: currentStatus,
+        renderValue: (selected) => {
+          if (selected.length === 0) {
+            return "All";
+          }
+          return selected.join(", ");
+        },
+        onChange: handleChange,
+        children: STATUS_VALUES.map((status) => /* @__PURE__ */ jsxs(MenuItem, { value: status, children: [
+          /* @__PURE__ */ jsx(Checkbox, { checked: currentStatus.includes(status) }),
+          /* @__PURE__ */ jsx(ListItemText, { primary: status })
+        ] }, status))
+      }
+    )
+  ] });
+};
+
+export { SelectStatus };
+//# sourceMappingURL=SelectStatus.esm.js.map

package/dist/components/SelectStatus/SelectStatus.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectStatus.esm.js","sources":["../../../src/components/SelectStatus/SelectStatus.tsx"],"sourcesContent":["import MenuItem from '@material-ui/core/MenuItem';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport { Status } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Checkbox, ListItemText } from '@material-ui/core';\n\n// This could be moved into the common package if needed in multiple places\nconst STATUS_VALUES: Status[] = [\n  'fail',\n  'skip',\n  'pass',\n  'warn',\n  'error',\n  'summary',\n];\n\nconst useStyles = makeStyles({\n  formControl: {\n    margin: 8,\n    minWidth: 150,\n  },\n});\n\nexport type SelectStatusProps = {\n  currentStatus: Status[];\n  setStatus: (Status: Status[]) => void;\n};\n\nexport const SelectStatus = ({\n  currentStatus,\n  setStatus,\n}: SelectStatusProps) => {\n  const classes = useStyles();\n\n  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {\n    setStatus(event.target.value as Status[]);\n  };\n\n  return (\n    <FormControl className={classes.formControl}>\n      <InputLabel id=\"select-status-label\" shrink>\n        Status\n      </InputLabel>\n      <Select\n        labelId=\"select-status-label\"\n        id=\"select-status\"\n        multiple\n        displayEmpty\n        value={currentStatus}\n        renderValue={selected => {\n          if ((selected as Status[]).length === 0) {\n            return 'All';\n          }\n\n          return (selected as Status[]).join(', ');\n        }}\n        onChange={handleChange}\n      >\n        {STATUS_VALUES.map(status => (\n          <MenuItem key={status} value={status}>\n            <Checkbox checked={currentStatus.includes(status)} />\n            <ListItemText primary={status} />\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,aAA0B,GAAA;AAAA,EAC9B,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,MAAQ,EAAA,CAAA;AAAA,IACR,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAOM,MAAM,eAAe,CAAC;AAAA,EAC3B,aAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAiD,KAAA;AACrE,IAAU,SAAA,CAAA,KAAA,CAAM,OAAO,KAAiB,CAAA;AAAA,GAC1C;AAEA,EAAA,uBACG,IAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,qBAAsB,EAAA,MAAA,EAAM,MAAC,QAE5C,EAAA,QAAA,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,qBAAA;AAAA,QACR,EAAG,EAAA,eAAA;AAAA,QACH,QAAQ,EAAA,IAAA;AAAA,QACR,YAAY,EAAA,IAAA;AAAA,QACZ,KAAO,EAAA,aAAA;AAAA,QACP,aAAa,CAAY,QAAA,KAAA;AACvB,UAAK,IAAA,QAAA,CAAsB,WAAW,CAAG,EAAA;AACvC,YAAO,OAAA,KAAA;AAAA;AAGT,UAAQ,OAAA,QAAA,CAAsB,KAAK,IAAI,CAAA;AAAA,SACzC;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QAET,wBAAc,GAAI,CAAA,CAAA,MAAA,qBAChB,IAAA,CAAA,QAAA,EAAA,EAAsB,OAAO,MAC5B,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,aAAc,CAAA,QAAA,CAAS,MAAM,CAAG,EAAA,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAa,EAAA,EAAA,OAAA,EAAS,MAAQ,EAAA;AAAA,SAAA,EAAA,EAFlB,MAGf,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/hooks/usePaginatedPolicies.esm.js

@@ -5,10 +5,14 @@ import { useState, useEffect } from 'react';
 
 const DEFAULT_OFFSET = 5;
 const DEFAULT_PAGE = 0;
-const usePaginatedPolicies = (currentEnvironment, filter) => {
+const usePaginatedPolicies = (currentEnvironment, filter, pagination) => {
   const policyReporterApi = useApi(policyReporterApiRef);
-  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
-  const [currentOffset, setCurrentOffset] = useState(DEFAULT_OFFSET);
+  const [currentPage, setCurrentPage] = useState(
+    pagination?.page ?? DEFAULT_PAGE
+  );
+  const [currentOffset, setCurrentOffset] = useState(
+    pagination?.offset ?? DEFAULT_OFFSET
+  );
   const [initialLoading, setInitialLoading] = useState(true);
   useEffect(() => {
     setInitialLoading(true);

package/dist/hooks/usePaginatedPolicies.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginatedPolicies.esm.js","sources":["../../src/hooks/usePaginatedPolicies.ts"],"sourcesContent":["import { useAsync } from 'react-use';\nimport { Environment } from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { policyReporterApiRef } from '../api';\nimport {\n  Filter,\n  ResultList,\n} from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { useEffect, useState } from 'react';\n\nconst DEFAULT_OFFSET = 5;\nconst DEFAULT_PAGE = 0;\n\nexport const usePaginatedPolicies = (\n  currentEnvironment: Environment,\n  filter: Filter,\n) => {\n  const policyReporterApi = useApi(policyReporterApiRef);\n  const [currentPage, setCurrentPage] = useState<number>(DEFAULT_PAGE);\n  const [currentOffset, setCurrentOffset] = useState<number>(DEFAULT_OFFSET);\n  const [initialLoading, setInitialLoading] = useState<boolean>(true);\n\n  useEffect(() => {\n    setInitialLoading(true);\n  }, [currentEnvironment]);\n\n  const {\n    value: policies,\n    loading: policiesLoading,\n    error: policiesError,\n  } = useAsync(async (): Promise<ResultList> => {\n    const data = await policyReporterApi.namespacedResults(\n      currentEnvironment.entityRef,\n      filter,\n      {\n        // Material UI expects the first page to be 0. But the Policy Reporter API expects the first page to be 1\n        // This increments the currentPage with 1 to match the expected page by the Policy Reporter API\n        page: currentPage + 1,\n        offset: currentOffset,\n      },\n    );\n    setInitialLoading(false);\n    return data;\n  }, [currentEnvironment, filter, currentPage, currentOffset]);\n\n  return {\n    policies,\n    policiesLoading,\n    policiesError,\n    currentPage,\n    setCurrentPage,\n    currentOffset,\n    setCurrentOffset,\n    initialLoading,\n  };\n};\n"],"names":[],"mappings":";;;;;AAUA,MAAM,cAAiB,GAAA,CAAA;AACvB,MAAM,YAAe,GAAA,CAAA;AAER,MAAA,oBAAA,GAAuB,CAClC,kBAAA,EACA,MACG,KAAA;AACH,EAAM,MAAA,iBAAA,GAAoB,OAAO,oBAAoB,CAAA;AACrD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAiB,YAAY,CAAA;AACnE,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAiB,cAAc,CAAA;AACzE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAkB,IAAI,CAAA;AAElE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,GACxB,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAS,EAAA,eAAA;AAAA,IACT,KAAO,EAAA;AAAA,GACT,GAAI,SAAS,YAAiC;AAC5C,IAAM,MAAA,IAAA,GAAO,MAAM,iBAAkB,CAAA,iBAAA;AAAA,MACnC,kBAAmB,CAAA,SAAA;AAAA,MACnB,MAAA;AAAA,MACA;AAAA;AAAA;AAAA,QAGE,MAAM,WAAc,GAAA,CAAA;AAAA,QACpB,MAAQ,EAAA;AAAA;AACV,KACF;AACA,IAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,IAAO,OAAA,IAAA;AAAA,KACN,CAAC,kBAAA,EAAoB,MAAQ,EAAA,WAAA,EAAa,aAAa,CAAC,CAAA;AAE3D,EAAO,OAAA;AAAA,IACL,QAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"usePaginatedPolicies.esm.js","sources":["../../src/hooks/usePaginatedPolicies.ts"],"sourcesContent":["import { useAsync } from 'react-use';\nimport {\n  Environment,\n  Pagination,\n} from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { policyReporterApiRef } from '../api';\nimport {\n  Filter,\n  ResultList,\n} from '@kyverno/backstage-plugin-policy-reporter-common';\nimport { useEffect, useState } from 'react';\n\nconst DEFAULT_OFFSET = 5;\nconst DEFAULT_PAGE = 0;\n\nexport const usePaginatedPolicies = (\n  currentEnvironment: Environment,\n  filter: Filter,\n  pagination?: Partial<Pagination>,\n) => {\n  const policyReporterApi = useApi(policyReporterApiRef);\n  const [currentPage, setCurrentPage] = useState<number>(\n    pagination?.page ?? DEFAULT_PAGE,\n  );\n  const [currentOffset, setCurrentOffset] = useState<number>(\n    pagination?.offset ?? DEFAULT_OFFSET,\n  );\n  const [initialLoading, setInitialLoading] = useState<boolean>(true);\n\n  useEffect(() => {\n    setInitialLoading(true);\n  }, [currentEnvironment]);\n\n  const {\n    value: policies,\n    loading: policiesLoading,\n    error: policiesError,\n  } = useAsync(async (): Promise<ResultList> => {\n    const data = await policyReporterApi.namespacedResults(\n      currentEnvironment.entityRef,\n      filter,\n      {\n        // Material UI expects the first page to be 0. But the Policy Reporter API expects the first page to be 1\n        // This increments the currentPage with 1 to match the expected page by the Policy Reporter API\n        page: currentPage + 1,\n        offset: currentOffset,\n      },\n    );\n    setInitialLoading(false);\n    return data;\n  }, [currentEnvironment, filter, currentPage, currentOffset]);\n\n  return {\n    policies,\n    policiesLoading,\n    policiesError,\n    currentPage,\n    setCurrentPage,\n    currentOffset,\n    setCurrentOffset,\n    initialLoading,\n  };\n};\n"],"names":[],"mappings":";;;;;AAaA,MAAM,cAAiB,GAAA,CAAA;AACvB,MAAM,YAAe,GAAA,CAAA;AAEd,MAAM,oBAAuB,GAAA,CAClC,kBACA,EAAA,MAAA,EACA,UACG,KAAA;AACH,EAAM,MAAA,iBAAA,GAAoB,OAAO,oBAAoB,CAAA;AACrD,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,IACpC,YAAY,IAAQ,IAAA;AAAA,GACtB;AACA,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,YAAY,MAAU,IAAA;AAAA,GACxB;AACA,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAkB,IAAI,CAAA;AAElE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,GACxB,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAS,EAAA,eAAA;AAAA,IACT,KAAO,EAAA;AAAA,GACT,GAAI,SAAS,YAAiC;AAC5C,IAAM,MAAA,IAAA,GAAO,MAAM,iBAAkB,CAAA,iBAAA;AAAA,MACnC,kBAAmB,CAAA,SAAA;AAAA,MACnB,MAAA;AAAA,MACA;AAAA;AAAA;AAAA,QAGE,MAAM,WAAc,GAAA,CAAA;AAAA,QACpB,MAAQ,EAAA;AAAA;AACV,KACF;AACA,IAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,IAAO,OAAA,IAAA;AAAA,KACN,CAAC,kBAAA,EAAoB,MAAQ,EAAA,WAAA,EAAa,aAAa,CAAC,CAAA;AAE3D,EAAO,OAAA;AAAA,IACL,QAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/index.d.ts

@@ -18,6 +18,6 @@ declare const EntityCustomPoliciesContent: ({ annotationsDocumentationUrl, polic
     sources: string[];
     title: string;
 }) => react_jsx_runtime.JSX.Element;
-declare const PolicyReporterPage: ({ title, subtitle, policyDocumentationUrl, }: PolicyReportsPageProps) => react_jsx_runtime.JSX.Element | null;
+declare const PolicyReportsPage: ({ title, subtitle, policyDocumentationUrl, }: PolicyReportsPageProps) => react_jsx_runtime.JSX.Element;
 
-export { EntityCustomPoliciesContent, EntityKyvernoPoliciesContent, PolicyReporterPage, policyReporterPlugin };
+export { EntityCustomPoliciesContent, EntityKyvernoPoliciesContent, PolicyReportsPage, policyReporterPlugin };

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-export { EntityCustomPoliciesContent, EntityKyvernoPoliciesContent, PolicyReporterPage, policyReporterPlugin } from './plugin.esm.js';
+export { EntityCustomPoliciesContent, EntityKyvernoPoliciesContent, PolicyReportsPage, policyReporterPlugin } from './plugin.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/plugin.esm.js

@@ -31,13 +31,13 @@ const EntityCustomPoliciesContent = policyReporterPlugin.provide(
     mountPoint: rootRouteRef
   })
 );
-const PolicyReporterPage = policyReporterPlugin.provide(
+const PolicyReportsPage = policyReporterPlugin.provide(
   createRoutableExtension({
-    name: "PolicyReporterPage",
+    name: "PolicyReportsPage",
     component: () => import('./components/PolicyReportsPage/index.esm.js').then((m) => m.PolicyReportsPage),
     mountPoint: rootRouteRef
   })
 );
 
-export { EntityCustomPoliciesContent, EntityKyvernoPoliciesContent, PolicyReporterPage, policyReporterPlugin };
+export { EntityCustomPoliciesContent, EntityKyvernoPoliciesContent, PolicyReportsPage, policyReporterPlugin };
 //# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["import {\n  createApiFactory,\n  createPlugin,\n  createRoutableExtension,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport { policyReporterApiRef } from './api/PolicyReporterApi';\nimport { PolicyReporterApiClient } from './api/PolicyReporterClient';\n\nimport { rootRouteRef } from './routes';\n\nexport const policyReporterPlugin = createPlugin({\n  id: 'policy-reporter',\n  apis: [\n    createApiFactory({\n      api: policyReporterApiRef,\n      deps: { fetchApi: fetchApiRef, discoveryApi: discoveryApiRef },\n      factory: ({ discoveryApi, fetchApi }) =>\n        new PolicyReporterApiClient({ discoveryApi, fetchApi }),\n    }),\n  ],\n});\n\nexport const EntityKyvernoPoliciesContent = policyReporterPlugin.provide(\n  createRoutableExtension({\n    name: 'EntityKyvernoPoliciesContent',\n    component: () =>\n      import('./components/EntityKyvernoPoliciesContent').then(\n        m => m.EntityKyvernoPoliciesContent,\n      ),\n    mountPoint: rootRouteRef,\n  }),\n);\n\nexport const EntityCustomPoliciesContent = policyReporterPlugin.provide(\n  createRoutableExtension({\n    name: 'EntityCustomPoliciesContent',\n    component: () =>\n      import('./components/EntityCustomPoliciesContent').then(\n        m => m.EntityCustomPoliciesContent,\n      ),\n    mountPoint: rootRouteRef,\n  }),\n);\n\nexport const PolicyReporterPage = policyReporterPlugin.provide(\n  createRoutableExtension({\n    name: 'PolicyReporterPage',\n    component: () =>\n      import('./components/PolicyReportsPage').then(m => m.PolicyReportsPage),\n    mountPoint: rootRouteRef,\n  }),\n);\n"],"names":[],"mappings":";;;;;AAYO,MAAM,uBAAuB,YAAa,CAAA;AAAA,EAC/C,EAAI,EAAA,iBAAA;AAAA,EACJ,IAAM,EAAA;AAAA,IACJ,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,oBAAA;AAAA,MACL,IAAM,EAAA,EAAE,QAAU,EAAA,WAAA,EAAa,cAAc,eAAgB,EAAA;AAAA,MAC7D,OAAA,EAAS,CAAC,EAAE,YAAc,EAAA,QAAA,EACxB,KAAA,IAAI,uBAAwB,CAAA,EAAE,YAAc,EAAA,QAAA,EAAU;AAAA,KACzD;AAAA;AAEL,CAAC;AAEM,MAAM,+BAA+B,oBAAqB,CAAA,OAAA;AAAA,EAC/D,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,8BAAA;AAAA,IACN,SAAW,EAAA,MACT,OAAO,wDAA2C,CAAE,CAAA,IAAA;AAAA,MAClD,OAAK,CAAE,CAAA;AAAA,KACT;AAAA,IACF,UAAY,EAAA;AAAA,GACb;AACH;AAEO,MAAM,8BAA8B,oBAAqB,CAAA,OAAA;AAAA,EAC9D,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,6BAAA;AAAA,IACN,SAAW,EAAA,MACT,OAAO,uDAA0C,CAAE,CAAA,IAAA;AAAA,MACjD,OAAK,CAAE,CAAA;AAAA,KACT;AAAA,IACF,UAAY,EAAA;AAAA,GACb;AACH;AAEO,MAAM,qBAAqB,oBAAqB,CAAA,OAAA;AAAA,EACrD,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,oBAAA;AAAA,IACN,SAAA,EAAW,MACT,OAAO,6CAAgC,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,iBAAiB,CAAA;AAAA,IACxE,UAAY,EAAA;AAAA,GACb;AACH;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["import {\n  createApiFactory,\n  createPlugin,\n  createRoutableExtension,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport { policyReporterApiRef } from './api/PolicyReporterApi';\nimport { PolicyReporterApiClient } from './api/PolicyReporterClient';\n\nimport { rootRouteRef } from './routes';\n\nexport const policyReporterPlugin = createPlugin({\n  id: 'policy-reporter',\n  apis: [\n    createApiFactory({\n      api: policyReporterApiRef,\n      deps: { fetchApi: fetchApiRef, discoveryApi: discoveryApiRef },\n      factory: ({ discoveryApi, fetchApi }) =>\n        new PolicyReporterApiClient({ discoveryApi, fetchApi }),\n    }),\n  ],\n});\n\nexport const EntityKyvernoPoliciesContent = policyReporterPlugin.provide(\n  createRoutableExtension({\n    name: 'EntityKyvernoPoliciesContent',\n    component: () =>\n      import('./components/EntityKyvernoPoliciesContent').then(\n        m => m.EntityKyvernoPoliciesContent,\n      ),\n    mountPoint: rootRouteRef,\n  }),\n);\n\nexport const EntityCustomPoliciesContent = policyReporterPlugin.provide(\n  createRoutableExtension({\n    name: 'EntityCustomPoliciesContent',\n    component: () =>\n      import('./components/EntityCustomPoliciesContent').then(\n        m => m.EntityCustomPoliciesContent,\n      ),\n    mountPoint: rootRouteRef,\n  }),\n);\n\nexport const PolicyReportsPage = policyReporterPlugin.provide(\n  createRoutableExtension({\n    name: 'PolicyReportsPage',\n    component: () =>\n      import('./components/PolicyReportsPage').then(m => m.PolicyReportsPage),\n    mountPoint: rootRouteRef,\n  }),\n);\n"],"names":[],"mappings":";;;;;AAYO,MAAM,uBAAuB,YAAa,CAAA;AAAA,EAC/C,EAAI,EAAA,iBAAA;AAAA,EACJ,IAAM,EAAA;AAAA,IACJ,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,oBAAA;AAAA,MACL,IAAM,EAAA,EAAE,QAAU,EAAA,WAAA,EAAa,cAAc,eAAgB,EAAA;AAAA,MAC7D,OAAA,EAAS,CAAC,EAAE,YAAc,EAAA,QAAA,EACxB,KAAA,IAAI,uBAAwB,CAAA,EAAE,YAAc,EAAA,QAAA,EAAU;AAAA,KACzD;AAAA;AAEL,CAAC;AAEM,MAAM,+BAA+B,oBAAqB,CAAA,OAAA;AAAA,EAC/D,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,8BAAA;AAAA,IACN,SAAW,EAAA,MACT,OAAO,wDAA2C,CAAE,CAAA,IAAA;AAAA,MAClD,OAAK,CAAE,CAAA;AAAA,KACT;AAAA,IACF,UAAY,EAAA;AAAA,GACb;AACH;AAEO,MAAM,8BAA8B,oBAAqB,CAAA,OAAA;AAAA,EAC9D,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,6BAAA;AAAA,IACN,SAAW,EAAA,MACT,OAAO,uDAA0C,CAAE,CAAA,IAAA;AAAA,MACjD,OAAK,CAAE,CAAA;AAAA,KACT;AAAA,IACF,UAAY,EAAA;AAAA,GACb;AACH;AAEO,MAAM,oBAAoB,oBAAqB,CAAA,OAAA;AAAA,EACpD,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,mBAAA;AAAA,IACN,SAAA,EAAW,MACT,OAAO,6CAAgC,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,iBAAiB,CAAA;AAAA,IACxE,UAAY,EAAA;AAAA,GACb;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyverno/backstage-plugin-policy-reporter",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",