-
{panel.title}
- {panel.description && (
-
{panel.description}
- )}
+
+ {loading && (
+
+
)}
+ {console.log('Rendering panel:', panel.id, 'with URL:', iframeUrl)}
-
);
diff --git a/src/components/dashboard/panel-preview.jsx b/src/components/dashboard/panel-preview.jsx
new file mode 100644
index 00000000..07a07785
--- /dev/null
+++ b/src/components/dashboard/panel-preview.jsx
@@ -0,0 +1,237 @@
+import { useState, useEffect, useRef } from 'react';
+import { DashboardPanel } from './dashboard-panel';
+import { dashboardsService } from '@/services/grafana/dashboards';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+/**
+ * Component that creates a temporary dashboard and shows a real preview of the panel
+ * using the provided configuration in an actual Grafana panel.
+ */
+export function PanelPreview({
+ panelConfig,
+ height = 300,
+ baseDashboardUid = null,
+ onClose = () => {},
+ showCloseButton = false,
+ customTimeRange = null
+}) {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [tempDashboard, setTempDashboard] = useState(null);
+ const [tempPanel, setTempPanel] = useState(null);
+
+ // Get timeRange from panelConfig first, use customTimeRange as fallback, or use a default value
+ const [timeRange, setTimeRange] = useState(() => {
+ if (panelConfig?.time) {
+ return panelConfig.time;
+ } else if (customTimeRange) {
+ return customTimeRange;
+ } else {
+ return { from: 'now-7d', to: 'now' }; // Wider time range to avoid "Zoom out of range" issues
+ }
+ });
+
+ const [dashboardUrl, setDashboardUrl] = useState(null);
+ const [dashboardCreated, setDashboardCreated] = useState(false);
+
+ // References to track dashboard creation across renders
+ const creationInProgressRef = useRef(false);
+ const dashboardUidRef = useRef(null);
+
+ // Create a temporary dashboard when the component mounts
+ useEffect(() => {
+ if (dashboardCreated || !panelConfig) {
+ setLoading(false);
+ return;
+ }
+
+ const createTempDashboard = async () => {
+ if (creationInProgressRef.current || dashboardCreated) {
+ return;
+ }
+
+ creationInProgressRef.current = true;
+ setLoading(true);
+ setError(null);
+
+ try {
+ // Ensure panelConfig has a timeRange
+ const configWithTimeRange = {
+ ...panelConfig,
+ time: panelConfig.time || timeRange
+ };
+
+ const options = {
+ timeRange: configWithTimeRange.time,
+ autoCleanup: true
+ };
+
+ const response = await dashboardsService.createTemporaryDashboard(configWithTimeRange, baseDashboardUid, options);
+
+ const responseData = response.data || response;
+
+ if (responseData && responseData.dashboard) {
+ setTempDashboard(responseData.dashboard);
+ dashboardUidRef.current = responseData.dashboard.uid;
+
+ setDashboardCreated(true);
+
+ const grafanaUrl = import.meta.env.VITE_GRAFANA_URL || 'http://localhost:3100';
+ const dashUrl = `${grafanaUrl}/d/${responseData.dashboard.uid}`;
+ setDashboardUrl(dashUrl);
+
+ // Create temporary panel data until we get real panel info
+ const tempPanelData = {
+ id: 1,
+ title: panelConfig.title || 'Panel Preview',
+ type: panelConfig.type || 'gauge',
+ description: panelConfig.description || '',
+ options: panelConfig.options || {},
+ rawSql: panelConfig.sql || '',
+ panelId: 1
+ };
+
+ setTempPanel(tempPanelData);
+
+ // Try to get panels after creating the dashboard
+ setTimeout(async () => {
+ try {
+ const panelsResponse = await dashboardsService.getPanels(dashboardUidRef.current);
+ const panels = Array.isArray(panelsResponse)
+ ? panelsResponse
+ : (panelsResponse.data || []);
+
+ if (panels && panels.length > 0) {
+ setTempPanel(panels[0]);
+ }
+ } catch (panelErr) {
+ console.warn('Could not get panels from dashboard:', panelErr);
+ }
+ }, 1000); // Wait for Grafana to process the dashboard
+ } else {
+ throw new Error('Temporary dashboard information was not received');
+ }
+ } catch (err) {
+ console.error('Error creating temporary dashboard:', err);
+ setError(err.message || 'Error creating temporary dashboard');
+ setDashboardCreated(false);
+ creationInProgressRef.current = false;
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (!creationInProgressRef.current) {
+ createTempDashboard();
+ }
+
+ // Clean up temporary dashboard when component unmounts
+ return () => {
+ if (dashboardUidRef.current) {
+ dashboardsService.delete(dashboardUidRef.current)
+ .catch(err => console.error('Error deleting temporary dashboard:', err));
+ dashboardUidRef.current = null;
+ creationInProgressRef.current = false;
+ }
+ };
+ //eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [panelConfig, baseDashboardUid]);
+
+ // Update timeRange when panelConfig or customTimeRange changes
+ useEffect(() => {
+ const newTimeRange = panelConfig?.time || customTimeRange || { from: 'now-7d', to: 'now' };
+ setTimeRange(newTimeRange);
+ }, [panelConfig, customTimeRange]);
+
+ // Loading state
+ if (loading) {
+ return (
+
+
+
+
Creating preview...
+
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ return (
+
+
+
+ Preview Error
+
+ {typeof error === 'object' ? JSON.stringify(error) : error}
+
+ The temporary dashboard was created, but panel information could not be obtained.
+ Try again or check the panel configuration.
+
+ {dashboardUrl && (
+
+
+
+ )}
+
+
+
+ );
+ }
+
+ // No dashboard created
+ if (!tempDashboard) {
+ return (
+
+
Could not create temporary dashboard
+
+ );
+ }
+
+ // Successful state - show panel or dashboard
+ return (
+
+
+ {!tempPanel &&
Showing full dashboard due to missing panel information
}
+
+
+ {tempPanel ? (
+ // Show panel with timeRange
+
+ ) : (
+ // Show iframe with the complete dashboard
+
+
+
+ )}
+
+ {showCloseButton && (
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/layouts/sidebar.jsx b/src/components/layouts/sidebar.jsx
index 0ea44522..7512747f 100644
--- a/src/components/layouts/sidebar.jsx
+++ b/src/components/layouts/sidebar.jsx
@@ -281,4 +281,4 @@ function FooterButton() {
);
-}
+}
\ No newline at end of file
diff --git a/src/components/secrets/SecretModal.jsx b/src/components/secrets/SecretModal.jsx
index c67a5623..c698d317 100644
--- a/src/components/secrets/SecretModal.jsx
+++ b/src/components/secrets/SecretModal.jsx
@@ -75,7 +75,7 @@ export function SecretModal({ open, onClose, onSubmit, initialData }) {
try {
await onSubmit(values, initialData?.id);
} catch (err) {
- toast.error('Unexpected error while trying to submit the secret.')
+ toast.error('Unexpected error while trying to submit the secret, error: ', err);
}
};
@@ -156,4 +156,4 @@ export function SecretModal({ open, onClose, onSubmit, initialData }) {
);
-}
+}
\ No newline at end of file
diff --git a/src/components/secrets/SecretValueDialog.jsx b/src/components/secrets/SecretValueDialog.jsx
index 04274c47..b0574bba 100644
--- a/src/components/secrets/SecretValueDialog.jsx
+++ b/src/components/secrets/SecretValueDialog.jsx
@@ -20,7 +20,7 @@ export function SecretValueDialog({ open, onClose, secret }) {
return (