@perses-dev/alert-manager-plugin 0.1.0

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

@@ -0,0 +1,277 @@
+// 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, "AlertTableLabelsEditor", {
+    enumerable: true,
+    get: function() {
+        return AlertTableLabelsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _immer = require("immer");
+const _Delete = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Delete"));
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _react = require("react");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const MODE_LABELS = {
+    auto: 'Auto (hash-derived colors)',
+    severity: 'Severity (built-in defaults)',
+    manual: 'Manual (overrides only)'
+};
+function LabelMappingEntry({ mapping, index, onUpdate, onRemove }) {
+    const handleAddOverride = (0, _react.useCallback)(()=>{
+        onUpdate(index, (draft)=>{
+            if (!draft.overrides) draft.overrides = [];
+            draft.overrides.push({
+                value: '',
+                isRegex: false,
+                color: '#1976d2'
+            });
+        });
+    }, [
+        index,
+        onUpdate
+    ]);
+    const handleRemoveOverride = (0, _react.useCallback)((overrideIndex)=>{
+        onUpdate(index, (draft)=>{
+            draft.overrides?.splice(overrideIndex, 1);
+        });
+    }, [
+        index,
+        onUpdate
+    ]);
+    const handleUpdateOverride = (0, _react.useCallback)((overrideIndex, field, fieldValue)=>{
+        onUpdate(index, (draft)=>{
+            const override = draft.overrides?.[overrideIndex];
+            if (override) {
+                if (field === 'isRegex') {
+                    override.isRegex = fieldValue;
+                } else {
+                    override[field] = fieldValue;
+                }
+            }
+        });
+    }, [
+        index,
+        onUpdate
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        sx: {
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 1,
+            p: 2
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "subtitle2",
+                            children: mapping.labelKey || 'New label'
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                            size: "small",
+                            onClick: ()=>onRemove(index),
+                            "aria-label": "Remove label mapping",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Delete.default, {
+                                fontSize: "small"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Label key",
+                    value: mapping.labelKey,
+                    onChange: (e)=>onUpdate(index, (draft)=>{
+                            draft.labelKey = e.target.value;
+                        }),
+                    size: "small",
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                    size: "small",
+                    fullWidth: true,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                            id: `color-mode-label-${index}`,
+                            children: "Mode"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
+                            labelId: `color-mode-label-${index}`,
+                            value: mapping.mode,
+                            onChange: (e)=>onUpdate(index, (draft)=>{
+                                    draft.mode = e.target.value;
+                                }),
+                            label: "Mode",
+                            children: Object.keys(MODE_LABELS).map((mode)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: mode,
+                                    children: MODE_LABELS[mode]
+                                }, mode))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            sx: {
+                                mb: 1
+                            },
+                            children: "Overrides"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            spacing: 1,
+                            children: [
+                                (mapping.overrides ?? []).map((override, overrideIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        alignItems: "center",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                label: "Value / Pattern",
+                                                value: override.value,
+                                                onChange: (e)=>handleUpdateOverride(overrideIndex, 'value', e.target.value),
+                                                size: "small",
+                                                sx: {
+                                                    flex: 1
+                                                }
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                                    checked: override.isRegex,
+                                                    onChange: (e)=>handleUpdateOverride(overrideIndex, 'isRegex', e.target.checked),
+                                                    size: "small"
+                                                }),
+                                                label: "Regex"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                                type: "color",
+                                                value: override.color,
+                                                onChange: (e)=>handleUpdateOverride(overrideIndex, 'color', e.target.value),
+                                                style: {
+                                                    width: 36,
+                                                    height: 28,
+                                                    border: 'none',
+                                                    cursor: 'pointer'
+                                                }
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                size: "small",
+                                                onClick: ()=>handleRemoveOverride(overrideIndex),
+                                                "aria-label": "Remove override",
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Delete.default, {
+                                                    fontSize: "small"
+                                                })
+                                            })
+                                        ]
+                                    }, overrideIndex)),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    size: "small",
+                                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                                    onClick: handleAddOverride,
+                                    children: "Add override"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function AlertTableLabelsEditor(props) {
+    const { value, onChange } = props;
+    const mappings = value.labelColorMappings ?? [];
+    const handleAddMapping = (0, _react.useCallback)(()=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.labelColorMappings) draft.labelColorMappings = [];
+            draft.labelColorMappings.push({
+                labelKey: '',
+                mode: 'auto'
+            });
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleRemoveMapping = (0, _react.useCallback)((index)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.labelColorMappings?.splice(index, 1);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleUpdateMapping = (0, _react.useCallback)((index, updater)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            const mapping = draft.labelColorMappings?.[index];
+            if (mapping) {
+                updater(mapping);
+            }
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+        title: "Label Color Mappings",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [
+                mappings.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: "No label color mappings configured. Add one to color label values in the table."
+                }),
+                mappings.map((mapping, index)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        children: [
+                            index > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                                sx: {
+                                    mb: 2
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(LabelMappingEntry, {
+                                mapping: mapping,
+                                index: index,
+                                onUpdate: handleUpdateMapping,
+                                onRemove: handleRemoveMapping
+                            })
+                        ]
+                    }, index)),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    variant: "outlined",
+                    size: "small",
+                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                    onClick: handleAddMapping,
+                    children: "Add label mapping"
+                })
+            ]
+        })
+    });
+}

