@ssa-ui-kit/infra-dash 0.0.2 → 0.1.0

package/dist/index.js

@@ -65,13 +65,16 @@ __webpack_require__.d(__webpack_exports__, {
   DashboardEditorInternal: () => (/* reexport */ DashboardEditorInternal),
   DashboardViewer: () => (/* reexport */ DashboardViewer),
   InfraDashProvider: () => (/* reexport */ InfraDashProvider),
+  PeriodSelector: () => (/* reexport */ PeriodSelector),
   RestInfraDashTransport: () => (/* reexport */ RestInfraDashTransport),
   useCreateDashboard: () => (/* reexport */ useCreateDashboard),
   useDashboard: () => (/* reexport */ useDashboard),
   useDashboards: () => (/* reexport */ useDashboards),
   useDeleteDashboard: () => (/* reexport */ useDeleteDashboard),
   useInfraDashContext: () => (/* reexport */ useInfraDashContext),
+  useInfraDashPanelDataPeriodContext: () => (/* reexport */ useInfraDashPanelDataPeriodContext),
   useMutationClient: () => (/* reexport */ useMutationClient),
+  usePublishedDashboards: () => (/* reexport */ usePublishedDashboards),
   useQueryClient: () => (/* reexport */ useQueryClient),
   useTransport: () => (/* reexport */ useTransport),
   useUpdateDashboard: () => (/* reexport */ useUpdateDashboard)
@@ -550,7 +553,7 @@ function partialMatchKey(a, b) {
 }
 ;// external "@ssa-ui-kit/hooks"
 const hooks_namespaceObject = require("@ssa-ui-kit/hooks");
-;// ./src/shared/context.ts
+;// ./src/shared/context/root.ts
 
 const [InfraDashInternalProvider, useInfraDashContext] = (0,hooks_namespaceObject.createSafeContext)('useInfraDashContext must be used within a InfraDashProvider');
 ;// ./src/shared/query/useQuery.ts
@@ -662,6 +665,17 @@ const useDashboard = (dashboardId, options) => {
   }, queryOptions);
   return result;
 };
