@perses-dev/dashboards 0.5.2 → 0.7.1

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{Panel}from"./Panel";const FAKE_PANEL_PLUGIN={pluginType:"Panel",kind:"FakePanel",plugin:{PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"})}};describe("Panel",(()=>{let e;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}}}})),it("should render name and info icon",(async()=>{(()=>{const{addMockPlugin:n,pluginRegistryProps:i}=mockPluginRegistryProps();n(FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...i,children:_jsx(Panel,{...e})}))})(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")}))}));
+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")}))}));

package/dist/components/TimeRangeControls.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TimeOption } from '@perses-dev/components';
+export declare const TIME_OPTIONS: TimeOption[];
+export declare function TimeRangeControls(): JSX.Element;
+//# sourceMappingURL=TimeRangeControls.d.ts.map

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

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

package/dist/components/TimeRangeControls.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useRef,useState}from"react";import{Box,FormControl,InputLabel,Popover,Stack}from"@mui/material";import{sub}from"date-fns";import{AbsoluteTimePicker,TimeRangeSelector}from"@perses-dev/components";import{parseDurationString,toAbsoluteTimeRange,isRelativeValue}from"@perses-dev/core";import{useTimeRange}from"@perses-dev/plugin-system";import{useTimeRangeSetter}from"../context/TimeRangeStateProvider";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"}];const FORM_CONTROL_LABEL="Time Range";export function TimeRangeControls(){const{setTimeRange:e}=useTimeRangeSetter(),{defaultDuration:t}=useTimeRange(),a=parseDurationString(t),[s,i]=useState({pastDuration:t}),[n,o]=useState({start:sub(new Date,{...a}),end:new Date}),[r,u]=useState(!1),l=useRef();return _jsxs(Stack,{direction:"row",spacing:1,children:[_jsx(Popover,{anchorEl:l.current,anchorOrigin:{vertical:"bottom",horizontal:"center"},open:r,onClose:()=>u(!1),sx:e=>({padding:e.spacing(2)}),children:_jsx(AbsoluteTimePicker,{initialTimeRange:n,onChange:t=>{e(t),isRelativeValue(t)||o({start:t.start,end:t.end}),i(t),u(!1)}})}),_jsxs(FormControl,{fullWidth:!0,children:[_jsx(InputLabel,{children:"Time Range"}),_jsx(Box,{ref:l,children:_jsx(TimeRangeSelector,{inputLabel:"Time Range",timeOptions:TIME_OPTIONS,value:s,onSelectChange:t=>{const a={pastDuration:t.target.value,end:new Date};i(a);const s=toAbsoluteTimeRange(a);e(s),o(s),u(!1)},onCustomClick:()=>{u(!0)}})})]})]})}

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

@@ -1,6 +1,7 @@
 export * from './Dashboard';
 export * from './GridLayout';
 export * from './Panel/Panel';
+export * from './TimeRangeControls';
 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,qBAAqB,CAAC;AACpC,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"./TimeRangeControls";export*from"./VariableAutocomplete";export*from"./VariableList";

