@pagerduty/backstage-plugin 0.13.0-next.27 → 0.13.0-next.29
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 +204 -2
- package/dist/components/PagerDutyPage/MappingTable.esm.js.map +1 -1
- package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js +6 -5
- package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,209 @@
|
|
|
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
|
+
const foundServiceAnnotation = entity.annotations["pagerduty.com/service-id"];
|
|
194
|
+
if (!foundEntity || !foundServiceAnnotation) {
|
|
195
|
+
options.push({
|
|
196
|
+
value: entity.id,
|
|
197
|
+
label: entity.name
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
return options;
|
|
202
|
+
}
|
|
203
|
+
return /* @__PURE__ */ React.createElement(MaterialReactTable, { table: dataTable });
|
|
204
|
+
};
|
|
205
|
+
const queryClient = new QueryClient();
|
|
206
|
+
return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(DenseTable, null));
|
|
5
207
|
};
|
|
6
208
|
|
|
7
209
|
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 BackstageEntity = {\n name: string; // \"Ads\"\n id: string; // \"QWe1j283n12j132\"\n system: string; // \"Production\"\n owner: string; // \"Mapped\"\n lifecycle: string; // \"Ads\"\n annotations: Annotations;\n};\n\nexport type Annotations = {\n \"pagerduty.com/integration-key\": string;\n \"pagerduty.com/service-id\": string;\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: BackstageEntity[];\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 const foundServiceAnnotation = entity.annotations[\"pagerduty.com/service-id\"];\n\n if (!foundEntity || !foundServiceAnnotation) {\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":";;;;;;;;AAuBA,SAAS,mBAAmB,MAAiB,EAAA;AAC3C,EAAA,QAAQ,MAAQ;AAAA,IACd,KAAK,QAAA;AACH,MAAO,OAAA,OAAA,CAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,KAAA,CAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,QAAA,CAAA;AAAA,IACT;AACE,MAAO,OAAA,MAAA,CAAA;AAAA,GACX;AACF,CAAA;AAEA,SAAS,aAAa,MAAiB,EAAA;AACrC,EAAA,QAAQ,MAAQ;AAAA,IACd,KAAK,QAAA;AACH,MAAO,OAAA,SAAA,CAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,aAAA,CAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,YAAA,CAAA;AAAA,IACT;AACE,MAAO,OAAA,mBAAA,CAAA;AAAA,GACX;AACF,CAAA;AAYO,MAAM,YAAe,GAAA,CAAC,EAAC,QAAA,EAAU,iBAAyC,KAAA;AAC/E,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,MAAM,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAA,QAAA,CAE9C,EAAE,CAAA,CAAA;AAEJ,IAAM,MAAA,YAAA,GAAe,OAAO,eAAe,CAAA,CAAA;AAE3C,IAAA,MAAM,OAAU,GAAA,OAAA;AAAA,MACd,MAAM;AAAA,QACJ;AAAA,UACE,WAAa,EAAA,WAAA;AAAA,UACb,MAAQ,EAAA,YAAA;AAAA,UACR,qBAAuB,EAAA,KAAA;AAAA,UACvB,aAAe,EAAA,KAAA;AAAA,UACf,MAAM,MAAM,IAAA;AAAA,UACZ,MAAM,CAAC,EAAE,IAAK,EAAA,yCACX,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,GAAA,EAC9C,EAAA,EAAA,IAAA,CAAK,UACR,CAAA;AAAA,SAEJ;AAAA,QACA;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,qBAAuB,EAAA,KAAA;AAAA,UACvB,WAAa,EAAA,QAAA;AAAA,UACb,mBAAmB,uBAAwB,EAAA;AAAA,UAC3C,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,YAAA;AAAA,UACb,MAAQ,EAAA,oBAAA;AAAA,UACR,aAAe,EAAA,KAAA;AAAA,UACf,MAAM,MAAM,IAAA;AAAA,SACd;AAAA,QACA;AAAA,UACE,WAAa,EAAA,QAAA;AAAA,UACb,MAAQ,EAAA,QAAA;AAAA,UACR,aAAe,EAAA,KAAA;AAAA,UACf,MAAM,MAAM,IAAA;AAAA,UACZ,IAAM,EAAA,CAAC,EAAE,IAAA,EACP,qBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,MAAA;AAAA,cACV,OAAS,EAAA,kBAAA,CAAmB,IAAK,CAAA,QAAA,EAAkB,CAAA;AAAA,cACnD,YAAa,EAAA,SAAA;AAAA,cACb,KAAM,EAAA,OAAA;AAAA,cACN,CAAE,EAAA,SAAA;AAAA,aAAA;AAAA,YAED,YAAA,CAAa,IAAK,CAAA,QAAA,EAAkB,CAAA;AAAA,WACvC;AAAA,SAEJ;AAAA,QACA;AAAA,UACE,WAAa,EAAA,YAAA;AAAA,UACb,MAAQ,EAAA,aAAA;AAAA,UACR,qBAAuB,EAAA,KAAA;AAAA,UACvB,aAAe,EAAA,KAAA;AAAA,UACf,MAAM,MAAM,IAAA;AAAA,SACd;AAAA,OACF;AAAA,MACA,CAAC,gBAAgB,CAAA;AAAA,KACnB,CAAA;AAGA,IAAA,SAAS,gBAAmB,GAAA;AAE1B,MAAA,OAAO,WAAY,CAAA;AAAA,QACjB,UAAA,EAAY,OAAO,OAAoC,KAAA;AACrD,UAAA,OAAO,MAAM,YAAa,CAAA,mBAAA;AAAA,YACxB,OAAQ,CAAA,SAAA;AAAA,YACR,OAAQ,CAAA,SAAA;AAAA,WACV,CAAA;AAAA,SACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAiBD,CAAA,CAAA;AAAA,KACH;AAGA,IAAA,MAAM,EAAE,WAAa,EAAA,aAAA,EAAe,SAAW,EAAA,iBAAA,KAC7C,gBAAiB,EAAA,CAAA;AAGnB,IAAA,MAAM,iBACJ,GAAA,OAAO,EAAE,MAAA,EAAQ,OAAY,KAAA;AAjLnC,MAAA,IAAA,EAAA,CAAA;AAkLQ,MAAA,mBAAA,CAAoB,EAAE,CAAA,CAAA;AACtB,MAAO,MAAA,CAAA,UAAA,GAAA,CAAA,CACL,EAAgB,GAAA,eAAA,CAAA,IAAA,CAAK,CAAC,MAAA,KAAW,MAAO,CAAA,EAAA,KAAO,MAAO,CAAA,SAAS,CAA/D,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CACI,IAAQ,KAAA,EAAA,CAAA;AACd,MAAA,MAAA,CAAO,MAAS,GAAA,iBAAA,CAAA;AAChB,MAAA,MAAM,cAAc,MAAM,CAAA,CAAA;AAC1B,MAAA,KAAA,CAAM,cAAc,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEF,IAAM,MAAA,aAAA,GAAgB,CAAC,GAAgB,KAAA;AACrC,MAAO,MAAA,CAAA,IAAA,CAAK,GAAK,EAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AAAA,KACzC,CAAA;AAEA,IAAA,MAAM,YAAY,qBAAsB,CAAA;AAAA,MACtC,OAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,eAAiB,EAAA,OAAA;AAAA;AAAA,MACjB,aAAe,EAAA,IAAA;AAAA,MACf,qBAAuB,EAAA,MAAA;AAAA,MACvB,kBAAoB,EAAA,IAAA;AAAA,MACpB,aAAe,EAAA,IAAA;AAAA,MACf,QAAA,EAAU,CAAC,GAAA,KAAQ,GAAI,CAAA,SAAA;AAAA,MACvB,0BAAA,EACE,aAAa,KACT,CAAA,GAAA;AAAA,QACE,KAAO,EAAA,OAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,OAEZ,GAAA,KAAA,CAAA;AAAA,MACN,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,iBAAA;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,qBAAe,sBAAuB,EAAA,GAAC,CACxC,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,OACxB,qBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,MAAO,EAAA,EAAA,sCACxB,OAAQ,EAAA,EAAA,KAAA,EAAM,MACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAS,MAAM,KAAA,CAAM,cAAc,GAAG,CAAA,EAAA,kBAC/C,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,CACR,CACF,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,OAAM,mBACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,aAAA,CAAc,GAAI,CAAA,QAAA,CAAS,YAAY,CAAC,CAAA;AAAA,SAAA;AAAA,4CAEtD,aAAc,EAAA,IAAA,CAAA;AAAA,OAEnB,CACF,CAAA;AAAA,MAEF,KAAO,EAAA;AAAA,QACL,SAAW,EAAA,QAAA,CAAS,MAAW,KAAA,CAAA,IAAK,gBAAgB,MAAW,KAAA,CAAA;AAAA,QAC/D,QAAU,EAAA,iBAAA;AAAA,QACV,eAAA,EACE,QAAa,KAAA,KAAA,CAAA,IAAa,eAAoB,KAAA,KAAA,CAAA;AAAA,QAChD,gBAAkB,EAAA,QAAA,CAAS,MAAW,KAAA,CAAA,IAAK,gBAAgB,MAAW,KAAA,CAAA;AAAA,QACtE,gBAAkB,EAAA;AAAA,UAChB,SAAW,EAAA,KAAA;AAAA,UACX,SAAW,EAAA,KAAA;AAAA,UACX,UAAY,EAAA,KAAA;AAAA,SACd;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAED,IAAA,SAAS,uBAAkD,GAAA;AACzD,MAAA,MAAM,UAAkC,EAAC,CAAA;AAGzC,MAAA,OAAA,CAAQ,KAAK,EAAE,KAAA,EAAO,EAAI,EAAA,KAAA,EAAO,QAAQ,CAAA,CAAA;AAGzC,MAAgB,eAAA,CAAA,OAAA,CAAQ,CAAC,MAAW,KAAA;AAElC,QAAA,MAAM,cAAc,QAAS,CAAA,IAAA;AAAA,UAC3B,CAAC,IAAA,KAAS,IAAK,CAAA,SAAA,KAAc,MAAO,CAAA,EAAA;AAAA,SACtC,CAAA;AAEA,QAAM,MAAA,sBAAA,GAAyB,MAAO,CAAA,WAAA,CAAY,0BAA0B,CAAA,CAAA;AAE5E,QAAI,IAAA,CAAC,WAAe,IAAA,CAAC,sBAAwB,EAAA;AAC3C,UAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,YACX,OAAO,MAAO,CAAA,EAAA;AAAA,YACd,OAAO,MAAO,CAAA,IAAA;AAAA,WACf,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA,CAAA;AAED,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAEA,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,EAAA,KAAA,EAAO,SAAW,EAAA,CAAA,CAAA;AAAA,GAC/C,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,IAAI,WAAY,EAAA,CAAA;AAEpC,EAAA,2CACG,mBAAoB,EAAA,EAAA,MAAA,EAAQ,WACzB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAU,CACf,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -22,12 +22,16 @@ const ServiceMappingComponent = () => {
|
|
|
22
22
|
const entities = [];
|
|
23
23
|
result.items.forEach((entity) => {
|
|
24
24
|
var _a, _b, _c, _d, _e, _f;
|
|
25
|
+
const annotations = JSON.parse(
|
|
26
|
+
JSON.stringify(entity.metadata.annotations)
|
|
27
|
+
);
|
|
25
28
|
entities.push({
|
|
26
29
|
name: (_a = entity.metadata) == null ? void 0 : _a.name,
|
|
27
30
|
id: (_c = (_b = entity.metadata) == null ? void 0 : _b.uid) != null ? _c : "",
|
|
28
31
|
system: JSON.stringify((_d = entity.spec) == null ? void 0 : _d.system) || "",
|
|
29
32
|
owner: JSON.stringify((_e = entity.spec) == null ? void 0 : _e.owner) || "",
|
|
30
|
-
lifecycle: JSON.stringify((_f = entity.spec) == null ? void 0 : _f.lifecycle) || ""
|
|
33
|
+
lifecycle: JSON.stringify((_f = entity.spec) == null ? void 0 : _f.lifecycle) || "",
|
|
34
|
+
annotations
|
|
31
35
|
});
|
|
32
36
|
});
|
|
33
37
|
setCatalogEntities(entities);
|
|
@@ -36,10 +40,7 @@ const ServiceMappingComponent = () => {
|
|
|
36
40
|
fetchMappings();
|
|
37
41
|
fetchCatalogEntities();
|
|
38
42
|
}, [catalogApi, pagerDutyApi]);
|
|
39
|
-
return (
|
|
40
|
-
// <QueryClientProvider client={queryClient}>
|
|
41
|
-
/* @__PURE__ */ React.createElement(MappingTable, { mappings: entityMappings, catalogEntities })
|
|
42
|
-
);
|
|
43
|
+
return /* @__PURE__ */ React.createElement(MappingTable, { mappings: entityMappings, catalogEntities });
|
|
43
44
|
};
|
|
44
45
|
|
|
45
46
|
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 BackstageEntity = {\n name: string; // \"Ads\"\n id: string; // \"QWe1j283n12j132\"\n system: string; // \"Production\"\n owner: string; // \"Mapped\"\n lifecycle: string; // \"Ads\"\n annotations: Annotations;\n};\n\nexport type Annotations = {\n \"pagerduty.com/integration-key\": string;\n \"pagerduty.com/service-id\": string;\n};\n\n\nexport const ServiceMappingComponent = () => {\n const [entityMappings, setEntityMappings] = useState<\n PagerDutyEntityMapping[]\n >([]);\n const [catalogEntities, setCatalogEntities] = useState<BackstageEntity[]>([]);\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: BackstageEntity[] = [];\n result.items.forEach((entity: any) => {\n const annotations: Annotations = JSON.parse(\n JSON.stringify(entity.metadata.annotations)\n );\n\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 annotations: annotations,\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":";;;;;;AAsBO,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,CAA4B,EAAE,CAAA,CAAA;AAE5E,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,WAA8B,EAAC,CAAA;AACrC,QAAO,MAAA,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,MAAgB,KAAA;AA9ClD,UAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AA+Cc,UAAA,MAAM,cAA2B,IAAK,CAAA,KAAA;AAAA,YACpC,IAAK,CAAA,SAAA,CAAU,MAAO,CAAA,QAAA,CAAS,WAAW,CAAA;AAAA,WAC5C,CAAA;AAEA,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,YACrD,WAAA;AAAA,WACD,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