@perses-dev/alert-manager-plugin 0.1.1 → 0.2.0-beta.1

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

@@ -1,277 +0,0 @@
-// 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

@@ -1,128 +0,0 @@
-// 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."
-                })
-            })
-        ]
-    });
-}