@perses-dev/dashboards 0.8.0 → 0.8.1

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -25,9 +25,9 @@ const ResponsiveGridLayout = (0, react_grid_layout_1.WidthProvider)(react_grid_l
  * Layout component that arranges children in a Grid based on the definition.
  */
 function GridLayout(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const { groupIndex, definition: { spec }, renderGridItemContent, ...others } = props;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(!!((_b = (_a = spec.display) === null || _a === void 0 ? void 0 : _a.collapse) === null || _b === void 0 ? void 0 : _b.open));
+    const [isOpen, setIsOpen] = (0, react_1.useState)((_c = (_b = (_a = spec.display) === null || _a === void 0 ? void 0 : _a.collapse) === null || _b === void 0 ? void 0 : _b.open) !== null && _c !== void 0 ? _c : true);
     const { isEditMode } = (0, context_1.useEditMode)();
     const gridItems = [];
     spec.items.forEach((item, idx) => {

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardApp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const material_1 = require("@mui/material");
+const components_1 = require("@perses-dev/components");
+const components_2 = require("../../components");
+const PanelGroupDialog_1 = __importDefault(require("../../components/PanelGroupDialog/PanelGroupDialog"));
+const PanelDrawer_1 = __importDefault(require("../../components/PanelDrawer/PanelDrawer"));
+const DashboardToolbar_1 = require("../../components/DashboardToolbar");
+const context_1 = require("../../context");
+const DashboardApp = (props) => {
+    const { dashboardResource } = props;
+    const { dashboard } = (0, context_1.useDashboard)();
+    const { panelGroupDialog } = (0, context_1.useDashboardApp)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            padding: (theme) => theme.spacing(1, 2),
+            flexGrow: 1,
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [(0, jsx_runtime_1.jsx)(DashboardToolbar_1.DashboardToolbar, { dashboardName: dashboardResource.metadata.name }), (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(components_2.TemplateVariableList, {}) }), (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboard }) }), (0, jsx_runtime_1.jsx)(PanelDrawer_1.default, {}), panelGroupDialog && (0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {})] }));
+};
+exports.DashboardApp = DashboardApp;

package/dist/cjs/views/{ViewDashboard.js → ViewDashboard/ViewDashboard.js}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewDashboard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -15,16 +15,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // See the License for the specific language governing permissions and
 // limitations under the License.
 const react_1 = require("react");
+const material_1 = require("@mui/material");
 const core_1 = require("@perses-dev/core");
 const plugin_system_1 = require("@perses-dev/plugin-system");
-const context_1 = require("../context");
+const components_1 = require("@perses-dev/components");
+const context_1 = require("../../context");
 const DashboardApp_1 = require("./DashboardApp");
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */
 function ViewDashboard(props) {
     var _a;
-    const { dashboardResource: { spec }, children, } = props;
+    const { dashboardResource, sx, ...others } = props;
+    const { spec } = dashboardResource;
     const { queryString, setQueryString } = (0, plugin_system_1.useQueryString)();
     const dashboardDuration = (_a = spec.duration) !== null && _a !== void 0 ? _a : '1h';
     const defaultTimeRange = (0, core_1.getDefaultTimeRange)(dashboardDuration, queryString);
@@ -38,6 +41,12 @@ function ViewDashboard(props) {
             setQueryString(queryString);
         }
     }, [dashboardDuration, queryString, setQueryString]);
-    return ((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: { dashboardSpec: spec }, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeProvider, { initialTimeRange: defaultTimeRange, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariableProvider, { initialVariableDefinitions: spec.variables, children: (0, jsx_runtime_1.jsx)(DashboardApp_1.DashboardApp, { ...props, children: children }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: { dashboardSpec: spec }, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeProvider, { initialTimeRange: defaultTimeRange, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariableProvider, { initialVariableDefinitions: spec.variables, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: (0, components_1.combineSx)({
+                        display: 'flex',
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                        overflow: 'hidden',
+                    }, sx), ...others, children: (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(DashboardApp_1.DashboardApp, { dashboardResource: dashboardResource }) }) }) }) }) }));
 }
 exports.ViewDashboard = ViewDashboard;

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

@@ -0,0 +1,29 @@
+"use strict";
+// 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ViewDashboard"), exports);

