@perses-dev/dashboards 0.7.0 → 0.8.0

package/dist/context/DashboardAppSlice.js

@@ -0,0 +1 @@
+import{immer}from"zustand/middleware/immer";import{useDashboardStore}from"./DashboardProvider";export const createDashboardAppSlice=immer((e=>({openPanelDrawer:({groupIndex:a,panelKey:r})=>e((e=>{e.panelDrawer={groupIndex:a,panelKey:r}})),closePanelDrawer:()=>e((e=>{e.panelDrawer=void 0})),openPanelGroupDialog:a=>e((e=>{e.panelGroupDialog={groupIndex:a}})),closePanelGroupDialog:()=>e((e=>{e.panelGroupDialog=void 0}))})));export function useDashboardApp(){return useDashboardStore((({panelDrawer:e,openPanelDrawer:a,closePanelDrawer:r,panelGroupDialog:o,openPanelGroupDialog:l,closePanelGroupDialog:p})=>({panelDrawer:e,openPanelDrawer:a,closePanelDrawer:r,panelGroupDialog:o,openPanelGroupDialog:l,closePanelGroupDialog:p})))}

package/dist/context/DashboardProvider.d.ts

@@ -1,20 +1,15 @@
 /// <reference types="react" />
-import { DashboardSpec, GridItemDefinition, LayoutDefinition, PanelDefinition } from '@perses-dev/core';
-interface DashboardState {
+import { DashboardSpec, LayoutDefinition, PanelDefinition } from '@perses-dev/core';
+import { DashboardAppSlice } from './DashboardAppSlice';
+import { LayoutsSlice } from './LayoutsSlice';
+export interface DashboardStoreState extends DashboardAppSlice, LayoutsSlice {
     dashboard: DashboardSpec;
-    isEditMode: boolean;
     layouts: LayoutDefinition[];
     panels: Record<string, PanelDefinition>;
-}
-interface DashboardActions {
+    updatePanel: (name: string, panel: PanelDefinition, groupIndex?: number) => void;
+    isEditMode: boolean;
     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;
@@ -25,13 +20,7 @@ export interface DashboardProviderProps {
 }
 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;
+    updatePanel: (name: string, panel: PanelDefinition<import("@perses-dev/core").JsonObject>, groupIndex?: number | undefined) => void;
 };
 export declare function useEditMode(): {
     isEditMode: boolean;
@@ -40,6 +29,6 @@ export declare function useEditMode(): {
 export declare function useDashboard(): {
     dashboard: DashboardSpec;
 };
+export declare function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T;
 export declare function DashboardProvider(props: DashboardProviderProps): JSX.Element;
-export {};
 //# sourceMappingURL=DashboardProvider.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../src/context/DashboardProvider.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAE,aAAa,EAAsB,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB,EAAE,YAAY;IAC1E,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACxC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,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;AAED,wBAAgB,SAAS;;;EAExB;AAED,wBAAgB,WAAW;;;EAE1B;AAED,wBAAgB,YAAY;;EAU3B;AAID,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAqD9D"}

package/dist/context/DashboardProvider.js

@@ -1 +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})}
+import{jsx as _jsx}from"react/jsx-runtime";import{createStore,useStore}from"zustand";import{immer}from"zustand/middleware/immer";import shallow from"zustand/shallow";import{createContext,useContext}from"react";import produce from"immer";import{createDashboardAppSlice}from"./DashboardAppSlice";import{createLayoutsSlice}from"./LayoutsSlice";export function usePanels(){return useDashboardStore((({panels:e,updatePanel:o})=>({panels:e,updatePanel:o})))}export function useEditMode(){return useDashboardStore((({isEditMode:e,setEditMode:o})=>({isEditMode:e,setEditMode:o})))}export function useDashboard(){return{dashboard:useDashboardStore((e=>produce(e.dashboard,(o=>{o.panels=e.panels,o.layouts=e.layouts}))))}}const DashboardContext=createContext(void 0);export function useDashboardStore(e){const o=useContext(DashboardContext);if(void 0===o)throw new Error("No DashboardContext found. Did you forget a Provider?");return useStore(o,e,shallow)}export function DashboardProvider(e){const{children:o,initialState:{dashboardSpec:t,isEditMode:r}}=e,{layouts:a,panels:s}=t,d=createStore()(immer(((e,o,d)=>({...createDashboardAppSlice(e,o,d,[]),...createLayoutsSlice(e,o,d,[]),layouts:a,panels:s,dashboard:t,updatePanel:(o,t,r=0)=>e((e=>{var a,s;if(void 0===e.panels[o]){let t=0;null===(a=e.layouts[r])||void 0===a||a.spec.items.forEach((e=>{e.y>t&&(t=e.y)}));const d={x:0,y:t+1,width:12,height:6,content:{$ref:`#/spec/panels/${o}`}},i=e.layouts;i&&i[r]&&(null===(s=i[r])||void 0===s||s.spec.items.push(d))}e.panels[o]=t})),isEditMode:!!r,setEditMode:o=>e({isEditMode:o})}))));return _jsx(DashboardContext.Provider,{value:d,children:o})}

