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

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

@@ -0,0 +1,763 @@
+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 { Box, Chip, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, TextField, Tooltip, Typography } from '@mui/material';
+import { useSnackbar } from '@perses-dev/components';
+import { parseVariables, replaceVariablesInString, useAllVariableValues, useDatasourceClient } from '@perses-dev/plugin-system';
+import { useQueryClient } from '@tanstack/react-query';
+import BellOffIcon from 'mdi-material-ui/BellOff';
+import BookOpenIcon from 'mdi-material-ui/BookOpen';
+import ChevronDownIcon from 'mdi-material-ui/ChevronDown';
+import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
+import MagnifyIcon from 'mdi-material-ui/Magnify';
+import UnfoldLessHorizontalIcon from 'mdi-material-ui/UnfoldLessHorizontal';
+import UnfoldMoreHorizontalIcon from 'mdi-material-ui/UnfoldMoreHorizontal';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SilenceForm } from '../../components/SilenceForm';
+import { StatusBadge } from '../../components/StatusBadge';
+import { extractDatasourceSelector } from '../../model';
+import { ALL_ALERT_ACTIONS, deduplicateAlerts, extractLabelKeys, getGroupKey, getGroupSummary } from './alert-table-model';
+import { compareAlertsByColumn, compareGroupsByColumn, SORT_COL_ALERTNAME, SORT_COL_STATUS } from './alert-table-sorting';
+import { getLabelColor } from './label-colors';
+function GroupSummaryChips({ summary }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 0.5,
+        children: [
+            summary.firing > 0 && /*#__PURE__*/ _jsx(Chip, {
+                label: `${summary.firing} firing`,
+                color: "error",
+                size: "small"
+            }),
+            summary.suppressed > 0 && /*#__PURE__*/ _jsx(Chip, {
+                label: `${summary.suppressed} silenced`,
+                color: "warning",
+                size: "small"
+            }),
+            summary.pending > 0 && /*#__PURE__*/ _jsx(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__*/ _jsx(Stack, {
+        direction: "row",
+        spacing: 0.5,
+        children: Object.entries(counts).sort(([, a], [, b])=>b - a).map(([value, count])=>{
+            const bgColor = getLabelColor(value, mapping);
+            return /*#__PURE__*/ _jsx(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__*/ _jsxs(TableRow, {
+        hover: true,
+        children: [
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(StatusBadge, {
+                    status: alert.suppressed ? 'suppressed' : alert.state,
+                    variant: "alert"
+                })
+            }),
+            /*#__PURE__*/ _jsx(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 = getLabelColor(value, mapping);
+                    return /*#__PURE__*/ _jsx(TableCell, {
+                        children: /*#__PURE__*/ _jsx(Chip, {
+                            label: value,
+                            size: "small",
+                            sx: {
+                                backgroundColor: bgColor,
+                                color: '#fff',
+                                fontWeight: 500
+                            }
+                        })
+                    }, colIdx);
+                }
+                return /*#__PURE__*/ _jsx(TableCell, {
+                    children: value ?? ''
+                }, colIdx);
+            }),
+            showDuplicates && /*#__PURE__*/ _jsx(TableCell, {
+                children: duplicateCount !== undefined && /*#__PURE__*/ _jsx(Chip, {
+                    label: `${duplicateCount}`,
+                    size: "small",
+                    variant: "outlined",
+                    color: "info"
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx(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 = getLabelColor(value, mapping);
+                            return /*#__PURE__*/ _jsx(Chip, {
+                                label: `${key}=${value}`,
+                                size: "small",
+                                sx: {
+                                    backgroundColor: bgColor,
+                                    color: '#fff',
+                                    fontWeight: 500
+                                }
+                            }, key);
+                        }
+                        return /*#__PURE__*/ _jsx(Chip, {
+                            label: `${key}=${value}`,
+                            size: "small",
+                            variant: "outlined"
+                        }, key);
+                    })
+                })
+            }),
+            showActions && /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 0.5,
+                    children: [
+                        allowedActions.includes('silence') && !alert.suppressed && /*#__PURE__*/ _jsx(Tooltip, {
+                            title: "Silence this alert",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                "aria-label": "Silence alert",
+                                onClick: ()=>onSilence(alert),
+                                children: /*#__PURE__*/ _jsx(BellOffIcon, {
+                                    fontSize: "small"
+                                })
+                            })
+                        }),
+                        allowedActions.includes('runbook') && runbookUrl && /*#__PURE__*/ _jsx(Tooltip, {
+                            title: "View runbook",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                "aria-label": "View runbook",
+                                component: "a",
+                                href: runbookUrl,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                children: /*#__PURE__*/ _jsx(BookOpenIcon, {
+                                    fontSize: "small"
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function AlertGroupRow({ group, expanded, allowedActions, columnDefs, columnKeySet, labelColorMappings, mappingsByKey, runbookAnnotationKey, onToggle, onSilence, duplicateCounts, showDuplicates }) {
+    const showActions = allowedActions.length > 0;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(TableRow, {
+                sx: {
+                    cursor: 'pointer',
+                    '& > td': {
+                        fontWeight: 'bold'
+                    }
+                },
+                onClick: onToggle,
+                children: [
+                    /*#__PURE__*/ _jsx(TableCell, {
+                        colSpan: 2,
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            alignItems: "center",
+                            children: [
+                                expanded ? /*#__PURE__*/ _jsx(ChevronDownIcon, {}) : /*#__PURE__*/ _jsx(ChevronRightIcon, {}),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    fontWeight: "bold",
+                                    children: group.key || 'Ungrouped'
+                                }),
+                                /*#__PURE__*/ _jsx(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__*/ _jsx(TableCell, {
+                                children: /*#__PURE__*/ _jsx(LabelValueSummaryChips, {
+                                    summary: group.summary,
+                                    mapping: mapping
+                                })
+                            }, colIdx);
+                        }
+                        if (counts) {
+                            return /*#__PURE__*/ _jsx(TableCell, {
+                                children: /*#__PURE__*/ _jsx(Stack, {
+                                    direction: "row",
+                                    spacing: 0.5,
+                                    children: Object.entries(counts).sort(([, a], [, b])=>b - a).map(([value, count])=>/*#__PURE__*/ _jsx(Chip, {
+                                            label: `${count} ${value}`,
+                                            size: "small",
+                                            variant: "outlined"
+                                        }, value))
+                                })
+                            }, colIdx);
+                        }
+                        return /*#__PURE__*/ _jsx(TableCell, {}, colIdx);
+                    }),
+                    showDuplicates && /*#__PURE__*/ _jsx(TableCell, {}),
+                    /*#__PURE__*/ _jsx(TableCell, {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            useFlexGap: true,
+                            children: [
+                                /*#__PURE__*/ _jsx(GroupSummaryChips, {
+                                    summary: group.summary
+                                }),
+                                labelColorMappings.filter((mapping)=>!columnKeySet.has(mapping.labelKey)).map((mapping)=>/*#__PURE__*/ _jsx(LabelValueSummaryChips, {
+                                        summary: group.summary,
+                                        mapping: mapping
+                                    }, mapping.labelKey))
+                            ]
+                        })
+                    }),
+                    showActions && /*#__PURE__*/ _jsx(TableCell, {})
+                ]
+            }),
+            expanded && group.alerts.map((alert, idx)=>/*#__PURE__*/ _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)))
+        ]
+    });
+}
+/**
+ * Alert hierarchical table panel component.
+ * Displays alerts grouped by configurable labels with deduplication.
+ */ export function AlertTablePanel({ spec, queryResults, contentDimensions }) {
+    const datasourceSelector = useMemo(()=>extractDatasourceSelector(queryResults), [
+        queryResults
+    ]);
+    const { data: amClient } = useDatasourceClient(datasourceSelector);
+    const queryClient = useQueryClient();
+    const [silenceTarget, setSilenceTarget] = useState(null);
+    const silenceKeyRef = useRef(0);
+    const handleSetSilenceTarget = useCallback((alert)=>{
+        silenceKeyRef.current++;
+        setSilenceTarget(alert);
+    }, []);
+    const [search, setSearch] = useState('');
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    const { successSnackbar, exceptionSnackbar } = useSnackbar();
+    const handleSilenceSubmit = 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 = useMemo(()=>{
+        if (!silenceTarget) return undefined;
+        return {
+            matchers: Object.entries(silenceTarget.labels).map(([name, value])=>({
+                    name,
+                    value,
+                    isEqual: true,
+                    isRegex: false
+                }))
+        };
+    }, [
+        silenceTarget
+    ]);
+    const defaultGroupBy = useMemo(()=>spec.defaultGroupBy ?? [
+            'alertname'
+        ], [
+        spec.defaultGroupBy
+    ]);
+    const variableNames = useMemo(()=>[
+            ...new Set(defaultGroupBy.flatMap((entry)=>parseVariables(entry)))
+        ], [
+        defaultGroupBy
+    ]);
+    const variableState = useAllVariableValues(variableNames);
+    const resolvedDefaultGroupBy = useMemo(()=>{
+        const result = [];
+        for (const entry of defaultGroupBy){
+            const vars = 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 = replaceVariablesInString(entry, variableState);
+                if (resolved) result.push(resolved);
+            }
+        }
+        return result;
+    }, [
+        defaultGroupBy,
+        variableState
+    ]);
+    const [groupBy, setGroupBy] = useState(resolvedDefaultGroupBy);
+    useEffect(()=>{
+        setGroupBy(resolvedDefaultGroupBy);
+    }, [
+        resolvedDefaultGroupBy
+    ]);
+    const effectiveActions = useMemo(()=>spec.allowedActions ?? ALL_ALERT_ACTIONS, [
+        spec.allowedActions
+    ]);
+    const showActionsColumn = effectiveActions.length > 0;
+    const runbookAnnotationKey = spec.runbookAnnotationKey || 'runbook_url';
+    const columnDefs = useMemo(()=>spec.columns ?? [], [
+        spec.columns
+    ]);
+    const columnKeySet = useMemo(()=>new Set(columnDefs.map((c)=>c.name)), [
+        columnDefs
+    ]);
+    const labelColorMappings = useMemo(()=>spec.labelColorMappings ?? [], [
+        spec.labelColorMappings
+    ]);
+    const labelKeys = useMemo(()=>labelColorMappings.map((m)=>m.labelKey), [
+        labelColorMappings
+    ]);
+    const mappingsByKey = useMemo(()=>new Map(labelColorMappings.map((m)=>[
+                m.labelKey,
+                m
+            ])), [
+        labelColorMappings
+    ]);
+    const allTrackedKeys = useMemo(()=>[
+            ...new Set([
+                ...labelKeys,
+                ...columnDefs.map((c)=>c.name)
+            ])
+        ], [
+        labelKeys,
+        columnDefs
+    ]);
+    const initialSort = 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] = useState(initialSort);
+    const handleSortClick = 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 = useMemo(()=>{
+        return queryResults.flatMap((result)=>result.data?.alerts ?? []);
+    }, [
+        queryResults
+    ]);
+    // Deduplicate
+    const dedupConfig = useMemo(()=>spec.deduplication ?? {
+            mode: 'fingerprint'
+        }, [
+        spec.deduplication
+    ]);
+    const dedupResult = useMemo(()=>deduplicateAlerts(allAlerts, dedupConfig), [
+        allAlerts,
+        dedupConfig
+    ]);
+    const dedupAlerts = dedupResult.alerts;
+    const duplicateCounts = dedupResult.duplicateCounts;
+    const hasDuplicates = duplicateCounts.size > 0;
+    // Filter by search term
+    const alerts = 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 = useMemo(()=>extractLabelKeys(alerts), [
+        alerts
+    ]);
+    // Group alerts
+    const groups = useMemo(()=>{
+        let result;
+        if (groupBy.length === 0) {
+            result = [
+                {
+                    key: '',
+                    alerts: [
+                        ...alerts
+                    ],
+                    summary: getGroupSummary(alerts, allTrackedKeys)
+                }
+            ];
+        } else {
+            const groupMap = new Map();
+            for (const alert of alerts){
+                const key = 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: getGroupSummary(groupAlerts, allTrackedKeys)
+                }));
+        }
+        if (sortState) {
+            for (const group of result){
+                group.alerts.sort((a, b)=>compareAlertsByColumn(a, b, sortState));
+            }
+            result.sort((a, b)=>compareGroupsByColumn(a.summary.labelCounts?.[sortState.columnName], b.summary.labelCounts?.[sortState.columnName], sortState));
+        }
+        return result;
+    }, [
+        alerts,
+        groupBy,
+        allTrackedKeys,
+        sortState
+    ]);
+    const prevGroupKeysRef = useRef('');
+    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 = useCallback((key)=>{
+        setExpandedGroups((prev)=>{
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            } else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
+    const handleExpandAll = useCallback(()=>{
+        setExpandedGroups(new Set(groups.map((g)=>g.key)));
+    }, [
+        groups
+    ]);
+    const handleCollapseAll = 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__*/ _jsx(Box, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: contentDimensions?.height ?? '100%'
+            },
+            children: /*#__PURE__*/ _jsx(Typography, {
+                children: "No alerts to display"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        sx: {
+            height: contentDimensions?.height,
+            overflow: 'auto'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 2,
+                alignItems: "center",
+                sx: {
+                    px: 1,
+                    pt: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(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__*/ _jsx(InputAdornment, {
+                                    position: "start",
+                                    children: /*#__PURE__*/ _jsx(MagnifyIcon, {
+                                        fontSize: "small"
+                                    })
+                                })
+                            }
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(FormControl, {
+                        size: "small",
+                        sx: {
+                            minWidth: 200
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(InputLabel, {
+                                id: "group-by-label",
+                                children: "Group by"
+                            }),
+                            /*#__PURE__*/ _jsx(Select, {
+                                labelId: "group-by-label",
+                                multiple: true,
+                                value: groupBy,
+                                onChange: handleGroupByChange,
+                                label: "Group by",
+                                renderValue: (selected)=>selected.join(', '),
+                                children: availableLabelKeys.map((key)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: key,
+                                        children: key
+                                    }, key))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(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__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 0.5,
+                        children: [
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "Expand all groups",
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    "aria-label": "Expand all groups",
+                                    onClick: handleExpandAll,
+                                    children: /*#__PURE__*/ _jsx(UnfoldMoreHorizontalIcon, {
+                                        fontSize: "small"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: "Collapse all groups",
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    "aria-label": "Collapse all groups",
+                                    onClick: handleCollapseAll,
+                                    children: /*#__PURE__*/ _jsx(UnfoldLessHorizontalIcon, {
+                                        fontSize: "small"
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(TableContainer, {
+                children: /*#__PURE__*/ _jsxs(Table, {
+                    size: "small",
+                    stickyHeader: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(TableHead, {
+                            children: /*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        sortDirection: sortState?.columnName === SORT_COL_STATUS ? sortState.direction : false,
+                                        children: /*#__PURE__*/ _jsx(TableSortLabel, {
+                                            active: sortState?.columnName === SORT_COL_STATUS,
+                                            direction: sortState?.columnName === SORT_COL_STATUS ? sortState.direction : 'asc',
+                                            onClick: ()=>handleSortClick(SORT_COL_STATUS, 'status'),
+                                            children: "Status"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        sortDirection: sortState?.columnName === SORT_COL_ALERTNAME ? sortState.direction : false,
+                                        children: /*#__PURE__*/ _jsx(TableSortLabel, {
+                                            active: sortState?.columnName === SORT_COL_ALERTNAME,
+                                            direction: sortState?.columnName === SORT_COL_ALERTNAME ? sortState.direction : 'asc',
+                                            onClick: ()=>handleSortClick(SORT_COL_ALERTNAME, 'alphabetical'),
+                                            children: "Alert Name"
+                                        })
+                                    }),
+                                    columnDefs.map((col, colIdx)=>/*#__PURE__*/ _jsx(TableCell, {
+                                            sortDirection: sortState?.columnName === col.name ? sortState.direction : false,
+                                            children: col.enableSorting !== false ? /*#__PURE__*/ _jsx(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__*/ _jsx(TableCell, {
+                                        children: "Duplicates"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: "Labels"
+                                    }),
+                                    showActionsColumn && /*#__PURE__*/ _jsx(TableCell, {
+                                        children: "Actions"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(TableBody, {
+                            children: alerts.length === 0 ? /*#__PURE__*/ _jsx(TableRow, {
+                                children: /*#__PURE__*/ _jsx(TableCell, {
+                                    colSpan: 99,
+                                    align: "center",
+                                    sx: {
+                                        py: 4
+                                    },
+                                    children: /*#__PURE__*/ _jsx(Typography, {
+                                        color: "text.secondary",
+                                        children: "No matching alerts"
+                                    })
+                                })
+                            }) : groups.map((group)=>/*#__PURE__*/ _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__*/ _jsx(SilenceForm, {
+                open: !!silenceTarget,
+                onClose: ()=>setSilenceTarget(null),
+                onSubmit: handleSilenceSubmit,
+                initialSilence: silenceInitial
+            }, silenceKeyRef.current)
+        ]
+    });
+}
+
+//# sourceMappingURL=AlertTablePanel.js.map