What is included in Примеры Расширенного Применения Grafana?

This page includes curated sample entries, related tools, and neighboring sample collections for Примеры Расширенного Применения Grafana.

Elysia Tools

Навигация

Monitoring

Примеры Расширенного Применения Grafana

Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов

Примеры

Элементы этой коллекции

КонфигурацияСложный

Продвинутый Дизайн Дашборда

Сложный дашборд с динамическими переменными и условными панелями

Сложность

8/10

Оценка времени

35 min

Теги

dashboard, layout, variables, conditional, responsive, panels

config

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": "-- Grafana --",
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": null,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          },
          "unit": "short"
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "colorMode": "background",
        "graphMode": "area",
        "justifyMode": "auto",
        "orientation": "auto",
        "reduceOptions": {
          "calcs": [
            "lastNotNull"
          ],
          "fields": "",
          "values": false
        },
        "textMode": "auto"
      },
      "pluginVersion": "9.0.0",
      "targets": [
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${DS_PROMETHEUS}"
          },
          "expr": "up{job="$service"}",
          "instant": true,
          "legendFormat": "",
          "refId": "A"
        }
      ],
      "title": "Service Status",
      "type": "stat"
    },
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "vis": false
            }
          },
          "mappings": []
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 12,
        "y": 0
      },
      "id": 2,
      "options": {
        "legend": {
          "displayMode": "list",
          "placement": "right",
          "values": []
        },
        "pieType": "pie",
        "reduceOptions": {
          "calcs": [
            "lastNotNull"
          ],
          "fields": "",
          "values": false
        },
        "tooltip": {
          "mode": "single",
          "sort": "none"
        }
      },
      "targets": [
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${DS_PROMETHEUS}"
          },
          "expr": "sum by (status) (http_requests_total{job="$service"})",
          "legendFormat": "{{status}}",
          "refId": "A"
        }
      ],
      "title": "HTTP Status Codes",
      "type": "piechart"
    },
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "line",
            "fillOpacity": 10,
            "gradientMode": "none",
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "vis": false
            },
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": {
              "type": "linear"
            },
            "showPoints": "never",
            "spanNulls": false,
            "stacking": {
              "group": "A",
              "mode": "none"
            },
            "thresholdsStyle": {
              "mode": "off"
            }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              }
            ]
          },
          "unit": "reqps"
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 24,
        "x": 0,
        "y": 8
      },
      "id": 3,
      "options": {
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom"
        },
        "tooltip": {
          "mode": "single",
          "sort": "none"
        }
      },
      "targets": [
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${DS_PROMETHEUS}"
          },
          "expr": "sum(rate(http_requests_total{job="$service"}[5m])) by (method, status)",
          "legendFormat": "{{method}} {{status}}",
          "refId": "A"
        }
      ],
      "title": "Request Rate",
      "type": "timeseries"
    }
  ],
  "refresh": "5s",
  "schemaVersion": 37,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "current": {
          "selected": false,
          "text": "All",
          "value": "$__all"
        },
        "datasource": {
          "type": "prometheus",
          "uid": "${DS_PROMETHEUS}"
        },
        "definition": "label_values(http_requests_total, job)",
        "hide": 0,
        "includeAll": true,
        "label": "Service",
        "multi": true,
        "name": "service",
        "options": [],
        "query": {
          "query": "label_values(http_requests_total, job)",
          "refId": "StandardVariableQuery"
        },
        "refresh": 1,
        "regex": "",
        "skipUrlSync": false,
        "sort": 0,
        "type": "query"
      }
    ]
  },
  "time": {
    "from": "now-1h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Advanced System Monitoring Dashboard",
  "uid": "advanced-system-monitoring",
  "version": 1,
  "weekStart": ""
}

format: JSON
version: 9.x
panels: ["stat","graph","heatmap","table","gauge","progress"]
features: ["templating","annotations","variables","row-repeat"]
dataSources: ["prometheus","influxdb","elasticsearch"]

КонфигурацияСредний

Многоканальная Конфигурация Оповещений

Комплексная настройка оповещений с различными каналами уведомлений

Сложность

6/10

Оценка времени

25 min

Теги

alerting, notifications, escalation, slack, email, webhook, alertmanager

config

# Grafana Alerting Configuration
# Multi-channel notification rules setup

groups:
  - name: system_alerts
    rules:
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) / rate(http_requests_total[5m]) > 0.05
        for: 2m
        labels:
          severity: warning
          team: backend
        annotations:
          summary: "High error rate detected"
          description: "Error rate is {{ $value | humanizePercentage }} for {{ $labels.job }}"

receivers:
  - name: slack
    slack_configs:
      - api_url: "https://hooks.slack.com/services/YOUR/SLACK/WEBHOOK"
        channel: "#alerts"
        send_resolved: true

  - name: email
    email_configs:
      - to: "[email protected]"
        from: "[email protected]"
        subject: "Grafana Alert: {{ .GroupLabels.alertname }}"

  - name: webhook
    webhook_configs:
      - url: "http://alertmanager.example.com/api/v1/alerts"
        send_resolved: true

