prsandeep opened a new issue, #34632:
URL: https://github.com/apache/superset/issues/34632
### Bug description
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;
### Screenshots/recordings
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;
[](url)
### Superset version
master / latest-dev
### Python version
3.9
### Node version
16
### Browser
Chrome
### Additional context
_No response_
### Checklist
- [ ] I have searched Superset docs and Slack and didn't find a solution to
my problem.
- [ ] I have searched the GitHub issue tracker and didn't find a similar bug
report.
- [ ] I have checked Superset's logs for errors and if I found a relevant
Python stacktrace, I included it here as text in the "additional context"
section.
--
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]
