@perses-dev/alert-manager-plugin 0.1.0

package/lib/cjs/plugins/silence-table/SilenceTableColumnsEditor.js

@@ -0,0 +1,137 @@
+// 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, "SilenceTableColumnsEditor", {
+    enumerable: true,
+    get: function() {
+        return SilenceTableColumnsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _immer = require("immer");
+const _react = require("react");
+const _ColumnsEditor = require("../../components/ColumnsEditor");
+const _silencetablemodel = require("./silence-table-model");
+const DEFAULT_FIELD_NAMES = new Set(_silencetablemodel.DEFAULT_SILENCE_COLUMNS.map((c)=>c.name));
+const ALL_FIELDS = [
+    'status',
+    'matchers',
+    'createdBy',
+    'startsAt',
+    'endsAt',
+    'duration',
+    'comment',
+    'updatedAt'
+];
+const FIELD_OPTIONS = ALL_FIELDS.filter((f)=>!DEFAULT_FIELD_NAMES.has(f));
+const SORT_MODE_LABELS = {
+    alphabetical: 'Alphabetical',
+    date: 'Date (chronological)',
+    status: 'Status (active > pending > expired)'
+};
+function SilenceTableColumnsEditor(props) {
+    const { value, onChange } = props;
+    const columns = value.columns ?? [];
+    const handleAddColumn = (0, _react.useCallback)(()=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.columns) draft.columns = [];
+            draft.columns.push({
+                name: FIELD_OPTIONS[0] ?? 'updatedAt'
+            });
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleRemoveColumn = (0, _react.useCallback)((index)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.columns?.splice(index, 1);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleUpdateColumn = (0, _react.useCallback)((index, updater)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            const column = draft.columns?.[index];
+            if (column) {
+                updater(column);
+            }
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleMoveUp = (0, _react.useCallback)((index)=>{
+        if (index <= 0) return;
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.columns) return;
+            const item = draft.columns.splice(index, 1)[0];
+            draft.columns.splice(index - 1, 0, item);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    const handleMoveDown = (0, _react.useCallback)((index)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (!draft.columns || index >= draft.columns.length - 1) return;
+            const item = draft.columns.splice(index, 1)[0];
+            draft.columns.splice(index + 1, 0, item);
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColumnsEditor.ColumnsEditor, {
+        columns: columns,
+        description: "Status and Matchers are always shown. Add extra columns below.",
+        sortModeLabels: SORT_MODE_LABELS,
+        defaultSortMode: "alphabetical",
+        getDisplayName: (col)=>col.header || _silencetablemodel.DEFAULT_COLUMN_HEADERS[col.name] || 'New column',
+        getHeaderPlaceholder: (col)=>_silencetablemodel.DEFAULT_COLUMN_HEADERS[col.name] || 'Column header',
+        onAdd: handleAddColumn,
+        onRemove: handleRemoveColumn,
+        onUpdate: handleUpdateColumn,
+        onMoveUp: handleMoveUp,
+        onMoveDown: handleMoveDown,
+        renderNameField: (col, index, onUpdate)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                size: "small",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        id: `field-name-label-${index}`,
+                        children: "Field"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
+                        labelId: `field-name-label-${index}`,
+                        value: col.name,
+                        onChange: (e)=>onUpdate(index, (draft)=>{
+                                const field = e.target.value;
+                                draft.name = field;
+                                draft.sortMode = (0, _silencetablemodel.inferSortMode)(field);
+                            }),
+                        label: "Field",
+                        children: FIELD_OPTIONS.map((field)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                value: field,
+                                children: _silencetablemodel.DEFAULT_COLUMN_HEADERS[field]
+                            }, field))
+                    })
+                ]
+            })
+    });
+}

package/lib/cjs/plugins/silence-table/SilenceTableOptionsEditor.js

