The template parameter example isn't working

[crivetechie]

Describe the bug

The example provided in https://pagerduty.github.io/backstage-plugin-docs/advanced/create-service-software-template/ doesn't work even after having followed the provided instructions to setup the plugin: the escalation_policy_id displays an error.

When using the suggested configuration

        escalation_policy_id:
          title: Escalation Policy ID
          type: string
          description: The ID of the escalation policy to associate with the service
          ui:field: SelectFieldFromApi 
          ui:options: 
            title: PagerDuty Escalation Policy
            description: Select an escalation policy from PagerDuty
            path: 'pagerduty/escalation_policies' 
            labelSelector: 'label'
            valueSelector: 'value'
            placeholder: '---'

The software template invokes the endpoint <backstagehost>/pagerduty/escalation_policies which returns a 404 and therefore prevent the field from rendering the escalation policies.

I tried to update the configuration to use the proxy path instead and the policies gets listed but it requires setting arraySelector option and changing labelSelector and valueSelector, working config:

    - title: PagerDuty
      properties:
        escalation_policy_id:
          title: Escalation Policy ID
          type: string
          description: The ID of the escalation policy to associate with the service
          ui:field: SelectFieldFromApi 
          ui:options: 
            title: PagerDuty Escalation Policy
            description: Select an escalation policy from PagerDuty
            path: 'proxy/pagerduty/escalation_policies' 
            labelSelector: 'name'
            valueSelector: 'id'
            placeholder: '---'
            arraySelector: 'escalation_policies'

The pagerduty configuration in app-config for Backstage is as follow:

proxy:
  '/pagerduty':
    target: https://api.pagerduty.com
    headers:
      Authorization: Token token=${PAGERDUTY_TOKEN}
    allowedMethods: ['GET']

pagerDuty:
  apiToken: ${PAGERDUTY_TOKEN}

[crivetechie]

I have found out what I was missing to get the documented template to work:

create the file packages/backend/src/plugins/pagerduty.ts with following content:

import { createRouter } from '@pagerduty/backstage-plugin-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
  });
}

And then add to packages/backend/src/index.ts:

// In packages/backend/src/index.ts
import pagerduty from './plugins/pagerduty';
// ...
async function main() {
  // ...
  const pagerdutyEnv = useHotMemoize(module, () => createEnv('pagerduty'));
  // ...
  apiRouter.use('/pagerduty', await todo(pagerdutyEnv));

I'd recommend updating the instructions to setup the backend. Some other plugins have similar instructions (as an example, see TODO: https://github.com/backstage/backstage/tree/master/plugins/todo)

[t1agob]

Hello @crivetechie! Sorry for the trouble here. I totally missed this part in the documentation.

Adding it immediately and will tag you here if you want to review it before I close this issue.

[t1agob]

@crivetechie the documentation has been updated 👉🏼 https://pagerduty.github.io/backstage-plugin-docs/getting-started/backstage/#add-the-backend-plugin-to-your-application

Let me know if that looks good to you and I'll close the ticket. Feel free to suggest any additional changes.

[crivetechie]

@t1agob docs look great, thank you!