package/lib/cjs/plugins/alert-table/AlertTableOptionsEditor.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
+});
+Object.defineProperty(exports, "AlertTableOptionsEditor", {
+    enumerable: true,
+    get: function() {
+        return AlertTableOptionsEditor;
+    }
+});
+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 _alerttablemodel = require("./alert-table-model");
+const ACTION_LABELS = {
+    silence: 'Silence alert',
+    runbook: 'View runbook'
+};
+function AlertTableOptionsEditor(props) {
+    const { value, onChange } = props;
+    const effectiveActions = value.allowedActions ?? _alerttablemodel.ALL_ALERT_ACTIONS;
+    const groupBy = value.defaultGroupBy ?? [
+        'alertname'
+    ];
+    const handleGroupByChange = (0, _react.useCallback)((_event, newValue)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.defaultGroupBy = newValue.length > 0 ? newValue : undefined;
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleRunbookKeyChange = (0, _react.useCallback)((e)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            const trimmed = e.target.value.trim();
+            draft.runbookAnnotationKey = trimmed || undefined;
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleToggle = (0, _react.useCallback)((action, checked)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            const current = draft.allowedActions ?? [
+                ..._alerttablemodel.ALL_ALERT_ACTIONS
+            ];
+            if (checked) {
+                if (!current.includes(action)) current.push(action);
+            } else {
+                const idx = current.indexOf(action);
+                if (idx >= 0) current.splice(idx, 1);
+            }
+            draft.allowedActions = current;
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                title: "Group By",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                    multiple: true,
+                    freeSolo: true,
+                    options: [],
+                    value: groupBy,
+                    onChange: handleGroupByChange,
+                    renderTags: (tagValues, getTagProps)=>tagValues.map((option, index)=>{
+                            const { key, ...rest } = getTagProps({
+                                index
+                            });
+                            const isVariable = option.includes('$');
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                                label: option,
+                                size: "small",
+                                variant: isVariable ? 'filled' : 'outlined',
+                                color: isVariable ? 'primary' : 'default',
+                                ...rest
+                            }, key);
+                        }),
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                            ...params,
+                            size: "small",
+                            placeholder: "Type a label key or $variable and press Enter",
+                            helperText: "Label keys to group alerts by. Supports $variable interpolation."
+                        })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                title: "Actions",
+                children: _alerttablemodel.ALL_ALERT_ACTIONS.map((action)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                            checked: effectiveActions.includes(action),
+                            onChange: (e)=>handleToggle(action, e.target.checked),
+                            size: "small"
+                        }),
+                        label: ACTION_LABELS[action]
+                    }, action))
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                title: "Runbook",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    size: "small",
+                    fullWidth: true,
+                    value: value.runbookAnnotationKey ?? '',
+                    onChange: handleRunbookKeyChange,
+                    placeholder: "runbook_url",
+                    helperText: "Annotation key used to extract the runbook URL. Defaults to runbook_url."
+                })
+            })
+        ]
+    });
+}