grafana in react

그라파나 대시보드를 리액트에 바로 표시할 수 있도록 해보자

 

테스트 준비물

1. 그라파나 대시보드의 Public dashboard (admin 권한 필요)

2. 프록시 서버

3. 리액트 CRA

---

 

1. 그라파나 대시보드의 Public dashboard (admin 권한 필요)

 

1-1) Public dashbaord 란

- 누구나 접근할 수 있도록 설정된 대시보드

- 기본적으로 Grafana 대시보드는 인증을 요구하지만, 대시보드 공개 설정하면 인증 없이 접근할 수 있다

 

1-2) Public Dashboard 설정 방법

- 다음과 같이 대시보드를 통째로 가져올 수 있다

   - 일일이 그래프 하나씩 가져오는 것 보다, 그라파나 대시보드에 필요한 모니터링 자원을 셋팅해서
      그 대시보드를 전부 가져오는게 더 효율적이다

 

- 대시보드 그래프 하나를 선택해서 오른쪽 상단의 Share 버튼을 클릭한다.

 

- 중간 부분에 노출과 관련된 옵션이 있는데 (참고를 위한 아래의 이미지는, 관리자 권한에서 이미 대시보드로의 노출이 되었기 때문에, 별다른 옵션이 보이지 않고 공개 해제 토글버튼으로 존재하고 있는 모습이다)

   이 옵션을 모두 활성화 한 뒤, 확인을 누른다

   - 참고로 옵션은 모두 공개할 지, 특정 역할에 대해 공개할 지 등의 권한이 있다.

 

- 대시보드 url을 복사하거나, 확인한다

 

2. 프록시 서버

2-1) CORS의 처리가 필요하다

2-2) 호출 서버에서 X-Frame-Optiopns 헤더가 DENY로 설정되어있으면 안된다.

         DENY로 설정되어 있으면, iframe으로 불러오는 것을 차단하기 때문이다.

 

프록시 서버는 아주 간략한 스크립트로 nodejs 의 express를 이용하여 구축하였다, git 레포지토리의 도움을 받는 경우 여기를 참조하되

실제 내용물은 아래에 있는 proxy.js 를 사용해야 한다

 

package.json

{
  "name": "proxy",
  "version": "0.1.0",
  "description": "Sample implementation of proxy",
  "type": "module",
  "main": "index.js",
  "dependencies": {
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "express-http-proxy": "^1.2.0",
    "morgan": "^1.9.0"
  },
  "devDependencies": {},
  "scripts": {
    "proxy": "node proxy.js",
    "proxy:ts": "ts-node proxy.ts",
    "serve": "http-server ./index.html -p 8080 -c-1"
  },
  "author": "serpiko",
  "license": "MIT"
}

 

proxy.js

import cors from "cors";
import express from "express";
import proxy from "express-http-proxy";
import morgan from "morgan";

const app = express();
app.use(cors());

app.use(morgan("tiny"));

app.use(
  "/",
  proxy("http://my-grafana-domain:3006", {
    userResHeaderDecorator(headers) {
      delete headers["x-frame-options"]; // X-Frame-Options 헤더 제거
      return headers;
    },
  })
);

app.listen(20090, () => {
  console.log("👉 Listening on 20090, 📮 Proxy [ http://my-grafana-domain:3006 ]");
});

프록시 서버 구동은 다음과 같이

$ npm run proxy

 

프록시 실행결과

 

3. 리액트 CRA

- 가장 빠르게 확인하기 위해서 리액트 타입스크립트 없이, CRA를 이용하였다.

$ npx create-react-app grafana-in-cra

 

- 이후 그라파나 컴포넌트를 한 개 만들어서, 아까 1번 에서 설정한 URL을 사용하자

 

Grafana.js

- URL은 우리가 프록시로 띄운 서버 호스트 (http://localhost:20090) 에 나머지 기존 URL을 연결하도록 한다

- 예를 들면 origin URL을 => Proxy URL로 사용해야 하므로, 다음과 같다

// origin URL
http://my-grafana-domain/public-dashboards/ef18a1c1b4e74dd8ae09387b86fe16b6?orgId=1&refresh=5s

// Proxy URL
http://localhost:20090/public-dashboards/ef18a1c1b4e74dd8ae09387b86fe16b6?orgId=1&refresh=5s

export default function Grafana() {
  return (
    <div className="container">
      <div>
        <iframe
          src="http://localhost:20090/public-dashboards/abcdefgakjdhfkajh?orgId=1&refresh=5s"
          width="100%"
          height="1024"
          frameborder="0"
          title="grafana"
        ></iframe>
      </div>
    </div>
  );
}

 

App.js

import Grafana from "./Grafana";

function App() {
  return (
    <div className="App">
      <Grafana />
    </div>
  );
}

export default App;

 

리액트 실행 결과

 

그라파나의 대시보드가 통째로 화면에 잘 표시되었음을 확인할 수 있었다.