@perses-dev/dashboards 0.27.0 → 0.29.0

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

@@ -20,62 +20,17 @@ Object.defineProperty(exports, "WithDatasourceStore", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _dashboards = require("@perses-dev/dashboards");
-const _constants = require("./constants");
+const _test = require("../../test");
 // Type guard because storybook types parameters as `any`
 function isWithDatasourceStoreParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
-const prometheusDemo = {
-    kind: 'GlobalDatasource',
-    metadata: {
-        name: 'PrometheusDemo',
-        created_at: '0001-01-01T00:00:00Z',
-        updated_at: '0001-01-01T00:00:00Z',
-        version: 0
-    },
-    spec: {
-        default: true,
-        plugin: {
-            kind: 'PrometheusDatasource',
-            spec: {
-                direct_url: prometheusDemoUrl
-            }
-        }
-    }
-};
 const WithDatasourceStore = (Story, context)=>{
     const initParameter = context.parameters.withDatasourceStore;
     const parameter = isWithDatasourceStoreParameter(initParameter) ? initParameter : undefined;
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    // This default currently defines the bare minimum to get a story working in
-    // the `Dashboard` storybook with the Prometheus demo api. We'll likely want
-    // to expand it to do more in the future.
-    const defaultDatasourceProps = {
-        dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE,
-        datasourceApi: {
-            getDatasource: ()=>{
-                return Promise.resolve(undefined);
-            },
-            getGlobalDatasource: (selector)=>{
-                if (selector.kind === 'PrometheusDatasource') {
-                    return Promise.resolve({
-                        resource: prometheusDemo,
-                        proxyUrl: prometheusDemoUrl
-                    });
-                }
-                return Promise.resolve(undefined);
-            },
-            listDatasources: ()=>{
-                return Promise.resolve([]);
-            },
-            listGlobalDatasources: ()=>{
-                return Promise.resolve([]);
-            }
-        }
-    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.DatasourceStoreProvider, {
-        ...defaultDatasourceProps,
+        ..._test.defaultDatasourceProps,
         ...props,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
     });

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

@@ -86,6 +86,9 @@ const bundledPluginLoader = (0, _pluginSystem.dynamicImportPluginLoader)([
 const WithPluginRegistry = (Story)=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
         pluginLoader: bundledPluginLoader,
+        defaultPluginKinds: {
+            TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
+        },
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
     });
 };

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

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./constants"), exports);
 _exportStar(require("./WithDashboard"), exports);
+_exportStar(require("./WithDataQueriesProvider"), exports);
 _exportStar(require("./WithDatasourceStore"), exports);
 _exportStar(require("./WithPluginRegistry"), exports);
 _exportStar(require("./WithQueryClient"), exports);

package/dist/cjs/test/datasource-provider.js

@@ -0,0 +1,70 @@
+// Copyright 2023 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 name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    prometheusDemoUrl: ()=>prometheusDemoUrl,
+    prometheusDemo: ()=>prometheusDemo,
+    defaultDatasourceProps: ()=>defaultDatasourceProps
+});
+const _dashboardProvider = require("./dashboard-provider");
+const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
+const prometheusDemo = {
+    kind: 'GlobalDatasource',
+    metadata: {
+        name: 'PrometheusDemo',
+        created_at: '0001-01-01T00:00:00Z',
+        updated_at: '0001-01-01T00:00:00Z',
+        version: 0
+    },
+    spec: {
+        default: true,
+        plugin: {
+            kind: 'PrometheusDatasource',
+            spec: {
+                direct_url: prometheusDemoUrl
+            }
+        }
+    }
+};
+const defaultDatasourceProps = {
+    dashboardResource: (0, _dashboardProvider.getTestDashboard)(),
+    datasourceApi: {
+        getDatasource: ()=>{
+            return Promise.resolve(undefined);
+        },
+        getGlobalDatasource: (selector)=>{
+            if (selector.kind === 'PrometheusDatasource') {
+                return Promise.resolve({
+                    resource: prometheusDemo,
+                    proxyUrl: prometheusDemoUrl
+                });
+            }
+            return Promise.resolve(undefined);
+        },
+        listDatasources: ()=>{
+            return Promise.resolve([]);
+        },
+        listGlobalDatasources: ()=>{
+            return Promise.resolve([]);
+        }
+    }
+};

package/dist/cjs/test/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./dashboard-provider"), exports);
+_exportStar(require("./datasource-provider"), exports);
 _exportStar(require("./plugin-registry"), exports);
 _exportStar(require("./render"), exports);
 function _exportStar(from, to) {

package/dist/cjs/test/plugin-registry.js

@@ -19,17 +19,23 @@ Object.defineProperty(exports, "MOCK_PLUGINS", {
     get: ()=>MOCK_PLUGINS
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const FakeTimeSeriesChartOptionEditor = ()=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+        children: "TimeSeriesChart options"
+    });
+};
 const FakeTimeSeriesPlugin = {
     PanelComponent: ()=>{
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
             children: "TimeSeriesChart panel"
         });
     },
