@perses-dev/alert-manager-plugin 0.1.0

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

@@ -0,0 +1,264 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+import { Box, Button, Checkbox, Divider, FormControl, FormControlLabel, IconButton, InputLabel, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
+import { OptionsEditorGroup } from '@perses-dev/components';
+import { produce } from 'immer';
+import DeleteIcon from 'mdi-material-ui/Delete';
+import PlusIcon from 'mdi-material-ui/Plus';
+import { useCallback } from 'react';
+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 = useCallback(()=>{
+        onUpdate(index, (draft)=>{
+            if (!draft.overrides) draft.overrides = [];
+            draft.overrides.push({
+                value: '',
+                isRegex: false,
+                color: '#1976d2'
+            });
+        });
+    }, [
+        index,
+        onUpdate
+    ]);
+    const handleRemoveOverride = useCallback((overrideIndex)=>{
+        onUpdate(index, (draft)=>{
+            draft.overrides?.splice(overrideIndex, 1);
+        });
+    }, [
+        index,
+        onUpdate
+    ]);
+    const handleUpdateOverride = 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__*/ _jsx(Box, {
+        sx: {
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 1,
+            p: 2
+        },
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle2",
+                            children: mapping.labelKey || 'New label'
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            size: "small",
+                            onClick: ()=>onRemove(index),
+                            "aria-label": "Remove label mapping",
+                            children: /*#__PURE__*/ _jsx(DeleteIcon, {
+                                fontSize: "small"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "Label key",
+                    value: mapping.labelKey,
+                    onChange: (e)=>onUpdate(index, (draft)=>{
+                            draft.labelKey = e.target.value;
+                        }),
+                    size: "small",
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ _jsxs(FormControl, {
+                    size: "small",
+                    fullWidth: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(InputLabel, {
+                            id: `color-mode-label-${index}`,
+                            children: "Mode"
+                        }),
+                        /*#__PURE__*/ _jsx(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__*/ _jsx(MenuItem, {
+                                    value: mode,
+                                    children: MODE_LABELS[mode]
+                                }, mode))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            sx: {
+                                mb: 1
+                            },
+                            children: "Overrides"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1,
+                            children: [
+                                (mapping.overrides ?? []).map((override, overrideIndex)=>/*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        alignItems: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Value / Pattern",
+                                                value: override.value,
+                                                onChange: (e)=>handleUpdateOverride(overrideIndex, 'value', e.target.value),
+                                                size: "small",
+                                                sx: {
+                                                    flex: 1
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                                control: /*#__PURE__*/ _jsx(Checkbox, {
+                                                    checked: override.isRegex,
+                                                    onChange: (e)=>handleUpdateOverride(overrideIndex, 'isRegex', e.target.checked),
+                                                    size: "small"
+                                                }),
+                                                label: "Regex"
+                                            }),
+                                            /*#__PURE__*/ _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__*/ _jsx(IconButton, {
+                                                size: "small",
+                                                onClick: ()=>handleRemoveOverride(overrideIndex),
+                                                "aria-label": "Remove override",
+                                                children: /*#__PURE__*/ _jsx(DeleteIcon, {
+                                                    fontSize: "small"
+                                                })
+                                            })
+                                        ]
+                                    }, overrideIndex)),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    startIcon: /*#__PURE__*/ _jsx(PlusIcon, {}),
+                                    onClick: handleAddOverride,
+                                    children: "Add override"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export function AlertTableLabelsEditor(props) {
+    const { value, onChange } = props;
+    const mappings = value.labelColorMappings ?? [];
+    const handleAddMapping = useCallback(()=>{
+        onChange(produce(value, (draft)=>{
+            if (!draft.labelColorMappings) draft.labelColorMappings = [];
+            draft.labelColorMappings.push({
+                labelKey: '',
+                mode: 'auto'
+            });
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleRemoveMapping = useCallback((index)=>{
+        onChange(produce(value, (draft)=>{
+            draft.labelColorMappings?.splice(index, 1);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleUpdateMapping = useCallback((index, updater)=>{
+        onChange(produce(value, (draft)=>{
+            const mapping = draft.labelColorMappings?.[index];
+            if (mapping) {
+                updater(mapping);
+            }
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+        title: "Label Color Mappings",
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                mappings.length === 0 && /*#__PURE__*/ _jsx(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__*/ _jsxs(Box, {
+                        children: [
+                            index > 0 && /*#__PURE__*/ _jsx(Divider, {
+                                sx: {
+                                    mb: 2
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(LabelMappingEntry, {
+                                mapping: mapping,
+                                index: index,
+                                onUpdate: handleUpdateMapping,
+                                onRemove: handleRemoveMapping
+                            })
+                        ]
+                    }, index)),
+                /*#__PURE__*/ _jsx(Button, {
+                    variant: "outlined",
+                    size: "small",
+                    startIcon: /*#__PURE__*/ _jsx(PlusIcon, {}),
+                    onClick: handleAddMapping,
+                    children: "Add label mapping"
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=AlertTableLabelsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/plugins/alert-table/AlertTableLabelsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  Checkbox,\n  Divider,\n  FormControl,\n  FormControlLabel,\n  IconButton,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { OptionsEditorGroup } from '@perses-dev/components';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ReactElement, useCallback } from 'react';\nimport { AlertTableOptions, LabelColorMapping, LabelColorOverride } from './alert-table-model';\n\nconst MODE_LABELS: Record<LabelColorMapping['mode'], string> = {\n  auto: 'Auto (hash-derived colors)',\n  severity: 'Severity (built-in defaults)',\n  manual: 'Manual (overrides only)',\n};\n\nfunction LabelMappingEntry({\n  mapping,\n  index,\n  onUpdate,\n  onRemove,\n}: {\n  mapping: LabelColorMapping;\n  index: number;\n  onUpdate: (index: number, updater: (draft: LabelColorMapping) => void) => void;\n  onRemove: (index: number) => void;\n}): ReactElement {\n  const handleAddOverride = useCallback((): void => {\n    onUpdate(index, (draft) => {\n      if (!draft.overrides) draft.overrides = [];\n      draft.overrides.push({ value: '', isRegex: false, color: '#1976d2' });\n    });\n  }, [index, onUpdate]);\n\n  const handleRemoveOverride = useCallback(\n    (overrideIndex: number): void => {\n      onUpdate(index, (draft) => {\n        draft.overrides?.splice(overrideIndex, 1);\n      });\n    },\n    [index, onUpdate]\n  );\n\n  const handleUpdateOverride = useCallback(\n    (overrideIndex: number, field: keyof LabelColorOverride, fieldValue: string | boolean): void => {\n      onUpdate(index, (draft) => {\n        const override = draft.overrides?.[overrideIndex];\n        if (override) {\n          if (field === 'isRegex') {\n            override.isRegex = fieldValue as boolean;\n          } else {\n            override[field] = fieldValue as string;\n          }\n        }\n      });\n    },\n    [index, onUpdate]\n  );\n\n  return (\n    <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 2 }}>\n      <Stack spacing={2}>\n        <Stack direction=\"row\" spacing={1} alignItems=\"center\" justifyContent=\"space-between\">\n          <Typography variant=\"subtitle2\">{mapping.labelKey || 'New label'}</Typography>\n          <IconButton size=\"small\" onClick={() => onRemove(index)} aria-label=\"Remove label mapping\">\n            <DeleteIcon fontSize=\"small\" />\n          </IconButton>\n        </Stack>\n        <TextField\n          label=\"Label key\"\n          value={mapping.labelKey}\n          onChange={(e) =>\n            onUpdate(index, (draft) => {\n              draft.labelKey = e.target.value;\n            })\n          }\n          size=\"small\"\n          fullWidth\n        />\n        <FormControl size=\"small\" fullWidth>\n          <InputLabel id={`color-mode-label-${index}`}>Mode</InputLabel>\n          <Select\n            labelId={`color-mode-label-${index}`}\n            value={mapping.mode}\n            onChange={(e) =>\n              onUpdate(index, (draft) => {\n                draft.mode = e.target.value as LabelColorMapping['mode'];\n              })\n            }\n            label=\"Mode\"\n          >\n            {(Object.keys(MODE_LABELS) as Array<LabelColorMapping['mode']>).map((mode) => (\n              <MenuItem key={mode} value={mode}>\n                {MODE_LABELS[mode]}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n        <Box>\n          <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 1 }}>\n            Overrides\n          </Typography>\n          <Stack spacing={1}>\n            {(mapping.overrides ?? []).map((override, overrideIndex) => (\n              <Stack key={overrideIndex} direction=\"row\" spacing={1} alignItems=\"center\">\n                <TextField\n                  label=\"Value / Pattern\"\n                  value={override.value}\n                  onChange={(e) => handleUpdateOverride(overrideIndex, 'value', e.target.value)}\n                  size=\"small\"\n                  sx={{ flex: 1 }}\n                />\n                <FormControlLabel\n                  control={\n                    <Checkbox\n                      checked={override.isRegex}\n                      onChange={(e) => handleUpdateOverride(overrideIndex, 'isRegex', e.target.checked)}\n                      size=\"small\"\n                    />\n                  }\n                  label=\"Regex\"\n                />\n                <input\n                  type=\"color\"\n                  value={override.color}\n                  onChange={(e) => handleUpdateOverride(overrideIndex, 'color', e.target.value)}\n                  style={{ width: 36, height: 28, border: 'none', cursor: 'pointer' }}\n                />\n                <IconButton\n                  size=\"small\"\n                  onClick={() => handleRemoveOverride(overrideIndex)}\n                  aria-label=\"Remove override\"\n                >\n                  <DeleteIcon fontSize=\"small\" />\n                </IconButton>\n              </Stack>\n            ))}\n            <Button size=\"small\" startIcon={<PlusIcon />} onClick={handleAddOverride}>\n              Add override\n            </Button>\n          </Stack>\n        </Box>\n      </Stack>\n    </Box>\n  );\n}\n\nexport function AlertTableLabelsEditor(props: OptionsEditorProps<AlertTableOptions>): ReactElement {\n  const { value, onChange } = props;\n  const mappings = value.labelColorMappings ?? [];\n\n  const handleAddMapping = useCallback((): void => {\n    onChange(\n      produce(value, (draft) => {\n        if (!draft.labelColorMappings) draft.labelColorMappings = [];\n        draft.labelColorMappings.push({ labelKey: '', mode: 'auto' });\n      })\n    );\n  }, [value, onChange]);\n\n  const handleRemoveMapping = useCallback(\n    (index: number): void => {\n      onChange(\n        produce(value, (draft) => {\n          draft.labelColorMappings?.splice(index, 1);\n        })\n      );\n    },\n    [value, onChange]\n  );\n\n  const handleUpdateMapping = useCallback(\n    (index: number, updater: (draft: LabelColorMapping) => void): void => {\n      onChange(\n        produce(value, (draft) => {\n          const mapping = draft.labelColorMappings?.[index];\n          if (mapping) {\n            updater(mapping);\n          }\n        })\n      );\n    },\n    [value, onChange]\n  );\n\n  return (\n    <OptionsEditorGroup title=\"Label Color Mappings\">\n      <Stack spacing={2}>\n        {mappings.length === 0 && (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            No label color mappings configured. Add one to color label values in the table.\n          </Typography>\n        )}\n        {mappings.map((mapping, index) => (\n          <Box key={index}>\n            {index > 0 && <Divider sx={{ mb: 2 }} />}\n            <LabelMappingEntry\n              mapping={mapping}\n              index={index}\n              onUpdate={handleUpdateMapping}\n              onRemove={handleRemoveMapping}\n            />\n          </Box>\n        ))}\n        <Button variant=\"outlined\" size=\"small\" startIcon={<PlusIcon />} onClick={handleAddMapping}>\n          Add label mapping\n        </Button>\n      </Stack>\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Box","Button","Checkbox","Divider","FormControl","FormControlLabel","IconButton","InputLabel","MenuItem","Select","Stack","TextField","Typography","OptionsEditorGroup","produce","DeleteIcon","PlusIcon","useCallback","MODE_LABELS","auto","severity","manual","LabelMappingEntry","mapping","index","onUpdate","onRemove","handleAddOverride","draft","overrides","push","value","isRegex","color","handleRemoveOverride","overrideIndex","splice","handleUpdateOverride","field","fieldValue","override","sx","border","borderColor","borderRadius","p","spacing","direction","alignItems","justifyContent","variant","labelKey","size","onClick","aria-label","fontSize","label","onChange","e","target","fullWidth","id","labelId","mode","Object","keys","map","mb","flex","control","checked","input","type","style","width","height","cursor","startIcon","AlertTableLabelsEditor","props","mappings","labelColorMappings","handleAddMapping","handleRemoveMapping","handleUpdateMapping","updater","title","length"],"mappings":"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"}

package/lib/plugins/alert-table/AlertTableOptionsEditor.d.ts

@@ -0,0 +1,5 @@
+import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { AlertTableOptions } from './alert-table-model';
+export declare function AlertTableOptionsEditor(props: OptionsEditorProps<AlertTableOptions>): ReactElement;
+//# sourceMappingURL=AlertTableOptionsEditor.d.ts.map

package/lib/plugins/alert-table/AlertTableOptionsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertTableOptionsEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/alert-table/AlertTableOptionsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAe,YAAY,EAA+B,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAe,iBAAiB,EAAqB,MAAM,qBAAqB,CAAC;AAOxF,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,GAAG,YAAY,CA4GlG"}

package/lib/plugins/alert-table/AlertTableOptionsEditor.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// 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.
+import { Autocomplete, Checkbox, Chip, FormControlLabel, TextField } from '@mui/material';
+import { OptionsEditorGroup } from '@perses-dev/components';
+import { produce } from 'immer';
+import { useCallback } from 'react';
+import { ALL_ALERT_ACTIONS } from './alert-table-model';
+const ACTION_LABELS = {
+    silence: 'Silence alert',
+    runbook: 'View runbook'
+};
+export function AlertTableOptionsEditor(props) {
+    const { value, onChange } = props;
+    const effectiveActions = value.allowedActions ?? ALL_ALERT_ACTIONS;
+    const groupBy = value.defaultGroupBy ?? [
+        'alertname'
+    ];
+    const handleGroupByChange = useCallback((_event, newValue)=>{
+        onChange(produce(value, (draft)=>{
+            draft.defaultGroupBy = newValue.length > 0 ? newValue : undefined;
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleRunbookKeyChange = useCallback((e)=>{
+        onChange(produce(value, (draft)=>{
+            const trimmed = e.target.value.trim();
+            draft.runbookAnnotationKey = trimmed || undefined;
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleToggle = useCallback((action, checked)=>{
+        onChange(produce(value, (draft)=>{
+            const current = draft.allowedActions ?? [
+                ...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__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                title: "Group By",
+                children: /*#__PURE__*/ _jsx(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__*/ _jsx(Chip, {
+                                label: option,
+                                size: "small",
+                                variant: isVariable ? 'filled' : 'outlined',
+                                color: isVariable ? 'primary' : 'default',
+                                ...rest
+                            }, key);
+                        }),
+                    renderInput: (params)=>/*#__PURE__*/ _jsx(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__*/ _jsx(OptionsEditorGroup, {
+                title: "Actions",
+                children: ALL_ALERT_ACTIONS.map((action)=>/*#__PURE__*/ _jsx(FormControlLabel, {
+                        control: /*#__PURE__*/ _jsx(Checkbox, {
+                            checked: effectiveActions.includes(action),
+                            onChange: (e)=>handleToggle(action, e.target.checked),
+                            size: "small"
+                        }),
+                        label: ACTION_LABELS[action]
+                    }, action))
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                title: "Runbook",
+                children: /*#__PURE__*/ _jsx(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."
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=AlertTableOptionsEditor.js.map

package/lib/plugins/alert-table/AlertTableOptionsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/plugins/alert-table/AlertTableOptionsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Autocomplete, Checkbox, Chip, FormControlLabel, TextField } from '@mui/material';\nimport { OptionsEditorGroup } from '@perses-dev/components';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport { ChangeEvent, ReactElement, SyntheticEvent, useCallback } from 'react';\nimport { AlertAction, AlertTableOptions, ALL_ALERT_ACTIONS } from './alert-table-model';\n\nconst ACTION_LABELS: Record<AlertAction, string> = {\n  silence: 'Silence alert',\n  runbook: 'View runbook',\n};\n\nexport function AlertTableOptionsEditor(props: OptionsEditorProps<AlertTableOptions>): ReactElement {\n  const { value, onChange } = props;\n  const effectiveActions = value.allowedActions ?? ALL_ALERT_ACTIONS;\n  const groupBy = value.defaultGroupBy ?? ['alertname'];\n\n  const handleGroupByChange = useCallback(\n    (_event: SyntheticEvent, newValue: string[]): void => {\n      onChange(\n        produce(value, (draft) => {\n          draft.defaultGroupBy = newValue.length > 0 ? newValue : undefined;\n        })\n      );\n    },\n    [value, onChange]\n  );\n\n  const handleRunbookKeyChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>): void => {\n      onChange(\n        produce(value, (draft) => {\n          const trimmed = e.target.value.trim();\n          draft.runbookAnnotationKey = trimmed || undefined;\n        })\n      );\n    },\n    [value, onChange]\n  );\n\n  const handleToggle = useCallback(\n    (action: AlertAction, checked: boolean) => {\n      onChange(\n        produce(value, (draft) => {\n          const current = draft.allowedActions ?? [...ALL_ALERT_ACTIONS];\n          if (checked) {\n            if (!current.includes(action)) current.push(action);\n          } else {\n            const idx = current.indexOf(action);\n            if (idx >= 0) current.splice(idx, 1);\n          }\n          draft.allowedActions = current;\n        })\n      );\n    },\n    [value, onChange]\n  );\n\n  return (\n    <>\n      <OptionsEditorGroup title=\"Group By\">\n        <Autocomplete<string, true, false, true>\n          multiple\n          freeSolo\n          options={[] as string[]}\n          value={groupBy}\n          onChange={handleGroupByChange}\n          renderTags={(tagValues, getTagProps): ReactElement[] =>\n            tagValues.map((option, index) => {\n              const { key, ...rest } = getTagProps({ index });\n              const isVariable = option.includes('$');\n              return (\n                <Chip\n                  key={key}\n                  label={option}\n                  size=\"small\"\n                  variant={isVariable ? 'filled' : 'outlined'}\n                  color={isVariable ? 'primary' : 'default'}\n                  {...rest}\n                />\n              );\n            })\n          }\n          renderInput={(params) => (\n            <TextField\n              {...params}\n              size=\"small\"\n              placeholder=\"Type a label key or $variable and press Enter\"\n              helperText=\"Label keys to group alerts by. Supports $variable interpolation.\"\n            />\n          )}\n        />\n      </OptionsEditorGroup>\n      <OptionsEditorGroup title=\"Actions\">\n        {ALL_ALERT_ACTIONS.map((action) => (\n          <FormControlLabel\n            key={action}\n            control={\n              <Checkbox\n                checked={effectiveActions.includes(action)}\n                onChange={(e) => handleToggle(action, e.target.checked)}\n                size=\"small\"\n              />\n            }\n            label={ACTION_LABELS[action]}\n          />\n        ))}\n      </OptionsEditorGroup>\n      <OptionsEditorGroup title=\"Runbook\">\n        <TextField\n          size=\"small\"\n          fullWidth\n          value={value.runbookAnnotationKey ?? ''}\n          onChange={handleRunbookKeyChange}\n          placeholder=\"runbook_url\"\n          helperText=\"Annotation key used to extract the runbook URL. Defaults to runbook_url.\"\n        />\n      </OptionsEditorGroup>\n    </>\n  );\n}\n"],"names":["Autocomplete","Checkbox","Chip","FormControlLabel","TextField","OptionsEditorGroup","produce","useCallback","ALL_ALERT_ACTIONS","ACTION_LABELS","silence","runbook","AlertTableOptionsEditor","props","value","onChange","effectiveActions","allowedActions","groupBy","defaultGroupBy","handleGroupByChange","_event","newValue","draft","length","undefined","handleRunbookKeyChange","e","trimmed","target","trim","runbookAnnotationKey","handleToggle","action","checked","current","includes","push","idx","indexOf","splice","title","multiple","freeSolo","options","renderTags","tagValues","getTagProps","map","option","index","key","rest","isVariable","label","size","variant","color","renderInput","params","placeholder","helperText","control","fullWidth"],"mappings":"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"}

package/lib/plugins/alert-table/AlertTablePanel.d.ts

@@ -0,0 +1,11 @@
+import { PanelProps } from '@perses-dev/plugin-system';
+import { AlertsData } from '@perses-dev/spec';
+import { ReactElement } from 'react';
+import { AlertTableOptions } from './alert-table-model';
+export type AlertTablePanelProps = PanelProps<AlertTableOptions, AlertsData>;
+/**
+ * Alert hierarchical table panel component.
+ * Displays alerts grouped by configurable labels with deduplication.
+ */
+export declare function AlertTablePanel({ spec, queryResults, contentDimensions }: AlertTablePanelProps): ReactElement;
+//# sourceMappingURL=AlertTablePanel.d.ts.map

package/lib/plugins/alert-table/AlertTablePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertTablePanel.d.ts","sourceRoot":"","sources":["../../../../src/plugins/alert-table/AlertTablePanel.tsx"],"names":[],"mappings":"AAoCA,OAAO,EACL,UAAU,EAKX,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASrD,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAC;AAKxF,OAAO,EAEL,iBAAiB,EAUlB,MAAM,qBAAqB,CAAC;AAU7B,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;AA6P7E;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAgX7G"}