@perses-dev/dashboards 0.7.1 → 0.8.0

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

@@ -1,4 +1,5 @@
-declare const _default: {
+import { Theme } from '@mui/material';
+export declare const styles: (theme: Theme) => {
     readonly '&.react-grid-layout': {
         readonly position: "relative";
         readonly transition: "height 200ms ease";
@@ -27,15 +28,15 @@ declare const _default: {
         readonly visibility: "hidden";
     };
     readonly '&.react-grid-item.react-grid-placeholder': {
-        readonly background: "red";
+        readonly background: string;
         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 WebkitUserSelect: "none";
+        readonly MozUserSelect: "none";
+        readonly msUserSelect: "none";
+        readonly OUserSelect: "none";
     };
     readonly '&.react-grid-item > .react-resizable-handle': {
         readonly position: "absolute";
@@ -168,5 +169,4 @@ declare const _default: {
         readonly transform: "rotate(45deg)";
     };
 };
-export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/css/styles.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBA8KW"}
+{"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

@@ -1 +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)"}};
+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.1",
+  "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.1",
-    "@perses-dev/core": "^0.7.1",
-    "@perses-dev/plugin-system": "^0.7.1",
+    "@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"

package/dist/cjs/components/AddPanel/AddPanel.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2022 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const react_1 = require("react");
-const context_1 = require("../../context");
-const functions_1 = require("../../utils/functions");
-const AddPanel = ({ isOpen, onClose }) => {
-    const { layouts, addItemToLayout } = (0, context_1.useLayouts)();
-    const { addPanel } = (0, context_1.usePanels)();
-    const [group, setGroup] = (0, react_1.useState)(0);
-    const [panelName, setPanelName] = (0, react_1.useState)('');
-    const [panelDescription, setPanelDescription] = (0, react_1.useState)('');
-    const onSelectGroupChange = (e) => {
-        setGroup(e.target.value);
-    };
-    const onPanelNameChange = (e) => {
-        setPanelName(e.target.value);
-    };
-    const onPanelDescriptionChange = (e) => {
-        setPanelDescription(e.target.value);
-    };
-    const onAddPanelClick = (e) => {
-        var _a;
-        e.preventDefault();
-        const panelKey = (0, functions_1.removeWhiteSpacesAndSpecialCharacters)(panelName);
-        addPanel(panelKey, {
-            kind: 'EmptyChart',
-            display: { name: panelName, description: panelDescription },
-            options: {},
-        });
-        // find maximum y so new panel is added to the end of the grid
-        let maxY = 0;
-        (_a = layouts[group]) === null || _a === void 0 ? void 0 : _a.spec.items.forEach((layout) => {
-            if (layout.y > maxY) {
-                maxY = layout.y;
-            }
-        });
-        addItemToLayout(group, {
-            x: 0,
-            y: maxY + 1,
-            width: 12,
-            height: 6,
-            content: { $ref: `#/spec/panels/${panelKey}` },
-        });
-        onClose();
-    };
-    return ((0, jsx_runtime_1.jsx)(components_1.Drawer, { isOpen: isOpen, onClose: onClose, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onAddPanelClick, children: [(0, jsx_runtime_1.jsx)(AddPanelHeader, { onClose: onClose }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "select-group", children: "Group" }), (0, jsx_runtime_1.jsx)(material_1.Select, { required: true, labelId: "select-group", label: "Group", value: group, onChange: onSelectGroupChange, children: layouts.map((layout, index) => {
-                                            var _a;
-                                            return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: index, children: ((_a = layout.spec.display) === null || _a === void 0 ? void 0 : _a.title) || `Group ${index + 1}` }, index));
-                                        }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 8, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, sx: { flexGrow: '1' }, children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, label: "Panel Name", variant: "outlined", onChange: onPanelNameChange }) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Description", variant: "outlined", onChange: onPanelDescriptionChange }) })] }) })] })] }) }));
-};
-const AddPanelHeader = ({ onClose }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            marginBottom: (theme) => theme.spacing(2),
-            paddingBottom: (theme) => theme.spacing(2),
-            borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", children: "Add Panel" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", variant: "contained", children: "Add Panel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onClose, children: "Cancel" })] })] }));
-};
-exports.default = AddPanel;

package/dist/cjs/components/VariableAutocomplete.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariableAutocomplete = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2022 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const plugin_system_1 = require("@perses-dev/plugin-system");
-/**
- * A MUI Autocomplete that displays variable options, loaded from the
- * appropriate plugin.
- */
-function VariableAutocomplete(props) {
-    const { definition, state, onChange, onOptionsChange, TextFieldProps, ...others } = props;
-    const { value, options } = state;
-    const allValue = 'all_value' in definition.selection ? definition.selection.all_value : undefined;
-    const displayOptions = (0, react_1.useMemo)(() => {
-        let displayOptions = options;
-        // During initial loading, options will be undefined, so make sure we have
-        // an option for the current value
-        if (displayOptions === undefined) {
-            displayOptions = Array.isArray(value) ? value : [value];
-        }
-        // The All option is not actually stored in the options state, so make
-        // sure that exists at the start of the options array
-        if (allValue !== undefined && displayOptions[0] !== allValue) {
-            displayOptions = [allValue, ...displayOptions];
-        }
-        return displayOptions;
-    }, [options, value, allValue]);
-    // Load the options from the server and update state whenever that data
-    // changes
-    const { data, loading, error } = (0, plugin_system_1.useVariableOptions)(definition);
-    (0, react_1.useEffect)(() => {
-        if (loading)
-            return;
-        onOptionsChange(data);
-        // We don't want to fire this event every time we render if the user doesn't wrap onOptionsChange with useCallback
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [data, loading]);
-    const handleChange = (e, nextValue) => {
-        onChange(nextValue);
-    };
-    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { options: displayOptions, loading: loading, value: value, multiple: Array.isArray(value), disableClearable: true, freeSolo: false, onChange: handleChange, renderInput: (params) => {
-            var _a;
-            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, margin: "normal", label: definition.display.label, error: error !== undefined, helperText: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : '', ...TextFieldProps }));
-        }, getOptionLabel: (option) => (option === allValue ? 'All' : option), ChipProps: {
-            color: 'default',
-            variant: 'outlined',
-        }, ...others }));
-}
-exports.VariableAutocomplete = VariableAutocomplete;

