What is included in Exemples Avancés d'Application Grafana?

This page includes curated sample entries, related tools, and neighboring sample collections for Exemples Avancés d'Application Grafana.

Elysia Tools

Navigation mobile

Monitoring

Exemples Avancés d'Application Grafana

Exemples complets de Grafana couvrant le design avancé de tableaux de bord, la configuration d'alertes, l'intégration de sources de données et le développement de plugins

Exemples

Entrées de cette collection

ConfigurationComplexe

Design Avancé de Tableau de Bord

Tableau de bord complexe avec variables dynamiques et panneaux conditionnels

Difficulté

8/10

Temps estimé

35 min

Étiquettes

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

ConfigurationIntermédiaire

Configuration d'Alertes Multi-Canaux

Configuration complète d'alertes avec plusieurs canaux de notification

Difficulté

6/10

Temps estimé

25 min

Étiquettes

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

ConfigurationIntermédiaire

Intégration Prometheus

Intégration avancée avec requêtes complexes et règles d'enregistrement

Difficulté

7/10

Temps estimé

20 min

Étiquettes

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

Code sourceComplexe

Développement de Plugin de Panel Personnalisé

Implémentation complète de plugin avec React et visualisation avancée

Difficulté

9/10

Temps estimé

45 min

Étiquettes

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

ConfigurationComplexe

Automatisation Dashboard as Code

Approche Infrastructure as Code pour gérer les tableaux de bord avec Terraform

Difficulté

8/10

Temps estimé

30 min

Étiquettes

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

ConfigurationComplexe

Corrélation Multi-Source de Données

Tableau de bord avancé pour corrélation entre différentes sources de données

Difficulté

8/10

Temps estimé

30 min

Étiquettes

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

Outils

Outils souvent utilisés avec cet exemple

Associé

Exemples Avancés d'Application Grafana

Entrées de cette collection

Design Avancé de Tableau de Bord

Configuration d'Alertes Multi-Canaux

Intégration Prometheus

Développement de Plugin de Panel Personnalisé

Automatisation Dashboard as Code

Corrélation Multi-Source de Données

Outils souvent utilisés avec cet exemple

Collections d’exemples associées

Contexte pour comprendre cette collection d’exemples

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

FAQ

Générateur de Data URI

De la palette d’image aux design tokens

Reconnaissance OCR de Reçus et Factures

Reconnaissance OCR de Carte d'Identité IA

Générateur de Factures PDF

Rognage d'Images par Lot

Redimensionneur d'Image

Détecteur de Contenu d'Image NSFW

Exemples Toolchain JavaScript Rome

Exemples de SWC Rust Compiler

Exemples de Traçage Distribué

Exemples Datadog Monitoring

Exemples PDF

Exemples CouchDB