@perses-dev/alert-manager-plugin 0.1.0

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

@@ -0,0 +1,773 @@
+// 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, "AlertTablePanel", {
+    enumerable: true,
+    get: function() {
+        return AlertTablePanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _reactquery = require("@tanstack/react-query");
+const _BellOff = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/BellOff"));
+const _BookOpen = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/BookOpen"));
+const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
+const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
+const _UnfoldLessHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldLessHorizontal"));
+const _UnfoldMoreHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldMoreHorizontal"));
+const _react = require("react");
+const _SilenceForm = require("../../components/SilenceForm");
+const _StatusBadge = require("../../components/StatusBadge");
+const _model = require("../../model");
+const _alerttablemodel = require("./alert-table-model");
+const _alerttablesorting = require("./alert-table-sorting");
+const _labelcolors = require("./label-colors");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function GroupSummaryChips({ summary }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 0.5,
+        children: [
+            summary.firing > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                label: `${summary.firing} firing`,
+                color: "error",
+                size: "small"
+            }),
+            summary.suppressed > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                label: `${summary.suppressed} silenced`,
+                color: "warning",
+                size: "small"
+            }),
+            summary.pending > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                label: `${summary.pending} pending`,
+                color: "default",
+                size: "small"
+            })
+        ]
+    });
+}
+function LabelValueSummaryChips({ summary, mapping }) {
+    const counts = summary.labelCounts?.[mapping.labelKey];
+    if (!counts || Object.keys(counts).length === 0) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        direction: "row",
+        spacing: 0.5,
+        children: Object.entries(counts).sort(([, a], [, b])=>b - a).map(([value, count])=>{
+            const bgColor = (0, _labelcolors.getLabelColor)(value, mapping);
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                label: `${count} ${value}`,
+                size: "small",
+                sx: {
+                    backgroundColor: bgColor,
+                    color: '#fff',
+                    fontWeight: 500
+                }
+            }, value);
+        })
+    });
+}
+function AlertRow({ alert, allowedActions, columnDefs, columnKeySet, mappingsByKey, runbookAnnotationKey, onSilence, duplicateCount, showDuplicates }) {
+    const runbookUrl = alert.annotations?.[runbookAnnotationKey];
+    const showActions = allowedActions.length > 0;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+        hover: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_StatusBadge.StatusBadge, {
+                    status: alert.suppressed ? 'suppressed' : alert.state,
+                    variant: "alert"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                children: alert.name
+            }),
+            columnDefs.map((col, colIdx)=>{
+                const value = alert.labels[col.name];
+                const mapping = mappingsByKey.get(col.name);
+                if (value !== undefined && mapping) {
+                    const bgColor = (0, _labelcolors.getLabelColor)(value, mapping);
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                            label: value,
+                            size: "small",
+                            sx: {
+                                backgroundColor: bgColor,
+                                color: '#fff',
+                                fontWeight: 500
+                            }
+                        })
+                    }, colIdx);
+                }
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                    children: value ?? ''
+                }, colIdx);
+            }),
+            showDuplicates && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                children: duplicateCount !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                    label: `${duplicateCount}`,
+                    size: "small",
+                    variant: "outlined",
+                    color: "info"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    spacing: 0.5,
+                    flexWrap: "wrap",
+                    useFlexGap: true,
+                    children: Object.entries(alert.labels).filter(([key])=>key !== 'alertname' && !columnKeySet.has(key)).map(([key, value])=>{
+                        const mapping = mappingsByKey.get(key);
+                        if (mapping) {
+                            const bgColor = (0, _labelcolors.getLabelColor)(value, mapping);
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                                label: `${key}=${value}`,
+                                size: "small",
+                                sx: {
+                                    backgroundColor: bgColor,
+                                    color: '#fff',
+                                    fontWeight: 500
+                                }
+                            }, key);
+                        }
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                            label: `${key}=${value}`,
+                            size: "small",
+                            variant: "outlined"
+                        }, key);
+                    })
+                })
+            }),
+            showActions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    spacing: 0.5,
+                    children: [
+                        allowedActions.includes('silence') && !alert.suppressed && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                            title: "Silence this alert",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                size: "small",
+                                "aria-label": "Silence alert",
+                                onClick: ()=>onSilence(alert),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_BellOff.default, {
+                                    fontSize: "small"
+                                })
+                            })
+                        }),
+                        allowedActions.includes('runbook') && runbookUrl && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                            title: "View runbook",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                size: "small",
+                                "aria-label": "View runbook",
+                                component: "a",
+                                href: runbookUrl,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_BookOpen.default, {
+                                    fontSize: "small"
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function AlertGroupRow({ group, expanded, allowedActions, columnDefs, columnKeySet, labelColorMappings, mappingsByKey, runbookAnnotationKey, onToggle, onSilence, duplicateCounts, showDuplicates }) {
+    const showActions = allowedActions.length > 0;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                sx: {
+                    cursor: 'pointer',
+                    '& > td': {
+                        fontWeight: 'bold'
+                    }
+                },
+                onClick: onToggle,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                        colSpan: 2,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            alignItems: "center",
+                            children: [
+                                expanded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "body2",
+                                    fontWeight: "bold",
+                                    children: group.key || 'Ungrouped'
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                                    label: `${group.summary.total}`,
+                                    size: "small",
+                                    variant: "outlined"
+                                })
+                            ]
+                        })
+                    }),
+                    columnDefs.map((col, colIdx)=>{
+                        const counts = group.summary.labelCounts?.[col.name];
+                        const mapping = mappingsByKey.get(col.name);
+                        if (counts && mapping) {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(LabelValueSummaryChips, {
+                                    summary: group.summary,
+                                    mapping: mapping
+                                })
+                            }, colIdx);
+                        }
+                        if (counts) {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                    direction: "row",
+                                    spacing: 0.5,
+                                    children: Object.entries(counts).sort(([, a], [, b])=>b - a).map(([value, count])=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                                            label: `${count} ${value}`,
+                                            size: "small",
+                                            variant: "outlined"
+                                        }, value))
+                                })
+                            }, colIdx);
+                        }
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {}, colIdx);
+                    }),
+                    showDuplicates && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            useFlexGap: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(GroupSummaryChips, {
+                                    summary: group.summary
+                                }),
+                                labelColorMappings.filter((mapping)=>!columnKeySet.has(mapping.labelKey)).map((mapping)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(LabelValueSummaryChips, {
+                                        summary: group.summary,
+                                        mapping: mapping
+                                    }, mapping.labelKey))
+                            ]
+                        })
+                    }),
+                    showActions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {})
+                ]
+            }),
+            expanded && group.alerts.map((alert, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AlertRow, {
+                    alert: alert,
+                    allowedActions: allowedActions,
+                    columnDefs: columnDefs,
+                    columnKeySet: columnKeySet,
+                    mappingsByKey: mappingsByKey,
+                    runbookAnnotationKey: runbookAnnotationKey,
+                    onSilence: onSilence,
+                    duplicateCount: duplicateCounts.get(alert),
+                    showDuplicates: showDuplicates
+                }, alert.id ?? String(idx)))
+        ]
+    });
+}
+function AlertTablePanel({ spec, queryResults, contentDimensions }) {
+    const datasourceSelector = (0, _react.useMemo)(()=>(0, _model.extractDatasourceSelector)(queryResults), [
+        queryResults
+    ]);
+    const { data: amClient } = (0, _pluginsystem.useDatasourceClient)(datasourceSelector);
+    const queryClient = (0, _reactquery.useQueryClient)();
+    const [silenceTarget, setSilenceTarget] = (0, _react.useState)(null);
+    const silenceKeyRef = (0, _react.useRef)(0);
+    const handleSetSilenceTarget = (0, _react.useCallback)((alert)=>{
+        silenceKeyRef.current++;
+        setSilenceTarget(alert);
+    }, []);
+    const [search, setSearch] = (0, _react.useState)('');
+    const [expandedGroups, setExpandedGroups] = (0, _react.useState)(new Set());
+    const { successSnackbar, exceptionSnackbar } = (0, _components.useSnackbar)();
+    const handleSilenceSubmit = (0, _react.useCallback)(async (silence)=>{
+        if (!amClient) return;
+        try {
+            await amClient.createSilence(silence);
+            setSilenceTarget(null);
+            successSnackbar('Silence created successfully');
+            queryClient.invalidateQueries({
+                queryKey: [
+                    'query',
+                    'AlertsQuery'
+                ]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [
+                    'query',
+                    'SilencesQuery'
+                ]
+            });
+        } catch (err) {
+            exceptionSnackbar(err);
+        }
+    }, [
+        amClient,
+        queryClient,
+        successSnackbar,
+        exceptionSnackbar
+    ]);
+    const silenceInitial = (0, _react.useMemo)(()=>{
+        if (!silenceTarget) return undefined;
+        return {
+            matchers: Object.entries(silenceTarget.labels).map(([name, value])=>({
+                    name,
+                    value,
+                    isEqual: true,
+                    isRegex: false
+                }))
+        };
+    }, [
+        silenceTarget
+    ]);
+    const defaultGroupBy = (0, _react.useMemo)(()=>spec.defaultGroupBy ?? [
+            'alertname'
+        ], [
+        spec.defaultGroupBy
+    ]);
+    const variableNames = (0, _react.useMemo)(()=>[
+            ...new Set(defaultGroupBy.flatMap((entry)=>(0, _pluginsystem.parseVariables)(entry)))
+        ], [
+        defaultGroupBy
+    ]);
+    const variableState = (0, _pluginsystem.useAllVariableValues)(variableNames);
+    const resolvedDefaultGroupBy = (0, _react.useMemo)(()=>{
+        const result = [];
+        for (const entry of defaultGroupBy){
+            const vars = (0, _pluginsystem.parseVariables)(entry);
+            if (vars.length === 0) {
+                result.push(entry);
+            } else if (vars.length === 1 && (entry === `$${vars[0]}` || entry === `\${${vars[0]}}`)) {
+                const varState = variableState[vars[0] ?? ''];
+                if (varState?.value) {
+                    if (Array.isArray(varState.value)) {
+                        result.push(...varState.value);
+                    } else {
+                        result.push(varState.value);
+                    }
+                }
+            } else {
+                const resolved = (0, _pluginsystem.replaceVariablesInString)(entry, variableState);
+                if (resolved) result.push(resolved);
+            }
+        }
+        return result;
+    }, [
+        defaultGroupBy,
+        variableState
+    ]);
+    const [groupBy, setGroupBy] = (0, _react.useState)(resolvedDefaultGroupBy);
+    (0, _react.useEffect)(()=>{
+        setGroupBy(resolvedDefaultGroupBy);
+    }, [
+        resolvedDefaultGroupBy
+    ]);
+    const effectiveActions = (0, _react.useMemo)(()=>spec.allowedActions ?? _alerttablemodel.ALL_ALERT_ACTIONS, [
+        spec.allowedActions
+    ]);
+    const showActionsColumn = effectiveActions.length > 0;
+    const runbookAnnotationKey = spec.runbookAnnotationKey || 'runbook_url';
+    const columnDefs = (0, _react.useMemo)(()=>spec.columns ?? [], [
+        spec.columns
+    ]);
+    const columnKeySet = (0, _react.useMemo)(()=>new Set(columnDefs.map((c)=>c.name)), [
+        columnDefs
+    ]);
+    const labelColorMappings = (0, _react.useMemo)(()=>spec.labelColorMappings ?? [], [
+        spec.labelColorMappings
+    ]);
+    const labelKeys = (0, _react.useMemo)(()=>labelColorMappings.map((m)=>m.labelKey), [
+        labelColorMappings
+    ]);
+    const mappingsByKey = (0, _react.useMemo)(()=>new Map(labelColorMappings.map((m)=>[
+                m.labelKey,
+                m
+            ])), [
+        labelColorMappings
+    ]);
+    const allTrackedKeys = (0, _react.useMemo)(()=>[
+            ...new Set([
+                ...labelKeys,
+                ...columnDefs.map((c)=>c.name)
+            ])
+        ], [
+        labelKeys,
+        columnDefs
+    ]);
+    const initialSort = (0, _react.useMemo)(()=>{
+        const col = columnDefs.find((c)=>c.sort && c.enableSorting !== false);
+        if (!col?.sort) return null;
+        return {
+            columnName: col.name,
+            direction: col.sort,
+            mode: col.sortMode ?? 'alphabetical'
+        };
+    }, [
+        columnDefs
+    ]);
+    const [sortState, setSortState] = (0, _react.useState)(initialSort);
+    const handleSortClick = (0, _react.useCallback)((columnName, sortMode = 'alphabetical')=>{
+        setSortState((prev)=>{
+            if (prev?.columnName === columnName) {
+                return prev.direction === 'asc' ? {
+                    ...prev,
+                    direction: 'desc'
+                } : null;
+            }
+            return {
+                columnName,
+                direction: 'asc',
+                mode: sortMode
+            };
+        });
+    }, []);
+    // Flatten all alerts from all query results
+    const allAlerts = (0, _react.useMemo)(()=>{
+        return queryResults.flatMap((result)=>result.data?.alerts ?? []);
+    }, [
+        queryResults
+    ]);
+    // Deduplicate
+    const dedupConfig = (0, _react.useMemo)(()=>spec.deduplication ?? {
+            mode: 'fingerprint'
+        }, [
+        spec.deduplication
+    ]);
+    const dedupResult = (0, _react.useMemo)(()=>(0, _alerttablemodel.deduplicateAlerts)(allAlerts, dedupConfig), [
+        allAlerts,
+        dedupConfig
+    ]);
+    const dedupAlerts = dedupResult.alerts;
+    const duplicateCounts = dedupResult.duplicateCounts;
+    const hasDuplicates = duplicateCounts.size > 0;
+    // Filter by search term
+    const alerts = (0, _react.useMemo)(()=>{
+        const term = search.trim().toLowerCase();
+        if (!term) return dedupAlerts;
+        return dedupAlerts.filter((a)=>{
+            if (a.state.toLowerCase().includes(term)) return true;
+            if (a.suppressed && ('suppressed'.includes(term) || 'silenced'.includes(term))) return true;
+            if (Object.values(a.labels).some((v)=>v.toLowerCase().includes(term))) return true;
+            if (a.annotations && Object.values(a.annotations).some((v)=>v.toLowerCase().includes(term))) return true;
+            return false;
+        });
+    }, [
+        dedupAlerts,
+        search
+    ]);
+    // Extract available label keys for group-by selector
+    const availableLabelKeys = (0, _react.useMemo)(()=>(0, _alerttablemodel.extractLabelKeys)(alerts), [
+        alerts
+    ]);
+    // Group alerts
+    const groups = (0, _react.useMemo)(()=>{
+        let result;
+        if (groupBy.length === 0) {
+            result = [
+                {
+                    key: '',
+                    alerts: [
+                        ...alerts
+                    ],
+                    summary: (0, _alerttablemodel.getGroupSummary)(alerts, allTrackedKeys)
+                }
+            ];
+        } else {
+            const groupMap = new Map();
+            for (const alert of alerts){
+                const key = (0, _alerttablemodel.getGroupKey)(alert, groupBy);
+                const existing = groupMap.get(key) ?? [];
+                existing.push(alert);
+                groupMap.set(key, existing);
+            }
+            result = Array.from(groupMap.entries()).map(([key, groupAlerts])=>({
+                    key,
+                    alerts: groupAlerts,
+                    summary: (0, _alerttablemodel.getGroupSummary)(groupAlerts, allTrackedKeys)
+                }));
+        }
+        if (sortState) {
+            for (const group of result){
+                group.alerts.sort((a, b)=>(0, _alerttablesorting.compareAlertsByColumn)(a, b, sortState));
+            }
+            result.sort((a, b)=>(0, _alerttablesorting.compareGroupsByColumn)(a.summary.labelCounts?.[sortState.columnName], b.summary.labelCounts?.[sortState.columnName], sortState));
+        }
+        return result;
+    }, [
+        alerts,
+        groupBy,
+        allTrackedKeys,
+        sortState
+    ]);
+    const prevGroupKeysRef = (0, _react.useRef)('');
+    (0, _react.useEffect)(()=>{
+        const currentKeys = groups.map((g)=>g.key).join('\0');
+        if (currentKeys === prevGroupKeysRef.current) return;
+        prevGroupKeysRef.current = currentKeys;
+        if (groups.length === 1) {
+            setExpandedGroups(new Set(groups.map((g)=>g.key)));
+        } else {
+            setExpandedGroups(new Set());
+        }
+    }, [
+        groups
+    ]);
+    const handleToggleGroup = (0, _react.useCallback)((key)=>{
+        setExpandedGroups((prev)=>{
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            } else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
+    const handleExpandAll = (0, _react.useCallback)(()=>{
+        setExpandedGroups(new Set(groups.map((g)=>g.key)));
+    }, [
+        groups
+    ]);
+    const handleCollapseAll = (0, _react.useCallback)(()=>{
+        setExpandedGroups(new Set());
+    }, []);
+    const handleGroupByChange = (event)=>{
+        const value = event.target.value;
+        setGroupBy(typeof value === 'string' ? value.split(',') : value);
+    };
+    if (allAlerts.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: contentDimensions?.height ?? '100%'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                children: "No alerts to display"
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        sx: {
+            height: contentDimensions?.height,
+            overflow: 'auto'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                spacing: 2,
+                alignItems: "center",
+                sx: {
+                    px: 1,
+                    pt: 1
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        size: "small",
+                        placeholder: "Search alerts...",
+                        value: search,
+                        onChange: (e)=>setSearch(e.target.value),
+                        sx: {
+                            minWidth: 200
+                        },
+                        slotProps: {
+                            htmlInput: {
+                                'aria-label': 'Search alerts'
+                            },
+                            input: {
+                                startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                                    position: "start",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {
+                                        fontSize: "small"
+                                    })
+                                })
+                            }
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                        size: "small",
+                        sx: {
+                            minWidth: 200
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                                id: "group-by-label",
+                                children: "Group by"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
+                                labelId: "group-by-label",
+                                multiple: true,
+                                value: groupBy,
+                                onChange: handleGroupByChange,
+                                label: "Group by",
+                                renderValue: (selected)=>selected.join(', '),
+                                children: availableLabelKeys.map((key)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: key,
+                                        children: key
+                                    }, key))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        sx: {
+                            flexGrow: 1
+                        },
+                        children: [
+                            alerts.length,
+                            " alert",
+                            alerts.length !== 1 ? 's' : '',
+                            " in ",
+                            groups.length,
+                            " group",
+                            groups.length !== 1 ? 's' : ''
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        spacing: 0.5,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                title: "Expand all groups",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                    size: "small",
+                                    "aria-label": "Expand all groups",
+                                    onClick: handleExpandAll,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldMoreHorizontal.default, {
+                                        fontSize: "small"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                title: "Collapse all groups",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                    size: "small",
+                                    "aria-label": "Collapse all groups",
+                                    onClick: handleCollapseAll,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldLessHorizontal.default, {
+                                        fontSize: "small"
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
+                    size: "small",
+                    stickyHeader: true,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                        sortDirection: sortState?.columnName === _alerttablesorting.SORT_COL_STATUS ? sortState.direction : false,
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
+                                            active: sortState?.columnName === _alerttablesorting.SORT_COL_STATUS,
+                                            direction: sortState?.columnName === _alerttablesorting.SORT_COL_STATUS ? sortState.direction : 'asc',
+                                            onClick: ()=>handleSortClick(_alerttablesorting.SORT_COL_STATUS, 'status'),
+                                            children: "Status"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                        sortDirection: sortState?.columnName === _alerttablesorting.SORT_COL_ALERTNAME ? sortState.direction : false,
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
+                                            active: sortState?.columnName === _alerttablesorting.SORT_COL_ALERTNAME,
+                                            direction: sortState?.columnName === _alerttablesorting.SORT_COL_ALERTNAME ? sortState.direction : 'asc',
+                                            onClick: ()=>handleSortClick(_alerttablesorting.SORT_COL_ALERTNAME, 'alphabetical'),
+                                            children: "Alert Name"
+                                        })
+                                    }),
+                                    columnDefs.map((col, colIdx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                            sortDirection: sortState?.columnName === col.name ? sortState.direction : false,
+                                            children: col.enableSorting !== false ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
+                                                active: sortState?.columnName === col.name,
+                                                direction: sortState?.columnName === col.name ? sortState.direction : 'asc',
+                                                onClick: ()=>handleSortClick(col.name, col.sortMode),
+                                                children: col.header ?? col.name
+                                            }) : col.header ?? col.name
+                                        }, colIdx)),
+                                    hasDuplicates && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                        children: "Duplicates"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                        children: "Labels"
+                                    }),
+                                    showActionsColumn && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                        children: "Actions"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                            children: alerts.length === 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableRow, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                    colSpan: 99,
+                                    align: "center",
+                                    sx: {
+                                        py: 4
+                                    },
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        color: "text.secondary",
+                                        children: "No matching alerts"
+                                    })
+                                })
+                            }) : groups.map((group)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AlertGroupRow, {
+                                    group: group,
+                                    expanded: expandedGroups.has(group.key),
+                                    allowedActions: effectiveActions,
+                                    columnDefs: columnDefs,
+                                    columnKeySet: columnKeySet,
+                                    labelColorMappings: labelColorMappings,
+                                    mappingsByKey: mappingsByKey,
+                                    runbookAnnotationKey: runbookAnnotationKey,
+                                    onToggle: ()=>handleToggleGroup(group.key),
+                                    onSilence: handleSetSilenceTarget,
+                                    duplicateCounts: duplicateCounts,
+                                    showDuplicates: hasDuplicates
+                                }, group.key))
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SilenceForm.SilenceForm, {
+                open: !!silenceTarget,
+                onClose: ()=>setSilenceTarget(null),
+                onSubmit: handleSilenceSubmit,
+                initialSilence: silenceInitial
+            }, silenceKeyRef.current)
+        ]
+    });
+}