@perses-dev/dashboards 0.15.0 → 0.17.0

package/dist/cjs/components/Variables/variable-model.js

@@ -0,0 +1,74 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name1 in all)Object.defineProperty(target, name1, {
+        enumerable: true,
+        get: all[name1]
+    });
+}
+_export(exports, {
+    useListVariablePluginValues: ()=>useListVariablePluginValues,
+    getVariableValuesKey: ()=>getVariableValuesKey
+});
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _reactQuery = require("@tanstack/react-query");
+function useListVariablePluginValues(definition) {
+    const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
+    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) {
+        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
+        dependsOnVariables = dependencies.variables;
+    }
+    const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
+    let waitToLoad = false;
+    if (dependsOnVariables) {
+        waitToLoad = dependsOnVariables.some((v)=>{
+            var ref;
+            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
+        });
+    }
+    const variablesValueKey = getVariableValuesKey(variables);
+    const variablesOptionsQuery = (0, _reactQuery.useQuery)([
+        name,
+        definition,
+        variablesValueKey,
+        timeRange
+    ], async ()=>{
+        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            datasourceStore,
+            variables,
+            timeRange
+        }));
+        var ref;
+        return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
+    }, {
+        enabled: !!variablePlugin || waitToLoad
+    });
+    return variablesOptionsQuery;
+}
+function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
+}

package/dist/cjs/components/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./Dashboard"), exports);
 _exportStar(require("./DashboardToolbar"), exports);
 _exportStar(require("./DeletePanelDialog"), exports);
 _exportStar(require("./DeletePanelGroupDialog"), exports);
+_exportStar(require("./DownloadButton"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);

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

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
 });
 const _functions = require("../../utils/functions");
 const _common = require("./common");
