@perses-dev/alert-manager-plugin 0.1.0

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

@@ -0,0 +1,68 @@
+// 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, "compareSilencesByColumn", {
+    enumerable: true,
+    get: function() {
+        return compareSilencesByColumn;
+    }
+});
+const _silencetablemodel = require("./silence-table-model");
+const STATUS_WEIGHT = {
+    active: 0,
+    pending: 1,
+    expired: 2
+};
+function directionMultiplier(direction) {
+    return direction === 'asc' ? 1 : -1;
+}
+function compareAlphabetical(a, b) {
+    if (!a && !b) return 0;
+    if (!a) return 1;
+    if (!b) return -1;
+    return a.localeCompare(b);
+}
+function compareDate(a, b) {
+    const ta = a ? new Date(a).getTime() : NaN;
+    const tb = b ? new Date(b).getTime() : NaN;
+    if (isNaN(ta) && isNaN(tb)) return 0;
+    if (isNaN(ta)) return 1;
+    if (isNaN(tb)) return -1;
+    return ta - tb;
+}
+function compareStatus(a, b) {
+    const wa = STATUS_WEIGHT[a] ?? 3;
+    const wb = STATUS_WEIGHT[b] ?? 3;
+    return wa - wb;
+}
+function compareSilencesByColumn(a, b, sort) {
+    const va = (0, _silencetablemodel.getSilenceFieldValue)(a, sort.fieldName);
+    const vb = (0, _silencetablemodel.getSilenceFieldValue)(b, sort.fieldName);
+    let result;
+    switch(sort.mode){
+        case 'date':
+            result = compareDate(va, vb);
+            break;
+        case 'status':
+            result = compareStatus(va, vb);
+            break;
+        case 'alphabetical':
+        default:
+            result = compareAlphabetical(va, vb);
+            break;
+    }
+    return result * directionMultiplier(sort.direction);
+}

package/lib/cjs/plugins/types.js

@@ -0,0 +1,16 @@
+// 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
+});

package/lib/cjs/setup-tests.js

@@ -0,0 +1,18 @@
+// 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
+});
+require("@testing-library/jest-dom");
+jest.mock('echarts/core');

package/lib/components/ColumnsEditor.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+export interface BaseColumnDefinition {
+    name: string;
+    header?: string;
+    enableSorting?: boolean;
+    sort?: 'asc' | 'desc';
+    sortMode?: string;
+}
+export type ColumnUpdater<C> = (index: number, updater: (draft: C) => void) => void;
+export interface ColumnsEditorProps<C extends BaseColumnDefinition> {
+    columns: C[];
+    description: string;
+    sortModeLabels: Record<string, string>;
+    defaultSortMode: string;
+    getDisplayName: (column: C) => string;
+    getHeaderPlaceholder: (column: C) => string;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    onUpdate: ColumnUpdater<C>;
+    onMoveUp: (index: number) => void;
+    onMoveDown: (index: number) => void;
+    renderNameField: (column: C, index: number, onUpdate: ColumnUpdater<C>) => ReactElement;
+}
+export declare function ColumnsEditor<C extends BaseColumnDefinition>(props: ColumnsEditorProps<C>): ReactElement;
+//# sourceMappingURL=ColumnsEditor.d.ts.map

package/lib/components/ColumnsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ColumnsEditor.tsx"],"names":[],"mappings":"AAiCA,OAAO,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAAK,IAAI,CAAC;AAEpF,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,oBAAoB;IAChE,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,oBAAoB,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,eAAe,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;CACzF;AAiID,wBAAgB,aAAa,CAAC,CAAC,SAAS,oBAAoB,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,YAAY,CA2FxG"}

