Gustavo Llermaly - Elasticsearch Labs

Monitorer des vues des tableaux de bord Kibana avec Elastic Workflows

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

Kibana enregistre le nombre de consultations de chaque tableau de bord, mais ces données ne sont pas accessibles nativement dans les tableaux de bord intégrés. Dans cet article, nous utiliserons Elastic Workflows pour collecter automatiquement ces données toutes les 30 minutes et les indexer dans Elasticsearch, afin de pouvoir créer nos propres analyses.

Elastic Workflows est un moteur d'automatisation intégré à Kibana qui vous permet de définir des processus à plusieurs étapes à l'aide d'une configuration YAML simple. Chaque workflow peut être déclenché selon une planification ou un événement, ou en tant qu'outil dans Elastic Agent Builder, et chaque étape peut appeler les API de Kibana, interroger Elasticsearch ou transformer des données.

Nous utiliserons les compteurs de vues du tableau de bord comme exemple concret, mais le même modèle s'applique à n'importe quel indicateur exposé via l'API des objets enregistrés de Kibana.

Produits requis

Elastic Cloud ou cluster autogéré exécutant la version 9.3
Workflows activés (paramètres avancés)

Étape 1 : Explorer les données brutes dans les Outils de développement

Avant toute chose, examinons les données disponibles. Kibana stocke la majeure partie de sa configuration et de ses métadonnées sous forme d'objets enregistrés dans un index interne dédié. Parmi les éléments suivis par Kibana figurent les consultations des tableaux de bord, grâce à un type d'objet enregistré spécifique appelé "compteurs d'utilisation". Vous pouvez les interroger directement depuis les outils de développement :

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 réponse se présente comme suit :

