feat: advanced config page

.github/workflows/on_release_created.yml

@@ -9,7 +9,7 @@ on:
         default: true
         type: boolean
       version:
-        description: 'Test scenario tags'
+        description: 'Version'
         required: true
         type: string      
 

dev/mockPagerDutyApi.ts

@@ -20,8 +20,47 @@ import {
 } from '../src';
 import { PagerDutyChangeEvent, PagerDutyIncident, PagerDutyUser } from '@pagerduty/backstage-plugin-common';
 import { Entity } from '@backstage/catalog-model';
+import { v4 as uuidv4 } from 'uuid';
 
 export const mockPagerDutyApi: PagerDutyApi = {
+  async getEntityMappings() {
+      return {
+        mappings: [
+          {
+            serviceId: "SERV1CE1D",
+            entityRef: "ENTITY1D",
+            entityName: "Entity1",
+            integrationKey: "INTEGRAT1ONKEY1",
+            team: "Team1",
+            serviceName: "Service1",
+            serviceUrl: "http://service1",
+            escalationPolicy: "Escalation Policy 1",
+            status: "InSync",
+          },
+          {
+            serviceId: "SERV1CE1D",
+            entityRef: "",
+            entityName: "Entity2",
+            integrationKey: "INTEGRAT1ONKEY2",
+            status: "NotMapped",
+            team: "Team1",
+            serviceName: "Service2",
+            serviceUrl: "http://service2",
+            escalationPolicy: "Escalation Policy 1",
+          }
+        ]
+      }
+  },
+  async storeServiceMapping(serviceId, entityId) {
+    const uuid = uuidv4();
+
+
+    return new Response(JSON.stringify({
+      service_id: serviceId,
+      entity_id: entityId,
+      id: uuid,
+    }));
+  },
   async getServiceByPagerDutyEntity(pagerDutyEntity: PagerDutyEntity) {
     return {
       service: {

package.json

@@ -40,19 +40,27 @@
     "@backstage/plugin-catalog-react": "^1.12.0",
     "@backstage/plugin-home-react": "^0.1.13",
     "@backstage/theme": "^0.5.5",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
+    "@mui/x-date-pickers": "^7.6.1",
+    "@pagerduty/backstage-plugin-common": "0.1.5",
+    "@tanstack/react-query": "^5.40.1",
     "classnames": "^2.2.6",
     "luxon": "^3.4.1",
+    "material-react-table": "^2.13.0",
     "react-use": "^17.2.4",
+    "uuid": "^10.0.0",
     "validate-color": "^2.2.4"
   },
   "peerDependencies": {
-    "@pagerduty/backstage-plugin-common": "^0.1.2",
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
+    "react": "^18.0.0 || ^20.0.0",
+    "react-dom": "^18.0.0 || ^20.0.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.26.6",
@@ -61,7 +69,6 @@
     "@backstage/test-utils": "^1.5.5",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@pagerduty/backstage-plugin-common": "^0.1.2",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
@@ -70,6 +77,7 @@
     "@types/luxon": "^3.3.1",
     "@types/node": "^16.11.26",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "@types/uuid": "^10.0.0",
     "copyfiles": "^2.4.1",
     "msw": "^1.2.4",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",

src/api/client.ts

@@ -27,7 +27,8 @@ import { PagerDutyChangeEventsResponse,
   PagerDutyServiceResponse,
   PagerDutyIncidentsResponse,
   PagerDutyServiceStandardsResponse,
-  PagerDutyServiceMetricsResponse
+  PagerDutyServiceMetricsResponse,
+  PagerDutyEntityMappingsResponse
 } from '@pagerduty/backstage-plugin-common';
 import { createApiRef, ConfigApi } from '@backstage/core-plugin-api';
 import { NotFoundError } from '@backstage/errors';
@@ -97,6 +98,38 @@ export class PagerDutyClient implements PagerDutyApi {
     return response;
   }
 
+  async getEntityMappings(): Promise<PagerDutyEntityMappingsResponse> {
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      'pagerduty',
+    )}/mapping/entity`;
+
+    return await this.findByUrl<PagerDutyEntityMappingsResponse>(url);
+  }
+
+  async storeServiceMapping(serviceId: string, integrationKey: string, backstageEntityRef: string): Promise<Response> {
+
+    const body = JSON.stringify({
+      entityRef: backstageEntityRef,
+      serviceId: serviceId,
+      integrationKey: integrationKey,
+    });
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8',
+        Accept: 'application/json, text/plain, */*',
+      },
+      body,
+    };
+
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      'pagerduty',
+    )}/mapping/entity`;
+
+    return this.request(url, options);
+  }
+
   async getServiceByEntity(entity: Entity): Promise<PagerDutyServiceResponse> {
     return await this.getServiceByPagerDutyEntity(getPagerDutyEntity(entity));
   }

src/api/types.ts

@@ -21,7 +21,8 @@ import { PagerDutyChangeEventsResponse,
   PagerDutyServiceStandardsResponse,
   PagerDutyServiceMetricsResponse,
   PagerDutyServiceStandards,
-  PagerDutyServiceMetrics
+  PagerDutyServiceMetrics,
+  PagerDutyEntityMappingsResponse
  } from '@pagerduty/backstage-plugin-common';
 import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
@@ -50,6 +51,18 @@ export type PagerDutyCardServiceResponse = {
 
 /** @public */
 export interface PagerDutyApi {
+  /**
+   * Fetches all entity mappings.
+   *
+   */
+  getEntityMappings(): Promise<PagerDutyEntityMappingsResponse>;
+
+  /**
+   * Stores the service mapping in the database.
+   * 
+   */
+  storeServiceMapping(serviceId: string, integrationKey: string, entityRef: string): Promise<Response>;
+
   /**
    * Fetches the service for the provided pager duty Entity.
    *

src/components/Icons/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import PDIcon from "../../assets/PD-Icon.svg";
+
+/** @public */
+export function PagerDutyIcon() {
+
+  return <img src={PDIcon} alt="PagerDuty" height="20px" />;
+};