package/dist/components/GridLayout/GridLayout.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useState}from"react";import{Responsive,WidthProvider}from"react-grid-layout";import{Box,Collapse,GlobalStyles}from"@mui/material";import{styles}from"../../css/styles";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(e){var s,i;const{groupIndex:o,definition:{spec:t},renderGridItemContent:r,...l}=e,[d,a]=useState(!!(null===(i=null===(s=t.display)||void 0===s?void 0:s.collapse)||void 0===i?void 0:i.open)),{isEditMode:n}=useEditMode(),p=[];return t.items.forEach(((e,s)=>{const{x:i,y:t,width:l,height:d}=e;p.push(_jsx("div",{"data-grid":{x:i,y:t,w:l,h:d},children:r(e,o)},s))})),_jsxs(_Fragment,{children:[_jsx(GlobalStyles,{styles}),_jsxs(Box,{...l,component:"section",sx:{"& + &":{marginTop:e=>e.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{groupIndex:o,title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:d,onToggleOpen:()=>a((e=>!e))}}),_jsx(Collapse,{in:d,unmountOnExit:!0,children:_jsx(ResponsiveGridLayout,{className:"layout",breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:24,md:24,sm:24,xs:24,xxs:2},rowHeight:30,draggableHandle:".drag-handle",resizeHandles:["se"],isDraggable:n,isResizable:n,children:p})})]})]})}
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useState}from"react";import{Responsive,WidthProvider}from"react-grid-layout";import{Box,Collapse,GlobalStyles}from"@mui/material";import{styles}from"../../css/styles";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(e){var s,i,o;const{groupIndex:t,definition:{spec:r},renderGridItemContent:l,...d}=e,[a,n]=useState(null===(o=null===(i=null===(s=r.display)||void 0===s?void 0:s.collapse)||void 0===i?void 0:i.open)||void 0===o||o),{isEditMode:p}=useEditMode(),m=[];return r.items.forEach(((e,s)=>{const{x:i,y:o,width:r,height:d}=e;m.push(_jsx("div",{"data-grid":{x:i,y:o,w:r,h:d},children:l(e,t)},s))})),_jsxs(_Fragment,{children:[_jsx(GlobalStyles,{styles}),_jsxs(Box,{...d,component:"section",sx:{"& + &":{marginTop:e=>e.spacing(1)}},children:[void 0!==r.display&&_jsx(GridTitle,{groupIndex:t,title:r.display.title,collapse:void 0===r.display.collapse?void 0:{isOpen:a,onToggleOpen:()=>n((e=>!e))}}),_jsx(Collapse,{in:a,unmountOnExit:!0,children:_jsx(ResponsiveGridLayout,{className:"layout",breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:24,md:24,sm:24,xs:24,xxs:2},rowHeight:30,draggableHandle:".drag-handle",resizeHandles:["se"],isDraggable:p,isResizable:p,children:m})})]})]})}

package/dist/views/ViewDashboard/DashboardApp.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DashboardResource } from '@perses-dev/core';
+export interface DashboardAppProps {
+    dashboardResource: DashboardResource;
+}
+export declare const DashboardApp: (props: DashboardAppProps) => JSX.Element;
+//# sourceMappingURL=DashboardApp.d.ts.map

package/dist/views/ViewDashboard/DashboardApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBA0BpD,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box}from"@mui/material";import{ErrorAlert,ErrorBoundary}from"@perses-dev/components";import{TemplateVariableList,Dashboard}from"../../components";import PanelGroupDialog from"../../components/PanelGroupDialog/PanelGroupDialog";import PanelDrawer from"../../components/PanelDrawer/PanelDrawer";import{DashboardToolbar}from"../../components/DashboardToolbar";import{useDashboard,useDashboardApp}from"../../context";export const DashboardApp=r=>{const{dashboardResource:o}=r,{dashboard:a}=useDashboard(),{panelGroupDialog:e}=useDashboardApp();return _jsxs(Box,{sx:{padding:r=>r.spacing(1,2),flexGrow:1,overflowX:"hidden",overflowY:"auto",display:"flex",flexDirection:"column"},children:[_jsx(DashboardToolbar,{dashboardName:o.metadata.name}),_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:_jsx(TemplateVariableList,{})}),_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:_jsx(Dashboard,{spec:a})}),_jsx(PanelDrawer,{}),e&&_jsx(PanelGroupDialog,{})]})};

