@perses-dev/dashboards 0.34.0 → 0.36.0

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -34,8 +34,8 @@ const _dashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const { isEditMode  } = (0, _context.useEditMode)();
-    const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
+    const isBiggerThanLg = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('lg'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
@@ -85,7 +85,7 @@ const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2, 2, 2)
+                        padding: (theme)=>theme.spacing(1, 2)
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
@@ -97,50 +97,33 @@ const DashboardToolbar = (props)=>{
                                 }
                             })
                         }),
-                        isBiggerThanMd ? // On bigger screens, make it one row
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            ml: "auto",
                             direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            sx: {
-                                whiteSpace: 'nowrap'
-                            },
-                            children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
-                            ]
-                        }) : // On smaller screens, make it two rows
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                            spacing: 1,
+                            flexWrap: isBiggerThanLg ? 'nowrap' : 'wrap-reverse',
+                            justifyContent: "end",
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
+                                    whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {})
                                     ]
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {})
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
                                     ]
                                 })
                             ]

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -43,7 +43,7 @@ const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
-    const { setTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    const { setTimeRange , setRefreshInterval  } = (0, _pluginSystem.useTimeRange)();
     const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
     const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
@@ -52,6 +52,7 @@ const EditJsonDialogForm = ()=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
+        setRefreshInterval(draftDashboard.spec.refreshInterval);
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Form, {

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

@@ -97,25 +97,6 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
                 })
             ]
         });
-    } 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
-        actions = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-            id: descriptionTooltipId,
-            description: description,
-            enterDelay: 100,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                "aria-label": "panel description",
-                size: "small",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
-                    "aria-describedby": "info-tooltip",
-                    "aria-hidden": false,
-                    fontSize: "inherit",
-                    sx: {
-                        color: (theme)=>theme.palette.grey[700]
-                    }
-                })
-            })
-        });
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
         id: id,
@@ -123,19 +104,41 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
         "aria-labelledby": titleElementId,
         "aria-describedby": descriptionTooltipId,
         disableTypography: true,
-        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-            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'
-            },
-            children: title
+        title: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    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'
+                    },
+                    children: title
+                }),
+                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                    id: descriptionTooltipId,
+                    description: description,
+                    enterDelay: 100,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "panel description",
+                        size: "small",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                            "aria-describedby": "info-tooltip",
+                            "aria-hidden": false,
+                            fontSize: "inherit",
+                            sx: {
+                                color: (theme)=>theme.palette.text.secondary
+                            }
+                        })
+                    })
+                })
+            ]
         }),
         action: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderActionWrapper, {
             direction: "row",

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

@@ -21,7 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TIME_OPTIONS: ()=>TIME_OPTIONS,
+    DEFAULT_TIME_RANGE_OPTIONS: ()=>DEFAULT_TIME_RANGE_OPTIONS,
+    DEFAULT_REFRESH_INTERVAL_OPTIONS: ()=>DEFAULT_REFRESH_INTERVAL_OPTIONS,
     TimeRangeControls: ()=>TimeRangeControls
 });
 const _jsxRuntime = require("react/jsx-runtime");