{ "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 }, ... } ]

Le champ counterName est l'identifiant du tableau de bord, et count est le nombre cumulé de vues pour ce tableau de bord ce jour-là. Kibana crée un objet compteur par tableau de bord par jour ; vous pouvez voir le suffixe de date dans l'ID de l'objet (...viewed:server:20260310). Le nombre augmente tout au long de la journée lorsque les utilisateurs ouvrent le tableau de bord.

Plutôt que de reproduire ce modèle de document quotidien dans notre index, nous créerons un document par exécution de workflow. Chaque document enregistre le nombre de vues que ce tableau de bord avait accumulées pour la journée au moment de la capture.

Étape 2 : Créer l'index de destination

Nous avons besoin d'un index pour stocker les snapshots de nos vues de tableau de bord. La commande suivante le crée avec des mappings explicites afin de pouvoir les agréger et les visualiser ultérieurement. Exécutez cette commande dans les outils de développement :

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

L'utilisation des mappings keyword pour les ID et les noms permet des agrégations. L'utilisation de integer pour view_count est une valeur par défaut sûre, car Kibana réinitialise le compteur quotidiennement ; atteindre la limite de 32 bits (plus de 2 milliards de vues en une seule journée) n'est donc pas un problème réaliste. Il prend toujours en compte les opérations numériques, comme max, avg et min entre autres.

Étape 3 : Créer le workflow

Accédez à Stack Management > Workflows > Nouveau workflow, puis collez la configuration YAML de workflow suivante :

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' }}"

Dans la section suivante, nous allons détailler le workflow étape par étape.

Fonctionnement du workflow

Déclencheurs

Le workflow s'exécute sur un déclencheur planifié toutes les 30 minutes. Cela nous permet d'obtenir des données temporelles sans solliciter l'API.

récupérer les vues du tableau de bord

Utilise kibana.request pour appeler l'API des objets enregistrés de Kibana. Aucune configuration d'authentification n'est nécessaire : le moteur de workflow associe automatiquement les en-têtes corrects en fonction du contexte de l'exécution.

index_each_dashboard (foreach)

Itère sur le tableau saved_objects renvoyé par l'étape précédente. L'élément actuel de chaque itération est disponible sous la forme foreach.item. À l'intérieur de la boucle, nous exécutons deux étapes imbriquées pour chaque tableau de bord.

1. fetch_dashboard_name :

Résout le titre du tableau de bord lisible par l'utilisateur en appelant GET /api/saved_objects/dashboard/{id}. Nous ajoutons on-failure: continue: true pour que, si un tableau de bord a été supprimé mais qu'il contient encore des compteurs de vues, la boucle continue au lieu d'interrompre l'exécution.

2. index_doc :

Indexe chaque document à l'aide de POST /dashboard-views/_doc (sans identifiant explicite), ce qui permet à Elasticsearch de générer automatiquement des identifiants. Un nouveau document est ainsi créé à chaque exécution, ce qui permet d'établir un historique du nombre de vues au fil du temps plutôt que d'écraser le snapshot précédent.

Deux choses à noter :

Le champ captured_at utilise le filtre de date pour formater l'horodatage au format ISO 8601. Sans ce filtre, la valeur apparaît sous la forme d'une chaîne de date JavaScript, comme Tue Mar 10 2026 05:03:47 GMT+0000, qu'Elasticsearch ne pourra pas interpréter comme une date.
Le view_count utilise la syntaxe ${{ }} avec | plus: 0 pour préserver le type numérique. L'utilisation de {{ }} le rendrait sous forme de chaîne, ce qui empêcherait les opérations mathématiques dans le tableau de bord.

L'interface utilisateur vous permet de déboguer efficacement chacune des étapes du workflow.

Étape 4 : Créer le tableau de bord des statistiques

Une fois que le workflow a été exécuté plusieurs fois et que les données ont été collectées, créez un nouveau tableau de bord dans Kibana en utilisant la data view dashboard-views.

Voici quelques panneaux pour commencer :

Principaux tableaux de bord par vues : utilisez un graphique à barres avec dashboard_name sur l'axe des X et last_value(view_count) sur l'axe des Y. Cela indique le nombre actuel de vues quotidiennes par tableau de bord.
Vues au fil du temps : utilisez un graphique linéaire avec captured_at sur l'axe X et last_value(view_count) sur l'axe Y, décomposé par dashboard_name. Comme chaque exécution ajoute un nouveau document, utilisez la dernière valeur pour obtenir le nombre maximal par intervalle temporel au lieu d'additionner les doublons.
Snapshot actuel : utilisez un tableau de données avec les dernières valeurs captured_at pour afficher les nombres de vues les plus récents sur tous les tableaux de bord.

Étant donné que chaque workflow crée un nouveau document, vous pouvez filtrer par plage horaire pour analyser l'activité sur des périodes spécifiques, comparer d'une semaine à l'autre ou créer des alertes lorsqu'un tableau de bord passe en dessous d'un seuil d'affichage.

Conclusion

Elastic Workflows est parfaitement adapté à ce type de collecte de données périodique, car la source (API Kibana) et la destination (Elasticsearch) sont natives, ce qui élimine toute gestion d'identifiants. Le moteur de workflow gérant automatiquement l'authentification pour les étapes kibana.request et elasticsearch.request, vous n'avez qu'à écrire la logique.

Ressources

Elastic Open Web Crawler en tant que code

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

Avec Elastic Open Web Crawler et son architecture pilotée par CLI, il est désormais assez simple d'avoir des configurations de crawler versionnées et un pipeline CI/CD avec des tests locaux.

Traditionnellement, la gestion des robots d'indexation était un processus manuel et sujet aux erreurs. Il s'agissait de modifier les configurations directement dans l'interface utilisateur et de se débattre avec le clonage des configurations de crawl, le retour en arrière, la gestion des versions, etc. Traiter les configurations des robots comme du code résout ce problème en offrant les mêmes avantages que ceux que nous attendons du développement de logiciels : répétabilité, traçabilité et automatisation.

Ce flux de travail facilite l'intégration de l'Open Web Crawler dans votre pipeline CI/CD pour les retours en arrière, les sauvegardes et les migrations, tâches qui étaient beaucoup plus délicates avec les Elastic Crawlers précédents, tels que l'Elastic Web Crawler ou l'App Search Crawler.

Dans cet article, nous allons apprendre à.. :

Gérer nos configurations de crawl en utilisant GitHub
Disposer d'une installation locale pour tester les pipelines avant de les déployer
Créer une configuration de production pour exécuter le robot d'exploration avec de nouveaux paramètres à chaque fois que nous apportons des modifications à notre branche principale.

Vous pouvez trouver le dépôt du projet ici. Pour l'instant, j'utilise Elasticsearch 9.1.3 et Open Web Crawler 0.4.2.

Produits requis

Bureau Docker
Instance Elasticsearch
Machine virtuelle avec accès SSH (par exemple, AWS EC2) et Docker installé.

Étapes

Structure des dossiers
Configuration du robot
Fichier Docker-compose (environnement local)
Actions Github
Tests au niveau local
Déploiement vers prod
Modifications et redéploiement

Structure des dossiers

Pour ce projet, nous aurons la structure de fichier suivante :

├── 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

Configuration du robot

Sous crawler-config.yml,, nous mettrons les éléments suivants :

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

Il s'agit d'une recherche à partir de https://web-scraping.dev/products, un site fictif pour les produits. Nous ne parcourrons que les trois premières pages du produit. Le paramètre max_crawl_depth empêchera le robot d'exploration de découvrir d'autres pages que celles définies comme seed_urls en n'ouvrant pas les liens qu'elles contiennent.

Elasticsearch host et api_key seront alimentés dynamiquement en fonction de l'environnement dans lequel nous exécutons le script.

Fichier Docker-compose (environnement local)

Pour le site local docker-compose.yml,, nous allons déployer le crawler et un seul cluster Elasticsearch + Kibana, de sorte que nous puissions facilement visualiser nos résultats de crawling avant de les déployer en production.

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

Notez que le crawler attend qu'Elasticsearch soit prêt à fonctionner.

Actions Github

Nous devons maintenant créer une action GitHub qui copiera les nouveaux paramètres et exécutera le crawler dans notre machine virtuelle à chaque poussée vers main. Ainsi, nous disposons toujours de la dernière configuration déployée, sans avoir à entrer manuellement dans la machine virtuelle pour mettre à jour les fichiers et exécuter le crawler. Nous allons utiliser AWS EC2 comme fournisseur de machines virtuelles.

La première étape consiste à ajouter l'hôte (VM_HOST), l'utilisateur de la machine (VM_USER), la clé RSA SSH (VM_KEY), l'hôte Elasticsearch (ES_HOST) et la clé API Elasticsearch (ES_API_KEY) aux secrets d'action GitHub :

De cette manière, l'action pourra accéder à notre serveur pour copier les nouveaux fichiers et exécuter le crawl.

Maintenant, créons notre fichier .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

Cette action exécutera les étapes suivantes à chaque fois que des modifications seront apportées au fichier de configuration du crawler :

Renseigner l'hôte Elasticsearch et la clé API dans la configuration yml
Copier le dossier config sur notre VM
Se connecter via SSH à notre VM
Exécuter le crawl avec la configuration que nous venons de copier depuis le repo

Tests au niveau local

Pour tester notre crawler localement, nous avons créé un script bash qui remplit l'hôte Elasticsearch avec l'hôte local de Docker et démarre un crawl. Vous pouvez lancer ./local.sh pour l'exécuter.

#!/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

Regardons Kibana DevTools pour confirmer que le site web-crawler-index a été correctement renseigné :

Déploiement vers prod

Nous sommes maintenant prêts à pousser vers la branche principale, ce qui déploiera le crawler dans votre machine virtuelle et commencera à envoyer des logs à votre instance Serverless Elasticsearch.

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

Cela déclenchera l'action GitHub, qui exécutera le script de déploiement dans la machine virtuelle et commencera l'exploration.

Vous pouvez confirmer que l'action a été exécutée en allant sur le dépôt GitHub et en visitant l'onglet "Actions" :

Modifications et redéploiement

Vous avez peut-être remarqué que le site price de chaque produit fait partie du champ "body" du document. L'idéal serait de stocker le prix dans un champ distinct afin de pouvoir utiliser des filtres.

Ajoutons cette modification au fichier crawler.yml afin d'utiliser des règles d'extraction pour extraire le prix de la classe CSS 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

Nous constatons également que le prix comprend un signe de dollar ($), que nous devons supprimer si nous voulons exécuter des requêtes de plage. Nous pouvons utiliser un pipeline d'acquisition pour cela. Notez que nous y faisons référence dans notre nouveau fichier de configuration du crawler ci-dessus :

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

Nous pouvons exécuter cette commande dans notre cluster Elasticsearch de production. Pour celui de développement, comme il est éphémère, nous pouvons intégrer la création du pipeline dans le fichier docker-compose.yml en ajoutant le service suivant. Notez que nous avons également ajouté un depends_on au service crawler afin qu'il démarre après la création réussie du pipeline.

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!'; "

Exécutons maintenant `./local.sh` pour voir les changements localement :

C'est très bien ! Poussons maintenant la modification :

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

Pour confirmer que tout fonctionne, vous pouvez vérifier votre Kibana de production, qui devrait refléter les changements et afficher le prix comme un nouveau champ sans le signe du dollar.

Conclusion

Elastic Open Web Crawler vous permet de gérer votre crawler en tant que code, ce qui signifie que vous pouvez automatiser l'ensemble du pipeline - du développement au déploiement - et ajouter des environnements locaux éphémères et des tests sur les données explorées de manière programmatique, pour ne citer que quelques exemples.

Vous êtes invités à cloner le dépôt officiel et à commencer à indexer vos propres données à l'aide de ce flux de travail. Vous pouvez également lire cet article pour apprendre comment effectuer une recherche sémantique sur les index produits par le crawler.

Création d'une application de recherche avec Blazor et Elasticsearch

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

Dans cet article, vous apprendrez à tirer parti de vos compétences en C# pour créer une application de recherche à l'aide de Blazor et d'Elasticsearch. Nous allons utiliser le client Elasticsearch .NET pour exécuter des requêtes de recherche plein texte, sémantique et hybride.

NOTE Si vous êtes familier avec l'ancienne version du client Elasticsearch C# NEST, lisez cet article de blog sur la dépréciation du client NEST et les nouvelles fonctionnalités. NEST était la génération précédente du client .NET, qui a été remplacée par le client Elastic.Clients.Elasticsearch package

Qu'est-ce que Blazor ?

Blazor est un framework web open source basé sur HTML, CSS et C# créé par Microsoft pour permettre aux développeurs de créer des applications web qui s'exécutent sur le client ou le serveur. Blazor vous permet également de créer des composants réutilisables pour construire des applications plus rapidement ; il permet aux développeurs de construire la vue HTML et les actions en C# dans le même fichier, ce qui aide à maintenir un code lisible et propre. De plus, avec Blazor Hybrid, vous pouvez créer des applications mobiles natives accédant aux capacités de la plateforme native via le code .NET.

Quelques-unes des caractéristiques qui font de Blazor un framework idéal pour travailler :

Options de rendu côté serveur et côté client
Composants réutilisables de l'interface utilisateur
Mises à jour en temps réel avec SignalR
Gestion intégrée des états
Système de routage intégré
Vérifications solides du typage et de la compilation

Pourquoi Blazor ?

Blazor offre plusieurs avantages par rapport à d'autres cadres et bibliothèques : il permet aux développeurs d'utiliser le langage C# pour le code client et le code serveur, en fournissant un typage fort et une vérification au moment de la compilation, ce qui améliore la fiabilité. Il s'intègre parfaitement à l'écosystème .NET, permettant la réutilisation de bibliothèques et d'outils .NET, et offre un support de débogage robuste.

Qu'est-ce que l'ESRE ?

Elasticsearch Relevance Engine™ (ESRE ) est un ensemble d'outils permettant de créer des applications de recherche utilisant l'apprentissage automatique et l'intelligence artificielle au-dessus du puissant moteur de recherche Elasticsearch.

Pour en savoir plus sur l'ESRE, vous pouvez lire notre article de blog ici.

Configuration d'ELSER

Pour tirer parti des capacités ESRE d'Elastic, nous allons utiliser ELSER comme fournisseur de modèle.

Remarque : pour utiliser les modèles ELSER d'Elasticsearch, vous devez disposer d'une licence Platinum ou Enterprise, et d'un nœud de Machine Lerning (ML) dédié d'une taille minimale de 4 Go. Pour en savoir plus, cliquez ici.

Commencez par créer le point d'arrivée de l'inférence :

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

Si vous utilisez ELSER pour la première fois, il se peut que vous rencontriez une erreur 502 Bad Gateway lorsque le modèle se charge en arrière-plan. Vous pouvez vérifier l'état du modèle sur Machine Learning > Trained Models dans Kibana. Une fois qu'il est déployé, vous pouvez passer à l'étape suivante.

Indexation des données

Vous pouvez télécharger le jeu de données ici et importer les données à l'aide de Kibana. Pour ce faire, allez sur la page d'accueil et cliquez sur "Upload data". Ensuite, téléchargez le fichier et cliquez sur Import. Enfin, allez dans l'onglet Advanced et collez les mappings suivants :

{ "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" } } }