package/dist/context/LayoutsSlice.d.ts

@@ -0,0 +1,12 @@
+import { LayoutDefinition, GridItemDefinition } from '@perses-dev/core';
+export interface LayoutsSlice {
+    updateLayout: (layout: LayoutDefinition, index?: number) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+}
+export declare const createLayoutsSlice: import("zustand").StateCreator<LayoutsSlice, [], [["zustand/immer", never]], LayoutsSlice>;
+export declare function useLayouts(): {
+    layouts: import("@perses-dev/core").GridDefinition[];
+    updateLayout: (layout: import("@perses-dev/core").GridDefinition, index?: number | undefined) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+};
+//# sourceMappingURL=LayoutsSlice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutsSlice.d.ts","sourceRoot":"","sources":["../../src/context/LayoutsSlice.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAIxE,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACpE;AAED,eAAO,MAAM,kBAAkB,4FAgB5B,CAAC;AAEJ,wBAAgB,UAAU;;;;EAMzB"}

package/dist/context/LayoutsSlice.js

@@ -0,0 +1 @@
+import{immer}from"zustand/middleware/immer";import{useDashboardStore}from"./DashboardProvider";export const createLayoutsSlice=immer((o=>({updateLayout:(t,a)=>o((o=>{void 0===a?o.layouts.unshift(t):o.layouts[a]=t})),addItemToLayout:(t,a)=>o((o=>{var e;const u=o.layouts;u&&u[t]&&(null===(e=u[t])||void 0===e||e.spec.items.push(a))}))})));export function useLayouts(){return useDashboardStore((({layouts:o,updateLayout:t,addItemToLayout:a})=>({layouts:o,updateLayout:t,addItemToLayout:a})))}

package/dist/context/QueryStringProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { QueryString } from '@perses-dev/plugin-system';
+export interface QueryStringProviderProps {
+    queryString: URLSearchParams;
+    setQueryString?: (queryString: URLSearchParams) => void;
+    children?: React.ReactNode;
+}
+/**
+ * Allows apps to provide their own query string implementations
+ */
+export declare function QueryStringProvider(props: QueryStringProviderProps): JSX.Element;
+export declare function useQueryString(): QueryString;
+//# sourceMappingURL=QueryStringProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryStringProvider.d.ts","sourceRoot":"","sources":["../../src/context/QueryStringProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAsB,MAAM,2BAA2B,CAAC;AAE5E,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAMlE;AAED,wBAAgB,cAAc,IAAI,WAAW,CAM5C"}

package/dist/context/QueryStringProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useMemo}from"react";import{QueryStringContext}from"@perses-dev/plugin-system";export function QueryStringProvider(r){const{queryString:e,setQueryString:t,children:n}=r,o=useMemo((()=>({queryString:e,setQueryString:t})),[e,t]);return _jsx(QueryStringContext.Provider,{value:o,children:n})}export function useQueryString(){const r=useContext(QueryStringContext);if(void 0===r)throw new Error("No QueryStringContext found. Did you forget a Provider?");return r}

