Elysia Tools

Explora herramientas, ejemplos, explicaciones visuales y guías temáticas en un solo espacio claro.

Categorías populares

Temas

Idioma
ZHESPTRUFRDEEN

Elysia Tools

Navegación

Monitoreo

Muestras Avanzadas de Grafana

Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins

Ejemplos

Entradas de esta colección

ConfiguraciónComplejo

Diseño Avanzado de Panel de Control

Dashboard complejo con variables dinámicas y paneles condicionales

Dificultad

8/10

Tiempo estimado

35 min

Etiquetas

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"]
ConfiguraciónIntermedio

Configuración de Alertas Multi-Canal

Configuración completa de alertas con múltiples canales de notificación

Dificultad

6/10

Tiempo estimado

25 min

Etiquetas

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"]
ConfiguraciónIntermedio

Integración con Prometheus

Integración avanzada con consultas complejas y reglas de grabación

Dificultad

7/10

Tiempo estimado

20 min

Etiquetas

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"]
CódigoComplejo

Desarrollo de Plugin de Panel Personalizado

Implementación completa de plugin con React y visualización avanzada

Dificultad

9/10

Tiempo estimado

45 min

Etiquetas

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
ConfiguraciónComplejo

Automatización Dashboard as Code

Enfoque Infrastructure as Code para gestionar dashboards con Terraform

Dificultad

8/10

Tiempo estimado

30 min

Etiquetas

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"]
ConfiguraciónComplejo

Correlación Multi-Fuente de Datos

Dashboard avanzado mostrando correlación entre diferentes fuentes de datos

Dificultad

8/10

Tiempo estimado

30 min

Etiquetas

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

Herramientas

Herramientas que suelen usarse con este ejemplo

Relacionado

Colecciones de ejemplos relacionadas

Relacionado

Temas relacionados

Guía de uso de la herramienta

Contexto para entender esta colección de ejemplos

Título

Muestras Avanzadas de Grafana

Descripción

Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins

Resumen

Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins

Cuándo usarlo

  • Use this sample set when you want reference inputs for Muestras Avanzadas de Grafana.
  • Use it to preview output formats and compare related sample variants.

Cómo funciona

  1. 1Open a sample entry to inspect the prepared example payload or asset.
  2. 2Compare it with related tools to understand how the workflow connects.

Casos de uso

  • Diseño Avanzado de Panel de Control
  • Configuración de Alertas Multi-Canal
  • Integración con Prometheus
  • Desarrollo de Plugin de Panel Personalizado
  • Automatización Dashboard as Code
  • Correlación Multi-Fuente de Datos

Preguntas frecuentes

What is included in Muestras Avanzadas de Grafana?

This page includes curated sample entries, related tools, and neighboring sample collections for Muestras Avanzadas de Grafana.

Tema

Inferir JSON Schema desde muestras y hojas de cálculo

Obtén un borrador revisable de JSON Schema a partir de muestras JSON representativas o filas XLSX, y revisa tipos, obligatoriedad, nulos y valores atípicos antes de usarlo como contrato.

Tema

Estandarización y compresión de imágenes en lote

Prepara un conjunto de imágenes coherente corrigiendo la orientación, eliminando márgenes innecesarios, aplicando una política de tamaño, comprimiendo los archivos y revisando muestras antes de entregarlo.

Tema

Entrega con Marca de Agua para Imagen, PDF y Video

Elige, aplica y verifica marcas visibles de marca en imágenes, PDF y video antes de una entrega controlada.

Tema

Revisión de fuentes FLAC/WAV y entrega de evidencias

Examina indicios espectrales y bits enteros en audio sin pérdida, compara referencias solo cuando proceda y entrega evidencias sin certificar autenticidad.

Inicio
Herramientas3201
Ejemplos593
Visualizaciones465
Visores de archivos103
Temas233
Etiquetas333
Imágenes, audio y video657

Herramientas de procesamiento, conversión y optimización de imágenes, audio y video

Matemáticas, fechas y finanzas644

Calculadoras, herramientas numéricas, lógica de fechas, estadística y finanzas

Diseño y color297

Herramientas de color, maquetación, gráficos, estilo visual y apoyo al diseño

Texto y redacción209

Herramientas de redacción, limpieza, formato, extracción y análisis de texto

Desarrollo y Web193

Utilidades para desarrolladores, red, depuración web y automatización

Conversión y codificación175

Herramientas de conversión de formatos, archivos, unidades, archivos comprimidos y codificación

Revisión de fuentes FLAC/WAV y entrega de evidencias
Revisión e integración de un componente de sorteos autoalojado
Revisión de lotes de códigos Stripe y comprobación previa a la importación
Revisión del descarte fotográfico y entrega de candidatos para edición
Estructurar una captura de interfaz, revisarla y entregarla a desarrollo

© 2026 Elysia Tools. Todos los derechos reservados.

DocumentaciónPreciosAcerca deTérminos de servicioPolítica de privacidadCookiesContacto

Development

Generador de Data URI

Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown

Design

De paleta de imagen a design tokens

Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos

AI Tools

Reconocimiento OCR de Facturas y Recibos

Extraer información clave de imágenes de facturas/recibos y convertir a formato JSON personalizado usando modelos de visión IA

AI Tools

Reconocimiento OCR de Tarjeta de Identidad AI

Extraer información clave de imágenes de tarjetas de identidad y convertir a formato JSON usando modelos de visión AI

Document Tools

Generador de Facturas PDF

Genera una factura PDF con marca desde partidas estructuradas

AI Tools

Captura de interfaz a JSON

Convierte una captura en un árbol visual editable, componentes y documentación para programar.

Media

Recorte de Imágenes en Lote

Recortar múltiples imágenes a dimensiones específicas o relación de aspecto con posicionamiento personalizado. Retorna imágenes recortadas como descarga ZIP.

Media

Redimensionador de Imágenes

Herramienta profesional de redimensionamiento de imágenes con múltiples métodos, preservación de relación de aspecto y conversión de formato, incluida la funcionalidad de desenfoque de fondo, soportando GIF/Animated WebP/APNG y JPEG/PNG/WEBP.

Herramientas de desarrollo

Ejemplos de Rome Toolchain JavaScript

Ejemplos de toolchain JavaScript de Rome incluyendo configuración, linting, formatting, bundling y gestión de proyectos

Herramientas de compilación

Ejemplos de SWC Rust Compiler

Ejemplos de Speedy Web Compiler (SWC) incluyendo configuración, plugins, e integración con proyectos JavaScript/TypeScript modernos

Observabilidad

Muestras de Trazado Distribuido

Ejemplos completos de trazado distribuido usando Jaeger, OpenTelemetry y herramientas de observabilidad modernas

Monitoreo y observabilidad

Ejemplos de Datadog Monitoring

Ejemplos completos de configuración de monitoring y observabilidad de Datadog incluyendo APM, logs, métricas y dashboards

Documentos

Muestras PDF

Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10

Bases de datos

Ejemplos CouchDB

Ejemplos de base de datos NoSQL Apache CouchDB incluyendo operaciones de documentos, vistas y replicación