@pagerduty/backstage-plugin 0.13.0-next.24 → 0.13.0-next.25

package/dist/components/PagerDutyPage/MappingTable.esm.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const MappingTable = ({ mappings, catalogEntities }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, "MappingTable"), mappings.forEach((mapping) => {
+    /* @__PURE__ */ React.createElement("p", null, mapping.serviceId);
+  }), catalogEntities.forEach((entity) => {
+    /* @__PURE__ */ React.createElement("p", null, entity.id);
+  }));
+};
+
+export { MappingTable };
+//# sourceMappingURL=MappingTable.esm.js.map

package/dist/components/PagerDutyPage/MappingTable.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingTable.esm.js","sources":["../../../src/components/PagerDutyPage/MappingTable.tsx"],"sourcesContent":["import React from 'react';\nimport { PagerDutyEntityMapping } from \"@pagerduty/backstage-plugin-common\";\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 MappingTableProps = {\n  mappings: PagerDutyEntityMapping[];\n  catalogEntities: Service[];\n};\n\nexport const MappingTable = ({mappings, catalogEntities} : MappingTableProps) => {\n  return (\n    <>\n      <div>MappingTable</div>\n\n      {mappings.forEach((mapping) => {\n        <p>{mapping.serviceId}</p>;\n      })}\n      {catalogEntities.forEach((entity) => {\n        <p>{entity.id}</p>;\n      })}\n    </>\n  );\n}"],"names":[],"mappings":";;AAgBO,MAAM,YAAe,GAAA,CAAC,EAAC,QAAA,EAAU,iBAAyC,KAAA;AAC/E,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KAAI,EAAA,IAAA,EAAA,cAAY,GAEhB,QAAS,CAAA,OAAA,CAAQ,CAAC,OAAY,KAAA;AAC7B,oBAAC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAG,QAAQ,SAAU,CAAA,CAAA;AAAA,GACvB,CAAA,EACA,eAAgB,CAAA,OAAA,CAAQ,CAAC,MAAW,KAAA;AACnC,oBAAC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAG,OAAO,EAAG,CAAA,CAAA;AAAA,GACf,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js

@@ -1,51 +1,23 @@
-import React, { useState, useMemo } from 'react';
-import { Typography, Box, DialogTitle, DialogContent, DialogActions, Tooltip, IconButton } from '@material-ui/core';
-import EditIcon from '@mui/icons-material/Edit';
+import React, { useState, useEffect } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import { pagerDutyApiRef } from '../../api/client.esm.js';
-import { QueryClient, QueryClientProvider, useQueries, useMutation } from '@tanstack/react-query';
-import { useMaterialReactTable, MRT_EditActionButtons, MaterialReactTable } from 'material-react-table';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { MappingTable } from './MappingTable.esm.js';
 