+const usePublishedDashboards = options => {
+  const {
+    transport,
+    ...queryOptions
+  } = options || {};
+  const _transport = useTransport(transport);
+  const result = useQuery(['dashboards', 'published'], async signal => {
+    return await _transport.getPublishedDashboards(signal);
+  }, queryOptions);
+  return result;
+};
 const useCreateDashboard = options => {
   const {
     transport,
@@ -670,16 +684,18 @@ const useCreateDashboard = options => {
   const _transport = useTransport(transport);
   const result = useMutation(['create-dashboard'], async (payload, signal) => {
     const panels = payload.panels.map(panel => ({
-      ...panel,
-      id: panel.panelDefinition.source.panelId
+      // for some reason backend accepts stringified JSON but returns object
+      panelDefinition: JSON.stringify(panel.panelDefinition),
+      source: panel.source
     }));
-    const dashboardsUid = new Set(panels.map(panel => panel.panelDefinition.source.dashboardUid));
+    const dashboardsUid = new Set(panels.map(panel => panel.source.dashboardUid));
     if (!dashboardsUid.size) {
       throw new Error('At least one panel must be provided');
     }
     return await _transport.createDashboard({
-      ...payload,
-      dashboardUid: dashboardsUid.values().next().value,
+      title: payload.title,
+      published: payload.published,
+      dashboardDefinition: payload.dashboardDefinition,
       panels
     }, signal);
   }, mutationOptions);
@@ -693,15 +709,17 @@ const useUpdateDashboard = (dashboardId, options) => {
   const _transport = useTransport(transport);
   const result = useMutation(['update-dashboard', dashboardId], async (payload, signal) => {
     const panels = payload.panels.map(panel => ({
-      ...panel,
-      id: panel.panelDefinition.source.panelId
+      panelDefinition: JSON.stringify(panel.panelDefinition),
+      source: panel.source
     }));
-    const dashboardsUid = new Set(panels.map(panel => panel.panelDefinition.source.dashboardUid));
+    const dashboardsUid = new Set(panels.map(panel => panel.source.dashboardUid));
     if (!dashboardsUid.size) {
       throw new Error('At least one panel must be provided');
     }
     return await _transport.updateDashboard({
-      ...payload,
+      title: payload.title,
+      published: payload.published,
+      dashboardDefinition: payload.dashboardDefinition,
       panels,
       dashboardId
     }, signal);
@@ -719,6 +737,86 @@ const useDeleteDashboard = (dashboardId, options) => {
   }, mutationOptions);
   return result;
 };
+;// ./src/shared/panel.ts
+/**
+ * Defines the configuration and positioning information for a dashboard panel.
+ * Contains both the component configuration and grid layout positioning.
+ */
+
+/**
+ * Represents a complete dashboard panel with its metadata, schema, and definition.
+ * Combines panel identity, display information, data schema, and component configuration.
+ */
+
+/**
+ * Optional schema defining the structure of props this component expects.
+ * Used for validation and form generation in configuration UIs.
+ */
+
+/**
+ * Configuration object for registering a panel component type.
+ * Defines how a specific component should be rendered and what panel types it supports.
+ */
+
+/**
+ * Constant object defining available panel data sources.
+ * Currently only supports Grafana as a data source.
+ */
+const PANEL_DATA_SOURCE = {
+  GRAFANA: 'grafana'
+};
+/**
+ * Pattern matching utility function for handling different panel data sources.
+ * Provides type-safe way to handle operations based on the data source type.
+ *
+ * @param source - The panel data source to match against
+ * @param handlers - Object containing handler functions for each data source type
+ */
+const matchPanelDataSource = (source, handlers) => {
+  switch (source) {
+    case PANEL_DATA_SOURCE.GRAFANA:
+      return handlers.grafana();
+    default:
+      {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const _ = source;
+        throw new Error(`Unsupported panel data source: ${source}`);
+      }
+  }
+};
+
+/**
+ * Represents panel data with its source and associated data.
+ * Currently only supports Grafana as a data source.
+ */
+
+const PANEL_DATA_PERIOD = {
+  LAST_HOUR: 0,
+  LAST_6_HOURS: 1,
+  LAST_24_HOURS: 2,
+  LAST_7_DAYS: 3,
+  LAST_30_DAYS: 4
+};
+;// ./src/shared/context/panelDataPeriod.ts
+
+
+const useInfraDashPanelDataPeriod = ({
+  defaultPeriod,
+  period: providedPeriod,
+  onPeriodChange
+} = {}) => {
+  const [period, changePeriod] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: providedPeriod,
+    defaultValue: defaultPeriod,
+    finalValue: PANEL_DATA_PERIOD.LAST_HOUR,
+    onChange: onPeriodChange
+  });
+  return {
+    period,
+    changePeriod
+  };
+};
+const [InfraDashPanelDataPeriodProvider, useInfraDashPanelDataPeriodContext] = (0,hooks_namespaceObject.createSafeContext)('useInfraDashPanelDataPeriodContext must be used within a InfraDashPanelDataPeriodProvider');
 ;// external "react-grid-layout"
 const external_react_grid_layout_namespaceObject = require("react-grid-layout");
 var external_react_grid_layout_default = /*#__PURE__*/__webpack_require__.n(external_react_grid_layout_namespaceObject);
@@ -782,8 +880,8 @@ function DashboardPanelGrid_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
 
 
 var DashboardPanelGrid_ref2 =  true ? {
-  name: "52s4fb",
-  styles: "width:100%;.react-grid-item.cssTransforms{transition-property:none;}.react-grid-layout{transition:none;}"
+  name: "tu5rj9",
+  styles: "width:100%;.react-grid-item.cssTransforms{transition-property:none;}.react-grid-layout{transition:none;}.react-grid-item.react-grid-placeholder{background-color:transparent;}"
 } : 0;
 var _ref3 =  true ? {
   name: "k9eird",
@@ -816,11 +914,13 @@ const DashboardPanelGrid = ({
   (0,external_react_namespaceObject.useEffect)(() => {
     if (refetchIntervalMs) {
       queryClient.invalidateQueries({
-        key: ['panel-data']
+        key: ['panel-data'],
+        type: 'active'
       });
       const intervalId = setInterval(() => {
         queryClient.invalidateQueries({
-          key: ['panel-data']
+          key: ['panel-data'],
+          type: 'active'
         });
       }, refetchIntervalMs);
       return () => clearInterval(intervalId);
@@ -908,8 +1008,8 @@ const DashboardPanelGrid = ({
   });
 };
 var DashboardPanelGrid_ref =  true ? {
-  name: "p3gkp4",
-  styles: ".react-resizable-handle-se{z-index:1;}"
+  name: "ujxn9q",
+  styles: ".react-resizable-handle-se{z-index:1;padding:0;::after{right:0;bottom:0;}}"
 } : 0;
 const GridItem = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function GridItem({
   children,
@@ -929,6 +1029,7 @@ const GridItem = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(func
 
 
 
+
 const DashboardViewer = ({
   dashboard,
   dashboardId,
@@ -937,16 +1038,29 @@ const DashboardViewer = ({
   const dashboardById = useDashboard(dashboardId ?? -1, {
     enabled: !!dashboardId && !dashboard
   });
-  if (dashboard) {
-    return (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
-      fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
-        children: "Something went wrong"
-      }),
-      children: (0,jsx_runtime_namespaceObject.jsx)(DashboardPanelGrid, {
-        ...props,
-        dashboard: dashboard
+  const DashboardWrapper = ({
+    dashboard
+  }) => {
+    const panelDataPeriod = useInfraDashPanelDataPeriod({
+      ...props
+    });
+    return (0,jsx_runtime_namespaceObject.jsx)(InfraDashPanelDataPeriodProvider, {
+      value: panelDataPeriod,
+      children: (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
+        fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
+          children: "Something went wrong"
+        }),
+        children: (0,jsx_runtime_namespaceObject.jsx)(DashboardPanelGrid, {
+          ...props,
+          dashboard: dashboard
+        })
       })
     });
+  };
+  if (dashboard) {
+    return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
+      dashboard: dashboard
+    });
   }
   if (!dashboardById.isLoaded) {
     return (0,jsx_runtime_namespaceObject.jsx)(LoadingDashboard, {});
@@ -954,18 +1068,37 @@ const DashboardViewer = ({
   if (dashboardById.error) {
     return (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {});
   }
-  return (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
-    fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
-      children: "Something went wrong"
-    }),
-    children: (0,jsx_runtime_namespaceObject.jsx)(DashboardPanelGrid, {
-      ...props,
-      dashboard: dashboardById.data
-    })
+  return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
+    dashboard: dashboardById.data
   });
 };
 ;// ./src/widgets/DashboardViewer/index.ts
 
+;// ./src/components/PeriodSelector/PeriodSelector.tsx
+
+
+
+
+const PeriodSelector = () => {
+  const {
+    period,
+    changePeriod
+  } = useInfraDashPanelDataPeriodContext();
+  const handlePeriodSelect = period => {
+    changePeriod(period);
+  };
+  const options = [[PANEL_DATA_PERIOD.LAST_HOUR, 'Last Hour'], [PANEL_DATA_PERIOD.LAST_6_HOURS, 'Last 6 Hours'], [PANEL_DATA_PERIOD.LAST_24_HOURS, 'Last 24 Hours'], [PANEL_DATA_PERIOD.LAST_7_DAYS, 'Last 7 Days'], [PANEL_DATA_PERIOD.LAST_30_DAYS, 'Last 30 Days']];
+  return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typeahead, {
+    filterOptions: false,
+    selectedItems: [period],
+    onChange: componentId => handlePeriodSelect(componentId),
+    children: options.map(([value, label]) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.TypeaheadOption, {
+      value: value,
+      label: label,
+      children: label
+    }, value))
+  });
+};
 ;// ./src/shared/icons/DashboardIcon.tsx
 
 const DashboardIcon = ({
@@ -987,58 +1120,6 @@ const DashboardIcon = ({
     fill: fill
   })]
 });
-;// ./src/shared/panel.ts
-/**
- * Defines the configuration and positioning information for a dashboard panel.
- * Contains both the component configuration and grid layout positioning.
- */
-
-/**
- * Represents a complete dashboard panel with its metadata, schema, and definition.
- * Combines panel identity, display information, data schema, and component configuration.
- */
-
-/**
- * Optional schema defining the structure of props this component expects.
- * Used for validation and form generation in configuration UIs.
- */
-
-/**
- * Configuration object for registering a panel component type.
- * Defines how a specific component should be rendered and what panel types it supports.
- */
-
-/**
- * Constant object defining available panel data sources.
- * Currently only supports Grafana as a data source.
- */
-const PANEL_DATA_SOURCE = {
-  GRAFANA: 'grafana'
-};
-/**
- * Pattern matching utility function for handling different panel data sources.
- * Provides type-safe way to handle operations based on the data source type.
- *
- * @param source - The panel data source to match against
- * @param handlers - Object containing handler functions for each data source type
- */
-const matchPanelDataSource = (source, handlers) => {
-  switch (source) {
-    case PANEL_DATA_SOURCE.GRAFANA:
-      return handlers.grafana();
-    default:
-      {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const _ = source;
-        throw new Error(`Unsupported panel data source: ${source}`);
-      }
-  }
-};
-
-/**
- * Represents panel data with its source and associated data.
- * Currently only supports Grafana as a data source.
- */
 ;// ./src/widgets/DashboardEditor/components/DashboardSelectorDrawer.tsx
 function DashboardSelectorDrawer_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -1046,8 +1127,8 @@ function DashboardSelectorDrawer_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You
 
 
 var DashboardSelectorDrawer_ref =  true ? {
-  name: "1gk49vx",
-  styles: "width:400px;padding:24px 32px"
+  name: "u5gcpt",
+  styles: "width:400px;padding:24px 32px;z-index:10"
 } : 0;
 var DashboardSelectorDrawer_ref2 =  true ? {
   name: "13udsys",
@@ -1123,8 +1204,8 @@ function PanelSettingsDrawer_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
 
 
 var PanelSettingsDrawer_ref =  true ? {
-  name: "1c73qam",
-  styles: "max-width:400px;padding:24px 32px"
+  name: "12ld9rx",
+  styles: "max-width:400px;padding:24px 32px;z-index:10"
 } : 0;
 var PanelSettingsDrawer_ref2 =  true ? {
   name: "1d3w5wq",
@@ -1210,6 +1291,7 @@ function ExternalDashboardsList_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You h
 
 
 
+
 var ExternalDashboardsList_ref =  true ? {
   name: "tc4e7",
   styles: "justify-content:center;height:100%;padding:8px"
@@ -1224,14 +1306,13 @@ var ExternalDashboardsList_ref3 =  true ? {
 } : 0;
 const ExternalPanelList = ({
   dashboard,
+  panels,
+  isLoaded,
+  error,
   onPanelClick
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
-  const {
-    panelRegistry
-  } = useInfraDashContext();
-  const externalPanels = useGrafanaPanels(dashboard.id);
-  if (!externalPanels.isLoaded) {
+  if (!isLoaded) {
     return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Wrapper, {
       direction: "column",
       css: ExternalDashboardsList_ref,
@@ -1253,7 +1334,7 @@ const ExternalPanelList = ({
       })
     });
   }
-  if (externalPanels.error) {
+  if (error) {
     return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
       direction: "column",
       css: ExternalDashboardsList_ref2,
@@ -1262,7 +1343,7 @@ const ExternalPanelList = ({
       })]
     });
   }
-  if (!externalPanels.data.length) {
+  if (!panels.length) {
     return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
       direction: "column",
       css: ExternalDashboardsList_ref3,
@@ -1271,15 +1352,8 @@ const ExternalPanelList = ({
       })]
     });
   }
-  const availablePanels = externalPanels.data.filter(panel => {
-    if (!panel.panelSchema?.type) {
-      return false;
-    }
-    const availableComponents = panelRegistry.findPanelConfigsByType(panel.panelSchema.type);
-    return availableComponents.length > 0;
-  });
   return (0,jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
-    children: availablePanels.map(panel => (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Button, {
+    children: panels.map(panel => (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Button, {
       variant: "tertiary",
       className: /*#__PURE__*/(0,css_namespaceObject.css)("width:100%;min-height:34px;gap:8px;padding:8px 14px 8px 34px!important;justify-content:space-between;text-align:left;& svg{& path{stroke:", theme.colors.greyDarker, ";stroke-width:1.4px;}}" + ( true ? "" : 0),  true ? "" : 0),
       onClick: () => onPanelClick?.(dashboard, panel),
@@ -1290,6 +1364,75 @@ const ExternalPanelList = ({
     }, panel.id))
   });
 };
+const DashboardAccordionItem = ({
+  dashboard,
+  search,
+  onPanelClick,
+  ...accordionProps
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    panelRegistry
+  } = useInfraDashContext();
+  const panelsQuery = useGrafanaPanels(dashboard.id);
+  const loadedPanels = panelsQuery.data ?? [];
+  const availablePanels = loadedPanels.filter(panel => {
+    if (!panel.panelSchema?.type) {
+      return false;
+    }
+    if (search && !panel.title.toLowerCase().includes(search.toLowerCase())) {
+      return false;
+    }
+    const availableComponents = panelRegistry.findPanelConfigsByType(panel.panelSchema.type);
+    return availableComponents.length > 0;
+  });
+  if (search && panelsQuery.isLoaded && !availablePanels.length) {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Accordion, {
+    id: dashboard.id,
+    title: dashboard.title,
+    className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+      name: "2zzvc7",
+      styles: "padding:0!important;align-items:start!important"
+    } : 0),
+    renderTitle: ({
+      title,
+      isOpened,
+      onClick
+    }) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
+      onClick: onClick,
+      variant: "tertiary",
+      className: /*#__PURE__*/(0,css_namespaceObject.css)("width:100%;min-height:34px;gap:8px;padding:8px 14px!important;text-align:left;& svg{& path{stroke:", theme.colors.greyDarker, ";stroke-width:1.4px;}}" + ( true ? "" : 0),  true ? "" : 0),
+      startIcon: isOpened ? (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
+        name: "carrot-down",
+        size: 12
+      }) : (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
+        name: "carrot-right",
+        size: 12
+      }),
+      children: title
+    }),
+    renderContent: ({
+      isOpened
+    }) => (0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        width: '100%',
+        display: isOpened ? 'block' : 'none',
+        fontWeight: 500,
+        fontSize: '14px'
+      },  true ? "" : 0,  true ? "" : 0),
+      children: (0,jsx_runtime_namespaceObject.jsx)(ExternalPanelList, {
+        panels: availablePanels,
+        isLoaded: panelsQuery.isLoaded,
+        error: panelsQuery.error,
+        dashboard: dashboard,
+        onPanelClick: onPanelClick
+      })
+    }),
+    ...accordionProps
+  }, dashboard.id);
+};
 var _ref4 =  true ? {
   name: "67cb9k",
   styles: "justify-content:center;height:100%"
@@ -1303,14 +1446,19 @@ var _ref6 =  true ? {
   styles: "justify-content:center;height:100%"
 } : 0;
 var _ref7 =  true ? {
-  name: "1qmr6ab",
-  styles: "overflow:auto"
+  name: "1d0nbku",
+  styles: "margin-top:24px"
+} : 0;
+var _ref8 =  true ? {
+  name: "1yghct1",
+  styles: "overflow:auto;width:100%"
 } : 0;
 const ExternalDashboardsList = ({
   onPanelClick,
   ...divProps
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
+  const [search, setSearch] = (0,external_react_namespaceObject.useState)('');
   const dashboardsQuery = useGrafanaDashboards();
   if (!dashboardsQuery.isLoaded) {
     return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Wrapper, {
@@ -1355,51 +1503,30 @@ const ExternalDashboardsList = ({
       })]
     });
   }
-  return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.AccordionGroupContextProvider, {
-    children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.AccordionGroup, {
-      size: "small",
-      css: _ref7,
-      ...divProps,
-      children: dashboardsQuery.data.map(dashboard => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Accordion, {
-        id: dashboard.id,
-        title: dashboard.title,
-        className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-          name: "2zzvc7",
-          styles: "padding:0!important;align-items:start!important"
-        } : 0),
-        renderTitle: ({
-          title,
-          isOpened,
-          onClick
-        }) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
-          onClick: onClick,
-          variant: "tertiary",
-          className: /*#__PURE__*/(0,css_namespaceObject.css)("width:100%;min-height:34px;gap:8px;padding:8px 14px!important;text-align:left;& svg{& path{stroke:", theme.colors.greyDarker, ";stroke-width:1.4px;}}" + ( true ? "" : 0),  true ? "" : 0),
-          startIcon: isOpened ? (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
-            name: "carrot-down",
-            size: 12
-          }) : (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
-            name: "carrot-right",
-            size: 12
-          }),
-          children: title
-        }),
-        renderContent: ({
-          isOpened
-        }) => (0,jsx_runtime_namespaceObject.jsx)("div", {
-          css: /*#__PURE__*/(0,react_namespaceObject.css)({
-            width: '100%',
-            display: isOpened ? 'block' : 'none',
-            fontWeight: 500,
-            fontSize: '14px'
-          },  true ? "" : 0,  true ? "" : 0),
-          children: (0,jsx_runtime_namespaceObject.jsx)(ExternalPanelList, {
-            dashboard: dashboard,
-            onPanelClick: onPanelClick
-          })
-        })
-      }, dashboard.id))
-    })
+  return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+    children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Input, {
+      name: "panel-search",
+      placeholder: "Search...",
+      inputProps: {
+        value: search,
+        onChange: e => setSearch(e.target.value)
+      },
+      css: _ref7
+    }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.AccordionGroupContextProvider, {
+      children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.AccordionGroup, {
+        size: "small",
+        css: _ref8,
+        ...divProps,
+        children: dashboardsQuery.data.map(dashboard => (0,jsx_runtime_namespaceObject.jsx)(DashboardAccordionItem
+        // id is required by AccordionGroup logic
+        , {
+          id: dashboard.id,
+          dashboard: dashboard,
+          search: search,
+          onPanelClick: onPanelClick
+        }, dashboard.id))
+      })
+    })]
   });
 };
 ;// ./src/widgets/DashboardEditor/helpers.ts