-    OptionsEditorComponent: ()=>{
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            children: "TimeSeriesChart options"
-        });
-    },
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: FakeTimeSeriesChartOptionEditor
+        }
+    ],
     createInitialOptions: ()=>({})
 };
 const MOCK_TIME_SERIES_PANEL = {

package/dist/cjs/test/testDashboard.js

@@ -62,24 +62,24 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: '%'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'
-                                            }
-                                        }
+                                        query: 'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'
                                     }
                                 }
-                            ],
-                            unit: {
-                                kind: '%'
                             }
                         }
-                    }
+                    ]
                 }
             },
             memory: {
@@ -91,57 +91,57 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: 'Bytes'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'node_memory_MemTotal_bytes{job="node",instance="$instance"} - node_memory_MemFree_bytes{job="node",instance="$instance"} - node_memory_Buffers_bytes{job="node",instance="$instance"} - node_memory_Cached_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: 'node_memory_MemTotal_bytes{job="node",instance="$instance"} - node_memory_MemFree_bytes{job="node",instance="$instance"} - node_memory_Buffers_bytes{job="node",instance="$instance"} - node_memory_Cached_bytes{job="node",instance="$instance"}'
                                     }
-                                },
-                                {
-                                    kind: 'TimeSeriesQuery',
+                                }
+                            }
+                        },
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'node_memory_Buffers_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: 'node_memory_Buffers_bytes{job="node",instance="$instance"}'
                                     }
-                                },
-                                {
-                                    kind: 'TimeSeriesQuery',
+                                }
+                            }
+                        },
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'node_memory_Cached_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: 'node_memory_Cached_bytes{job="node",instance="$instance"}'
                                     }
-                                },
-                                {
-                                    kind: 'TimeSeriesQuery',
+                                }
+                            }
+                        },
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'node_memory_MemFree_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: 'node_memory_MemFree_bytes{job="node",instance="$instance"}'
                                     }
                                 }
-                            ],
-                            unit: {
-                                kind: 'Bytes'
                             }
                         }
-                    }
+                    ]
                 }
             },
             // This panel is referenced in more than one layout below
@@ -154,24 +154,24 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: 'Percent'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'
-                                            }
-                                        }
+                                        query: 'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'
                                     }
                                 }
-                            ],
-                            unit: {
-                                kind: 'Percent'
                             }
                         }
-                    }
+                    ]
                 }
             },
             filesystemFullness: {
@@ -183,24 +183,24 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: 'Percent'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: '1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: '1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}'
                                     }
                                 }
-                            ],
-                            unit: {
-                                kind: 'Percent'
                             }
                         }
-                    }
+                    ]
                 }
             }
         },

package/dist/cjs/utils/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./panelUtils"), exports);
+_exportStar(require("./time"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/utils/time.js

@@ -0,0 +1,27 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSuggestedStepMs", {
+    enumerable: true,
+    get: ()=>useSuggestedStepMs
+});
+const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
+function useSuggestedStepMs(width) {
+    const { absoluteTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    if (width === undefined) return 0;
+    return (0, _core.getSuggestedStepMs)(absoluteTimeRange, width);
+}

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

@@ -2,6 +2,7 @@
 import { PanelGroupItemId } from '../../context';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;
+    width: number;
 }
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAiB1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAIzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAkC1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -11,13 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { DataQueriesProvider } from '@perses-dev/plugin-system';
 import { useEditMode, usePanel, usePanelActions } from '../../context';
+import { useSuggestedStepMs } from '../../utils';
 import { Panel } from '../Panel/Panel';
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */ export function GridItemContent(props) {
-    const { panelGroupItemId  } = props;
+    const { panelGroupItemId , width  } = props;
     const panelDefinition = usePanel(panelGroupItemId);
+    const { spec: { queries  } ,  } = panelDefinition;
     const { isEditMode  } = useEditMode();
     const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = usePanelActions(panelGroupItemId);
     // Provide actions to the panel when in edit mode
@@ -29,9 +32,24 @@ import { Panel } from '../Panel/Panel';
             onDeletePanelClick: openDeletePanelDialog
         };
     }
-    return /*#__PURE__*/ _jsx(Panel, {
-        definition: panelDefinition,
-        editHandlers: editHandlers
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const suggestedStepMs = useSuggestedStepMs(width);
+    const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
+    const definitions = queryDefinitions.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    });
+    return /*#__PURE__*/ _jsx(DataQueriesProvider, {
+        definitions: definitions,
+        options: {
+            suggestedStepMs
+        },
+        children: /*#__PURE__*/ _jsx(Panel, {
+            definition: panelDefinition,
+            editHandlers: editHandlers
+        })
     });
 }
 