+const _panelGroupSlice = require("./panel-group-slice");
 function createPanelEditorSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
     return (set, get)=>{
@@ -51,14 +52,14 @@ function createPanelEditorSlice() {
                     },
                     applyChanges: (next)=>{
                         const panelDefinititon = createPanelDefinitionFromEditorValues(next);
-                        set((draft)=>{
-                            draft.panels[panelKey] = panelDefinititon;
+                        set((state)=>{
+                            state.panels[panelKey] = panelDefinititon;
                             // If the panel didn't change groups, nothing else to do
                             if (next.groupId === panelGroupId) {
                                 return;
                             }
                             // Move panel to the new group
-                            const existingGroup = draft.panelGroups[panelGroupId];
+                            const existingGroup = state.panelGroups[panelGroupId];
                             if (existingGroup === undefined) {
                                 throw new Error(`Missing panel group ${panelGroupId}`);
                             }
@@ -72,7 +73,7 @@ function createPanelEditorSlice() {
                             existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
                             delete existingGroup.itemPanelKeys[panelGroupLayoutId];
                             // Add item to the end of the new group
-                            const newGroup = draft.panelGroups[next.groupId];
+                            const newGroup = state.panelGroups[next.groupId];
                             if (newGroup === undefined) {
                                 throw new Error(`Could not find new group ${next.groupId}`);
                             }
@@ -98,13 +99,13 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                // If a panel group isn't supplied, add to the first group
+                // If a panel group isn't supplied, add to the first group or create a group if there aren't any
+                let newGroup = undefined;
+                panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
                 if (panelGroupId === undefined) {
-                    const firstGroupId = get().panelGroupOrder[0];
-                    if (firstGroupId === undefined) {
-                        throw new Error('No panel groups to add a panel to');
-                    }
-                    panelGroupId = firstGroupId;
+                    newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = 'Panel Group';
+                    panelGroupId = newGroup.id;
                 }
                 const editorState = {
                     mode: 'Add',
@@ -119,12 +120,17 @@ function createPanelEditorSlice() {
                     },
                     applyChanges: (next)=>{
                         const panelDef = createPanelDefinitionFromEditorValues(next);
-                        const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
-                        set((draft)=>{
+                        const uniquePanelKeys = getUniquePanelKeys(get().panels);
+                        let panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
+                        // append count if panel key already exists
+                        if (uniquePanelKeys[panelKey]) {
+                            panelKey += `-${uniquePanelKeys[panelKey]}`;
+                        }
+                        set((state)=>{
                             // Add a panel
-                            draft.panels[panelKey] = panelDef;
+                            state.panels[panelKey] = panelDef;
                             // Also add a panel group item referencing the panel
-                            const group = draft.panelGroups[next.groupId];
+                            const group = state.panelGroups[next.groupId];
                             if (group === undefined) {
                                 throw new Error(`Missing panel group ${next.groupId}`);
                             }
@@ -145,8 +151,12 @@ function createPanelEditorSlice() {
                         });
                     }
                 };
-                // Open the editor with the new state
                 set((state)=>{
+                    // Add the new panel group if one was created for the panel
+                    if (newGroup !== undefined) {
+                        (0, _panelGroupSlice.addPanelGroup)(state, newGroup);
+                    }
+                    // Open the editor with the new state
                     state.panelEditor = editorState;
                 });
             }
@@ -180,3 +190,18 @@ function getYForNewRow(group) {
     }
     return newRowY;
 }
+// Find all the unique panel keys
+// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name
+function getUniquePanelKeys(panels) {
+    const uniquePanelKeys = {};
+    Object.keys(panels).forEach((panelKey)=>{
+        const key = panelKey.replace(/-([0-9]+)/, '');
+        const count = uniquePanelKeys[key];
+        if (count) {
+            uniquePanelKeys[key] = count + 1;
+        } else {
+            uniquePanelKeys[key] = 1;
+        }
+    });
+    return uniquePanelKeys;
+}

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

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "createPanelGroupEditorSlice", {
     enumerable: true,
     get: ()=>createPanelGroupEditorSlice
 });
-const _common = require("./common");
+const _panelGroupSlice = require("./panel-group-slice");
 const createPanelGroupEditorSlice = (set, get)=>({
         panelGroupEditor: undefined,
         openAddPanelGroup: ()=>{
@@ -30,15 +30,11 @@ const createPanelGroupEditorSlice = (set, get)=>({
                     isCollapsed: false
                 },
                 applyChanges (next) {
-                    const newGroup = {
-                        id: (0, _common.generateId)(),
-                        itemLayouts: [],
-                        itemPanelKeys: {},
-                        ...next
-                    };
+                    const newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = next.title;
+                    newGroup.isCollapsed = next.isCollapsed;
                     set((draft)=>{
-                        draft.panelGroups[newGroup.id] = newGroup;
-                        draft.panelGroupOrder.unshift(newGroup.id);
+                        (0, _panelGroupSlice.addPanelGroup)(draft, newGroup);
                     });
                 },
                 close () {

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

@@ -22,7 +22,9 @@ function _export(target, all) {
 }
 _export(exports, {
     createPanelGroupSlice: ()=>createPanelGroupSlice,
-    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups
+    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups,
+    createEmptyPanelGroup: ()=>createEmptyPanelGroup,
+    addPanelGroup: ()=>addPanelGroup
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
@@ -96,3 +98,16 @@ function convertLayoutsToPanelGroups(layouts) {
         panelGroupOrder: panelGroupIdOrder
     };
 }
+function createEmptyPanelGroup() {
+    return {
+        id: (0, _common.generateId)(),
+        title: undefined,
+        isCollapsed: false,
+        itemLayouts: [],
+        itemPanelKeys: {}
+    };
+}
+function addPanelGroup(draft, newGroup) {
+    draft.panelGroups[newGroup.id] = newGroup;
+    draft.panelGroupOrder.unshift(newGroup.id);
+}

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -46,45 +46,40 @@ describe('Panel Groups', ()=>{
     };
     it('should delete panel', ()=>{
         renderDashboard();
-        const panel = _react.screen.getByText('CPU');
-        _userEvent.default.hover(panel);
-        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        const panelTitle = 'CPU';
+        const deletePanelButton = _react.screen.getByLabelText(`delete panel ${panelTitle}`);
         _userEvent.default.click(deletePanelButton);
         _react.screen.getByText('Delete Panel');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
         // The panel should disappear
-        const deletedPanel = _react.screen.queryByText('CPU');
+        const deletedPanel = _react.screen.queryByText(panelTitle);
         expect(deletedPanel).not.toBeInTheDocument();
     });
     it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
         renderDashboard();
-        const panels = _react.screen.getAllByText('Disk I/O Utilization');
+        const panelTitle = 'Disk I/O Utilization';
+        const panels = _react.screen.getAllByText(panelTitle);
         expect(panels).toHaveLength(2);
-        const panel = panels[0];
-        if (panel === undefined) throw new Error('Missing panel');
-        _userEvent.default.hover(panel);
-        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        const deletePanelButton = _react.screen.getAllByLabelText(`delete panel ${panelTitle}`)[0];
+        if (deletePanelButton === undefined) throw new Error('Missing delete button');
         _userEvent.default.click(deletePanelButton);
         _react.screen.getByText('Delete Panel');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
         // The deleted panel should still be on screen in the other group
-        const deletedPanel = _react.screen.queryByText('Disk I/O Utilization');
+        const deletedPanel = _react.screen.queryByText(panelTitle);
         expect(deletedPanel).toBeInTheDocument();
     });
     it('should swap panels', ()=>{
         renderDashboard();
         // should move panel down
-        const group1 = _react.screen.getByText('CPU Stats');
-        _userEvent.default.hover(group1);
-        const moveGroupDownBtn = _react.screen.getByLabelText('move group down');
+        const groupTitle1 = 'CPU Stats';
+        const moveGroupDownBtn = _react.screen.getByLabelText(`move group ${groupTitle1} down`);
         _userEvent.default.click(moveGroupDownBtn);
-        _userEvent.default.unhover(moveGroupDownBtn);
         // should move panel up
-        const group2 = _react.screen.getByText('Disk Stats');
-        _userEvent.default.hover(group2);
-        const moveGroupUpBtn = _react.screen.getByLabelText('move group up');
+        const groupTitle2 = 'Disk Stats';
+        const moveGroupUpBtn = _react.screen.getByLabelText(`move group ${groupTitle2} up`);
         _userEvent.default.click(moveGroupUpBtn);
     /* TODO: Figure out how to test this visually without coupling to the store
     const layouts = storeApi.getState().layouts;
@@ -94,15 +89,14 @@ describe('Panel Groups', ()=>{
     */ });
     it('should delete a panel group', ()=>{
         renderDashboard();
-        const group = _react.screen.getByText('CPU Stats');
-        _userEvent.default.hover(group);
-        const deleteGroupIcon = _react.screen.getByLabelText('delete group');
+        const groupTitle = 'CPU Stats';
+        const deleteGroupIcon = _react.screen.getByLabelText(`delete group ${groupTitle}`);
         _userEvent.default.click(deleteGroupIcon);
         _react.screen.getByText('Delete Panel Group');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
         // should remove group
-        const deletedGroup = _react.screen.queryByText('CPU Stats');
+        const deletedGroup = _react.screen.queryByText(groupTitle);
         expect(deletedGroup).not.toBeInTheDocument();
         // CPU panel should be completely gone since it wasn't in any other group
         let panel = _react.screen.queryByText('CPU');

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAmF5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAuBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAoF5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -19,6 +19,7 @@ import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { useDashboardActions, useEditMode } from '../../context';
 import { TemplateVariableList } from '../Variables';
 import { TimeRangeControls } from '../TimeRangeControls';
+import { DownloadButton } from '../DownloadButton';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
@@ -47,9 +48,7 @@ export const DashboardToolbar = (props)=>{
                             /*#__PURE__*/ _jsxs(Stack, {
                                 direction: "row",
                                 spacing: 1,
-                                sx: {
-                                    marginLeft: 'auto'
-                                },
+                                marginLeft: "auto",
                                 children: [
                                     /*#__PURE__*/ _jsx(Button, {
                                         variant: "contained",
@@ -81,11 +80,9 @@ export const DashboardToolbar = (props)=>{
                             })
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {
-                            direction: 'row',
+                            direction: "row",
                             spacing: 1,
-                            sx: {
-                                marginLeft: 'auto'
-                            },
+                            marginLeft: "auto",
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     startIcon: /*#__PURE__*/ _jsx(AddPanelGroupIcon, {}),
@@ -104,7 +101,7 @@ export const DashboardToolbar = (props)=>{
                 })
             ]
         }) : /*#__PURE__*/ _jsxs(Stack, {
-            spacing: 2,
+            spacing: 1,
             padding: 2,
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
@@ -116,12 +113,11 @@ export const DashboardToolbar = (props)=>{
                         dashboardTitle,
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
-                            spacing: 2,
-                            sx: {
-                                marginLeft: 'auto'
-                            },
+                            spacing: 1,
+                            marginLeft: "auto",
                             children: [
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                /*#__PURE__*/ _jsx(DownloadButton, {}),
                                 isLaptopSize && /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, onEditButtonClick, onCancelButtonClick } =\n    props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { DownloadButton } from '../DownloadButton';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, onEditButtonClick, onCancelButtonClick } =\n    props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DownloadButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

package/dist/components/DownloadButton/DownloadButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function DownloadButton(): JSX.Element;
+//# sourceMappingURL=DownloadButton.d.ts.map

package/dist/components/DownloadButton/DownloadButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":";AAmBA,wBAAgB,cAAc,gBA8B7B"}

package/dist/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,60 @@
+// Copyright 2022 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import DownloadIcon from 'mdi-material-ui/DownloadOutline';
+import { IconButton, styled } from '@mui/material';
+import { useDashboard } from '../../context';
+// Button to download the dashboard as a JSON file.
+export function DownloadButton() {
+    const { dashboard  } = useDashboard();
+    const hiddenLinkRef = useRef(null);
+    const onDownloadButtonClick = ()=>{
+        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+        // Create blob URL
+        const hiddenLinkUrl = URL.createObjectURL(new Blob([
+            JSON.stringify(dashboard)
+        ], {
+            type: 'application/json'
+        }));
+        // Simulate click
+        hiddenLinkRef.current.href = hiddenLinkUrl;
+        hiddenLinkRef.current.click();
+        // Remove blob URL (for memory management)
+        URL.revokeObjectURL(hiddenLinkUrl);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+const DownloadIconButton = styled(IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px',
+        color: theme.palette.grey[900]
+    }));
+
+//# sourceMappingURL=DownloadButton.js.map

package/dist/components/DownloadButton/DownloadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["// Copyright 2022 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 React, { useRef } from 'react';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { IconButton, styled } from '@mui/material';\nimport { useDashboard } from '../../context';\n\n// Button to download the dashboard as a JSON file.\nexport function DownloadButton() {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const onDownloadButtonClick = () => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <DownloadIconButton title=\"Download JSON\" onClick={onDownloadButtonClick}>\n        <DownloadIcon />\n      </DownloadIconButton>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n\nconst DownloadIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n  color: theme.palette.grey[900],\n}));\n"],"names":["React","useRef","DownloadIcon","IconButton","styled","useDashboard","DownloadButton","dashboard","hiddenLinkRef","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","DownloadIconButton","title","onClick","a","ref","style","display","download","metadata","name","theme","border","palette","grey","borderRadius","shape","padding","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO,CAAC;AACtC,OAAOC,YAAY,MAAM,iCAAiC,CAAC;AAC3D,SAASC,UAAU,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACnD,SAASC,YAAY,QAAQ,eAAe,CAAC;AAE7C,mDAAmD;AACnD,OAAO,SAASC,cAAc,GAAG;IAC/B,MAAM,EAAEC,SAAS,CAAA,EAAE,GAAGF,YAAY,EAAE,AAAC;IACrC,MAAMG,aAAa,GAAGP,MAAM,CAAoB,IAAI,CAAC,AAAC;IAEtD,MAAMQ,qBAAqB,GAAG,IAAM;QAClC,IAAI,CAACD,aAAa,IAAI,CAACA,aAAa,CAACE,OAAO,EAAE,OAAO;QACrD,kBAAkB;QAClB,MAAMC,aAAa,GAAGC,GAAG,CAACC,eAAe,CACvC,IAAIC,IAAI,CAAC;YAACC,IAAI,CAACC,SAAS,CAACT,SAAS,CAAC;SAAC,EAAE;YACpCU,IAAI,EAAE,kBAAkB;SACzB,CAAC,CACH,AAAC;QACF,iBAAiB;QACjBT,aAAa,CAACE,OAAO,CAACQ,IAAI,GAAGP,aAAa,CAAC;QAC3CH,aAAa,CAACE,OAAO,CAACS,KAAK,EAAE,CAAC;QAC9B,0CAA0C;QAC1CP,GAAG,CAACQ,eAAe,CAACT,aAAa,CAAC,CAAC;IACrC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACU,kBAAkB;gBAACC,KAAK,EAAC,eAAe;gBAACC,OAAO,EAAEd,qBAAqB;0BACtE,cAAA,KAACP,YAAY,KAAG;cACG;0BAIrB,KAACsB,GAAC;gBAACC,GAAG,EAAEjB,aAAa;gBAAEkB,KAAK,EAAE;oBAAEC,OAAO,EAAE,MAAM;iBAAE;gBAAEC,QAAQ,EAAE,CAAC,EAAErB,SAAS,CAACsB,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;cAAI;;MACjG,CACH;AACJ,CAAC;AAED,MAAMT,kBAAkB,GAAGjB,MAAM,CAACD,UAAU,CAAC,CAAC,CAAC,EAAE4B,KAAK,CAAA,EAAE,GAAM,CAAA;QAC5DC,MAAM,EAAE,CAAC,UAAU,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9CC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAACD,YAAY;QACtCE,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEP,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;KAC/B,CAAA,AAAC,CAAC,AAAC"}

package/dist/components/DownloadButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DownloadButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DownloadButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}

package/dist/{utils/component-ids.js → components/DownloadButton/index.js}

@@ -10,18 +10,6 @@
 // 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 { useRef } from 'react';
-/**
- * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.
- */ export function useId(prefix) {
-    if (globalThis.useIdValue === undefined) {
-        globalThis.useIdValue = 0;
-    }
-    const id = useRef(undefined);
-    if (id.current === undefined) {
-        id.current = `${prefix}-${globalThis.useIdValue++}`;
-    }
-    return id.current;
-}
+export * from './DownloadButton';
 
-//# sourceMappingURL=component-ids.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/DownloadButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/index.ts"],"sourcesContent":["// Copyright 2022 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\nexport * from './DownloadButton';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB,CAAC"}

package/dist/components/GridLayout/GridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA+ChD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA0DhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -20,6 +20,7 @@ import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 import { GridContainer } from './GridContainer';
 const ResponsiveGridLayout = WidthProvider(Responsive);
+const SMALL_LAYOUT_BREAKPOINT = 'sm';
 /**
  * Layout component that arranges children in a Grid based on the definition.
  */ export function GridLayout(props) {
@@ -30,6 +31,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
+    const handleLayoutChange = (currentLayout, allLayouts)=>{
+        // Using the value from `allLayouts` instead of `currentLayout` because of
+        // a bug in react-layout-grid where `currentLayout` does not adjust properly
+        // when going to a smaller breakpoint and then back to a larger breakpoint.
+        // https://github.com/react-grid-layout/react-grid-layout/issues/1663
+        const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];
+        if (smallLayout) {
+            updatePanelGroupLayouts(smallLayout);
+        }
+    };
     return /*#__PURE__*/ _jsxs(GridContainer, {
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
@@ -66,9 +77,9 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                         10
                     ],
                     layouts: {
-                        sm: groupDefinition.itemLayouts
+                        [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
                     },
-                    onLayoutChange: updatePanelGroupLayouts,
+                    onLayoutChange: handleLayoutChange,
                     children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
                             children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                 FallbackComponent: ErrorAlert,