@pagerduty/backstage-plugin 0.12.1-next.8 → 0.12.1-next.81

package/dist/esm/index-f76a5582.esm.js

@@ -0,0 +1,245 @@
+import React, { useState, useMemo } from 'react';
+import { Box, DialogTitle, DialogContent, DialogActions, Tooltip, IconButton, Grid } from '@material-ui/core';
+import { Page, Header, Content } from '@backstage/core-components';
+import EditIcon from '@mui/icons-material/Edit';
+import { useApi } from '@backstage/core-plugin-api';
+import { p as pagerDutyApiRef } from './index-4c05ac30.esm.js';
+import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { useMaterialReactTable, MRT_EditActionButtons, MaterialReactTable } from 'material-react-table';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import '@backstage/errors';
+import '@backstage/plugin-home-react';
+import 'luxon';
+import '@material-ui/icons/OpenInBrowser';
+import '../assets/emptystate.svg';
+import 'react-use/lib/useAsyncFn';
+import '@material-ui/lab';
+import '../assets/forbiddenstate.svg';
+import '@material-ui/core/Avatar';
+import '@material-ui/icons/Notifications';
+import 'react-use/lib/useAsync';
+import '@material-ui/icons/Link';
+import '../assets/PD-Green.svg';
+import '../assets/PD-White.svg';
+import 'validate-color';
+import '@material-ui/icons/Info';
+import '@material-ui/icons/CheckCircle';
+import '@material-ui/icons/RadioButtonUnchecked';
+import '@material-ui/core/styles';
+import 'react-use';
+import '@material-ui/lab/Alert/Alert';
+import '@backstage/catalog-model';
+import '@material-ui/icons/AddAlert';
+import '@material-ui/icons/ExpandMore';
+
+function getColorFromStatus(status) {
+  switch (status) {
+    case "InSync":
+      return "green";
+    case "OutOfSync":
+      return "red";
+    case "NotMapped":
+      return "orange";
+    default:
+      return "gray";
+  }
+}
+const ServiceMappingComponent = () => {
+  const [catalogEntities, setCatalogEntities] = useState([]);
+  const [entityOptions, setEntityOptions] = useState([]);
+  const pagerDutyApi = useApi(pagerDutyApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  function useGetMappings() {
+    return useQuery({
+      queryKey: ["mappings"],
+      queryFn: async () => {
+        const { mappings: foundMappings } = await pagerDutyApi.getEntityMappings();
+        return foundMappings;
+      },
+      refetchOnWindowFocus: false
+    });
+  }
+  function useUpdateMapping() {
+    const queryClient2 = useQueryClient();
+    return useMutation({
+      mutationFn: async (mapping) => {
+        return await pagerDutyApi.storeServiceMapping(
+          mapping.serviceId,
+          mapping.entityRef
+        );
+      },
+      // client side optimistic update
+      onMutate: (newMappingInfo) => {
+        queryClient2.setQueryData(
+          ["updateMappings"],
+          (prevMappings) => prevMappings == null ? void 0 : prevMappings.map(
+            (prevMapping) => {
+              var _a;
+              if (prevMapping.serviceId === newMappingInfo.serviceId) {
+                newMappingInfo.entityName = ((_a = catalogEntities.find((entity) => entity.id === newMappingInfo.entityRef)) == null ? void 0 : _a.name) || "";
+                return newMappingInfo;
+              }
+              return prevMapping;
+            }
+          )
+        );
+      }
+    });
+  }
+  function fetchCatalogEntities() {
+    catalogApi.getEntities({
+      filter: { kind: "Component" }
+    }).then(({ items }) => {
+      const entities = [];
+      items.forEach((entity) => {
+        var _a, _b, _c, _d, _e, _f;
+        entities.push({
+          name: (_a = entity.metadata) == null ? void 0 : _a.name,
+          id: (_c = (_b = entity.metadata) == null ? void 0 : _b.uid) != null ? _c : "",
+          system: JSON.stringify((_d = entity.spec) == null ? void 0 : _d.system) || "",
+          owner: JSON.stringify((_e = entity.spec) == null ? void 0 : _e.owner) || "",
+          lifecycle: JSON.stringify((_f = entity.spec) == null ? void 0 : _f.lifecycle) || ""
+        });
+      });
+      setCatalogEntities(entities);
+    });
+  }
+  function getCatalogEntityOptions() {
+    if (catalogEntities.length === 0) {
+      fetchCatalogEntities();
+    }
+    if (entityOptions.length === 0) {
+      const options = [];
+      options.push({ value: "", label: "None" });
+      catalogEntities.forEach((entity) => {
+        options.push({
+          value: entity.id,
+          label: entity.name
+        });
+        setEntityOptions(options);
+      });
+    }
+    return entityOptions;
+  }
+  const DenseTable = () => {
+    const [validationErrors, setValidationErrors] = useState({});
+    const columns = useMemo(
+      () => [
+        {
+          accessorKey: "serviceId",
+          header: "Service ID",
+          visibleInShowHideMenu: false,
+          enableEditing: false
+        },
+        {
+          accessorKey: "serviceName",
+          header: "PagerDuty Service",
+          enableEditing: false
+        },
+        {
+          accessorKey: "team",
+          header: "Team",
+          enableEditing: false
+        },
+        {
+          accessorKey: "escalationPolicy",
+          header: "Escalation Policy",
+          enableEditing: false
+        },
+        {
+          accessorKey: "entityRef",
+          header: "Mapping",
+          visibleInShowHideMenu: false,
+          editVariant: "select",
+          editSelectOptions: getCatalogEntityOptions(),
+          muiEditTextFieldProps: {
+            select: true,
+            error: !!(validationErrors == null ? void 0 : validationErrors.state),
+            helperText: validationErrors == null ? void 0 : validationErrors.state
+          }
+        },
+        {
+          accessorKey: "entityName",
+          header: "Mapped Entity Name",
+          enableEditing: false
+        },
+        {
+          accessorKey: "status",
+          header: "Status",
+          enableEditing: false,
+          Cell: ({ cell }) => /* @__PURE__ */ React.createElement(
+            Box,
+            {
+              component: "span",
+              bgcolor: getColorFromStatus(cell.getValue()),
+              borderRadius: "0.25rem",
+              color: "white",
+              p: "0.25rem"
+            },
+            cell.getValue()
+          )
+        }
+      ],
+      [validationErrors]
+    );
+    const {
+      data: fetchedMappings = [],
+      isError: isLoadingMappingsError,
+      isFetching: isFetchingMappings,
+      isLoading: isLoadingMappings
+    } = useGetMappings();
+    const { mutateAsync: updateMapping, isPending: isUpdatingMapping } = useUpdateMapping();
+    const handleSaveMapping = async ({ values, table }) => {
+      var _a;
+      setValidationErrors({});
+      values.entityName = ((_a = catalogEntities.find((entity) => entity.id === values.entityRef)) == null ? void 0 : _a.name) || "";
+      values.status = "RefreshToUpdate";
+      await updateMapping(values);
+      table.setEditingRow(null);
+    };
+    const dataTable = useMaterialReactTable({
+      columns,
+      data: fetchedMappings,
+      editDisplayMode: "modal",
+      // default ('row', 'cell', 'table', and 'custom' are also available)
+      enableEditing: true,
+      positionActionsColumn: "last",
+      enableStickyHeader: true,
+      getRowId: (row) => row.serviceId,
+      muiToolbarAlertBannerProps: isLoadingMappingsError ? {
+        color: "error",
+        children: "Error loading data"
+      } : void 0,
+      muiTableContainerProps: {
+        sx: {
+          minHeight: "500px"
+        }
+      },
+      onEditingRowCancel: () => setValidationErrors({}),
+      onEditingRowSave: handleSaveMapping,
+      // optionally customize modal content
+      renderEditRowDialogContent: ({ table, row, internalEditComponents }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogTitle, null, "Edit Mapping"), /* @__PURE__ */ React.createElement(DialogContent, null, internalEditComponents, " "), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(MRT_EditActionButtons, { variant: "text", table, row }))),
+      renderRowActions: ({ row, table }) => /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex" } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React.createElement(IconButton, { onClick: () => table.setEditingRow(row) }, /* @__PURE__ */ React.createElement(EditIcon, null)))),
+      state: {
+        isLoading: isLoadingMappings,
+        isSaving: isUpdatingMapping,
+        showAlertBanner: isLoadingMappingsError,
+        showProgressBars: isFetchingMappings,
+        columnVisibility: {
+          serviceId: false,
+          entityRef: false
+        }
+      }
+    });
+    return /* @__PURE__ */ React.createElement(MaterialReactTable, { table: dataTable });
+  };
+  const queryClient = new QueryClient();
+  return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(DenseTable, null));
+};
+
+const PagerDutyPage = () => {
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { title: "PagerDuty", subtitle: "Advanced configurations" }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(ServiceMappingComponent, null)))));
+};
+
+export { PagerDutyPage };
+//# sourceMappingURL=index-f76a5582.esm.js.map