package/dist/components/GridLayout/GridItemContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  return <Panel definition={panelDefinition} editHandlers={editHandlers} />;\n}\n"],"names":["useEditMode","usePanel","usePanelActions","Panel","GridItemContent","props","panelGroupItemId","panelDefinition","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","definition"],"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,SAA2BA,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAMnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACnC,MAAME,eAAe,GAAGN,QAAQ,CAACK,gBAAgB,CAAC,AAAC;IACnD,MAAM,EAAEE,UAAU,CAAA,EAAE,GAAGR,WAAW,EAAE,AAAC;IACrC,MAAM,EAAES,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGT,eAAe,CAACI,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIM,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,qBAAO,KAACP,KAAK;QAACc,UAAU,EAAEV,eAAe;QAAEK,YAAY,EAAEA,YAAY;MAAI,CAAC;AAC5E,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { QueryDefinition } from '@perses-dev/core';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query: QueryDefinition) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n      <Panel definition={panelDefinition} editHandlers={editHandlers} />\n    </DataQueriesProvider>\n  );\n}\n"],"names":["DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","options","definition"],"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;AACA,SAASA,mBAAmB,QAAQ,2BAA2B,CAAC;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AACjD,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAOnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC1C,MAAMG,eAAe,GAAGR,QAAQ,CAACM,gBAAgB,CAAC,AAAC;IACnD,MAAM,EACJG,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAE,CAAA,IAClB,GAAGF,eAAe,AAAC;IACpB,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IACrC,MAAM,EAAEa,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGb,eAAe,CAACK,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIS,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,MAAMO,eAAe,GAAGlB,kBAAkB,CAACK,KAAK,CAAC,AAAC;IAClD,MAAMc,gBAAgB,GAAGX,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,EAAE,AAAC;IACvC,MAAMY,WAAW,GAAGD,gBAAgB,CAACE,GAAG,CAAC,CAACC,KAAsB,GAAK;QACnE,OAAO;YACLC,IAAI,EAAED,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACD,IAAI;YAC5BhB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACjB,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,AAAC;IAEH,qBACE,KAACX,mBAAmB;QAACwB,WAAW,EAAEA,WAAW;QAAEK,OAAO,EAAE;YAAEP,eAAe;SAAE;kBACzE,cAAA,KAACjB,KAAK;YAACyB,UAAU,EAAEpB,eAAe;YAAEO,YAAY,EAAEA,YAAY;UAAI;MAC9C,CACtB;AACJ,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;AAQ/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA0DhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkFhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -20,6 +20,7 @@ import { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants'
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 import { GridContainer } from './GridContainer';
+const DEFAULT_MARGIN = 10;
 const ResponsiveGridLayout = WidthProvider(Responsive);
 /**
  * Layout component that arranges children in a Grid based on the definition.
@@ -31,6 +32,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
+    const [gridColWidth, setGridColWidth] = useState(0);
     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
@@ -41,6 +43,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
             updatePanelGroupLayouts(smallLayout);
         }
     };
+    /**
+   * Calculate the column width so we can determine the width of each panel for suggested step ms
+   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
+   */ const handleWidthChange = (containerWidth, margin, cols, containerPadding)=>{
+        const marginX = margin[0];
+        const marginWidth = marginX * (cols - 1);
+        const containerPaddingWidth = containerPadding[0] * 2;
+        // exclude margin and padding from total width
+        setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
+    };
     return /*#__PURE__*/ _jsxs(GridContainer, {
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
@@ -70,6 +82,10 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                     ],
                     isDraggable: isEditMode,
                     isResizable: isEditMode,
+                    margin: [
+                        DEFAULT_MARGIN,
+                        DEFAULT_MARGIN
+                    ],
                     containerPadding: [
                         0,
                         10
@@ -78,14 +94,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                         [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts
                     },
                     onLayoutChange: handleLayoutChange,
-                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
+                    onWidthChange: handleWidthChange,
+                    children: groupDefinition.itemLayouts.map(({ i , w  })=>/*#__PURE__*/ _jsx("div", {
                             children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                 FallbackComponent: ErrorAlert,
                                 children: /*#__PURE__*/ _jsx(GridItemContent, {
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i
-                                    }
+                                    },
+                                    width: calculateGridItemWidth(w, gridColWidth)
                                 })
                             })
                         }, i))
@@ -94,5 +112,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
         ]
     });
 }
+/**
+ * Calculates grid item width
+ * @param w number of columns the grid item spans
+ * @param colWidth the width of each column in px
+ * @returns grid item's width in px
+ * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
+ */ const calculateGridItemWidth = (w, colWidth)=>{
+    // 0 * Infinity === NaN, which causes problems with resize contraints
+    if (!Number.isFinite(w)) return w;
+    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
+};
 
 //# sourceMappingURL=GridLayout.js.map