@perses-dev/dashboards 0.5.2 → 0.6.0

package/dist/cjs/components/VariableAutocomplete.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VariableAutocomplete = 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
@@ -22,7 +22,7 @@ const plugin_system_1 = require("@perses-dev/plugin-system");
  * appropriate plugin.
  */
 function VariableAutocomplete(props) {
-    const { definition, state, onChange, onOptionsChange, TextFieldProps } = props;
+    const { definition, state, onChange, onOptionsChange, TextFieldProps, ...others } = props;
     const { value, options } = state;
     const allValue = 'all_value' in definition.selection ? definition.selection.all_value : undefined;
     const displayOptions = (0, react_1.useMemo)(() => {
@@ -58,6 +58,6 @@ function VariableAutocomplete(props) {
         }, getOptionLabel: (option) => (option === allValue ? 'All' : option), ChipProps: {
             color: 'default',
             variant: 'outlined',
-        } }));
+        }, ...others }));
 }
 exports.VariableAutocomplete = VariableAutocomplete;

package/dist/cjs/components/{VariableOptionsDrawer/VariableOptionsDrawer.js → VariableList/VariableList.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariableOptionsDrawer = void 0;
+exports.VariableList = 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
@@ -19,20 +19,14 @@ const components_1 = require("@perses-dev/components");
 const plugin_system_1 = require("@perses-dev/plugin-system");
 const context_1 = require("../../context");
 const VariableAutocomplete_1 = require("../VariableAutocomplete");
-const DRAWER_WIDTH = 296;
 /**
- * Dashboard options drawer that includes variable inputs.
+ * Displays the list of variable inputs for a dashboard.
  */
-function VariableOptionsDrawer(props) {
-    const { variables, sx, ...others } = props;
+function VariableList(props) {
+    const { variables, ...others } = props;
     const { variables: variablesState } = (0, plugin_system_1.useTemplateVariables)();
     const { setValue, setOptions } = (0, context_1.useTemplateVariablesSetters)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: (0, components_1.combineSx)({
-            width: DRAWER_WIDTH,
-            flexShrink: 0,
-            padding: (theme) => theme.spacing(1, 2),
-            borderLeft: (theme) => `1px solid ${theme.palette.divider}`,
-        }, sx), square: true, elevation: 0, ...others, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "h6", children: "Variables" }), Object.entries(variables).map(([variableName, variableDef]) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: { xs: 'column', sm: 'row' }, alignItems: { sm: 'center' }, spacing: 2, ...others, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { fontWeight: (theme) => theme.typography.fontWeightMedium }, children: "Variables" }), Object.entries(variables).map(([variableName, variableDef]) => {
                 if (variableDef.display.hide === true)
                     return null;
                 const variableState = variablesState[variableName];
@@ -40,7 +34,9 @@ function VariableOptionsDrawer(props) {
                     const error = new Error(`Variable state for '${variableName}' not found`);
                     return (0, jsx_runtime_1.jsx)(components_1.ErrorAlert, { error: error }, variableName);
                 }
-                return ((0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(VariableAutocomplete_1.VariableAutocomplete, { definition: variableDef, state: variableState, onChange: (value) => setValue(variableName, value), onOptionsChange: (options) => setOptions(variableName, options) }) }, variableName));
+                return ((0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(VariableAutocomplete_1.VariableAutocomplete, { definition: variableDef, state: variableState, onChange: (value) => setValue(variableName, value), onOptionsChange: (options) => setOptions(variableName, options), TextFieldProps: {
+                            margin: 'none',
+                        }, sx: { minWidth: 250 } }) }, variableName));
             })] }));
 }
-exports.VariableOptionsDrawer = VariableOptionsDrawer;
+exports.VariableList = VariableList;

package/dist/cjs/components/{VariableOptionsDrawer/VariableOptionsDrawer.test.js → VariableList/VariableList.test.js}

@@ -21,8 +21,8 @@ const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const plugin_system_1 = require("@perses-dev/plugin-system");
 const test_1 = require("../../test");
 const context_1 = require("../../context");