@@ -1428,13 +1555,13 @@ const appendPanel = params => {
       const newPanel = {
         id: -Date.now(),
         // use a negative ID to indicate a new panel
+        source: {
+          type: 'grafana',
+          dashboardUid: grafanaDashboard.id,
+          panelId: grafanaPanel.id
+        },
         panelDefinition: {
           version: 1,
-          source: {
-            type: 'grafana',
-            dashboardUid: grafanaDashboard.id,
-            panelId: grafanaPanel.id
-          },
           component: {
             id: defaultComponentConfig.componentId,
             props: {}
@@ -1489,20 +1616,36 @@ const applyNewLayout = ({
 }) => {
   const newLayoutMap = newLayout.reduce((map, {
     i,
-    ...layout
+    x,
+    y,
+    w,
+    h
   }) => ({
     ...map,
-    [i]: layout
-  }), {});
-  dashboard.panels.forEach(panel => {
-    const newGridPos = newLayoutMap[panel.id.toString()];
-    if (!newGridPos) {
-      throw new Error(`New position for the ${panel.id} not fount`);
+    [i]: {
+      x,
+      y,
+      w,
+      h
     }
-    panel.panelDefinition.gridPos = newGridPos;
-    return panel;
-  });
-  return dashboard;
+  }), {});
+  const newDashboard = {
+    ...dashboard,
+    panels: dashboard.panels.map(panel => {
+      const newGridPos = newLayoutMap[panel.id.toString()];
+      if (!newGridPos) {
+        throw new Error(`New position for the panel ${panel.id} not found`);
+      }
+      return {
+        ...panel,
+        panelDefinition: {
+          ...panel.panelDefinition,
+          gridPos: newGridPos
+        }
+      };
+    })
+  };
+  return newDashboard;
 };
 ;// ./src/widgets/DashboardEditor/components/PanelControl.tsx
 function PanelControl_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -1563,10 +1706,15 @@ const PanelControlContent = ({
     })]
   });
 };