package/dist/context/DashboardProvider.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { DashboardSpec, GridItemDefinition, LayoutDefinition, PanelDefinition } from '@perses-dev/core';
+interface DashboardState {
+    dashboard: DashboardSpec;
+    isEditMode: boolean;
+    layouts: LayoutDefinition[];
+    panels: Record<string, PanelDefinition>;
+}
+interface DashboardActions {
+    setEditMode: (isEditMode: boolean) => void;
+    setLayouts: (layouts: LayoutDefinition[]) => void;
+    addLayout: (layout: LayoutDefinition) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+    setPanels: (panels: Record<string, PanelDefinition>) => void;
+    addPanel: (name: string, panel: PanelDefinition) => void;
+}
+export declare type DashboardStoreState = DashboardState & DashboardActions;
+export interface DashboardStoreProps {
+    dashboardSpec: DashboardSpec;
+    isEditMode?: boolean;
+}
+export interface DashboardProviderProps {
+    initialState: DashboardStoreProps;
+    children?: React.ReactNode;
+}
+export declare function usePanels(): {
+    panels: Record<string, PanelDefinition<import("@perses-dev/core").JsonObject>>;
+    addPanel: (name: string, panel: PanelDefinition<import("@perses-dev/core").JsonObject>) => void;
+};
+export declare function useLayouts(): {
+    layouts: import("@perses-dev/core").GridDefinition[];
+    setLayouts: (layouts: import("@perses-dev/core").GridDefinition[]) => void;
+    addLayout: (layout: import("@perses-dev/core").GridDefinition) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+};
+export declare function useEditMode(): {
+    isEditMode: boolean;
+    setEditMode: (isEditMode: boolean) => void;
+};
+export declare function useDashboard(): {
+    dashboard: DashboardSpec;
+};
+export declare function DashboardProvider(props: DashboardProviderProps): JSX.Element;
+export {};
+//# sourceMappingURL=DashboardProvider.d.ts.map

package/dist/context/DashboardProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../src/context/DashboardProvider.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExG,UAAU,cAAc;IACtB,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CACzC;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC1D;AAED,oBAAY,mBAAmB,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAEpE,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,wBAAgB,SAAS;;;EAGxB;AAED,wBAAgB,UAAU;;;;;EAUzB;AAED,wBAAgB,WAAW;;;EAG1B;AAED,wBAAgB,YAAY;;EAU3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA4C9D"}

package/dist/context/DashboardProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import create from"zustand";import createZustandContext from"zustand/context";import produce from"immer";const{Provider,useStore}=createZustandContext();export function usePanels(){const{panels:t,addPanel:e}=useStore((({panels:t,addPanel:e})=>({panels:t,addPanel:e})));return{panels:t,addPanel:e}}export function useLayouts(){const{layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a}=useStore((({layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a})=>({layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a})));return{layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a}}export function useEditMode(){const{isEditMode:t,setEditMode:e}=useStore((({isEditMode:t,setEditMode:e})=>({isEditMode:t,setEditMode:e})));return{isEditMode:t,setEditMode:e}}export function useDashboard(){return{dashboard:useStore((t=>produce(t.dashboard,(e=>{e.panels=t.panels,e.layouts=t.layouts}))))}}export function DashboardProvider(t){const{children:e,initialState:{dashboardSpec:o,isEditMode:a}}=t,{layouts:d,panels:s}=o;return _jsx(Provider,{createStore:()=>create((t=>({layouts:d,panels:s,dashboard:o,isEditMode:!!a,setEditMode:e=>t({isEditMode:e}),setLayouts:e=>t({layouts:e}),addLayout:e=>t(produce((t=>{t.layouts.push(e)}))),addItemToLayout:(e,o)=>t(produce((t=>{t.layouts[e].spec.items.push(o)}))),setPanels:e=>t({panels:e}),addPanel:(e,o)=>{t(produce((t=>{t.panels[e]=o}),{}))}}))),children:e})}

package/dist/context/TimeRangeStateProvider.d.ts

@@ -1,11 +1,22 @@
 /// <reference types="react" />
-import { AbsoluteTimeRange, RelativeTimeRange } from '@perses-dev/core';
+import { TimeRangeValue, RelativeTimeRange } from '@perses-dev/core';
 export interface TimeRangeProviderProps {
-    initialValue: AbsoluteTimeRange | RelativeTimeRange;
+    initialValue: RelativeTimeRange;
     children?: React.ReactNode;
 }
 /**
  * Provider implementation that supplies the TimeRangeState at runtime.
  */
 export declare function TimeRangeStateProvider(props: TimeRangeProviderProps): JSX.Element;
+/**
+ * Setters for manipulating time range state.
+ */
+export interface TimeRangeSetter {
+    setTimeRange: (value: TimeRangeValue) => void;
+}
+export declare const TimeRangeSetterContext: import("react").Context<TimeRangeSetter | undefined>;
+/**
+ * Gets the setters for time range selection provided by the TimeRangeStateProvider at runtime.
+ */
+export declare function useTimeRangeSetter(): TimeRangeSetter;
 //# sourceMappingURL=TimeRangeStateProvider.d.ts.map