package/lib/components/ColumnsEditor.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Box, Button, Checkbox, Divider, FormControl, FormControlLabel, IconButton, InputLabel, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
+import { OptionsEditorGroup } from '@perses-dev/components';
+import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
+import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
+import DeleteIcon from 'mdi-material-ui/Delete';
+import PlusIcon from 'mdi-material-ui/Plus';
+import { useCallback, useRef } from 'react';
+const DEFAULT_SORT_LABELS = {
+    none: 'None',
+    asc: 'Ascending',
+    desc: 'Descending'
+};
+function ColumnEntry({ column, index, isFirst, isLast, sortModeLabels, defaultSortMode, getDisplayName, getHeaderPlaceholder, onUpdate, onRemove, onMoveUp, onMoveDown, renderNameField }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 1,
+            p: 2
+        },
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 0.5,
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle2",
+                            children: getDisplayName(column)
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 0.5,
+                            children: [
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    onClick: ()=>onMoveUp(index),
+                                    disabled: isFirst,
+                                    "aria-label": "Move column up",
+                                    children: /*#__PURE__*/ _jsx(ArrowUpIcon, {
+                                        fontSize: "small"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    onClick: ()=>onMoveDown(index),
+                                    disabled: isLast,
+                                    "aria-label": "Move column down",
+                                    children: /*#__PURE__*/ _jsx(ArrowDownIcon, {
+                                        fontSize: "small"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    onClick: ()=>onRemove(index),
+                                    "aria-label": "Remove column",
+                                    children: /*#__PURE__*/ _jsx(DeleteIcon, {
+                                        fontSize: "small"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                flex: 1
+                            },
+                            children: renderNameField(column, index, onUpdate)
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Header",
+                            value: column.header ?? '',
+                            onChange: (e)=>onUpdate(index, (draft)=>{
+                                    draft.header = e.target.value || undefined;
+                                }),
+                            size: "small",
+                            sx: {
+                                flex: 1
+                            },
+                            placeholder: getHeaderPlaceholder(column)
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(FormControlLabel, {
+                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                        checked: column.enableSorting !== false,
+                        onChange: (e)=>onUpdate(index, (draft)=>{
+                                draft.enableSorting = e.target.checked ? undefined : false;
+                            }),
+                        size: "small"
+                    }),
+                    label: "Allow header sorting"
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    children: [
+                        /*#__PURE__*/ _jsxs(FormControl, {
+                            size: "small",
+                            sx: {
+                                flex: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(InputLabel, {
+                                    id: `sort-mode-label-${index}`,
+                                    children: "Sort mode"
+                                }),
+                                /*#__PURE__*/ _jsx(Select, {
+                                    labelId: `sort-mode-label-${index}`,
+                                    value: column.sortMode ?? defaultSortMode,
+                                    onChange: (e)=>onUpdate(index, (draft)=>{
+                                            draft.sortMode = e.target.value;
+                                        }),
+                                    label: "Sort mode",
+                                    children: Object.entries(sortModeLabels).map(([mode, label])=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: mode,
+                                            children: label
+                                        }, mode))
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(FormControl, {
+                            size: "small",
+                            sx: {
+                                flex: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(InputLabel, {
+                                    id: `default-sort-label-${index}`,
+                                    children: "Default sort"
+                                }),
+                                /*#__PURE__*/ _jsx(Select, {
+                                    labelId: `default-sort-label-${index}`,
+                                    value: column.sort ?? 'none',
+                                    onChange: (e)=>onUpdate(index, (draft)=>{
+                                            const val = e.target.value;
+                                            draft.sort = val === 'none' ? undefined : val;
+                                        }),
+                                    label: "Default sort",
+                                    children: Object.entries(DEFAULT_SORT_LABELS).map(([value, label])=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: value,
+                                            children: label
+                                        }, value))
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export function ColumnsEditor(props) {
+    const { columns, description, sortModeLabels, defaultSortMode, getDisplayName, getHeaderPlaceholder, onAdd, onRemove, onUpdate, onMoveUp, onMoveDown, renderNameField } = props;
+    const idCounterRef = useRef(0);
+    const idsRef = useRef([]);
+    while(idsRef.current.length < columns.length){
+        idsRef.current.push(idCounterRef.current++);
+    }
+    idsRef.current.length = columns.length;
+    const handleAdd = useCallback(()=>{
+        idsRef.current.push(idCounterRef.current++);
+        onAdd();
+    }, [
+        onAdd
+    ]);
+    const handleRemove = useCallback((index)=>{
+        idsRef.current.splice(index, 1);
+        onRemove(index);
+    }, [
+        onRemove
+    ]);
+    const handleMoveUp = useCallback((index)=>{
+        if (index <= 0) return;
+        const ids = idsRef.current;
+        const id = ids.splice(index, 1)[0];
+        ids.splice(index - 1, 0, id);
+        onMoveUp(index);
+    }, [
+        onMoveUp
+    ]);
+    const handleMoveDown = useCallback((index)=>{
+        const ids = idsRef.current;
+        if (index >= ids.length - 1) return;
+        const id = ids.splice(index, 1)[0];
+        ids.splice(index + 1, 0, id);
+        onMoveDown(index);
+    }, [
+        onMoveDown
+    ]);
+    return /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+        title: "Columns",
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: description
+                }),
+                columns.map((column, index)=>/*#__PURE__*/ _jsxs(Box, {
+                        children: [
+                            index > 0 && /*#__PURE__*/ _jsx(Divider, {
+                                sx: {
+                                    mb: 2
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(ColumnEntry, {
+                                column: column,
+                                index: index,
+                                isFirst: index === 0,
+                                isLast: index === columns.length - 1,
+                                sortModeLabels: sortModeLabels,
+                                defaultSortMode: defaultSortMode,
+                                getDisplayName: getDisplayName,
+                                getHeaderPlaceholder: getHeaderPlaceholder,
+                                onUpdate: onUpdate,
+                                onRemove: handleRemove,
+                                onMoveUp: handleMoveUp,
+                                onMoveDown: handleMoveDown,
+                                renderNameField: renderNameField
+                            })
+                        ]
+                    }, idsRef.current[index])),
+                /*#__PURE__*/ _jsx(Button, {
+                    variant: "outlined",
+                    size: "small",
+                    startIcon: /*#__PURE__*/ _jsx(PlusIcon, {}),
+                    onClick: handleAdd,
+                    children: "Add column"
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=ColumnsEditor.js.map

package/lib/components/ColumnsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ColumnsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  Checkbox,\n  Divider,\n  FormControl,\n  FormControlLabel,\n  IconButton,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { OptionsEditorGroup } from '@perses-dev/components';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ReactElement, useCallback, useRef } from 'react';\n\nexport interface BaseColumnDefinition {\n  name: string;\n  header?: string;\n  enableSorting?: boolean;\n  sort?: 'asc' | 'desc';\n  sortMode?: string;\n}\n\nexport type ColumnUpdater<C> = (index: number, updater: (draft: C) => void) => void;\n\nexport interface ColumnsEditorProps<C extends BaseColumnDefinition> {\n  columns: C[];\n  description: string;\n  sortModeLabels: Record<string, string>;\n  defaultSortMode: string;\n  getDisplayName: (column: C) => string;\n  getHeaderPlaceholder: (column: C) => string;\n  onAdd: () => void;\n  onRemove: (index: number) => void;\n  onUpdate: ColumnUpdater<C>;\n  onMoveUp: (index: number) => void;\n  onMoveDown: (index: number) => void;\n  renderNameField: (column: C, index: number, onUpdate: ColumnUpdater<C>) => ReactElement;\n}\n\nconst DEFAULT_SORT_LABELS: Record<string, string> = {\n  none: 'None',\n  asc: 'Ascending',\n  desc: 'Descending',\n};\n\nfunction ColumnEntry<C extends BaseColumnDefinition>({\n  column,\n  index,\n  isFirst,\n  isLast,\n  sortModeLabels,\n  defaultSortMode,\n  getDisplayName,\n  getHeaderPlaceholder,\n  onUpdate,\n  onRemove,\n  onMoveUp,\n  onMoveDown,\n  renderNameField,\n}: {\n  column: C;\n  index: number;\n  isFirst: boolean;\n  isLast: boolean;\n  sortModeLabels: Record<string, string>;\n  defaultSortMode: string;\n  getDisplayName: (column: C) => string;\n  getHeaderPlaceholder: (column: C) => string;\n  onUpdate: ColumnUpdater<C>;\n  onRemove: (index: number) => void;\n  onMoveUp: (index: number) => void;\n  onMoveDown: (index: number) => void;\n  renderNameField: (column: C, index: number, onUpdate: ColumnUpdater<C>) => ReactElement;\n}): ReactElement {\n  return (\n    <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 2 }}>\n      <Stack spacing={2}>\n        <Stack direction=\"row\" spacing={0.5} alignItems=\"center\" justifyContent=\"space-between\">\n          <Typography variant=\"subtitle2\">{getDisplayName(column)}</Typography>\n          <Stack direction=\"row\" spacing={0.5}>\n            <IconButton size=\"small\" onClick={() => onMoveUp(index)} disabled={isFirst} aria-label=\"Move column up\">\n              <ArrowUpIcon fontSize=\"small\" />\n            </IconButton>\n            <IconButton size=\"small\" onClick={() => onMoveDown(index)} disabled={isLast} aria-label=\"Move column down\">\n              <ArrowDownIcon fontSize=\"small\" />\n            </IconButton>\n            <IconButton size=\"small\" onClick={() => onRemove(index)} aria-label=\"Remove column\">\n              <DeleteIcon fontSize=\"small\" />\n            </IconButton>\n          </Stack>\n        </Stack>\n        <Stack direction=\"row\" spacing={1}>\n          <Box sx={{ flex: 1 }}>{renderNameField(column, index, onUpdate)}</Box>\n          <TextField\n            label=\"Header\"\n            value={column.header ?? ''}\n            onChange={(e) =>\n              onUpdate(index, (draft) => {\n                draft.header = e.target.value || undefined;\n              })\n            }\n            size=\"small\"\n            sx={{ flex: 1 }}\n            placeholder={getHeaderPlaceholder(column)}\n          />\n        </Stack>\n        <FormControlLabel\n          control={\n            <Checkbox\n              checked={column.enableSorting !== false}\n              onChange={(e) =>\n                onUpdate(index, (draft) => {\n                  draft.enableSorting = e.target.checked ? undefined : false;\n                })\n              }\n              size=\"small\"\n            />\n          }\n          label=\"Allow header sorting\"\n        />\n        <Stack direction=\"row\" spacing={1}>\n          <FormControl size=\"small\" sx={{ flex: 1 }}>\n            <InputLabel id={`sort-mode-label-${index}`}>Sort mode</InputLabel>\n            <Select\n              labelId={`sort-mode-label-${index}`}\n              value={column.sortMode ?? defaultSortMode}\n              onChange={(e) =>\n                onUpdate(index, (draft) => {\n                  draft.sortMode = e.target.value;\n                })\n              }\n              label=\"Sort mode\"\n            >\n              {Object.entries(sortModeLabels).map(([mode, label]) => (\n                <MenuItem key={mode} value={mode}>\n                  {label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n          <FormControl size=\"small\" sx={{ flex: 1 }}>\n            <InputLabel id={`default-sort-label-${index}`}>Default sort</InputLabel>\n            <Select\n              labelId={`default-sort-label-${index}`}\n              value={column.sort ?? 'none'}\n              onChange={(e) =>\n                onUpdate(index, (draft) => {\n                  const val = e.target.value;\n                  draft.sort = val === 'none' ? undefined : (val as 'asc' | 'desc');\n                })\n              }\n              label=\"Default sort\"\n            >\n              {Object.entries(DEFAULT_SORT_LABELS).map(([value, label]) => (\n                <MenuItem key={value} value={value}>\n                  {label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n}\n\nexport function ColumnsEditor<C extends BaseColumnDefinition>(props: ColumnsEditorProps<C>): ReactElement {\n  const {\n    columns,\n    description,\n    sortModeLabels,\n    defaultSortMode,\n    getDisplayName,\n    getHeaderPlaceholder,\n    onAdd,\n    onRemove,\n    onUpdate,\n    onMoveUp,\n    onMoveDown,\n    renderNameField,\n  } = props;\n\n  const idCounterRef = useRef(0);\n  const idsRef = useRef<number[]>([]);\n\n  while (idsRef.current.length < columns.length) {\n    idsRef.current.push(idCounterRef.current++);\n  }\n  idsRef.current.length = columns.length;\n\n  const handleAdd = useCallback((): void => {\n    idsRef.current.push(idCounterRef.current++);\n    onAdd();\n  }, [onAdd]);\n\n  const handleRemove = useCallback(\n    (index: number): void => {\n      idsRef.current.splice(index, 1);\n      onRemove(index);\n    },\n    [onRemove]\n  );\n\n  const handleMoveUp = useCallback(\n    (index: number): void => {\n      if (index <= 0) return;\n      const ids = idsRef.current;\n      const id = ids.splice(index, 1)[0]!;\n      ids.splice(index - 1, 0, id);\n      onMoveUp(index);\n    },\n    [onMoveUp]\n  );\n\n  const handleMoveDown = useCallback(\n    (index: number): void => {\n      const ids = idsRef.current;\n      if (index >= ids.length - 1) return;\n      const id = ids.splice(index, 1)[0]!;\n      ids.splice(index + 1, 0, id);\n      onMoveDown(index);\n    },\n    [onMoveDown]\n  );\n\n  return (\n    <OptionsEditorGroup title=\"Columns\">\n      <Stack spacing={2}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {description}\n        </Typography>\n        {columns.map((column, index) => (\n          <Box key={idsRef.current[index]}>\n            {index > 0 && <Divider sx={{ mb: 2 }} />}\n            <ColumnEntry\n              column={column}\n              index={index}\n              isFirst={index === 0}\n              isLast={index === columns.length - 1}\n              sortModeLabels={sortModeLabels}\n              defaultSortMode={defaultSortMode}\n              getDisplayName={getDisplayName}\n              getHeaderPlaceholder={getHeaderPlaceholder}\n              onUpdate={onUpdate}\n              onRemove={handleRemove}\n              onMoveUp={handleMoveUp}\n              onMoveDown={handleMoveDown}\n              renderNameField={renderNameField}\n            />\n          </Box>\n        ))}\n        <Button variant=\"outlined\" size=\"small\" startIcon={<PlusIcon />} onClick={handleAdd}>\n          Add column\n        </Button>\n      </Stack>\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Box","Button","Checkbox","Divider","FormControl","FormControlLabel","IconButton","InputLabel","MenuItem","Select","Stack","TextField","Typography","OptionsEditorGroup","ArrowUpIcon","ArrowDownIcon","DeleteIcon","PlusIcon","useCallback","useRef","DEFAULT_SORT_LABELS","none","asc","desc","ColumnEntry","column","index","isFirst","isLast","sortModeLabels","defaultSortMode","getDisplayName","getHeaderPlaceholder","onUpdate","onRemove","onMoveUp","onMoveDown","renderNameField","sx","border","borderColor","borderRadius","p","spacing","direction","alignItems","justifyContent","variant","size","onClick","disabled","aria-label","fontSize","flex","label","value","header","onChange","e","draft","target","undefined","placeholder","control","checked","enableSorting","id","labelId","sortMode","Object","entries","map","mode","sort","val","ColumnsEditor","props","columns","description","onAdd","idCounterRef","idsRef","current","length","push","handleAdd","handleRemove","splice","handleMoveUp","ids","handleMoveDown","title","color","mb","startIcon"],"mappings":"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"}

package/lib/components/LazyTextField.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export interface LazyTextFieldProps {
+    label: string;
+    value?: string;
+    onCommit: (nextValue: string) => void;
+    placeholder?: string;
+    helperText?: string;
+    multiline?: boolean;
+    minRows?: number;
+}
+export declare function LazyTextField(props: LazyTextFieldProps): ReactElement;
+//# sourceMappingURL=LazyTextField.d.ts.map

package/lib/components/LazyTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyTextField.d.ts","sourceRoot":"","sources":["../../../src/components/LazyTextField.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,YAAY,EAAoC,MAAM,OAAO,CAAC;AAEpF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAiBrE"}

package/lib/components/LazyTextField.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } 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 { TextField } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+export function LazyTextField(props) {
+    const { value, onCommit, ...textFieldProps } = props;
+    const [draftValue, setDraftValue] = useState(value ?? '');
+    useEffect(()=>{
+        setDraftValue(value ?? '');
+    }, [
+        value
+    ]);
+    const handleChange = useCallback((event)=>{
+        setDraftValue(event.target.value);
+    }, []);
+    const handleBlur = useCallback(()=>{
+        onCommit(draftValue);
+    }, [
+        draftValue,
+        onCommit
+    ]);
+    return /*#__PURE__*/ _jsx(TextField, {
+        ...textFieldProps,
+        size: "small",
+        value: draftValue,
+        onChange: handleChange,
+        onBlur: handleBlur
+    });
+}
+
+//# sourceMappingURL=LazyTextField.js.map

package/lib/components/LazyTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/LazyTextField.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TextField } from '@mui/material';\nimport { ChangeEvent, ReactElement, useCallback, useEffect, useState } from 'react';\n\nexport interface LazyTextFieldProps {\n  label: string;\n  value?: string;\n  onCommit: (nextValue: string) => void;\n  placeholder?: string;\n  helperText?: string;\n  multiline?: boolean;\n  minRows?: number;\n}\n\nexport function LazyTextField(props: LazyTextFieldProps): ReactElement {\n  const { value, onCommit, ...textFieldProps } = props;\n  const [draftValue, setDraftValue] = useState(value ?? '');\n\n  useEffect(() => {\n    setDraftValue(value ?? '');\n  }, [value]);\n\n  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    setDraftValue(event.target.value);\n  }, []);\n\n  const handleBlur = useCallback((): void => {\n    onCommit(draftValue);\n  }, [draftValue, onCommit]);\n\n  return <TextField {...textFieldProps} size=\"small\" value={draftValue} onChange={handleChange} onBlur={handleBlur} />;\n}\n"],"names":["TextField","useCallback","useEffect","useState","LazyTextField","props","value","onCommit","textFieldProps","draftValue","setDraftValue","handleChange","event","target","handleBlur","size","onChange","onBlur"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,SAAoCC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAYpF,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,gBAAgB,GAAGH;IAC/C,MAAM,CAACI,YAAYC,cAAc,GAAGP,SAASG,SAAS;IAEtDJ,UAAU;QACRQ,cAAcJ,SAAS;IACzB,GAAG;QAACA;KAAM;IAEV,MAAMK,eAAeV,YAAY,CAACW;QAChCF,cAAcE,MAAMC,MAAM,CAACP,KAAK;IAClC,GAAG,EAAE;IAEL,MAAMQ,aAAab,YAAY;QAC7BM,SAASE;IACX,GAAG;QAACA;QAAYF;KAAS;IAEzB,qBAAO,KAACP;QAAW,GAAGQ,cAAc;QAAEO,MAAK;QAAQT,OAAOG;QAAYO,UAAUL;QAAcM,QAAQH;;AACxG"}

package/lib/components/MatcherEditor.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+export interface MatcherValue {
+    name: string;
+    value: string;
+    isEqual: boolean;
+    isRegex: boolean;
+}
+export interface MatcherEditorProps {
+    matcher: MatcherValue;
+    onChange: (matcher: MatcherValue) => void;
+    onRemove: () => void;
+}
+/**
+ * A form for editing a single matcher with fields for name, value, and match type.
+ */
+export declare function MatcherEditor({ matcher, onChange, onRemove }: MatcherEditorProps): ReactElement;
+//# sourceMappingURL=MatcherEditor.d.ts.map

package/lib/components/MatcherEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatcherEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MatcherEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAS,MAAM,OAAO,CAAC;AAa5C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAwBD;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,YAAY,CAwC/F"}

package/lib/components/MatcherEditor.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useId } from 'react';
+import { IconButton, MenuItem, Stack, TextField, Select, FormControl, InputLabel } from '@mui/material';
+import DeleteIcon from 'mdi-material-ui/Delete';
+function getMatchType(matcher) {
+    if (matcher.isRegex) {
+        return matcher.isEqual ? '=~' : '!~';
+    }
+    return matcher.isEqual ? '=' : '!=';
+}
+function parseMatchType(matchType) {
+    switch(matchType){
+        case '=':
+            return {
+                isEqual: true,
+                isRegex: false
+            };
+        case '!=':
+            return {
+                isEqual: false,
+                isRegex: false
+            };
+        case '=~':
+            return {
+                isEqual: true,
+                isRegex: true
+            };
+        case '!~':
+            return {
+                isEqual: false,
+                isRegex: true
+            };
+    }
+}
+/**
+ * A form for editing a single matcher with fields for name, value, and match type.
+ */ export function MatcherEditor({ matcher, onChange, onRemove }) {
+    const matchTypeLabelId = useId();
+    const handleNameChange = (e)=>{
+        onChange({
+            ...matcher,
+            name: e.target.value
+        });
+    };
+    const handleValueChange = (e)=>{
+        onChange({
+            ...matcher,
+            value: e.target.value
+        });
+    };
+    const handleMatchTypeChange = (e)=>{
+        const { isEqual, isRegex } = parseMatchType(e.target.value);
+        onChange({
+            ...matcher,
+            isEqual,
+            isRegex
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        alignItems: "center",
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Label name",
+                value: matcher.name,
+                onChange: handleNameChange,
+                size: "small",
+                sx: {
+                    minWidth: 150
+                }
+            }),
+            /*#__PURE__*/ _jsxs(FormControl, {
+                size: "small",
+                sx: {
+                    minWidth: 80
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: matchTypeLabelId,
+                        children: "Match"
+                    }),
+                    /*#__PURE__*/ _jsxs(Select, {
+                        labelId: matchTypeLabelId,
+                        value: getMatchType(matcher),
+                        onChange: handleMatchTypeChange,
+                        label: "Match",
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "=",
+                                children: "="
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "!=",
+                                children: "!="
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "=~",
+                                children: "=~"
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "!~",
+                                children: "!~"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Value",
+                value: matcher.value,
+                onChange: handleValueChange,
+                size: "small",
+                sx: {
+                    minWidth: 200
+                }
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                onClick: onRemove,
+                size: "small",
+                "aria-label": "Remove matcher",
+                children: /*#__PURE__*/ _jsx(DeleteIcon, {
+                    fontSize: "small"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=MatcherEditor.js.map