Вбудовування Grafana Dashboards
Grafana може вбудовуватися в сторонні застосунки через iframe. Дешевше, ніж будувати користувальницькі дашборди з нуля, та розумно, коли у вас уже є Grafana із налаштованими datasources та дашбордами—просто відобразіть їх у вашому інтерфейсі, можливо з SSO auth.
Два режими вбудовування
Anonymous iframe—найпростіший. Grafana дозволяє анонімний доступ до конкретних дашбордів. Хороший для публічних дашбордів (моніторинг сервісів, публічна статистика).
Grafana Embedded (9.1+)—вбудовування з токеном сервісного акаунту. Iframe отримує JWT токен, Grafana перевіряє без логіну користувача. Правильний вибір для автентифікованих застосунків.
Конфігурація Grafana
# grafana.ini
[security]
allow_embedding = true
[auth.anonymous]
enabled = true
org_role = Viewer
hide_version = true
# Для production—обмежте CORS
[security]
cookie_secure = true
cookie_samesite = none
Токен сервісного акаунту (рекомендується)
# Створіть сервісний акаунт через API
curl -X POST http://grafana:3000/api/serviceaccounts \
-H "Content-Type: application/json" \
-u admin:admin \
-d '{"name":"embed-reader","role":"Viewer","isDisabled":false}'
# Створіть токен
curl -X POST http://grafana:3000/api/serviceaccounts/1/tokens \
-H "Content-Type: application/json" \
-u admin:admin \
-d '{"name":"embed-token"}'
React компонент
function GrafanaEmbed({ dashboardId }: { dashboardId: string }) {
const [iframeUrl, setIframeUrl] = useState('');
useEffect(() => {
fetch(`/api/grafana/embed-url?dashboard=${dashboardId}`)
.then(r => r.json())
.then(({ url }) => setIframeUrl(url));
}, [dashboardId]);
return (
<iframe
src={iframeUrl}
style={{ width: '100%', height: 500, border: 'none', borderRadius: 4 }}
allow="cross-origin-isolated"
/>
);
}
Часова шкала
Базове анонімне вбудовування—1 день. Auth на основі токена з передачею параметрів—2–3 дні.