@andythehood/plugin-apigee
v0.0.5
Published
Welcome to the Apigee frontend plugin!
Downloads
18
Readme
Apigee Plugin
Welcome to the Apigee frontend plugin!
This plugin provides a set of component pages for viewing information about Apigee entities in the Backstage catalog.
The following Apigee object types are displayed along with the relationships between them:
- API Proxies identified as
kind:Component, spec.type:apiproxy
- API Products identified as
kind:Component, spec.type:apiproduct
- Developer Applications identified as
kind:Component, spec.type:devapp
- Developers identified as
kind:Component, spec.type:developer
- Environments identified as
kind:Resource, spec.type:environment
- API Deployments identified as
kind:Component, spec.type:deployment
To import Apigee entities into the Backstage catalog from your ApigeeX Organization, please see the Apigee Entity Provider Module
(@andythehood/catalog-backend-module-apigee
)
Dependencies
This module depends on the following Backstage backend module:
- the Apigee Entity Provider Module is recommended for importing entities from your Apigee Organization. Alternatively, you can use this CLI to export entities from Apigee into a set of YAML files that can be imported using the standard Catalog Import process.
Setup
Install the plugin into your Backstage frontend app package:
# From your Backstage root directory yarn add --cwd packages/app @andythehood/plugin-apigee
Add a route where the Apigee page will live, typically
/apigee
.// In packages/app/src/App.tsx import { ApigeePage } from '@andythehood/plugin-apigee';'; // ... <Route path="/apigee" element={<ApigeePage />} /> // ...
Optionally, add a Sidebar Menu Item, e.g.
// In packages/app/src/components/Root/Root.tsx import {ApigeeIcon} from "@andythehood/plugin-apigee"; // ... <SidebarItem icon={ApigeeIcon} to="apigee" text="Apigee" />; // ...
Modify the default
Entitypage.tsx
component to load the Apigee-specific Content pages based on the entity types listed above, e.g. apiproducts, apiproxy, developer, devapp, environment, etc.a. Import the Apigee Entity content pages
// In packages/app/src/components/catalog/EntityPage.tsx import { ApigeeEntityAppContent, ApigeeEntityDeveloperContent, ApigeeEntityProductContent, ApigeeEntityProxyContent, ApigeeEntityDeploymentContent, ApigeeEntityEnvironmentContent, } from "@andythehood/plugin-apigee";
b. In the same file, update the imports from
@backstage/plugin-catalog
to add theisResourceType
function// In packages/app/src/components/catalog/EntityPage.tsx import { ..., isResourceType, } from '@backstage/plugin-catalog';
c. In the same file, update the existing
componentPage
function... const componentPage = ( <EntitySwitch> <EntitySwitch.Case if={isComponentType('service')}> {serviceEntityPage} </EntitySwitch.Case> <EntitySwitch.Case if={isComponentType('website')}> {websiteEntityPage} </EntitySwitch.Case> + <EntitySwitch.Case if={isComponentType('apiproxy')}> + {apigeeEntityProxyPage} + </EntitySwitch.Case> + <EntitySwitch.Case if={isComponentType('apiproduct')}> + {apigeeEntityProductPage} + </EntitySwitch.Case> + <EntitySwitch.Case if={isComponentType('developer')}> + {apigeeEntityDeveloperPage} + </EntitySwitch.Case> + <EntitySwitch.Case if={isComponentType('devapp')}> + {apigeeEntityAppPage} + </EntitySwitch.Case> + <EntitySwitch.Case if={isComponentType('deployment')}> + {apigeeEntityDeploymentPage} + </EntitySwitch.Case> <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case> </EntitySwitch> ); ...
d. In the same file, update the existing
entityPage
function:... export const entityPage = ( <EntitySwitch> <EntitySwitch.Case if={isKind('component')} children={componentPage} /> <EntitySwitch.Case if={isKind('api')} children={apiPage} /> <EntitySwitch.Case if={isKind('group')} children={groupPage} /> <EntitySwitch.Case if={isKind('user')} children={userPage} /> <EntitySwitch.Case if={isKind('system')} children={systemPage} /> <EntitySwitch.Case if={isKind('domain')} children={domainPage} /> + <EntitySwitch.Case + if={isKind('resource') && isResourceType('environment')} + children={apigeeEntityEnvironmentPage} + /> <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case> </EntitySwitch> );
e. In the same
EntityPage.tsx
file, add the following functions:const apigeeEntityEnvironmentPage = ( <EntityLayout> <EntityLayout.Route path="/" title="Overview"> <ApigeeEntityEnvironmentContent /> </EntityLayout.Route> </EntityLayout> ); const apigeeEntityProxyPage = ( <EntityLayout> <EntityLayout.Route path="/" title="Overview"> <ApigeeEntityProxyContent /> </EntityLayout.Route> </EntityLayout> ); const apigeeEntityProductPage = ( <EntityLayout> <EntityLayout.Route path="/" title="Overview"> <ApigeeEntityProductContent /> </EntityLayout.Route> </EntityLayout> ); const apigeeEntityDeveloperPage = ( <EntityLayout> <EntityLayout.Route path="/" title="Overview"> <ApigeeEntityDeveloperContent /> </EntityLayout.Route> </EntityLayout> ); const apigeeEntityAppPage = ( <EntityLayout> <EntityLayout.Route path="/" title="Overview"> <ApigeeEntityAppContent /> </EntityLayout.Route> </EntityLayout> ); const apigeeEntityDeploymentPage = ( <EntityLayout> <EntityLayout.Route path="/" title="Overview"> <ApigeeEntityDeploymentContent /> </EntityLayout.Route> </EntityLayout> );
Configuration
Configure the list of available Apigee Organizations shown on the Apigee page by adding this config as a top level section in your app-config.yaml
:
apigee:
organizations:
- <YOUR_APIGEE_ORGNAME_1>
- <YOUR_APIGEE_ORGNAME_2>
- ...
Authentication
This plugin requires that the Backstage User to authenticate with Google Sign-In and for that user to have Apigee Read-Only Admin
permissions on the Apigee Organizations listed in the app-config.yaml
.
TODO
- Set intial tags filter in Apigee catalog