Nous allons créer un index capable d'exécuter des requêtes sémantiques et en texte intégral. Le type de champ semantic_text se chargera du découpage et de l'intégration des données. Notez que nous indexons longDescription comme semantic_text, vous pouvez utiliser copy_to si vous voulez indexer un champ comme semantic_text et text`.

Construire l'application avec Blazor & Elasticsearch

Clé API

La première chose à faire est de créer une clé API pour authentifier nos requêtes à Elasticsearch. La clé API doit être en lecture seule et n'être autorisée qu'à interroger l'index books-blazor.

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

Vous verrez quelque chose comme ceci :

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

Enregistrez la valeur du champ de réponse encoded car vous en aurez besoin ultérieurement. Si vous travaillez sur Elastic Cloud, vous aurez également besoin de votre Cloud ID. (Vous pouvez le trouver ici).

Création du projet Blazor

Commencez par installer Blazor et créez un projet d'exemple en suivant les instructions officielles.

Une fois le projet créé, la structure des dossiers et des fichiers doit ressembler à ceci :

Le modèle d'application comprend Bootstrap v5.1.0 pour le stylisme.

Terminez la configuration du projet en installant le client Elasticsearch .NET :

dotnet add package Elastic.Clients.Elasticsearch

Une fois cette étape terminée, votre page devrait ressembler à ceci :

Structure des dossiers

Nous allons maintenant organiser nos dossiers comme suit :

Les dossiers sont expliqués :

Components/Pages/Search.razor : page principale contenant la barre de recherche, les résultats et les filtres.
Composants/Pages/Search.razor.css : les styles de page.
Components/Elasticsearch/SearchBar.razor : composant de barre de recherche.
Components/Elasticsearch/Results.razor : composant de résultats.
Components/Elasticsearch/Facet.razor : composant de filtres.
Components/Svg/GlassIcon.razor : icône de recherche.
Components/_Imports.razor : ce fichier importera tous les composants.
Models/Book.cs : ce fichier contient le schéma du champ livre.
Models/Response.cs : ce fichier stocke le schéma de la réponse, y compris les résultats de la recherche, les facettes et le nombre total de résultats.
Services/ElasticsearchService.cs : Service Elasticsearch. Il gère la connexion et les requêtes à Elasticsearch.

Configuration initiale

Commençons par un peu de nettoyage.

Supprimer les fichiers :

Composants/Pages/Compteur.razor
Composants/Pages/Météo.razor
Composants/Pages/Home.razor
Components/Layout/NavMenu.razor
Composants/Layout/NavMenu.razor.css

Vérifiez le fichier /Components/_Imports.razor. Vous devriez avoir les importations suivantes :

@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

Intégrer Elastic dans le projet

Maintenant, importons les composants d'Elasticsearch :

Nous allons supprimer la barre latérale par défaut afin de disposer de plus d'espace pour notre application en la supprimant du fichier /Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

@Body

An unhandled error has occurred. Reload 🗙

Entrons maintenant les informations d'identification Elasticsearch pour les secrets d'utilisateur:

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

Grâce à cette approche, .Net 8 stocke les données sensibles dans un emplacement distinct, en dehors du dossier du projet, et les rend accessibles à l'aide de l'interface IConfiguration. Ces variables seront disponibles pour tout projet .Net qui utilise les mêmes secrets d'utilisateur.

Ensuite, modifions le fichier Program.cs pour lire les secrets et monter le client Elasticsearch :

Tout d'abord, il faut importer les bibliothèques nécessaires :

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

BlazorApp.Services : contient le service Elasticsearch.
Elastic.Clients.Elasticsearch : importe la bibliothèque .Net 8 du client Elasticsearch.
Elastic.Transport : importe la bibliothèque de transport Elasticsearch, ce qui nous permet d'utiliser la classe ApiKey pour authentifier nos requêtes.

Deuxièmement, insérez le code suivant avant la ligne 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); });

Ce code va lire les informations d'identification Elasticsearch à partir des secrets d'utilisateur et créer une instance de client Elasticsearch.

Après l'initialisation du client ElasticSearch, ajoutez la ligne suivante pour enregistrer le service Elasticsearch :

builder.Services.AddScoped();

L'étape suivante consistera à construire la logique de recherche dans le fichier /Services/ElasticsearchService.cs:

Tout d'abord, il faut importer les bibliothèques et les modèles nécessaires :

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

Ensuite, ajoutez la classe ElasticsearchService, le constructeur et les 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; } } }

Configuration de la recherche

Construisons maintenant notre logique de recherche :

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 construira les filtres pour la requête de recherche en utilisant les facettes sélectionnées par l'utilisateur.
BuildHybridQuery construira une requête de recherche hybride qui combine la recherche plein texte et la recherche sémantique.

Ensuite, ajoutez la méthode de recherche :

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: effectuera la recherche en utilisant la requête hybride et renverra les résultats en incluant les agrégations pour construire les facettes.
FormatFacets: formatera la réponse des agrégations dans un dictionnaire.
ConvertFacetDictionary: convertit le dictionnaire de facettes dans un format plus lisible.

L'étape suivante consiste à créer les modèles qui représenteront les données renvoyées dans le site hits de la requête Elasticsearch et qui seront imprimées en tant que résultats dans notre page de recherche.

Nous commençons par créer le fichier /Models/Book.cs et y ajouter ce qui suit :

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; } } }

Ensuite, il faut configurer la réponse Elastic dans le fichier /Models/Response.cs et ajouter ce qui suit :

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; } } }

Configuration d'une interface utilisateur de base

Ensuite, ajoutez le composant SearchBar. Dans le fichier /Components/Elasticsearch/SearchBar.razor, ajoutez ce qui suit :

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

Ce composant contient une barre de recherche et un bouton pour effectuer la recherche.

Blazor offre une grande flexibilité en permettant de générer du HTML dynamiquement en utilisant du code C# dans le même fichier.

Ensuite, dans le fichier /Components/Elasticsearch/Results.razor, nous construirons le composant de résultats qui affichera les résultats de la recherche :

@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 ""; } }

Enfin, nous devons créer des facettes pour filtrer les résultats de la recherche.

Remarque : les facettes sont des filtres qui permettent aux utilisateurs d'affiner les résultats de leur recherche en fonction d'attributs ou de catégories spécifiques, tels que le type de produit, la fourchette de prix ou la marque. Ces filtres sont généralement présentés sous forme d'options cliquables, souvent sous forme de cases à cocher, afin d'aider les utilisateurs à affiner leur recherche et à trouver plus facilement des résultats pertinents. Dans le contexte d'Elasticsearch, les facettes sont créées à l'aide d' agrégations.

Nous configurons les facettes en plaçant le code suivant dans le fichier /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); } }

Ce composant lit une agrégation terms sur les champs author, categories et status, puis produit une liste de filtres à renvoyer à Elasticsearch.

Mettons tout cela bout à bout.

Dans le fichier /Components/Pages/Search.razor:

@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); } }

Notre page fonctionne !

Comme vous pouvez le constater, la page est fonctionnelle mais manque de style. Ajoutons quelques feuilles de style CSS pour le rendre plus organisé et plus réactif.

Commençons par remplacer les styles de présentation. Dans le fichier 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; }

Ajoutez les styles pour la page de recherche dans le fichier 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; } }

Notre page commence à s'améliorer :

Mettons-y les dernières touches :

Créez les fichiers suivants :

Composants/Elasticsearch/Facet.razor.css
Composants/Elasticsearch/Results.razor.css

Et ajoutez les styles pour 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; }

Pour 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; }

Résultat final :

Pour lancer l'application, vous pouvez utiliser la commande suivante :

dotnet watch

Vous avez réussi ! Vous pouvez désormais rechercher des livres dans votre index Elasticsearch en utilisant la barre de recherche et filtrer les résultats par auteur, catégorie et statut.

Effectuer une recherche plein texte et sémantique

Par défaut, notre application effectuera une recherche hybride utilisant à la fois le texte intégral et la recherche sémantique. Vous pouvez modifier la logique de recherche en créant deux méthodes distinctes, l'une pour le texte intégral et l'autre pour la recherche sémantique, puis en sélectionnant une méthode pour élaborer la requête en fonction des données saisies par l'utilisateur.

Ajoutez les méthodes suivantes à la classe ElasticsearchService dans le fichier /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()) ); }

Ces deux méthodes fonctionnent de manière similaire à la méthode BuildHybridQuery, mais elles n'effectuent qu'une recherche plein texte ou sémantique.

Vous pouvez modifier la méthode SearchBooksAsync pour utiliser la méthode de recherche sélectionnée :

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(); } }

Vous pouvez trouver le formulaire complet ici

Conclusion

Blazor est un framework efficace qui vous permet de construire des applications web en utilisant C#. Elasticsearch est un moteur de recherche puissant qui vous permet de créer des applications de recherche. En combinant les deux, vous pouvez facilement créer des applications de recherche robustes, en tirant parti de la puissance d'ESRE pour créer une expérience de recherche sémantique en peu de temps.

Gustavo Llermaly - Elasticsearch Labs

Monitorer des vues des tableaux de bord Kibana avec Elastic Workflows

Produits requis

Étape 1 : Explorer les données brutes dans les Outils de développement

Étape 2 : Créer l'index de destination

Étape 3 : Créer le workflow

Fonctionnement du workflow

Déclencheurs

récupérer les vues du tableau de bord

index_each_dashboard (foreach)

Étape 4 : Créer le tableau de bord des statistiques

Conclusion

Ressources

Elastic Open Web Crawler en tant que code

Produits requis

Étapes

Structure des dossiers

Configuration du robot

Fichier Docker-compose (environnement local)

Actions Github

Tests au niveau local

Déploiement vers prod

Modifications et redéploiement

Conclusion

Création d'une application de recherche avec Blazor et Elasticsearch

Qu'est-ce que Blazor ?

Pourquoi Blazor ?

Qu'est-ce que l'ESRE ?

Configuration d'ELSER

Indexation des données

Construire l'application avec Blazor & Elasticsearch

Clé API

Création du projet Blazor

Structure des dossiers

Configuration initiale

Intégrer Elastic dans le projet

Configuration de la recherche

Configuration d'une interface utilisateur de base

@result?.Title

@facet.Key

Semantic Search with Elasticsearch and Blazor

Effectuer une recherche plein texte et sémantique

Conclusion