package/dist/context/TemplateVariableProvider.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { VariableStateMap, VariableState, VariableName, VariableValue, VariableDefinition } from '@perses-dev/core';
+declare type TemplateVariableStore = {
+    variableDefinitions: VariableDefinition[];
+    variableState: VariableStateMap;
+    setVariableValue: (variableName: VariableName, value: VariableValue) => void;
+    loadTemplateVariable: (name: VariableName) => Promise<void>;
+};
+export declare function useTemplateVariableValues(variableNames?: string[]): VariableStateMap;
+export declare function useTemplateVariable(name: string): {
+    state: VariableState | undefined;
+    definition: VariableDefinition | undefined;
+};
+export declare function useTemplateVariableActions(): {
+    setVariableValue: (variableName: string, value: VariableValue) => void;
+    loadTemplateVariable: (name: string) => Promise<void>;
+};
+export declare function useTemplateVariableDefinitions(): VariableDefinition[];
+export declare function useTemplateVariableStore(): TemplateVariableStore;
+export declare function TemplateVariableProvider({ children, initialVariableDefinitions, }: {
+    children: React.ReactNode;
+    initialVariableDefinitions?: VariableDefinition[];
+}): JSX.Element;
+export {};
+//# sourceMappingURL=TemplateVariableProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateVariableProvider.d.ts","sourceRoot":"","sources":["../../src/context/TemplateVariableProvider.tsx"],"names":[],"mappings":";AAkBA,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,aAAa,EAEb,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,aAAK,qBAAqB,GAAG;IAC3B,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,aAAa,EAAE,gBAAgB,CAAC;IAChC,gBAAgB,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7E,oBAAoB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAaF,wBAAgB,yBAAyB,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,oBAqBjE;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM;;;EAU/C;AAED,wBAAgB,0BAA0B;;;EAQzC;AAED,wBAAgB,8BAA8B,yBAG7C;AAED,wBAAgB,wBAAwB,0BAGvC;AA0ED,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,0BAA+B,GAChC,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACnD,eAQA"}