format: YAML
version: 9.x
channels: ["slack","email","webhook","discord","teams"]
features: ["escalation","grouping","silencing","inhibition"]
alertTypes: ["threshold","no-data","error","anomaly"]

КонфигурацияСредний

Интеграция с Prometheus

Расширенная интеграция со сложными запросами и правилами записи

Сложность

7/10

Оценка времени

20 min

Теги

prometheus, datasource, queries, recording-rules, federation

config

# Prometheus Data Source Configuration
apiVersion: 1

datasources:
  - name: Prometheus
    type: prometheus
    access: proxy
    url: http://prometheus:9090
    isDefault: true
    editable: true
    jsonData:
      timeInterval: "5s"
      queryTimeout: "60s"
      httpMethod: POST

# Recording Rules Example
groups:
  - name: grafana.rules
    rules:
      - record: instance:node_cpu:rate5m
        expr: 100 - (avg by (instance) (rate(node_cpu_seconds_total{mode="idle"}[5m])) * 100)

      - record: instance:node_memory_usage:percentage
        expr: (1 - (node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes)) * 100

      - record: job:node_memory_bytes_available:percentage
        expr: (node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes) * 100

format: YAML
version: 9.x
features: ["query-complexity","recording-rules","federation","remote-read"]
functions: ["rate","increase","histogram_quantile","aggregation"]
optimizations: ["query-caching","time-series-compression"]

КодСложный

Разработка Кастомного Панельного Плагина

Полная реализация плагина панели с React и продвинутой визуализацией

Сложность

9/10

Оценка времени

45 min

Теги

plugin, development, react, typescript, visualization, custom-component

plaintext

# Sample Grafana Configuration
# Basic example for demonstration purposes

version: "9.0.0"

# Example query
query: rate(http_requests_total[5m])

# Example dashboard variables
variables:
  - name: service
    type: query
    datasource: Prometheus
    query: label_values(http_requests_total, job)

format: TypeScript/React
framework: React
dependencies: ["@grafana/data","@grafana/ui","@types/react"]
features: ["data-streaming","interactive","responsive","theming"]
build: webpack
test: jest

КонфигурацияСложный

Автоматизация Dashboard as Code

Подход Infrastructure as Code для управления дашбордами с помощью Terraform

Сложность

8/10

Оценка времени

30 min

Теги

infrastructure-as-code, terraform, automation, deployment, version-control

config

# Sample Grafana Configuration
# Basic example for demonstration purposes

version: "9.0.0"

# Example query
query: rate(http_requests_total[5m])

# Example dashboard variables
variables:
  - name: service
    type: query
    datasource: Prometheus
    query: label_values(http_requests_total, job)

format: HCL
tool: Terraform
version: >=1.0
providers: ["grafana","prometheus"]
features: ["state-management","modular","reusable","validated"]

КонфигурацияСложный

Многоканальная Корреляция Данных

Продвинутый дашборд для корреляции между разными источниками данных

Сложность

8/10

Оценка времени

30 min

Теги

correlation, multi-datasource, time-series, analytics, cross-source

config

# Sample Grafana Configuration
# Basic example for demonstration purposes

version: "9.0.0"

# Example query
query: rate(http_requests_total[5m])

# Example dashboard variables
variables:
  - name: service
    type: query
    datasource: Prometheus
    query: label_values(http_requests_total, job)

format: JSON
version: 9.x
dataSources: ["prometheus","influxdb","elasticsearch","loki","postgresql"]
features: ["data-transformation","join-queries","time-alignment","correlation-analysis"]
visualizations: ["scatter-plot","correlation-matrix","heatmaps"]

Инструменты

Инструменты, которые часто используются с этим примером

Связано

Примеры Расширенного Применения Grafana

Элементы этой коллекции

Продвинутый Дизайн Дашборда

Многоканальная Конфигурация Оповещений

Интеграция с Prometheus

Разработка Кастомного Панельного Плагина

Автоматизация Dashboard as Code

Многоканальная Корреляция Данных

Инструменты, которые часто используются с этим примером

Похожие коллекции примеров

Контекст для понимания этой коллекции примеров

Обзор

Когда использовать

Как это работает

Сценарии использования

FAQ

Генератор Data URI

Палитра из изображения в design-токены

Распознавание OCR чеков и счетов

Распознавание OCR удостоверения личности ИИ

Генератор PDF-счетов

Пакетная Обрезка Изображений

Изменитель Размера Изображений

Детектор контента изображений NSFW

Примеры JavaScript Toolchain Rome

Примеры SWC Rust Compiler

Примеры Распределенного Трейсинга

Примеры Datadog Monitoring

PDF Примеры

Примеры CouchDB