Grafana 최신 기능 소개 가이드

Grafana의 최신 버전에서 제공하는 고급 기능들을 실제 코드 예제와 함께 소개합니다. 대시보드 생성, 알림 설정, 데이터 소스 연동 등 실무에 바로 적용할 수 있는 내용을 다룹니다.

---

---

들어가며

이 글에서는 Grafana 최신 기능 소개 가이드에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Grafana_API_클라이언트_초기화
2. 대시보드_생성_및_배포
3. Prometheus_데이터_소스_연동
4. 알림_규칙_설정
5. 패널_템플릿_변수_활용
6. 커스텀_패널_플러그인_생성
7. 알림_채널_통합
8. 스냅샷_생성_및_공유
9. 사용자_권한_관리
10. 시계열_데이터_쿼리_최적화

---

1. Grafana API 클라이언트 초기화

개요

Grafana API를 사용하기 위한 클라이언트를 초기화하고 인증을 설정합니다.

코드 예제

import axios from 'axios';

const grafanaClient = axios.create({
  baseURL: 'http://localhost:3000/api',
  headers: {
    'Authorization': `Bearer ${process.env.GRAFANA_API_KEY}`,
    'Content-Type': 'application/json'
  }
});

설명

axios를 사용하여 Grafana API 클라이언트를 생성하고, API 키를 통한 인증을 설정합니다.

---

2. 대시보드 생성 및 배포

개요

프로그래매틱하게 새로운 대시보드를 생성하고 Grafana에 배포합니다.

코드 예제

const createDashboard = async () => {
  const dashboard = {
    dashboard: {
      title: 'System Metrics',
      panels: [{
        id: 1,
        type: 'graph',
        targets: [{ expr: 'up' }]
      }]
    },
    overwrite: true
  };
  return await grafanaClient.post('/dashboards/db', dashboard);
};

설명

JSON 형식으로 대시보드 구조를 정의하고 API를 통해 Grafana에 생성합니다.

---

3. Prometheus 데이터 소스 연동

개요

Prometheus를 Grafana의 데이터 소스로 프로그래매틱하게 추가합니다.

코드 예제

const addPrometheusDataSource = async () => {
  const dataSource = {
    name: 'Prometheus',
    type: 'prometheus',
    url: 'http://localhost:9090',
    access: 'proxy',
    isDefault: true
  };
  return await grafanaClient.post('/datasources', dataSource);
};

설명

Prometheus 서버를 Grafana의 기본 데이터 소스로 등록하여 메트릭을 쿼리할 수 있게 합니다.

---

4. 알림 규칙 설정

개요

특정 조건에서 트리거되는 알림 규칙을 생성합니다.

코드 예제

const createAlertRule = async () => {
  const alertRule = {
    title: 'High CPU Usage',
    condition: 'A',
    data: [{
      refId: 'A',
      queryType: '',
      model: { expr: 'cpu_usage > 80' }
    }],
    noDataState: 'NoData',
    execErrState: 'Alerting'
  };
  return await grafanaClient.post('/api/v1/provisioning/alert-rules', alertRule);
};

설명

CPU 사용률이 80%를 초과할 때 알림을 발생시키는 규칙을 API로 생성합니다.

---

5. 패널 템플릿 변수 활용

개요

대시보드에서 동적으로 값을 변경할 수 있는 템플릿 변수를 설정합니다.

코드 예제

const dashboardWithVariable = {
  dashboard: {
    title: 'Dynamic Dashboard',
    templating: {
      list: [{
        name: 'instance',
        type: 'query',
        query: 'label_values(up, instance)',
        refresh: 1
      }]
    }
  }
};

설명

사용자가 드롭다운에서 인스턴스를 선택하면 모든 패널이 해당 인스턴스의 데이터를 표시합니다.

---

6. 커스텀 패널 플러그인 생성

개요

TypeScript로 커스텀 Grafana 패널 플러그인의 기본 구조를 작성합니다.

코드 예제

import { PanelPlugin } from '@grafana/data';

export const plugin = new PanelPlugin((props) => {
  const { data, width, height } = props;
  return (
    <div style={{ width, height }}>
      <h2>Custom Panel</h2>
      <p>Data points: {data.series[0]?.length || 0}</p>
    </div>
  );
});

설명

Grafana의 PanelPlugin API를 사용하여 데이터를 시각화하는 커스텀 패널을 생성합니다.

---

7. 알림 채널 통합

개요

Slack과 같은 외부 서비스로 알림을 전송하는 채널을 설정합니다.

코드 예제

const createNotificationChannel = async () => {
  const channel = {
    name: 'Slack Alerts',
    type: 'slack',
    isDefault: false,
    settings: {
      url: process.env.SLACK_WEBHOOK_URL,
      recipient: '#alerts'
    }
  };
  return await grafanaClient.post('/alert-notifications', channel);
};

설명

Slack webhook URL을 사용하여 Grafana 알림을 특정 채널로 전송하도록 설정합니다.

---

8. 스냅샷 생성 및 공유

개요

현재 대시보드 상태의 스냅샷을 생성하고 공유 가능한 링크를 얻습니다.

코드 예제

const createSnapshot = async (dashboardData: any) => {
  const snapshot = {
    dashboard: dashboardData,
    expires: 3600,
    external: false
  };
  const response = await grafanaClient.post('/snapshots', snapshot);
  return response.data.url;
};

설명

대시보드의 현재 상태를 캡처하여 1시간 동안 유효한 공유 링크를 생성합니다.

---

9. 사용자 권한 관리

개요

조직 내 사용자에게 특정 대시보드에 대한 권한을 부여합니다.

코드 예제

const setDashboardPermissions = async (dashboardId: number) => {
  const permissions = {
    items: [{
      userId: 1,
      permission: 2  // 1: View, 2: Edit, 4: Admin
    }]
  };
  return await grafanaClient.post(
    `/dashboards/id/${dashboardId}/permissions`,
    permissions
  );
};

설명

대시보드 ID를 기반으로 특정 사용자에게 편집 권한을 부여합니다.

---

10. 시계열 데이터 쿼리 최적화

개요

Grafana에서 대용량 시계열 데이터를 효율적으로 쿼리하는 방법입니다.

코드 예제

const optimizedQuery = {
  targets: [{
    expr: 'rate(http_requests_total[5m])',
    intervalFactor: 2,
    step: 60,
    format: 'time_series'
  }],
  range: { from: 'now-6h', to: 'now' },
  maxDataPoints: 1000
};

설명

step과 maxDataPoints를 설정하여 데이터 포인트 수를 제한하고 쿼리 성능을 최적화합니다.

---

마치며

이번 글에서는 Grafana 최신 기능 소개 가이드에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Grafana #Dashboard #Monitoring #Alerting #Visualization