@perses-dev/dashboards 0.7.1 → 0.8.1

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mockPluginRegistryProps = void 0;
+exports.FAKE_PANEL_PLUGIN = exports.mockPluginRegistryProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`
  * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned
@@ -8,29 +9,26 @@ exports.mockPluginRegistryProps = void 0;
  */
 function mockPluginRegistryProps() {
     const mockPluginResource = {
-        kind: 'Plugin',
+        kind: 'PluginModule',
         metadata: {
-            name: 'Fake Plugin for Tests',
+            name: 'Fake Plugin Module for Tests',
         },
         spec: {
-            supported_kinds: {},
+            plugins: [],
         },
     };
+    const mockPluginModule = {};
     // Allow adding mock plugins in tests
-    const mockSetupFunctions = [];
-    const addMockPlugin = (config) => {
-        mockPluginResource.spec.supported_kinds[config.kind] = config.pluginType;
-        mockSetupFunctions.push((registerPlugin) => {
-            registerPlugin(config);
+    const addMockPlugin = (pluginType, kind, plugin) => {
+        mockPluginResource.spec.plugins.push({
+            pluginType,
+            kind,
+            display: {
+                name: `Fake ${pluginType} Plugin for ${kind}`,
+            },
         });
-    };
-    // Our mock plugin module just calls all the setup functions that were added
-    const mockPluginModule = {
-        setup(registerPlugin) {
-            for (const setup of mockSetupFunctions) {
-                setup(registerPlugin);
-            }
-        },
+        // "Export" on the module under the same name as the kind the plugin handles
+        mockPluginModule[kind] = plugin;
     };
     const pluginRegistryProps = {
         getInstalledPlugins() {
@@ -46,3 +44,12 @@ function mockPluginRegistryProps() {
     };
 }
 exports.mockPluginRegistryProps = mockPluginRegistryProps;
+exports.FAKE_PANEL_PLUGIN = {
+    PanelComponent: () => {
+        return (0, jsx_runtime_1.jsx)("div", { role: "figure", children: "FakePanel chart" });
+    },
+    OptionsEditorComponent: () => {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Edit options here" });
+    },
+    createInitialOptions: () => ({}),
+};

package/dist/cjs/test/render.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderWithContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -16,11 +19,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // limitations under the License.
 const react_1 = require("@testing-library/react");
 const react_query_1 = require("react-query");
+const context_1 = require("../context");
+const testDashboard_1 = __importDefault(require("./testDashboard"));
 const queryClient = new react_query_1.QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
+const initialStore = {
+    isEditMode: true,
+    dashboardSpec: testDashboard_1.default.spec,
+};
 /**
  * Test helper to render a React component with some common app-level providers wrapped around it.
  */
-function renderWithContext(ui, options) {
-    return (0, react_1.render)((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: ui }), options);
+function renderWithContext(ui, initialState = initialStore, options) {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: initialState, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: ui }) }), options);
 }
 exports.renderWithContext = renderWithContext;

package/dist/cjs/test/testDashboard.js

@@ -23,53 +23,30 @@ const testDashboard = {
     },
     spec: {
         datasource: { kind: 'Prometheus', global: true, name: 'Public Prometheus Demo Server' },
-        // TODO: Should duration actually be a time range?
         duration: '24h',
-        variables: {
-            job: {
-                kind: 'PrometheusLabelValues',
+        variables: [
+            {
+                name: 'job',
+                kind: 'TextVariable',
                 options: {
-                    label_name: 'job',
-                    match: ['node_uname_info'],
-                },
-                display: {
-                    label: 'Job',
-                },
-                selection: {
-                    default_value: 'node',
+                    value: 'node',
                 },
             },
-            instance: {
-                kind: 'PrometheusLabelValues',
+            {
+                name: 'instance',
+                kind: 'TextVariable',
                 options: {
-                    label_name: 'instance',
-                    match: ['node_uname_info{job="node"}'],
-                },
-                display: {
-                    label: 'Node',
-                },
-                selection: {
-                    default_value: ['demo.do.prometheus.io:9100'],
-                    all_value: '$__all',
+                    value: 'demo.do.prometheus.io:9100',
                 },
             },
-            interval: {
-                kind: 'Interval',
+            {
+                name: 'interval',
+                kind: 'TextVariable',
                 options: {
-                    values: ['1m', '5m', '10m', '1h'],
-                    auto: {
-                        step_count: 50,
-                        min_interval: '1m',
-                    },
-                },
-                display: {
-                    label: 'Interval',
-                },
-                selection: {
-                    default_value: '1m',
+                    value: '1m',
                 },
             },
-        },
+        ],
         panels: {
             cpu: {
                 kind: 'LineChart',

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/ViewDashboard.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewDashboard = 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 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 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, 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);
+    // TODO: add reusable sync query string or no-op util
+    (0, react_1.useEffect)(() => {
+        const currentParams = Object.fromEntries([...queryString]);
+        // if app does not provide query string implementation, setTimeRange is used instead
+        if (!currentParams.start && setQueryString) {
+            // default to duration in dashboard definition if start param is not already set
+            queryString.set('start', dashboardDuration);
+            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)(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/cjs/views/index.js

@@ -1,5 +1,5 @@
 "use strict";
-// 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

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,IAAI,EAAE,aAAa,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAgB9C"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,IAAI,EAAE,aAAa,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAmB9C"}

package/dist/components/Dashboard.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Box}from"@mui/material";import{ErrorBoundary,ErrorAlert}from"@perses-dev/components";import{GridLayout,GridItemContent}from"./GridLayout";export function Dashboard(r){const{spec:o,...t}=r;return _jsx(Box,{...t,children:_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:o.layouts.map(((r,t)=>_jsx(GridLayout,{definition:r,renderGridItemContent:r=>_jsx(GridItemContent,{content:r.content,spec:o})},t)))})})}
+import{jsx as _jsx}from"react/jsx-runtime";import{Box}from"@mui/material";import{ErrorBoundary,ErrorAlert}from"@perses-dev/components";import{GridLayout,GridItemContent}from"./GridLayout";export function Dashboard(r){const{spec:o,...t}=r;return _jsx(Box,{...t,children:_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:o.layouts.map(((r,t)=>_jsx(GridLayout,{groupIndex:t,definition:r,renderGridItemContent:(r,t)=>_jsx(GridItemContent,{content:r.content,spec:o,groupIndex:t})},`${JSON.stringify(o.layouts)} ${t}`)))})})}

package/dist/components/DashboardToolbar.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export interface DashboardToolbarProps {
     dashboardName: string;
-    onAddPanel: () => void;
 }
 export declare const DashboardToolbar: (props: DashboardToolbarProps) => JSX.Element;
 //# sourceMappingURL=DashboardToolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAoBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA4E5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAmBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA2D5D,CAAC"}

package/dist/components/DashboardToolbar.js

@@ -1 +1 @@
-import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Toolbar,Typography,Stack,Button,Box}from"@mui/material";import PencilIcon from"mdi-material-ui/PencilOutline";import AddIcon from"mdi-material-ui/Plus";import{useEditMode,useLayouts}from"../context";import{TimeRangeControls}from"../components";export const DashboardToolbar=i=>{const{dashboardName:t,onAddPanel:n}=i,{isEditMode:o,setEditMode:s}=useEditMode(),{addLayout:a}=useLayouts();return _jsx(Toolbar,{disableGutters:!0,sx:{display:"block",padding:i=>i.spacing(2,0)},children:o?_jsxs(_Fragment,{children:[_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsxs(Typography,{variant:"h2",children:["Edit ",t]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"outlined",onClick:()=>{s(!1)},children:"Cancel"}),_jsx(Button,{variant:"contained",children:"Save"})]})]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{display:"flex",justifyContent:"flex-end",width:"100%",padding:i=>i.spacing(2,0)},children:[_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>{a({kind:"Grid",spec:{display:{title:"New Group",collapse:{open:!0}},items:[]}})},children:"Add Group"}),_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:n,children:"Add Panel"})]})]}):_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsx(Typography,{variant:"h2",children:t}),_jsxs(Stack,{direction:"row",spacing:2,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"contained",startIcon:_jsx(PencilIcon,{}),onClick:()=>{s(!0)},sx:{marginLeft:"auto"},children:"Edit"})]})]})})};
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Toolbar,Typography,Stack,Button,Box}from"@mui/material";import PencilIcon from"mdi-material-ui/PencilOutline";import AddIcon from"mdi-material-ui/Plus";import{useDashboardApp,useEditMode}from"../context";import{TimeRangeControls}from"../components";export const DashboardToolbar=n=>{const{dashboardName:o}=n,{isEditMode:i,setEditMode:t}=useEditMode(),{openPanelDrawer:a,openPanelGroupDialog:s}=useDashboardApp();return _jsx(Toolbar,{disableGutters:!0,sx:{display:"block",padding:n=>n.spacing(2,0)},children:i?_jsxs(_Fragment,{children:[_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsxs(Typography,{variant:"h2",children:["Edit ",o]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"outlined",onClick:()=>{t(!1)},children:"Cancel"}),_jsx(Button,{variant:"contained",children:"Save"})]})]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{display:"flex",justifyContent:"flex-end",width:"100%",padding:n=>n.spacing(2,0)},children:[_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>s(),children:"Add Group"}),_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>a({groupIndex:0}),children:"Add Panel"})]})]}):_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsx(Typography,{variant:"h2",children:o}),_jsxs(Stack,{direction:"row",spacing:2,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"contained",startIcon:_jsx(PencilIcon,{}),onClick:()=>{t(!0)},sx:{marginLeft:"auto"},children:"Edit"})]})]})})};

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

@@ -3,6 +3,7 @@ import { DashboardSpec, GridItemDefinition } from '@perses-dev/core';
 export interface GridItemContentProps {
     spec: DashboardSpec;
     content: GridItemDefinition['content'];
+    groupIndex: 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":";AAcA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,kBAAkB,CAAC;AAGtF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAQ1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,kBAAkB,CAAC;AAGtF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAQ1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{ErrorAlert}from"@perses-dev/components";import{resolvePanelRef}from"@perses-dev/core";import{Panel}from"../Panel/Panel";export function GridItemContent(e){const{content:r,spec:o}=e;try{const e=resolvePanelRef(o,r);return _jsx(Panel,{definition:e})}catch(e){return _jsx(ErrorAlert,{error:e})}}
+import{jsx as _jsx}from"react/jsx-runtime";import{ErrorAlert}from"@perses-dev/components";import{resolvePanelRef}from"@perses-dev/core";import{Panel}from"../Panel/Panel";export function GridItemContent(e){const{content:r,spec:n,groupIndex:o}=e;try{const{panelDefinition:e,panelsKey:t}=resolvePanelRef(n,r);return _jsx(Panel,{definition:e,groupIndex:o,panelKey:t})}catch(e){return _jsx(ErrorAlert,{error:e})}}

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

@@ -2,8 +2,9 @@
 import { BoxProps } from '@mui/material';
 import { GridDefinition, GridItemDefinition } from '@perses-dev/core';
 export interface GridLayoutProps extends BoxProps {
+    groupIndex: number;
     definition: GridDefinition;
-    renderGridItemContent: (definition: GridItemDefinition) => React.ReactNode;
+    renderGridItemContent: (definition: GridItemDefinition, groupIndex: number) => React.ReactNode;
 }
 /**
  * Layout component that arranges children in a Grid based on the definition.

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":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAsDhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChG;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAwDhD"}

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(s){var e,i,o;const{definition:{spec:t},renderGridItemContent:l,...r}=s,[d,a]=useState(null===(o=null===(i=null===(e=t.display)||void 0===e?void 0:e.collapse)||void 0===i?void 0:i.open)||void 0===o||o),{isEditMode:n}=useEditMode(),m=[];return t.items.forEach(((s,e)=>{const{x:i,y:o,width:t,height:r}=s;m.push(_jsx("div",{"data-grid":{x:i,y:o,w:t,h:r},children:l(s)},e))})),_jsxs(_Fragment,{children:[_jsx(GlobalStyles,{styles}),_jsxs(Box,{...r,component:"section",sx:{"& + &":{marginTop:s=>s.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:d,onToggleOpen:()=>a((s=>!s))}}),_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:m})})]})]})}
+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/components/GridLayout/GridTitle.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export interface GridTitleProps {
+    groupIndex: number;
     title: string;
     collapse?: {
         isOpen: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA6B9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAgD9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{ButtonBase,Typography}from"@mui/material";import ExpandedIcon from"mdi-material-ui/ChevronUp";import CollapsedIcon from"mdi-material-ui/ChevronDown";export function GridTitle(o){const{title:e,collapse:n}=o,t=_jsx(Typography,{variant:"h5",sx:{marginLeft:void 0!==n?1:void 0},children:e});return void 0===n?t:_jsxs(ButtonBase,{component:"header",sx:{display:"flex",justifyContent:"start",alignItems:"center"},onClick:n.onToggleOpen,children:[n.isOpen?_jsx(ExpandedIcon,{}):_jsx(CollapsedIcon,{}),t]})}
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Box,IconButton,Stack,Typography}from"@mui/material";import ExpandedIcon from"mdi-material-ui/ChevronUp";import CollapsedIcon from"mdi-material-ui/ChevronDown";import AddIcon from"mdi-material-ui/Plus";import PencilIcon from"mdi-material-ui/PencilOutline";import{useState}from"react";import{useDashboardApp,useEditMode}from"../../context";export function GridTitle(o){const{groupIndex:e,title:n,collapse:t}=o,[r,i]=useState(!1),{openPanelDrawer:a,openPanelGroupDialog:s}=useDashboardApp(),{isEditMode:d}=useEditMode(),c=_jsx(Typography,{variant:"h2",sx:{marginLeft:void 0!==t?1:void 0},children:n});return _jsx(Box,{sx:{display:"flex",justifyContent:"start",alignItems:"center",padding:o=>o.spacing(1),backgroundColor:o=>o.palette.background.default},onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),children:t?_jsxs(_Fragment,{children:[_jsx(IconButton,{onClick:t.onToggleOpen,children:t.isOpen?_jsx(ExpandedIcon,{}):_jsx(CollapsedIcon,{})}),c,d&&r&&_jsxs(Stack,{direction:"row",sx:{marginLeft:"auto"},children:[_jsx(IconButton,{onClick:()=>a({groupIndex:e}),children:_jsx(AddIcon,{})}),_jsx(IconButton,{onClick:()=>s(e),children:_jsx(PencilIcon,{})})]})]}):c})}

package/dist/components/Panel/Panel.d.ts

@@ -3,6 +3,8 @@ import { PanelDefinition } from '@perses-dev/core';
 import { CardProps } from '@mui/material';
 export interface PanelProps extends CardProps {
     definition: PanelDefinition;
+    groupIndex: number;
+    panelKey: string;
 }
 /**
  * Renders a PanelDefinition's content inside of a Card.

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoHtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2HtC"}

package/dist/components/Panel/Panel.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import useResizeObserver from"use-resize-observer";import{useInView}from"react-intersection-observer";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography,IconButton as MuiIconButton,Stack,styled}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";import PencilIcon from"mdi-material-ui/Pencil";import MenuIcon from"mdi-material-ui/DotsVertical";import DragIcon from"mdi-material-ui/Drag";import{useEditMode}from"../../context";export function Panel(e){const{definition:i,...o}=e,[n,r]=useState(null),{width:t,height:a}=useResizeObserver({ref:n}),s=useMemo((()=>{if(void 0!==t&&void 0!==a)return{width:t,height:a}}),[t,a]),{ref:l,inView:d}=useInView({threshold:.3,initialInView:!1,triggerOnce:!0}),{isEditMode:c}=useEditMode();return _jsxs(Card,{ref:l,sx:{...o.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...o,children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center",minHeight:"24px"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginLeft:"auto"},children:[!c&&i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Bottom,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,fontSize:"small",sx:{cursor:"pointer"}})}),c&&_jsxs(Stack,{direction:"row",alignItems:"center",spacing:.5,children:[_jsx(IconButton,{"aria-label":"drag handle",size:"small",children:_jsx(DragIcon,{className:"drag-handle",sx:{cursor:"grab"}})}),_jsx(IconButton,{"aria-label":"edit panel",size:"small",children:_jsx(PencilIcon,{})}),_jsx(IconButton,{"aria-label":"more",size:"small",children:_jsx(MenuIcon,{})})]})]})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:r,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:!0===d&&_jsx(PanelComponent,{definition:i,contentDimensions:s})})})]})}const IconButton=styled(MuiIconButton)((({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"4px"})));
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import useResizeObserver from"use-resize-observer";import{useInView}from"react-intersection-observer";import{PluginBoundary}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography,IconButton as MuiIconButton,Stack,styled}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";import PencilIcon from"mdi-material-ui/Pencil";import DragIcon from"mdi-material-ui/DragVertical";import{useDashboardApp,useEditMode}from"../../context";import{PanelContent}from"./PanelContent";export function Panel(e){const{definition:i,groupIndex:o,panelKey:n,...r}=e,[t,a]=useState(null),[s,l]=useState(!1),{width:d,height:p}=useResizeObserver({ref:t}),c=useMemo((()=>{if(void 0!==d&&void 0!==p)return{width:d,height:p}}),[d,p]),{ref:m,inView:u}=useInView({threshold:.3,initialInView:!1,triggerOnce:!0}),{isEditMode:x}=useEditMode(),{openPanelDrawer:f}=useDashboardApp();return _jsxs(Card,{ref:m,sx:{...r.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...r,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center",minHeight:"24px"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginLeft:"auto"},children:[!x&&s&&i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Bottom,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,fontSize:"small",sx:{cursor:"pointer"}})}),x&&s&&_jsxs(Stack,{direction:"row",alignItems:"center",spacing:.5,children:[_jsx(IconButton,{"aria-label":"edit panel",size:"small",onClick:()=>{f({groupIndex:o,panelKey:n})},children:_jsx(PencilIcon,{})}),_jsx(IconButton,{"aria-label":"drag handle",size:"small",children:_jsx(DragIcon,{className:"drag-handle",sx:{cursor:"grab"}})})]})]})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:a,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:!0===u&&_jsx(PanelContent,{definition:i,contentDimensions:c})})})]})}const IconButton=styled(MuiIconButton)((({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"4px"})));

package/dist/components/Panel/Panel.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":"AAeA,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":"AAcA,OAAO,uBAAuB,CAAC"}

package/dist/components/Panel/Panel.test.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import"intersection-observer";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps}from"../../test";import testDashboard from"../../test/testDashboard";import{DashboardProvider}from"../../context";import{Panel}from"./Panel";const FAKE_PANEL_PLUGIN={pluginType:"Panel",kind:"FakePanel",plugin:{PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"})}};describe("Panel",(()=>{let e,r;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}}},r={isEditMode:!1,dashboardSpec:testDashboard.spec}}));const i=r=>{const{addMockPlugin:i,pluginRegistryProps:n}=mockPluginRegistryProps();i(FAKE_PANEL_PLUGIN),renderWithContext(_jsx(DashboardProvider,{initialState:r,children:_jsx(PluginRegistry,{...n,children:_jsx(Panel,{...e})})}))};it("should render name and info icon",(async()=>{i(r),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")})),it("should render edit icons when in edit mode",(async()=>{r.isEditMode=!0,i(r),await screen.queryByLabelText("drag handle"),screen.queryByLabelText("edit panel"),screen.queryByLabelText("more")}))}));
+import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import"intersection-observer";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps,FAKE_PANEL_PLUGIN}from"../../test";import testDashboard from"../../test/testDashboard";import{Panel}from"./Panel";describe("Panel",(()=>{let e,r;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}},groupIndex:0,panelKey:"panelRef"},r={isEditMode:!1,dashboardSpec:testDashboard.spec}}));const n=r=>{const{addMockPlugin:n,pluginRegistryProps:t}=mockPluginRegistryProps();n("Panel","FakePanel",FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...t,children:_jsx(Panel,{...e})}),r)};it("should render name and info icon",(async()=>{n(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")})),it("should render edit icons when in edit mode",(async()=>{r.isEditMode=!0,n(r),await screen.queryByLabelText("drag handle"),screen.queryByLabelText("edit panel"),screen.queryByLabelText("more")}))}));

package/dist/components/Panel/PanelContent.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { JsonObject } from '@perses-dev/core';
+import { PanelProps } from '@perses-dev/plugin-system';
+export declare type PanelContentProps = PanelProps<JsonObject>;
+/**
+ * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
+ * definition's kind. Used so that a PluginLoadingBoundary can be wrapped around this for fallback UI while
+ * the plugin is loading.
+ */
+export declare function PanelContent(props: PanelContentProps): JSX.Element;
+//# sourceMappingURL=PanelContent.d.ts.map

package/dist/components/Panel/PanelContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAkB,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,oBAAY,iBAAiB,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;AAEvD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAGpD"}

package/dist/components/Panel/PanelContent.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{usePanelPlugin}from"@perses-dev/plugin-system";export function PanelContent(n){const{PanelComponent:e}=usePanelPlugin(n.definition.kind);return _jsx(e,{...n})}

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

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

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

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

package/dist/components/Panel/index.js

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

package/dist/components/PanelDrawer/PanelDrawer.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAuCA,QAAA,MAAM,WAAW,mBA0JhB,CAAC;AA2BF,eAAe,WAAW,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{MenuItem,Stack,Select,TextField,InputLabel,FormControl,Grid,Box,Button,Typography}from"@mui/material";import{Drawer,ErrorAlert}from"@perses-dev/components";import{PluginBoundary}from"@perses-dev/plugin-system";import{useState,useEffect}from"react";import{useDashboardApp,useLayouts,usePanels}from"../../context";import{removeWhiteSpacesAndSpecialCharacters}from"../../utils/functions";import{PanelOptionsEditor}from"./PanelOptionsEditor";const PanelDrawer=()=>{var e,l,n,a;const{layouts:r}=useLayouts(),{panels:i,updatePanel:t}=usePanels(),{panelDrawer:o,closePanelDrawer:s}=useDashboardApp();let d="",u="";(null==o?void 0:o.panelKey)&&(d=null!==(l=null===(e=i[o.panelKey])||void 0===e?void 0:e.display.name)&&void 0!==l?l:"",u=null!==(a=null===(n=i[o.panelKey])||void 0===n?void 0:n.display.description)&&void 0!==a?a:"");const[p,c]=useState(null==o?void 0:o.groupIndex),[x,v]=useState(d),[m,h]=useState(u),[y,g]=useState(""),[j,_]=useState({});useEffect((()=>{var e,l,n,a;c(null==o?void 0:o.groupIndex),(null==o?void 0:o.panelKey)?(v(null!==(l=null===(e=i[o.panelKey])||void 0===e?void 0:e.display.name)&&void 0!==l?l:""),h(null!==(a=null===(n=i[o.panelKey])||void 0===n?void 0:n.display.description)&&void 0!==a?a:"")):(v(""),h(""))}),[o,i]);return _jsx(Drawer,{isOpen:!!o,onClose:()=>s(),children:_jsxs("form",{onSubmit:e=>{e.preventDefault(),void 0===(null==o?void 0:o.groupIndex)||(null==o?void 0:o.panelKey)?(null==o?void 0:o.panelKey)&&(void 0!==(null==o?void 0:o.panelKey)&&t(o.panelKey,{...i[o.panelKey],kind:y,options:j,display:{name:null!=x?x:"",description:m}})):(()=>{if(void 0===(null==o?void 0:o.groupIndex))return;const e=removeWhiteSpacesAndSpecialCharacters(x);t(e,{kind:y,options:j,display:{name:x,description:m}},o.groupIndex)})(),s()},children:[_jsx(PanelDrawerHeader,{panelKey:null==o?void 0:o.panelKey,onClose:()=>s()}),_jsxs(Grid,{container:!0,spacing:2,children:[_jsx(Grid,{item:!0,xs:4,children:_jsxs(FormControl,{children:[_jsx(InputLabel,{id:"select-group",children:"Group"}),_jsx(Select,{required:!0,labelId:"select-group",label:"Group",value:null!=p?p:0,onChange:e=>{const{value:l}=e.target;"string"!=typeof l&&c(l)},children:r.map(((e,l)=>{var n;return _jsx(MenuItem,{value:l,children:(null===(n=e.spec.display)||void 0===n?void 0:n.title)||`Group ${l+1}`},l)}))})]})}),_jsx(Grid,{item:!0,xs:8,children:_jsxs(Stack,{spacing:2,sx:{flexGrow:"1"},children:[_jsx(TextField,{required:!0,label:"Panel Name",value:x,variant:"outlined",onChange:e=>{v(e.target.value)}}),_jsx(TextField,{label:"Description",value:m,variant:"outlined",onChange:e=>{h(e.target.value)}})]})}),_jsx(Grid,{item:!0,xs:4,children:_jsxs(FormControl,{children:[_jsx(InputLabel,{id:"panel-type-label",children:"Panel Type"}),_jsxs(Select,{required:!0,labelId:"panel-type-label",label:"Panel Type",value:y,onChange:e=>{g(e.target.value)},children:[_jsx(MenuItem,{value:"LineChart",children:"Line Chart"}),_jsx(MenuItem,{value:"GaugeChart",children:"Gauge Chart"}),_jsx(MenuItem,{value:"StatChart",children:"Stat Chart"})]})]})}),_jsx(Grid,{item:!0,xs:8,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:""!==y&&_jsx(PanelOptionsEditor,{kind:y,value:j,onChange:e=>{_(e)}})})})]})]})})},PanelDrawerHeader=({panelKey:e,onClose:l})=>_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginBottom:e=>e.spacing(2),paddingBottom:e=>e.spacing(2),borderBottom:e=>`1px solid ${e.palette.grey[100]}`},children:[_jsx(Typography,{variant:"h2",children:(e?"Edit":"Add")+" Panel"}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(Button,{type:"submit",variant:"contained",children:e?"Apply":"Add"}),_jsx(Button,{variant:"outlined",onClick:l,children:"Cancel"})]})]});export default PanelDrawer;

package/dist/components/PanelDrawer/PanelDrawer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PanelDrawer.test.d.ts.map

package/dist/components/PanelDrawer/PanelDrawer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDrawer.test.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import*as dashboardAppSlice from"../../context/DashboardAppSlice";import*as layoutsSlice from"../../context/LayoutsSlice";import*as context from"../../context/DashboardProvider";import{FAKE_PANEL_PLUGIN,mockPluginRegistryProps,renderWithContext}from"../../test";import testDashboard from"../../test/testDashboard";import PanelDrawer from"./PanelDrawer";const updatePanel=jest.fn();jest.spyOn(context,"usePanels").mockReturnValue({updatePanel,panels:{}});const addItemToLayout=jest.fn();jest.spyOn(layoutsSlice,"useLayouts").mockReturnValue({addItemToLayout,updateLayout:jest.fn(),layouts:testDashboard.spec.layouts});const dashboardApp={panelDrawer:{groupIndex:0},openPanelDrawer:jest.fn(),closePanelDrawer:jest.fn(),panelGroupDialog:void 0,openPanelGroupDialog:jest.fn(),closePanelGroupDialog:jest.fn()};describe("Panel Drawer",(()=>{beforeEach((()=>{jest.clearAllMocks()}));const e=()=>{const{addMockPlugin:e,pluginRegistryProps:t}=mockPluginRegistryProps();e("Panel","FakePanel",FAKE_PANEL_PLUGIN),renderWithContext(_jsxs(PluginRegistry,{...t,children:[_jsx(PanelDrawer,{}),","]}))};it("should add new panel",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue(dashboardApp),e();const t=screen.getByLabelText(/Panel Name/);userEvent.type(t,"New Panel"),userEvent.click(screen.getByText("Add")),expect(updatePanel).toHaveBeenCalledWith("NewPanel",{kind:"",display:{name:"New Panel",description:""},options:{}},0)})),it("should edit an existing panel",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue({...dashboardApp,panelDrawer:{groupIndex:0,panelKey:"cpu"}}),e();const t=screen.getByLabelText(/Panel Name/);userEvent.type(t,"cpu usage"),userEvent.click(screen.getByText("Apply")),expect(updatePanel).toHaveBeenCalledWith("cpu",{display:{name:"cpu usage",description:""},kind:"",options:{}})}))}));

package/dist/components/PanelDrawer/PanelOptionsEditor.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { JsonObject } from '@perses-dev/core';
+export interface PanelOptionsEditorProps {
+    kind: string;
+    value: JsonObject;
+    onChange: (next: JsonObject) => void;
+}
+export declare function PanelOptionsEditor(props: PanelOptionsEditorProps): JSX.Element;
+//# sourceMappingURL=PanelOptionsEditor.d.ts.map

package/dist/components/PanelDrawer/PanelOptionsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelOptionsEditor.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI9C,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAchE"}

package/dist/components/PanelDrawer/PanelOptionsEditor.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{usePanelPlugin}from"@perses-dev/plugin-system";import{useEffect}from"react";export function PanelOptionsEditor(e){const{kind:n,value:t,onChange:o}=e,{OptionsEditorComponent:s,createInitialOptions:i}=usePanelPlugin(n);return useEffect((()=>{o(i())}),[n]),_jsx(s,{value:t,onChange:o})}

package/dist/components/PanelGroupDialog/PanelGroupDialog.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":";AAkCA,QAAA,MAAM,gBAAgB,mBA4FrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{IconButton,Dialog,DialogTitle,DialogContent,FormControl,InputLabel,TextField,Stack,Box,DialogActions,Button,Select,MenuItem}from"@mui/material";import CloseIcon from"mdi-material-ui/Close";import{useDashboardApp,useLayouts}from"../../context";const PanelGroupDialog=()=>{var e,l,o,t,i;const{layouts:s,updateLayout:n}=useLayouts(),{panelGroupDialog:a,closePanelGroupDialog:r}=useDashboardApp(),{groupIndex:u}=a,d=void 0!==u,[p,c]=useState(d&&!(null===(o=null===(l=null===(e=s[u])||void 0===e?void 0:e.spec.display)||void 0===l?void 0:l.collapse)||void 0===o?void 0:o.open)),[x,m]=useState(d?null===(i=null===(t=s[u])||void 0===t?void 0:t.spec.display)||void 0===i?void 0:i.title:"");return _jsxs(Dialog,{open:!0,children:[_jsx(DialogTitle,{children:"Panel Group"}),_jsx(IconButton,{"aria-label":"Close",onClick:()=>r(),sx:e=>({position:"absolute",top:e.spacing(.5),right:e.spacing(.5)}),children:_jsx(CloseIcon,{})}),_jsxs("form",{onSubmit:e=>{var l,o;e.preventDefault();const t={kind:"Grid",spec:{display:{title:null!=x?x:"",collapse:{open:!p}},items:void 0===u?[]:null!==(o=null===(l=s[u])||void 0===l?void 0:l.spec.items)&&void 0!==o?o:[]}};n(t,u),r()},children:[_jsx(DialogContent,{sx:{width:"500px"},children:_jsxs(Stack,{spacing:2,children:[_jsx(FormControl,{children:_jsx(TextField,{required:!0,label:"Name",variant:"outlined",value:x,onChange:e=>m(e.target.value)})}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",width:"100%",justifyContent:"space-between"},children:[_jsx(InputLabel,{children:"Collapse State"}),_jsxs(Select,{required:!0,displayEmpty:!0,labelId:"select-collapse-state",size:"small",value:p?"Close":"Open",onChange:e=>{const l="Close"===e.target.value;c(l)},children:[_jsx(MenuItem,{value:"Open",children:"Open"},"open"),_jsx(MenuItem,{value:"Close",children:"Close"},"close")]})]})]})}),_jsxs(DialogActions,{children:[_jsx(Button,{variant:"contained",type:"submit",children:d?"Apply":"Add"}),_jsx(Button,{onClick:()=>r(),children:"Cancel"})]})]})]})};export default PanelGroupDialog;

package/dist/components/PanelGroupDialog/PanelGroupDialog.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PanelGroupDialog.test.d.ts.map

package/dist/components/PanelGroupDialog/PanelGroupDialog.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGroupDialog.test.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.test.tsx"],"names":[],"mappings":""}

package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import produce from"immer";import*as dashboardAppSlice from"../../context/DashboardAppSlice";import*as layoutsSlice from"../../context/LayoutsSlice";import{renderWithContext}from"../../test";import testDashboard from"../../test/testDashboard";import PanelGroupDialog from"./PanelGroupDialog";const dashboardApp={panelDrawer:void 0,openPanelDrawer:jest.fn(),closePanelDrawer:jest.fn(),panelGroupDialog:{groupIndex:void 0},openPanelGroupDialog:jest.fn(),closePanelGroupDialog:jest.fn()},updateLayout=jest.fn();jest.spyOn(layoutsSlice,"useLayouts").mockReturnValue({updateLayout,addItemToLayout:jest.fn(),layouts:testDashboard.spec.layouts}),describe("Add Panel Group",(()=>{beforeEach((()=>{jest.clearAllMocks()})),it("should add new panel group",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue(dashboardApp),renderWithContext(_jsx(PanelGroupDialog,{}));const e=screen.getByLabelText(/Name/);userEvent.type(e,"New Panel Group"),userEvent.click(screen.getByText("Add")),expect(updateLayout).toHaveBeenCalledWith({kind:"Grid",spec:{display:{title:"New Panel Group",collapse:{open:!0}},items:[]}},void 0)})),it("should edit existing panel group",(()=>{jest.spyOn(dashboardAppSlice,"useDashboardApp").mockReturnValue({...dashboardApp,panelGroupDialog:{groupIndex:0}}),renderWithContext(_jsx(PanelGroupDialog,{}));const e=screen.getByLabelText(/Name/);userEvent.type(e,"New Name"),userEvent.click(screen.getByText("Apply")),expect(updateLayout).toHaveBeenCalledWith(produce(testDashboard.spec.layouts[0],(e=>{e.spec.display.title+="New Name",e.spec.display.collapse={open:!1}})),0)}))}));

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAyC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAY3F,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBA2DhC"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useRef,useState}from"react";import{Box,FormControl,Popover,Stack}from"@mui/material";import{AbsoluteTimePicker,TimeRangeSelector}from"@perses-dev/components";import{getDefaultTimeRange}from"@perses-dev/core";import{useTimeRange,useQueryString}from"@perses-dev/plugin-system";import{useDashboard}from"../../context";export const TIME_OPTIONS=[{value:{pastDuration:"5m"},display:"Last 5 minutes"},{value:{pastDuration:"15m"},display:"Last 15 minutes"},{value:{pastDuration:"30m"},display:"Last 30 minutes"},{value:{pastDuration:"1h"},display:"Last 1 hour"},{value:{pastDuration:"6h"},display:"Last 6 hours"},{value:{pastDuration:"12h"},display:"Last 12 hours"},{value:{pastDuration:"24h"},display:"Last 1 day"},{value:{pastDuration:"7d"},display:"Last 7 days"},{value:{pastDuration:"14d"},display:"Last 14 days"}];export function TimeRangeControls(){const{timeRange:e,setTimeRange:t}=useTimeRange(),{dashboard:a}=useDashboard(),{queryString:s}=useQueryString(),r=getDefaultTimeRange(a.duration,s),[o,i]=useState(r),[n,u]=useState(!1),l=useRef();return _jsxs(Stack,{direction:"row",spacing:1,children:[_jsx(Popover,{anchorEl:l.current,anchorOrigin:{vertical:"bottom",horizontal:"center"},open:n,onClose:()=>u(!1),sx:e=>({padding:e.spacing(2)}),children:_jsx(AbsoluteTimePicker,{initialTimeRange:e,onChange:e=>{t(e),i(e),u(!1)}})}),_jsx(FormControl,{fullWidth:!0,children:_jsx(Box,{ref:l,children:_jsx(TimeRangeSelector,{timeOptions:TIME_OPTIONS,value:o,onSelectChange:e=>{const a={pastDuration:e.target.value,end:new Date};t(a),i(a),u(!1)},onCustomClick:()=>{u(!0)}})})})]})}

package/dist/components/TimeRangeControls/TimeRangeControls.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TimeRangeControls.test.d.ts.map

package/dist/components/TimeRangeControls/TimeRangeControls.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeControls.test.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.tsx"],"names":[],"mappings":""}