@perses-dev/alert-manager-plugin 0.1.0-rc.0

package/lib/cjs/model/alertmanager-client.js

@@ -0,0 +1,128 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get createSilence () {
+        return createSilence;
+    },
+    get deleteSilence () {
+        return deleteSilence;
+    },
+    get getAlerts () {
+        return getAlerts;
+    },
+    get getSilence () {
+        return getSilence;
+    },
+    get getSilences () {
+        return getSilences;
+    },
+    get getStatus () {
+        return getStatus;
+    }
+});
+const _client = require("@perses-dev/client");
+async function throwOnError(response) {
+    if (!response.ok) {
+        let message = response.statusText;
+        try {
+            const body = await response.json();
+            if (body?.message) message = body.message;
+        } catch  {
+        // no JSON body
+        }
+        throw new Error(message);
+    }
+}
+const executeRequest = async (...args)=>{
+    const response = await (0, _client.fetch)(...args);
+    await throwOnError(response);
+    try {
+        return await response.json();
+    } catch (e) {
+        console.error('Invalid response from server', e);
+        throw new Error('Invalid response from server');
+    }
+};
+function buildSearchParams(params) {
+    const urlSearchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value])=>{
+        if (value === undefined) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach((entry)=>urlSearchParams.append(key, String(entry)));
+            return;
+        }
+        urlSearchParams.append(key, String(value));
+    });
+    return urlSearchParams;
+}
+function fetchWithGet(apiURI, params, queryOptions) {
+    const { datasourceUrl, headers = {} } = queryOptions;
+    let url = `${datasourceUrl}${apiURI}`;
+    const urlParams = buildSearchParams(params).toString();
+    if (urlParams !== '') {
+        url += `?${urlParams}`;
+    }
+    return executeRequest(url, {
+        method: 'GET',
+        headers
+    });
+}
+function getAlerts(params, queryOptions) {
+    const opts = queryOptions ?? {
+        datasourceUrl: ''
+    };
+    return fetchWithGet('/api/v2/alerts', params ?? {}, opts);
+}
+function getSilences(params, queryOptions) {
+    const opts = queryOptions ?? {
+        datasourceUrl: ''
+    };
+    return fetchWithGet('/api/v2/silences', params ?? {}, opts);
+}
+function getSilence(id, queryOptions) {
+    return fetchWithGet(`/api/v2/silence/${encodeURIComponent(id)}`, {}, queryOptions);
+}
+function createSilence(silence, queryOptions) {
+    const { datasourceUrl, headers = {} } = queryOptions;
+    return executeRequest(`${datasourceUrl}/api/v2/silences`, {
+        method: 'POST',
+        headers: {
+            ...headers,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(silence)
+    });
+}
+async function deleteSilence(id, queryOptions) {
+    const { datasourceUrl, headers = {} } = queryOptions;
+    const response = await (0, _client.fetch)(`${datasourceUrl}/api/v2/silence/${encodeURIComponent(id)}`, {
+        method: 'DELETE',
+        headers
+    });
+    await throwOnError(response);
+}
+function getStatus(queryOptions) {
+    return fetchWithGet('/api/v2/status', {}, queryOptions);
+}

package/lib/cjs/model/alertmanager-selectors.js

@@ -0,0 +1,66 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ALERTMANAGER_DATASOURCE_KIND () {
+        return ALERTMANAGER_DATASOURCE_KIND;
+    },
+    get DEFAULT_ALERTMANAGER () {
+        return DEFAULT_ALERTMANAGER;
+    },
+    get extractDatasourceSelector () {
+        return extractDatasourceSelector;
+    },
+    get isAlertManagerDatasourceSelector () {
+        return isAlertManagerDatasourceSelector;
+    },
+    get isDefaultAlertManagerSelector () {
+        return isDefaultAlertManagerSelector;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const ALERTMANAGER_DATASOURCE_KIND = 'AlertManagerDatasource';
+const DEFAULT_ALERTMANAGER = {
+    kind: ALERTMANAGER_DATASOURCE_KIND
+};
+function isDefaultAlertManagerSelector(datasourceSelectValue) {
+    return !(0, _pluginsystem.isVariableDatasource)(datasourceSelectValue) && datasourceSelectValue.name === undefined;
+}
+function isAlertManagerDatasourceSelector(datasourceSelectValue) {
+    return (0, _pluginsystem.isVariableDatasource)(datasourceSelectValue) || datasourceSelectValue.kind === ALERTMANAGER_DATASOURCE_KIND;
+}
+function extractDatasourceSelector(queryResults) {
+    const defSpec = queryResults[0]?.definition?.spec;
+    if (defSpec && typeof defSpec === 'object' && 'plugin' in defSpec) {
+        const plugin = defSpec.plugin;
+        if (plugin && typeof plugin === 'object' && 'spec' in plugin) {
+            const spec = plugin.spec;
+            if (spec && typeof spec === 'object' && 'datasource' in spec) {
+                const ds = spec.datasource;
+                if (ds && typeof ds === 'object' && 'kind' in ds) {
+                    return ds;
+                }
+            }
+        }
+    }
+    return DEFAULT_ALERTMANAGER;
+}

package/lib/cjs/model/api-types.js

@@ -0,0 +1,22 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/**
+ * Alert Manager v2 API response types.
+ * Based on the Alertmanager OpenAPI v2 spec.
+ * @see https://github.com/prometheus/alertmanager/blob/main/api/v2/openapi.yaml
+ */ /**
+ * A matcher used by silences and alerts.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib/cjs/model/index.js

@@ -0,0 +1,32 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./api-types"), exports);
+_export_star(require("./alertmanager-client"), exports);
+_export_star(require("./alertmanager-selectors"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/plugins/AlertManagerDatasourceEditor.js

@@ -0,0 +1,71 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AlertManagerDatasourceEditor", {
+    enumerable: true,
+    get: function() {
+        return AlertManagerDatasourceEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function AlertManagerDatasourceEditor(props) {
+    const { value, onChange, isReadonly } = props;
+    const initialSpecDirect = {
+        directUrl: ''
+    };
+    const initialSpecProxy = {
+        proxy: {
+            kind: 'HTTPProxy',
+            spec: {
+                allowedEndpoints: [
+                    {
+                        endpointPattern: '/api/v2/alerts',
+                        method: 'GET'
+                    },
+                    {
+                        endpointPattern: '/api/v2/silences',
+                        method: 'GET'
+                    },
+                    {
+                        endpointPattern: '/api/v2/silences',
+                        method: 'POST'
+                    },
+                    {
+                        endpointPattern: '/api/v2/silence/.*',
+                        method: 'GET'
+                    },
+                    {
+                        endpointPattern: '/api/v2/silence/.*',
+                        method: 'DELETE'
+                    },
+                    {
+                        endpointPattern: '/api/v2/status',
+                        method: 'GET'
+                    }
+                ],
+                url: ''
+            }
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.HTTPSettingsEditor, {
+        value: value,
+        onChange: onChange,
+        isReadonly: isReadonly,
+        initialSpecDirect: initialSpecDirect,
+        initialSpecProxy: initialSpecProxy
+    });
+}

package/lib/cjs/plugins/alert-table/AlertTable.js

@@ -0,0 +1,56 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AlertTable", {
+    enumerable: true,
+    get: function() {
+        return AlertTable;
+    }
+});
+const _AlertTableColumnsEditor = require("./AlertTableColumnsEditor");
+const _AlertTableDeduplicationEditor = require("./AlertTableDeduplicationEditor");
+const _AlertTableLabelsEditor = require("./AlertTableLabelsEditor");
+const _AlertTableOptionsEditor = require("./AlertTableOptionsEditor");
+const _AlertTablePanel = require("./AlertTablePanel");
+const AlertTable = {
+    PanelComponent: _AlertTablePanel.AlertTablePanel,
+    supportedQueryTypes: [
+        'AlertsQuery'
+    ],
+    panelOptionsEditorComponents: [
+        {
+            label: 'General',
+            content: _AlertTableOptionsEditor.AlertTableOptionsEditor
+        },
+        {
+            label: 'Columns',
+            content: _AlertTableColumnsEditor.AlertTableColumnsEditor
+        },
+        {
+            label: 'Labels',
+            content: _AlertTableLabelsEditor.AlertTableLabelsEditor
+        },
+        {
+            label: 'Deduplication',
+            content: _AlertTableDeduplicationEditor.AlertTableDeduplicationEditor
+        }
+    ],
+    createInitialOptions: ()=>({
+            defaultGroupBy: [
+                'alertname'
+            ]
+        })
+};

package/lib/cjs/plugins/alert-table/AlertTableColumnsEditor.js

@@ -0,0 +1,110 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AlertTableColumnsEditor", {
+    enumerable: true,
+    get: function() {
+        return AlertTableColumnsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _immer = require("immer");
+const _react = require("react");
+const _ColumnsEditor = require("../../components/ColumnsEditor");
+const SORT_MODE_LABELS = {
+    alphabetical: 'Alphabetical',
+    numeric: 'Numeric',
+    severity: 'Severity (critical → other)',
+    status: 'Status (firing → resolved)'
+};
+function AlertTableColumnsEditor(props) {
+    const { value, onChange } = props;
+    const columns = value.columns ?? [];
+    const handleAddColumn = (0, _react.useCallback)(()=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.columns) draft.columns = [];
+            draft.columns.push({
+                name: ''
+            });
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleRemoveColumn = (0, _react.useCallback)((index)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.columns?.splice(index, 1);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleUpdateColumn = (0, _react.useCallback)((index, updater)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            const column = draft.columns?.[index];
+            if (column) {
+                updater(column);
+            }
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleMoveUp = (0, _react.useCallback)((index)=>{
+        if (index <= 0) return;
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.columns) return;
+            const item = draft.columns.splice(index, 1)[0];
+            draft.columns.splice(index - 1, 0, item);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleMoveDown = (0, _react.useCallback)((index)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.columns || index >= draft.columns.length - 1) return;
+            const item = draft.columns.splice(index, 1)[0];
+            draft.columns.splice(index + 1, 0, item);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColumnsEditor.ColumnsEditor, {
+        columns: columns,
+        description: "Status and Alert Name are always shown. Add extra columns below.",
+        sortModeLabels: SORT_MODE_LABELS,
+        defaultSortMode: "alphabetical",
+        getDisplayName: (col)=>col.header || col.name || 'New column',
+        getHeaderPlaceholder: (col)=>col.name || 'Column header',
+        onAdd: handleAddColumn,
+        onRemove: handleRemoveColumn,
+        onUpdate: handleUpdateColumn,
+        onMoveUp: handleMoveUp,
+        onMoveDown: handleMoveDown,
+        renderNameField: (col, index, onUpdate)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                label: "Label key",
+                value: col.name,
+                onChange: (e)=>onUpdate(index, (draft)=>{
+                        draft.name = e.target.value;
+                    }),
+                size: "small",
+                fullWidth: true
+            })
+    });
+}

package/lib/cjs/plugins/alert-table/AlertTableDeduplicationEditor.js

@@ -0,0 +1,138 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AlertTableDeduplicationEditor", {
+    enumerable: true,
+    get: function() {
+        return AlertTableDeduplicationEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _immer = require("immer");
+const _react = require("react");
+const MODE_DESCRIPTIONS = {
+    none: 'No deduplication. All alerts from all datasources are shown as-is.',
+    fingerprint: 'Alerts with the same fingerprint from different datasources are merged. This is the default.',
+    labels: 'Alerts are considered duplicates when all specified label values match.'
+};
+function AlertTableDeduplicationEditor(props) {
+    const { value, onChange } = props;
+    const dedup = value.deduplication ?? {
+        mode: 'fingerprint'
+    };
+    const handleModeChange = (0, _react.useCallback)((mode)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.deduplication = {
+                mode
+            };
+            if (mode === 'labels') {
+                draft.deduplication.labels = draft.deduplication.labels ?? [];
+            }
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleLabelsChange = (0, _react.useCallback)((_event, newLabels)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.deduplication) {
+                draft.deduplication = {
+                    mode: 'labels'
+                };
+            }
+            draft.deduplication.labels = newLabels.length > 0 ? newLabels : undefined;
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                title: "Mode",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                        size: "small",
+                        fullWidth: true,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                                id: "dedup-mode-label",
+                                children: "Deduplication Mode"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
+                                labelId: "dedup-mode-label",
+                                value: dedup.mode,
+                                label: "Deduplication Mode",
+                                onChange: (e)=>handleModeChange(e.target.value),
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: "none",
+                                        children: "None"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: "fingerprint",
+                                        children: "Fingerprint"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: "labels",
+                                        children: "Labels"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        sx: {
+                            mt: 1
+                        },
+                        children: MODE_DESCRIPTIONS[dedup.mode]
+                    })
+                ]
+            }),
+            dedup.mode === 'labels' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                title: "Deduplication Labels",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                    multiple: true,
+                    freeSolo: true,
+                    options: [],
+                    value: dedup.labels ?? [],
+                    onChange: handleLabelsChange,
+                    renderTags: (tagValues, getTagProps)=>tagValues.map((option, index)=>{
+                            const { key, ...rest } = getTagProps({
+                                index
+                            });
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                                label: option,
+                                size: "small",
+                                variant: "outlined",
+                                ...rest
+                            }, key);
+                        }),
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                            ...params,
+                            size: "small",
+                            placeholder: "Type a label key and press Enter",
+                            helperText: "Alerts with identical values for all listed labels are considered duplicates."
+                        })
+                })
+            })
+        ]
+    });
+}