-const VariableOptionsDrawer_1 = require("./VariableOptionsDrawer");
-describe('VariableOptionsDrawer', () => {
+const VariableList_1 = require("./VariableList");
+describe('VariableList', () => {
     const variables = {
         job: {
             display: {
@@ -55,27 +55,32 @@ describe('VariableOptionsDrawer', () => {
     const renderVariableOptionsDrawer = () => {
         const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
         addMockPlugin(FAKE_PANEL_PLUGIN);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: variables, children: (0, jsx_runtime_1.jsx)(VariableOptionsDrawer_1.VariableOptionsDrawer, { variables: variables }) }) }));
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: variables, children: (0, jsx_runtime_1.jsx)(VariableList_1.VariableList, { variables: variables }) }) }));
     };
     it('should display Variables as the title', async () => {
         renderVariableOptionsDrawer();
-        await react_1.screen.findByText('Variables');
+        const title = await react_1.screen.findByText('Variables');
+        expect(title).toBeInTheDocument();
     });
     describe('VariableAutocomplete', () => {
         it('should display correct variable', async () => {
             renderVariableOptionsDrawer();
-            await react_1.screen.findByLabelText('Job');
+            const jobInput = await react_1.screen.findByLabelText('Job');
+            expect(jobInput).toBeInTheDocument();
         });
         it('should display correct default value', async () => {
             renderVariableOptionsDrawer();
-            await react_1.screen.findByDisplayValue('node');
+            const jobValue = await react_1.screen.findByDisplayValue('node');
+            expect(jobValue).toBeInTheDocument();
         });
         it('should display correct options', async () => {
             renderVariableOptionsDrawer();
             const openButton = await react_1.screen.findByRole('button', { name: 'Open' });
             user_event_1.default.click(openButton);
-            await react_1.screen.findByText('all');
-            react_1.screen.getByText('node');
+            const option1 = await react_1.screen.findByText('all');
+            expect(option1).toBeInTheDocument();
+            const option2 = react_1.screen.getByText('node');
+            expect(option2).toBeInTheDocument();
         });
     });
 });

package/dist/cjs/components/VariableList/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("./VariableList"), exports);

package/dist/cjs/components/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
@@ -30,4 +30,4 @@ __exportStar(require("./Dashboard"), exports);
 __exportStar(require("./GridLayout"), exports);
 __exportStar(require("./Panel/Panel"), exports);
 __exportStar(require("./VariableAutocomplete"), exports);
-__exportStar(require("./VariableOptionsDrawer/VariableOptionsDrawer"), exports);
+__exportStar(require("./VariableList"), exports);

package/dist/cjs/views/ViewDashboard.js

@@ -23,17 +23,17 @@ const components_2 = require("../components");
  */
 function ViewDashboard(props) {
     const { dashboardResource, sx, children, ...others } = props;
-    return ((0, jsx_runtime_1.jsx)(context_1.TimeRangeStateProvider, { initialValue: { pastDuration: dashboardResource.spec.duration }, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: dashboardResource.spec.variables, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: (0, components_1.combineSx)({
+    return ((0, jsx_runtime_1.jsx)(context_1.TimeRangeStateProvider, { initialValue: { pastDuration: dashboardResource.spec.duration }, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: dashboardResource.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.jsxs)(material_1.Box, { sx: {
-                            padding: (theme) => theme.spacing(1, 2),
-                            flexGrow: 1,
-                            overflowX: 'hidden',
-                            overflowY: 'auto',
-                        }, children: [(0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboardResource.spec }), children] }), (0, jsx_runtime_1.jsx)(components_2.VariableOptionsDrawer, { variables: dashboardResource.spec.variables })] }) }) }));
+                }, sx), ...others, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        padding: (theme) => theme.spacing(1, 2),
+                        flexGrow: 1,
+                        overflowX: 'hidden',
+                        overflowY: 'auto',
+                    }, children: [(0, jsx_runtime_1.jsx)(components_2.VariableList, { variables: dashboardResource.spec.variables, sx: { margin: (theme) => theme.spacing(1, 0, 2) } }), (0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboardResource.spec }), children] }) }) }) }));
 }
 exports.ViewDashboard = ViewDashboard;

package/dist/components/VariableAutocomplete.d.ts

