@perses-dev/dashboards 0.0.0-snapshot-panel-actions-520389b → 0.0.0-snapshot-timeseries-panel-actions-e28c1fe

package/dist/cjs/components/DownloadButton/DownloadButton.js

@@ -25,8 +25,8 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _yaml = require("yaml");
 const _context = require("../../context");
+const _serializeDashboard = require("./serializeDashboard");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -83,43 +83,13 @@ function DownloadButton() {
     };
     const handleItemClick = (format, shape)=>()=>{
             setAnchorEl(null);
-            let type, content = '';
-            switch(format){
-                case 'json':
-                    type = 'application/json';
-                    content = JSON.stringify(dashboard, null, 2);
-                    break;
-                case 'yaml':
-                    {
-                        type = 'application/yaml';
-                        if (shape === 'cr') {
-                            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-                            content = (0, _yaml.stringify)({
-                                apiVersion: 'perses.dev/v1alpha1',
-                                kind: 'PersesDashboard',
-                                metadata: {
-                                    labels: {
-                                        'app.kubernetes.io/name': 'perses-dashboard',
-                                        'app.kubernetes.io/instance': name,
-                                        'app.kubernetes.io/part-of': 'perses-operator'
-                                    },
-                                    name
-                                },
-                                namespace: dashboard.metadata.project,
-                                spec: dashboard.spec
-                            });
-                        } else {
-                            content = (0, _yaml.stringify)(dashboard);
-                        }
-                    }
-                    break;
-            }
+            const { contentType, content } = (0, _serializeDashboard.serializeDashboard)(dashboard, format, shape);
             if (!hiddenLinkRef || !hiddenLinkRef.current) return;
             // Create blob URL
             const hiddenLinkUrl = URL.createObjectURL(new Blob([
                 content
             ], {
-                type
+                type: contentType
             }));
             // Simulate click
             hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;

package/dist/cjs/components/DownloadButton/serializeDashboard.js

@@ -0,0 +1,64 @@
+// Copyright 2023 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, "serializeDashboard", {
+    enumerable: true,
+    get: function() {
+        return serializeDashboard;
+    }
+});
+const _yaml = require("yaml");
+function serializeYaml(dashboard, shape) {
+    let content;
+    if (shape === 'cr') {
+        const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+        content = (0, _yaml.stringify)({
+            apiVersion: 'perses.dev/v1alpha1',
+            kind: 'PersesDashboard',
+            metadata: {
+                labels: {
+                    'app.kubernetes.io/name': 'perses-dashboard',
+                    'app.kubernetes.io/instance': name,
+                    'app.kubernetes.io/part-of': 'perses-operator'
+                },
+                name,
+                namespace: dashboard.metadata.project
+            },
+            spec: dashboard.spec
+        }, {
+            schema: 'yaml-1.1'
+        });
+    } else {
+        content = (0, _yaml.stringify)(dashboard, {
+            schema: 'yaml-1.1'
+        });
+    }
+    return {
+        contentType: 'application/yaml',
+        content
+    };
+}
+function serializeDashboard(dashboard, format, shape) {
+    switch(format){
+        case 'json':
+            return {
+                contentType: 'application/json',
+                content: JSON.stringify(dashboard, null, 2)
+            };
+        case 'yaml':
+            return serializeYaml(dashboard, shape);
+    }
+}

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

