Grafana 이미지 삽입 & HTML 적용

나같은 웹알못에게 grafana는 엄청난 축복이다.
다만 grafana는 서버 모니터링하는데만 충실하지 다른 기능, 특히 디자인적인 면에서 사용자를 만족시키지는 못한다.
실제로도 클라이언트에게 grafana를 보여주었더니 디자인이 마음에 안든다고 빠꾸를 먹었다.

grafana를 그럴싸하게 만들 일환으로 Text Panel을 활용해보았다.
Text Panel은 html과 markdown을 모두 지원하는데, 필자는 html을 사용하였다.

이미지 삽입 (Google Drive)

이미지 추가는 html에서 일반적으로 사용하는 방법을 그대로 사용하면 된다.
이미지 서버가 없다면 구글 드라이브를 활용하자.
구글 드라이브에서 사진을 공유한 후에 url에서 id만을 따와 다음과 같이 사용하면 된다.

# 구글 드라이브 공유 URL
https://drive.google.com/open?id=<이미지ID>

# HTML
<img src="https://drive.google.com/uc?export=view&id=<이미지ID>"/>

이미지ID 부분만 바꿔주면 된다.

이미지 삽입 (Local)

드라이브를 이용하는 경우 로딩이 상당히 느리다.
다행히도 grafana에서 서버의 로컬 이미지를 로드할 수 있다.
아래의 경로에 이미지를 넣어주고 이미지를 로드하면 된다.

# 이미지 경로
$ /usr/share/grafana/public/img

# Text Panel HTML
<img src=public/img/test_image.png>

HTML Style 적용

글씨 크기나 색 등을 변경하고자 한다.
다만 grafana 6.0부터는 xss 취약점때문에 html을 사용할 수 없게 해놓았다.
우선은 grafana 설정파일(/etc/grafana/grafana.ini)로 가서 panels 항목의 disable_sanitize_html을 true로 설정해주어야 한다.
물론 systemctl restart grafana-server를 통해 grafana를 재시작해주어야 한다.

그 이후는 다음과 같은 짓들을 해줄 수 있다.

<center>
   <img src=public/img/test_image.png style="max-width: 500px; height: auto;"/>
</center>
<html><head><meta charset="utf-8"> 
  <title></title>
  <style>.title{background-color:#0c263c; line-height:1; margin:0; font-family:Malgun Gothic;}</style>
  <style>.subtitle{background-color:rgb(124,158,210); line-height:1; margin:0; font-family:Malgun Gothic;}</style>
</head>

<body>
  <h1 class = "title">
    <font size = "6em"; color="white";>
    <div style="text-align:center;">
      Title
    </div></font>
  </h1>

  <h1 class = "subtitle">
    <font size = "4em"; color="white";>
    <div style="text-align:center;">
      Subtitle
    </div></font>
  </h1>
</body>
</html>

댓글 남기기