package/dist/context/TimeRangeStateProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeStateProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeRangeStateProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAG7F,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,iBAAiB,GAAG,iBAAiB,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,sBAAsB,eAcnE"}
+{"version":3,"file":"TimeRangeStateProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeRangeStateProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,EACL,cAAc,EAEd,iBAAiB,EAGlB,MAAM,kBAAkB,CAAC;AAG1B,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,sBAAsB,eAqBnE;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB,sDAAwD,CAAC;AAE5F;;GAEG;AACH,wBAAgB,kBAAkB,oBAMjC"}

package/dist/context/TimeRangeStateProvider.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useState,useMemo}from"react";import{toAbsoluteTimeRange}from"@perses-dev/core";import{TimeRangeContext}from"@perses-dev/plugin-system";export function TimeRangeStateProvider(e){const{initialValue:t,children:r}=e,[o]=useState((()=>"pastDuration"in t?toAbsoluteTimeRange(t):t)),i=useMemo((()=>({timeRange:o})),[o]);return _jsx(TimeRangeContext.Provider,{value:i,children:r})}
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useMemo,createContext,useContext,useCallback}from"react";import{toAbsoluteTimeRange,isRelativeValue}from"@perses-dev/core";import{TimeRangeContext}from"@perses-dev/plugin-system";export function TimeRangeStateProvider(e){const{initialValue:t,children:o}=e,r=toAbsoluteTimeRange(t),[n,i]=useState(r),a=useCallback((e=>{isRelativeValue(e)||i(e)}),[]),s=useMemo((()=>({timeRange:n,defaultDuration:t.pastDuration})),[n,t]),u=useMemo((()=>({setTimeRange:a})),[a]);return _jsx(TimeRangeSetterContext.Provider,{value:u,children:_jsx(TimeRangeContext.Provider,{value:s,children:o})})}export const TimeRangeSetterContext=createContext(void 0);export function useTimeRangeSetter(){const e=useContext(TimeRangeSetterContext);if(void 0===e)throw new Error("No TimeRangeSetterContext found. Did you forget a Provider?");return e}

package/dist/context/index.d.ts

@@ -1,3 +1,4 @@
 export * from './TemplateVariablesProvider';
 export * from './TimeRangeStateProvider';
+export * from './DashboardProvider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}

package/dist/context/index.js

@@ -1 +1 @@
-export*from"./TemplateVariablesProvider";export*from"./TimeRangeStateProvider";
+export*from"./TemplateVariablesProvider";export*from"./TimeRangeStateProvider";export*from"./DashboardProvider";

package/dist/css/styles.d.ts