@@ -33,41 +33,8 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-// Function to extract project name from URL (kept as fallback)
-const extractProjectNameFromUrl = ()=>{
-    try {
-        if (process.env.NODE_ENV === 'test') {
-            return 'test-project';
-        }
-        if (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
-            const urlPath = window.location.pathname;
-            if (urlPath === '/' || urlPath === '') {
-                return 'dev-project';
-            }
-        }
-        const urlPath = window.location.pathname;
-        // Split the path and look for the project name after "/projects/"
-        const pathSegments = urlPath.split('/').filter((segment)=>segment.length > 0);
-        const projectsIndex = pathSegments.findIndex((segment)=>segment === 'projects');
-        if (projectsIndex !== -1 && projectsIndex + 1 < pathSegments.length) {
-            const projectName = pathSegments[projectsIndex + 1];
-            if (projectName && projectName.trim().length > 0) {
-                return projectName;
-            }
-        }
-        // Fallback: try to extract from URL parameters
-        const urlParams = new URLSearchParams(window.location.search);
-        const projectParam = urlParams.get('project');
-        if (projectParam && projectParam.trim().length > 0) {
-            return projectParam;
-        }
-        return 'unknown-project';
-    } catch  {
-        return 'unknown-project';
-    }
-};
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, projectName: providedProjectName, ...others } = props;
+    const { definition, readHandlers, 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`;
@@ -87,12 +54,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     ]);
     const chartsTheme = (0, _components.useChartsTheme)();
     const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
-    // Use provided project name or extract from URL as fallback
-    const projectName = (0, _react.useMemo)(()=>{
-        return providedProjectName || extractProjectNameFromUrl();
-    }, [
-        providedProjectName
-    ]);
+    const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
     const panelPropsForActions = (0, _react.useMemo)(()=>{
         return {
             spec: definition.spec.plugin.spec,
@@ -101,14 +63,78 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                     data: query.data
                 })),
             contentDimensions,
-            definition,
-            projectName
+            definition
         };
     }, [
         definition,
         contentDimensions,
-        queryResults,
-        projectName
+        queryResults
+    ]);
+    // Load plugin actions from the plugin
+    const [pluginActions, setPluginActions] = (0, _react.useState)([]);
+    (0, _react.useEffect)(()=>{
+        let cancelled = false;
+        const loadPluginActions = async ()=>{
+            const panelPluginKind = definition.spec.plugin.kind;
+            const panelProps = panelPropsForActions;
+            if (!panelPluginKind || !panelProps) {
+                if (!cancelled) {
+                    setPluginActions([]);
+                }
+                return;
+            }
+            try {
+                // Add defensive check for getPlugin availability
+                if (!getPlugin || typeof getPlugin !== 'function') {
+                    if (!cancelled) {
+                        setPluginActions([]);
+                    }
+                    return;
+                }
+                const plugin = await getPlugin('Panel', panelPluginKind);
+                if (cancelled) return;
+                // More defensive checking for plugin and actions
+                if (!plugin || typeof plugin !== 'object' || !plugin.actions || !Array.isArray(plugin.actions) || plugin.actions.length === 0) {
+                    if (!cancelled) {
+                        setPluginActions([]);
+                    }
+                    return;
+                }
+                // Render plugin actions in header location
+                const headerActions = plugin.actions.filter((action)=>!action.location || action.location === 'header').map((action, index)=>{
+                    const ActionComponent = action.component;
+                    try {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionComponent, {
+                            ...panelProps
+                        }, `plugin-action-${index}`);
+                    } catch (error) {
+                        console.warn(`Failed to render plugin action ${index}:`, error);
+                        return null;
+                    }
+                }).filter((item)=>Boolean(item));
+                if (!cancelled) {
+                    setPluginActions(headerActions);
+                }
+            } catch (error) {
+                if (!cancelled) {
+                    console.warn('Failed to load plugin actions:', error);
+                    setPluginActions([]);
+                }
+            }
+        };
+        // Use setTimeout to defer the async operation to the next tick
+        const timeoutId = setTimeout(()=>{
+            loadPluginActions();
+        }, 0);
+        return ()=>{
+            cancelled = true;
+            clearTimeout(timeoutId);
+        };
+    }, [
+        definition.spec.plugin.kind,
+        panelPropsForActions,
+        getPlugin
     ]);
     const handleMouseEnter = (e)=>{
         onMouseEnter?.(e);
@@ -144,12 +170,10 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
                 queryResults: queryResults,
-                panelPluginKind: definition.spec.plugin.kind,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
-                projectName: projectName,
-                panelProps: panelPropsForActions,
+                pluginActions: pluginActions,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }
@@ -171,7 +195,8 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                     FallbackComponent: _components.ErrorAlert,
                     resetKeys: [
-                        definition.spec
+                        definition.spec,
+                        queryResults
                     ],
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelContent.PanelContent, {
                         definition: definition,

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

@@ -48,72 +48,10 @@ const ConditionalBox = (0, _material.styled)(_material.Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults, panelPluginKind, projectName: _propsProjectName, panelProps })=>{
+const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, panelContentProps, pluginActions = [] })=>{
     const { isFetching, errors } = (0, _pluginsystem.useDataQueriesContext)();
-    const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
-    const [pluginActions, setPluginActions] = (0, _react.useState)([]);
-    (0, _react.useEffect)(()=>{
-        let cancelled = false;
-        const loadPluginActions = async ()=>{
-            if (!panelPluginKind || !panelProps) {
-                if (!cancelled) {
-                    setPluginActions([]);
-                }
-                return;
-            }
-            try {
-                // Add defensive check for getPlugin availability
-                if (!getPlugin || typeof getPlugin !== 'function') {
-                    if (!cancelled) {
-                        setPluginActions([]);
-                    }
-                    return;
-                }
-                const plugin = await getPlugin('Panel', panelPluginKind);
-                if (cancelled) return;
-                // More defensive checking for plugin and actions
-                if (!plugin || typeof plugin !== 'object' || !plugin.actions || !Array.isArray(plugin.actions) || plugin.actions.length === 0) {
-                    if (!cancelled) {
-                        setPluginActions([]);
-                    }
-                    return;
-                }
-                // Render plugin actions in header location
-                const headerActions = plugin.actions.filter((action)=>!action.location || action.location === 'header').map((action, index)=>{
-                    const ActionComponent = action.component;
-                    try {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionComponent, {
-                            ...panelProps
-                        }, `plugin-action-${index}`);
-                    } catch (error) {
-                        console.warn(`Failed to render plugin action ${index}:`, error);
-                        return null;
-                    }
-                }).filter((item)=>Boolean(item));
-                if (!cancelled) {
-                    setPluginActions(headerActions);
-                }
-            } catch (error) {
-                if (!cancelled) {
-                    console.warn('Failed to load plugin actions:', error);
-                    setPluginActions([]);
-                }
-            }
-        };
-        // Use setTimeout to defer the async operation to the next tick
-        const timeoutId = setTimeout(()=>{
-            loadPluginActions();
-        }, 0);
-        return ()=>{
-            cancelled = true;
-            clearTimeout(timeoutId);
-        };
-    }, [
-        panelPluginKind,
-        panelProps,
-        getPlugin
-    ]);
+    // Only destructure queryResults since we removed panelPluginKind and spec
+    const { queryResults } = panelContentProps;
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -144,16 +82,38 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
     });
     const extraActions = editHandlers === undefined && extra;
     const queryStateIndicator = (0, _react.useMemo)(()=>{
-        const hasData = queryResults && queryResults.series && queryResults.series.length > 0;
-        if (isFetching && hasData) {
+        // Check if any query is fetching
+        const isQueryFetching = queryResults.some((q)=>q.isFetching);
+        // Get query-specific errors
+        const queryErrors = queryResults.filter((q)=>q.error);
+        // Convert QueryData[] to TimeSeriesData format for data availability check
+        const timeSeriesData = queryResults && queryResults.length > 0 ? {
+            series: queryResults.flatMap((q)=>{
+                // Only extract series if the data type is TimeSeriesData
+                if (q.data && typeof q.data === 'object' && 'series' in q.data) {
+                    return q.data.series || [];
+                }
+                return [];
+            })
+        } : undefined;
+        const hasData = timeSeriesData && timeSeriesData.series && timeSeriesData.series.length > 0;
+        // Show loading indicator if queries are fetching AND we already have data
+        if ((isFetching || isQueryFetching) && hasData) {
+            // If the panel has no data, the panel content will show the loading overlay.
+            // Therefore, show the circular loading indicator only in case the panel doesn't display the loading overlay already.
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
                 "aria-label": "loading",
                 size: "1.125rem"
             });
         }
-        const validErrors = (errors || []).filter((error)=>error !== null);
-        if (validErrors.length > 0) {
-            const errorTexts = validErrors.map((e)=>{
+        // Check for errors from both context and query results
+        const contextErrors = (errors || []).filter((error)=>error !== null);
+        const allErrors = [
+            ...contextErrors,
+            ...queryErrors.map((q)=>q.error)
+        ].filter(Boolean);
+        if (allErrors.length > 0) {
+            const errorTexts = allErrors.map((e)=>{
                 if (typeof e === 'string') return e;
                 if (e && typeof e === 'object') {
                     const errorObj = e;
@@ -200,6 +160,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
     ]);
     const editActions = (0, _react.useMemo)(()=>{
         if (editHandlers !== undefined) {
+            // If there are edit handlers, always just show the edit buttons
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -222,6 +183,8 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContentCopy.default, {
                                 fontSize: "inherit",
                                 sx: {
+                                    // Shrink this icon a little bit to look more consistent
+                                    // with the other icons in the header.
                                     transform: 'scale(0.925)'
                                 }
                             })
@@ -339,6 +302,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             extraActions,
                             " ",
                             readActions,
+                            " ",
                             pluginActions,
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(OverflowMenu, {
                                 title: title,
@@ -351,6 +315,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(ConditionalBox, {
                 sx: (theme)=>({
+                        // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons
                         display: 'flex',
                         [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).down(_constants.HEADER_MEDIUM_WIDTH)]: {
                             display: 'none'
@@ -372,7 +337,9 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             extraActions,
                             " ",
                             readActions,
+                            " ",
                             pluginActions,
+                            " ",
                             editActions,
                             " ",
                             moveAction
@@ -385,7 +352,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
 };
 const OverflowMenu = ({ children, title })=>{
     const [anchorPosition, setAnchorPosition] = (0, _react.useState)();
-    // do not show overflow menu if there is no content
+    // do not show overflow menu if there is no content (for example, edit actions are hidden)
     const hasContent = /*#__PURE__*/ (0, _react.isValidElement)(children) || Array.isArray(children) && children.some(_react.isValidElement);
     if (!hasContent) {
         return undefined;

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

@@ -27,48 +27,15 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, panelPluginKind, projectName, panelProps, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
-    const timeSeriesDataForExport = (0, _react.useMemo)(()=>{
-        // Collect all series from all queries
-        const allSeries = [];
-        let timeRange = undefined;
-        let stepMs = undefined;
-        let metadata = undefined;
-        queryResults.forEach((query)=>{
-            if (query.data && 'series' in query.data) {
-                const timeSeriesData = query.data;
-                // Collect series from this query
-                if (timeSeriesData.series && timeSeriesData.series.length > 0) {
-                    allSeries.push(...timeSeriesData.series);
-                    // Use the first query's metadata/timeRange/stepMs as the base
-                    if (!timeRange && timeSeriesData.timeRange) {
-                        timeRange = timeSeriesData.timeRange;
-                    }
-                    if (!stepMs && timeSeriesData.stepMs) {
-                        stepMs = timeSeriesData.stepMs;
-                    }
-                    if (!metadata && timeSeriesData.metadata) {
-                        metadata = timeSeriesData.metadata;
-                    }
-                }
-            }
-        });
-        // If we found series, create a combined TimeSeriesData object
-        if (allSeries.length > 0) {
-            const combinedData = {
-                series: allSeries,
-                timeRange,
-                stepMs,
-                metadata
-            };
-            return combinedData;
-        }
-        return undefined;
-    }, [
+    // Create the panelContentProps object with only queryResults
+    const panelContentProps = (0, _react.useMemo)(()=>({
+            queryResults
+        }), [
         queryResults
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
@@ -99,14 +66,11 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     description: description,
                     descriptionTooltipId: descriptionTooltipId,
                     links: links,
-                    queryResults: timeSeriesDataForExport,
-                    panelPluginKind: panelPluginKind,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
                     extra: extra,
-                    projectName: projectName,
-                    // ========== ADDED: Pass panel props for actions ==========
-                    panelProps: panelProps
+                    panelContentProps: panelContentProps,
+                    pluginActions: pluginActions
                 })
             ]
         }),

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

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,IAAI,YAAY,CAgG7C"}
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,IAAI,YAAY,CA+D7C"}

package/dist/components/DownloadButton/DownloadButton.js

@@ -15,8 +15,8 @@ import { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';
 import { ToolbarIconButton } from '@perses-dev/components';
 import DownloadIcon from 'mdi-material-ui/DownloadOutline';
 import React, { useRef } from 'react';
-import { stringify } from 'yaml';
 import { useDashboard } from '../../context';
+import { serializeDashboard } from './serializeDashboard';
 // Button that enables downloading the dashboard as a JSON file
 export function DownloadButton() {
     const { dashboard } = useDashboard();
@@ -28,43 +28,13 @@ export function DownloadButton() {
     };
     const handleItemClick = (format, shape)=>()=>{
             setAnchorEl(null);
-            let type, content = '';
-            switch(format){
-                case 'json':
-                    type = 'application/json';
-                    content = JSON.stringify(dashboard, null, 2);
-                    break;
-                case 'yaml':
-                    {
-                        type = 'application/yaml';
-                        if (shape === 'cr') {
-                            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-                            content = stringify({
-                                apiVersion: 'perses.dev/v1alpha1',
-                                kind: 'PersesDashboard',
-                                metadata: {
-                                    labels: {
-                                        'app.kubernetes.io/name': 'perses-dashboard',
-                                        'app.kubernetes.io/instance': name,
-                                        'app.kubernetes.io/part-of': 'perses-operator'
-                                    },
-                                    name
-                                },
-                                namespace: dashboard.metadata.project,
-                                spec: dashboard.spec
-                            });
-                        } else {
-                            content = stringify(dashboard);
-                        }
-                    }
-                    break;
-            }
+            const { contentType, content } = serializeDashboard(dashboard, format, shape);
             if (!hiddenLinkRef || !hiddenLinkRef.current) return;
             // Create blob URL
             const hiddenLinkUrl = URL.createObjectURL(new Blob([
                 content
             ], {
-                type
+                type: contentType
             }));
             // Simulate click
             hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;

package/dist/components/DownloadButton/DownloadButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';\nimport { ToolbarIconButton } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport React, { ReactElement, useRef } from 'react';\nimport { stringify } from 'yaml';\nimport { useDashboard } from '../../context';\n\n// Button that enables downloading the dashboard as a JSON file\nexport function DownloadButton(): ReactElement {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleItemClick = (format: 'json' | 'yaml', shape?: 'cr') => (): void => {\n    setAnchorEl(null);\n\n    let type,\n      content = '';\n\n    switch (format) {\n      case 'json':\n        type = 'application/json';\n        content = JSON.stringify(dashboard, null, 2);\n        break;\n      case 'yaml':\n        {\n          type = 'application/yaml';\n\n          if (shape === 'cr') {\n            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n            content = stringify({\n              apiVersion: 'perses.dev/v1alpha1',\n              kind: 'PersesDashboard',\n              metadata: {\n                labels: {\n                  'app.kubernetes.io/name': 'perses-dashboard',\n                  'app.kubernetes.io/instance': name,\n                  'app.kubernetes.io/part-of': 'perses-operator',\n                },\n                name,\n              },\n              namespace: dashboard.metadata.project,\n              spec: dashboard.spec,\n            });\n          } else {\n            content = stringify(dashboard);\n          }\n        }\n        break;\n    }\n\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(new Blob([content], { type }));\n    // Simulate click\n    hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <ToolbarIconButton\n        id=\"download-dashboard-button\"\n        aria-controls={open ? 'basic-menu' : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? 'true' : undefined}\n        onClick={handleClick}\n      >\n        <DownloadIcon />\n      </ToolbarIconButton>\n\n      <Menu\n        id=\"download-dashboard-formats\"\n        anchorEl={anchorEl}\n        open={open}\n        hideBackdrop={true}\n        onClose={() => setAnchorEl(null)}\n        MenuListProps={{\n          'aria-labelledby': 'download-dashboard-button',\n        }}\n      >\n        <div>\n          <ClickAwayListener onClickAway={() => setAnchorEl(null)}>\n            <MenuList>\n              <MenuItem onClick={handleItemClick('json')}>JSON</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml')}>YAML</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml', 'cr')}>YAML (CR)</MenuItem>\n            </MenuList>\n          </ClickAwayListener>\n        </div>\n      </Menu>\n\n      {/* Hidden link to download the dashboard as a JSON or YAML file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} />\n    </>\n  );\n}\n"],"names":["ClickAwayListener","Menu","MenuItem","MenuList","ToolbarIconButton","DownloadIcon","React","useRef","stringify","useDashboard","DownloadButton","dashboard","hiddenLinkRef","anchorEl","setAnchorEl","useState","open","Boolean","handleClick","event","currentTarget","handleItemClick","format","shape","type","content","JSON","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","current","hiddenLinkUrl","URL","createObjectURL","Blob","download","href","click","revokeObjectURL","id","aria-controls","undefined","aria-haspopup","aria-expanded","onClick","hideBackdrop","onClose","MenuListProps","div","onClickAway","a","ref","style","display"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';\nimport { ToolbarIconButton } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport React, { ReactElement, useRef } from 'react';\nimport { useDashboard } from '../../context';\nimport { serializeDashboard } from './serializeDashboard';\n\n// Button that enables downloading the dashboard as a JSON file\nexport function DownloadButton(): ReactElement {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleItemClick = (format: 'json' | 'yaml', shape?: 'cr') => (): void => {\n    setAnchorEl(null);\n\n    const { contentType, content } = serializeDashboard(dashboard, format, shape);\n\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(new Blob([content], { type: contentType }));\n    // Simulate click\n    hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <ToolbarIconButton\n        id=\"download-dashboard-button\"\n        aria-controls={open ? 'basic-menu' : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? 'true' : undefined}\n        onClick={handleClick}\n      >\n        <DownloadIcon />\n      </ToolbarIconButton>\n\n      <Menu\n        id=\"download-dashboard-formats\"\n        anchorEl={anchorEl}\n        open={open}\n        hideBackdrop={true}\n        onClose={() => setAnchorEl(null)}\n        MenuListProps={{\n          'aria-labelledby': 'download-dashboard-button',\n        }}\n      >\n        <div>\n          <ClickAwayListener onClickAway={() => setAnchorEl(null)}>\n            <MenuList>\n              <MenuItem onClick={handleItemClick('json')}>JSON</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml')}>YAML</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml', 'cr')}>YAML (CR)</MenuItem>\n            </MenuList>\n          </ClickAwayListener>\n        </div>\n      </Menu>\n\n      {/* Hidden link to download the dashboard as a JSON or YAML file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} />\n    </>\n  );\n}\n"],"names":["ClickAwayListener","Menu","MenuItem","MenuList","ToolbarIconButton","DownloadIcon","React","useRef","useDashboard","serializeDashboard","DownloadButton","dashboard","hiddenLinkRef","anchorEl","setAnchorEl","useState","open","Boolean","handleClick","event","currentTarget","handleItemClick","format","shape","contentType","content","current","hiddenLinkUrl","URL","createObjectURL","Blob","type","download","metadata","name","href","click","revokeObjectURL","id","aria-controls","undefined","aria-haspopup","aria-expanded","onClick","hideBackdrop","onClose","MenuListProps","div","onClickAway","a","ref","style","display"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,iBAAiB,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,gBAAgB;AAC5E,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,kBAAkB,kCAAkC;AAC3D,OAAOC,SAAuBC,MAAM,QAAQ,QAAQ;AACpD,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,+DAA+D;AAC/D,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGH;IACtB,MAAMI,gBAAgBL,OAA0B;IAChD,MAAM,CAACM,UAAUC,YAAY,GAAGR,MAAMS,QAAQ,CAAqB;IACnE,MAAMC,OAAOC,QAAQJ;IACrB,MAAMK,cAAc,CAACC;QACnBL,YAAYK,MAAMC,aAAa;IACjC;IACA,MAAMC,kBAAkB,CAACC,QAAyBC,QAAiB;YACjET,YAAY;YAEZ,MAAM,EAAEU,WAAW,EAAEC,OAAO,EAAE,GAAGhB,mBAAmBE,WAAWW,QAAQC;YAEvE,IAAI,CAACX,iBAAiB,CAACA,cAAcc,OAAO,EAAE;YAC9C,kBAAkB;YAClB,MAAMC,gBAAgBC,IAAIC,eAAe,CAAC,IAAIC,KAAK;gBAACL;aAAQ,EAAE;gBAAEM,MAAMP;YAAY;YAClF,iBAAiB;YACjBZ,cAAcc,OAAO,CAACM,QAAQ,GAAG,GAAGrB,UAAUsB,QAAQ,CAACC,IAAI,GAAGX,UAAU,OAAO,QAAQ,GAAG,CAAC,EAAED,QAAQ;YACrGV,cAAcc,OAAO,CAACS,IAAI,GAAGR;YAC7Bf,cAAcc,OAAO,CAACU,KAAK;YAC3B,0CAA0C;YAC1CR,IAAIS,eAAe,CAACV;QACtB;IAEA,qBACE;;0BACE,KAACvB;gBACCkC,IAAG;gBACHC,iBAAevB,OAAO,eAAewB;gBACrCC,iBAAc;gBACdC,iBAAe1B,OAAO,SAASwB;gBAC/BG,SAASzB;0BAET,cAAA,KAACb;;0BAGH,KAACJ;gBACCqC,IAAG;gBACHzB,UAAUA;gBACVG,MAAMA;gBACN4B,cAAc;gBACdC,SAAS,IAAM/B,YAAY;gBAC3BgC,eAAe;oBACb,mBAAmB;gBACrB;0BAEA,cAAA,KAACC;8BACC,cAAA,KAAC/C;wBAAkBgD,aAAa,IAAMlC,YAAY;kCAChD,cAAA,MAACX;;8CACC,KAACD;oCAASyC,SAAStB,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASyC,SAAStB,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASyC,SAAStB,gBAAgB,QAAQ;8CAAO;;;;;;;0BAS1D,KAAC4B;gBAAEC,KAAKtC;gBAAeuC,OAAO;oBAAEC,SAAS;gBAAO;;;;AAGtD"}

package/dist/components/DownloadButton/serializeDashboard.d.ts

@@ -0,0 +1,8 @@
+import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
+type SerializedDashboard = {
+    contentType: string;
+    content: string;
+};
+export declare function serializeDashboard(dashboard: DashboardResource | EphemeralDashboardResource, format: 'json' | 'yaml', shape?: 'cr'): SerializedDashboard;
+export {};
+//# sourceMappingURL=serializeDashboard.d.ts.map

package/dist/components/DownloadButton/serializeDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serializeDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGjF,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AA+BF,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,EACzD,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,KAAK,CAAC,EAAE,IAAI,GACX,mBAAmB,CAOrB"}