@@ -1,17 +1,21 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
+import { AutocompleteProps as MuiAutocompleteProps, TextFieldProps } from '@mui/material';
 import { VariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
+declare type AutocompleteProps = MuiAutocompleteProps<string, boolean, true, false>;
 export interface VariableAutocompleteProps {
     definition: VariableDefinition;
     state: VariableState;
     onChange: (value: string | string[]) => void;
     onOptionsChange: (options: string[]) => void;
     TextFieldProps?: TextFieldProps;
+    className?: AutocompleteProps['className'];
+    sx?: AutocompleteProps['sx'];
 }
 /**
  * A MUI Autocomplete that displays variable options, loaded from the
  * appropriate plugin.
  */
 export declare function VariableAutocomplete(props: VariableAutocompleteProps): JSX.Element;
+export {};
 //# sourceMappingURL=VariableAutocomplete.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VariableAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/VariableAutocomplete.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsE,cAAc,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAsB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK9E,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAgEpE"}
+{"version":3,"file":"VariableAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/VariableAutocomplete.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAgB,iBAAiB,IAAI,oBAAoB,EAAa,cAAc,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAsB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG9E,aAAK,iBAAiB,GAAG,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5E,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,EAAE,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAiEpE"}

package/dist/components/VariableAutocomplete.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useMemo}from"react";import{Autocomplete,TextField}from"@mui/material";import{useVariableOptions}from"@perses-dev/plugin-system";export function VariableAutocomplete(e){const{definition:o,state:r,onChange:l,onOptionsChange:t,TextFieldProps:i}=e,{value:a,options:n}=r,s="all_value"in o.selection?o.selection.all_value:void 0,u=useMemo((()=>{let e=n;return void 0===e&&(e=Array.isArray(a)?a:[a]),void 0!==s&&e[0]!==s&&(e=[s,...e]),e}),[n,a,s]),{data:p,loading:m,error:d}=useVariableOptions(o);return useEffect((()=>{m||t(p)}),[p,m]),_jsx(Autocomplete,{options:u,loading:m,value:a,multiple:Array.isArray(a),disableClearable:!0,freeSolo:!1,onChange:(e,o)=>{l(o)},renderInput:e=>{var r;return _jsx(TextField,{...e,margin:"normal",label:o.display.label,error:void 0!==d,helperText:null!==(r=null==d?void 0:d.message)&&void 0!==r?r:"",...i})},getOptionLabel:e=>e===s?"All":e,ChipProps:{color:"default",variant:"outlined"}})}
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useMemo}from"react";import{Autocomplete,TextField}from"@mui/material";import{useVariableOptions}from"@perses-dev/plugin-system";export function VariableAutocomplete(e){const{definition:o,state:r,onChange:l,onOptionsChange:t,TextFieldProps:i,...a}=e,{value:n,options:s}=r,u="all_value"in o.selection?o.selection.all_value:void 0,p=useMemo((()=>{let e=s;return void 0===e&&(e=Array.isArray(n)?n:[n]),void 0!==u&&e[0]!==u&&(e=[u,...e]),e}),[s,n,u]),{data:m,loading:d,error:v}=useVariableOptions(o);return useEffect((()=>{d||t(m)}),[m,d]),_jsx(Autocomplete,{options:p,loading:d,value:n,multiple:Array.isArray(n),disableClearable:!0,freeSolo:!1,onChange:(e,o)=>{l(o)},renderInput:e=>{var r;return _jsx(TextField,{...e,margin:"normal",label:o.display.label,error:void 0!==v,helperText:null!==(r=null==v?void 0:v.message)&&void 0!==r?r:"",...i})},getOptionLabel:e=>e===u?"All":e,ChipProps:{color:"default",variant:"outlined"},...a})}

package/dist/components/VariableList/VariableList.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { StackProps } from '@mui/material';
+import { DashboardSpec } from '@perses-dev/core';
+export interface VariableListProps extends StackProps {
+    variables: DashboardSpec['variables'];
+}
+/**
+ * Displays the list of variable inputs for a dashboard.
+ */
+export declare function VariableList(props: VariableListProps): JSX.Element;
+//# sourceMappingURL=VariableList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/VariableList/VariableList.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAS,UAAU,EAAc,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAqCpD"}

package/dist/components/VariableList/VariableList.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Stack,Typography}from"@mui/material";import{ErrorAlert}from"@perses-dev/components";import{PluginBoundary,useTemplateVariables}from"@perses-dev/plugin-system";import{useTemplateVariablesSetters}from"../../context";import{VariableAutocomplete}from"../VariableAutocomplete";export function VariableList(e){const{variables:r,...t}=e,{variables:a}=useTemplateVariables(),{setValue:o,setOptions:s}=useTemplateVariablesSetters();return _jsxs(Stack,{direction:{xs:"column",sm:"row"},alignItems:{sm:"center"},spacing:2,...t,children:[_jsx(Typography,{variant:"body2",sx:{fontWeight:e=>e.typography.fontWeightMedium},children:"Variables"}),Object.entries(r).map((([e,r])=>{if(!0===r.display.hide)return null;const t=a[e];if(void 0===t){const r=new Error(`Variable state for '${e}' not found`);return _jsx(ErrorAlert,{error:r},e)}return _jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(VariableAutocomplete,{definition:r,state:t,onChange:r=>o(e,r),onOptionsChange:r=>s(e,r),TextFieldProps:{margin:"none"},sx:{minWidth:250}})},e)}))]})}

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

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

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

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