-function getColorFromStatus(status) {
-  switch (status) {
-    case "InSync":
-      return "green";
-    case "OutOfSync":
-      return "red";
-    case "NotMapped":
-      return "orange";
-    default:
-      return "gray";
-  }
-}
-function makeReadable(status) {
-  switch (status) {
-    case "InSync":
-      return "In Sync";
-    case "OutOfSync":
-      return "Out of Sync";
-    case "NotMapped":
-      return "Not Mapped";
-    default:
-      return "Refresh to Update";
-  }
-}
 const ServiceMappingComponent = () => {
   const [entityMappings, setEntityMappings] = useState([]);
   const [catalogEntities, setCatalogEntities] = useState([]);
   const pagerDutyApi = useApi(pagerDutyApiRef);
   const catalogApi = useApi(catalogApiRef);
-  function fetchMappings() {
-    pagerDutyApi.getEntityMappings().then((result) => {
-      setEntityMappings(result.mappings);
-      return result.mappings;
-    });
-    return [];
-  }
-  function fetchCatalogEntities() {
-    if (catalogEntities.length === 0) {
+  useEffect(() => {
+    function fetchMappings() {
+      pagerDutyApi.getEntityMappings().then((result) => {
+        setEntityMappings(result.mappings);
+        return result.mappings;
+      });
+      return [];
+    }
+    function fetchCatalogEntities() {
       catalogApi.getEntities({
         filter: { kind: "Component" }
       }).then((result) => {
@@ -64,193 +36,13 @@ const ServiceMappingComponent = () => {
         return entities;
       });
     }
-    return catalogEntities;
-  }
-  function getCatalogEntityOptions() {
-    const options = [];
-    options.push({ value: "", label: "None" });
-    catalogEntities.forEach((entity) => {
-      const foundEntity = entityMappings.find(
-        (item) => item.entityRef === entity.id
-      );
-      if (!foundEntity) {
-        options.push({
-          value: entity.id,
-          label: entity.name
-        });
-      }
-    });
-    return options;
-  }
-  const DenseTable = () => {
-    const [validationErrors, setValidationErrors] = useState({});
-    const [getMappingsQuery, getCatalogEntitiesQuery] = useQueries({
-      queries: [
-        {
-          queryKey: ["mappings"],
-          queryFn: () => fetchMappings(),
-          refetchOnWindowFocus: false
-        },
-        {
-          queryKey: ["entities"],
-          queryFn: () => fetchCatalogEntities(),
-          refetchOnWindowFocus: false
-        }
-      ]
-    });
-    const columns = useMemo(
-      () => [
-        {
-          accessorKey: "serviceId",
-          header: "Service ID",
-          visibleInShowHideMenu: false,
-          enableEditing: false,
-          Edit: () => null,
-          Cell: ({ cell }) => /* @__PURE__ */ React.createElement(Typography, { variant: "body1", style: { fontWeight: 600 } }, cell.getValue())
-        },
-        {
-          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,
-          Edit: () => null
-        },
-        {
-          accessorKey: "status",
-          header: "Status",
-          enableEditing: false,
-          Edit: () => null,
-          Cell: ({ cell }) => /* @__PURE__ */ React.createElement(
-            Box,
-            {
-              component: "span",
-              bgcolor: getColorFromStatus(cell.getValue()),
-              borderRadius: "0.25rem",
-              color: "white",
-              p: "0.25rem"
-            },
-            makeReadable(cell.getValue())
-          )
-        },
-        {
-          accessorKey: "serviceUrl",
-          header: "Service URL",
-          visibleInShowHideMenu: false,
-          enableEditing: false,
-          Edit: () => null
-        }
-      ],
-      [validationErrors]
-    );
-    function useUpdateMapping() {
-      return useMutation({
-        mutationFn: async (mapping) => {
-          return await pagerDutyApi.storeServiceMapping(
-            mapping.serviceId,
-            mapping.entityRef
-          );
-        }
-        // client side optimistic update
-        // onMutate: (newMappingInfo: PagerDutyEntityMapping) => {
-        //   queryClient.setQueryData(["updateMappings"], (prevMappings: any) =>
-        //     prevMappings?.map((prevMapping: PagerDutyEntityMapping) => {
-        //       if (prevMapping.serviceId === newMappingInfo.serviceId) {
-        //         newMappingInfo.entityName =
-        //           fetchedCatalogEntities.find(
-        //             (entity) => entity.id === newMappingInfo.entityRef
-        //           )?.name || "";
-        //         return newMappingInfo;
-        //       }
-        //       return prevMapping;
-        //     })
-        //   );
-        // },
-      });
-    }
-    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 openInBrowser = (url) => {
-      window.open(url, "_blank", "noreferrer");
-    };
-    const dataTable = useMaterialReactTable({
-      columns,
-      data: entityMappings,
-      editDisplayMode: "modal",
-      // default ('row', 'cell', 'table', and 'custom' are also available)
-      enableEditing: true,
-      positionActionsColumn: "last",
-      enableStickyHeader: true,
-      enableFilters: true,
-      getRowId: (row) => row.serviceId,
-      muiToolbarAlertBannerProps: getMappingsQuery.isLoadingError ? {
-        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))), /* @__PURE__ */ React.createElement(Tooltip, { title: "Open in PagerDuty" }, /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          onClick: () => openInBrowser(row.getValue("serviceUrl"))
-        },
-        /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
-      ))),
-      state: {
-        isLoading: getMappingsQuery.isLoading || getCatalogEntitiesQuery.isLoading,
-        isSaving: isUpdatingMapping,
-        showAlertBanner: getMappingsQuery.isLoadingError || getCatalogEntitiesQuery.isLoadingError,
-        showProgressBars: getMappingsQuery.isFetching || getCatalogEntitiesQuery.isFetching,
-        columnVisibility: {
-          serviceId: false,
-          entityRef: false,
-          serviceUrl: false
-        }
-      }
-    });
-    return /* @__PURE__ */ React.createElement(MaterialReactTable, { table: dataTable });
-  };
-  const queryClient = new QueryClient();
-  return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(DenseTable, null));
+    fetchMappings();
+    fetchCatalogEntities();
+  });
+  return (
+    // <QueryClientProvider client={queryClient}>
+    /* @__PURE__ */ React.createElement(MappingTable, { mappings: entityMappings, catalogEntities })
+  );
 };
 
 export { ServiceMappingComponent };