package/dist/esm/index-f76a5582.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-f76a5582.esm.js","sources":["../../src/components/PagerDutyPage/ServiceMappingComponent.tsx","../../src/components/PagerDutyPage/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport {\n  Box,\n  // Button,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  // FormControl,\n  IconButton,\n  // MenuItem,\n  // Select,\n  Tooltip,\n  // Typography,\n} from \"@material-ui/core\";\nimport EditIcon from \"@mui/icons-material/Edit\";\nimport { PagerDutyEntityMapping } from \"@pagerduty/backstage-plugin-common\";\nimport { useApi } from \"@backstage/core-plugin-api\";\nimport { pagerDutyApiRef } from \"../../api\";\nimport {\n  QueryClient,\n  QueryClientProvider,\n  useMutation,\n  useQuery,\n  useQueryClient,\n} from \"@tanstack/react-query\";\nimport {\n  DropdownOption,\n  MRT_ColumnDef,\n  MRT_EditActionButtons,\n  MRT_TableOptions,\n  MaterialReactTable,\n  useMaterialReactTable,\n} from \"material-react-table\";\nimport { catalogApiRef } from \"@backstage/plugin-catalog-react\";\n// import { catalogApiRef } from \"@backstage/plugin-catalog-react\";\n// import { Entity } from \"@backstage/catalog-model\";\n\ntype Service = {\n  name: string; // \"Ads\"\n  id: string; // \"QWe1j283n12j132\"\n  system: string; // \"Production\"\n  owner: string; // \"Mapped\"\n  lifecycle: string; // \"Ads\"\n};\n\n// type TableItem = {\n//   name: string | undefined;\n//   team: string | undefined;\n//   escalationPolicy: string | undefined;\n//   mappingStatus: JSX.Element;\n//   mapping: JSX.Element;\n//   actions: JSX.Element;\n// };\n\n// type DenseTableProps = {\n//   items: TableItem[];\n// };\n\nfunction getColorFromStatus(status?: string) {\n  switch (status) {\n    case \"InSync\":\n      return \"green\";\n    case \"OutOfSync\":\n      return \"red\";\n    case \"NotMapped\":\n      return \"orange\";\n    default:\n      return \"gray\";\n  }\n}\n\nexport const ServiceMappingComponent = () => {\n\n  const [catalogEntities, setCatalogEntities] = useState<Service[]>([]);\n  const [entityOptions, setEntityOptions] = useState<DropdownOption[]>([]);\n\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  // READ hook (get mappings from api)\n  function useGetMappings() {\n    return useQuery<PagerDutyEntityMapping[]>({\n      queryKey: [\"mappings\"],\n      queryFn: async () => {\n        // send api request here\n        const { mappings: foundMappings } =\n          await pagerDutyApi.getEntityMappings();\n\n        return foundMappings;\n      },\n      refetchOnWindowFocus: false,\n    });\n  }\n\n  // UPDATE hook (put mapping in api)\n  function useUpdateMapping() {\n    const queryClient = useQueryClient();\n    return useMutation({\n      mutationFn: async (mapping: PagerDutyEntityMapping) => {\n        return await pagerDutyApi.storeServiceMapping(\n          mapping.serviceId,\n          mapping.entityRef\n        );\n      },\n      // client side optimistic update\n      onMutate: (newMappingInfo: PagerDutyEntityMapping) => {\n        queryClient.setQueryData([\"updateMappings\"], (prevMappings: any) =>\n          prevMappings?.map((prevMapping: PagerDutyEntityMapping) => {\n            if (prevMapping.serviceId === newMappingInfo.serviceId) {\n              newMappingInfo.entityName = catalogEntities.find((entity) => entity.id === newMappingInfo.entityRef)?.name || \"\";\n\n              return newMappingInfo;\n            }\n            return prevMapping;                        \n          }\n          )\n        );\n      },\n    });\n  }\n\n  function fetchCatalogEntities() {\n    catalogApi\n      .getEntities({\n        filter: { kind: \"Component\" },\n      })\n      .then(({ items }) => {\n        const entities: Service[] = [];\n        items.forEach((entity: any) => {\n          entities.push({\n            name: entity.metadata?.name,\n            id: entity.metadata?.uid ?? \"\",\n            system: JSON.stringify(entity.spec?.system) || \"\",\n            owner: JSON.stringify(entity.spec?.owner) || \"\",\n            lifecycle: JSON.stringify(entity.spec?.lifecycle) || \"\",\n          });\n        });\n        setCatalogEntities(entities);\n      });\n  }\n\n  function getCatalogEntityOptions() : DropdownOption[] {\n    // fetch entities if not already fetched\n    if (catalogEntities.length === 0) {\n      fetchCatalogEntities();\n    }\n\n    if(entityOptions.length === 0) {\n      const options : DropdownOption[] = [];\n      // Add empty object\n      options.push({ value: \"\", label: \"None\" });\n\n      catalogEntities.forEach((entity) => {\n        options.push({\n          value: entity.id,\n          label: entity.name,\n        });\n      setEntityOptions(options);\n      });\n    }\n\n    return entityOptions;\n  }\n\n  const DenseTable = () => {\n    const [validationErrors, setValidationErrors] = useState<\n      Record<string, string | undefined>\n    >({});\n\n    const columns = useMemo<MRT_ColumnDef<PagerDutyEntityMapping>[]>(\n      () => [\n        {\n          accessorKey: \"serviceId\",\n          header: \"Service ID\",\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n        },\n        {\n          accessorKey: \"serviceName\",\n          header: \"PagerDuty Service\",\n          enableEditing: false,\n        },\n        {\n          accessorKey: \"team\",\n          header: \"Team\",\n          enableEditing: false,\n        },\n        {\n          accessorKey: \"escalationPolicy\",\n          header: \"Escalation Policy\",\n          enableEditing: false,\n        },\n        {\n          accessorKey: \"entityRef\",\n          header: \"Mapping\",\n          visibleInShowHideMenu: false,\n          editVariant: \"select\",\n          editSelectOptions: getCatalogEntityOptions(),\n          muiEditTextFieldProps: {\n            select: true,\n            error: !!validationErrors?.state,\n            helperText: validationErrors?.state,\n          },\n        },\n        {\n          accessorKey: \"entityName\",\n          header: \"Mapped Entity Name\",\n          enableEditing: false,\n        },\n        {\n          accessorKey: \"status\",\n          header: \"Status\",\n          enableEditing: false,\n          Cell: ({ cell }) => (\n            <Box\n                component=\"span\"\n                bgcolor={getColorFromStatus(cell.getValue<string>())}\n                borderRadius=\"0.25rem\"\n                color=\"white\"\n                p=\"0.25rem\"\n              >\n                {cell.getValue<string>()}\n              </Box>\n          ),\n        },\n      ],\n      [validationErrors]\n    );\n\n    // call READ hook\n    const {\n      data: fetchedMappings = [],\n      isError: isLoadingMappingsError,\n      isFetching: isFetchingMappings,\n      isLoading: isLoadingMappings,\n    } = useGetMappings();\n\n    // call UPDATE hook\n    const { mutateAsync: updateMapping, isPending: isUpdatingMapping } =\n      useUpdateMapping();\n\n    // UPDATE action\n    const handleSaveMapping: MRT_TableOptions<PagerDutyEntityMapping>[\"onEditingRowSave\"] =\n      async ({ values, table }) => {\n        setValidationErrors({});\n        values.entityName = catalogEntities.find((entity) => entity.id === values.entityRef)?.name || \"\";\n        values.status = \"RefreshToUpdate\";\n        await updateMapping(values);\n        table.setEditingRow(null); // exit editing mode\n      };\n\n    const dataTable = useMaterialReactTable({\n      columns,\n      data: fetchedMappings,\n      editDisplayMode: \"modal\", // default ('row', 'cell', 'table', and 'custom' are also available)\n      enableEditing: true,\n      positionActionsColumn: \"last\",\n      enableStickyHeader: true,\n      getRowId: (row) => row.serviceId,\n      muiToolbarAlertBannerProps: isLoadingMappingsError\n        ? {\n            color: \"error\",\n            children: \"Error loading data\",\n          }\n        : undefined,\n      muiTableContainerProps: {\n        sx: {\n          minHeight: \"500px\",\n        },\n      },\n      onEditingRowCancel: () => setValidationErrors({}),\n      onEditingRowSave: handleSaveMapping,\n      // optionally customize modal content\n      renderEditRowDialogContent: ({ table, row, internalEditComponents }) => (\n        <>\n          <DialogTitle>Edit Mapping</DialogTitle>\n          <DialogContent>\n            {internalEditComponents}{\" \"}\n            {/* or render custom edit components here */}\n          </DialogContent>\n          <DialogActions>\n            <MRT_EditActionButtons variant=\"text\" table={table} row={row} />\n          </DialogActions>\n        </>\n      ),\n      renderRowActions: ({ row, table }) => (\n        <Box sx={{ display: \"flex\" }}>\n          <Tooltip title=\"Edit\">\n            <IconButton onClick={() => table.setEditingRow(row)}>\n              <EditIcon />\n            </IconButton>\n          </Tooltip>\n        </Box>\n      ),\n      state: {\n        isLoading: isLoadingMappings, \n        isSaving: isUpdatingMapping,\n        showAlertBanner: isLoadingMappingsError, \n        showProgressBars: isFetchingMappings, \n        columnVisibility: {\n          serviceId: false,\n          entityRef: false,\n        }\n      },\n    });\n\n    return <MaterialReactTable table={dataTable} />;\n  };\n\n  const queryClient = new QueryClient();\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <DenseTable />\n    </QueryClientProvider>\n  );\n};\n","import React from \"react\";\nimport { Grid } from \"@material-ui/core\";\nimport { Header, Page, Content } from \"@backstage/core-components\";\nimport { ServiceMappingComponent } from \"./ServiceMappingComponent\";\n\n/** @public */\nexport const PagerDutyPage = () => {\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"PagerDuty\" subtitle=\"Advanced configurations\" />\n      <Content>\n        {/* <Grid container spacing={3} direction=\"column\">\n          <Grid item alignContent=\"flex-end\">\n            <Button variant=\"contained\" color=\"primary\" onClick={() => {handleImport()}}>\n              Import\n            </Button>\n            <Button variant=\"outlined\" color=\"primary\" onClick={() => {handleSave()}}>\n              Save\n            </Button>\n          </Grid>\n        </Grid> */}\n        <Grid container spacing={3} direction=\"column\">\n          <Grid item>\n            <ServiceMappingComponent />\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":["queryClient"],"mappings":"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"}

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as react from 'react';
 import react__default, { ReactNode } from 'react';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { DiscoveryApi, FetchApi, ConfigApi } from '@backstage/core-plugin-api';
-import { PagerDutyServicesResponse, PagerDutyServiceResponse, PagerDutyIncidentsResponse, PagerDutyChangeEventsResponse, PagerDutyServiceStandardsResponse, PagerDutyServiceMetricsResponse, PagerDutyUser } from '@pagerduty/backstage-plugin-common';
+import { PagerDutyEntityMappingResponse, PagerDutyServiceResponse, PagerDutyIncidentsResponse, PagerDutyChangeEventsResponse, PagerDutyServiceStandardsResponse, PagerDutyServiceMetricsResponse, PagerDutyUser } from '@pagerduty/backstage-plugin-common';
 
 /** @public */
 declare const isPluginApplicableToEntity$1: (entity: Entity) => boolean;
@@ -63,10 +63,15 @@ type PagerDutyTriggerAlarmRequest = {
 /** @public */
 interface PagerDutyApi {
     /**
-     * Fetches all services for service import purposes.
+     * Fetches all entity mappings.
      *
      */
-    getAllServices(): Promise<PagerDutyServicesResponse>;
+    getEntityMappings(): Promise<PagerDutyEntityMappingResponse>;
+    /**
+     * Stores the service mapping in the database.
+     *
+     */
+    storeServiceMapping(serviceId: string, entityId: string): Promise<Response>;
     /**
      * Fetches the service for the provided pager duty Entity.
      *
@@ -133,7 +138,8 @@ declare class PagerDutyClient implements PagerDutyApi {
     static fromConfig(configApi: ConfigApi, dependencies: PagerDutyClientApiDependencies): PagerDutyClient;
     constructor(config: PagerDutyClientApiConfig);
     getServiceByPagerDutyEntity(pagerDutyEntity: PagerDutyEntity): Promise<PagerDutyServiceResponse>;
-    getAllServices(): Promise<PagerDutyServicesResponse>;
+    getEntityMappings(): Promise<PagerDutyEntityMappingResponse>;
+    storeServiceMapping(serviceId: string, backstageEntityId: string): Promise<Response>;
     getServiceByEntity(entity: Entity): Promise<PagerDutyServiceResponse>;
     getServiceById(serviceId: string): Promise<PagerDutyServiceResponse>;
     getIncidentsByServiceId(serviceId: string): Promise<PagerDutyIncidentsResponse>;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-export { E as EntityPagerDutyCard, c as EntityPagerDutySmallCard, H as HomePagePagerDutyCard, f as PagerDutyCard, e as PagerDutyClient, b as PagerDutyPage, T as TriggerButton, U as UnauthorizedError, i as isPagerDutyAvailable, d as isPagerDutySmallCardAvailable, i as isPluginApplicableToEntity, p as pagerDutyApiRef, a as pagerDutyPlugin, a as plugin } from './esm/index-df18b73c.esm.js';
+export { E as EntityPagerDutyCard, c as EntityPagerDutySmallCard, H as HomePagePagerDutyCard, f as PagerDutyCard, e as PagerDutyClient, b as PagerDutyPage, T as TriggerButton, U as UnauthorizedError, i as isPagerDutyAvailable, d as isPagerDutySmallCardAvailable, i as isPluginApplicableToEntity, p as pagerDutyApiRef, a as pagerDutyPlugin, a as plugin } from './esm/index-4c05ac30.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import '@backstage/plugin-home-react';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagerduty/backstage-plugin",
   "description": "A Backstage plugin that integrates towards PagerDuty",
-  "version": "0.12.1-next.8",
+  "version": "0.12.1-next.81",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -41,16 +41,23 @@
     "@backstage/plugin-catalog-react": "^1.9.1",
     "@backstage/plugin-home-react": "^0.1.5",
     "@backstage/theme": "^0.5.2",
+    "@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-next.8",
+    "@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",
     "validate-color": "^2.2.4"
   },
   "peerDependencies": {
-    "@pagerduty/backstage-plugin-common": "^0.1.2",
     "react": "^18.0.0 || ^20.0.0",
     "react-dom": "^18.0.0 || ^20.0.0",
     "react-router-dom": "^6.3.0"
@@ -62,7 +69,6 @@
     "@backstage/test-utils": "^1.5.1",
     "@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",

package/dist/esm/index-deaaadcb.esm.js

@@ -1,171 +0,0 @@
-import React from 'react';
-import { Typography, FormControl, InputLabel, Select, MenuItem, Button, Grid } from '@material-ui/core';
-import { Table, Page, Header, Content } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
-import { p as pagerDutyApiRef } from './index-df18b73c.esm.js';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { useAsync } from 'react-use';
-import '@backstage/errors';
-import '@backstage/plugin-home-react';
-import 'luxon';
-import '@material-ui/icons/OpenInBrowser';
-import '../assets/emptystate.svg';
-import 'react-use/lib/useAsyncFn';
-import '@material-ui/lab';
-import '../assets/forbiddenstate.svg';
-import '@material-ui/core/Avatar';
-import '@material-ui/icons/Notifications';
-import 'react-use/lib/useAsync';
-import '@material-ui/icons/Link';
-import '../assets/PD-Green.svg';
-import '../assets/PD-White.svg';
-import 'validate-color';
-import '@material-ui/icons/Info';
-import '@material-ui/icons/CheckCircle';
-import '@material-ui/icons/RadioButtonUnchecked';
-import '@material-ui/core/styles';
-import '@material-ui/lab/Alert/Alert';
-import '@backstage/catalog-model';
-import '@material-ui/icons/AddAlert';
-import '@material-ui/icons/ExpandMore';
-
-function getMappingStatus(serviceName) {
-  if (serviceName === "Ads") {
-    return "In Sync" /* InSync */;
-  }
-  return "Out Of Sync" /* OutOfSync */;
-}
-function getColorFromStatus(status) {
-  switch (status) {
-    case "In Sync" /* InSync */:
-      return "green";
-    case "Out Of Sync" /* OutOfSync */:
-      return "red";
-    default:
-      return "orange";
-  }
-}
-const DenseTable = ({
-  BackstageServices,
-  PagerDutyServices
-}) => {
-  const columns = [
-    { title: "PagerDuty Service", field: "name" },
-    { title: "Team", field: "team" },
-    { title: "Escalation Policy", field: "escalationPolicy" },
-    { title: "Mapping", field: "mapping" },
-    { title: "Status", field: "mappingStatus", width: "10%" },
-    { title: "Actions", field: "actions" }
-  ];
-  const data = PagerDutyServices.map((service) => {
-    var _a, _b;
-    const status = getMappingStatus(service.name);
-    return {
-      name: service.name,
-      team: (_b = (_a = service.teams) == null ? void 0 : _a.at(0)) == null ? void 0 : _b.summary,
-      escalationPolicy: service.escalation_policy.name,
-      // status of mapping
-      mappingStatus: /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          variant: "body2",
-          style: {
-            color: getColorFromStatus(status)
-          }
-        },
-        status
-      ),
-      mapping: (
-        // dropdown menu with static options. If service.mapping is defined select that option
-        /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(InputLabel, { id: "demo-simple-select-helper-label" }, "Service"), /* @__PURE__ */ React.createElement(
-          Select,
-          {
-            labelId: "demo-simple-select-helper-label",
-            id: "demo-simple-select-helper"
-          },
-          /* @__PURE__ */ React.createElement(MenuItem, { value: "" }, /* @__PURE__ */ React.createElement("em", null, "None")),
-          BackstageServices.map((backstageService) => {
-            return /* @__PURE__ */ React.createElement(
-              MenuItem,
-              {
-                key: backstageService.name,
-                value: backstageService.name
-              },
-              backstageService.name
-            );
-          })
-        ))
-      ),
-      actions: /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", href: service.html_url }, "Open in PagerDuty")
-    };
-  });
-  return /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      title: "PagerDuty Service Import",
-      subtitle: "Use this page to import services from PagerDuty and map them to existing Backstage services ",
-      options: {
-        search: true,
-        paging: true,
-        pageSize: 10,
-        pageSizeOptions: [10, 25, 50],
-        sorting: true,
-        emptyRowsWhenPaging: false,
-        showFirstLastPageButtons: true,
-        columnResizable: true,
-        columnsButton: true,
-        rowStyle: {
-          height: "10px"
-        },
-        padding: "dense"
-      },
-      columns,
-      data
-    }
-  );
-};
-const ServiceMappingComponent = () => {
-  const backstageServices = [];
-  const pagerDutyApi = useApi(pagerDutyApiRef);
-  const catalogApi = useApi(catalogApiRef);
-  const {
-    value: pagerDutyServices,
-    loading,
-    error
-  } = useAsync(async () => {
-    catalogApi.getEntities({ filter: { kind: "Component" } }).then((response) => {
-      response.items.forEach((entity) => {
-        var _a, _b, _c, _d, _e, _f;
-        backstageServices.push({
-          name: (_a = entity.metadata) == null ? void 0 : _a.name,
-          id: (_c = (_b = entity.metadata) == null ? void 0 : _b.uid) != null ? _c : "",
-          system: JSON.stringify((_d = entity.spec) == null ? void 0 : _d.system) || "",
-          owner: JSON.stringify((_e = entity.spec) == null ? void 0 : _e.owner) || "",
-          lifecycle: JSON.stringify((_f = entity.spec) == null ? void 0 : _f.lifecycle) || ""
-        });
-      });
-    });
-    const { services: foundServices } = await pagerDutyApi.getAllServices();
-    return foundServices;
-  }, []);
-  if (error) {
-    return /* @__PURE__ */ React.createElement("p", null, "Error: ", error.message);
-  }
-  if (loading) {
-    return /* @__PURE__ */ React.createElement("p", null, "Loading...");
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, backstageServices.length > 0 && /* @__PURE__ */ React.createElement(
-    DenseTable,
-    {
-      BackstageServices: backstageServices,
-      PagerDutyServices: pagerDutyServices != null ? pagerDutyServices : []
-    }
-  ));
-};
-
-const PagerDutyPage = () => {
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { title: "PagerDuty", subtitle: "Advanced configurations" }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(ServiceMappingComponent, null)))));
-};
-
-export { PagerDutyPage };
-//# sourceMappingURL=index-deaaadcb.esm.js.map

