티스토리 뷰

DEV/ETC

Grafana dashboard html

SBP 2025. 5. 14. 09:55

 

Grafana Dashboard 설정 방법 (HTML 관련)

Grafana 대시보드는 기본적으로 JSON(JavaScript Object Notation) 형식으로 설정됩니다. Grafana UI에서 수행하는 모든 설정, 패널 추가 및 구성 정보는 내부적으로 JSON 모델로 저장됩니다. 따라서 대시보드 자체를 직접적으로 HTML 코드로 작성하여 설정하는 방식은 Grafana의 표준 방법이 아닙니다.

하지만 Grafana 대시보드와 관련하여 HTML을 활용하는 방법은 크게 두 가지로 나누어 설명할 수 있습니다.

1. Grafana 대시보드 내에 HTML 콘텐츠 삽입 (Text 패널)

이 방법은 대시보드 안에 설명, 안내, 이미지 또는 간단한 HTML 기반 콘텐츠를 포함하고 싶을 때 사용합니다. Grafana의 Text 패널을 이용합니다.

방법:

  • Grafana 대시보드를 열고 "Add panel" → "Add an empty panel"을 클릭합니다.
  • 패널 유형 목록에서 "Text"를 선택합니다.
  • 패널 편집 화면의 우측 설정 메뉴에서 Mode를 HTML로 변경합니다.
  • "Content" 입력란에 삽입하고 싶은 HTML 코드를 직접 작성합니다. 
    <h3>Important Links</h3>
<p>Visit our <a href="https://example.com" target="_blank">website</a> for more info.</p>
<img src="/public/img/logo.png" alt="Logo" style="width:100px;">
  • 주의: 기본적으로 Grafana는 보안을 위해 입력된 HTML을 살균(sanitize)합니다. 모든 태그나 스크립트가 허용되지 않을 수 있습니다.
  • 만약 더 자유로운 HTML 사용(JavaScript 포함)이 필요하다면, Grafana 설정 파일(grafana.ini)의 [panels] 섹션에서 disable_sanitize_html = true 로 변경해야 합니다. 하지만 이는 보안 위험을 크게 증가시키므로 권장되지 않습니다.
  • 설정을 마친 후 대시보드를 저장합니다.

2. Grafana 대시보드 또는 패널을 외부 HTML 페이지에 임베드 (iframe 활용)

Grafana 대시보드 전체 또는 특정 패널을 다른 웹사이트, 포털 등의 HTML 페이지 내에 표시하고 싶을 때 사용하는 가장 일반적인 방법입니다. Grafana에서 제공하는 임베드 코드를 사용하여 HTML의 <iframe> 태그 안에 삽입하는 방식입니다.

방법:

  • 임베드하려는 Grafana 대시보드를 엽니다.
  • 대시보드 상단의 Share 버튼(공유 아이콘)을 클릭합니다.
  • 공유 설정 팝업에서 Embed 탭을 선택합니다.
  • 원하는 옵션(시간 범위 고정, 테마 등)을 설정합니다.
  • HTML for embedding 섹션에 생성된 <iframe> 코드를 복사합니다.
  • 복사한 코드를 Grafana 대시보드를 표시하고 싶은 외부 HTML 페이지의 <body> 태그 안에 붙여넣습니다.

임베드 코드 예시:

<iframe
    src="http://your-grafana-url/d/your-dashboard-uid/your-dashboard-title?orgId=1&from=now-6h&to=now&kiosk"
    width="100%"
    height="600"
    frameborder="0"
></iframe>
  • src: 임베드할 Grafana 대시보드 또는 패널의 URL입니다. 특정 패널만 임베드하려면 /d/ 대신 /d-solo/를 사용하고 &panelId=XX 파라미터를 추가해야 합니다.
  • width, height: iframe이 표시될 영역의 크기를 설정합니다.
  • frameborder="0": iframe 주변의 테두리를 제거합니다.

중요 고려사항:

  • Grafana 서버 설정: 외부 페이지 임베드를 허용하려면 Grafana 서버 설정 파일(grafana.ini)의 [security] 섹션에서 allow_embedding = true 로 설정해야 합니다.
  • 인증 및 권한: 임베드된 대시보드 접근 시 인증 및 권한 처리가 필요합니다. 익명 접근, 서비스 계정, 또는 Grafana Enterprise의 Signed Embeds 기능을 사용할 수 있습니다. 보안 요구 사항에 따라 적절한 방법을 선택해야 합니다. 익명 접근은 설정이 간단하지만 보안에 취약할 수 있습니다.
  • SameSite 쿠키: 최신 브라우저 정책으로 인해 iframe 내에서 쿠키 기반 인증이 어려울 수 있습니다. 이 경우 Grafana 또는 웹 서버 설정을 조정해야 할 수 있습니다.

3. HTML Graphics 플러그인 (고급)

Grafana 플러그인 마켓플레이스에서 구할 수 있는 HTML Graphics와 같은 플러그인을 사용하면 데이터 소스의 데이터를 이용하여 커스텀 HTML, CSS, JavaScript로 시각화를 구성할 수 있습니다. Text 패널보다 훨씬 유연하지만, 플러그인 설치 및 프론트엔드 개발 지식이 필요합니다.

요약: Grafana 대시보드 자체 설정은 JSON이며, HTML은 주로 대시보드 내 특정 콘텐츠 삽입 (Text 패널) 또는 외부 페이지로의 임베드 (iframe)에 사용됩니다.

'DEV > ETC' 카테고리의 다른 글

Veeam solution  (0) 2025.05.15
Grafana dashboard  (0) 2025.05.14
Grafana 메뉴  (0) 2025.05.14
Grafana 최초 로그인  (0) 2025.05.14
PCP, ZABBIX, GRAFANA  (0) 2025.05.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함