Skip to content

Latest commit

 

History

History
150 lines (102 loc) · 6.58 KB

component-setup.md

File metadata and controls

150 lines (102 loc) · 6.58 KB

Component Setup Guide

EntityKyvernoPoliciesContent - Displays kyverno policies for an entity

EntityKyvernoPoliciesContent

The EntityKyvernoPoliciesContent component displays kyverno policies for an entity using the kyverno source

Screenshot

EntityKyvernoPoliciesContent

Setup Steps

Add the EntityKyvernoPoliciesContent component to the Entity routes in packages/app/src/components/catalog/EntityPage.tsx

+ import { EntityKyvernoPoliciesContent } from '@kyverno/backstage-plugin-policy-reporter';

const serviceEntityPage = (
  <EntityLayout>
    {/* ... existing routes ... */}
+    <EntityLayout.Route path="/kyverno" title="kyverno policy">
+      <EntityKyvernoPoliciesContent />
+    </EntityLayout.Route>
    {/* ... */}
  </EntityLayout>
)

Configuration Options

Prop Type Default Description
annotationsDocumentationUrl string undefined Optional URL used for the READ MORE button when annotations are missing
policyDocumentationUrl string undefined Optional URL used to generate links to policy documentation. More information
EntityCustomPoliciesContent - Displays policy reports for an entity with a custom source

EntityCustomPoliciesContent

The EntityCustomPoliciesContent component displays policy reports from a custom source.

This plugin aims to provide specialized components for different policy sources. If you need a component for a specific policy source that isn't currently available, please open an issue with details about your use case.

New source-specific components are being developed based on user needs.

Screenshot

EntityCustomPoliciesContent

Setup Steps

Add the EntityCustomPoliciesContent component to the Entity routes in packages/app/src/components/catalog/EntityPage.tsx

+ import { EntityCustomPoliciesContent } from '@kyverno/backstage-plugin-policy-reporter';

const serviceEntityPage = (
  <EntityLayout>
    {/* ... existing routes ... */}
+    <EntityLayout.Route path="/kyverno" title="kyverno policy">
+      <EntityCustomPoliciesContent title="Kyverno Policy Reports" sources={['kyverno']} />
+    </EntityLayout.Route>
    {/* ... */}
  </EntityLayout>
)

Configuration Options

Prop Type Default Description
title string undefined Required Title to use for the content page
sources string[] undefined Required Array of all the sources to component should show policies for
annotationsDocumentationUrl string undefined Optional URL used for the READ MORE button when annotations are missing
policyDocumentationUrl string undefined Optional URL used to generate links to policy documentation. More information
PolicyReportsPage - Sidebar component used to display all policy reports for a given environment

PolicyReportsPage

The PolicyReportsPage component displays all policy reports for a given environment. This component shows reports from all sources and is intended to be placed on the Backstage sidebar.

Note: This component is a work in progress. See #29 for current state of the component

Screenshot

EntityCustomPoliciesContent

Setup Steps

Add a new Route element with the path /policy-reports and element of <PolicyReportsPage> in packages/app/src/App.tsx

+ import { PolicyReportsPage } from '@kyverno/backstage-plugin-policy-reporter';
...

const routes = (
  <FlatRoutes>
    {/* existing routes... */}

+    <Route
+      path='/policy-reports'
+      element={<PolicyReportsPage title='My Optional Title' />}
+    />
  </FlatRoutes>
);

Add a sidebar item that routes to the path setup in previous step

+import PolicyIcon from '@material-ui/icons/Policy';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      {/* existing sidebar items... */}

      <SidebarScrollWrapper>
        {/* existing sidebar items... */}

+        <SidebarItem icon={PolicyIcon} to='policy-reports' text='Policy Reports' />
      </SidebarScrollWrapper>
    </Sidebar>
  </SidebarPage>
);

Configuration Options

Prop Type Default Description
title string Policy Reports Optional Title to use for the content page
subtitle string View all policy reports from a Kubernetes cluster Optional Subtitle to use for the content page
policyDocumentationUrl string undefined Optional URL used to generate links to policy documentation. More information