package/dist/cjs/components/VariableList/VariableList.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariableList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2022 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const plugin_system_1 = require("@perses-dev/plugin-system");
-const context_1 = require("../../context");
-const VariableAutocomplete_1 = require("../VariableAutocomplete");
-/**
- * Displays the list of variable inputs for a dashboard.
- */
-function VariableList(props) {
-    const { variables, ...others } = props;
-    const { variables: variablesState } = (0, plugin_system_1.useTemplateVariables)();
-    const { setValue, setOptions } = (0, context_1.useTemplateVariablesSetters)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: { xs: 'column', sm: 'row' }, alignItems: { sm: 'center' }, spacing: 2, ...others, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { fontWeight: (theme) => theme.typography.fontWeightMedium }, children: "Variables" }), Object.entries(variables).map(([variableName, variableDef]) => {
-                if (variableDef.display.hide === true)
-                    return null;
-                const variableState = variablesState[variableName];
-                if (variableState === undefined) {
-                    const error = new Error(`Variable state for '${variableName}' not found`);
-                    return (0, jsx_runtime_1.jsx)(components_1.ErrorAlert, { error: error }, variableName);
-                }
-                return ((0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(VariableAutocomplete_1.VariableAutocomplete, { definition: variableDef, state: variableState, onChange: (value) => setValue(variableName, value), onOptionsChange: (options) => setOptions(variableName, options), TextFieldProps: {
-                            margin: 'none',
-                        }, sx: { minWidth: 250 } }) }, variableName));
-            })] }));
-}
-exports.VariableList = VariableList;

package/dist/cjs/components/VariableList/VariableList.test.js

@@ -1,86 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2022 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-const react_1 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const plugin_system_1 = require("@perses-dev/plugin-system");
-const test_1 = require("../../test");
-const context_1 = require("../../context");
-const VariableList_1 = require("./VariableList");
-describe('VariableList', () => {
-    const variables = {
-        job: {
-            display: {
-                label: 'Job',
-            },
-            kind: 'PrometheusLabelValues',
-            selection: {
-                default_value: 'node',
-            },
-            options: {
-                label_name: 'job',
-                match: ['node_uname_info'],
-            },
-        },
-    };
-    const options = {
-        data: ['node', 'all'],
-        isLoading: false,
-        error: undefined,
-    };
-    const FAKE_PANEL_PLUGIN = {
-        pluginType: 'Variable',
-        kind: 'PrometheusLabelValues',
-        plugin: {
-            useVariableOptions: () => {
-                return options;
-            },
-        },
-    };
-    const renderVariableOptionsDrawer = () => {
-        const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
-        addMockPlugin(FAKE_PANEL_PLUGIN);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: variables, children: (0, jsx_runtime_1.jsx)(VariableList_1.VariableList, { variables: variables }) }) }));
-    };
-    it('should display Variables as the title', async () => {
-        renderVariableOptionsDrawer();
-        const title = await react_1.screen.findByText('Variables');
-        expect(title).toBeInTheDocument();
-    });
-    describe('VariableAutocomplete', () => {
-        it('should display correct variable', async () => {
-            renderVariableOptionsDrawer();
-            const jobInput = await react_1.screen.findByLabelText('Job');
-            expect(jobInput).toBeInTheDocument();
-        });
-        it('should display correct default value', async () => {
-            renderVariableOptionsDrawer();
-            const jobValue = await react_1.screen.findByDisplayValue('node');
-            expect(jobValue).toBeInTheDocument();
-        });
-        it('should display correct options', async () => {
-            renderVariableOptionsDrawer();
-            const openButton = await react_1.screen.findByRole('button', { name: 'Open' });
-            user_event_1.default.click(openButton);
-            const option1 = await react_1.screen.findByText('all');
-            expect(option1).toBeInTheDocument();
-            const option2 = react_1.screen.getByText('node');
-            expect(option2).toBeInTheDocument();
-        });
-    });
-});