package/dist/components/VariableList/VariableList.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{PluginRegistry}from"@perses-dev/plugin-system";import{mockPluginRegistryProps,renderWithContext}from"../../test";import{TemplateVariablesProvider}from"../../context";import{VariableList}from"./VariableList";describe("VariableList",(()=>{const e={job:{display:{label:"Job"},kind:"PrometheusLabelValues",selection:{default_value:"node"},options:{label_name:"job",match:["node_uname_info"]}}},t={data:["node","all"],isLoading:!1,error:void 0},i={pluginType:"Variable",kind:"PrometheusLabelValues",plugin:{useVariableOptions:()=>t}},a=()=>{const{addMockPlugin:t,pluginRegistryProps:a}=mockPluginRegistryProps();t(i),renderWithContext(_jsx(PluginRegistry,{...a,children:_jsx(TemplateVariablesProvider,{variableDefinitions:e,children:_jsx(VariableList,{variables:e})})}))};it("should display Variables as the title",(async()=>{a();const e=await screen.findByText("Variables");expect(e).toBeInTheDocument()})),describe("VariableAutocomplete",(()=>{it("should display correct variable",(async()=>{a();const e=await screen.findByLabelText("Job");expect(e).toBeInTheDocument()})),it("should display correct default value",(async()=>{a();const e=await screen.findByDisplayValue("node");expect(e).toBeInTheDocument()})),it("should display correct options",(async()=>{a();const e=await screen.findByRole("button",{name:"Open"});userEvent.click(e);const t=await screen.findByText("all");expect(t).toBeInTheDocument();const i=screen.getByText("node");expect(i).toBeInTheDocument()}))}))}));

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

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

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

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

package/dist/components/VariableList/index.js

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

package/dist/components/index.d.ts

@@ -2,5 +2,5 @@ export * from './Dashboard';
 export * from './GridLayout';
 export * from './Panel/Panel';
 export * from './VariableAutocomplete';
-export * from './VariableOptionsDrawer/VariableOptionsDrawer';
+export * from './VariableList';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,+CAA+C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -1 +1 @@
-export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel/Panel";export*from"./VariableAutocomplete";export*from"./VariableOptionsDrawer/VariableOptionsDrawer";
+export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel/Panel";export*from"./VariableAutocomplete";export*from"./VariableList";

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