@@ -38,7 +39,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TIME_OPTIONS = [
+const DEFAULT_TIME_RANGE_OPTIONS = [
     {
         value: {
             pastDuration: '5m'
@@ -94,17 +95,55 @@ const TIME_OPTIONS = [
         display: 'Last 14 days'
     }
 ];
+const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
+    {
+        value: {
+            pastDuration: '0s'
+        },
+        display: 'Off'
+    },
+    {
+        value: {
+            pastDuration: '5s'
+        },
+        display: '5s'
+    },
+    {
+        value: {
+            pastDuration: '10s'
+        },
+        display: '10s'
+    },
+    {
+        value: {
+            pastDuration: '15s'
+        },
+        display: '15s'
+    },
+    {
+        value: {
+            pastDuration: '30s'
+        },
+        display: '30s'
+    },
+    {
+        value: {
+            pastDuration: '60s'
+        },
+        display: '1m'
+    }
+];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx , showRefresh =true  }) {
-    const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
+function TimeRangeControls({ heightPx , showTimeRangeSelector =true , showRefreshButton =true , showRefreshInterval =true , timePresets =DEFAULT_TIME_RANGE_OPTIONS  }) {
+    const { timeRange , setTimeRange , refresh , refreshInterval , setRefreshInterval  } = (0, _pluginSystem.useTimeRange)();
     // TODO: Remove this since it couples to the dashboard context
     const dashboardDuration = (0, _context.useDashboardDuration)();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time shortcut if one does not match duration from dashboard JSON
-    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === dashboardDuration)) {
+    if (!timePresets.some((option)=>option.value.pastDuration === dashboardDuration)) {
         if ((0, _core.isDurationString)(dashboardDuration)) {
-            TIME_OPTIONS.push({
+            timePresets.push({
                 value: {
                     pastDuration: dashboardDuration
                 },
@@ -116,13 +155,13 @@ function TimeRangeControls({ heightPx , showRefresh =true  }) {
         direction: "row",
         spacing: 1,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
-                timeOptions: TIME_OPTIONS,
+            showTimeRangeSelector && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
+                timeOptions: timePresets,
                 value: timeRange,
                 onChange: setTimeRange,
                 height: height
             }),
-            showRefresh && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            showRefreshButton && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.refreshDashboard,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
                     "aria-label": _constants.TOOLTIP_TEXT.refreshDashboard,
@@ -132,6 +171,12 @@ function TimeRangeControls({ heightPx , showRefresh =true  }) {
                     },
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
                 })
+            }),
+            showRefreshInterval && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.RefreshIntervalPicker, {
+                timeOptions: DEFAULT_REFRESH_INTERVAL_OPTIONS,
+                value: refreshInterval,
+                onChange: setRefreshInterval,
+                height: height
             })
         ]
     });

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

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "TemplateVariable", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
 const _context = require("../../context");
 const _variableModel = require("./variable-model");
 function TemplateVariable({ name  }) {
@@ -83,7 +83,7 @@ function ListVariable({ name  }) {
         if (allowAllValue) {
             computedOptions = [
                 {
-                    value: _pluginSystem.DEFAULT_ALL_VALUE,
+                    value: _core.DEFAULT_ALL_VALUE,
                     label: 'All'
                 },
                 ...computedOptions
@@ -142,7 +142,7 @@ function ListVariable({ name  }) {
                         // Must be selected
                         if (e.target.value === null || e.target.value.length === 0) {
                             if (allowAllValue) {
-                                setVariableValue(name, _pluginSystem.DEFAULT_ALL_VALUE);
+                                setVariableValue(name, _core.DEFAULT_ALL_VALUE);
                             }
                             return;
                         }

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -82,7 +82,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource , isEditMode  } ,  } = props;
-    const { spec: { display , duration  } , metadata ,  } = dashboardResource;
+    const { spec: { display , duration , refreshInterval  } , metadata ,  } = dashboardResource;
     let { spec: { layouts , panels  } ,  } = dashboardResource;
     // Set fallbacks in case the frontend is used with a non-Perses backend
     layouts = layouts !== null && layouts !== void 0 ? layouts : [];
@@ -103,11 +103,12 @@ function initStore(props) {
             metadata,
             display,
             duration,
+            refreshInterval,
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration  }  })=>{
+            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration , refreshInterval  }  })=>{
                 set((state)=>{
                     state.metadata = metadata;
                     state.display = display;
@@ -116,6 +117,7 @@ function initStore(props) {
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
+                    state.refreshInterval = refreshInterval;
                 });
             }
         };

package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js

@@ -35,6 +35,7 @@ const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
 const _immer1 = /*#__PURE__*/ _interopRequireDefault(require("immer"));
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
 const _queryParams = require("./query-params");
