@perses-dev/dashboards 0.37.2 → 0.39.0

package/dist/cjs/components/Dashboard/Dashboard.js

@@ -24,7 +24,7 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _gridLayout = require("../GridLayout");
 const _emptyDashboard = require("../EmptyDashboard");
-function Dashboard({ emptyDashboardProps , ...boxProps }) {
+function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
     const panelGroupIds = (0, _context.usePanelGroupIds)();
     const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
@@ -46,7 +46,8 @@ function Dashboard({ emptyDashboardProps , ...boxProps }) {
                     })
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridLayout.GridLayout, {
-                        panelGroupId: panelGroupId
+                        panelGroupId: panelGroupId,
+                        panelOptions: panelOptions
                     }, panelGroupId))
             ]
         })

package/dist/cjs/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js

@@ -14,62 +14,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "DiscardChangesConfirmationDialog", {
+Object.defineProperty(exports, "DashboardDiscardChangesConfirmationDialog", {
     enumerable: true,
-    get: ()=>DiscardChangesConfirmationDialog
+    get: ()=>DashboardDiscardChangesConfirmationDialog
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _components = require("@perses-dev/components");
 const _context = require("../../context");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const DiscardChangesConfirmationDialog = ()=>{
+const DashboardDiscardChangesConfirmationDialog = ()=>{
     const { discardChangesConfirmationDialog: dialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
-    const isOpen = dialog !== undefined;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Dialog, {
-        open: isOpen,
-        children: dialog !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
-                    children: "Discard Changes"
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                    "aria-label": "Close",
-                    onClick: dialog.onCancel,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
-                    dividers: true,
-                    sx: {
-                        width: '500px'
-                    },
-                    children: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                            variant: "contained",
-                            onClick: dialog.onDiscardChanges,
-                            children: "Discard Changes"
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                            variant: "outlined",
-                            color: "secondary",
-                            onClick: dialog.onCancel,
-                            children: "Cancel"
-                        })
-                    ]
-                })
-            ]
-        })
+    if (dialog === undefined) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+        description: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.',
+        isOpen: true,
+        onCancel: dialog.onCancel,
+        onDiscardChanges: dialog.onDiscardChanges
     });
 };

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -54,7 +54,9 @@ function GridItemContent(props) {
         },
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
             definition: panelDefinition,
-            editHandlers: editHandlers
+            editHandlers: editHandlers,
+            panelOptions: props.panelOptions,
+            panelGroupItemId: panelGroupItemId
         })
     });
 }

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -105,6 +105,7 @@ function GridLayout(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
+                                    panelOptions: props.panelOptions,
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i

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

@@ -32,7 +32,8 @@ function _interopRequireDefault(obj) {
     };
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    var ref;
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , panelGroupItemId , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -50,7 +51,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         width,
         height
     ]);
