Backstage Dynatrace for Managed Plugin

Install the frontend package

1. From your Backstage root
   Copy

   yarn --cwd packages/app add @backstage-community/plugin-dynatrace

Add the Dynatrace tab to your catalog entity page

1. Open packages/app/src/components/catalog/EntityPage.tsx
2. Import the components
   Copy

   // packages/app/src/components/catalog/EntityPage.tsx
   import { DynatraceTab, isDynatraceAvailable } from '@backstage-community/plugin-dynatrace';

3. Add a route to the service entity page
   Copy

   // packages/app/src/components/catalog/EntityPage.tsx
   
   // inside your serviceEntityPage definition
   const serviceEntityPage = (
     <EntityLayout>
       {/* other routes */}
       <EntityLayout.Route
         path="/dynatrace"
         title="Dynatrace"
         if={isDynatraceAvailable}
       >
         <DynatraceTab />
       </EntityLayout.Route>
     </EntityLayout>
   );

Configure the proxy and base URL

1. Add the Dynatrace proxy endpoint to app-config.yaml

   Copy

   proxy:
     endpoints:
       '/dynatrace':
         target: 'https://example.dynatrace.com/api/v2'
         headers:
           Authorization: 'Api-Token ${DYNATRACE_ACCESS_TOKEN}'

2. Add the base URL used for links

   Copy

   dynatrace:
     baseUrl: 'https://example.dynatrace.com'

3. Provide the token using an environment variable when you run the backend

   Copy

   DYNATRACE_ACCESS_TOKEN=your_api_token_here

The token needs these permissions

• entities.read
• problems.read
• DataExport or ExternalSyntheticIntegration or ReadSyntheticData

Enable the proxy in the backend new backend system

1. Add the backend package if missing

   Copy

   yarn --cwd packages/backend add @backstage/plugin-proxy-backend

2. Register the proxy plugin in packages/backend/src/index.ts

   Copy

   // packages/backend/src/index.ts
   import { createBackend } from '@backstage/backend-defaults';
   import { proxyPlugin } from '@backstage/plugin-proxy-backend';
   
   const backend = createBackend();
   
   // other plugins
   backend.add(proxyPlugin());
   
   backend.start();

Enable the proxy in the backend legacy backend system

1. Add the backend package if missing

   Copy

   yarn --cwd packages/backend add @backstage/plugin-proxy-backend

2. Create packages/backend/src/plugins/proxy.ts

   Copy

   // packages/backend/src/plugins/proxy.ts
   import { Router } from 'express';
   import { createRouter } from '@backstage/plugin-proxy-backend';
   import { PluginEnvironment } from '../types';
   
   export default async function createPlugin(env: PluginEnvironment): Promise<Router> {
     return await createRouter({
       logger: env.logger,
       config: env.config,
       discovery: env.discovery,
       tokenManager: env.tokenManager,
       httpAuth: env.httpAuth,
     });
   }

3. Wire it up in packages/backend/src/index.ts

   Copy

   // packages/backend/src/index.ts
   import { useHotMemoize } from 'react-use';
   import createProxyPlugin from './plugins/proxy';
   
   // inside main bootstrap function
   const proxyEnv = useHotMemoize(module, () => createEnv('proxy'));
   apiRouter.use('/proxy', await createProxyPlugin(proxyEnv));

The frontend will call the proxy using the config path you set under proxy endpoints. Backstage exposes this under the standard api base path.

Annotate your catalog entities

View recent application problems

1. Add the Dynatrace entity id to your entity
   Copy

   # catalog-info.yaml
   metadata:
     annotations:
       dynatrace.com/dynatrace-entity-id: SERVICE-ABC123

The id comes from the Dynatrace UI. Open the target entity. Copy the id from the id parameter in the URL. It looks like ENTITY_TYPE dash ENTITY_ID. Examples include SERVICE or SYNTHETIC_TEST.

View recent synthetic monitor results

1. Add one id or a list of ids
   Copy

   # catalog-info.yaml
   metadata:
     annotations:
       dynatrace.com/synthetics-ids: SYNTHETIC_TEST-1234, HTTP_CHECK-5678

You can separate values with a comma or a space.

Where you will see the plugin

• Open a catalog entity page that has the annotation
• Click the Dynatrace tab you added to the entity layout

Summary of exports you used

• DynatraceTab from @backstage-community/plugin-dynatrace placed inside EntityLayout.Route
• isDynatraceAvailable from the same package used in the if prop to show the tab only when the annotation is present