@pagerduty/backstage-plugin 0.12.1-next.6 → 0.12.1-next.61
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.
- package/dist/esm/{index-39d9ebcd.esm.js → index-0b015038.esm.js} +2 -2
- package/dist/esm/{index-39d9ebcd.esm.js.map → index-0b015038.esm.js.map} +1 -1
- package/dist/esm/{index-2d3db4b5.esm.js → index-115bc99a.esm.js} +23 -5
- package/dist/esm/index-115bc99a.esm.js.map +1 -0
- package/dist/esm/index-f6f2a2a7.esm.js +183 -0
- package/dist/esm/index-f6f2a2a7.esm.js.map +1 -0
- package/dist/index.d.ts +10 -4
- package/dist/index.esm.js +1 -1
- package/package.json +9 -3
- package/dist/esm/index-2d3db4b5.esm.js.map +0 -1
- package/dist/esm/index-cd5dd3d7.esm.js +0 -166
- package/dist/esm/index-cd5dd3d7.esm.js.map +0 -1
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import React, { useState, useMemo } from 'react';
|
|
2
|
+
import { DialogTitle, DialogContent, DialogActions, Box, Tooltip, IconButton, Grid } from '@material-ui/core';
|
|
3
|
+
import { Page, Header, Content } from '@backstage/core-components';
|
|
4
|
+
import EditIcon from '@mui/icons-material/Edit';
|
|
5
|
+
import { useApi } from '@backstage/core-plugin-api';
|
|
6
|
+
import { p as pagerDutyApiRef } from './index-115bc99a.esm.js';
|
|
7
|
+
import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
|
|
8
|
+
import { useMaterialReactTable, MRT_EditActionButtons, MaterialReactTable } from 'material-react-table';
|
|
9
|
+
import { catalogApiRef } from '@backstage/plugin-catalog-react';
|
|
10
|
+
import '@backstage/errors';
|
|
11
|
+
import '@backstage/plugin-home-react';
|
|
12
|
+
import 'luxon';
|
|
13
|
+
import '@material-ui/icons/OpenInBrowser';
|
|
14
|
+
import '../assets/emptystate.svg';
|
|
15
|
+
import 'react-use/lib/useAsyncFn';
|
|
16
|
+
import '@material-ui/lab';
|
|
17
|
+
import '../assets/forbiddenstate.svg';
|
|
18
|
+
import '@material-ui/core/Avatar';
|
|
19
|
+
import '@material-ui/icons/Notifications';
|
|
20
|
+
import 'react-use/lib/useAsync';
|
|
21
|
+
import '@material-ui/icons/Link';
|
|
22
|
+
import '../assets/PD-Green.svg';
|
|
23
|
+
import '../assets/PD-White.svg';
|
|
24
|
+
import 'validate-color';
|
|
25
|
+
import '@material-ui/icons/Info';
|
|
26
|
+
import '@material-ui/icons/CheckCircle';
|
|
27
|
+
import '@material-ui/icons/RadioButtonUnchecked';
|
|
28
|
+
import '@material-ui/core/styles';
|
|
29
|
+
import 'react-use';
|
|
30
|
+
import '@material-ui/lab/Alert/Alert';
|
|
31
|
+
import '@backstage/catalog-model';
|
|
32
|
+
import '@material-ui/icons/AddAlert';
|
|
33
|
+
import '@material-ui/icons/ExpandMore';
|
|
34
|
+
|
|
35
|
+
const ServiceMappingComponent = () => {
|
|
36
|
+
const pagerDutyApi = useApi(pagerDutyApiRef);
|
|
37
|
+
const catalogApi = useApi(catalogApiRef);
|
|
38
|
+
function useGetCatalogEntities() {
|
|
39
|
+
return useQuery({
|
|
40
|
+
queryKey: ["mappings"],
|
|
41
|
+
queryFn: async () => {
|
|
42
|
+
const { items } = await catalogApi.getEntities({
|
|
43
|
+
filter: { kind: "Component" }
|
|
44
|
+
});
|
|
45
|
+
const entities = [];
|
|
46
|
+
items.forEach((entity) => {
|
|
47
|
+
var _a, _b, _c;
|
|
48
|
+
entities.push({
|
|
49
|
+
value: (_b = (_a = entity.metadata) == null ? void 0 : _a.uid) != null ? _b : "",
|
|
50
|
+
label: (_c = entity.metadata) == null ? void 0 : _c.name
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
return entities;
|
|
54
|
+
},
|
|
55
|
+
refetchOnWindowFocus: false
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
const {
|
|
59
|
+
data: fetchedEntities = [],
|
|
60
|
+
isError: isLoadingEntitiesError,
|
|
61
|
+
isFetching: isFetchingEntities,
|
|
62
|
+
isLoading: isLoadingEntities
|
|
63
|
+
} = useGetCatalogEntities();
|
|
64
|
+
const DenseTable = () => {
|
|
65
|
+
const [validationErrors, setValidationErrors] = useState({});
|
|
66
|
+
const columns = useMemo(
|
|
67
|
+
() => [
|
|
68
|
+
{
|
|
69
|
+
accessorKey: "serviceName",
|
|
70
|
+
header: "PagerDuty Service",
|
|
71
|
+
enableEditing: false
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
accessorKey: "team",
|
|
75
|
+
header: "Team",
|
|
76
|
+
enableEditing: false
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
accessorKey: "escalationPolicy",
|
|
80
|
+
header: "Escalation Policy",
|
|
81
|
+
enableEditing: false
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
accessorKey: "entityRef",
|
|
85
|
+
header: "Mapping",
|
|
86
|
+
editVariant: "select",
|
|
87
|
+
editSelectOptions: fetchedEntities,
|
|
88
|
+
muiEditTextFieldProps: {
|
|
89
|
+
select: true,
|
|
90
|
+
error: !!(validationErrors == null ? void 0 : validationErrors.state),
|
|
91
|
+
helperText: validationErrors == null ? void 0 : validationErrors.state
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
accessorKey: "status",
|
|
96
|
+
header: "Status",
|
|
97
|
+
enableEditing: false
|
|
98
|
+
}
|
|
99
|
+
],
|
|
100
|
+
[validationErrors]
|
|
101
|
+
);
|
|
102
|
+
const {
|
|
103
|
+
data: fetchedMappings = [],
|
|
104
|
+
isError: isLoadingMappingsError,
|
|
105
|
+
isFetching: isFetchingMappings,
|
|
106
|
+
isLoading: isLoadingMappings
|
|
107
|
+
} = useGetMappings();
|
|
108
|
+
const { mutateAsync: updateUser, isPending: isUpdatingMapping } = useUpdateMapping();
|
|
109
|
+
const handleSaveUser = async ({ values, table }) => {
|
|
110
|
+
await updateUser(values);
|
|
111
|
+
table.setEditingRow(null);
|
|
112
|
+
};
|
|
113
|
+
const dataTable = useMaterialReactTable({
|
|
114
|
+
columns,
|
|
115
|
+
data: fetchedMappings,
|
|
116
|
+
editDisplayMode: "modal",
|
|
117
|
+
// default ('row', 'cell', 'table', and 'custom' are also available)
|
|
118
|
+
enableEditing: true,
|
|
119
|
+
positionActionsColumn: "last",
|
|
120
|
+
getRowId: (row) => row.serviceId,
|
|
121
|
+
muiToolbarAlertBannerProps: isLoadingMappingsError ? {
|
|
122
|
+
color: "error",
|
|
123
|
+
children: "Error loading data"
|
|
124
|
+
} : void 0,
|
|
125
|
+
muiTableContainerProps: {
|
|
126
|
+
sx: {
|
|
127
|
+
minHeight: "500px"
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
onEditingRowCancel: () => setValidationErrors({}),
|
|
131
|
+
onEditingRowSave: handleSaveUser,
|
|
132
|
+
// optionally customize modal content
|
|
133
|
+
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 }))),
|
|
134
|
+
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)))),
|
|
135
|
+
state: {
|
|
136
|
+
isLoading: isLoadingMappings || isLoadingEntities,
|
|
137
|
+
isSaving: isUpdatingMapping,
|
|
138
|
+
showAlertBanner: isLoadingMappingsError || isLoadingEntitiesError,
|
|
139
|
+
showProgressBars: isFetchingMappings || isFetchingEntities
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
return /* @__PURE__ */ React.createElement(MaterialReactTable, { table: dataTable });
|
|
143
|
+
};
|
|
144
|
+
function useGetMappings() {
|
|
145
|
+
return useQuery({
|
|
146
|
+
queryKey: ["mappings"],
|
|
147
|
+
queryFn: async () => {
|
|
148
|
+
const { mappings: foundMappings } = await pagerDutyApi.getEntityMappings();
|
|
149
|
+
return foundMappings;
|
|
150
|
+
},
|
|
151
|
+
refetchOnWindowFocus: false
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
function useUpdateMapping() {
|
|
155
|
+
const queryClient2 = useQueryClient();
|
|
156
|
+
return useMutation({
|
|
157
|
+
mutationFn: async (mapping) => {
|
|
158
|
+
await pagerDutyApi.storeServiceMapping(
|
|
159
|
+
mapping.serviceId,
|
|
160
|
+
mapping.entityRef
|
|
161
|
+
);
|
|
162
|
+
},
|
|
163
|
+
// client side optimistic update
|
|
164
|
+
onMutate: (newMappingInfo) => {
|
|
165
|
+
queryClient2.setQueryData(
|
|
166
|
+
["mappings"],
|
|
167
|
+
(prevMappings) => prevMappings == null ? void 0 : prevMappings.map(
|
|
168
|
+
(prevMapping) => prevMapping.serviceId === newMappingInfo.serviceId ? newMappingInfo : prevMapping
|
|
169
|
+
)
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
const queryClient = new QueryClient();
|
|
175
|
+
return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(DenseTable, null));
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
const PagerDutyPage = () => {
|
|
179
|
+
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)))));
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
export { PagerDutyPage };
|
|
183
|
+
//# sourceMappingURL=index-f6f2a2a7.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index-f6f2a2a7.esm.js","sources":["../../src/components/PagerDutyPage/ServiceMappingComponent.tsx","../../src/components/PagerDutyPage/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n// import { Table, TableColumn } from \"@backstage/core-components\";\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\";\n// import { catalogApiRef } from \"@backstage/plugin-catalog-react\";\n// import { Entity } from \"@backstage/catalog-model\";\nimport { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { DropdownOption, MRT_ColumnDef, MRT_EditActionButtons, MRT_TableOptions, MaterialReactTable, useMaterialReactTable } from \"material-react-table\";\nimport { catalogApiRef } from \"@backstage/plugin-catalog-react\";\nimport { Entity } from \"@backstage/catalog-model\";\n\n// type 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\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\nexport const ServiceMappingComponent = () => {\n // const [catalogEntities, setCatalogEntities] = useState<Service[]>([]);\n // const [, setServiceMappings] = useState<PagerDutyEntityMapping[]>([]);\n // const [tableData, setTableData] = useState<TableItem[]>([]);\n // const [isLoading, setIsLoading] = useState(true);\n\n // const pagerDutyApi = useApi(pagerDutyApiRef);\n // const catalogApi = useApi(catalogApiRef);\n\n // useEffect(() => {\n // async function fetchEntities(): Promise<Service[]> {\n // const { items } = await catalogApi.getEntities({\n // filter: { kind: \"Component\" },\n // });\n\n // const backstageServices: Service[] = [];\n // 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 // return backstageServices;\n // }\n\n // async function fetchServices(): Promise<PagerDutyEntityMapping[]> {\n // const { mappings: foundServices } = await pagerDutyApi.getEntityMappings();\n\n // return foundServices;\n // }\n\n // if (catalogEntities.length === 0) {\n // Promise.all([fetchEntities(), fetchServices()]).then(\n // ([entities, mappings]) => {\n // setCatalogEntities(entities);\n // setServiceMappings(mappings);\n\n // const data: TableItem[] = buildTableData(\n // entities,\n // mappings\n // );\n\n // setTableData(data);\n // setIsLoading(false);\n // }\n // );\n // }\n // }, [catalogApi, catalogEntities, pagerDutyApi]);\n\n // function buildTableData(\n // entities: Service[],\n // mappings: PagerDutyEntityMapping[]\n // ): TableItem[] {\n // const data: TableItem[] = mappings.map((service) => {\n // return {\n // name: service.serviceName,\n // team: service.team,\n // escalationPolicy: service.escalationPolicy,\n // // status of mapping\n // mappingStatus: (\n // <Typography\n // variant=\"body2\"\n // style={{\n // color: getColorFromStatus(service.status),\n // }}\n // >\n // {service.status}\n // </Typography>\n // ),\n // mapping: (\n // // dropdown menu with static options. If service.mapping is defined select that option\n // <FormControl variant=\"standard\">\n // <Select\n // displayEmpty\n // onChange={(selection) => {\n // handleMappingChange(service, selection);\n\n // }}\n // value={service.entityRef}\n // >\n // <MenuItem value=\"\">\n // <em>None</em>\n // </MenuItem>\n // {entities.map((backstageService) => {\n // return (\n // <MenuItem\n // key={backstageService.id}\n // value={backstageService.id}\n // >\n // {backstageService.name}\n // </MenuItem>\n // );\n // })}\n // </Select>\n // </FormControl>\n // ),\n // actions: (\n // <Button variant=\"contained\" color=\"primary\" href={service.serviceUrl}>\n // Open in PagerDuty\n // </Button>\n // ),\n // };\n // });\n\n // return data;\n // }\n\n // async function handleMappingChange(\n // service: PagerDutyEntityMapping,\n // event: ChangeEvent<{\n // name?: string | undefined;\n // value: unknown;\n // }>\n // ) {\n // // event.preventDefault();\n // const updatedData = [...tableData];\n\n // // find the service in updatedData\n // updatedData.findIndex((item) => item.name === service.serviceName);\n // // // updatedData[serviceIndex].mappingStatus = (\n // // // <Typography\n // // // variant=\"body2\"\n // // // style={{\n // // // color: getColorFromStatus(\"OutOfSync\"),\n // // // }}\n // // // >\n // // // \"OutOfSync\"\n // // // </Typography>\n // // // );\n\n // // // update the mapping status\n // // // service.status = \"OutOfSync\";\n\n // // // // update the mapping\n // // // service.entityRef = entityId;\n\n // // // store the mapping in the database\n // await pagerDutyApi.storeServiceMapping(\n // service.serviceId,\n // event.target.value as string\n // );\n // setTableData(updatedData);\n // }\n\n // const DenseTable = ({ items }: DenseTableProps) => {\n // // const [data, _] = useState<TableItem[]>(items);\n\n // // useEffect(() => {\n // // setData(items);\n // // }, [items]);\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\" },\n // { title: \"Actions\", field: \"actions\" },\n // ];\n\n // return (\n // <Table\n // isLoading={isLoading}\n // title=\"PagerDuty Service Import\"\n // subtitle=\"Use this page to import services from PagerDuty and map them to existing Backstage services. Only 1:1 mapping is allowed.\"\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={items}\n // />\n // );\n // };\n\n // return <DenseTable items={tableData} />;\n\n const pagerDutyApi = useApi(pagerDutyApiRef);\n const catalogApi = useApi(catalogApiRef);\n\n function useGetCatalogEntities() {\n return useQuery<DropdownOption[]>({\n queryKey: [\"mappings\"],\n queryFn: async () => {\n // send api request here\n const { items } = await catalogApi.getEntities({\n filter: { kind: \"Component\" },\n });\n\n const entities: DropdownOption[] = [];\n items.forEach((entity: Entity) => {\n entities.push({\n value: entity.metadata?.uid ?? \"\",\n label: entity.metadata?.name,\n });\n });\n\n return entities;\n },\n refetchOnWindowFocus: false,\n });\n }\n const {\n data: fetchedEntities = [],\n isError: isLoadingEntitiesError,\n isFetching: isFetchingEntities,\n isLoading: isLoadingEntities,\n } = useGetCatalogEntities();\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: \"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 editVariant: \"select\",\n editSelectOptions: fetchedEntities,\n muiEditTextFieldProps: {\n select: true,\n error: !!validationErrors?.state,\n helperText: validationErrors?.state,\n },\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n enableEditing: false,\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: updateUser, isPending: isUpdatingMapping } =\n useUpdateMapping();\n\n // UPDATE action\n const handleSaveUser: MRT_TableOptions<PagerDutyEntityMapping>[\"onEditingRowSave\"] =\n async ({ values, table }) => {\n await updateUser(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 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: handleSaveUser,\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 || isLoadingEntities,\n isSaving: isUpdatingMapping,\n showAlertBanner: isLoadingMappingsError || isLoadingEntitiesError,\n showProgressBars: isFetchingMappings || isFetchingEntities,\n },\n });\n\n return <MaterialReactTable table={dataTable} />;\n };\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 await pagerDutyApi.storeServiceMapping(\n mapping.serviceId,\n mapping.entityRef\n );\n },\n // client side optimistic update\n onMutate: (newMappingInfo: PagerDutyEntityMapping) => {\n queryClient.setQueryData([\"mappings\"], (prevMappings: any) =>\n prevMappings?.map((prevMapping: PagerDutyEntityMapping) =>\n prevMapping.serviceId === newMappingInfo.serviceId ? newMappingInfo : prevMapping\n )\n );\n },\n });\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DO,MAAM,0BAA0B,MAAM;AAgM3C,EAAM,MAAA,YAAA,GAAe,OAAO,eAAe,CAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AAEvC,EAAA,SAAS,qBAAwB,GAAA;AAC/B,IAAA,OAAO,QAA2B,CAAA;AAAA,MAChC,QAAA,EAAU,CAAC,UAAU,CAAA;AAAA,MACrB,SAAS,YAAY;AAEnB,QAAA,MAAM,EAAE,KAAA,EAAU,GAAA,MAAM,WAAW,WAAY,CAAA;AAAA,UAC7C,MAAA,EAAQ,EAAE,IAAA,EAAM,WAAY,EAAA;AAAA,SAC7B,CAAA,CAAA;AAED,QAAA,MAAM,WAA6B,EAAC,CAAA;AACpC,QAAM,KAAA,CAAA,OAAA,CAAQ,CAAC,MAAmB,KAAA;AAzQ1C,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AA0QU,UAAA,QAAA,CAAS,IAAK,CAAA;AAAA,YACZ,KAAO,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,YAC/B,KAAA,EAAA,CAAO,EAAO,GAAA,MAAA,CAAA,QAAA,KAAP,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA;AAAA,WACzB,CAAA,CAAA;AAAA,SACF,CAAA,CAAA;AAED,QAAO,OAAA,QAAA,CAAA;AAAA,OACT;AAAA,MACA,oBAAsB,EAAA,KAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GACH;AACE,EAAM,MAAA;AAAA,IACJ,IAAA,EAAM,kBAAkB,EAAC;AAAA,IACzB,OAAS,EAAA,sBAAA;AAAA,IACT,UAAY,EAAA,kBAAA;AAAA,IACZ,SAAW,EAAA,iBAAA;AAAA,MACT,qBAAsB,EAAA,CAAA;AAE5B,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,MAAM,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAA,QAAA,CAE9C,EAAE,CAAA,CAAA;AAEJ,IAAA,MAAM,OAAU,GAAA,OAAA;AAAA,MACd,MAAM;AAAA,QACJ;AAAA,UACE,WAAa,EAAA,aAAA;AAAA,UACb,MAAQ,EAAA,mBAAA;AAAA,UACR,aAAe,EAAA,KAAA;AAAA,SACjB;AAAA,QACA;AAAA,UACE,WAAa,EAAA,MAAA;AAAA,UACb,MAAQ,EAAA,MAAA;AAAA,UACR,aAAe,EAAA,KAAA;AAAA,SACjB;AAAA,QACA;AAAA,UACE,WAAa,EAAA,kBAAA;AAAA,UACb,MAAQ,EAAA,mBAAA;AAAA,UACR,aAAe,EAAA,KAAA;AAAA,SACjB;AAAA,QACA;AAAA,UACE,WAAa,EAAA,WAAA;AAAA,UACb,MAAQ,EAAA,SAAA;AAAA,UACR,WAAa,EAAA,QAAA;AAAA,UACb,iBAAmB,EAAA,eAAA;AAAA,UACnB,qBAAuB,EAAA;AAAA,YACrB,MAAQ,EAAA,IAAA;AAAA,YACR,KAAA,EAAO,CAAC,EAAC,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,KAAA,CAAA;AAAA,YAC3B,YAAY,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,KAAA;AAAA,WAChC;AAAA,SACF;AAAA,QACA;AAAA,UACE,WAAa,EAAA,QAAA;AAAA,UACb,MAAQ,EAAA,QAAA;AAAA,UACR,aAAe,EAAA,KAAA;AAAA,SACjB;AAAA,OACF;AAAA,MACA,CAAC,gBAAgB,CAAA;AAAA,KACnB,CAAA;AAGA,IAAM,MAAA;AAAA,MACJ,IAAA,EAAM,kBAAkB,EAAC;AAAA,MACzB,OAAS,EAAA,sBAAA;AAAA,MACT,UAAY,EAAA,kBAAA;AAAA,MACZ,SAAW,EAAA,iBAAA;AAAA,QACT,cAAe,EAAA,CAAA;AAGnB,IAAA,MAAM,EAAE,WAAa,EAAA,UAAA,EAAY,SAAW,EAAA,iBAAA,KAC1C,gBAAiB,EAAA,CAAA;AAGnB,IAAA,MAAM,cACJ,GAAA,OAAO,EAAE,MAAA,EAAQ,OAAY,KAAA;AAC3B,MAAA,MAAM,WAAW,MAAM,CAAA,CAAA;AACvB,MAAA,KAAA,CAAM,cAAc,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEF,IAAA,MAAM,YAAY,qBAAsB,CAAA;AAAA,MACtC,OAAA;AAAA,MACA,IAAM,EAAA,eAAA;AAAA,MACN,eAAiB,EAAA,OAAA;AAAA;AAAA,MACjB,aAAe,EAAA,IAAA;AAAA,MACf,qBAAuB,EAAA,MAAA;AAAA,MACvB,QAAA,EAAU,CAAC,GAAA,KAAQ,GAAI,CAAA,SAAA;AAAA,MACvB,4BAA4B,sBACxB,GAAA;AAAA,QACE,KAAO,EAAA,OAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,OAEZ,GAAA,KAAA,CAAA;AAAA,MACJ,sBAAwB,EAAA;AAAA,QACtB,EAAI,EAAA;AAAA,UACF,SAAW,EAAA,OAAA;AAAA,SACb;AAAA,OACF;AAAA,MACA,kBAAoB,EAAA,MAAM,mBAAoB,CAAA,EAAE,CAAA;AAAA,MAChD,gBAAkB,EAAA,cAAA;AAAA;AAAA,MAElB,0BAAA,EAA4B,CAAC,EAAE,KAAO,EAAA,GAAA,EAAK,sBAAuB,EAAA,qBAE9D,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,IAAA,EAAA,cAAY,CACzB,kBAAA,KAAA,CAAA,aAAA,CAAC,qBACE,sBAAwB,EAAA,GAE3B,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,aACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,qBAAsB,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,KAAA,EAAc,GAAU,EAAA,CAChE,CACF,CAAA;AAAA,MAEF,gBAAkB,EAAA,CAAC,EAAE,GAAA,EAAK,KAAM,EAAA,qBAC7B,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,OAAS,EAAA,MAAA,EAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAM,MACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAS,MAAM,KAAA,CAAM,aAAc,CAAA,GAAG,CAChD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,IAAA,CACZ,CACF,CACF,CAAA;AAAA,MAEF,KAAO,EAAA;AAAA,QACL,WAAW,iBAAqB,IAAA,iBAAA;AAAA,QAChC,QAAU,EAAA,iBAAA;AAAA,QACV,iBAAiB,sBAA0B,IAAA,sBAAA;AAAA,QAC3C,kBAAkB,kBAAsB,IAAA,kBAAA;AAAA,OAC1C;AAAA,KACD,CAAA,CAAA;AAED,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,EAAA,KAAA,EAAO,SAAW,EAAA,CAAA,CAAA;AAAA,GAC/C,CAAA;AAGA,EAAA,SAAS,cAAiB,GAAA;AACxB,IAAA,OAAO,QAAmC,CAAA;AAAA,MACxC,QAAA,EAAU,CAAC,UAAU,CAAA;AAAA,MACrB,SAAS,YAAY;AAEnB,QAAA,MAAM,EAAE,QAAU,EAAA,aAAA,EAChB,GAAA,MAAM,aAAa,iBAAkB,EAAA,CAAA;AAEvC,QAAO,OAAA,aAAA,CAAA;AAAA,OACT;AAAA,MACA,oBAAsB,EAAA,KAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GACH;AAGA,EAAA,SAAS,gBAAmB,GAAA;AAC1B,IAAA,MAAMA,eAAc,cAAe,EAAA,CAAA;AACnC,IAAA,OAAO,WAAY,CAAA;AAAA,MACjB,UAAA,EAAY,OAAO,OAAoC,KAAA;AACrD,QAAA,MAAM,YAAa,CAAA,mBAAA;AAAA,UACjB,OAAQ,CAAA,SAAA;AAAA,UACR,OAAQ,CAAA,SAAA;AAAA,SACV,CAAA;AAAA,OACF;AAAA;AAAA,MAEA,QAAA,EAAU,CAAC,cAA2C,KAAA;AACpD,QAAAA,YAAY,CAAA,YAAA;AAAA,UAAa,CAAC,UAAU,CAAA;AAAA,UAAG,CAAC,iBACtC,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,GAAA;AAAA,YAAI,CAAC,WACjB,KAAA,WAAA,CAAY,SAAc,KAAA,cAAA,CAAe,YAAY,cAAiB,GAAA,WAAA;AAAA,WAAA;AAAA,SAE1E,CAAA;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,WAAA,GAAc,IAAI,WAAY,EAAA,CAAA;AAEpC,EAAA,2CACG,mBAAoB,EAAA,EAAA,MAAA,EAAQ,WAC3B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAW,CACd,CAAA,CAAA;AAEJ,CAAA;;ACnbO,MAAM,gBAAgB,MAAM;AACjC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,kBACX,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,KAAM,EAAA,WAAA,EAAY,QAAS,EAAA,yBAAA,EAA0B,CAC7D,kBAAA,KAAA,CAAA,aAAA,CAAC,+BAWE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,OAAS,EAAA,CAAA,EAAG,SAAU,EAAA,QAAA,EAAA,kBACnC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAA,kBACP,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,IAAwB,CAC3B,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import * as react from 'react';
|
|
|
5
5
|
import react__default, { ReactNode } from 'react';
|
|
6
6
|
import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
|
|
7
7
|
import { DiscoveryApi, FetchApi, ConfigApi } from '@backstage/core-plugin-api';
|
|
8
|
-
import {
|
|
8
|
+
import { PagerDutyEntityMappingResponse, PagerDutyServiceResponse, PagerDutyIncidentsResponse, PagerDutyChangeEventsResponse, PagerDutyServiceStandardsResponse, PagerDutyServiceMetricsResponse, PagerDutyUser } from '@pagerduty/backstage-plugin-common';
|
|
9
9
|
|
|
10
10
|
/** @public */
|
|
11
11
|
declare const isPluginApplicableToEntity$1: (entity: Entity) => boolean;
|
|
@@ -63,10 +63,15 @@ type PagerDutyTriggerAlarmRequest = {
|
|
|
63
63
|
/** @public */
|
|
64
64
|
interface PagerDutyApi {
|
|
65
65
|
/**
|
|
66
|
-
* Fetches all
|
|
66
|
+
* Fetches all entity mappings.
|
|
67
67
|
*
|
|
68
68
|
*/
|
|
69
|
-
|
|
69
|
+
getEntityMappings(): Promise<PagerDutyEntityMappingResponse>;
|
|
70
|
+
/**
|
|
71
|
+
* Stores the service mapping in the database.
|
|
72
|
+
*
|
|
73
|
+
*/
|
|
74
|
+
storeServiceMapping(serviceId: string, entityId: string): Promise<Response>;
|
|
70
75
|
/**
|
|
71
76
|
* Fetches the service for the provided pager duty Entity.
|
|
72
77
|
*
|
|
@@ -133,7 +138,8 @@ declare class PagerDutyClient implements PagerDutyApi {
|
|
|
133
138
|
static fromConfig(configApi: ConfigApi, dependencies: PagerDutyClientApiDependencies): PagerDutyClient;
|
|
134
139
|
constructor(config: PagerDutyClientApiConfig);
|
|
135
140
|
getServiceByPagerDutyEntity(pagerDutyEntity: PagerDutyEntity): Promise<PagerDutyServiceResponse>;
|
|
136
|
-
|
|
141
|
+
getEntityMappings(): Promise<PagerDutyEntityMappingResponse>;
|
|
142
|
+
storeServiceMapping(serviceId: string, backstageEntityId: string): Promise<Response>;
|
|
137
143
|
getServiceByEntity(entity: Entity): Promise<PagerDutyServiceResponse>;
|
|
138
144
|
getServiceById(serviceId: string): Promise<PagerDutyServiceResponse>;
|
|
139
145
|
getIncidentsByServiceId(serviceId: string): Promise<PagerDutyIncidentsResponse>;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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-
|
|
1
|
+
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-115bc99a.esm.js';
|
|
2
2
|
import '@backstage/core-plugin-api';
|
|
3
3
|
import '@backstage/errors';
|
|
4
4
|
import '@backstage/plugin-home-react';
|
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.12.1-next.
|
|
4
|
+
"version": "0.12.1-next.61",
|
|
5
5
|
"main": "dist/index.esm.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "Apache-2.0",
|
|
@@ -41,16 +41,23 @@
|
|
|
41
41
|
"@backstage/plugin-catalog-react": "^1.9.1",
|
|
42
42
|
"@backstage/plugin-home-react": "^0.1.5",
|
|
43
43
|
"@backstage/theme": "^0.5.2",
|
|
44
|
+
"@emotion/react": "^11.11.4",
|
|
45
|
+
"@emotion/styled": "^11.11.5",
|
|
44
46
|
"@material-ui/core": "^4.12.2",
|
|
45
47
|
"@material-ui/icons": "^4.9.1",
|
|
46
48
|
"@material-ui/lab": "4.0.0-alpha.61",
|
|
49
|
+
"@mui/icons-material": "^5.15.19",
|
|
50
|
+
"@mui/material": "^5.15.19",
|
|
51
|
+
"@mui/x-date-pickers": "^7.6.1",
|
|
52
|
+
"@pagerduty/backstage-plugin-common": "^0.1.5-next.7",
|
|
53
|
+
"@tanstack/react-query": "^5.40.1",
|
|
47
54
|
"classnames": "^2.2.6",
|
|
48
55
|
"luxon": "^3.4.1",
|
|
56
|
+
"material-react-table": "^2.13.0",
|
|
49
57
|
"react-use": "^17.2.4",
|
|
50
58
|
"validate-color": "^2.2.4"
|
|
51
59
|
},
|
|
52
60
|
"peerDependencies": {
|
|
53
|
-
"@pagerduty/backstage-plugin-common": "^0.1.2",
|
|
54
61
|
"react": "^18.0.0 || ^20.0.0",
|
|
55
62
|
"react-dom": "^18.0.0 || ^20.0.0",
|
|
56
63
|
"react-router-dom": "^6.3.0"
|
|
@@ -62,7 +69,6 @@
|
|
|
62
69
|
"@backstage/test-utils": "^1.5.1",
|
|
63
70
|
"@commitlint/cli": "^17.7.1",
|
|
64
71
|
"@commitlint/config-conventional": "^17.7.0",
|
|
65
|
-
"@pagerduty/backstage-plugin-common": "^0.1.2",
|
|
66
72
|
"@testing-library/dom": "^8.0.0",
|
|
67
73
|
"@testing-library/jest-dom": "^5.10.1",
|
|
68
74
|
"@testing-library/react": "^12.1.3",
|