@perses-dev/dashboards 0.0.0-snapshot-explorer-plugin-c4a7621 → 0.0.0-snapshot-profile-8090608

package/dist/cjs/components/Panel/PanelContent.js

@@ -22,14 +22,16 @@ Object.defineProperty(exports, "PanelContent", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
+const _PanelPluginLoader = require("./PanelPluginLoader");
 function PanelContent(props) {
-    const { panelPluginKind, contentDimensions, definition, ...others } = props;
-    const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
+    const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;
+    const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
         throwOnError: true
     });
-    const PanelComponent = plugin?.PanelComponent;
-    if (isLoading) {
+    // Show fullsize skeleton if the panel plugin is loading.
+    if (isPanelLoading) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
             variant: "rectangular",
             width: contentDimensions?.width,
@@ -37,12 +39,56 @@ function PanelContent(props) {
             "aria-label": "Loading..."
         });
     }
-    if (PanelComponent === undefined) {
-        throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
+    // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).
+    // Loading indicator or errors of other queries are shown in the panel header.
+    const queryResultsWithData = queryResults.flatMap((q)=>q.data ? [
+            {
+                data: q.data,
+                definition: q.definition
+            }
+        ] : []);
+    if (queryResultsWithData.length > 0 || queryResults.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPluginLoader.PanelPluginLoader, {
+            kind: panelPluginKind,
+            spec: spec,
+            contentDimensions: contentDimensions,
+            definition: definition,
+            queryResults: queryResultsWithData
+        });
+    }
+    // No query has data, show loading overlay if any query is fetching data.
+    if (queryResults.some((q)=>q.isFetching)) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelLoading, {
+            plugin: plugin,
+            spec: spec,
+            definition: definition,
+            contentDimensions: contentDimensions
+        });
+    }
+    // No query has data or is loading, show the error if any query has an error.
+    // The error will be catched in <ErrorBoundary> of <Panel>.
+    const queryError = queryResults.find((q)=>q.error);
+    if (queryError) {
+        throw queryError.error;
     }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelComponent, {
-        ...others,
-        contentDimensions: contentDimensions,
-        definition: definition
+    // At this point, one or more queries are defined, but no query has data, is loading, or has an error.
+    // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).
+    // Most likely, some query will be enabled later. Render the panel loading skeleton.
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelLoading, {
+        plugin: plugin,
+        spec: spec,
+        definition: definition,
+        contentDimensions: contentDimensions
     });
 }
+function PanelLoading({ plugin, spec, definition, contentDimensions }) {
+    if (plugin?.LoadingComponent) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(plugin.LoadingComponent, {
+            spec: spec,
+            contentDimensions: contentDimensions,
+            definition: definition,
+            queryResults: []
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LoadingOverlay, {});
+}

package/dist/cjs/components/Panel/PanelHeader.js

@@ -24,17 +24,9 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-const _PanelLinks = require("./PanelLinks");
-const _HeaderIconButton = require("./HeaderIconButton");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
@@ -62,39 +54,18 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     },
                     children: title
                 }),
-                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    sx: {
-                        display: editHandlers === undefined ? 'var(--panel-hover, none)' : 'flex'
-                    },
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                        id: descriptionTooltipId,
-                        description: description,
-                        enterDelay: 100,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
-                            "aria-label": "panel description",
-                            size: "small",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
-                                "aria-describedby": "info-tooltip",
-                                "aria-hidden": false,
-                                fontSize: "inherit",
-                                sx: {
-                                    color: (theme)=>theme.palette.text.secondary
-                                }
-                            })
-                        })
-                    })
-                }),
-                links !== undefined && links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelLinks.PanelLinks, {
-                    links: links
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
+                    title: title,
+                    description: description,
+                    descriptionTooltipId: descriptionTooltipId,
+                    links: links,
+                    queryResults: queryResults,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    extra: extra
                 })
             ]
         }),
-        action: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
-            title: title,
-            readHandlers: readHandlers,
-            editHandlers: editHandlers,
-            extra: extra
-        }),
         sx: (0, _components.combineSx)((theme)=>({
                 containerType: 'inline-size',
                 containerName: _constants.HEADER_ACTIONS_CONTAINER_NAME,
@@ -102,13 +73,6 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
                     overflow: 'hidden'
-                },
-                '.MuiCardHeader-action': {
-                    // Overriding the negative margins from MUI's defaults, so we
-                    // can vertically center the icons. Moving these values to a wrapper
-                    // inside the action in `HeaderActionWrapper` below.
-                    // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
-                    margin: 'auto'
                 }
             }), sx),
         ...rest

package/dist/cjs/components/Panel/PanelPluginLoader.js

