diff --git a/.changeset/cyan-shirts-deny.md b/.changeset/cyan-shirts-deny.md new file mode 100644 index 0000000000..d6d3a2a2ba --- /dev/null +++ b/.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 diff --git a/.changeset/lazy-frogs-destroy.md b/.changeset/lazy-frogs-destroy.md new file mode 100644 index 0000000000..eb2b320e0a --- /dev/null +++ b/.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 diff --git a/packages/app/src/components/devtools/CustomDevToolsPage.tsx b/packages/app/src/components/devtools/CustomDevToolsPage.tsx index dfe70426aa..788b555c6d 100644 --- a/packages/app/src/components/devtools/CustomDevToolsPage.tsx +++ b/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 = () => { > + + + ); }; diff --git a/plugins/catalog-unprocessed-entities/README.md b/plugins/catalog-unprocessed-entities/README.md index fd824bec94..198d60b882 100644 --- a/plugins/catalog-unprocessed-entities/README.md +++ b/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. diff --git a/plugins/catalog-unprocessed-entities/api-report.md b/plugins/catalog-unprocessed-entities/api-report.md index b1e0d6f53d..940bc2b3a5 100644 --- a/plugins/catalog-unprocessed-entities/api-report.md +++ b/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) ``` diff --git a/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-failed.png b/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-failed.png new file mode 100644 index 0000000000..9a65654630 Binary files /dev/null and b/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-failed.png differ diff --git a/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-pending.png b/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-pending.png new file mode 100644 index 0000000000..d2924b0d7e Binary files /dev/null and b/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-pending.png differ diff --git a/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-raw.png b/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-raw.png new file mode 100644 index 0000000000..3b63b00cda Binary files /dev/null and b/plugins/catalog-unprocessed-entities/docs/catalog-unprocessed-entities-raw.png differ diff --git a/plugins/catalog-unprocessed-entities/package.json b/plugins/catalog-unprocessed-entities/package.json index 2058da0d6c..0297220148 100644 --- a/plugins/catalog-unprocessed-entities/package.json +++ b/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", diff --git a/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx b/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx index 44a146f027..662c5c9db6 100644 --- a/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx @@ -126,7 +126,7 @@ export const FailedEntities = () => { return ( <> { return ( <>
({ + 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 ( - - - - - - - - - - - - - - + + + + + + + + + + + + ); }; export const UnprocessedEntities = () => { return ( -
- +
+ + + ); }; diff --git a/plugins/catalog-unprocessed-entities/src/index.ts b/plugins/catalog-unprocessed-entities/src/index.ts index a65283926e..11ed24113f 100644 --- a/plugins/catalog-unprocessed-entities/src/index.ts +++ b/plugins/catalog-unprocessed-entities/src/index.ts @@ -17,3 +17,4 @@ export { catalogUnprocessedEntitiesPlugin, CatalogUnprocessedEntitiesPage, } from './plugin'; +export { UnprocessedEntitiesContent } from './components/UnprocessedEntities'; diff --git a/plugins/devtools/README.md b/plugins/devtools/README.md index 0ad7bfae61..09e76caaa4 100644 --- a/plugins/devtools/README.md +++ b/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 + + + + + + + + + + + + + + + + + + ``` + +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. diff --git a/plugins/devtools/docs/catalog-unprocessed-entities-tab.png b/plugins/devtools/docs/catalog-unprocessed-entities-tab.png new file mode 100644 index 0000000000..82afdcb759 Binary files /dev/null and b/plugins/devtools/docs/catalog-unprocessed-entities-tab.png differ