+var PanelControl_ref3 =  true ? {
+  name: "1jyo0em",
+  styles: "margin-right:5px;margin-top:5px"
+} : 0;
 const PanelControl = props => {
   return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Popover, {
     children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.PopoverTrigger, {
       variant: "tertiary",
+      css: PanelControl_ref3,
       children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
         name: "more-vertical",
         size: 14
@@ -1716,6 +1864,7 @@ function DashboardEditor_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tri
 
 
 
+
 var DashboardEditor_ref =  true ? {
   name: "1st9kbp",
   styles: "height:100%;position:relative"
@@ -1744,7 +1893,7 @@ var DashboardEditor_ref7 =  true ? {
   name: "1lsto0t",
   styles: "max-width:250px"
 } : 0;
-var _ref8 =  true ? {
+var DashboardEditor_ref8 =  true ? {
   name: "1yxfaqj",
   styles: "height:46px"
 } : 0;
@@ -1784,6 +1933,7 @@ const DashboardEditorInternal = ({
       },
       id: -1,
       panels: [],
+      published: false,
       title: 'New Dashboard'
     },
     onChange
@@ -1840,12 +1990,7 @@ const DashboardEditorInternal = ({
     if (dashboard.id > 0) {
       updateDashboard(dashboard).then(() => onSaved?.(dashboard)).catch(error => onError?.(error));
     } else {
-      createDashboard({
-        panels: dashboard.panels,
-        dashboardDefinition: dashboard.dashboardDefinition,
-        title: dashboard.title,
-        dashboardUid: dashboard.id.toString()
-      }).then(() => onCreate?.()).catch(error => onError?.(error));
+      createDashboard(dashboard).then(() => onCreate?.()).catch(error => onError?.(error));
     }
   };
   const selectedPanel = selectedPanelId !== null ? dashboard.panels.find(p => p.id === selectedPanelId) : null;
@@ -1885,9 +2030,16 @@ const DashboardEditorInternal = ({
             })
           },
           css: DashboardEditor_ref7
-        }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
+        }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Checkbox, {
+          text: "Publish",
+          initialState: dashboard.published,
+          onChange: published => setDashboard({
+            ...dashboard,
+            published
+          })
+        }), (0,jsx_runtime_namespaceObject.jsx)(PeriodSelector, {}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
           variant: "info",
-          css: _ref8,
+          css: DashboardEditor_ref8,
           isDisabled: cannotPersist,
           onClick: handlePersistDashboard,
           children: dashboard.id > 0 ? 'Save' : 'Create'
@@ -1928,15 +2080,26 @@ const DashboardEditor = ({
   const dashboardById = useDashboard(dashboardId ?? -1, {
     enabled: !!dashboardId && !dashboard && !defaultDashboard
   });
-  if (!dashboardId) {
-    return (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
-      fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
-        children: "Something went wrong"
-      }),
-      children: (0,jsx_runtime_namespaceObject.jsx)(DashboardEditorInternal, {
-        ...props
+  const DashboardWrapper = editorProps => {
+    const panelDataPeriod = useInfraDashPanelDataPeriod({
+      ...props
+    });
+    return (0,jsx_runtime_namespaceObject.jsx)(InfraDashPanelDataPeriodProvider, {
+      value: panelDataPeriod,
+      children: (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
+        fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
+          children: "Something went wrong"
+        }),
+        children: (0,jsx_runtime_namespaceObject.jsx)(DashboardEditorInternal, {
+          ...editorProps
+        })
       })
     });
+  };
+  if (!dashboardId) {
+    return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
+      ...props
+    });
   }
   if (!dashboardById.isLoaded) {
     return (0,jsx_runtime_namespaceObject.jsx)(LoadingDashboard, {});
@@ -1944,14 +2107,9 @@ const DashboardEditor = ({
   if (dashboardById.error) {
     return (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {});
   }
-  return (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
-    fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
-      children: "Something went wrong"
-    }),
-    children: (0,jsx_runtime_namespaceObject.jsx)(DashboardEditorInternal, {
-      ...props,
-      defaultDashboard: dashboardById.data
-    })
+  return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
+    ...props,
+    defaultDashboard: dashboardById.data
   });
 };
 ;// ./src/widgets/DashboardEditor/index.ts
@@ -2023,23 +2181,24 @@ class RestInfraDashTransport {
   }
   async getGrafanaPanelData({
     dashboardUid,
-    panelId
+    panelId,
+    period
   }, signal) {
-    const request = new Request(this.getUrl(`/grafana/dashboards/${dashboardUid}/panel/${panelId}`), {
+    const request = new Request(this.getUrl(`/grafana/dashboards/${dashboardUid}/panel/${panelId}?period=${period ?? 0}`), {
       method: 'POST',
       signal
     });
     return await this.makeRequest(request);
   }
-  async getPanelData(panelId, signal) {
-    const request = new Request(this.getUrl(`/dashboards/panels/${panelId}`), {
-      method: 'POST',
+  async getDashboards(signal) {
+    const request = new Request(this.getUrl(`/dashboards`), {
+      method: 'GET',
       signal
     });
     return await this.makeRequest(request);
   }
-  async getDashboards(signal) {
-    const request = new Request(this.getUrl(`/dashboards`), {
+  async getPublishedDashboards(signal) {
+    const request = new Request(this.getUrl(`/dashboards/published`), {
       method: 'GET',
       signal
     });
@@ -2090,6 +2249,8 @@ class RestInfraDashTransport {
 
 
 
+;// ./src/components/PeriodSelector/index.ts
+
 ;// ./src/shared/query/query.ts
 
 class QueryEntry {
@@ -2117,6 +2278,9 @@ class QueryEntry {
       }
     });
   }
+  isActive() {
+    return this.subscribers.size && this.options.enabled;
+  }
   updateEntity(fetcher, options) {
     this.fetcher = fetcher;
     this.options = {
@@ -2243,10 +2407,17 @@ class QueryClient {
   invalidateQueries({
     key,
     exact,
-    reset
+    reset,
+    type = 'all'
   }) {
     const matchingEntries = [];
     for (const [hash, entry] of this.cache.entries()) {
+      if (type !== 'all') {
+        const active = entry.isActive();
+        if (type === 'active' && !active || type === 'inactive' && active) {
+          continue; // skip entries that don't match the type
+        }
+      }
       if (exact) {
         if (hash === hashKey(key)) {
           matchingEntries.push(entry);
@@ -2462,10 +2633,17 @@ const LoadingPanel = ({
 
 
 
+
 const usePanelData = (panel, options = {}) => {
   const _transport = useTransport(options?.transport);
-  const panelSource = panel.panelDefinition.source;
-  const result = useQuery(['panel-data', panelSource], async signal => {
+  const {
+    period
+  } = useInfraDashPanelDataPeriodContext();
+  const panelSource = panel.source;
+  const result = useQuery(['panel-data', {
+    panelSource,
+    period
+  }], async signal => {
     if (panelSource.type === PANEL_DATA_SOURCE.GRAFANA) {
       const {
         dashboardUid,
@@ -2473,7 +2651,8 @@ const usePanelData = (panel, options = {}) => {
       } = panelSource;
       const data = await _transport.getGrafanaPanelData({
         dashboardUid,
-        panelId
+        panelId,
+        period
       }, signal);
       return {
         source: PANEL_DATA_SOURCE.GRAFANA,
@@ -2580,7 +2759,8 @@ const grafanaDataAdapter = ({
 const TimeseriesPanel = ({
   panel,
   panelData,
-  title: providedTitle
+  title: providedTitle,
+  xAxisHoverFormat
 }) => {
   const {
     ref,
@@ -2618,7 +2798,8 @@ const TimeseriesPanel = ({
           r: 50
         },
         xaxis: {
-          tickmode: 'auto'
+          tickmode: 'auto',
+          hoverformat: xAxisHoverFormat
         },
         yaxis2: {
           ticksuffix: valueSuffix,
@@ -2641,6 +2822,11 @@ const panelConfig = {
       title: {
         type: 'string',
         title: 'Panel Title'
+      },
+      xAxisHoverFormat: {
+        type: 'string',
+        title: 'X Axis Hover Format',
+        default: '%H:%M, %d %b'
       }
     }
   },
@@ -2648,6 +2834,10 @@ const panelConfig = {
     title: {
       'ui:help': 'Override the default panel title',
       'ui:placeholder': 'Panel Title'
+    },
+    xAxisHoverFormat: {
+      'ui:help': 'Format for the x-axis hover tooltip',
+      'ui:placeholder': 'X Axis Hover Format (e.g., %H:%M, %d %b)'
     }
   }
 };
@@ -2964,6 +3154,7 @@ const InfraDashProvider = ({
 
 
 
+
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;