package/dist/views/{ViewDashboard.d.ts → ViewDashboard/ViewDashboard.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
 import { DashboardResource } from '@perses-dev/core';
-export interface ViewDashboardProps extends BoxProps {
+export interface ViewDashboardProps extends Omit<BoxProps, 'children'> {
     dashboardResource: DashboardResource;
 }
 /**

package/dist/views/ViewDashboard/ViewDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA4CtD"}

package/dist/views/ViewDashboard/ViewDashboard.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect}from"react";import{Box}from"@mui/material";import{getDefaultTimeRange}from"@perses-dev/core";import{useQueryString}from"@perses-dev/plugin-system";import{ErrorBoundary,ErrorAlert,combineSx}from"@perses-dev/components";import{TimeRangeProvider,TemplateVariableProvider,DashboardProvider}from"../../context";import{DashboardApp}from"./DashboardApp";export function ViewDashboard(r){var e;const{dashboardResource:i,sx:o,...a}=r,{spec:t}=i,{queryString:s,setQueryString:n}=useQueryString(),d=null!==(e=t.duration)&&void 0!==e?e:"1h",m=getDefaultTimeRange(d,s);return useEffect((()=>{!Object.fromEntries([...s]).start&&n&&(s.set("start",d),n(s))}),[d,s,n]),_jsx(DashboardProvider,{initialState:{dashboardSpec:t},children:_jsx(TimeRangeProvider,{initialTimeRange:m,children:_jsx(TemplateVariableProvider,{initialVariableDefinitions:t.variables,children:_jsx(Box,{sx:combineSx({display:"flex",width:"100%",height:"100%",position:"relative",overflow:"hidden"},o),...a,children:_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:_jsx(DashboardApp,{dashboardResource:i})})})})})})}

package/dist/views/ViewDashboard/index.d.ts

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

package/dist/views/ViewDashboard/index.d.ts.map

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

package/dist/views/ViewDashboard/index.js

@@ -0,0 +1 @@
+export*from"./ViewDashboard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,9 +24,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.8.0",
-    "@perses-dev/core": "^0.8.0",
-    "@perses-dev/plugin-system": "^0.8.0",
+    "@perses-dev/components": "^0.8.1",
+    "@perses-dev/core": "^0.8.1",
+    "@perses-dev/plugin-system": "^0.8.1",
     "@types/react-grid-layout": "^1.3.2",
     "immer": "^9.0.15",
     "react-grid-layout": "^1.3.4",

package/dist/cjs/views/DashboardApp.js

@@ -1,46 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardApp = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// 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.
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const components_2 = require("../components");
-const PanelGroupDialog_1 = __importDefault(require("../components/PanelGroupDialog/PanelGroupDialog"));
-const PanelDrawer_1 = __importDefault(require("../components/PanelDrawer/PanelDrawer"));
-const DashboardToolbar_1 = require("../components/DashboardToolbar");
-const context_1 = require("../context");
-const DashboardApp = (props) => {
-    const { dashboardResource, sx, children, ...others } = props;
-    const { dashboard } = (0, context_1.useDashboard)();
-    const { panelGroupDialog } = (0, context_1.useDashboardApp)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: (0, components_1.combineSx)({
-            display: 'flex',
-            width: '100%',
-            height: '100%',
-            position: 'relative',
-            overflow: 'hidden',
-        }, sx), ...others, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                padding: (theme) => theme.spacing(1, 2),
-                flexGrow: 1,
-                overflowX: 'hidden',
-                overflowY: 'auto',
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: [(0, jsx_runtime_1.jsx)(DashboardToolbar_1.DashboardToolbar, { dashboardName: dashboardResource.metadata.name }), (0, jsx_runtime_1.jsx)(components_2.TemplateVariableList, {}), (0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboard }), (0, jsx_runtime_1.jsx)(PanelDrawer_1.default, {}), panelGroupDialog && (0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {}), children] }) }));
-};
-exports.DashboardApp = DashboardApp;

package/dist/views/DashboardApp.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { ViewDashboardProps } from './ViewDashboard';
-export declare const DashboardApp: (props: ViewDashboardProps) => JSX.Element;
-//# sourceMappingURL=DashboardApp.d.ts.map

package/dist/views/DashboardApp.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../src/views/DashboardApp.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,eAAO,MAAM,YAAY,UAAW,kBAAkB,gBAqCrD,CAAC"}

package/dist/views/DashboardApp.js

@@ -1 +0,0 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box}from"@mui/material";import{combineSx}from"@perses-dev/components";import{TemplateVariableList,Dashboard}from"../components";import PanelGroupDialog from"../components/PanelGroupDialog/PanelGroupDialog";import PanelDrawer from"../components/PanelDrawer/PanelDrawer";import{DashboardToolbar}from"../components/DashboardToolbar";import{useDashboard,useDashboardApp}from"../context";export const DashboardApp=o=>{const{dashboardResource:a,sx:r,children:e,...s}=o,{dashboard:i}=useDashboard(),{panelGroupDialog:n}=useDashboardApp();return _jsx(Box,{sx:combineSx({display:"flex",width:"100%",height:"100%",position:"relative",overflow:"hidden"},r),...s,children:_jsxs(Box,{sx:{padding:o=>o.spacing(1,2),flexGrow:1,overflowX:"hidden",overflowY:"auto",display:"flex",flexDirection:"column"},children:[_jsx(DashboardToolbar,{dashboardName:a.metadata.name}),_jsx(TemplateVariableList,{}),_jsx(Dashboard,{spec:i}),_jsx(PanelDrawer,{}),n&&_jsx(PanelGroupDialog,{}),e]})})};

package/dist/views/ViewDashboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../src/views/ViewDashboard.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAK1E,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA8BtD"}

package/dist/views/ViewDashboard.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useEffect}from"react";import{getDefaultTimeRange}from"@perses-dev/core";import{useQueryString}from"@perses-dev/plugin-system";import{TimeRangeProvider,TemplateVariableProvider,DashboardProvider}from"../context";import{DashboardApp}from"./DashboardApp";export function ViewDashboard(e){var r;const{dashboardResource:{spec:i},children:a}=e,{queryString:t,setQueryString:o}=useQueryString(),s=null!==(r=i.duration)&&void 0!==r?r:"1h",n=getDefaultTimeRange(s,t);return useEffect((()=>{!Object.fromEntries([...t]).start&&o&&(t.set("start",s),o(t))}),[s,t,o]),_jsx(DashboardProvider,{initialState:{dashboardSpec:i},children:_jsx(TimeRangeProvider,{initialTimeRange:n,children:_jsx(TemplateVariableProvider,{initialVariableDefinitions:i.variables,children:_jsx(DashboardApp,{...e,children:a})})})})}