@@ -0,0 +1,172 @@
+declare const _default: {
+    readonly '&.react-grid-layout': {
+        readonly position: "relative";
+        readonly transition: "height 200ms ease";
+    };
+    readonly '&.react-grid-item': {
+        readonly transition: "all 200ms ease";
+        readonly transitionProperty: "left, top";
+    };
+    readonly '&.react-grid-item img': {
+        readonly pointerEvents: "none";
+        readonly userSelect: "none";
+    };
+    readonly '&.react-grid-item.cssTransforms': {
+        readonly transitionProperty: "transform";
+    };
+    readonly '&.react-grid-item.resizing': {
+        readonly zIndex: 1;
+        readonly willChange: "width, height";
+    };
+    readonly '&.react-grid-item.react-draggable-dragging': {
+        readonly transition: "none";
+        readonly zIndex: 3;
+        readonly willChange: "transform";
+    };
+    readonly '&.react-grid-item.dropping': {
+        readonly visibility: "hidden";
+    };
+    readonly '&.react-grid-item.react-grid-placeholder': {
+        readonly background: "red";
+        readonly opacity: 0.2;
+        readonly transitionDuration: "100ms";
+        readonly zIndex: 2;
+        readonly userSelect: "none";
+        readonly '-webkit-user-select': "none";
+        readonly '-moz-user-select': "none";
+        readonly '-ms-user-select': "none";
+        readonly '-o-user-select': "none";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle': {
+        readonly position: "absolute";
+        readonly width: "20px";
+        readonly height: "20px";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle::after': {
+        readonly content: "\"\"";
+        readonly position: "absolute";
+        readonly right: "3px";
+        readonly bottom: "3px";
+        readonly width: "5px";
+        readonly height: "5px";
+        readonly borderRight: "2px solid rgba(0, 0, 0, 0.4)";
+        readonly borderBottom: "2px solid rgba(0, 0, 0, 0.4)";
+    };
+    readonly '&.react-resizable-hide > .react-resizable-handle': {
+        readonly display: "none";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        readonly bottom: "0";
+        readonly left: "0";
+        readonly cursor: "sw-resize";
+        readonly transform: "rotate(90deg)";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+        readonly bottom: "0";
+        readonly right: "0";
+        readonly cursor: "se-resize";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+        readonly top: "0";
+        readonly left: "0";
+        readonly cursor: "nw-resize";
+        readonly transform: "rotate(180deg)";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+        readonly top: "0";
+        readonly right: "0";
+        readonly cursor: "ne-resize";
+        readonly transform: "rotate(270deg)";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        readonly top: "50%";
+        readonly marginTop: "-10px";
+        readonly cursor: "ew-resize";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+        readonly left: "0";
+        readonly transform: "rotate(135deg)";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        readonly right: "0";
+        readonly transform: "rotate(315deg)";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        readonly left: "50%";
+        readonly marginLeft: "-10px";
+        readonly cursor: "ns-resize";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+        readonly top: "0";
+        readonly transform: "rotate(225deg)";
+    };
+    readonly '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        readonly bottom: "0";
+        readonly transform: "rotate(45deg)";
+    };
+    readonly '&.react-resizable': {
+        readonly position: "relative";
+    };
+    readonly '&.react-resizable-handle': {
+        readonly position: "absolute";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly backgroundRepeat: "no-repeat";
+        readonly backgroundOrigin: "content-box";
+        readonly boxSizing: "border-box";
+        readonly backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')";
+        readonly backgroundPosition: "bottom right";
+        readonly padding: "0 3px 3px 0";
+    };
+    readonly '&.react-resizable-handle-sw': {
+        readonly bottom: "0";
+        readonly left: "0";
+        readonly cursor: "sw-resize";
+        readonly transform: "rotate(90deg)";
+    };
+    readonly '&.react-resizable-handle-se': {
+        readonly bottom: "0";
+        readonly right: "0";
+        readonly cursor: "se-resize";
+    };
+    readonly '&.react-resizable-handle-nw': {
+        readonly top: "0";
+        readonly left: "0";
+        readonly cursor: "nw-resize";
+        readonly transform: "rotate(180deg)";
+    };
+    readonly '&.react-resizable-handle-ne': {
+        readonly top: "0";
+        readonly right: "0";
+        readonly cursor: "ne-resize";
+        readonly transform: "rotate(270deg)";
+    };
+    readonly '&.react-resizable-handle-w, .react-resizable-handle-e': {
+        readonly top: "50%";
+        readonly marginTop: "-10px";
+        readonly cursor: "ew-resize";
+    };
+    readonly '&.react-resizable-handle-w': {
+        readonly left: "0";
+        readonly transform: "rotate(135deg)";
+    };
+    readonly '&.react-resizable-handle-e': {
+        readonly right: "0";
+        readonly transform: "rotate(315deg)";
+    };
+    readonly '&.react-resizable-handle-n, .react-resizable-handle-s': {
+        readonly left: "50%";
+        readonly marginLeft: "-10px";
+        readonly cursor: "ns-resize";
+    };
+    readonly '&.react-resizable-handle-n': {
+        readonly top: "0";
+        readonly transform: "rotate(225deg)";
+    };
+    readonly '&.react-resizable-handle-s': {
+        readonly bottom: "0";
+        readonly transform: "rotate(45deg)";
+    };
+};
+export default _default;
+//# sourceMappingURL=styles.d.ts.map