@@ -113,7 +114,7 @@ function PluginProvider({ children  }) {
             const v = {
                 ...originalValues[name]
             };
-            if (v.value === _pluginSystem.DEFAULT_ALL_VALUE) {
+            if (v.value === _core.DEFAULT_ALL_VALUE) {
                 const definition = definitions.find((d)=>d.spec.name === name);
                 // If the variable is a list variable and has a custom all value, then use that value instead
                 if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.custom_all_value) {
@@ -176,11 +177,11 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                         return;
                     }
                     // Make sure there is only one all value
-                    if (Array.isArray(val) && val.includes(_pluginSystem.DEFAULT_ALL_VALUE)) {
-                        if (val.at(-1) === _pluginSystem.DEFAULT_ALL_VALUE) {
-                            val = _pluginSystem.DEFAULT_ALL_VALUE;
+                    if (Array.isArray(val) && val.includes(_core.DEFAULT_ALL_VALUE)) {
+                        if (val.at(-1) === _core.DEFAULT_ALL_VALUE) {
+                            val = _core.DEFAULT_ALL_VALUE;
                         } else {
-                            val = val.filter((v)=>v !== _pluginSystem.DEFAULT_ALL_VALUE);
+                            val = val.filter((v)=>v !== _core.DEFAULT_ALL_VALUE);
                         }
                     }
                     if (queryParams) {

package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "hydrateTemplateVariableStates", {
     enumerable: true,
     get: ()=>hydrateTemplateVariableStates
 });
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
 // TODO: move to TemplateVariableProvider/utils.ts
 function hydrateTemplateVariableState(variable, initialValue) {
     const varState = {
@@ -49,8 +49,8 @@ function hydrateTemplateVariableState(variable, initialValue) {
             // to end up in a buggy state if the variables are initialized with an "all"
             // value inside an array. When hydrating variables, normalize this to minimize
             // bugs.
-            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _pluginSystem.DEFAULT_ALL_VALUE) {
-                varState.value = _pluginSystem.DEFAULT_ALL_VALUE;
+            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _core.DEFAULT_ALL_VALUE) {
+                varState.value = _core.DEFAULT_ALL_VALUE;
             }
             break;
         default:

package/dist/cjs/context/useDashboard.js

@@ -22,14 +22,15 @@ const _core = require("@perses-dev/core");
 const _dashboardProvider = require("./DashboardProvider");
 const _templateVariableProvider = require("./TemplateVariableProvider");
 function useDashboard() {
-    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration  })=>({
+    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration , refreshInterval ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration , refreshInterval  })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             setDashboard,
             metadata,
             display,
-            duration
+            duration,
+            refreshInterval
         }));
     const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
     const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
@@ -42,7 +43,8 @@ function useDashboard() {
             panels,
             layouts,
             variables,
-            duration
+            duration,
+            refreshInterval
         }
     };
     const setDashboard = (dashboardResource)=>{

package/dist/cjs/stories/decorators/constants.js

@@ -29,6 +29,7 @@ const EMPTY_DASHBOARD_RESOURCE = {
     },
     spec: {
         duration: '1h',
+        refreshInterval: '0s',
         variables: [],
         layouts: [],
         panels: {}

package/dist/cjs/test/testDashboard.js

@@ -29,6 +29,7 @@ const testDashboard = {
     },
     spec: {
         duration: '30m',
+        refreshInterval: '0s',
         variables: [
             {
                 kind: 'TextVariable',

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

@@ -29,7 +29,10 @@ function ViewDashboard(props) {
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
+    var _refreshInterval;
+    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : '0s';
     const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
+    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashhboardRefreshInterval);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -40,6 +43,7 @@ function ViewDashboard(props) {
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
                 initialTimeRange: initialTimeRange,
+                initialRefreshInterval: initialRefreshInterval,
                 enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,

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":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6G5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAgG5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -26,8 +26,8 @@ import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const { isEditMode  } = useEditMode();
-    const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
+    const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         children: dashboardName
@@ -77,7 +77,7 @@ export const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2, 2, 2)
+                        padding: (theme)=>theme.spacing(1, 2)
                     },
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
@@ -89,50 +89,33 @@ export const DashboardToolbar = (props)=>{
                                 }
                             })
                         }),
-                        isBiggerThanMd ? // On bigger screens, make it one row
                         /*#__PURE__*/ _jsxs(Stack, {
+                            ml: "auto",
                             direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            sx: {
-                                whiteSpace: 'nowrap'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                /*#__PURE__*/ _jsx(AddPanelButton, {}),
-                                /*#__PURE__*/ _jsx(AddGroupButton, {}),
-                                /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                /*#__PURE__*/ _jsx(EditJsonButton, {})
-                            ]
-                        }) : // On smaller screens, make it two rows
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 1,
+                            flexWrap: isBiggerThanLg ? 'nowrap' : 'wrap-reverse',
+                            justifyContent: "end",
                             children: [
                                 /*#__PURE__*/ _jsxs(Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
+                                    whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                        /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                        /*#__PURE__*/ _jsx(EditJsonButton, {})
+                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
+                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
                                     ]
                                 }),
                                 /*#__PURE__*/ _jsxs(Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
                                     children: [
-                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
-                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
+                                        /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                        /*#__PURE__*/ _jsx(DownloadButton, {}),
+                                        /*#__PURE__*/ _jsx(EditJsonButton, {})
                                     ]
                                 })
                             ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 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, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","background","default","whiteSpace","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 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, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n            <Stack ml=\"auto\" direction=\"row\" flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'} justifyContent=\"end\">\n              <Stack direction=\"row\" spacing={1} ml={1} mb={1} whiteSpace=\"nowrap\">\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <Stack direction=\"row\" spacing={1} ml={1} mb={1}>\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanLg","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","background","default","ml","flexWrap","justifyContent","mb","whiteSpace","paddingY"],"mappings":"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"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -35,7 +35,7 @@ export const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = useEditJsonDialog();
-    const { setTimeRange  } = useTimeRange();
+    const { setTimeRange , setRefreshInterval  } = useTimeRange();
     const { dashboard , setDashboard  } = useDashboard();
     const [draftDashboard, setDraftDashboard] = useState(dashboard);
     const handleApply = (e)=>{
@@ -44,6 +44,7 @@ const EditJsonDialogForm = ()=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
+        setRefreshInterval(draftDashboard.spec.refreshInterval);
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ _jsxs(Dialog.Form, {