prsandeep commented on issue #25630:
URL: https://github.com/apache/superset/issues/25630#issuecomment-3173327519
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { embedDashboard } from '@superset-ui/embedded-sdk';
import { bugzillaApi } from '../services/bugzillaApi'; // Import the
separate API service
import '../bugzilla.css';
function BugzillaDashboard() {
const navigate = useNavigate();
const dashboardId = 'e191eb89-281d-4d10-8bcd-2dc415b9514e';
const containerRef = useRef(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [dashboardConfig, setDashboardConfig] = useState(null);
const handleGoBack = () => {
navigate(-1); // Go back to previous page
};
useEffect(() => {
const embedSupersetDashboard = async () => {
try {
setLoading(true);
setError(null);
// Get guest token using the separate API service
const tokenResponse = await bugzillaApi.getGuestToken(dashboardId);
const guestToken = tokenResponse.data.token;
if (!guestToken) {
throw new Error('Guest token missing in response');
}
// // Optionally, get dashboard configuration
// try {
// const configResponse = await
bugzillaApi.getDashboardConfig(dashboardId);
// setDashboardConfig(configResponse.data);
// } catch (configError) {
// console.warn('Could not fetch dashboard config:', configError);
// // Continue without config - not critical
// }
// Embed the dashboard
await embedDashboard({
id: dashboardId,
supersetDomain: 'https://bidarshan-dev.dcservices.in/',
mountPoint: containerRef.current,
fetchGuestToken: () => guestToken,
dashboardUiConfig: {
hideTitle: true,
hideChartControls: false,
hideTab: false,
hasDrillBy: true,
// You can use dashboardConfig here if needed
...(dashboardConfig?.uiConfig || {})
},
});
setLoading(false);
} catch (err) {
console.error('Error embedding Superset dashboard:', err);
// Handle different types of errors
const errorMessage = err.userMessage || err.message || 'Failed to
load dashboard';
setError(errorMessage);
setLoading(false);
}
};
embedSupersetDashboard();
}, [dashboardId]);
return (
<div className="App">
{/* Back Button */}
<div style={{
position: 'absolute',
top: 10,
left: 10,
zIndex: 1000
}}>
<button
onClick={handleGoBack}
style={{
padding: '8px 15px',
background: '#6c757d',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px',
display: 'flex',
alignItems: 'center',
gap: '5px'
}}
>
← Back
</button>
</div>
{loading && (
<div style={{
position: 'absolute',
top: 10,
left: 120,
zIndex: 1000,
background: 'rgba(255, 255, 255, 0.9)',
padding: '10px',
borderRadius: '4px'
}}>
<p style={{ color: '#555', margin: 0 }}>Loading dashboard...</p>
</div>
)}
{error && (
<div style={{
position: 'absolute',
top: 10,
left: 120,
zIndex: 1000,
background: 'rgba(255, 0, 0, 0.1)',
padding: '10px',
borderRadius: '4px',
border: '1px solid #ff0000'
}}>
<p style={{ color: 'red', margin: 0 }}>Error: {error}</p>
</div>
)}
<div id="dashboard-container" ref={containerRef} />
</div>
);
}
export default BugzillaDashboard;
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
