Gustavo Llermaly - Elasticsearch Labs

Monitoreo de las vistas del dashboard de Kibana con flujos de trabajo de Elastic

Gustavo Llermaly — Fri, 03 Apr 2026 00:00:00 GMT

Kibana registra cuántas veces se visualiza cada dashboard, pero esos datos no se muestran de forma nativa en ningún dashboard integrado. En este artículo, usaremos los flujos de trabajo de Elastic para recopilar automáticamente esos datos cada 30 minutos e indexarlos en Elasticsearch, para poder crear nuestras propias analíticas sobre ellos.

Los flujos de trabajo de Elastic son un motor de automatización integrado dentro de Kibana que te permite definir procesos multipaso usando una configuración sencilla de YAML. Cada flujo de trabajo puede activarse según una programación o un evento, o como una herramienta en Elastic Agent Builder, y cada paso puede llamar a las API de Kibana, consultar Elasticsearch o transformar datos.

Usaremos los recuentos de vistas del dashboard como ejemplo concreto, pero el mismo patrón aplica a cualquier métrica expuesta a través de la API de objetos guardados de Kibana.

Requisitos previos

Elastic Cloud o un clúster autogestionado ejecutando la versión 9.3
Flujos de trabajo activados (Configuración avanzada)

Paso 1: explora los datos sin procesar en Herramientas de desarrollo

Antes de crear cualquier cosa, entendamos qué datos tenemos. Kibana almacena la mayor parte de su configuración y metadatos como objetos guardados en un índice interno dedicado. Una de las cosas que Kibana rastrea de esta manera es el número de vistas del dashboard, mediante un tipo especial de objeto guardado llamado contadores de uso. Puedes consultarlas directamente desde las Herramientas de desarrollo:

GET kbn:/api/saved_objects/_find?type=usage-counter&filter=usage-counter.attributes.domainId:"dashboard"%20and%20usage-counter.attributes.counterType:"viewed"&per_page=10000

La respuesta tiene el siguiente aspecto:

