@perses-dev/dashboards 0.14.0 → 0.16.0

package/dist/cjs/components/Panel/PanelHeader.js

@@ -33,58 +33,55 @@ function _interopRequireDefault(obj) {
 function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    // Don't show any actions unless panel is hovered
     let action = undefined;
-    if (isHovered) {
-        if (editHandlers !== undefined) {
-            // If there are edit handlers, always just show the edit buttons
-            action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                spacing: 0.5,
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "edit panel",
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "delete panel",
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": "drag handle",
-                        size: "small",
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            }
-                        })
-                    })
-                ]
-            });
-        } else if (description !== undefined) {
-            // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-            action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                id: descriptionTooltipId,
-                description: description,
-                placement: _components.TooltipPlacement.Bottom,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                    "aria-label": "Panel Description",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
-                        "aria-describedby": "info-tooltip",
-                        "aria-hidden": false,
+    if (editHandlers !== undefined) {
+        // If there are edit handlers, always just show the edit buttons
+        action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.5,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `edit panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onEditPanelClick,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `delete panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onDeletePanelClick,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": `move panel ${title}`,
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                        className: "drag-handle",
                         sx: {
-                            color: (theme)=>theme.palette.grey[700]
+                            cursor: 'grab'
                         }
                     })
                 })
-            });
-        }
+            ]
+        });
+    } else if (description !== undefined && isHovered) {
+        // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
+        action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            id: descriptionTooltipId,
+            description: description,
+            placement: _components.TooltipPlacement.Bottom,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                "aria-label": "Panel Description",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                    "aria-describedby": "info-tooltip",
+                    "aria-hidden": false,
+                    sx: {
+                        color: (theme)=>theme.palette.grey[700]
+                    }
+                })
+            })
+        });
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
         id: id,
@@ -96,6 +93,10 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
             id: titleElementId,
             variant: "subtitle1",
             sx: {
+                // `minHeight` guarantees that the header has the correct height
+                // when there is no title (i.e. in the preview)
+                lineHeight: '24px',
+                minHeight: '24px',
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis'
@@ -105,7 +106,10 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         action: action,
         sx: (0, _components.combineSx)((theme)=>({
                 padding: theme.spacing(1),
-                borderBottom: `solid 1px ${theme.palette.divider}`
+                borderBottom: `solid 1px ${theme.palette.divider}`,
+                '.MuiCardHeader-content': {
+                    overflow: 'hidden'
+                }
             }), sx),
         ...rest
     });

package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js

@@ -70,6 +70,29 @@ describe('Panel Drawer', ()=>{
             }
         });
     });
+    it('should add panel with duplicate panel name', async ()=>{
+        const storeApi = renderPanelDrawer();
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'cpu');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // make sure we don't have duplicate panel key by appending "-1"
+            'cpu-1': {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -25,8 +25,6 @@ _export(exports, {
     TimeRangeControls: ()=>TimeRangeControls
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _core = require("@perses-dev/core");
 const _context = require("../../context");
@@ -88,58 +86,21 @@ const TIME_OPTIONS = [
 ];
 function TimeRangeControls() {
     const { timeRange , setTimeRange  } = (0, _context.useDashboardTimeRange)();
-    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
-    const anchorEl = (0, _react.useRef)();
-    const convertedTimeRange = (0, _react.useMemo)(()=>{
-        return (0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange;
-    }, [
-        timeRange
-    ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: "row",
-        spacing: 1,
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
-                anchorEl: anchorEl.current,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'center'
+    const defaultTimeRange = (0, _context.useDefaultTimeRange)();
+    // add time shortcut if one does not match duration from dashboard JSON
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
+        if ((0, _core.isDurationString)(defaultTimeRange.pastDuration)) {
+            TIME_OPTIONS.push({
+                value: {
+                    pastDuration: defaultTimeRange.pastDuration
                 },
-                open: showCustomDateSelector,
-                onClose: ()=>setShowCustomDateSelector(false),
-                sx: (theme)=>({
-                        padding: theme.spacing(2)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.AbsoluteTimePicker, {
-                    initialTimeRange: convertedTimeRange,
-                    onChange: (timeRange)=>{
-                        setTimeRange(timeRange);
-                        setShowCustomDateSelector(false);
-                    }
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
-                fullWidth: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                    ref: anchorEl,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.TimeRangeSelector, {
-                        timeOptions: TIME_OPTIONS,
-                        value: timeRange,
-                        onSelectChange: (event)=>{
-                            const duration = event.target.value;
-                            const relativeTimeInput = {
-                                pastDuration: duration,
-                                end: new Date()
-                            };
-                            setTimeRange(relativeTimeInput);
-                            setShowCustomDateSelector(false);
-                        },
-                        onCustomClick: ()=>{
-                            setShowCustomDateSelector(true);
-                        }
-                    })
-                })
-            })
-        ]
+                display: `Last ${defaultTimeRange.pastDuration}`
+            });
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
+        timeOptions: TIME_OPTIONS,
+        value: timeRange,
+        onChange: setTimeRange
     });
 }

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js

@@ -45,29 +45,45 @@ describe('TimeRangeControls', ()=>{
             dashboardResource: _testDashboard.default
         };
     });
-    const renderTimeRangeControls = ()=>{
+    const renderTimeRangeControls = (testURLParams)=>{
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
             initialState: initialState,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                timeRange: testDefaultTimeRange,
+                initialTimeRange: testDefaultTimeRange,
+                enabledURLParams: testURLParams,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
             })
         }), undefined, history);
     };
