@perses-dev/dashboards 0.54.0-beta.4 → 0.54.0-beta.6

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -78,23 +78,26 @@ function convertLayoutsToPanelGroups(layouts) {
         const itemLayouts = [];
         const itemPanelKeys = {};
         // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
-        for (const item of layout.spec.items){
-            const panelGroupLayoutId = (0, _common.generateId)().toString();
-            itemLayouts.push({
-                i: panelGroupLayoutId,
-                w: item.width,
-                h: item.height,
-                x: item.x,
-                y: item.y
-            });
-            itemPanelKeys[panelGroupLayoutId] = (0, _spec.getPanelKeyFromRef)(item.content);
+        if ('items' in layout.spec) {
+            for (const item of layout.spec.items){
+                const panelGroupLayoutId = (0, _common.generateId)().toString();
+                itemLayouts.push({
+                    i: panelGroupLayoutId,
+                    w: item.width,
+                    h: item.height,
+                    x: item.x,
+                    y: item.y
+                });
+                itemPanelKeys[panelGroupLayoutId] = (0, _spec.getPanelKeyFromRef)(item.content);
+            }
         }
         // Create the panel group and keep track of the ID order
+        const repeatVariable = 'repeatVariable' in layout.spec ? layout.spec.repeatVariable : undefined;
         const panelGroupId = (0, _common.generateId)();
         panelGroups[panelGroupId] = {
             id: panelGroupId,
             isCollapsed: layout.spec.display?.collapse?.open === false,
-            repeatVariable: layout.spec.repeatVariable,
+            repeatVariable,
             title: layout.spec.display?.title,
             itemLayouts,
             itemPanelKeys

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -266,7 +266,7 @@ function findDashboardDatasource(dashboardDatasources, selector) {
         });
         usedNames.add(selectorName);
         const isExplicitDefault = !isOverridden && spec.default && !explicitDefaultAdded;
-        if (results[0] && (isFirst || isExplicitDefault)) {
+        if (results[0] && isExplicitDefault) {
             // If we haven't added a default yet and this is a default, add default option to the beginning of the results
             results[0].items = [
                 {

package/dist/cjs/context/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./AnnotationProvider"), exports);
 _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
 _export_star(require("./VariableProvider"), exports);

package/dist/cjs/context/useDashboard.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "useDashboard", {
 const _spec = require("@perses-dev/spec");
 const _DashboardProvider = require("./DashboardProvider");
 const _VariableProvider = require("./VariableProvider");
+const _AnnotationProvider = require("./AnnotationProvider");
 function useDashboard() {
     const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, links, ttl })=>({
             panels,
@@ -39,7 +40,9 @@ function useDashboard() {
             ttl
         }));
     const { setVariableDefinitions } = (0, _VariableProvider.useVariableDefinitionActions)();
+    const { setAnnotationSpecs } = (0, _AnnotationProvider.useAnnotationActions)();
     const variables = (0, _VariableProvider.useVariableDefinitions)();
+    const annotations = (0, _AnnotationProvider.useAnnotationSpecs)();
     const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
     const dashboard = kind === 'Dashboard' ? {
         kind,
@@ -49,6 +52,7 @@ function useDashboard() {
             panels,
             layouts,
             variables,
+            annotations,
             duration,
             refreshInterval,
             datasources,
@@ -62,6 +66,7 @@ function useDashboard() {
             panels,
             layouts,
             variables,
+            annotations,
             duration,
             refreshInterval,
             datasources,
@@ -71,6 +76,9 @@ function useDashboard() {
     };
     const setDashboard = (dashboardResource)=>{
         setVariableDefinitions(dashboardResource.spec.variables);
+        if (dashboardResource.spec.annotations) {
+            setAnnotationSpecs(dashboardResource.spec.annotations);
+        }
         setDashboardResource(dashboardResource);
     };
     return {

package/dist/cjs/model/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./DashboardResource"), exports);
 _export_star(require("./PanelGroupDefinition"), exports);
+_export_star(require("./VariableDefinition"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -36,7 +36,7 @@ const DashboardApp = (props)=>{
     });
 };
 const DashboardAppContent = (props)=>{
-    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard } = props;
+    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { isEditMode, setEditMode } = (0, _context.useEditMode)();
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
@@ -97,6 +97,7 @@ const DashboardAppContent = (props)=>{
                 onSave: onSave,
                 isReadonly: isReadonly,
                 isVariableEnabled: isVariableEnabled,
+                isAnnotationEnabled: isAnnotationEnabled,
                 isDatasourceEnabled: isDatasourceEnabled,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -30,7 +30,7 @@ const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, ...others } = props;
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, ...others } = props;
     const { spec } = dashboardResource;
     const dashboardDuration = spec.duration ?? _constants.DEFAULT_DASHBOARD_DURATION;
     const dashboardRefreshInterval = spec.refreshInterval ?? _constants.DEFAULT_REFRESH_INTERVAL;
@@ -90,30 +90,34 @@ function ViewDashboard(props) {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
                     builtinVariableDefinitions: builtinVariables,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        sx: (0, _components.combineSx)({
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            position: 'relative',
-                            overflow: 'hidden'
-                        }, sx),
-                        ...others,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
-                                dashboardResource: dashboardResource,
-                                emptyDashboardProps: emptyDashboardProps,
-                                isReadonly: isReadonly,
-                                isVariableEnabled: isVariableEnabled,
-                                isDatasourceEnabled: isDatasourceEnabled,
-                                disableShortcuts: disableShortcuts,
-                                isCreating: isCreating,
-                                isInitialVariableSticky: isInitialVariableSticky,
-                                isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
-                                dashboardTitleComponent: dashboardTitleComponent,
-                                onSave: onSave,
-                                onDiscard: onDiscard
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.AnnotationProvider, {
+                        initialAnnotationSpecs: spec.annotations ?? [],
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: (0, _components.combineSx)({
+                                display: 'flex',
+                                width: '100%',
+                                height: '100%',
+                                position: 'relative',
+                                overflow: 'hidden'
+                            }, sx),
+                            ...others,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
+                                    dashboardResource: dashboardResource,
+                                    emptyDashboardProps: emptyDashboardProps,
+                                    isReadonly: isReadonly,
+                                    isVariableEnabled: isVariableEnabled,
+                                    isAnnotationEnabled: isAnnotationEnabled,
+                                    isDatasourceEnabled: isDatasourceEnabled,
+                                    disableShortcuts: disableShortcuts,
+                                    isCreating: isCreating,
+                                    isInitialVariableSticky: isInitialVariableSticky,
+                                    isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
+                                    dashboardTitleComponent: dashboardTitleComponent,
+                                    onSave: onSave,
+                                    onDiscard: onDiscard
+                                })
                             })
                         })
                     })

package/dist/components/Annotations/AnnotationsEditor.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { AnnotationSpec } from '@perses-dev/spec';
+export declare function AnnotationEditor(props: {
+    annotationSpecs: AnnotationSpec[];
+    onChange: (annotationSpecs: AnnotationSpec[]) => void;
+    onCancel: () => void;
+}): ReactElement;
+//# sourceMappingURL=AnnotationsEditor.d.ts.map

package/dist/components/Annotations/AnnotationsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Annotations/AnnotationsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAkBxD,OAAO,EAAE,cAAc,EAA2B,MAAM,kBAAkB,CAAC;AA8B3E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAyMf"}

package/dist/components/Annotations/AnnotationsEditor.js

@@ -0,0 +1,289 @@
+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 { useState, useMemo } from 'react';
+import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell as MuiTableCell, Table, TableHead, Switch, Typography, IconButton, Alert, styled } from '@mui/material';
+import AddIcon from 'mdi-material-ui/Plus';
+import { useImmer } from 'use-immer';
+import PencilIcon from 'mdi-material-ui/Pencil';
+import TrashIcon from 'mdi-material-ui/TrashCan';
+import ArrowUp from 'mdi-material-ui/ArrowUp';
+import ArrowDown from 'mdi-material-ui/ArrowDown';
+import { ValidationProvider, AnnotationEditorForm } from '@perses-dev/plugin-system';
+import { useDiscardChangesConfirmationDialog } from '../../context';
+function validateAnnotationSpecs(annotationSpecs) {
+    const errors = [];
+    const annotationNames = [];
+    for (const annotationSpec of annotationSpecs){
+        if (annotationNames.includes(annotationSpec.display.name)) {
+            errors.push(`Duplicate annotation name: ${annotationSpec.display.name}`);
+        } else {
+            annotationNames.push(annotationSpec.display.name);
+        }
+    }
+    return {
+        errors: errors,
+        isValid: errors.length === 0
+    };
+}
+export function AnnotationEditor(props) {
+    const [annotationSpecs, setAnnotationSpecs] = useImmer(props.annotationSpecs);
+    const [annotationEditIdx, setAnnotationEditIdx] = useState(null);
+    const [annotationFormAction, setAnnotationFormAction] = useState('update');
+    const validation = useMemo(()=>validateAnnotationSpecs(annotationSpecs), [
+        annotationSpecs
+    ]);
+    const currentEditingAnnotationSpec = annotationEditIdx !== null ? annotationSpecs[annotationEditIdx] : undefined;
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = useDiscardChangesConfirmationDialog();
+    const handleCancel = ()=>{
+        if (JSON.stringify(props.annotationSpecs) !== JSON.stringify(annotationSpecs)) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    props.onCancel();
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            props.onCancel();
+        }
+    };
+    const removeAnnotation = (index)=>{
+        setAnnotationSpecs((draft)=>{
+            draft.splice(index, 1);
+        });
+    };
+    const addAnnotation = ()=>{
+        setAnnotationFormAction('create');
+        setAnnotationSpecs((draft)=>{
+            draft.push({
+                display: {
+                    name: 'NewAnnotation'
+                },
+                plugin: {}
+            });
+        });
+        setAnnotationEditIdx(annotationSpecs.length);
+    };
+    const editAnnotation = (index)=>{
+        setAnnotationFormAction('update');
+        setAnnotationEditIdx(index);
+    };
+    const toggleAnnotationVisibility = (index, visible)=>{
+        setAnnotationSpecs((draft)=>{
+            const v = draft[index];
+            if (!v) {
+                return;
+            }
+            v.display.hidden = !visible;
+        });
+    };
+    const changeAnnotationOrder = (index, direction)=>{
+        const step = direction === 'up' ? -1 : 1;
+        setAnnotationSpecs((draft)=>{
+            const current = draft[index];
+            const adjacent = draft[index + step];
+            if (!current || !adjacent) {
+                return;
+            }
+            draft[index + step] = current;
+            draft[index] = adjacent;
+        });
+    };
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: annotationEditIdx !== null && currentEditingAnnotationSpec ? /*#__PURE__*/ _jsx(ValidationProvider, {
+            children: /*#__PURE__*/ _jsx(AnnotationEditorForm, {
+                initialAnnotationSpec: currentEditingAnnotationSpec,
+                action: annotationFormAction,
+                isDraft: true,
+                onActionChange: setAnnotationFormAction,
+                onSave: (definition)=>{
+                    setAnnotationSpecs((draft)=>{
+                        draft[annotationEditIdx] = definition;
+                        setAnnotationEditIdx(null);
+                    });
+                },
+                onClose: ()=>{
+                    if (annotationFormAction === 'create') {
+                        removeAnnotation(annotationEditIdx);
+                    }
+                    setAnnotationEditIdx(null);
+                }
+            })
+        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h2",
+                            children: "Edit Dashboard Annotations"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    disabled: props.annotationSpecs === annotationSpecs || !validation.isValid,
+                                    variant: "contained",
+                                    onClick: ()=>{
+                                        props.onChange(annotationSpecs);
+                                    },
+                                    children: "Apply"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: 2,
+                    sx: {
+                        overflowY: 'scroll'
+                    },
+                    children: /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 2,
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            children: [
+                                !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ _jsx(Alert, {
+                                        severity: "error",
+                                        children: error
+                                    }, error)),
+                                /*#__PURE__*/ _jsx(TableContainer, {
+                                    children: /*#__PURE__*/ _jsxs(Table, {
+                                        sx: {
+                                            minWidth: 650
+                                        },
+                                        "aria-label": "table of annotations",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Visibility"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Name"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Type"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Description"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: "Actions"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableBody, {
+                                                children: annotationSpecs.map((v, idx)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                children: /*#__PURE__*/ _jsx(Switch, {
+                                                                    checked: v.display?.hidden !== true,
+                                                                    onChange: (e)=>{
+                                                                        toggleAnnotationVisibility(idx, e.target.checked);
+                                                                    }
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: v.display.name
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: v.plugin.kind
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: v.display?.description ?? ''
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs(TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    whiteSpace: 'nowrap'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'up'),
+                                                                        disabled: idx === 0,
+                                                                        children: /*#__PURE__*/ _jsx(ArrowUp, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'down'),
+                                                                        disabled: idx === annotationSpecs.length - 1,
+                                                                        children: /*#__PURE__*/ _jsx(ArrowDown, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>editAnnotation(idx),
+                                                                        children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>removeAnnotation(idx),
+                                                                        children: /*#__PURE__*/ _jsx(TrashIcon, {})
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }, v.display.name))
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    display: "flex",
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addAnnotation,
+                                        children: "Add Annotation"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+const TableCell = styled(MuiTableCell)(({ theme })=>({
+        borderBottom: `solid 1px ${theme.palette.divider}`
+    }));
+
+//# sourceMappingURL=AnnotationsEditor.js.map

package/dist/components/Annotations/AnnotationsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Annotations/AnnotationsEditor.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 { useState, useMemo, ReactElement } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { AnnotationSpec, Definition, UnknownSpec } from '@perses-dev/spec';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { ValidationProvider, AnnotationEditorForm } from '@perses-dev/plugin-system';\nimport { Action } from '@perses-dev/components';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nfunction validateAnnotationSpecs(annotationSpecs: AnnotationSpec[]): { isValid: boolean; errors: string[] } {\n  const errors: string[] = [];\n\n  const annotationNames: string[] = [];\n\n  for (const annotationSpec of annotationSpecs) {\n    if (annotationNames.includes(annotationSpec.display.name)) {\n      errors.push(`Duplicate annotation name: ${annotationSpec.display.name}`);\n    } else {\n      annotationNames.push(annotationSpec.display.name);\n    }\n  }\n\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function AnnotationEditor(props: {\n  annotationSpecs: AnnotationSpec[];\n  onChange: (annotationSpecs: AnnotationSpec[]) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [annotationSpecs, setAnnotationSpecs] = useImmer(props.annotationSpecs);\n  const [annotationEditIdx, setAnnotationEditIdx] = useState<number | null>(null);\n  const [annotationFormAction, setAnnotationFormAction] = useState<Action>('update');\n\n  const validation = useMemo(() => validateAnnotationSpecs(annotationSpecs), [annotationSpecs]);\n  const currentEditingAnnotationSpec: AnnotationSpec | undefined =\n    annotationEditIdx !== null ? annotationSpecs[annotationEditIdx] : undefined;\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.annotationSpecs) !== JSON.stringify(annotationSpecs)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeAnnotation = (index: number): void => {\n    setAnnotationSpecs((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addAnnotation = (): void => {\n    setAnnotationFormAction('create');\n    setAnnotationSpecs((draft) => {\n      draft.push({\n        display: { name: 'NewAnnotation' },\n        plugin: {} as Definition<UnknownSpec>,\n      });\n    });\n    setAnnotationEditIdx(annotationSpecs.length);\n  };\n\n  const editAnnotation = (index: number): void => {\n    setAnnotationFormAction('update');\n    setAnnotationEditIdx(index);\n  };\n\n  const toggleAnnotationVisibility = (index: number, visible: boolean): void => {\n    setAnnotationSpecs((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      v.display.hidden = !visible;\n    });\n  };\n\n  const changeAnnotationOrder = (index: number, direction: 'up' | 'down'): void => {\n    const step = direction === 'up' ? -1 : 1;\n\n    setAnnotationSpecs((draft) => {\n      const current = draft[index];\n      const adjacent = draft[index + step];\n\n      if (!current || !adjacent) {\n        return;\n      }\n\n      draft[index + step] = current;\n      draft[index] = adjacent;\n    });\n  };\n\n  return (\n    <>\n      {annotationEditIdx !== null && currentEditingAnnotationSpec ? (\n        <ValidationProvider>\n          <AnnotationEditorForm\n            initialAnnotationSpec={currentEditingAnnotationSpec}\n            action={annotationFormAction}\n            isDraft={true}\n            onActionChange={setAnnotationFormAction}\n            onSave={(definition: AnnotationSpec) => {\n              setAnnotationSpecs((draft) => {\n                draft[annotationEditIdx] = definition;\n                setAnnotationEditIdx(null);\n              });\n            }}\n            onClose={() => {\n              if (annotationFormAction === 'create') {\n                removeAnnotation(annotationEditIdx);\n              }\n              setAnnotationEditIdx(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Annotations</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.annotationSpecs === annotationSpecs || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(annotationSpecs);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of annotations\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {annotationSpecs.map((v, idx) => (\n                        <TableRow key={v.display.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleAnnotationVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            {v.display.name}\n                          </TableCell>\n                          <TableCell>{v.plugin.kind}</TableCell>\n                          <TableCell>{v.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeAnnotationOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeAnnotationOrder(idx, 'down')}\n                              disabled={idx === annotationSpecs.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editAnnotation(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeAnnotation(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addAnnotation}\n                  >\n                    Add Annotation\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ValidationProvider","AnnotationEditorForm","useDiscardChangesConfirmationDialog","validateAnnotationSpecs","annotationSpecs","errors","annotationNames","annotationSpec","includes","display","name","push","isValid","length","AnnotationEditor","props","setAnnotationSpecs","annotationEditIdx","setAnnotationEditIdx","annotationFormAction","setAnnotationFormAction","validation","currentEditingAnnotationSpec","undefined","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeAnnotation","index","draft","splice","addAnnotation","plugin","editAnnotation","toggleAnnotationVisibility","visible","v","hidden","changeAnnotationOrder","direction","step","current","adjacent","initialAnnotationSpec","action","isDraft","onActionChange","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","map","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","kind","whiteSpace","startIcon"],"mappings":"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"}

package/dist/components/Annotations/EditAnnotationsButton.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from '@mui/material';
+export interface EditAnnotationsButtonProps extends Pick<ButtonProps, 'fullWidth'> {
+    /**
+     * The variant to use to display the button.
+     */
+    variant?: 'text' | 'outlined';
+    /**
+     * The color to use to display the button.
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The label used inside the button.
+     */
+    label?: string;
+}
+export declare function EditAnnotationsButton({ variant, label, color, fullWidth, }: EditAnnotationsButtonProps): ReactElement;
+//# sourceMappingURL=EditAnnotationsButton.d.ts.map

package/dist/components/Annotations/EditAnnotationsButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditAnnotationsButton.d.ts","sourceRoot":"","sources":["../../../src/components/Annotations/EditAnnotationsButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAQpD,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAgB,EAChB,KAAqB,EACrB,KAAiB,EACjB,SAAS,GACV,EAAE,0BAA0B,GAAG,YAAY,CA6C3C"}

package/dist/components/Annotations/EditAnnotationsButton.js

@@ -0,0 +1,70 @@
+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 { useState } from 'react';
+import { Button } from '@mui/material';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import { Drawer, InfoTooltip } from '@perses-dev/components';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
+import { useAnnotationActions, useAnnotationSpecs } from '../../context';
+import { AnnotationEditor } from './AnnotationsEditor';
+export function EditAnnotationsButton({ variant = 'text', label = 'Annotations', color = 'primary', fullWidth }) {
+    const [isAnnotationEditorOpen, setIsAnnotationEditorOpen] = useState(false);
+    const annotationSpecs = useAnnotationSpecs();
+    const { setAnnotationSpecs } = useAnnotationActions();
+    const openAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(true);
+    };
+    const closeAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(false);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.editAnnotations,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                    onClick: openAnnotationEditor,
+                    "aria-label": TOOLTIP_TEXT.editAnnotations,
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: editButtonStyle,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ _jsx(Drawer, {
+                isOpen: isAnnotationEditorOpen,
+                onClose: closeAnnotationEditor,
+                slotProps: {
+                    paper: {
+                        sx: {
+                            width: '50%'
+                        }
+                    }
+                },
+                "data-testid": "annotation-editor",
+                children: /*#__PURE__*/ _jsx(AnnotationEditor, {
+                    annotationSpecs: annotationSpecs,
+                    onCancel: closeAnnotationEditor,
+                    onChange: (annotations)=>{
+                        setAnnotationSpecs(annotations);
+                        setIsAnnotationEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=EditAnnotationsButton.js.map