@perses-dev/dashboards 0.5.1 → 0.7.0

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/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.1",
+  "version": "0.7.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,16 +24,26 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.5.1",
-    "@perses-dev/core": "^0.5.1",
-    "@perses-dev/plugin-system": "^0.5.1",
+    "@perses-dev/components": "^0.7.0",
+    "@perses-dev/core": "^0.7.0",
+    "@perses-dev/plugin-system": "^0.7.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": "^8.0.0",
+    "zustand": "^4.1.1"
+  },
+  "devDependencies": {
+    "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")}))}))}));