@@ -1 +1 @@
-{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../src/views/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAoCtD"}
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../src/views/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAsCtD"}

package/dist/views/ViewDashboard.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box}from"@mui/material";import{combineSx}from"@perses-dev/components";import{TimeRangeStateProvider,TemplateVariablesProvider}from"../context";import{Dashboard,VariableOptionsDrawer}from"../components";export function ViewDashboard(e){const{dashboardResource:r,sx:i,children:a,...o}=e;return _jsx(TimeRangeStateProvider,{initialValue:{pastDuration:r.spec.duration},children:_jsx(TemplateVariablesProvider,{variableDefinitions:r.spec.variables,children:_jsxs(Box,{sx:combineSx({display:"flex",width:"100%",height:"100%",position:"relative",overflow:"hidden"},i),...o,children:[_jsxs(Box,{sx:{padding:e=>e.spacing(1,2),flexGrow:1,overflowX:"hidden",overflowY:"auto"},children:[_jsx(Dashboard,{spec:r.spec}),a]}),_jsx(VariableOptionsDrawer,{variables:r.spec.variables})]})})})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box}from"@mui/material";import{combineSx}from"@perses-dev/components";import{TimeRangeStateProvider,TemplateVariablesProvider}from"../context";import{Dashboard,VariableList}from"../components";export function ViewDashboard(e){const{dashboardResource:i,sx:r,children:s,...a}=e;return _jsx(TimeRangeStateProvider,{initialValue:{pastDuration:i.spec.duration},children:_jsx(TemplateVariablesProvider,{variableDefinitions:i.spec.variables,children:_jsx(Box,{sx:combineSx({display:"flex",width:"100%",height:"100%",position:"relative",overflow:"hidden"},r),...a,children:_jsxs(Box,{sx:{padding:e=>e.spacing(1,2),flexGrow:1,overflowX:"hidden",overflowY:"auto"},children:[_jsx(VariableList,{variables:i.spec.variables,sx:{margin:e=>e.spacing(1,0,2)}}),_jsx(Dashboard,{spec:i.spec}),s]})})})})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,10 +24,12 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.5.2",
-    "@perses-dev/core": "^0.5.2",
-    "@perses-dev/plugin-system": "^0.5.2",
+    "@perses-dev/components": "^0.6.0",
+    "@perses-dev/core": "^0.6.0",
+    "@perses-dev/plugin-system": "^0.6.0",
     "immer": "^9.0.15",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.7.0",
     "use-resize-observer": "^8.0.0"
@@ -36,8 +38,9 @@
     "intersection-observer": "^0.12.2"
   },
   "peerDependencies": {
-    "@mui/material": "^5.5.1",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "@mui/material": "^5.5.1"
   },
   "files": [
     "dist"

package/dist/components/VariableOptionsDrawer/VariableOptionsDrawer.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { PaperProps } from '@mui/material';
-import { DashboardSpec } from '@perses-dev/core';
-export interface VariableOptionsDrawerProps extends PaperProps {
-    variables: DashboardSpec['variables'];
-}
-/**
- * Dashboard options drawer that includes variable inputs.
- */
-export declare function VariableOptionsDrawer(props: VariableOptionsDrawerProps): JSX.Element;
-//# sourceMappingURL=VariableOptionsDrawer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"VariableOptionsDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/VariableOptionsDrawer/VariableOptionsDrawer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqB,UAAU,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD,MAAM,WAAW,0BAA2B,SAAQ,UAAU;IAC5D,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA8CtE"}

package/dist/components/VariableOptionsDrawer/VariableOptionsDrawer.js

@@ -1 +0,0 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Paper,Typography}from"@mui/material";import{ErrorAlert,combineSx}from"@perses-dev/components";import{PluginBoundary,useTemplateVariables}from"@perses-dev/plugin-system";import{useTemplateVariablesSetters}from"../../context";import{VariableAutocomplete}from"../VariableAutocomplete";const DRAWER_WIDTH=296;export function VariableOptionsDrawer(e){const{variables:r,sx:t,...a}=e,{variables:o}=useTemplateVariables(),{setValue:i,setOptions:s}=useTemplateVariablesSetters();return _jsxs(Paper,{sx:combineSx({width:296,flexShrink:0,padding:e=>e.spacing(1,2),borderLeft:e=>`1px solid ${e.palette.divider}`},t),square:!0,elevation:0,...a,children:[_jsx(Typography,{component:"h2",variant:"h6",children:"Variables"}),Object.entries(r).map((([e,r])=>{if(!0===r.display.hide)return null;const t=o[e];if(void 0===t){const r=new Error(`Variable state for '${e}' not found`);return _jsx(ErrorAlert,{error:r},e)}return _jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(VariableAutocomplete,{definition:r,state:t,onChange:r=>i(e,r),onOptionsChange:r=>s(e,r)})},e)}))]})}

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

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

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

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

package/dist/components/VariableOptionsDrawer/VariableOptionsDrawer.test.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{PluginRegistry}from"@perses-dev/plugin-system";import{mockPluginRegistryProps,renderWithContext}from"../../test";import{TemplateVariablesProvider}from"../../context";import{VariableOptionsDrawer}from"./VariableOptionsDrawer";describe("VariableOptionsDrawer",(()=>{const e={job:{display:{label:"Job"},kind:"PrometheusLabelValues",selection:{default_value:"node"},options:{label_name:"job",match:["node_uname_info"]}}},i={data:["node","all"],isLoading:!1,error:void 0},r={pluginType:"Variable",kind:"PrometheusLabelValues",plugin:{useVariableOptions:()=>i}},a=()=>{const{addMockPlugin:i,pluginRegistryProps:a}=mockPluginRegistryProps();i(r),renderWithContext(_jsx(PluginRegistry,{...a,children:_jsx(TemplateVariablesProvider,{variableDefinitions:e,children:_jsx(VariableOptionsDrawer,{variables:e})})}))};it("should display Variables as the title",(async()=>{a(),await screen.findByText("Variables")})),describe("VariableAutocomplete",(()=>{it("should display correct variable",(async()=>{a(),await screen.findByLabelText("Job")})),it("should display correct default value",(async()=>{a(),await screen.findByDisplayValue("node")})),it("should display correct options",(async()=>{a();const e=await screen.findByRole("button",{name:"Open"});userEvent.click(e),await screen.findByText("all"),screen.getByText("node")}))}))}));