{ "page": 1, "per_page": 10000, "total": 1, "saved_objects": [ { "type": "usage-counter", "id": "dashboard:346f3c64-ebca-484d-9d57-ec600067d596:viewed:server:20260310", "attributes": { "domainId": "dashboard", "counterName": "346f3c64-ebca-484d-9d57-ec600067d596", "counterType": "viewed", "source": "server", "count": 1 }, ... } ]

El campo counterName es el ID del dashboard y count es el recuento acumulado de vistas para ese dashboard en ese día específico. Kibana crea un objeto de contador por dashboard al día; puedes ver el sufijo de fecha en el ID del objeto (...viewed:server:20260310). El conteo aumenta a lo largo del día a medida que los usuarios abren el dashboard.

En lugar de replicar este modelo de documento diario en nuestro índice, crearemos un documento por cada ejecución del flujo de trabajo. Cada documento registra cuántas vistas había acumulado ese dashboard durante el día en el momento de la captura.

Paso 2: Crear el índice de destino

Necesitamos un índice para almacenar las snapshots de la vista del dashboard. El siguiente comando lo crea con mapeos explícitos para que podamos agregar y visualizar más tarde. Ejecuta esto en herramientas de desarrollo:

PUT dashboard-views { "mappings": { "properties": { "captured_at": { "type": "date" }, "dashboard_id": { "type": "keyword" }, "dashboard_name": { "type": "keyword" }, "view_count": { "type": "integer" } } } }

Usarkeyword mapeos para ID y nombres permite agregaciones. Usar integer para view_count es un valor predeterminado seguro, ya que Kibana restablece el contador diariamente, por lo que alcanzar el límite de 32 bits (más de 2 mil millones de vistas en un solo día) no es una preocupación realista. Todavía admite operaciones numéricas, como max, avg y min, entre otras.

Paso 3: Crear el flujo de trabajo

Ve a Stack Management > Flujos de trabajo > Nuevo flujo de trabajo, y pega la siguiente configuración YAML del flujo de trabajo:

name: dashboard-views-ingestion triggers: - type: scheduled with: every: 30m steps: - name: fetch_dashboard_views type: kibana.request with: method: GET path: >- /api/saved_objects/_find?type=usage-counter&per_page=10000&filter=usage-counter.attributes.domainId:"dashboard"%20and%20usage-counter.attributes.counterType:"viewed" - name: index_each_dashboard type: foreach foreach: "{{ steps.fetch_dashboard_views.output.saved_objects }}" steps: - name: fetch_dashboard_name type: kibana.request with: method: GET path: /api/saved_objects/dashboard/{{ foreach.item.attributes.counterName }} on-failure: continue: true - name: index_doc type: elasticsearch.request with: method: POST path: /dashboard-views/_doc body: dashboard_id: "{{ foreach.item.attributes.counterName }}" dashboard_name: "{{ steps.fetch_dashboard_name.output.attributes.title }}" view_count: "${{ foreach.item.attributes.count | plus: 0 }}" captured_at: "{{ execution.startedAt | date: '%Y-%m-%dT%H:%M:%SZ' }}"

En la próxima sección, hagamos un desglose del flujo de trabajo paso a paso.

Cómo funciona el flujo de trabajo

Desencadenantes

El flujo de trabajo se ejecuta mediante un desencadenante programado cada 30 minutos. Esto nos proporciona datos temporales sin saturar la API.

fetch_dashboard_views

Usakibana.request para llamar a la API de objetos guardados de Kibana. No hace falta configurar la autenticación: el motor de flujos de trabajo añade automáticamente los encabezados correctos según el contexto de ejecución.

index_each_dashboard (foreach)

Itera sobre la matrizsaved_objects devuelta por el paso anterior. El elemento actual en cada iteración está disponible como foreach.item. Dentro del bucle, ejecutamos dos pasos anidados para cada dashboard.

1. fetch_dashboard_name:

Resuelve el título legible para los humanos del dashboard al llamar a GET /api/saved_objects/dashboard/{id}. Agregamos on-failure: continue: true para que, si un dashboard se eliminó pero aún tiene contadores de vistas, el bucle continúe en lugar de fallar toda la ejecución.

2. index_doc:

Indexa cada documento usando POST /dashboard-views/_doc (sin un ID explícito), lo que permite que Elasticsearch genere automáticamente los ID. Esto crea un nuevo documento en cada ejecución, lo que crea un historial del número de vistas a lo largo del tiempo en lugar de sobreescribir el snapshot anterior.

Dos cosas que vale la pena destacar:

El campo captured_at usa el filtro de fecha para formatear la marca de tiempo como ISO 8601. Sin ella, el valor sale como un texto de fechas en JavaScript, como Tue Mar 10 2026 05:03:47 GMT+0000, que Elasticsearch no asigna como fecha.
El view_count usa la sintaxis ${{ }} con | plus: 0 para preservar el tipo numérico. Usar {{ }} lo mostraría como un texto, lo que impediría realizar operaciones matemáticas en el dashboard.

La UI te permite depurar fácilmente cada uno de los pasos del flujo de trabajo.

Paso 4: Crea el dashboard de estadísticas

Una vez que el flujo de trabajo se haya ejecutado varias veces y se hayan recopilado los datos, crea un nuevo dashboard en Kibana usando la Data view de vistas del dashboard.

Algunos paneles para empezar:

Los dashboards más vistos: Usa un Gráfico de barras con dashboard_name en el eje X y last_value(view_count) en el eje Y. Aquí se muestra el número actual de vistas diarias por dashboard.
Vistas a lo largo del tiempo: usa un gráfico de líneas con captured_at en el eje X y last_value(view_count) en el eje Y, desglosado por dashboard_name. Dado que cada ejecución agrega un nuevo documento, usa el último valor para obtener el recuento máximo por cubetas de tiempo en lugar de sumar duplicados.
Snapshot actual: usa una tabla de datos con el captured_at más reciente para mostrar los recuentos de vistas más recientes en todos los dashboards.

Dado que cada flujo de trabajo crea un nuevo documento, puedes filtrar por intervalo de tiempo para analizar la actividad en períodos específicos, comparar semana a semana o configurar alertas cuando un dashboard caiga por debajo de un umbral de visitas.

Conclusión

Elastic Flujos de trabajo es una buena opción para este tipo de recopilación periódica de datos porque tanto el origen (API de Kibana) como el destino (Elasticsearch) son nativos, lo que significa cero gestión de credenciales. El motor de flujo de trabajo maneja la autenticación automáticamente para los pasos kibana.request y elasticsearch.request, por lo que lo único que escribes es la lógica.

Recursos

Rastreador Elástico de Sitio web Abierto como código

Gustavo Llermaly — Mon, 22 Sep 2025 00:00:00 GMT

Con Elastic Open Sitio web Crawler y su arquitectura basada en CLI, tener configuraciones de rastreador versionado y una pipeline CI/CD con pruebas locales ahora es bastante sencillo de lograr.

Tradicionalmente, gestionar los rastreadores era un proceso manual y propenso a errores. Implicaba editar configuraciones directamente en la interfaz y luchar con clonar configuraciones de rastreo, retrocesos, versionear y más. Tratar las configuraciones de rastreadores como código resuelve esto al proporcionar los mismos beneficios que esperamos en el desarrollo de software: repetibilidad, trazabilidad y automatización.

Este flujo de trabajo facilita la incorporación del Open Sitio web Crawler a tu pipeline CI/CD para rollbacks, copias de seguridad y migraciones, tareas que eran mucho más complicadas con los Elastic Crawlers anteriores, como el Elastic Sitio web Crawler o el App Search Crawler.

En este artículo, vamos a aprender cómo:

Gestiona nuestras configuraciones de rastreo usando GitHub
Tener una configuración local para probar pipelines antes de desplegar
Crea una configuración de producción para ejecutar el rastreador sitio web con nuevos ajustes cada vez que enviemos cambios a nuestra rama principal

Puedes encontrar el repositorio de proyectos aquí. Según escribo, estoy usando Elasticsearch 9.1.3 y Open Sitio web Crawler 0.4.2.

Prerrequisitos

Escritorio Docker
Instancia de Elasticsearch
Máquina virtual con acceso SSH (por ejemplo, AWS EC2) y Docker instalados

Pasos

Estructura de carpetas
Configuración del orugador
Docker-compose (entorno local)
Acciones en Github
Pruebas locales
Desplegando a la producción
Realización de cambios y re-despliegue

Estructura de carpetas

Para este proyecto, tendremos la siguiente estructura de archivos:

├── docker-compose.yml # Local elasticsearch + crawler ├── config/crawler-config.yml # Crawler config ├── .github/workflows/deploy.yml # GH Action to deploy changes ├── local.sh # Script to run our local crawler

Configuración del orugador

Bajo crawler-config.yml, pondremos lo siguiente:

output_sink: elasticsearch output_index: web-crawl-index max_crawl_depth: 1 elasticsearch: host: ${ES_HOST} api_key: ${ES_API_KEY} domains: - url: https://web-scraping.dev seed_urls: - https://web-scraping.dev/product/1 - https://web-scraping.dev/product/2 - https://web-scraping.dev/product/3

Esto se rastreará desde https://sitio web-scraping.dev/products, un sitio simulado de productos. Solo rastrearemos las tres primeras páginas del producto. La configuración max_crawl_depth evitará que el rastreador descubra más páginas de las definidas como seed_urls al no abrir los enlaces que contienen.

Elasticsearch host y api_key se llenarán dinámicamente dependiendo del entorno en el que ejecutemos el script.

Docker-compose (entorno local)

Para la docker-compose.yml, local desplegaremos el rastreador y un único clúster Elasticsearch + Kibana, para poder visualizar fácilmente los resultados del rastreo antes de desplegarlos en producción.

services: es01: image: docker.elastic.co/elasticsearch/elasticsearch:9.1.3 environment: - discovery.type=single-node - xpack.security.enabled=false - ES_JAVA_OPTS=-Xms1g -Xmx1g ports: - "9200:9200" networks: [esnet] healthcheck: test: ["CMD", "curl", "-f", "http://localhost:9200"] interval: 5s timeout: 5s retries: 10 kibana: image: docker.elastic.co/kibana/kibana:9.1.3 environment: - ELASTICSEARCH_HOSTS=http://es01:9200 ports: - "5601:5601" networks: [esnet] depends_on: [es01] crawler: image: docker.elastic.co/integrations/crawler:0.4.2 environment: - ES_HOST=http://es01:9200 - CRAWLER_JRUBY_OPTS=--server container_name: crawler volumes: - ./config:/home/app/config networks: [esnet] entrypoint: ["/home/app/bin/crawler", "crawl", "/home/app/config/crawl-config-final.yml"] stdin_open: true tty: true networks: esnet: driver: bridge

Fíjate en cómo el rastreador espera hasta que Elasticsearch esté listo para ejecutar.

Acciones en Github

Ahora necesitamos crear una acción en GitHub que copie la nueva configuración y ejecute el rastreador en nuestra máquina virtual en cada envío a main. Esto garantiza que siempre tengamos la última configuración desplegada, sin tener que entrar manualmente en la máquina virtual para actualizar archivos y ejecutar el rastreador. Vamos a usar AWS EC2 como proveedor de máquinas virtuales.

El primer paso es agregar el host (VM_HOST), el usuario de la máquina (VM_USER), la clave SSH RSA (VM_KEY), el host de Elasticsearch (ES_HOST) y la clave API de Elasticsearch (ES_API_KEY) a los secretos de acción de GitHub:

De este modo, la acción podrá acceder a nuestro servidor para copiar los archivos nuevos y ejecutar el rastreo.

Ahora, creemos nuestro archivo .github/workflows/deploy.yml :

name: Deploy on: push: branches: [main] jobs: Deploy: name: Deploy to EC2 runs-on: ubuntu-latest steps: - uses: actions/checkout@v5 - name: Deploy crawler env: HOSTNAME: ${{ secrets.VM_HOST }} USER_NAME: ${{ secrets.VM_USER }} PRIVATE_KEY: ${{ secrets.VM_KEY }} ES_HOST: ${{ secrets.ES_HOST }} ES_API_KEY: ${{ secrets.ES_API_KEY }} run: | # Save private key echo "$PRIVATE_KEY" > private_key chmod 600 private_key # Generate final config locally envsubst < config/crawler-config.yml > config/crawl-config-final.yml # Copy the config folder to VM scp -o StrictHostKeyChecking=no -i private_key -r config ${USER_NAME}@${HOSTNAME}:~/config # SSH into VM and run crawler ssh -o StrictHostKeyChecking=no -i private_key ${USER_NAME}@${HOSTNAME} << EOF docker run --rm \ -v ~/config:/config \ docker.elastic.co/integrations/crawler:latest jruby \ bin/crawler crawl /config/crawl-config-final.yml EOF

Esta acción ejecutará los siguientes pasos cada vez que empujemos cambios en el archivo de configuración del rastreador:

Llenar el host y la clave API de Elasticsearch en la configuración de yml
Copia la carpeta config a nuestra máquina virtual
Conéctate vía SSH a nuestra máquina virtual
Ejecuta el rastreo con la configuración que acabamos de copiar del repositorio

Pruebas locales

Para probar nuestro rastreador localmente, creamos un script bash que llena el host de Elasticsearch con el local de Docker y comienza un rastreo. Puedes ejecutar ./local.sh para ejecutarlo.

#!/bin/bash # Exit on any error set -e # Load environment variables export ES_HOST="http://es01:9200" # Generate final crawler config envsubst < ./config/crawler-config.yml > ./config/crawl-config-final.yml # Bring everything up docker compose up --build

Veamos Kibana DevTools para confirmar que el web-crawler-index se rellenó correctamente:

Desplegando a la producción

Ahora estamos listos para enviar a la rama principal, que desplegará el rastreador en tu máquina virtual y comenzará a enviar registros a tu instancia Serverless Elasticsearch.

git add . git commit -m "First commit" git push

Esto activará la Acción de GitHub, que ejecutará el script de despliegue dentro de la máquina virtual y comenzará a rastrear.

Puedes confirmar que la acción se ejecutó yendo al repositorio de GitHub y visitando la pestaña "Acciones":

Realización de cambios y re-despliegue

Algo que quizá notaste es que el price de cada producto forma parte del cuerpo del documento. Lo ideal sería almacenar el precio en un campo aparte para poder aplicar filtros sobre él.

Vamos a agregar este cambio al archivo crawler.yml para usar reglas de extracción que extraigan el precio de la clase CSS de product-price :

output_sink: elasticsearch output_index: web-crawl-index max_crawl_depth: 1 elasticsearch: host: ${ES_HOST} api_key: ${ES_API_KEY} # Index ingest pipeline to process documents before indexing pipeline_enabled: true pipeline: pricing-pipeline domains: - url: https://web-scraping.dev seed_urls: - https://web-scraping.dev/product/1 - https://web-scraping.dev/product/2 - https://web-scraping.dev/product/3 extraction_rulesets: - url_filters: - type: ends pattern: /product/* rules: - action: extract field_name: price selector: .product-price join_as: string source: html

También vemos que el precio incluye un signo de dólar ($), que debemos eliminar si queremos hacer consultas por rango. Podemos usar una canalización de ingesta para eso. Ten en cuenta que lo estamos haciendo referencia en nuestro nuevo archivo de configuración del rastreador arriba:

PUT _ingest/pipeline/pricing-pipeline { "processors": [ { "script": { "source": """ ctx['price'] = ctx['price'].replace("$","") """ } } ] }

Podemos ejecutar ese comando en nuestro clúster de Elasticsearch en producción. Para el desarrollo, al ser efímero, podemos hacer que la creación de pipeline forme parte del archivo docker-compose.yml agregando el siguiente servicio. Ten en cuenta que también agregamos un depends_on al servicio de rastreo para que empiece después de que la tubería se creó con éxito.

crawler: image: docker.elastic.co/integrations/crawler:0.4.2 environment: - ES_HOST=http://es01:9200 - CRAWLER_JRUBY_OPTS=--server container_name: crawler volumes: - ./config:/home/app/config networks: [esnet] entrypoint: ["/home/app/bin/crawler", "crawl", "/home/app/config/crawl-config-final.yml"] depends_on: pipeline-init: condition: service_completed_successfully stdin_open: true tty: true pipeline-init: image: curlimages/curl:latest depends_on: es01: condition: service_healthy networks: [esnet] entrypoint: > sh -c " echo 'Creating ingest pipeline...'; curl -s -X PUT http://es01:9200/_ingest/pipeline/pricing-pipeline \\ -H 'Content-Type: application/json' \\ -d '{\"processors\":[{\"script\":{\"source\":\"ctx.price = ctx.price.replace(\\\"$\\\", \\\"\\\")\"}}]}'; echo 'Pipeline created!'; "

Ahora vamos a ejecutar `./local.sh` para ver el cambio localmente:

¡Bien! Ahora impulsemos el cambio:

git add crawler-config.yml git commit -m "added price CSS selector" git push

Para confirmar que todo funciona, puedes comprobar tu Kibana de producción, que debería reflejar los cambios y mostrar el precio como un nuevo campo sin el signo del dólar.

Conclusión

El Elastic Open Sitio web Crawler te permite gestionar tu rastreador como código, lo que significa que puedes automatizar toda la pipeline —desde el desarrollo hasta el despliegue— y agregar entornos locales efímeros y pruebas programáticas contra los datos rastreados, por nombrar algunos ejemplos.

Se te invita a clonar el repositorio oficial y empezar a indexar tus propios datos usando este flujo de trabajo. También puedes leer este artículo para aprender a realizar búsqueda semántica en índices producidos por el rastreador.

Crear una aplicación de búsqueda con Blazor y Elasticsearch

Gustavo Llermaly — Wed, 09 Oct 2024 00:00:00 GMT

En este artículo, aprenderás cómo aprovechar tus habilidades en C# para crear una aplicación de búsqueda usando Blazor y Elasticsearch. Vamos a usar el cliente Elasticsearch .NET para ejecutar consultas de texto completo, semánticas y búsquedas híbridas .

NOTA Si conoces la versión anterior del cliente Nest de Elasticsearch en C#, lee esta entrada del blog sobre la deprecación del cliente NEST y las nuevas funciones. NEST fue la generación anterior del cliente .NET que fue reemplazado por el Elastic.Clients.Elasticsearch package

¿Qué es Blazor?

Blazor es un framework sitio web de código abierto basado en HTML, CSS y C# creado por Microsoft para permitir a los desarrolladores crear aplicaciones sitio web que se ejecuten en el cliente o en el servidor. Blazor también permite crear componentes reutilizables para construir aplicaciones más rápido; permite a los desarrolladores construir la vista HTML y las acciones en C# dentro del mismo archivo, lo que ayuda a mantener un código legible y limpio. Además, con Blazor Hybrid puedes crear aplicaciones móviles nativas accediendo a las capacidades nativas de la plataforma mediante código .NET.

Algunas de las características que hacen de Blazor un excelente marco para trabajar:

Opciones de renderizado tanto en el lado servidor como en el cliente
Componentes reutilizables de la interfaz
Actualizaciones en tiempo real con SignalR
Gestión del estado integrada
Sistema de enrutamiento integrado
Comprobaciones fuertes de tipado y tiempo de compilación

¿Por qué Blazor?

Blazor ofrece varios beneficios sobre otros frameworks y librerías: permite a los desarrolladores usar C# tanto para el código cliente como para el servidor, proporcionando una fuerte verificación de tipado y compilación que mejora la fiabilidad. Se integra perfectamente con el ecosistema .NET, permitiendo la reutilización de librerías y herramientas .NET, y ofrece un soporte robusto para depuración.

¿Qué es ESRE?

El Elasticsearch Relevance Engine™ (ESRE) es un conjunto de herramientas para construir aplicaciones de búsqueda empleando aprendizaje automático e inteligencia artificial sobre el poderoso motor de búsqueda Elasticsearch.

Para saber más sobre ESRE, puedes leer nuestra interesante entrada de blog aquí

Configuración de ELSER

Para aprovechar las capacidades ESRE de Elastic, vamos a emplear ELSER como nuestro proveedor de modelos.

Nota: para usar los modelos ELSER de Elasticsearch, debes tener una licencia Platinum o Enterprise, y disponer de un nodo mínimo dedicado de Machine Lerning (ML) de 4GB de tamaño. Lee más sobre esto aquí.

Empieza creando el punto final de inferencia:

PUT _inference/sparse_embedding/my-elser-model { "service": "elser", "service_settings": { "num_allocations": 1, "num_threads": 1 } }

Si es la primera vez que usas ELSER, puede que te encuentres con un error 502 de Mal Gateway mientras el modelo se carga en segundo plano. Puedes consultar el estado del modelo en Machine Learning > Trained Models en Kibana. Una vez desplegado, puedes pasar al siguiente paso.

Datos de indexación

Puedes descargar el conjunto de datos aquí y luego importar los datos usando Kibana. Para ello, ve a la página principal y haz clic en "Subir datos". Luego, sube el archivo y haz clic Import. Por último, ve a la pestaña Advanced y pega los siguientes mapeos:

{ "properties":{ "authors":{ "type":"keyword" }, "categories":{ "type":"keyword" }, "longDescription":{ "type":"semantic_text", "inference_id":"my-elser-model", "model_settings":{ "task_type":"sparse_embedding" } }, "pageCount":{ "type":"integer" }, "publishedDate":{ "type":"date" }, "shortDescription":{ "type":"text" }, "status":{ "type":"keyword" }, "thumbnailUrl":{ "type":"keyword" }, "title":{ "type":"text" } } }

Vamos a crear un índice capaz de ejecutar consultas semánticas y de texto completo. El tipo de campo semantic_text se encargará del fragmento de datos y la incrustación. Ten en cuenta que estamos indexando longDescription como semantic_text, puedes usar copy_to si quieres indexar un campo tanto como semantic_text como texto'.

Construcción de la app con Blazor & Elasticsearch

Clave API

Lo primero que tenemos que hacer es crear una clave API para autenticar nuestras solicitudes a Elasticsearch. La clave API debe ser de solo lectura y solo permitir consultar el índice de books-blazor .

POST /_security/api_key { "name": "books-blazor-key", "role_descriptors": { "books-blazor-reader": { "indices": [ { "names": ["books-blazor"], "privileges": ["read"] } ] } } }

Verás algo así:

{ "id": "XXXXXXXXXXXXXXXXXXXXXXXX", "name": "books-blazor-key", "api_key": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "encoded": "XXXXXXXXXXXXXXXXXXXXXXXX==" }

Almacena el valor del campo de respuesta encoded cuando sea necesario más adelante. Si usas Elastic Cloud, también necesitarás tu ID de la nube. (Puedes encontrarlo aquí).

Creación del proyecto Blazor

Empieza instalando Blazor y creando un proyecto de muestra siguiendo las instrucciones oficiales.

Una vez que tengas el proyecto creado, la estructura de carpetas y los archivos deberían ver así:

La aplicación plantilla incluye Bootstrap v5.1.0 para peinar.

Termina la configuración del proyecto instalando el cliente Elasticsearch .NET :

dotnet add package Elastic.Clients.Elasticsearch

Una vez que completes este paso, tu página debería ver así:

Estructura de carpetas

Ahora, vamos a organizar nuestras carpetas de la siguiente manera:

Archivos explicados:

Components/Pages/Search.razor: página principal que contiene la barra de búsqueda, los resultados y los filtros.
Componentes/Páginas/Search.razor.css: estilos de página.
Components/Elasticsearch/SearchBar.razor: componente de la barra de búsqueda.
Components/Elasticsearch/Results.razor: componente de resultados.
Components/Elasticsearch/Facet.razor: componente de filtros.
Components/Svg/GlassIcon.razor: icono de búsqueda.
Components/_Imports.razor: esto importará todos los componentes.
Modelos/Book.cs: esto almacenará el esquema del campo libro.
Modelos/Response.cs: esto almacenará el esquema de respuesta, incluyendo los resultados de búsqueda, facetas y resultados totales.
Servicios/ElasticsearchService.cs: Servicio Elasticsearch. Se encargará de la conexión y las consultas a Elasticsearch.

Configuración inicial

Empecemos con una limpieza.

Elimina los archivos:

Componentes/Páginas/Counter.razor
Componentes/Páginas/Weather.razor
Componentes/Páginas/Home.razor
Componentes/Layout/NavMenu.razor
Componentes/Diseño/NavMenu.razor.css

Revisa el archivo /Components/_Imports.razor . Deberías tener las siguientes importaciones:

@using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using static Microsoft.AspNetCore.Components.Web.RenderMode @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using BlazorApp @using BlazorApp.Components

Integración de Elastic en el proyecto

Ahora, importemos los componentes de Elasticsearch:

Vamos a eliminar la barra lateral predeterminada para tener más espacio para nuestra aplicación eliminándola del archivo /Components/Layout/MainLayout.razor :

@inherits LayoutComponentBase

@Body

An unhandled error has occurred. Reload 🗙

Ahora introduzcamos las credenciales de Elasticsearch para los secretos de usuario:

dotnet user-secrets init dotnet user-secrets set ElasticsearchCloudId "your Cloud ID" dotnet user-secrets set ElasticsearchApiKey "your API Key"

Con este enfoque, .Net 8 almacena datos sensibles en una ubicación separada, fuera de la carpeta del proyecto, y los hace accesibles mediante la interfaz IConfiguration . Estas variables estarán disponibles para cualquier proyecto .Net que emplee los mismos secretos de usuario.

Luego, modifiquemos el archivo Program.cs para leer los secretos y montar el cliente Elasticsearch:

Primero, importa las bibliotecas necesarias:

using BlazorApp.Services; using Elastic.Clients.Elasticsearch; using Elastic.Transport;

BlazorApp.Services: contiene el servicio Elasticsearch.
Elastic.Clients.Elasticsearch: importa la biblioteca cliente .Net 8 de Elasticsearch.
Elastic.Transport: importa la biblioteca de transporte Elasticsearch, que nos permite usar la clase ApiKey para autenticar nuestras solicitudes.

Segundo, inserta el siguiente código antes de la línea var app = builder.Build() :

// Initialize the Elasticsearch client. builder.Services.AddScoped(sp => { // Getting access to the configuration service to read the Elasticsearch credentials. var configuration = sp.GetRequiredService(); var cloudId = configuration["ElasticsearchCloudId"]; var apiKey = configuration["ElasticsearchApiKey"]; if (string.IsNullOrEmpty(cloudId) || string.IsNullOrEmpty(apiKey)) { throw new InvalidOperationException( "Elasticsearch credentials are missing in configuration." ); } var settings = new ElasticsearchClientSettings(cloudId, new ApiKey(apiKey)).EnableDebugMode(); return new ElasticsearchClient(settings); });

Este código leerá las credenciales de Elasticsearch de los secretos de usuario y creará una instancia cliente de Elasticsearch.

Tras la inicialización del cliente ElasticSearch, agrega la siguiente línea para registrar el servicio Elasticsearch:

builder.Services.AddScoped();

El siguiente paso será construir la lógica de búsqueda en el archivo /Services/ElasticsearchService.cs :

Primero, importa las bibliotecas y modelos necesarios:

using BlazorApp.Models; using Elastic.Clients.Elasticsearch; using Elastic.Clients.Elasticsearch.QueryDsl;

Segundo, agregar la clase ElasticsearchService, constructor y variables:

namespace BlazorApp.Services { public class ElasticsearchService { private readonly ElasticsearchClient _client; // The logger is used to log information, warnings and errors about the Elasticsearch service and requests. private readonly ILogger _logger; public ElasticsearchService( ElasticsearchClient client, ILogger logger ) { _client = client ?? throw new ArgumentNullException(nameof(client)); _logger = logger; } } }

Configuración de búsqueda

Ahora, vamos a construir nuestra lógica de búsqueda:

private static Action> BuildHybridQuery( string searchTerm, Dictionary> selectedFacets ) { var filters = BuildFilters(selectedFacets); return retrievers => retrievers.Rrf(rrf => rrf.RankWindowSize(50) .RankConstant(20) .Retrievers( retrievers => retrievers.Standard(std => std.Query(q => q.Bool(b => b.Must(m => m.MultiMatch(mm => mm.Query(searchTerm) .Fields( new[] { "title", "shortDescription", } ) ) ) .Filter(filters.ToArray()) ) ) ), retrievers => retrievers.Standard(std => std.Query(q => q.Bool(b => b.Must(m => m.Semantic(sem => sem.Field("longDescription") .Query(searchTerm) ) ) .Filter(filters.ToArray()) ) ) ) ) ); } public static List>> BuildFilters( Dictionary> selectedFacets ) { var filters = new List>>(); if (selectedFacets != null) { foreach (var facet in selectedFacets) { foreach (var value in facet.Value) { var field = facet.Key.ToLower(); if (!string.IsNullOrEmpty(field)) { filters.Add(m => m.Term(t => t.Field(new Field(field)).Value(value))); } } } } return filters; }

BuildFilters construirá los filtros para la consulta de búsqueda usando las facetas seleccionadas por el usuario.
BuildHybridQuery construirá una consulta de búsqueda híbrida que combine texto completo y búsqueda semántica.

A continuación, agrega el método de búsqueda:

public async Task SearchBooksAsync( string searchTerm, Dictionary> selectedFacets ) { try { _logger.LogInformation($"Performing search for: {searchTerm}"); // Retrieve the hybrid query with filters applied. var retrieverQuery = BuildHybridQuery(searchTerm, selectedFacets); var response = await _client.SearchAsync(s => s.Index("elastic-blazor-books") .Retriever(retrieverQuery) .Aggregations(aggs => aggs.Add("Authors", agg => agg.Terms(t => t.Field(p => p.Authors))) .Add( "Categories", agg => agg.Terms(t => t.Field(p => p.Categories)) ) .Add("Status", agg => agg.Terms(t => t.Field(p => p.Status))) ) ); if (response.IsValidResponse) { _logger.LogInformation($"Found {response.Documents.Count} documents"); var hits = response.Total; var facets = response.Aggregations != null ? FormatFacets(response.Aggregations) : new Dictionary>(); var elasticResponse = new ElasticResponse { TotalHits = hits, Documents = response.Documents.ToList(), Facets = facets, }; return elasticResponse; } else { _logger.LogWarning($"Invalid response: {response.DebugInformation}"); return new ElasticResponse(); } } catch (Exception ex) { _logger.LogError(ex, "Error performing search"); return new ElasticResponse(); } } public static Dictionary> FormatFacets( Elastic.Clients.Elasticsearch.Aggregations.AggregateDictionary aggregations ) { var facets = new Dictionary>(); foreach (var aggregation in aggregations) { if ( aggregation.Value is Elastic.Clients.Elasticsearch.Aggregations.StringTermsAggregate termsAggregate ) { var facetName = aggregation.Key; var facetDictionary = ConvertFacetDictionary( termsAggregate.Buckets.ToDictionary(b => b.Key, b => b.DocCount) ); facets[facetName] = facetDictionary; } } return facets; } private static Dictionary ConvertFacetDictionary( Dictionary original ) { var result = new Dictionary(); foreach (var kvp in original) { result[kvp.Key.ToString()] = kvp.Value; } return result; }

SearchBooksAsync: realizará la búsqueda usando la consulta híbrida y devolverá los resultados incluidas agregaciones para construir las facetas.
FormatFacets: formateará la respuesta de agregación en un diccionario.
ConvertFacetDictionary: convertirá el diccionario de facetas en un formato más legible.

El siguiente paso es crear los modelos que representarán los datos devueltos en el hits de la consulta de Elasticsearch que se imprimirán como resultados en nuestra página de búsqueda.

Comenzamos creando el /Models/Book.cs de archivo y agregando lo siguiente:

namespace BlazorApp.Models { public class BookDoc { public string? Title { get; set; } public int? PageCount { get; set; } public string? PublishedDate { get; set; } public string? ThumbnailUrl { get; set; } public string? ShortDescription { get; set; } public LongDescription? LongDescription { get; set; } public string? Status { get; set; } public List? Authors { get; set; } public List? Categories { get; set; } } public class LongDescription { public string? Text { get; set; } } }

Luego, configurar la respuesta Elastic en el archivo /Models/Response.cs y agregar lo siguiente:

namespace BlazorApp.Models { public class ElasticResponse { public ElasticResponse() { Documents = new List(); Facets = new Dictionary>(); } public long TotalHits { get; set; } public List Documents { get; set; } public Dictionary> Facets { get; set; } } }

Configuración de una interfaz básica

A continuación, agrega el componente Barra de búsqueda. En el archivo /Components/Elasticsearch/SearchBar.razor y agrega lo siguiente:

@using System.Threading.Tasks @code { [Parameter] public EventCallback OnSearch { get; set; } private string searchTerm = ""; private async Task SubmitSearch() { await OnSearch.InvokeAsync(searchTerm); } }

Este componente contiene una barra de búsqueda y un botón para realizar la búsqueda.

Blazor ofrece una gran flexibilidad al permitir generar HTML dinámicamente usando código C# dentro del mismo archivo.

Después, en el archivo /Components/Elasticsearch/Results.razor construiremos el componente de resultados que mostrará los resultados de búsqueda:

@using BlazorApp.Models @if (SearchResults != null && SearchResults.Any()) {

@foreach (var result in SearchResults) {

@if (!string.IsNullOrEmpty(result?.ThumbnailUrl)) { } else {

@result?.Title

}

@result?.Title

@if (result?.Authors?.Any() == true) {

Authors: @string.Join(", ", result.Authors)

} @if (result?.Categories?.Any() == true) {

Categories: @string.Join(", ", result.Categories)

}

@if (result?.PageCount != null) {

Pages: @result.PageCount

} @if (result?.Status != null) {

Status: @result.Status

}

@result?.LongDescription?.Text

@if (!string.IsNullOrEmpty(result?.PublishedDate)) {

Published Date: @FormatDate(result.PublishedDate)

}

} else if (SearchResults != null) {

No results found.

} @code { [Parameter] public List SearchResults { get; set; } = new List(); private string FormatDate(string? date) { if (DateTime.TryParse(date, out DateTime parsedDate)) { return parsedDate.ToString("MMMM dd, yyyy"); } return ""; } }

Finalmente, necesitaremos crear facetas para filtrar los resultados de búsqueda.

Nota: Los facetos son filtros que permiten a los usuarios reducir los resultados de búsqueda en función de atributos o categorías específicas, como el tipo de producto, el rango de precio o la marca. Estos filtros suelen presentar como opciones clicables, a menudo en forma de casillas para marcar, para ayudar a los usuarios a refinar su búsqueda y encontrar resultados relevantes con mayor facilidad. En el contexto de Elasticsearch, las facetas se crean mediante agregaciones.

Configuramos facetas poniendo el siguiente código en el archivo /Components/Elasticsearch/Facet.razor:

@if (Facets != null) { } @code { [Parameter] public Dictionary>? Facets { get; set; } [Parameter] public EventCallback>> OnFacetChanged { get; set; } private Dictionary> selectedFacets = new(); private void ToggleFacet(string facetName, string facetValue) { if (!selectedFacets.TryGetValue(facetName, out var facetValues)) { facetValues = selectedFacets[facetName] = new List(); } if (!facetValues.Remove(facetValue)) { facetValues.Add(facetValue); } OnFacetChanged.InvokeAsync(selectedFacets); } private bool IsFacetSelected(string facetName, string facetValue) { return selectedFacets.ContainsKey(facetName) && selectedFacets[facetName].Contains(facetValue); } }

Este componente lee de una agregación terms en los campos author, categoriesy status , y luego produce una lista de filtros para enviar de vuelta a Elasticsearch.

Ahora, vamos a juntar todo.

En /Components/Pages/Search.razor expediente:

@page "/" @rendermode InteractiveServer @using BlazorApp.Models @using BlazorApp.Services @inject ElasticsearchService ElasticsearchService @inject ILogger Logger Search

Semantic Search with Elasticsearch and Blazor

About

Current search term: @currentSearchTerm

Total results: @totalResults

@code { private string currentSearchTerm = ""; private long totalResults = 0; private List searchResults = new List(); private Dictionary> facets = new Dictionary>(); private Dictionary> selectedFacets = new Dictionary>(); protected override async Task OnInitializedAsync() { await PerformSearch(); } private async Task PerformSearch(string searchTerm = "") { try { currentSearchTerm = searchTerm; var response = await ElasticsearchService.SearchBooksAsync(currentSearchTerm, selectedFacets); if (response != null) { searchResults = response.Documents; facets = response.Facets; totalResults = response.TotalHits; } else { Logger.LogWarning("Search response is null."); } StateHasChanged(); } catch (Exception ex) { Logger.LogError(ex, "Error performing search."); } } private async Task OnFacetChanged(Dictionary> newSelectedFacets) { selectedFacets = newSelectedFacets; await PerformSearch(currentSearchTerm); } }

¡Nuestra página funciona!

Como puedes ver, la página es funcional pero carece de estilos. Vamos a agregar algo de CSS para que parezca más organizado y receptivo.

Empecemos a reemplazar los estilos de distribución. En el archivo Components/Layout/MainLayout.razor.css :

.page { position: relative; display: flex; flex-direction: column; } main { flex: 1; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

Agrega los estilos de la página de búsqueda en el archivo Components/Pages/Search.razor.css :

.input-group .input-group-svg { background: transparent; border: transparent; pointer-events: none; } .results-facet-container { display: flex; margin-top: 1rem; overflow-x: auto; } .search-details-container { display: flex; justify-content: space-between; margin-top: 1rem; } .searchbar-container { padding-top: 2rem; display: flex; flex-direction: column; flex-grow: 1; height: 100%; max-width: 100%; } .searchbar-container h4 { margin: 0; } .top-row { margin-top: -1.1rem; position: relative; background-color: hsl(216, 29%, 67%); border-bottom: 1px solid #d6d5d5; display: flex; align-items: center; height: 100%; padding: 0 1rem; } .top-row a { margin-left: auto; margin-top: -4rem; color: #000000; text-decoration: none; } .top-row a:hover { text-decoration: underline; } @media (max-width: 640.98px) { .top-row { justify-content: space-between; } .top-row ::deep a, .top-row ::deep .btn-link { margin-left: 0; } } @media (min-width: 641px) { .top-row.auth ::deep a:first-child { flex: 1; text-align: right; width: 0; } .top-row, article { padding-left: 2rem !important; padding-right: 1.5rem !important; } }

Nuestra página empieza a ver mejor:

Vamos a darle los toques finales:

Crea los siguientes archivos:

Componentes/Elasticsearch/Facet.razor.css
Components/Elasticsearch/Results.razor.css

Y agrega los estilos para Facet.razor.css:

.facets-container { font-size: 15px; margin-right: 4rem; overflow-x: auto; white-space: nowrap; max-width: 300px; } .results-facet-container { display: flex; margin-top: 1rem; overflow-x: auto; } .results-facet-container > * { flex-shrink: 0; }

Para Results.razor.css:

.image-container { display: flex; justify-content: center; align-items: center; height: 100%; padding: 1rem; box-sizing: border-box; } .image-container img { max-width: 100%; height: auto; border-radius: 0.5rem; } .placeholder { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: #f0f0f0; border: 1px solid #ccc; font-size: 0.9rem; color: #888; text-align: center; padding: 1rem; border-radius: 0.5rem; } .card-body { padding: 1rem; } .details-container { display: flex; justify-content: space-between; padding: 1.5rem 0; } .date-container { margin-top: 1rem; display: flex; justify-content: flex-end; } .date-container .small-date { font-weight: bold; }

Resultado final:

Para ejecutar la aplicación puedes usar el siguiente comando:

dotnet watch

¡Lo conseguiste! Ahora puedes buscar libros en tu índice de Elasticsearch usando la barra de búsqueda y filtrar los resultados por autor, categoría y estado.

Realización de búsqueda en texto completo y semántica

Por defecto, nuestra app realiza una búsqueda híbrida usando tanto texto completo como búsqueda semántica. Puedes cambiar la lógica de búsqueda creando dos métodos separados, uno para texto completo y otro para búsqueda semántica, y luego seleccionar uno para construir la consulta basar en la entrada del usuario.

Agrega los siguientes métodos a la clase ElasticsearchService en el archivo /Services/ElasticsearchService.cs :

private static Action> BuildSemanticQuery( string searchTerm, Dictionary> selectedFacets ) { var filters = BuildFilters(selectedFacets); return query => query.Bool(b => b.Must(m => m.Semantic(sem => sem.Field("longDescription").Query(searchTerm))) .Filter(filters.ToArray()) ); } private static Action> BuildMultiMatchQuery( string searchTerm, Dictionary> selectedFacets ) { var filters = BuildFilters(selectedFacets); if (string.IsNullOrEmpty(searchTerm)) { return query => query.Bool(b => b.Filter(filters.ToArray())); } return query => query.Bool(b => b.Should(m => m.MultiMatch(mm => mm.Query(searchTerm).Fields(new[] { "title", "shortDescription" }) ) ) .Filter(filters.ToArray()) ); }

Ambos métodos funcionan de forma similar al método BuildHybridQuery , pero solo realizan búsqueda en texto completo o semántica.

Puedes modificar el método SearchBooksAsync para usar el método de búsqueda seleccionado:

public async Task SearchBooksAsync( string searchTerm, Dictionary> selectedFacets ) { try { _logger.LogInformation($"Performing search for: {searchTerm}"); // Modify the query builder to use the selected search method. var multiMatchQuery = BuildMultiMatchQuery(searchTerm, selectedFacets); // For full text search var semanticQuery = BuildSemanticQuery(searchTerm, selectedFacets); // For semantic search // In this case we will not use retrievers, but you can add them if you want to use them. var response = await _client.SearchAsync(s => s.Index("elastic-blazor-books") .Query(multiMatchQuery) // Change this line to use different search methods, for example: .Query(semanticQuery) for semantic search .Aggregations(aggs => aggs.Add("Authors", agg => agg.Terms(t => t.Field(p => p.Authors))) .Add( "Categories", agg => agg.Terms(t => t.Field(p => p.Categories)) ) .Add("Status", agg => agg.Terms(t => t.Field(p => p.Status))) ) ); if (response.IsValidResponse) { _logger.LogInformation($"Found {response.Documents.Count} documents"); var hits = response.Total; var facets = response.Aggregations != null ? FormatFacets(response.Aggregations) : new Dictionary>(); var elasticResponse = new ElasticResponse { TotalHits = hits, Documents = response.Documents.ToList(), Facets = facets, }; return elasticResponse; } else { _logger.LogWarning($"Invalid response: {response.DebugInformation}"); return new ElasticResponse(); } } catch (Exception ex) { _logger.LogError(ex, "Error performing search"); return new ElasticResponse(); } }

Puedes encontrar la solicitud completa aquí

Conclusión

Blazor es un framework eficaz que te permite crear aplicaciones sitio web usando C#. Elasticsearch es un poderoso motor de búsqueda que te permite crear aplicaciones de búsqueda. Combinando ambos, puedes construir fácilmente aplicaciones de búsqueda robustas, aprovechando el poder de ESRE para crear una experiencia de búsqueda semántica en poco tiempo.

Gustavo Llermaly - Elasticsearch Labs

Monitoreo de las vistas del dashboard de Kibana con flujos de trabajo de Elastic

Requisitos previos

Paso 1: explora los datos sin procesar en Herramientas de desarrollo

Paso 2: Crear el índice de destino

Paso 3: Crear el flujo de trabajo

Cómo funciona el flujo de trabajo

Desencadenantes

fetch_dashboard_views

index_each_dashboard (foreach)

Paso 4: Crea el dashboard de estadísticas

Conclusión

Recursos

Rastreador Elástico de Sitio web Abierto como código

Prerrequisitos

Pasos

Estructura de carpetas

Configuración del orugador

Docker-compose (entorno local)

Acciones en Github

Pruebas locales

Desplegando a la producción

Realización de cambios y re-despliegue

Conclusión

Crear una aplicación de búsqueda con Blazor y Elasticsearch

¿Qué es Blazor?

¿Por qué Blazor?

¿Qué es ESRE?

Configuración de ELSER

Datos de indexación

Construcción de la app con Blazor & Elasticsearch

Clave API

Creación del proyecto Blazor

Estructura de carpetas

Configuración inicial

Integración de Elastic en el proyecto

Configuración de búsqueda

Configuración de una interfaz básica

@result?.Title

@facet.Key

Semantic Search with Elasticsearch and Blazor

Realización de búsqueda en texto completo y semántica

Conclusión