@@ -0,0 +1,63 @@
+// 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, "SilenceTableOptionsEditor", {
+    enumerable: true,
+    get: function() {
+        return SilenceTableOptionsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _immer = require("immer");
+const _react = require("react");
+const _silencetablemodel = require("./silence-table-model");
+const ACTION_LABELS = {
+    expire: 'Expire silence'
+};
+function SilenceTableOptionsEditor(props) {
+    const { value, onChange } = props;
+    const effectiveActions = value.allowedActions ?? _silencetablemodel.ALL_SILENCE_ACTIONS;
+    const handleToggle = (0, _react.useCallback)((action, checked)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            const current = draft.allowedActions ?? [
+                ..._silencetablemodel.ALL_SILENCE_ACTIONS
+            ];
+            if (checked) {
+                if (!current.includes(action)) current.push(action);
+            } else {
+                const idx = current.indexOf(action);
+                if (idx >= 0) current.splice(idx, 1);
+            }
+            draft.allowedActions = current;
+        }));
+    }, [
+        value,
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+        title: "Actions",
+        children: _silencetablemodel.ALL_SILENCE_ACTIONS.map((action)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                    checked: effectiveActions.includes(action),
+                    onChange: (e)=>handleToggle(action, e.target.checked),
+                    size: "small"
+                }),
+                label: ACTION_LABELS[action]
+            }, action))
+    });
+}

package/lib/cjs/plugins/silence-table/SilenceTablePanel.js