-    it('should render correct initial relative time shortcut', async ()=>{
-        renderTimeRangeControls();
-        expect(_react.screen.getByText('Last 5 minutes')).toBeInTheDocument();
-    });
-    // TODO: fix setTimeRange no-op, test query params
-    it('should be able to select the first option', ()=>{
-        renderTimeRangeControls();
+    it('should default to dashboard duration and update selected time option when clicked', async ()=>{
+        renderTimeRangeControls(false);
+        expect(_react.screen.getByText('Last 30 minutes')).toBeInTheDocument();
         const dateButton = _react.screen.getByRole('button');
         _userEvent.default.click(dateButton);
-        const firstOption = _react.screen.getByRole('option', {
+        const firstSelected = _react.screen.getByRole('option', {
             name: 'Last 5 minutes'
         });
-        _userEvent.default.click(firstOption);
+        _userEvent.default.click(firstSelected);
         expect(dateButton).toHaveTextContent(/5 minutes/i);
     });
+    it('should update URL params with correct time range values', ()=>{
+        renderTimeRangeControls(true);
+        const dateButton = _react.screen.getByRole('button');
+        _userEvent.default.click(dateButton);
+        const firstSelected = _react.screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        _userEvent.default.click(firstSelected);
+        expect(history.location.search).toEqual('?start=5m');
+        // pick another option from TimeRangeSelector dropdown
+        const secondSelected = _react.screen.getByText('Last 12 hours');
+        _userEvent.default.click(secondSelected);
+        expect(history.location.search).toEqual('?start=12h');
+        // back button should return to first option selected
+        (0, _react.act)(()=>{
+            history.back();
+        });
+        expect(history.location.search).toEqual('?start=5m');
+    });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });

package/dist/cjs/components/Variables/Variable.js

@@ -57,16 +57,24 @@ function ListVariable({ name  }) {
     const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
     const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
+    const allVariables = (0, _pluginSystem.useTemplateVariableValues)();
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
+    const variablePluginCtx = {
+        timeRange,
+        datasourceStore,
+        variables: allVariables
+    };
     const spec = definition.spec.plugin.spec;
     let dependsOnVariables;
     if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
-        dependsOnVariables = variablePlugin.dependsOn(spec);
+        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
+        dependsOnVariables = dependencies.variables;
     }
     const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
     var ref4;
-    const label = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.label) !== null && ref4 !== void 0 ? ref4 : name;
+    const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
     let waitToLoad = false;
     if (dependsOnVariables) {
         waitToLoad = dependsOnVariables.some((v)=>{
@@ -75,7 +83,6 @@ function ListVariable({ name  }) {
         });
     }
     const variablesValueKey = getVariableValuesKey(variables);
-    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const variablesOptionsQuery = (0, _reactQuery.useQuery)([
         name,
         definition,
@@ -165,7 +172,7 @@ function ListVariable({ name  }) {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
                     id: name,
-                    children: label
+                    children: title
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
                     sx: {
@@ -192,6 +199,11 @@ function ListVariable({ name  }) {
                             disabled: true,
                             children: "Loading"
                         }),
+                        finalOptions.length === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                            value: "empty",
+                            disabled: true,
+                            children: "No options"
+                        }),
                         finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
                                 value: option.value,
                                 children: option.label

package/dist/cjs/components/Variables/VariableEditor.js

@@ -32,9 +32,24 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function getValidation(variableDefinitions) {
+    const errors = [];
+    /**  Variable names must be unique */ const variableNames = variableDefinitions.map((variableDefinition)=>variableDefinition.spec.name);
+    const uniqueVariableNames = new Set(variableNames);
+    if (variableNames.length !== uniqueVariableNames.size) {
+        errors.push('Variable names must be unique');
+    }
+    return {
+        errors: errors,
+        isValid: errors.length === 0
+    };
+}
 function VariableEditor(props) {
     const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
     const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
+    const validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
+        variableDefinitions
+    ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
     const removeVariable = (index)=>{
         setVariableDefinitions((draft)=>{
@@ -60,6 +75,7 @@ function VariableEditor(props) {
             }
             if (!v.spec.display) {
                 v.spec.display = {
+                    name: v.spec.name,
                     hidden: false
                 };
             }
@@ -117,7 +133,7 @@ function VariableEditor(props) {
                         justifyContent: "end",
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                disabled: props.variableDefinitions === variableDefinitions,
+                                disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
                                 variant: "contained",
                                 onClick: ()=>{
                                     props.onChange(variableDefinitions);
@@ -141,6 +157,10 @@ function VariableEditor(props) {
                     /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                         spacing: 2,
                         children: [
+                            !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                                    severity: "error",
+                                    children: error
+                                }, error)),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
                                 component: _material.Paper,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -19,20 +19,69 @@ Object.defineProperty(exports, "VariableEditForm", {
     get: ()=>VariableEditForm
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
 const _useImmer = require("use-immer");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _variableEditorFormModel = require("./variable-editor-form-model");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 const VARIABLE_TYPES = [
     'ListVariable',
     'TextVariable'
 ];
+// TODO: Replace with proper validation library
+function getValidation(state) {
+    /** Name validation */ let name = null;
+    if (!state.name) {
+        name = 'Name is required';
+    }
+    // name can only contain alphanumeric characters and underscores and no spaces
+    if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {
+        name = 'Name can only contain alphanumeric characters, underscores, and dashes';
+    }
+    return {
+        name,
+        isValid: !name
+    };
+}
 const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         pb: 2,
         variant: "subtitle1",
@@ -40,6 +89,9 @@ const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_mater
     });
 function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
     const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
+    const validation = (0, _react.useMemo)(()=>getValidation(state), [
+        state
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
@@ -54,9 +106,12 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            required: true,
+                            error: !!validation.name,
                             fullWidth: true,
                             label: "Name",
                             value: state.name,
+                            helperText: validation.name,
                             onChange: (v)=>{
                                 setState((draft)=>{
                                     draft.name = v.target.value;
@@ -98,10 +153,10 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                             fullWidth: true,
                             label: "Label",
-                            value: state.label,
+                            value: state.title,
                             onChange: (v)=>{
                                 setState((draft)=>{
-                                    draft.label = v.target.value;
+                                    draft.title = v.target.value;
                                 });
                             }
                         })
@@ -220,6 +275,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                 justifyContent: "end",
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        disabled: !validation.isValid,
                         variant: "contained",
                         onClick: ()=>{
                             onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -47,7 +47,7 @@ function getInitialState(initialVariableDefinition) {
     }
     return {
         name: initialVariableDefinition.spec.name,
-        label: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.label,
+        title: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.name,
         kind: initialVariableDefinition.kind,
         description: '',
         listVariableFields,
@@ -55,11 +55,11 @@ function getInitialState(initialVariableDefinition) {
     };
 }
 function getVariableDefinitionFromState(state) {
-    const { name , label , kind  } = state;
+    const { name , title , kind  } = state;
     const commonSpec = {
         name,
         display: {
-            label
+            name: title
         }
     };
     if (kind === 'TextVariable') {