package/dist/context/TemplateVariableProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useContext}from"react";import{createStore,useStore}from"zustand";import{immer}from"zustand/middleware/immer";import{devtools}from"zustand/middleware";import{TemplateVariableContext}from"@perses-dev/plugin-system";import{DEFAULT_ALL_VALUE as ALL_VALUE}from"@perses-dev/core";const TemplateVariableStoreContext=createContext(void 0);function useTemplateVariableStoreCtx(){const e=useContext(TemplateVariableStoreContext);if(!e)throw new Error("TemplateVariableStoreContext not initialized");return e}export function useTemplateVariableValues(e){const t=useTemplateVariableStoreCtx();return useStore(t,(t=>{const a=null!=e?e:Object.keys(t.variableState),r={};return a.forEach((e=>{const a=t.variableState[e];a&&(r[e]=a)})),r}),((e,t)=>JSON.stringify(e)===JSON.stringify(t)))}export function useTemplateVariable(e){const t=useTemplateVariableStoreCtx();return useStore(t,(t=>({state:t.variableState[e],definition:t.variableDefinitions.find((t=>t.name===e))})))}export function useTemplateVariableActions(){const e=useTemplateVariableStoreCtx();return useStore(e,(e=>({setVariableValue:e.setVariableValue,loadTemplateVariable:e.loadTemplateVariable})))}export function useTemplateVariableDefinitions(){const e=useTemplateVariableStoreCtx();return useStore(e,(e=>e.variableDefinitions))}export function useTemplateVariableStore(){const e=useTemplateVariableStoreCtx();return useStore(e)}function PluginProvider({children:e}){const t=useTemplateVariableValues();return _jsx(TemplateVariableContext.Provider,{value:{state:t},children:e})}function createTemplateVariableSrvStore({initialVariableDefinitions:e=[]}){return createStore()(devtools(immer(((t,a)=>({variableState:hydrateTemplateVariableStates(e),variableDefinitions:e,loadTemplateVariable:async e=>{const r=a().variableDefinitions.find((t=>t.name===e));if(!r)return;t((t=>{const a=t.variableState[e];a&&(a.loading=!0)}));const{data:i}=await loadTemplateVariables();r.options.allowAllValue&&i.unshift(getAllOption()),t((t=>{const a=t.variableState[e];a&&(a.options=i,a.loading=!1)}))},setVariableValue:(e,a)=>t((t=>{let r=a;const i=t.variableState[e];i&&(Array.isArray(r)&&r.includes(ALL_VALUE)&&(r=r.at(-1)===ALL_VALUE?[ALL_VALUE]:r.filter((e=>e!==ALL_VALUE))),i.value=r)}))})))))}export function TemplateVariableProvider({children:e,initialVariableDefinitions:t=[]}){const a=createTemplateVariableSrvStore({initialVariableDefinitions:t});return _jsx(TemplateVariableStoreContext.Provider,{value:a,children:_jsx(PluginProvider,{children:e})})}async function loadTemplateVariables(){const e=Math.floor(1e4*Math.random())+1e3;return await new Promise((t=>setTimeout(t,e))),{data:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"].map((e=>({label:e,value:e})))}}function getAllOption(){return{label:"All",value:ALL_VALUE}}function hydrateTemplateVariableState(e){var t,a;const r=e,i={value:null,loading:!1};switch(r.kind){case"TextVariable":i.value=r.options.value;break;case"ListVariable":if(i.options=[],r.options.allowAllValue&&i.options.unshift({label:"All",value:ALL_VALUE}),i.options.length>0&&!i.value){const e=null!==(a=null===(t=i.options[0])||void 0===t?void 0:t.value)&&void 0!==a?a:null;null!==e&&(i.value=r.options.allowMultiple?[e]:e)}}return i}function hydrateTemplateVariableStates(e){const t={};return e.forEach((e=>{t[e.name]=hydrateTemplateVariableState(e)})),t}

package/dist/context/TimeRangeProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TimeRangeValue } from '@perses-dev/core';
+export interface TimeRangeProviderProps {
+    initialTimeRange: TimeRangeValue;
+    children?: React.ReactNode;
+    onTimeRangeChange?: (e: TimeRangeValue) => void;
+}
+/**
+ * Provider implementation that supplies the time range state at runtime.
+ */
+export declare function TimeRangeProvider(props: TimeRangeProviderProps): JSX.Element;
+//# sourceMappingURL=TimeRangeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeRangeProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,cAAc,EAA+D,MAAM,kBAAkB,CAAC;AAG/G,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAkD9D"}

package/dist/context/TimeRangeProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useMemo,useCallback}from"react";import{getUnixTime}from"date-fns";import{toAbsoluteTimeRange,isRelativeTimeRange}from"@perses-dev/core";import{TimeRangeContext,useQueryString}from"@perses-dev/plugin-system";export function TimeRangeProvider(e){const{initialTimeRange:t,children:i,onTimeRangeChange:n}=e,{queryString:s,setQueryString:r}=useQueryString(),a=isRelativeTimeRange(t)?toAbsoluteTimeRange(t):t,[o,m]=useState(a),g=useCallback((e=>{if(void 0===n)if(isRelativeTimeRange(e))r?(s.set("start",e.pastDuration),s.delete("end"),r(s)):m(toAbsoluteTimeRange(e));else if(r){const t=1e3*getUnixTime(e.start),i=1e3*getUnixTime(e.end);s.set("start",t.toString()),s.set("end",i.toString()),r(s)}else m(e);else n(e)}),[s,r,n]),u=useMemo((()=>({timeRange:o,setTimeRange:g})),[o,g]);return _jsx(TimeRangeContext.Provider,{value:u,children:i})}

package/dist/context/index.d.ts

@@ -1,4 +1,7 @@
-export * from './TemplateVariablesProvider';
-export * from './TimeRangeStateProvider';
+export * from './DashboardAppSlice';
+export * from './LayoutsSlice';
+export * from './TemplateVariableProvider';
 export * from './DashboardProvider';
