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 数据源集成

高级 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"]

代码复杂

自定义面板插件开发

完整的 Grafana 面板插件实现，使用 React、TypeScript 和高级数据可视化功能

难度

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

配置复杂

仪表板即代码自动化

使用 Terraform 和自动化部署管道管理 Grafana 仪表板的基础设施即代码方法

难度

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 数据源集成

自定义面板插件开发

仪表板即代码自动化

多数据源关联分析

经常与该案例搭配使用的工具

相关案例集合

帮助搜索与理解工作流的案例说明

概览

适用场景

使用方式

常见用途

常见问题

Data URI 生成器

图片调色板转设计令牌

发票小票OCR识别

AI身份证OCR识别

PDF发票生成器

批量图片裁剪

图片缩放工具

NSFW图片内容检测器

Rome JavaScript 工具链示例

SWC Rust编译器示例

分布式追踪示例

Datadog 监控示例

PDF示例

CouchDB 数据库示例