-    const { ref , inView  } = (0, _reactIntersectionObserver.useInView)({
+    const { ref: ref1 , inView  } = (0, _reactIntersectionObserver.useInView)({
         threshold: 0.3,
         initialInView: false,
         triggerOnce: true
@@ -63,7 +64,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Card, {
-        ref: ref,
+        ref: ref1,
         component: "section",
         sx: (0, _components.combineSx)({
             width: '100%',
@@ -80,6 +81,10 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         ...others,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {
+                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (ref = panelOptions.extra) === null || ref === void 0 ? void 0 : ref.call(panelOptions, {
+                    panelDefinition: definition,
+                    panelGroupItemId
+                }),
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,

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

@@ -33,7 +33,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
+function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , extra , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
@@ -140,11 +140,15 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
                 })
             ]
         }),
-        action: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderActionWrapper, {
+        action: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(HeaderActionWrapper, {
             direction: "row",
             spacing: 0.25,
             alignItems: "center",
-            children: actions
+            children: [
+                editHandlers === undefined && extra,
+                " ",
+                actions
+            ]
         }),
         sx: (0, _components.combineSx)((theme)=>({
                 padding: theme.spacing(1),

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -34,7 +34,9 @@ const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
     const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = (0, _context.useSaveChangesConfirmationDialog)();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
-        // Save dashboard if active timeRange from plugin-system is relative and different than currently saved
+        // Save dashboard
+        // - if active timeRange from plugin-system is relative and different from currently saved
+        // - or if the saved variables are different from currently saved
         if (isSavedDurationModified || isSavedVariableModified) {
             openSaveChangesConfirmationDialog({
                 onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{

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

@@ -34,6 +34,7 @@ function _interopRequireDefault(obj) {
 function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
+    const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
     const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
@@ -70,6 +71,7 @@ function EditVariablesButton({ variant ='text' , label ='Variables' , color ='pr
                 "data-testid": "variable-editor",
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
                     variableDefinitions: variableDefinitions,
+                    externalVariableDefinitions: externalVariableDefinitions,
                     onCancel: closeVariableEditor,
                     onChange: (variables)=>{
                         setVariableDefinitions(variables);

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

@@ -22,20 +22,22 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _variableModel = require("./variable-model");
-function TemplateVariable({ name  }) {
+function TemplateVariable({ name , source  }) {
     var ref;
-    const ctx = (0, _context.useTemplateVariable)(name);
+    const ctx = (0, _context.useTemplateVariable)(name, source);
     const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
     switch(kind){
         case 'TextVariable':
             return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TextVariable, {
-                name: name
+                name: name,
+                source: source
             });
         case 'ListVariable':
             return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ListVariable, {
-                name: name
+                name: name,
+                source: source
             });
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
@@ -45,26 +47,27 @@ function TemplateVariable({ name  }) {
         ]
     });
 }
-function ListVariable({ name  }) {
+function ListVariable({ name , source  }) {
     var ref, ref1, ref2, ref3;
-    const ctx = (0, _context.useTemplateVariable)(name);
+    const ctx = (0, _context.useTemplateVariable)(name, source);
     const definition = ctx.definition;
-    const variablesOptionsQuery = (0, _variableModel.useListVariablePluginValues)(definition);
+    const variablesOptionsQuery = (0, _pluginSystem.useListVariablePluginValues)(definition);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
     var ref4;
     const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
     (0, _react.useEffect)(()=>{
-        setVariableLoading(name, variablesOptionsQuery.isFetching);
+        setVariableLoading(name, variablesOptionsQuery.isFetching, source);
         if (variablesOptionsQuery.data) {
-            setVariableOptions(name, variablesOptionsQuery.data);
+            setVariableOptions(name, variablesOptionsQuery.data, source);
         }
     }, [
         variablesOptionsQuery,
         name,
         setVariableLoading,
-        setVariableOptions
+        setVariableOptions,
+        source
     ]);
     let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
     const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
@@ -112,14 +115,15 @@ function ListVariable({ name  }) {
         const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
         // If there is no value but there are options, set the value to the first option.
         if (!value && firstOption) {
-            setVariableValue(name, firstOption.value);
+            setVariableValue(name, firstOption.value, source);
         }
     }, [
         finalOptions,
         setVariableValue,
         value,
         name,
-        allowMultiple
+        allowMultiple,
+        source
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         display: 'flex',
@@ -142,11 +146,11 @@ function ListVariable({ name  }) {
                         // Must be selected
                         if (e.target.value === null || e.target.value.length === 0) {
                             if (allowAllValue) {
-                                setVariableValue(name, _core.DEFAULT_ALL_VALUE);
+                                setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
                             }
                             return;
                         }
-                        setVariableValue(name, e.target.value);
+                        setVariableValue(name, e.target.value, source);
                     },
                     multiple: allowMultiple,
                     children: [
@@ -171,9 +175,9 @@ function ListVariable({ name  }) {
         })
     });
 }
-function TextVariable({ name  }) {
+function TextVariable({ name , source  }) {
     var ref;
-    const { state , definition  } = (0, _context.useTemplateVariable)(name);
+    const { state , definition  } = (0, _context.useTemplateVariable)(name, source);
     var ref1;
     const [tempValue, setTempValue] = (0, _react.useState)((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
     const { setVariableValue  } = (0, _context.useTemplateVariableActions)();
@@ -187,7 +191,7 @@ function TextVariable({ name  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
         value: tempValue,
         onChange: (e)=>setTempValue(e.target.value),
-        onBlur: ()=>setVariableValue(name, tempValue),
+        onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
         label: (ref2 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : name
     });