+export * from './TimeRangeProvider';
+export * from './QueryStringProvider';
 //# 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;AACzC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}

package/dist/context/index.js

@@ -1 +1 @@
-export*from"./TemplateVariablesProvider";export*from"./TimeRangeStateProvider";export*from"./DashboardProvider";
+export*from"./DashboardAppSlice";export*from"./LayoutsSlice";export*from"./TemplateVariableProvider";export*from"./DashboardProvider";export*from"./TimeRangeProvider";export*from"./QueryStringProvider";

package/dist/css/styles.d.ts

@@ -0,0 +1,172 @@
+import { Theme } from '@mui/material';
+export declare const styles: (theme: Theme) => {
+    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: string;
+        readonly opacity: 0.2;
+        readonly transitionDuration: "100ms";
+        readonly zIndex: 2;
+        readonly userSelect: "none";
+        readonly WebkitUserSelect: "none";
+        readonly MozUserSelect: "none";
+        readonly msUserSelect: "none";
+        readonly OUserSelect: "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)";
+    };
+};
+//# 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,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,eAAO,MAAM,MAAM,UAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLlC,CAAC"}

package/dist/css/styles.js

@@ -0,0 +1 @@
+export const styles=e=>({"&.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:e.palette.primary.main,opacity:.2,transitionDuration:"100ms",zIndex:2,userSelect:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",OUserSelect:"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/plugin-registry.d.ts

@@ -1,4 +1,5 @@
-import { PluginRegistryProps, RegisterPlugin } from '@perses-dev/plugin-system';
+import { JsonObject } from '@perses-dev/core';
+import { PluginRegistryProps, PluginImplementation, PanelPlugin } from '@perses-dev/plugin-system';
 /**
  * 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
@@ -6,6 +7,7 @@ import { PluginRegistryProps, RegisterPlugin } from '@perses-dev/plugin-system';
  */
 export declare function mockPluginRegistryProps(): {
     pluginRegistryProps: Omit<PluginRegistryProps, "children">;
-    addMockPlugin: RegisterPlugin;
+    addMockPlugin: <T extends "Variable" | "Panel" | "GraphQuery">(pluginType: T, kind: string, plugin: PluginImplementation<T, JsonObject>) => void;
 };
+export declare const FAKE_PANEL_PLUGIN: PanelPlugin<JsonObject>;
 //# sourceMappingURL=plugin-registry.d.ts.map

package/dist/test/plugin-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-registry.d.ts","sourceRoot":"","sources":["../../src/test/plugin-registry.ts"],"names":[],"mappings":"AAYA,OAAO,EAEL,mBAAmB,EAGnB,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,uBAAuB;;;EA0CtC"}
+{"version":3,"file":"plugin-registry.d.ts","sourceRoot":"","sources":["../../src/test/plugin-registry.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EAEnB,oBAAoB,EAGpB,WAAW,EACZ,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,uBAAuB;;wFAgB7B,MAAM;EA4Bf;AAED,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,UAAU,CAQrD,CAAC"}

package/dist/test/plugin-registry.js

@@ -1 +1 @@
-export function mockPluginRegistryProps(){const e={kind:"Plugin",metadata:{name:"Fake Plugin for Tests"},spec:{supported_kinds:{}}},s=[],n={setup(e){for(const n of s)n(e)}};return{pluginRegistryProps:{getInstalledPlugins:()=>Promise.resolve([e]),importPluginModule:()=>Promise.resolve(n)},addMockPlugin:n=>{e.spec.supported_kinds[n.kind]=n.pluginType,s.push((e=>{e(n)}))}}}
+import{jsx as _jsx}from"react/jsx-runtime";export function mockPluginRegistryProps(){const e={kind:"PluginModule",metadata:{name:"Fake Plugin Module for Tests"},spec:{plugins:[]}},i={};return{pluginRegistryProps:{getInstalledPlugins:()=>Promise.resolve([e]),importPluginModule:()=>Promise.resolve(i)},addMockPlugin:(n,o,s)=>{e.spec.plugins.push({pluginType:n,kind:o,display:{name:`Fake ${n} Plugin for ${o}`}}),i[o]=s}}}export const FAKE_PANEL_PLUGIN={PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"}),OptionsEditorComponent:()=>_jsx("div",{children:"Edit options here"}),createInitialOptions:()=>({})};

package/dist/test/render.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { RenderOptions } from '@testing-library/react';
+import { DashboardStoreProps } from '../context';
 /**
  * Test helper to render a React component with some common app-level providers wrapped around it.
  */
-export declare function renderWithContext(ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export declare function renderWithContext(ui: React.ReactElement, initialState?: DashboardStoreProps, options?: Omit<RenderOptions, 'queries'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
 //# sourceMappingURL=render.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK/D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,gIAEjG"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAqB,mBAAmB,EAAE,MAAM,YAAY,CAAC;AASpE;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,YAAY,GAAE,mBAAkC,EAChD,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,gIAQzC"}

package/dist/test/render.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{QueryClient,QueryClientProvider}from"react-query";const queryClient=new QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});export function renderWithContext(e,r){return render(_jsx(QueryClientProvider,{client:queryClient,children:e}),r)}
+import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{QueryClient,QueryClientProvider}from"react-query";import{DashboardProvider}from"../context";import testDashboard from"./testDashboard";const queryClient=new QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}}),initialStore={isEditMode:!0,dashboardSpec:testDashboard.spec};export function renderWithContext(r,e=initialStore,t){return render(_jsx(DashboardProvider,{initialState:e,children:_jsx(QueryClientProvider,{client:queryClient,children:r})}),t)}

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

@@ -1 +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"}
+{"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,iBAwLpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/test/testDashboard.js

@@ -1 +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;
+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:[{name:"job",kind:"TextVariable",options:{value:"node"}},{name:"instance",kind:"TextVariable",options:{value:"demo.do.prometheus.io:9100"}},{name:"interval",kind:"TextVariable",options:{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/views/DashboardApp.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{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]})})};
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box}from"@mui/material";import{combineSx}from"@perses-dev/components";import{TemplateVariableList,Dashboard}from"../components";import PanelGroupDialog from"../components/PanelGroupDialog/PanelGroupDialog";import PanelDrawer from"../components/PanelDrawer/PanelDrawer";import{DashboardToolbar}from"../components/DashboardToolbar";import{useDashboard,useDashboardApp}from"../context";export const DashboardApp=o=>{const{dashboardResource:a,sx:r,children:e,...s}=o,{dashboard:i}=useDashboard(),{panelGroupDialog:n}=useDashboardApp();return _jsx(Box,{sx:combineSx({display:"flex",width:"100%",height:"100%",position:"relative",overflow:"hidden"},r),...s,children:_jsxs(Box,{sx:{padding:o=>o.spacing(1,2),flexGrow:1,overflowX:"hidden",overflowY:"auto",display:"flex",flexDirection:"column"},children:[_jsx(DashboardToolbar,{dashboardName:a.metadata.name}),_jsx(TemplateVariableList,{}),_jsx(Dashboard,{spec:i}),_jsx(PanelDrawer,{}),n&&_jsx(PanelGroupDialog,{}),e]})})};

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

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

package/dist/views/ViewDashboard.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,26 +24,24 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.7.0",
-    "@perses-dev/core": "^0.7.0",
-    "@perses-dev/plugin-system": "^0.7.0",
+    "@perses-dev/components": "^0.8.0",
+    "@perses-dev/core": "^0.8.0",
+    "@perses-dev/plugin-system": "^0.8.0",
     "@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": "^9.0.0",
     "zustand": "^4.1.1"
   },
   "devDependencies": {
-    "intersection-observer": "^0.12.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "intersection-observer": "^0.12.2"
   },
   "peerDependencies": {
-    "@mui/material": "^5.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@mui/material": "^5.6.0",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "files": [
     "dist"