@@ -0,0 +1,56 @@
+// Copyright 2025 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelPluginLoader", {
+    enumerable: true,
+    get: function() {
+        return PanelPluginLoader;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _material = require("@mui/material");
+function PanelPluginLoader(props) {
+    const { kind, spec, contentDimensions, definition, queryResults } = props;
+    const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', kind, {
+        throwOnError: true
+    });
+    const PanelComponent = plugin?.PanelComponent;
+    const supportedQueryTypes = plugin?.supportedQueryTypes || [];
+    // Show fullsize skeleton if the panel plugin is loading.
+    if (isPanelLoading) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            variant: "rectangular",
+            width: contentDimensions?.width,
+            height: contentDimensions?.height,
+            "aria-label": "Loading..."
+        });
+    }
+    if (PanelComponent === undefined) {
+        throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);
+    }
+    for (const queryResult of queryResults){
+        if (!supportedQueryTypes.includes(queryResult.definition.kind)) {
+            throw new Error(`This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`);
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelComponent, {
+        spec: spec,
+        contentDimensions: contentDimensions,
+        definition: definition,
+        queryResults: queryResults
+    });
+}

package/dist/cjs/components/Panel/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./Panel"), exports);
+_export_star(require("./PanelPluginLoader"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -44,6 +44,12 @@ function PanelEditorForm(props) {
     const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
+    const { panelEditorSchema } = (0, _pluginsystem.useValidationSchemas)();
+    const form = (0, _reacthookform.useForm)({
+        resolver: (0, _zod.zodResolver)(panelEditorSchema),
+        mode: 'onBlur',
+        defaultValues: initialValues
+    });
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
         pluginTypes: [
@@ -72,12 +78,6 @@ function PanelEditorForm(props) {
     });
     const titleAction = (0, _pluginsystem.getTitleAction)(initialAction, true);
     const submitText = (0, _pluginsystem.getSubmitText)(initialAction, true);
-    const { panelEditorSchema } = (0, _pluginsystem.useValidationSchemas)();
-    const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(panelEditorSchema),
-        mode: 'onBlur',
-        defaultValues: initialValues
-    });
     const links = (0, _reacthookform.useWatch)({
         control: form.control,
         name: 'panelDefinition.spec.links'
@@ -111,6 +111,18 @@ function PanelEditorForm(props) {
         }
         setPanelDefinition(nextPanelDef);
     };
+    const watchedName = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.display.name'
+    });
+    const watchedDescription = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.display.description'
+    });
+    const watchedPluginKind = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.plugin.kind'
+    });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -174,7 +186,7 @@ function PanelEditorForm(props) {
                                         label: "Name",
                                         error: !!fieldState.error,
                                         helperText: fieldState.error?.message,
-                                        value: field.value ?? '',
+                                        value: watchedName ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
@@ -218,7 +230,7 @@ function PanelEditorForm(props) {
                                         label: "Description",
                                         error: !!fieldState.error,
                                         helperText: fieldState.error?.message,
-                                        value: field.value ?? '',
+                                        value: watchedDescription ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
@@ -245,7 +257,7 @@ function PanelEditorForm(props) {
                                         helperText: pluginEditor.error?.message ?? fieldState.error?.message,
                                         value: {
                                             type: 'Panel',
-                                            kind: field.value
+                                            kind: watchedPluginKind
                                         },
                                         onChange: (event)=>{
                                             field.onChange(event.kind);

package/dist/cjs/components/Variables/Variable.js

@@ -209,6 +209,8 @@ function ListVariable({ name, source }) {
     const { setVariableValue, setVariableLoading, setVariableOptions } = (0, _context.useVariableDefinitionActions)();
     const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition?.spec, ctx.state, variablesOptionsQuery);
     const [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_VARIABLE_WIDTH);
+    // Used for multiple value variables, it will not clear variable input when selecting an option
+    const [inputValue, setInputValue] = (0, _react.useState)('');
     const title = definition?.spec.display?.name ?? name;
     const allowMultiple = definition?.spec.allowMultiple === true;
     const allowAllValue = definition?.spec.allowAllValue === true;
@@ -259,7 +261,8 @@ function ListVariable({ name, source }) {
                 renderInput: (params)=>{
                     return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
-                        label: title
+                        label: title,
+                        onChange: (e)=>setInputValue(e.target.value)
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
                         label: title,
@@ -284,11 +287,17 @@ function ListVariable({ name, source }) {
                         setVariableValue(name, variableOptionToVariableValue(value), source);
                     }
                 },
+                inputValue: allowMultiple ? inputValue : undefined,
                 onInputChange: (_, newInputValue)=>{
                     if (!allowMultiple) {
                         setInputWidth(getWidthPx(newInputValue, 'list'));
                     }
                 },
+                onBlur: ()=>{
+                    if (allowMultiple) {
+                        setInputValue('');
+                    }
+                },
                 options: viewOptions
             }),
             loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})

package/dist/cjs/constants/styles.js

@@ -24,8 +24,11 @@ _export(exports, {
     HEADER_ACTIONS_CONTAINER_NAME: function() {
         return HEADER_ACTIONS_CONTAINER_NAME;
     },
-    HEADER_ACTIONS_MIN_WIDTH: function() {
-        return HEADER_ACTIONS_MIN_WIDTH;
+    HEADER_MEDIUM_WIDTH: function() {
+        return HEADER_MEDIUM_WIDTH;
+    },
+    HEADER_SMALL_WIDTH: function() {
+        return HEADER_SMALL_WIDTH;
     },
     MAX_VARIABLE_WIDTH: function() {
         return MAX_VARIABLE_WIDTH;
@@ -46,5 +49,6 @@ const editButtonStyle = {
 };
 const MIN_VARIABLE_WIDTH = 120;
 const MAX_VARIABLE_WIDTH = 500;
-const HEADER_ACTIONS_MIN_WIDTH = 200;
+const HEADER_SMALL_WIDTH = 170;
+const HEADER_MEDIUM_WIDTH = 220;
 const HEADER_ACTIONS_CONTAINER_NAME = 'header-actions-container';

package/dist/cjs/constants/user-interface-text.js

@@ -32,7 +32,6 @@ const TOOLTIP_TEXT = {
     // Toolbar buttons
     addPanel: 'Add panel',
     addGroup: 'Add panel group',
-    downloadDashboard: 'Download JSON',
     editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
     editVariables: 'Edit variables',
@@ -65,6 +64,6 @@ const ARIA_LABEL_TEXT = {
     editPanel: (panelName)=>`edit panel ${panelName}`,
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
-    showPanelActions: (panelName)=>`show panel actions for ${panelName} `,
+    showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
     movePanel: (panelName)=>`move panel ${panelName}`
 };

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -71,6 +71,9 @@ _export(exports, {
     },
     useViewPanel: function() {
         return useViewPanel;
+    },
+    useViewPanelGroup: function() {
+        return useViewPanelGroup;
     }
 });
 const _react = require("react");
@@ -230,10 +233,18 @@ const selectDashboardDuration = (state)=>state.duration;
 function useDashboardDuration() {
     return (0, _DashboardProvider.useDashboardStore)(selectDashboardDuration);
 }
-const selectViewPanel = (state)=>state.getViewPanel();
+const selectViewPanel = (state)=>({
+        setViewPanel: state.setViewPanel,
+        getViewPanel: state.getViewPanel,
+        viewPanelId: state.getViewPanel()
+    });
 function useViewPanel() {
     return (0, _DashboardProvider.useDashboardStore)(selectViewPanel);
 }
+const selectViewPanelGroup = (state)=>state.getViewPanel();
+function useViewPanelGroup() {
+    return (0, _DashboardProvider.useDashboardStore)(selectViewPanelGroup);
+}
 const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog, openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog })=>({
         saveChangesConfirmationDialog,
         openSaveChangesConfirmationDialog,

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -52,17 +52,13 @@ const _zustand = require("zustand");
 const _traditional = require("zustand/traditional");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
-const _immer1 = /*#__PURE__*/ _interop_require_default(require("immer"));
+const _shallow = require("zustand/shallow");
+const _immer1 = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
 const _queryparams = require("./query-params");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 /**
  * Context object for {@link VariableDefinitionStore}.
  */ const VariableDefinitionStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
@@ -125,7 +121,7 @@ function useVariableDefinitionAndState(name, source) {
 }
 function useVariableDefinitionActions() {
     const store = useVariableDefinitionStoreCtx();
-    return (0, _zustand.useStore)(store, (s)=>{
+    return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
         return {
             setVariableValue: s.setVariableValue,
             setVariableLoading: s.setVariableLoading,
@@ -134,7 +130,7 @@ function useVariableDefinitionActions() {
             setVariableDefaultValues: s.setVariableDefaultValues,
             getSavedVariablesStatus: s.getSavedVariablesStatus
         };
-    });
+    }, _shallow.shallow);
 }
 function useVariableDefinitions() {
     const store = useVariableDefinitionStoreCtx();
@@ -326,7 +322,7 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
             setVariableDefaultValues: ()=>{
                 const variableDefinitions = get().variableDefinitions;
                 const variableState = get().variableState;
-                const updatedVariables = (0, _immer1.default)(variableDefinitions, (draft)=>{
+                const updatedVariables = (0, _immer1.produce)(variableDefinitions, (draft)=>{
                     draft.forEach((variable, index)=>{
                         const name = variable.spec.name;
                         if (variable.kind === 'ListVariable') {
@@ -336,7 +332,7 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                             if (currentVariable?.value !== undefined) {
                                 draft[index] = {
                                     kind: 'ListVariable',
-                                    spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
+                                    spec: (0, _immer1.produce)(variable.spec, (specDraft)=>{
                                         specDraft.defaultValue = currentVariable.value;
                                     })
                                 };
@@ -349,7 +345,7 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                             if (currentVariable?.value !== undefined) {
                                 draft[index] = {
                                     kind: 'TextVariable',
-                                    spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
+                                    spec: (0, _immer1.produce)(variable.spec, (specDraft)=>{
                                         specDraft.value = currentVariableValue;
                                     })
                                 };
@@ -369,10 +365,10 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
     return store; // TODO: @Gladorme check if we can avoid this cast
 }
 function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
-    const [store] = (0, _react.useState)(createVariableDefinitionStore({
-        initialVariableDefinitions,
-        externalVariableDefinitions
-    }));
+    const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({
+            initialVariableDefinitions,
+            externalVariableDefinitions
+        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
@@ -384,11 +380,11 @@ function VariableProvider({ children, initialVariableDefinitions = [], externalV
 function VariableProviderWithQueryParams({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions: builtinVariables = [] }) {
     const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
     const queryParams = (0, _queryparams.useVariableQueryParams)(allVariableDefs);
-    const [store] = (0, _react.useState)(createVariableDefinitionStore({
-        initialVariableDefinitions,
-        externalVariableDefinitions,
-        queryParams
-    }));
+    const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({
+            initialVariableDefinitions,
+            externalVariableDefinitions,
+            queryParams
+        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {

package/dist/cjs/test/datasource-provider.js

@@ -32,7 +32,7 @@ _export(exports, {
     }
 });
 const _dashboardprovider = require("./dashboard-provider");
-const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
+const prometheusDemoUrl = 'https://prometheus.demo.prometheus.io';
 const prometheusDemo = {
     kind: 'GlobalDatasource',
     metadata: {

package/dist/cjs/test/plugin-registry.js

@@ -38,7 +38,10 @@ const FakeTimeSeriesPlugin = {
             content: FakeTimeSeriesChartOptionEditor
         }
     ],
-    createInitialOptions: ()=>({})
+    createInitialOptions: ()=>({}),
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ]
 };
 const MOCK_TIME_SERIES_PANEL = {
     kind: 'Panel',

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -28,7 +28,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isCreating } = props;
+    const { dashboardResource, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isCreating } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { isEditMode, setEditMode } = (0, _context.useEditMode)();
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
@@ -81,6 +81,8 @@ const DashboardApp = (props)=>{
                 initialVariableIsSticky: initialVariableIsSticky,
                 onSave: onSave,
                 isReadonly: isReadonly,
+                isVariableEnabled: isVariableEnabled,
+                isDatasourceEnabled: isDatasourceEnabled,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),
@@ -103,6 +105,7 @@ const DashboardApp = (props)=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
                         chartsTheme: chartsTheme,
                         enablePinning: false,
+                        enableSyncGrouping: false,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelDrawer, {})
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelGroupDialog, {}),

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -30,7 +30,7 @@ const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isEditing, isCreating, sx, ...others } = props;
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isEditing, isCreating, sx, ...others } = props;
     const { spec } = dashboardResource;
     const dashboardDuration = spec.duration ?? _core.DEFAULT_DASHBOARD_DURATION;
     const dashboardRefreshInterval = spec.refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
@@ -109,6 +109,8 @@ function ViewDashboard(props) {
                                 onDiscard: onDiscard,
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 isReadonly: isReadonly,
+                                isVariableEnabled: isVariableEnabled,
+                                isDatasourceEnabled: isDatasourceEnabled,
                                 isCreating: isCreating
                             })
                         })

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts

@@ -5,6 +5,8 @@ export interface DashboardToolbarProps {
     dashboardTitleComponent?: JSX.Element;
     initialVariableIsSticky?: boolean;
     isReadonly: boolean;
+    isVariableEnabled: boolean;
+    isDatasourceEnabled: boolean;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
     onSave?: OnSaveDashboard;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YA8F/D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YAgG/D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -25,7 +25,7 @@ import { EditJsonButton } from '../EditJsonButton';
 import { SaveDashboardButton } from '../SaveDashboardButton';
 import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = useEditMode();
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
     const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
@@ -66,8 +66,8 @@ export const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                        /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
+                                        isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                        isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
                                         /*#__PURE__*/ _jsx(AddPanelButton, {}),
                                         /*#__PURE__*/ _jsx(AddGroupButton, {})
                                     ]