@andythehood/plugin-apigee v0.0.5

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

1. Install the plugin into your Backstage frontend app package:

   # From your Backstage root directory
   yarn add --cwd packages/app @andythehood/plugin-apigee

2. 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 />} />
   // ...

3. 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" />;
   // ...

4. 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 the isResourceType 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