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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,7 @@
1
1
  import React from 'react';
2
2
 
3
3
  const MappingTable = ({ mappings, catalogEntities }) => {
4
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, "MappingTable"), mappings.forEach((mapping) => {
5
- /* @__PURE__ */ React.createElement("p", null, mapping.serviceId);
6
- }), catalogEntities.forEach((entity) => {
7
- /* @__PURE__ */ React.createElement("p", null, entity.id);
8
- }));
4
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, "MappingTable"), /* @__PURE__ */ React.createElement("p", null, mappings.length), /* @__PURE__ */ React.createElement("p", null, catalogEntities.length));
9
5
  };
10
6
 
11
7
  export { MappingTable };
@@ -1 +1 @@
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;;;;"}
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 <p>{mappings.length}</p>\n <p>{catalogEntities.length}</p>\n </>\n );\n}"],"names":[],"mappings":";;AAgBO,MAAM,YAAe,GAAA,CAAC,EAAC,QAAA,EAAU,iBAAyC,KAAA;AAC/E,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,IAAA,EAAA,cAAY,mBAEhB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAG,QAAS,CAAA,MAAO,CACpB,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA,EAAA,eAAA,CAAgB,MAAO,CAC7B,CAAA,CAAA;AAEJ;;;;"}
@@ -13,9 +13,7 @@ const ServiceMappingComponent = () => {
13
13
  function fetchMappings() {
14
14
  pagerDutyApi.getEntityMappings().then((result) => {
15
15
  setEntityMappings(result.mappings);
16
- return result.mappings;
17
16
  });
18
- return [];
19
17
  }
20
18
  function fetchCatalogEntities() {
21
19
  catalogApi.getEntities({
@@ -33,12 +31,11 @@ const ServiceMappingComponent = () => {
33
31
  });
34
32
  });
35
33
  setCatalogEntities(entities);
36
- return entities;
37
34
  });
38
35
  }
39
36
  fetchMappings();
40
37
  fetchCatalogEntities();
41
- });
38
+ }, [catalogApi, pagerDutyApi]);
42
39
  return (
43
40
  // <QueryClientProvider client={queryClient}>
44
41
  /* @__PURE__ */ React.createElement(MappingTable, { mappings: entityMappings, catalogEntities })
@@ -1 +1 @@
1
- {"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;;;;"}
1
+ {"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() {\n pagerDutyApi.getEntityMappings().then((result) => {\n setEntityMappings(result.mappings);\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 fetchMappings();\n fetchCatalogEntities();\n }, [catalogApi, pagerDutyApi]);\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,aAAgB,GAAA;AACvB,MAAA,YAAA,CAAa,iBAAkB,EAAA,CAAE,IAAK,CAAA,CAAC,MAAW,KAAA;AAChD,QAAA,iBAAA,CAAkB,OAAO,QAAQ,CAAA,CAAA;AAAA,OAClC,CAAA,CAAA;AAAA,KACH;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;AAzElD,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AA0Ec,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;AAAA,OAC5B,CAAA,CAAA;AAAA,KACP;AAEA,IAAc,aAAA,EAAA,CAAA;AACd,IAAqB,oBAAA,EAAA,CAAA;AAAA,GACpB,EAAA,CAAC,UAAY,EAAA,YAAY,CAAC,CAAA,CAAA;AAkU7B,EAAA;AAAA;AAAA,oBAEK,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,cAAA,EAAgB,eAAmC,EAAA,CAAA;AAAA,IAAA;AAGjF;;;;"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pagerduty/backstage-plugin",
3
3
  "description": "A Backstage plugin that integrates towards PagerDuty",
4
- "version": "0.13.0-next.25",
4
+ "version": "0.13.0-next.27",
5
5
  "main": "dist/index.esm.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "license": "Apache-2.0",