package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceMappingComponent.esm.js","sources":["../../../src/components/PagerDutyPage/ServiceMappingComponent.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport {\n  Box,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  IconButton,\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  useQueries,\n  // useQuery,\n} from \"@tanstack/react-query\";\nimport {\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\";\nimport OpenInBrowser from \"@material-ui/icons/OpenInBrowser\";\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\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\nfunction makeReadable(status?: string) {\n  switch (status) {\n    case \"InSync\":\n      return \"In Sync\";\n    case \"OutOfSync\":\n      return \"Out of Sync\";\n    case \"NotMapped\":\n      return \"Not Mapped\";\n    default:\n      return \"Refresh to Update\";\n  }\n}\n\ntype CatalogEntityOptions = {\n  value: string;\n  label: string;\n};\n\nexport const ServiceMappingComponent = () => {\n  const [entityMappings, setEntityMappings] = useState<\n    PagerDutyEntityMapping[]\n  >([]);\n  const [catalogEntities, setCatalogEntities] = useState<Service[]>([]);\n  // const [entityOptions, setEntityOptions] = useState<CatalogEntityOptions[]>(\n  //   []\n  // );\n\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  // function fetchCatalogEntities() {\n  //   catalogApi\n  //     .getEntities({\n  //       filter: { kind: \"Component\" },\n  //     })\n  //     .then((result) => {\n  //       const entities: Service[] = [];\n  //       result.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\n  //       setCatalogEntities(entities);\n  //     });\n  // }\n\n  function fetchMappings(): PagerDutyEntityMapping[] {\n    pagerDutyApi.getEntityMappings().then((result) => {\n      setEntityMappings(result.mappings);\n\n      return(result.mappings);\n    });\n\n    return [];\n  }\n\n  function fetchCatalogEntities() {\n    if (catalogEntities.length === 0) {\n      catalogApi\n        .getEntities({\n          filter: { kind: \"Component\" },\n        })\n        .then((result) => {\n          const entities: Service[] = [];\n          result.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\n          setCatalogEntities(entities);\n\n          return entities;\n        });\n    }\n\n    return catalogEntities;\n  }\n\n  function getCatalogEntityOptions(): CatalogEntityOptions[] {\n    const options: CatalogEntityOptions[] = [];\n    // if (entityOptions.length === 0) {\n    // initialize with empty object\n    options.push({ value: \"\", label: \"None\" });\n    // }\n\n    catalogEntities.forEach((entity) => {\n      // find entity with entity.id in entityMappings array\n      const foundEntity = entityMappings.find(\n        (item) => item.entityRef === entity.id\n      );\n\n      if (!foundEntity) {\n        options.push({\n          value: entity.id,\n          label: entity.name,\n        });\n      }\n    });\n\n    return options;\n  }\n\n  const DenseTable = () => {\n    const [validationErrors, setValidationErrors] = useState<\n      Record<string, string | undefined>\n    >({});\n\n    // call READ hook\n    // const {\n    //   isError: isLoadingMappingsError,\n    //   isFetching: isFetchingMappings,\n    //   isLoading: isLoadingMappings,\n    // } = useGetMappings();\n\n    // // call READ hook\n    // const {\n    //   // data: fetchedCatalogEntities = [],\n    //   isError: isLoadingCatalogEntitiesError,\n    //   isFetching: isFetchingCatalogEntities,\n    //   isLoading: isLoadingCatalogEntities,\n    // } = useGetCatalogEntities();\n\n    const [getMappingsQuery, getCatalogEntitiesQuery] = useQueries({\n      queries: [\n        {\n          queryKey: [\"mappings\"],\n          queryFn: () => fetchMappings(),\n          refetchOnWindowFocus: false,\n        },\n        {\n          queryKey: [\"entities\"],\n          queryFn: () => fetchCatalogEntities(),\n          refetchOnWindowFocus: false,\n        },\n      ],\n    });\n\n    // function useGetMappings() {\n    //   return useQuery<PagerDutyEntityMapping[]>({\n    //     queryKey: [\"mappings\"],\n    //     queryFn: async () => fetchMappings(),\n    //     refetchOnWindowFocus: false,\n    //   });\n    // }\n\n    // READ hook (get catalog entities from api)\n    // function useGetCatalogEntities() {\n    //   return useQuery<Service[]>({\n    //     queryKey: [\"entities\"],\n    //     queryFn: async () => fetchCatalogEntities(),\n    //     refetchOnMount: false,\n    //     refetchOnWindowFocus: false,\n    //     refetchOnReconnect: false,\n    //   });\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          Edit: () => null,\n          Cell: ({ cell }) => (\n            <Typography variant=\"body1\" style={{ fontWeight: 600 }}>\n              {cell.getValue<string>()}\n            </Typography>\n          ),\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          Edit: () => null,\n        },\n        {\n          accessorKey: \"status\",\n          header: \"Status\",\n          enableEditing: false,\n          Edit: () => null,\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              {makeReadable(cell.getValue<string>())}\n            </Box>\n          ),\n        },\n        {\n          accessorKey: \"serviceUrl\",\n          header: \"Service URL\",\n          visibleInShowHideMenu: false,\n          enableEditing: false,\n          Edit: () => null,\n        },\n      ],\n      [validationErrors]\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 =\n        //           fetchedCatalogEntities.find(\n        //             (entity) => entity.id === newMappingInfo.entityRef\n        //           )?.name || \"\";\n\n        //         return newMappingInfo;\n        //       }\n        //       return prevMapping;\n        //     })\n        //   );\n        // },\n      });\n    }\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 =\n          catalogEntities.find((entity) => entity.id === values.entityRef)\n            ?.name || \"\";\n        values.status = \"RefreshToUpdate\";\n        await updateMapping(values);\n        table.setEditingRow(null); // exit editing mode\n      };\n\n    const openInBrowser = (url: string) => {\n      window.open(url, \"_blank\", \"noreferrer\");\n    };\n\n    const dataTable = useMaterialReactTable({\n      columns,\n      data: entityMappings,\n      editDisplayMode: \"modal\", // default ('row', 'cell', 'table', and 'custom' are also available)\n      enableEditing: true,\n      positionActionsColumn: \"last\",\n      enableStickyHeader: true,\n      enableFilters: true,\n      getRowId: (row) => row.serviceId,\n      muiToolbarAlertBannerProps: getMappingsQuery.isLoadingError\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>{internalEditComponents} </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          <Tooltip title=\"Open in PagerDuty\">\n            <IconButton\n              onClick={() => openInBrowser(row.getValue(\"serviceUrl\"))}\n            >\n              <OpenInBrowser />\n            </IconButton>\n          </Tooltip>\n        </Box>\n      ),\n      state: {\n        isLoading: getMappingsQuery.isLoading || getCatalogEntitiesQuery.isLoading,\n        isSaving: isUpdatingMapping,\n        showAlertBanner:\n          getMappingsQuery.isLoadingError || getCatalogEntitiesQuery.isLoadingError,\n        showProgressBars: getMappingsQuery.isFetching || getCatalogEntitiesQuery.isFetching,\n        columnVisibility: {\n          serviceId: false,\n          entityRef: false,\n          serviceUrl: false,\n        },\n      },\n    });\n\n    // function getCatalogEntityOptions(): CatalogEntityOptions[] {\n    //   const options: CatalogEntityOptions[] = [];\n    //   // if (entityOptions.length === 0) {\n    //   // initialize with empty object\n    //   options.push({ value: \"\", label: \"None\" });\n    //   // }\n\n    //   catalogEntities.forEach((entity) => {\n    //     // find entity with entity.id in entityMappings array\n    //     const foundEntity = fetchedMappings.find(\n    //       (item) => item.entityRef === entity.id\n    //     );\n\n    //     if (!foundEntity) {\n    //       options.push({\n    //         value: entity.id,\n    //         label: entity.name,\n    //       });\n    //     }\n    //   });\n\n    //   // setEntityOptions(options);\n\n    //   return options;\n    // }\n\n    return <MaterialReactTable table={dataTable} />;\n  };\n\n  const queryClient = new QueryClient();\n  // fetchCatalogEntities();\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <DenseTable />\n    </QueryClientProvider>\n  );\n};\n"],"names":["OpenInBrowser"],"mappings":"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"}
+{"version":3,"file":"ServiceMappingComponent.esm.js","sources":["../../../src/components/PagerDutyPage/ServiceMappingComponent.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { PagerDutyEntityMapping } from \"@pagerduty/backstage-plugin-common\";\nimport { useApi } from \"@backstage/core-plugin-api\";\nimport { pagerDutyApiRef } from \"../../api\";\nimport { catalogApiRef } from \"@backstage/plugin-catalog-react\";\nimport { MappingTable } from \"./MappingTable\";\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// function 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\n// function makeReadable(status?: string) {\n//   switch (status) {\n//     case \"InSync\":\n//       return \"In Sync\";\n//     case \"OutOfSync\":\n//       return \"Out of Sync\";\n//     case \"NotMapped\":\n//       return \"Not Mapped\";\n//     default:\n//       return \"Refresh to Update\";\n//   }\n// }\n\n// type CatalogEntityOptions = {\n//   value: string;\n//   label: string;\n// };\n\nexport const ServiceMappingComponent = () => {\n  const [entityMappings, setEntityMappings] = useState<\n    PagerDutyEntityMapping[]\n  >([]);\n  const [catalogEntities, setCatalogEntities] = useState<Service[]>([]);\n  // const [entityOptions, setEntityOptions] = useState<CatalogEntityOptions[]>(\n  //   []\n  // );\n\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  // call fetchMappings() and fetchCatalogEntities() on useEffect hook\n  useEffect(() => {\n    function fetchMappings(): PagerDutyEntityMapping[] {\n      pagerDutyApi.getEntityMappings().then((result) => {\n        setEntityMappings(result.mappings);\n\n        return result.mappings;\n      });\n\n      return [];\n    }\n\n    function fetchCatalogEntities() {\n        catalogApi\n          .getEntities({\n            filter: { kind: \"Component\" },\n          })\n          .then((result) => {\n            const entities: Service[] = [];\n            result.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\n            setCatalogEntities(entities);\n\n            return entities;\n          });\n    }\n\n    fetchMappings();\n    fetchCatalogEntities();\n  });\n\n\n  // function fetchCatalogEntities() {\n  //   catalogApi\n  //     .getEntities({\n  //       filter: { kind: \"Component\" },\n  //     })\n  //     .then((result) => {\n  //       const entities: Service[] = [];\n  //       result.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\n  //       setCatalogEntities(entities);\n  //     });\n  // }\n\n  \n\n  // function getCatalogEntityOptions(): CatalogEntityOptions[] {\n  //   const options: CatalogEntityOptions[] = [];\n  //   // if (entityOptions.length === 0) {\n  //   // initialize with empty object\n  //   options.push({ value: \"\", label: \"None\" });\n  //   // }\n\n  //   catalogEntities.forEach((entity) => {\n  //     // find entity with entity.id in entityMappings array\n  //     const foundEntity = entityMappings.find(\n  //       (item) => item.entityRef === entity.id\n  //     );\n\n  //     if (!foundEntity) {\n  //       options.push({\n  //         value: entity.id,\n  //         label: entity.name,\n  //       });\n  //     }\n  //   });\n\n  //   return options;\n  // }\n\n  // const DenseTable = () => {\n  //   const [validationErrors, setValidationErrors] = useState<\n  //     Record<string, string | undefined>\n  //   >({});\n\n  //   // call READ hook\n  //   // const {\n  //   //   isError: isLoadingMappingsError,\n  //   //   isFetching: isFetchingMappings,\n  //   //   isLoading: isLoadingMappings,\n  //   // } = useGetMappings();\n\n  //   // // call READ hook\n  //   // const {\n  //   //   // data: fetchedCatalogEntities = [],\n  //   //   isError: isLoadingCatalogEntitiesError,\n  //   //   isFetching: isFetchingCatalogEntities,\n  //   //   isLoading: isLoadingCatalogEntities,\n  //   // } = useGetCatalogEntities();\n\n  //   const [getMappingsQuery, getCatalogEntitiesQuery] = useQueries({\n  //     queries: [\n  //       {\n  //         queryKey: [\"mappings\"],\n  //         queryFn: () => fetchMappings(),\n  //         refetchOnWindowFocus: false,\n  //       },\n  //       {\n  //         queryKey: [\"entities\"],\n  //         queryFn: () => fetchCatalogEntities(),\n  //         refetchOnWindowFocus: false,\n  //       },\n  //     ],\n  //   });\n\n  //   // function useGetMappings() {\n  //   //   return useQuery<PagerDutyEntityMapping[]>({\n  //   //     queryKey: [\"mappings\"],\n  //   //     queryFn: async () => fetchMappings(),\n  //   //     refetchOnWindowFocus: false,\n  //   //   });\n  //   // }\n\n  //   // READ hook (get catalog entities from api)\n  //   // function useGetCatalogEntities() {\n  //   //   return useQuery<Service[]>({\n  //   //     queryKey: [\"entities\"],\n  //   //     queryFn: async () => fetchCatalogEntities(),\n  //   //     refetchOnMount: false,\n  //   //     refetchOnWindowFocus: false,\n  //   //     refetchOnReconnect: false,\n  //   //   });\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  //         Edit: () => null,\n  //         Cell: ({ cell }) => (\n  //           <Typography variant=\"body1\" style={{ fontWeight: 600 }}>\n  //             {cell.getValue<string>()}\n  //           </Typography>\n  //         ),\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  //         Edit: () => null,\n  //       },\n  //       {\n  //         accessorKey: \"status\",\n  //         header: \"Status\",\n  //         enableEditing: false,\n  //         Edit: () => null,\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  //             {makeReadable(cell.getValue<string>())}\n  //           </Box>\n  //         ),\n  //       },\n  //       {\n  //         accessorKey: \"serviceUrl\",\n  //         header: \"Service URL\",\n  //         visibleInShowHideMenu: false,\n  //         enableEditing: false,\n  //         Edit: () => null,\n  //       },\n  //     ],\n  //     [validationErrors]\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 =\n  //       //           fetchedCatalogEntities.find(\n  //       //             (entity) => entity.id === newMappingInfo.entityRef\n  //       //           )?.name || \"\";\n\n  //       //         return newMappingInfo;\n  //       //       }\n  //       //       return prevMapping;\n  //       //     })\n  //       //   );\n  //       // },\n  //     });\n  //   }\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 =\n  //         catalogEntities.find((entity) => entity.id === values.entityRef)\n  //           ?.name || \"\";\n  //       values.status = \"RefreshToUpdate\";\n  //       await updateMapping(values);\n  //       table.setEditingRow(null); // exit editing mode\n  //     };\n\n  //   const openInBrowser = (url: string) => {\n  //     window.open(url, \"_blank\", \"noreferrer\");\n  //   };\n\n  //   const dataTable = useMaterialReactTable({\n  //     columns,\n  //     data: entityMappings,\n  //     editDisplayMode: \"modal\", // default ('row', 'cell', 'table', and 'custom' are also available)\n  //     enableEditing: true,\n  //     positionActionsColumn: \"last\",\n  //     enableStickyHeader: true,\n  //     enableFilters: true,\n  //     getRowId: (row) => row.serviceId,\n  //     muiToolbarAlertBannerProps: getMappingsQuery.isLoadingError\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>{internalEditComponents} </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  //         <Tooltip title=\"Open in PagerDuty\">\n  //           <IconButton\n  //             onClick={() => openInBrowser(row.getValue(\"serviceUrl\"))}\n  //           >\n  //             <OpenInBrowser />\n  //           </IconButton>\n  //         </Tooltip>\n  //       </Box>\n  //     ),\n  //     state: {\n  //       isLoading: getMappingsQuery.isLoading || getCatalogEntitiesQuery.isLoading,\n  //       isSaving: isUpdatingMapping,\n  //       showAlertBanner:\n  //         getMappingsQuery.isLoadingError || getCatalogEntitiesQuery.isLoadingError,\n  //       showProgressBars: getMappingsQuery.isFetching || getCatalogEntitiesQuery.isFetching,\n  //       columnVisibility: {\n  //         serviceId: false,\n  //         entityRef: false,\n  //         serviceUrl: false,\n  //       },\n  //     },\n  //   });\n\n  //   // function getCatalogEntityOptions(): CatalogEntityOptions[] {\n  //   //   const options: CatalogEntityOptions[] = [];\n  //   //   // if (entityOptions.length === 0) {\n  //   //   // initialize with empty object\n  //   //   options.push({ value: \"\", label: \"None\" });\n  //   //   // }\n\n  //   //   catalogEntities.forEach((entity) => {\n  //   //     // find entity with entity.id in entityMappings array\n  //   //     const foundEntity = fetchedMappings.find(\n  //   //       (item) => item.entityRef === entity.id\n  //   //     );\n\n  //   //     if (!foundEntity) {\n  //   //       options.push({\n  //   //         value: entity.id,\n  //   //         label: entity.name,\n  //   //       });\n  //   //     }\n  //   //   });\n\n  //   //   // setEntityOptions(options);\n\n  //   //   return options;\n  //   // }\n\n  //   return <MaterialReactTable table={dataTable} />;\n  // };\n\n  // const queryClient = new QueryClient();\n  // fetchCatalogEntities();\n\n  return (\n    // <QueryClientProvider client={queryClient}>\n      <MappingTable mappings={entityMappings} catalogEntities={catalogEntities}  />\n    // </QueryClientProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8CO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA,CAE1C,EAAE,CAAA,CAAA;AACJ,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA,CAAoB,EAAE,CAAA,CAAA;AAKpE,EAAM,MAAA,YAAA,GAAe,OAAO,eAAe,CAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AAGvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAS,aAA0C,GAAA;AACjD,MAAA,YAAA,CAAa,iBAAkB,EAAA,CAAE,IAAK,CAAA,CAAC,MAAW,KAAA;AAChD,QAAA,iBAAA,CAAkB,OAAO,QAAQ,CAAA,CAAA;AAEjC,QAAA,OAAO,MAAO,CAAA,QAAA,CAAA;AAAA,OACf,CAAA,CAAA;AAED,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAEA,IAAA,SAAS,oBAAuB,GAAA;AAC5B,MAAA,UAAA,CACG,WAAY,CAAA;AAAA,QACX,MAAA,EAAQ,EAAE,IAAA,EAAM,WAAY,EAAA;AAAA,OAC7B,CAAA,CACA,IAAK,CAAA,CAAC,MAAW,KAAA;AAChB,QAAA,MAAM,WAAsB,EAAC,CAAA;AAC7B,QAAO,MAAA,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,MAAgB,KAAA;AA7ElD,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AA8Ec,UAAA,QAAA,CAAS,IAAK,CAAA;AAAA,YACZ,IAAA,EAAA,CAAM,EAAO,GAAA,MAAA,CAAA,QAAA,KAAP,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA;AAAA,YACvB,EAAI,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,CAAO,QAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAiB,QAAjB,IAAwB,GAAA,EAAA,GAAA,EAAA;AAAA,YAC5B,QAAQ,IAAK,CAAA,SAAA,CAAA,CAAU,YAAO,IAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAa,MAAM,CAAK,IAAA,EAAA;AAAA,YAC/C,OAAO,IAAK,CAAA,SAAA,CAAA,CAAU,YAAO,IAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAa,KAAK,CAAK,IAAA,EAAA;AAAA,YAC7C,WAAW,IAAK,CAAA,SAAA,CAAA,CAAU,YAAO,IAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAa,SAAS,CAAK,IAAA,EAAA;AAAA,WACtD,CAAA,CAAA;AAAA,SACF,CAAA,CAAA;AAED,QAAA,kBAAA,CAAmB,QAAQ,CAAA,CAAA;AAE3B,QAAO,OAAA,QAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACP;AAEA,IAAc,aAAA,EAAA,CAAA;AACd,IAAqB,oBAAA,EAAA,CAAA;AAAA,GACtB,CAAA,CAAA;AAkUD,EAAA;AAAA;AAAA,oBAEK,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,cAAA,EAAgB,eAAmC,EAAA,CAAA;AAAA,IAAA;AAGjF;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagerduty/backstage-plugin",
   "description": "A Backstage plugin that integrates towards PagerDuty",
-  "version": "0.13.0-next.24",
+  "version": "0.13.0-next.25",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",