@@ -0,0 +1,345 @@
+// 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, "SilenceTablePanel", {
+    enumerable: true,
+    get: function() {
+        return SilenceTablePanel;
+    }
+});
+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 _Delete = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Delete"));
+const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
+const _react = require("react");
+const _MatchersList = require("../../components/MatchersList");
+const _StatusBadge = require("../../components/StatusBadge");
+const _model = require("../../model");
+const _silencetablemodel = require("./silence-table-model");
+const _silencetablesorting = require("./silence-table-sorting");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function renderSilenceCell(silence, field) {
+    switch(field){
+        case 'status':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_StatusBadge.StatusBadge, {
+                status: silence.state,
+                variant: "silence"
+            });
+        case 'matchers':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatchersList.MatchersList, {
+                matchers: silence.matchers
+            });
+        case 'startsAt':
+        case 'endsAt':
+        case 'updatedAt':
+            {
+                const raw = field === 'updatedAt' ? silence.updatedAt : silence[field];
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                    children: raw ? new Date(raw).toLocaleString() : ''
+                });
+            }
+        case 'duration':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                children: (0, _silencetablemodel.getSilenceDuration)(silence)
+            });
+        case 'comment':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                title: silence.comment ?? '',
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                    variant: "body2",
+                    sx: {
+                        maxWidth: 200,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap'
+                    },
+                    children: silence.comment ?? ''
+                })
+            });
+        case 'createdBy':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                children: silence.createdBy
+            });
+    }
+}
+function SilenceRow({ silence, columnDefs, allowedActions, onExpire }) {
+    const showActions = allowedActions.length > 0;
+    const isExpired = silence.state === 'expired';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+        hover: true,
+        children: [
+            columnDefs.map((col, colIdx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                    children: renderSilenceCell(silence, col.name)
+                }, colIdx)),
+            showActions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    spacing: 0.5,
+                    children: allowedActions.includes('expire') && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                        title: isExpired ? 'Already expired' : 'Expire silence',
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                size: "small",
+                                "aria-label": "Expire silence",
+                                onClick: ()=>onExpire(silence),
+                                disabled: isExpired,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Delete.default, {
+                                    fontSize: "small"
+                                })
+                            })
+                        })
+                    })
+                })
+            })
+        ]
+    });
+}
+function SilenceTablePanel({ 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 [expireTarget, setExpireTarget] = (0, _react.useState)(null);
+    const [isExpiring, setIsExpiring] = (0, _react.useState)(false);
+    const { successSnackbar, exceptionSnackbar } = (0, _components.useSnackbar)();
+    const handleExpire = (0, _react.useCallback)(async ()=>{
+        if (!amClient || !expireTarget) return;
+        setIsExpiring(true);
+        try {
+            await amClient.deleteSilence(expireTarget.id);
+            setExpireTarget(null);
+            successSnackbar('Silence expired successfully');
+            queryClient.invalidateQueries({
+                queryKey: [
+                    'query',
+                    'AlertsQuery'
+                ]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [
+                    'query',
+                    'SilencesQuery'
+                ]
+            });
+        } catch (err) {
+            exceptionSnackbar(err);
+        } finally{
+            setIsExpiring(false);
+        }
+    }, [
+        amClient,
+        expireTarget,
+        queryClient,
+        successSnackbar,
+        exceptionSnackbar
+    ]);
+    const [search, setSearch] = (0, _react.useState)('');
+    const effectiveActions = (0, _react.useMemo)(()=>spec?.allowedActions ?? _silencetablemodel.ALL_SILENCE_ACTIONS, [
+        spec?.allowedActions
+    ]);
+    const showActionsColumn = effectiveActions.length > 0;
+    const columnDefs = (0, _react.useMemo)(()=>{
+        if (!spec.columns || spec.columns.length === 0) return _silencetablemodel.DEFAULT_SILENCE_COLUMNS;
+        const defaultNames = new Set(_silencetablemodel.DEFAULT_SILENCE_COLUMNS.map((c)=>c.name));
+        const extra = spec.columns.filter((c)=>!defaultNames.has(c.name));
+        return [
+            ..._silencetablemodel.DEFAULT_SILENCE_COLUMNS,
+            ...extra
+        ];
+    }, [
+        spec.columns
+    ]);
+    const initialSort = (0, _react.useMemo)(()=>{
+        const col = columnDefs.find((c)=>c.sort && c.enableSorting !== false);
+        if (!col?.sort) return null;
+        return {
+            fieldName: col.name,
+            direction: col.sort,
+            mode: col.sortMode ?? (0, _silencetablemodel.inferSortMode)(col.name)
+        };
+    }, [
+        columnDefs
+    ]);
+    const [sortState, setSortState] = (0, _react.useState)(initialSort);
+    const handleSortClick = (0, _react.useCallback)((col)=>{
+        setSortState((prev)=>{
+            if (prev?.fieldName === col.name) {
+                return prev.direction === 'asc' ? {
+                    ...prev,
+                    direction: 'desc'
+                } : null;
+            }
+            return {
+                fieldName: col.name,
+                direction: 'asc',
+                mode: col.sortMode ?? (0, _silencetablemodel.inferSortMode)(col.name)
+            };
+        });
+    }, []);
+    // Flatten all silences from all query results
+    const allSilences = (0, _react.useMemo)(()=>{
+        return queryResults.flatMap((result)=>result.data?.silences ?? []);
+    }, [
+        queryResults
+    ]);
+    const filteredSilences = (0, _react.useMemo)(()=>{
+        const term = search.trim().toLowerCase();
+        if (!term) return allSilences;
+        return allSilences.filter((s)=>{
+            if (s.state.toLowerCase().includes(term)) return true;
+            if (s.createdBy.toLowerCase().includes(term)) return true;
+            if (s.comment?.toLowerCase().includes(term)) return true;
+            return s.matchers.some((m)=>m.name.toLowerCase().includes(term) || m.value.toLowerCase().includes(term));
+        });
+    }, [
+        allSilences,
+        search
+    ]);
+    const silences = (0, _react.useMemo)(()=>{
+        if (!sortState) return filteredSilences;
+        return [
+            ...filteredSilences
+        ].sort((a, b)=>(0, _silencetablesorting.compareSilencesByColumn)(a, b, sortState));
+    }, [
+        filteredSilences,
+        sortState
+    ]);
+    if (allSilences.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 silences to display"
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableContainer, {
+        sx: {
+            height: contentDimensions?.height,
+            overflow: 'auto'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    px: 1,
+                    py: 0.5
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    size: "small",
+                    placeholder: "Search silences...",
+                    value: search,
+                    onChange: (e)=>setSearch(e.target.value),
+                    fullWidth: true,
+                    slotProps: {
+                        htmlInput: {
+                            'aria-label': 'Search silences'
+                        },
+                        input: {
+                            startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                                position: "start",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {
+                                    fontSize: "small"
+                                })
+                            })
+                        }
+                    }
+                })
+            }),
+            /*#__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: [
+                                columnDefs.map((col, colIdx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                        sortDirection: sortState?.fieldName === col.name ? sortState.direction : false,
+                                        children: col.enableSorting !== false ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableSortLabel, {
+                                            active: sortState?.fieldName === col.name,
+                                            direction: sortState?.fieldName === col.name ? sortState.direction : 'asc',
+                                            onClick: ()=>handleSortClick(col),
+                                            children: col.header ?? _silencetablemodel.DEFAULT_COLUMN_HEADERS[col.name]
+                                        }) : col.header ?? _silencetablemodel.DEFAULT_COLUMN_HEADERS[col.name]
+                                    }, colIdx)),
+                                showActionsColumn && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                    children: "Actions"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                        children: silences.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 silences"
+                                })
+                            })
+                        }) : silences.map((silence)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(SilenceRow, {
+                                silence: silence,
+                                columnDefs: columnDefs,
+                                allowedActions: effectiveActions,
+                                onExpire: setExpireTarget
+                            }, silence.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
+                open: !!expireTarget,
+                onClose: ()=>setExpireTarget(null),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
+                        onClose: ()=>setExpireTarget(null),
+                        children: "Expire Silence"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Content, {
+                        children: "Are you sure you want to expire this silence? Alerts matching its matchers will start firing again."
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Actions, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.SecondaryButton, {
+                                onClick: ()=>setExpireTarget(null),
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
+                                onClick: handleExpire,
+                                disabled: isExpiring,
+                                children: isExpiring ? 'Expiring...' : 'Expire'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

package/lib/cjs/plugins/silence-table/silence-table-model.js

@@ -0,0 +1,116 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ALL_SILENCE_ACTIONS () {
+        return ALL_SILENCE_ACTIONS;
+    },
+    get DEFAULT_COLUMN_HEADERS () {
+        return DEFAULT_COLUMN_HEADERS;
+    },
+    get DEFAULT_SILENCE_COLUMNS () {
+        return DEFAULT_SILENCE_COLUMNS;
+    },
+    get getSilenceDuration () {
+        return getSilenceDuration;
+    },
+    get getSilenceFieldValue () {
+        return getSilenceFieldValue;
+    },
+    get inferSortMode () {
+        return inferSortMode;
+    }
+});
+const ALL_SILENCE_ACTIONS = [
+    'expire'
+];
+const DEFAULT_COLUMN_HEADERS = {
+    status: 'Status',
+    matchers: 'Matchers',
+    createdBy: 'Creator',
+    startsAt: 'Starts At',
+    endsAt: 'Ends At',
+    duration: 'Duration',
+    comment: 'Comment',
+    updatedAt: 'Updated At'
+};
+const DEFAULT_SILENCE_COLUMNS = [
+    {
+        name: 'status',
+        sort: 'asc',
+        sortMode: 'status'
+    },
+    {
+        name: 'matchers',
+        enableSorting: false
+    },
+    {
+        name: 'comment'
+    }
+];
+function inferSortMode(field) {
+    switch(field){
+        case 'status':
+            return 'status';
+        case 'startsAt':
+        case 'endsAt':
+        case 'updatedAt':
+            return 'date';
+        default:
+            return 'alphabetical';
+    }
+}
+function getSilenceFieldValue(silence, field) {
+    switch(field){
+        case 'status':
+            return silence.state;
+        case 'matchers':
+            return silence.matchers.map((m)=>`${m.name}=${m.value}`).join(', ');
+        case 'createdBy':
+            return silence.createdBy;
+        case 'startsAt':
+            return silence.startsAt;
+        case 'endsAt':
+            return silence.endsAt;
+        case 'duration':
+            return getSilenceDuration(silence);
+        case 'comment':
+            return silence.comment ?? '';
+        case 'updatedAt':
+            return silence.updatedAt ?? '';
+    }
+}
+function getSilenceDuration(silence) {
+    const startMs = new Date(silence.startsAt).getTime();
+    const endMs = new Date(silence.endsAt).getTime();
+    const diffMs = endMs - startMs;
+    if (diffMs <= 0) return '0m';
+    const totalMinutes = Math.floor(diffMs / (1000 * 60));
+    const days = Math.floor(totalMinutes / (60 * 24));
+    const hours = Math.floor(totalMinutes % (60 * 24) / 60);
+    const minutes = totalMinutes % 60;
+    const parts = [];
+    if (days > 0) parts.push(`${days}d`);
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes}m`);
+    return parts.join(' ') || '0m';
+}