package/dist/css/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/css/styles.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBA8KW"}

package/dist/css/styles.js

@@ -0,0 +1 @@
+export default{"&.react-grid-layout":{position:"relative",transition:"height 200ms ease"},"&.react-grid-item":{transition:"all 200ms ease",transitionProperty:"left, top"},"&.react-grid-item img":{pointerEvents:"none",userSelect:"none"},"&.react-grid-item.cssTransforms":{transitionProperty:"transform"},"&.react-grid-item.resizing":{zIndex:1,willChange:"width, height"},"&.react-grid-item.react-draggable-dragging":{transition:"none",zIndex:3,willChange:"transform"},"&.react-grid-item.dropping":{visibility:"hidden"},"&.react-grid-item.react-grid-placeholder":{background:"red",opacity:.2,transitionDuration:"100ms",zIndex:2,userSelect:"none","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","-o-user-select":"none"},"&.react-grid-item > .react-resizable-handle":{position:"absolute",width:"20px",height:"20px"},"&.react-grid-item > .react-resizable-handle::after":{content:'""',position:"absolute",right:"3px",bottom:"3px",width:"5px",height:"5px",borderRight:"2px solid rgba(0, 0, 0, 0.4)",borderBottom:"2px solid rgba(0, 0, 0, 0.4)"},"&.react-resizable-hide > .react-resizable-handle":{display:"none"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"},"&.react-resizable":{position:"relative"},"&.react-resizable-handle":{position:"absolute",width:"20px",height:"20px",backgroundRepeat:"no-repeat",backgroundOrigin:"content-box",boxSizing:"border-box",backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",backgroundPosition:"bottom right",padding:"0 3px 3px 0"},"&.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-resizable-handle-w, .react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-resizable-handle-n, .react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"}};

package/dist/test/testDashboard.d.ts

@@ -0,0 +1,4 @@
+import { DashboardResource } from '@perses-dev/core';
+declare const testDashboard: DashboardResource;
+export default testDashboard;
+//# sourceMappingURL=testDashboard.d.ts.map

package/dist/test/testDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testDashboard.d.ts","sourceRoot":"","sources":["../../src/test/testDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,QAAA,MAAM,aAAa,EAAE,iBA+MpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/test/testDashboard.js

