This is the frontend part of the code-coverage plugin. It displays code coverage summaries for your entities.

# From your Backstage root directory
yarn add --cwd packages/app @backstage/plugin-code-coverage

Finally you need to import and render the code coverage entity, in packages/app/src/components/catalog/EntityPage.tsx add the following:

@@ -70,6 +70,7 @@ import {

 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import { EntityCodeCoverageContent } from '@backstage/plugin-code-coverage';

@@ -226,6 +227,10 @@ const defaultEntityPage = (
     <EntityLayout.Route path="/docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
+
+    <EntityLayout.Route path="/code-coverage" title="Code Coverage">
+      <EntityCodeCoverageContent />
+    </EntityLayout.Route>
   </EntityLayout>
 );

In order to use this plugin, you must set the backstage.io/code-coverage annotation on entities for which coverage ingestion has been enabled.

metadata:
  annotations:
    backstage.io/code-coverage: enabled

There's a feature to only include files that are in VCS in the coverage report, this is helpful to not count generated files for example. To enable this set the backstage.io/code-coverage annotation to scm-only.

metadata:
  annotations:
    backstage.io/code-coverage: scm-only

Note: It may be required to set the backstage.io/source-location annotation, however this should generally not be needed.