@pagerduty/backstage-plugin 0.13.0-next.27 → 0.13.0-next.28
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/components/PagerDutyPage/MappingTable.esm.js +203 -2
- package/dist/components/PagerDutyPage/MappingTable.esm.js.map +1 -1
- package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js +1 -4
- package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,208 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState, useMemo } from 'react';
|
|
2
|
+
import { useMaterialReactTable, MRT_EditActionButtons, MaterialReactTable } from 'material-react-table';
|
|
3
|
+
import { Typography, Box, DialogTitle, DialogContent, DialogActions, Tooltip, IconButton } from '@material-ui/core';
|
|
4
|
+
import { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';
|
|
5
|
+
import { Edit, OpenInBrowser } from '@mui/icons-material';
|
|
6
|
+
import { useApi } from '@backstage/core-plugin-api';
|
|
7
|
+
import { pagerDutyApiRef } from '../../api/client.esm.js';
|
|
2
8
|
|
|
9
|
+
function getColorFromStatus(status) {
|
|
10
|
+
switch (status) {
|
|
11
|
+
case "InSync":
|
|
12
|
+
return "green";
|
|
13
|
+
case "OutOfSync":
|
|
14
|
+
return "red";
|
|
15
|
+
case "NotMapped":
|
|
16
|
+
return "orange";
|
|
17
|
+
default:
|
|
18
|
+
return "gray";
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
function makeReadable(status) {
|
|
22
|
+
switch (status) {
|
|
23
|
+
case "InSync":
|
|
24
|
+
return "In Sync";
|
|
25
|
+
case "OutOfSync":
|
|
26
|
+
return "Out of Sync";
|
|
27
|
+
case "NotMapped":
|
|
28
|
+
return "Not Mapped";
|
|
29
|
+
default:
|
|
30
|
+
return "Refresh to Update";
|
|
31
|
+
}
|
|
32
|
+
}
|
|
3
33
|
const MappingTable = ({ mappings, catalogEntities }) => {
|
|
4
|
-
|
|
34
|
+
const DenseTable = () => {
|
|
35
|
+
const [validationErrors, setValidationErrors] = useState({});
|
|
36
|
+
const pagerDutyApi = useApi(pagerDutyApiRef);
|
|
37
|
+
const columns = useMemo(
|
|
38
|
+
() => [
|
|
39
|
+
{
|
|
40
|
+
accessorKey: "serviceId",
|
|
41
|
+
header: "Service ID",
|
|
42
|
+
visibleInShowHideMenu: false,
|
|
43
|
+
enableEditing: false,
|
|
44
|
+
Edit: () => null,
|
|
45
|
+
Cell: ({ cell }) => /* @__PURE__ */ React.createElement(Typography, { variant: "body1", style: { fontWeight: 600 } }, cell.getValue())
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
accessorKey: "serviceName",
|
|
49
|
+
header: "PagerDuty Service",
|
|
50
|
+
enableEditing: false
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
accessorKey: "team",
|
|
54
|
+
header: "Team",
|
|
55
|
+
enableEditing: false
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
accessorKey: "escalationPolicy",
|
|
59
|
+
header: "Escalation Policy",
|
|
60
|
+
enableEditing: false
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
accessorKey: "entityRef",
|
|
64
|
+
header: "Mapping",
|
|
65
|
+
visibleInShowHideMenu: false,
|
|
66
|
+
editVariant: "select",
|
|
67
|
+
editSelectOptions: getCatalogEntityOptions(),
|
|
68
|
+
muiEditTextFieldProps: {
|
|
69
|
+
select: true,
|
|
70
|
+
error: !!(validationErrors == null ? void 0 : validationErrors.state),
|
|
71
|
+
helperText: validationErrors == null ? void 0 : validationErrors.state
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
accessorKey: "entityName",
|
|
76
|
+
header: "Mapped Entity Name",
|
|
77
|
+
enableEditing: false,
|
|
78
|
+
Edit: () => null
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
accessorKey: "status",
|
|
82
|
+
header: "Status",
|
|
83
|
+
enableEditing: false,
|
|
84
|
+
Edit: () => null,
|
|
85
|
+
Cell: ({ cell }) => /* @__PURE__ */ React.createElement(
|
|
86
|
+
Box,
|
|
87
|
+
{
|
|
88
|
+
component: "span",
|
|
89
|
+
bgcolor: getColorFromStatus(cell.getValue()),
|
|
90
|
+
borderRadius: "0.25rem",
|
|
91
|
+
color: "white",
|
|
92
|
+
p: "0.25rem"
|
|
93
|
+
},
|
|
94
|
+
makeReadable(cell.getValue())
|
|
95
|
+
)
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
accessorKey: "serviceUrl",
|
|
99
|
+
header: "Service URL",
|
|
100
|
+
visibleInShowHideMenu: false,
|
|
101
|
+
enableEditing: false,
|
|
102
|
+
Edit: () => null
|
|
103
|
+
}
|
|
104
|
+
],
|
|
105
|
+
[validationErrors]
|
|
106
|
+
);
|
|
107
|
+
function useUpdateMapping() {
|
|
108
|
+
return useMutation({
|
|
109
|
+
mutationFn: async (mapping) => {
|
|
110
|
+
return await pagerDutyApi.storeServiceMapping(
|
|
111
|
+
mapping.serviceId,
|
|
112
|
+
mapping.entityRef
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
// client side optimistic update
|
|
116
|
+
// onMutate: (newMappingInfo: PagerDutyEntityMapping) => {
|
|
117
|
+
// queryClient.setQueryData(["updateMappings"], (prevMappings: any) =>
|
|
118
|
+
// prevMappings?.map((prevMapping: PagerDutyEntityMapping) => {
|
|
119
|
+
// if (prevMapping.serviceId === newMappingInfo.serviceId) {
|
|
120
|
+
// newMappingInfo.entityName =
|
|
121
|
+
// fetchedCatalogEntities.find(
|
|
122
|
+
// (entity) => entity.id === newMappingInfo.entityRef
|
|
123
|
+
// )?.name || "";
|
|
124
|
+
// return newMappingInfo;
|
|
125
|
+
// }
|
|
126
|
+
// return prevMapping;
|
|
127
|
+
// })
|
|
128
|
+
// );
|
|
129
|
+
// },
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
const { mutateAsync: updateMapping, isPending: isUpdatingMapping } = useUpdateMapping();
|
|
133
|
+
const handleSaveMapping = async ({ values, table }) => {
|
|
134
|
+
var _a;
|
|
135
|
+
setValidationErrors({});
|
|
136
|
+
values.entityName = ((_a = catalogEntities.find((entity) => entity.id === values.entityRef)) == null ? void 0 : _a.name) || "";
|
|
137
|
+
values.status = "RefreshToUpdate";
|
|
138
|
+
await updateMapping(values);
|
|
139
|
+
table.setEditingRow(null);
|
|
140
|
+
};
|
|
141
|
+
const openInBrowser = (url) => {
|
|
142
|
+
window.open(url, "_blank", "noreferrer");
|
|
143
|
+
};
|
|
144
|
+
const dataTable = useMaterialReactTable({
|
|
145
|
+
columns,
|
|
146
|
+
data: mappings,
|
|
147
|
+
editDisplayMode: "modal",
|
|
148
|
+
// default ('row', 'cell', 'table', and 'custom' are also available)
|
|
149
|
+
enableEditing: true,
|
|
150
|
+
positionActionsColumn: "last",
|
|
151
|
+
enableStickyHeader: true,
|
|
152
|
+
enableFilters: true,
|
|
153
|
+
getRowId: (row) => row.serviceId,
|
|
154
|
+
muiToolbarAlertBannerProps: mappings === void 0 ? {
|
|
155
|
+
color: "error",
|
|
156
|
+
children: "Error loading data"
|
|
157
|
+
} : void 0,
|
|
158
|
+
muiTableContainerProps: {
|
|
159
|
+
sx: {
|
|
160
|
+
minHeight: "500px"
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
onEditingRowCancel: () => setValidationErrors({}),
|
|
164
|
+
onEditingRowSave: handleSaveMapping,
|
|
165
|
+
// optionally customize modal content
|
|
166
|
+
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 }))),
|
|
167
|
+
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(Edit, null))), /* @__PURE__ */ React.createElement(Tooltip, { title: "Open in PagerDuty" }, /* @__PURE__ */ React.createElement(
|
|
168
|
+
IconButton,
|
|
169
|
+
{
|
|
170
|
+
onClick: () => openInBrowser(row.getValue("serviceUrl"))
|
|
171
|
+
},
|
|
172
|
+
/* @__PURE__ */ React.createElement(OpenInBrowser, null)
|
|
173
|
+
))),
|
|
174
|
+
state: {
|
|
175
|
+
isLoading: mappings.length === 0 || catalogEntities.length === 0,
|
|
176
|
+
isSaving: isUpdatingMapping,
|
|
177
|
+
showAlertBanner: mappings === void 0 || catalogEntities === void 0,
|
|
178
|
+
showProgressBars: mappings.length === 0 || catalogEntities.length === 0,
|
|
179
|
+
columnVisibility: {
|
|
180
|
+
serviceId: false,
|
|
181
|
+
entityRef: false,
|
|
182
|
+
serviceUrl: false
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
function getCatalogEntityOptions() {
|
|
187
|
+
const options = [];
|
|
188
|
+
options.push({ value: "", label: "None" });
|
|
189
|
+
catalogEntities.forEach((entity) => {
|
|
190
|
+
const foundEntity = mappings.find(
|
|
191
|
+
(item) => item.entityRef === entity.id
|
|
192
|
+
);
|
|
193
|
+
if (!foundEntity) {
|
|
194
|
+
options.push({
|
|
195
|
+
value: entity.id,
|
|
196
|
+
label: entity.name
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
return options;
|
|
201
|
+
}
|
|
202
|
+
return /* @__PURE__ */ React.createElement(MaterialReactTable, { table: dataTable });
|
|
203
|
+
};
|
|
204
|
+
const queryClient = new QueryClient();
|
|
205
|
+
return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(DenseTable, null));
|
|
5
206
|
};
|
|
6
207
|
|
|
7
208
|
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 <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;;;;"}
|
|
1
|
+
{"version":3,"file":"MappingTable.esm.js","sources":["../../../src/components/PagerDutyPage/MappingTable.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { PagerDutyEntityMapping } from \"@pagerduty/backstage-plugin-common\";\nimport { MRT_ColumnDef, MRT_EditActionButtons, MRT_TableOptions, MaterialReactTable, useMaterialReactTable } from 'material-react-table';\nimport { Box, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip, Typography } from '@material-ui/core';\nimport { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';\nimport {Edit, OpenInBrowser } from '@mui/icons-material';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from \"../../api\";\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\ntype MappingTableProps = {\n mappings: PagerDutyEntityMapping[];\n catalogEntities: Service[];\n};\n\nexport const MappingTable = ({mappings, catalogEntities} : MappingTableProps) => {\n const DenseTable = () => {\n const [validationErrors, setValidationErrors] = useState<\n Record<string, string | undefined>\n >({});\n\n const pagerDutyApi = useApi(pagerDutyApiRef);\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: mappings,\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:\n mappings === undefined\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 <Edit />\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: mappings.length === 0 || catalogEntities.length === 0,\n isSaving: isUpdatingMapping,\n showAlertBanner:\n mappings === undefined || catalogEntities === undefined,\n showProgressBars: mappings.length === 0 || catalogEntities.length === 0,\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 = mappings.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 return <MaterialReactTable table={dataTable} />;\n };\n\n const queryClient = new QueryClient();\n\n return (\n <QueryClientProvider client={queryClient} >\n <DenseTable/>\n </QueryClientProvider>\n );\n}"],"names":[],"mappings":"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"}
|
|
@@ -36,10 +36,7 @@ const ServiceMappingComponent = () => {
|
|
|
36
36
|
fetchMappings();
|
|
37
37
|
fetchCatalogEntities();
|
|
38
38
|
}, [catalogApi, pagerDutyApi]);
|
|
39
|
-
return (
|
|
40
|
-
// <QueryClientProvider client={queryClient}>
|
|
41
|
-
/* @__PURE__ */ React.createElement(MappingTable, { mappings: entityMappings, catalogEntities })
|
|
42
|
-
);
|
|
39
|
+
return /* @__PURE__ */ React.createElement(MappingTable, { mappings: entityMappings, catalogEntities });
|
|
43
40
|
};
|
|
44
41
|
|
|
45
42
|
export { ServiceMappingComponent };
|
|
@@ -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() {\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;;;;"}
|
|
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\nexport const ServiceMappingComponent = () => {\n const [entityMappings, setEntityMappings] = useState<\n PagerDutyEntityMapping[]\n >([]);\n const [catalogEntities, setCatalogEntities] = useState<Service[]>([]);\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 return (\n <MappingTable mappings={entityMappings} catalogEntities={catalogEntities} />\n );\n};\n"],"names":[],"mappings":";;;;;;AAgBO,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;AAEpE,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;AAxClD,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAyCc,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;AAG7B,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,cAAA,EAAgB,eAAmC,EAAA,CAAA,CAAA;AAEjF;;;;"}
|
package/package.json
CHANGED