@@ -0,0 +1 @@
+const testDashboard={kind:"Dashboard",metadata:{name:"Node Stats",project:"perses",created_at:"2021-11-09",updated_at:"2021-11-09",version:0},spec:{datasource:{kind:"Prometheus",global:!0,name:"Public Prometheus Demo Server"},duration:"24h",variables:{job:{kind:"PrometheusLabelValues",options:{label_name:"job",match:["node_uname_info"]},display:{label:"Job"},selection:{default_value:"node"}},instance:{kind:"PrometheusLabelValues",options:{label_name:"instance",match:['node_uname_info{job="node"}']},display:{label:"Node"},selection:{default_value:["demo.do.prometheus.io:9100"],all_value:"$__all"}},interval:{kind:"Interval",options:{values:["1m","5m","10m","1h"],auto:{step_count:50,min_interval:"1m"}},display:{label:"Interval"},selection:{default_value:"1m"}}},panels:{cpu:{kind:"LineChart",display:{name:"CPU"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'}}],unit:{kind:"%"}}},memory:{kind:"LineChart",display:{name:"Memory"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'node_memory_MemTotal_bytes{job="node",instance="$instance"} - node_memory_MemFree_bytes{job="node",instance="$instance"} - node_memory_Buffers_bytes{job="node",instance="$instance"} - node_memory_Cached_bytes{job="node",instance="$instance"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_Buffers_bytes{job="node",instance="$instance"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_Cached_bytes{job="node",instance="$instance"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_MemFree_bytes{job="node",instance="$instance"}'}}],unit:{kind:"Bytes"}}},diskIO:{kind:"LineChart",display:{name:"Disk I/O Utilization"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'}}],unit:{kind:"Percent"}}},filesystemFullness:{kind:"LineChart",display:{name:"Filesystem Fullness"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}'}}],unit:{kind:"Percent"}}}},layouts:[{kind:"Grid",spec:{display:{title:"CPU Stats"},items:[{x:0,y:0,width:12,height:4,content:{$ref:"#/spec/panels/cpu"}}]}},{kind:"Grid",spec:{items:[{x:8,y:0,width:8,height:3,content:{$ref:"#/spec/panels/memory"}}]}},{kind:"Grid",spec:{display:{title:"Disk Stats",collapse:{open:!1}},items:[{x:0,y:0,width:6,height:2,content:{$ref:"#/spec/panels/diskIO"}},{x:18,y:0,width:6,height:2,content:{$ref:"#/spec/panels/filesystemFullness"}}]}}]}};export default testDashboard;

package/dist/utils/functions.d.ts

@@ -0,0 +1,2 @@
+export declare const removeWhiteSpacesAndSpecialCharacters: (str: string) => string;
+//# sourceMappingURL=functions.d.ts.map

package/dist/utils/functions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../src/utils/functions.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,qCAAqC,QAAS,MAAM,WAEhE,CAAC"}

package/dist/utils/functions.js

@@ -0,0 +1 @@
+export const removeWhiteSpacesAndSpecialCharacters=e=>e.replace(/\s+/g,"");

package/dist/views/DashboardApp.d.ts

@@ -0,0 +1,4 @@
+/// <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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box}from"@mui/material";import{combineSx}from"@perses-dev/components";import{useState}from"react";import{VariableList,Dashboard}from"../components";import AddPanel from"../components/AddPanel/AddPanel";import{DashboardToolbar}from"../components/DashboardToolbar";import{useDashboard}from"../context";export const DashboardApp=o=>{const{dashboardResource:a,sx:s,children:e,...r}=o,[d,i]=useState(!1),{dashboard:n}=useDashboard();return _jsx(Box,{sx:combineSx({display:"flex",width:"100%",height:"100%",position:"relative",overflow:"hidden"},s),...r,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,onAddPanel:()=>i(!0)}),_jsx(VariableList,{variables:a.spec.variables,sx:{margin:o=>o.spacing(1,0,2)}}),_jsx(Dashboard,{spec:n}),_jsx(AddPanel,{isOpen:d,onClose:()=>i(!1)}),e]})})};

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,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKrD,MAAM,WAAW,kBAAmB,SAAQ,QAAQ;IAClD,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAgBtD"}

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}from"react/jsx-runtime";import{TimeRangeStateProvider,TemplateVariablesProvider,DashboardProvider}from"../context";import{DashboardApp}from"./DashboardApp";export function ViewDashboard(r){const{dashboardResource:{spec:a},children:e}=r,i=a.duration;return _jsx(DashboardProvider,{initialState:{dashboardSpec:a},children:_jsx(TimeRangeStateProvider,{initialValue:{pastDuration:i},children:_jsx(TemplateVariablesProvider,{variableDefinitions:a.variables,children:_jsx(DashboardApp,{...r,children:e})})})})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.5.2",
+  "version": "0.7.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,20 +24,26 @@
     "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.7.1",
+    "@perses-dev/core": "^0.7.1",
+    "@perses-dev/plugin-system": "^0.7.1",
+    "@types/react-grid-layout": "^1.3.2",
     "immer": "^9.0.15",
+    "react-grid-layout": "^1.3.4",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.7.0",
-    "use-resize-observer": "^8.0.0"
+    "use-resize-observer": "^8.0.0",
+    "zustand": "^4.1.1"
   },
   "devDependencies": {
-    "intersection-observer": "^0.12.2"
+    "intersection-observer": "^0.12.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "peerDependencies": {
     "@mui/material": "^5.5.1",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "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")}))}))}));