@perses-dev/dashboards 0.39.0 → 0.40.1

package/dist/cjs/context/DashboardProvider/duplicate-panel-slice.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createDuplicatePanelSlice", {
     enumerable: true,
-    get: ()=>createDuplicatePanelSlice
+    get: function() {
+        return createDuplicatePanelSlice;
+    }
 });
 const _panelUtils = require("../../utils/panelUtils");
 const _common = require("./common");

package/dist/cjs/context/DashboardProvider/edit-json-dialog-slice.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createEditJsonDialogSlice", {
     enumerable: true,
-    get: ()=>createEditJsonDialogSlice
+    get: function() {
+        return createEditJsonDialogSlice;
+    }
 });
 const createEditJsonDialogSlice = (set)=>({
         openEditJsonDialog () {

package/dist/cjs/context/DashboardProvider/index.js

@@ -14,17 +14,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./common"), exports);
-_exportStar(require("./dashboard-provider-api"), exports);
-_exportStar(require("./DashboardProvider"), exports);
-function _exportStar(from, to) {
+_export_star(require("./common"), exports);
+_export_star(require("./dashboard-provider-api"), exports);
+_export_star(require("./DashboardProvider"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -16,22 +16,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createPanelEditorSlice", {
     enumerable: true,
-    get: ()=>createPanelEditorSlice
+    get: function() {
+        return createPanelEditorSlice;
+    }
 });
 const _panelUtils = require("../../utils/panelUtils");
 const _common = require("./common");
-const _panelGroupSlice = require("./panel-group-slice");
+const _panelgroupslice = require("./panel-group-slice");
 function createPanelEditorSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
     return (set, get)=>{
         return {
             panelEditor: undefined,
             openEditPanel (panelGroupItemId) {
-                var ref;
+                var _panelGroups_panelGroupId;
                 const { panels , panelGroups  } = get();
                 // Figure out the panel key at that location
                 const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
-                const panelKey = (ref = panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+                const panelKey = (_panelGroups_panelGroupId = panelGroups[panelGroupId]) === null || _panelGroups_panelGroupId === void 0 ? void 0 : _panelGroups_panelGroupId.itemPanelKeys[panelGroupLayoutId];
                 if (panelKey === undefined) {
                     throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
                 }
@@ -41,7 +43,7 @@ function createPanelEditorSlice() {
                     throw new Error(`Cannot find Panel with key '${panelKey}'`);
                 }
                 const editorState = {
-                    mode: 'Edit',
+                    mode: 'update',
                     initialValues: {
                         groupId: panelGroupItemId.panelGroupId,
                         panelDefinition: panelToEdit
@@ -94,21 +96,21 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                var ref;
+                var _get_initialValues;
                 // If a panel group isn't supplied, add to the first group or create a group if there aren't any
                 let newGroup = undefined;
                 panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
                 if (panelGroupId === undefined) {
-                    newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup = (0, _panelgroupslice.createEmptyPanelGroup)();
                     newGroup.title = 'Panel Group';
                     panelGroupId = newGroup.id;
                 }
-                var ref1;
+                var _get_initialValues_panelDefinition;
                 const editorState = {
-                    mode: 'Add',
+                    mode: 'create',
                     initialValues: {
                         groupId: panelGroupId,
-                        panelDefinition: (ref1 = (ref = get().initialValues) === null || ref === void 0 ? void 0 : ref.panelDefinition) !== null && ref1 !== void 0 ? ref1 : (0, _common.createPanelDefinition)()
+                        panelDefinition: (_get_initialValues_panelDefinition = (_get_initialValues = get().initialValues) === null || _get_initialValues === void 0 ? void 0 : _get_initialValues.panelDefinition) !== null && _get_initialValues_panelDefinition !== void 0 ? _get_initialValues_panelDefinition : (0, _common.createPanelDefinition)()
                     },
                     applyChanges: (next)=>{
                         const name = next.panelDefinition.spec.display.name;
@@ -141,7 +143,7 @@ function createPanelEditorSlice() {
                 set((state)=>{
                     // Add the new panel group if one was created for the panel
                     if (newGroup !== undefined) {
-                        (0, _panelGroupSlice.addPanelGroup)(state, newGroup);
+                        (0, _panelgroupslice.addPanelGroup)(state, newGroup);
                     }
                     // Open the editor with the new state
                     state.panelEditor = editorState;

package/dist/cjs/context/DashboardProvider/panel-group-editor-slice.js

@@ -16,9 +16,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createPanelGroupEditorSlice", {
     enumerable: true,
-    get: ()=>createPanelGroupEditorSlice
+    get: function() {
+        return createPanelGroupEditorSlice;
+    }
 });
-const _panelGroupSlice = require("./panel-group-slice");
+const _panelgroupslice = require("./panel-group-slice");
 const createPanelGroupEditorSlice = (set, get)=>({
         panelGroupEditor: undefined,
         openAddPanelGroup: ()=>{
@@ -30,11 +32,11 @@ const createPanelGroupEditorSlice = (set, get)=>({
                     isCollapsed: false
                 },
                 applyChanges (next) {
-                    const newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    const newGroup = (0, _panelgroupslice.createEmptyPanelGroup)();
                     newGroup.title = next.title;
                     newGroup.isCollapsed = next.isCollapsed;
                     set((draft)=>{
-                        (0, _panelGroupSlice.addPanelGroup)(draft, newGroup);
+                        (0, _panelgroupslice.addPanelGroup)(draft, newGroup);
                     });
                 },
                 close () {
@@ -53,12 +55,12 @@ const createPanelGroupEditorSlice = (set, get)=>({
             if (existingGroup === undefined) {
                 throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
             }
-            var _title;
+            var _existingGroup_title;
             // Create the editor state
             const editor = {
                 mode: 'Edit',
                 initialValues: {
-                    title: (_title = existingGroup.title) !== null && _title !== void 0 ? _title : '',
+                    title: (_existingGroup_title = existingGroup.title) !== null && _existingGroup_title !== void 0 ? _existingGroup_title : '',
                     isCollapsed: existingGroup.isCollapsed
                 },
                 applyChanges (next) {

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -21,10 +21,18 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    createPanelGroupSlice: ()=>createPanelGroupSlice,
-    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups,
-    createEmptyPanelGroup: ()=>createEmptyPanelGroup,
-    addPanelGroup: ()=>addPanelGroup
+    createPanelGroupSlice: function() {
+        return createPanelGroupSlice;
+    },
+    convertLayoutsToPanelGroups: function() {
+        return convertLayoutsToPanelGroups;
+    },
+    createEmptyPanelGroup: function() {
+        return createEmptyPanelGroup;
+    },
+    addPanelGroup: function() {
+        return addPanelGroup;
+    }
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
@@ -67,7 +75,7 @@ function convertLayoutsToPanelGroups(layouts) {
     const panelGroups = {};
     const panelGroupIdOrder = [];
     for (const layout of layouts){
-        var ref, ref1, ref2;
+        var _layout_spec_display, _layout_spec_display_collapse, _layout_spec_display1;
         const itemLayouts = [];
         const itemPanelKeys = {};
         // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
@@ -86,8 +94,8 @@ function convertLayoutsToPanelGroups(layouts) {
         const panelGroupId = (0, _common.generateId)();
         panelGroups[panelGroupId] = {
             id: panelGroupId,
-            isCollapsed: ((ref = layout.spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) === false,
-            title: (ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : ref2.title,
+            isCollapsed: ((_layout_spec_display = layout.spec.display) === null || _layout_spec_display === void 0 ? void 0 : (_layout_spec_display_collapse = _layout_spec_display.collapse) === null || _layout_spec_display_collapse === void 0 ? void 0 : _layout_spec_display_collapse.open) === false,
+            title: (_layout_spec_display1 = layout.spec.display) === null || _layout_spec_display1 === void 0 ? void 0 : _layout_spec_display1.title,
             itemLayouts,
             itemPanelKeys
         };

package/dist/cjs/context/DashboardProvider/panel-slice.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createPanelSlice", {
     enumerable: true,
-    get: ()=>createPanelSlice
+    get: function() {
+        return createPanelSlice;
+    }
 });
 function createPanelSlice(panels) {
     return ()=>({

package/dist/cjs/context/DashboardProvider/save-changes-dialog-slice.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createSaveChangesDialogSlice", {
     enumerable: true,
-    get: ()=>createSaveChangesDialogSlice
+    get: function() {
+        return createSaveChangesDialogSlice;
+    }
 });
 const createSaveChangesDialogSlice = (set)=>({
         isOpen: false,

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -16,16 +16,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DatasourceStoreProvider", {
     enumerable: true,
-    get: ()=>DatasourceStoreProvider
+    get: function() {
+        return DatasourceStoreProvider;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
     const { dashboardResource , projectName , datasourceApi , onCreate , children  } = props;
     const project = projectName !== null && projectName !== void 0 ? projectName : dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.metadata.project;
-    const { getPlugin , listPluginMetadata  } = (0, _pluginSystem.usePluginRegistry)();
+    const { getPlugin , listPluginMetadata  } = (0, _pluginsystem.usePluginRegistry)();
     const findDatasource = (0, _core.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         if (dashboardResource) {
@@ -33,8 +35,12 @@ function DatasourceStoreProvider(props) {
             const dashboardDatasource = findDashboardDatasource(datasources, selector);
             if (dashboardDatasource !== undefined) {
                 return {
-                    spec: dashboardDatasource,
-                    proxyUrl: undefined
+                    spec: dashboardDatasource.spec,
+                    proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
+                        project: dashboardResource.metadata.project,
+                        dashboard: dashboardResource.metadata.name,
+                        name: dashboardDatasource.name
+                    })
                 };
             }
         }
@@ -43,8 +49,11 @@ function DatasourceStoreProvider(props) {
             const datasource = await datasourceApi.getDatasource(project, selector);
             if (datasource !== undefined) {
                 return {
-                    spec: datasource.resource.spec,
-                    proxyUrl: datasource.proxyUrl
+                    spec: datasource.spec,
+                    proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
+                        project: datasource.metadata.project,
+                        name: datasource.metadata.name
+                    })
                 };
             }
         }
@@ -52,8 +61,10 @@ function DatasourceStoreProvider(props) {
         const globalDatasource = await datasourceApi.getGlobalDatasource(selector);
         if (globalDatasource !== undefined) {
             return {
-                spec: globalDatasource.resource.spec,
-                proxyUrl: globalDatasource.proxyUrl
+                spec: globalDatasource.spec,
+                proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
+                    name: globalDatasource.metadata.name
+                })
             };
         }
         throw new Error(`No datasource found for kind '${selector.kind}' and name '${selector.name}'`);
@@ -85,53 +96,56 @@ function DatasourceStoreProvider(props) {
         getPlugin,
         onCreate
     ]);
-    const listDatasourceMetadata = (0, _core.useEvent)(async (datasourcePluginKind)=>{
+    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginKind)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
             listPluginMetadata('Datasource'),
             project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],
             datasourceApi.listGlobalDatasources(datasourcePluginKind)
         ]);
-        // Find the metadata for the plugin type they asked for so we can use it for the name of the default datasource
+        // Find the metadata for the plugin type they asked for, so we can use it for the name of the default datasource
         const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.kind === datasourcePluginKind);
         if (datasourcePluginMetadata === undefined) {
             throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);
         }
-        // Get helper for de-duping results properly
-        const { results , addResult  } = buildListDatasourceMetadataResults(datasourcePluginMetadata.display.name);
-        // Start with dashboard datasources that have highest precedence
+        // Get helper for computing results properly
+        const { results , addItem  } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.display.name);
+        // Start with dashboard datasources with the highest precedence
         if (dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) {
             for(const selectorName in dashboardResource.spec.datasources){
                 const spec = dashboardResource.spec.datasources[selectorName];
                 if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;
-                addResult(spec, selectorName);
+                addItem(spec, selectorName, 'dashboard');
             }
         }
         // Now look at project-level datasources
         for (const datasource of datasources){
-            const selectorName1 = datasource.metadata.name;
-            addResult(datasource.spec, selectorName1);
+            const selectorName = datasource.metadata.name;
+            addItem(datasource.spec, selectorName, 'project', `/projects/${project}/datasources`);
         }
         // And finally global datasources
         for (const globalDatasource of globalDatasources){
-            const selectorName2 = globalDatasource.metadata.name;
-            addResult(globalDatasource.spec, selectorName2);
+            const selectorName = globalDatasource.metadata.name;
+            addItem(globalDatasource.spec, selectorName, 'global', '/admin/datasources');
         }
         return results;
     });
     const ctxValue = (0, _react.useMemo)(()=>({
             getDatasource,
             getDatasourceClient,
-            listDatasourceMetadata
+            listDatasourceSelectItems
         }), [
         getDatasource,
         getDatasourceClient,
-        listDatasourceMetadata
+        listDatasourceSelectItems
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceStoreContext.Provider, {
         value: ctxValue,
         children: children
     });
 }
+function buildDatasourceProxyUrl(api, params) {
+    return api.buildProxyUrl ? api.buildProxyUrl(params) : '';
+}
 // Helper to find a datasource in the list embedded in a dashboard spec
 function findDashboardDatasource(dashboardDatasources, selector) {
     if (dashboardDatasources === undefined) return undefined;
@@ -139,42 +153,97 @@ function findDashboardDatasource(dashboardDatasources, selector) {
     if (selector.name !== undefined) {
         const named = dashboardDatasources[selector.name];
         if (named === undefined) return undefined;
-        return named.plugin.kind === selector.kind ? named : undefined;
+        return named.plugin.kind === selector.kind ? {
+            name: selector.name,
+            spec: named
+        } : undefined;
     }
     // If only using a kind, try to find one with that kind that is the default
-    return Object.values(dashboardDatasources).find((ds)=>ds.plugin.kind === selector.kind && ds.default === true);
+    const result = Object.entries(dashboardDatasources).find((entry)=>entry[1].plugin.kind === selector.kind && entry[1].default);
+    if (!result) {
+        return undefined;
+    }
+    return {
+        name: result[0],
+        spec: result[1]
+    };
 }
-// Helper for building a list of DatasourceMetadata results that will take care of de-duping already used selectors
-function buildListDatasourceMetadataResults(pluginDisplayName) {
+/**
+ * Helper for building a list of DatasourceSelectItemGroup results.
+ * @param pluginDisplayName
+ */ function buildDatasourceSelectItemGroups(pluginDisplayName) {
     const results = [];
     const usedNames = new Set();
-    let defaultAdded = false;
-    const addResult = (spec, selectorName)=>{
-        var ref;
-        // If we haven't added a default yet and this is a default, add default option to the beginning of the results
-        if (spec.default && defaultAdded === false) {
-            results.unshift({
-                name: `Default ${pluginDisplayName}`,
-                selector: {
-                    kind: spec.plugin.kind
-                }
+    let isFirst = true;
+    let explicitDefaultAdded = false;
+    const groupIndices = {};
+    let currentGroupIndex = 1; // 0 is the default group, always there as it contains at least the first item.
+    const addItem = (spec, selectorName, group, editLink)=>{
+        var _spec_display;
+        group = group !== null && group !== void 0 ? group : '';
+        // Ensure the default group is always present as soon as an item is added.
+        if (isFirst) {
+            results.push({
+                group: `Default ${pluginDisplayName}`,
+                items: []
             });
-            defaultAdded = true;
         }
-        // If we already have a datasource with this selector name, ignore it, otherwise add to end of list
-        if (usedNames.has(selectorName)) return;
-        var ref1;
-        results.push({
-            name: (ref1 = (ref = spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref1 !== void 0 ? ref1 : selectorName,
+        var _groupIndices_group;
+        // Create the group if necessary
+        let selectItemGroup = results[(_groupIndices_group = groupIndices[group]) !== null && _groupIndices_group !== void 0 ? _groupIndices_group : -1];
+        if (!selectItemGroup) {
+            groupIndices[group] = currentGroupIndex;
+            selectItemGroup = {
+                items: [],
+                group,
+                editLink
+            };
+            results[currentGroupIndex] = selectItemGroup;
+            currentGroupIndex++;
+        }
+        // Add item to the group
+        const isOverridden = usedNames.has(selectorName);
+        var _spec_display_name;
+        selectItemGroup.items.push({
+            name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : selectorName,
+            overridden: isOverridden,
             selector: {
                 kind: spec.plugin.kind,
-                name: selectorName
+                name: selectorName,
+                group
             }
         });
         usedNames.add(selectorName);
+        const isExplicitDefault = !isOverridden && spec.default && !explicitDefaultAdded;
+        if (results[0] && (isFirst || isExplicitDefault)) {
+            // If we haven't added a default yet and this is a default, add default option to the beginning of the results
+            results[0].items = [
+                {
+                    name: `Default (${selectorName} from ${group})`,
+                    selector: {
+                        kind: spec.plugin.kind
+                    }
+                }
+            ];
+            // We consider that we added the default datasource only if it has been explicitly set as default.
+            // If we add this datasource as default just because it's the first, it still needs to be overridable by
+            // another datasource explicitly set as default.
+            explicitDefaultAdded = isExplicitDefault;
+        }
+        // At the end, we make sure the overriding item(s) is well flagged so
+        if (isOverridden) {
+            for(let i = explicitDefaultAdded ? 1 : 0; i < currentGroupIndex; i++){
+                var _results_i;
+                var _results_i_items;
+                ((_results_i_items = (_results_i = results[i]) === null || _results_i === void 0 ? void 0 : _results_i.items) !== null && _results_i_items !== void 0 ? _results_i_items : []).filter((item)=>item.selector.name === selectorName).forEach((item)=>{
+                    item.overriding = true;
+                });
+            }
+        }
+        isFirst = false;
     };
     return {
         results,
-        addResult
+        addItem
     };
 }