Integrated Unprocessed Entities with DevTools

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>

.changeset/cyan-shirts-deny.md

@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-catalog-unprocessed-entities': patch
+---
+
+The Catalog Unprocessed Entities plugin can now be integrated as a tab within the DevTools plugin
+
+- Added an export for `UnprocessedEntitiesContent`
+- Updated the `README` with images of the features
+- Adjusted the styles to fill in the available space
+- Set the table page size to 20 as 40 was causing errors in the browser console

.changeset/lazy-frogs-destroy.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-devtools': patch
+---
+
+Updated the `README` with instructions on how to integrate the Catalog Unprocessed Entities plugin as a tab within DevTools

packages/app/src/components/devtools/CustomDevToolsPage.tsx

@@ -21,6 +21,7 @@ import {
 } from '@backstage/plugin-devtools';
 import { DevToolsLayout } from '@backstage/plugin-devtools';
 import React from 'react';
+import { UnprocessedEntitiesContent } from '@backstage/plugin-catalog-unprocessed-entities';
 
 const DevToolsPage = () => {
   return (
@@ -37,6 +38,12 @@ const DevToolsPage = () => {
       >
         <ExternalDependenciesContent />
       </DevToolsLayout.Route>
+      <DevToolsLayout.Route
+        path="unprocessed-entities"
+        title="Unprocessed Entities"
+      >
+        <UnprocessedEntitiesContent />
+      </DevToolsLayout.Route>
     </DevToolsLayout>
   );
 };

plugins/catalog-unprocessed-entities/README.md

@@ -1,7 +1,27 @@
-# catalog-unprocessed-entities
+# Catalog Unprocessed Entities
+
+## Features
 
 Frontend plugin to view unprocessed entities.
 
+### Failed Entities
+
+You can see entities that are in a failed state:
+
+![Example of failed entities tab](./docs/catalog-unprocessed-entities-failed.png)
+
+### Pending Entities
+
+You can see entities that are in a pending state:
+
+![Example of pending entities tab](./docs/catalog-unprocessed-entities-pending.png)
+
+### Raw View
+
+In either of the failed or pending tabs you have the option to see the raw entity as JSON:
+
+![Example of raw entity](./docs/catalog-unprocessed-entities-raw.png)
+
 ## Requirements
 
 Requires the `@backstage/plugin-catalog-backend-module-unprocessed` module to be installed.

plugins/catalog-unprocessed-entities/api-report.md

@@ -20,5 +20,8 @@ export const catalogUnprocessedEntitiesPlugin: BackstagePlugin<
   {}
 >;
 
+// @public (undocumented)
+export const UnprocessedEntitiesContent: () => JSX.Element;
+
 // (No @packageDocumentation comment for this package)
 ```

plugins/catalog-unprocessed-entities/package.json

@@ -12,6 +12,12 @@
   "backstage": {
     "role": "frontend-plugin"
   },
+  "homepage": "https://backstage.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/catalog-unprocessed-entities"
+  },
   "scripts": {
     "start": "backstage-cli package start",
     "build": "backstage-cli package build",

plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx

@@ -126,7 +126,7 @@ export const FailedEntities = () => {
   return (
     <>
       <Table
-        options={{ pageSize: 40, search: true }}
+        options={{ pageSize: 20, search: true }}
         columns={columns}
         data={data?.entities || []}
         emptyContent={

plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx

@@ -82,7 +82,7 @@ export const PendingEntities = () => {
   return (
     <>
       <Table
-        options={{ pageSize: 40 }}
+        options={{ pageSize: 20 }}
         columns={columns}
         data={data?.entities || []}
         emptyContent={

plugins/catalog-unprocessed-entities/src/components/UnprocessedEntities.tsx

@@ -16,41 +16,50 @@
 import React, { useState } from 'react';
 
 import { Page, Header, Content } from '@backstage/core-components';
-import { Tab } from '@material-ui/core';
+import { Tab, makeStyles } from '@material-ui/core';
 import { TabContext, TabList, TabPanel } from '@material-ui/lab';
 
 import { FailedEntities } from './FailedEntities';
 import { PendingEntities } from './PendingEntities';
 
+const useStyles = makeStyles(() => ({
+  tabPanel: {
+    paddingLeft: '0px',
+    paddingRight: '0px',
+  },
+}));
+
+/** @public */
 export const UnprocessedEntitiesContent = () => {
+  const classes = useStyles();
   const [tab, setTab] = useState('failed');
   const handleChange = (_event: React.ChangeEvent<{}>, tabValue: string) => {
     setTab(tabValue);
   };
 
   return (
-    <Content>
-      <TabContext value={tab}>
-        <TabList onChange={handleChange}>
-          <Tab label="Failed" value="failed" />
-          <Tab label="Pending" value="pending" />
-        </TabList>
-        <TabPanel value="failed">
-          <FailedEntities />
-        </TabPanel>
-        <TabPanel value="pending">
-          <PendingEntities />
-        </TabPanel>
-      </TabContext>
-    </Content>
+    <TabContext value={tab}>
+      <TabList onChange={handleChange}>
+        <Tab label="Failed" value="failed" />
+        <Tab label="Pending" value="pending" />
+      </TabList>
+      <TabPanel value="failed" className={classes.tabPanel}>
+        <FailedEntities />
+      </TabPanel>
+      <TabPanel value="pending" className={classes.tabPanel}>
+        <PendingEntities />
+      </TabPanel>
+    </TabContext>
   );
 };
 
 export const UnprocessedEntities = () => {
   return (
     <Page themeId="tool">
-      <Header title="Unprocessed Entitites" />
-      <UnprocessedEntitiesContent />
+      <Header title="Unprocessed Entities" />
+      <Content>
+        <UnprocessedEntitiesContent />
+      </Content>
     </Page>
   );
 };

plugins/catalog-unprocessed-entities/src/index.ts

@@ -17,3 +17,4 @@ export {
   catalogUnprocessedEntitiesPlugin,
   CatalogUnprocessedEntitiesPage,
 } from './plugin';
+export { UnprocessedEntitiesContent } from './components/UnprocessedEntities';

plugins/devtools/README.md

@@ -44,6 +44,12 @@ Lists the status of configured External Dependencies based on your current runni
 
 ![Example of external dependencies tab](./docs/devtools-external-dependencies.png)
 
+### Catalog Unprocessed Entities
+
+The [Catalog Unprocessed Entities plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-unprocessed-entities) has an optional tab that you can also be added that will show unprocessed entities:
+
+![Example of unprocessed entities tab](./docs/catalog-unprocessed-entities-tab.png)
+
 ## Setup
 
 The following sections will help you get the DevTools plugin setup and running.
@@ -149,6 +155,43 @@ The DevTools plugin has been designed so that you can customize the tabs to suit
 
 With this setup you can add or remove the tabs as you'd like or add your own simply by editing your `CustomDevToolsPage.tsx` file
 
+### Adding Tabs From Other Plugins
+
+You can also add tabs to show content from other plugins that fit well with the other DevTools content.
+
+#### Catalog Unprocessed Entities Tab
+
+Here's how to add the Catalog Unprocessed Entities tab:
+
+1. Install and setup the [Catalog Unprocessed Entities plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-unprocessed-entities) as per its documentation
+2. Add the following import to your `CustomDevToolsPage.tsx`:
+
+   `import { UnprocessedEntitiesContent } from '@backstage/plugin-catalog-unprocessed-entities';`
+
+3. Then add a new `DevToolsLayout.Route` to the end of your `DevToolsLayout` like this:
+
+   ```diff
+     <DevToolsLayout>
+       <DevToolsLayout.Route path="info" title="Info">
+         <InfoContent />
+       </DevToolsLayout.Route>
+       <DevToolsLayout.Route path="config" title="Config">
+         <ConfigContent />
+       </DevToolsLayout.Route>
+       <DevToolsLayout.Route
+         path="external-dependencies"
+         title="External Dependencies"
+       >
+         <ExternalDependenciesContent />
+       </DevToolsLayout.Route>
+   +   <DevToolsLayout.Route path="unprocessed-entities" title="Unprocessed Entities">
+   +     <UnprocessedEntitiesContent />
+   +   </DevToolsLayout.Route>
+     </DevToolsLayout>
+   ```
+
+4. Now run `yarn dev` and navigate to the DevTools you'll see a new tab for Unprocessed Entities
+
 ## Permissions
 
 The DevTools plugin supports the [permissions framework](https://backstage.io/docs/permissions/overview), the following sections outline how you can use them with the assumption that you have the permissions framework setup and working.