package/dist/esm/index-deaaadcb.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-deaaadcb.esm.js","sources":["../../src/components/PagerDutyPage/ServiceMappingComponent.tsx","../../src/components/PagerDutyPage/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Table, TableColumn } from \"@backstage/core-components\";\nimport {\n  Button,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Typography,\n} from \"@material-ui/core\";\nimport { PagerDutyService } from \"@pagerduty/backstage-plugin-common\";\nimport { useApi } from \"@backstage/core-plugin-api\";\nimport { pagerDutyApiRef } from \"../../api\";\nimport { catalogApiRef } from \"@backstage/plugin-catalog-react\";\nimport { useAsync } from \"react-use\";\nimport { Entity } from \"@backstage/catalog-model\";\n\nenum MappingStatus {\n  InSync = \"In Sync\",\n  OutOfSync = \"Out Of Sync\",\n  NotMapped = \"Not Mapped\",\n}\n\ntype Service = {\n  name: string; // \"Ads\"\n  id: string; // \"QWe1j283n12j132\"\n  system: string; // \"Production\"\n  owner: string; // \"Mapped\"\n  lifecycle: string; // \"Ads\"\n};\n\ntype DenseTableProps = {\n  BackstageServices: Service[];\n  PagerDutyServices: PagerDutyService[];\n};\n\nfunction getMappingStatus(serviceName: string): MappingStatus {\n  if (serviceName === \"Ads\") {\n    return MappingStatus.InSync;\n  }\n\n  return MappingStatus.OutOfSync;\n}\n\nfunction getColorFromStatus(status: MappingStatus) {\n  switch (status) {\n    case MappingStatus.InSync:\n      return \"green\";\n    case MappingStatus.OutOfSync:\n      return \"red\";\n    default:\n      return \"orange\";\n  }\n}\n\nexport const DenseTable = ({\n  BackstageServices,\n  PagerDutyServices,\n}: DenseTableProps) => {\n  //   const classes = useStyles();\n\n  const columns: TableColumn[] = [\n    { title: \"PagerDuty Service\", field: \"name\" },\n    { title: \"Team\", field: \"team\" },\n    { title: \"Escalation Policy\", field: \"escalationPolicy\" },\n    { title: \"Mapping\", field: \"mapping\" },\n    { title: \"Status\", field: \"mappingStatus\", width: \"10%\" },\n    { title: \"Actions\", field: \"actions\" },\n  ];\n\n  const data = PagerDutyServices.map((service) => {\n    const status = getMappingStatus(service.name);\n\n    return {\n      name: service.name,\n      team: service.teams?.at(0)?.summary,\n      escalationPolicy: service.escalation_policy.name,\n      // status of mapping\n      mappingStatus: (\n        <Typography\n          variant=\"body2\"\n          style={{\n            color: getColorFromStatus(status),\n          }}\n        >\n          {status}\n        </Typography>\n      ),\n      mapping: (\n        // dropdown menu with static options. If service.mapping is defined select that option\n        <FormControl>\n          <InputLabel id=\"demo-simple-select-helper-label\">Service</InputLabel>\n          <Select\n            labelId=\"demo-simple-select-helper-label\"\n            id=\"demo-simple-select-helper\"\n            //   onChange={handleChange}\n          >\n            <MenuItem value=\"\">\n              <em>None</em>\n            </MenuItem>\n            {BackstageServices.map((backstageService) => {\n              return (\n                <MenuItem\n                  key={backstageService.name}\n                  value={backstageService.name}\n                >\n                  {backstageService.name}\n                </MenuItem>\n              );\n            })}\n          </Select>\n        </FormControl>\n        // <select title=\"Mapping\" value={service.mapping}>\n        //   <option aria-label=\"None\" value=\"\" />\n        //   <option value=\"Ads\">Ads</option>\n        //   <option value=\"Cache\">Cache</option>\n        //   <option value=\"Catalog\">Catalog</option>\n        //   <option value=\"Checkout\">Checkout</option>\n        // </select>\n      ),\n      actions: (\n        <Button variant=\"contained\" color=\"primary\" href={service.html_url}>\n          Open in PagerDuty\n        </Button>\n      ),\n    };\n  });\n\n  return (\n    <Table\n      title=\"PagerDuty Service Import\"\n      subtitle=\"Use this page to import services from PagerDuty and map them to existing Backstage services \"\n      options={{\n        search: true,\n        paging: true,\n        pageSize: 10,\n        pageSizeOptions: [10, 25, 50],\n        sorting: true,\n        emptyRowsWhenPaging: false,\n        showFirstLastPageButtons: true,\n        columnResizable: true,\n        columnsButton: true,\n        rowStyle: {\n          height: \"10px\",\n        },\n        padding: \"dense\",\n      }}\n      columns={columns}\n      data={data}\n    />\n  );\n};\n\nexport const ServiceMappingComponent = () => {\n  const backstageServices: Service[] = [];\n  // const [catalogEntities, setCatalogEntities] = useState<Entity[]>([]);\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  // useEffect(() => {\n  //   async function fetchServices() {\n  //     const { services: foundServices } = await pagerDutyApi.getAllServices();\n\n  //     setPagerDutyServices(foundServices);\n  //   }\n\n  //   async function fetchEntities() {\n  //     const response : GetEntitiesResponse = await catalogApi.getEntities();\n\n  //     setCatalogEntities(response.items);\n  //   }\n\n  //   await fetchServices();\n  //   fetchEntities();\n  // }, [catalogApi, pagerDutyApi]);\n\n  const {\n    value: pagerDutyServices,\n    loading,\n    error,\n  } = useAsync(async () => {\n    catalogApi\n      .getEntities({ filter: { kind: \"Component\" } })\n      .then((response) => {\n        // setCatalogEntities(response.items);\n\n        response.items.forEach((entity: Entity) => {\n          backstageServices.push({\n            name: entity.metadata?.name,\n            id: entity.metadata?.uid ?? \"\",\n            system: JSON.stringify(entity.spec?.system) || \"\",\n            owner: JSON.stringify(entity.spec?.owner) || \"\",\n            lifecycle: JSON.stringify(entity.spec?.lifecycle) || \"\",\n          });\n        });\n      });\n\n      const { services: foundServices } = await pagerDutyApi.getAllServices();\n      return foundServices;\n  }, []);\n\n  if (error) {\n    return <p>Error: {error.message}</p>;\n  }\n\n  if (loading) {\n    return <p>Loading...</p>;\n  }\n\n  return (\n    <>\n      {backstageServices.length > 0 && (\n        <DenseTable\n          BackstageServices={backstageServices}\n          PagerDutyServices={pagerDutyServices ?? []}\n        />\n      )}\n    </>\n  );\n};\n","import React from \"react\";\nimport { Grid } from \"@material-ui/core\";\nimport { Header, Page, Content } from \"@backstage/core-components\";\nimport { ServiceMappingComponent } from \"./ServiceMappingComponent\";\n\n/** @public */\nexport const PagerDutyPage = () => {\n  // const [toggleImport, setToggleImport] = useState(false);\n  // const [toggleSave, setToggleSave] = useState(false);\n\n  // const handleImport = () => {\n  //   setToggleImport(!toggleImport);\n  // };\n\n  // const handleSave = () => {\n  //   setToggleSave(!toggleSave);\n  // }\n\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"PagerDuty\" subtitle=\"Advanced configurations\" />\n      <Content>\n        {/* <Grid container spacing={3} direction=\"column\">\n          <Grid item alignContent=\"flex-end\">\n            <Button variant=\"contained\" color=\"primary\" onClick={() => {handleImport()}}>\n              Import\n            </Button>\n            <Button variant=\"outlined\" color=\"primary\" onClick={() => {handleSave()}}>\n              Save\n            </Button>\n          </Grid>\n        </Grid> */}\n        <Grid container spacing={3} direction=\"column\">\n          <Grid item>\n            <ServiceMappingComponent />\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}