Gustavo Llermaly - Elasticsearch Labs

Monitorando as visualizações do dashboard do Kibana com o Elastic Workflows

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

O Kibana rastreia quantas vezes cada dashboard é visualizado, mas esses dados não são expostos nativamente em nenhum dashboard integrado. Neste artigo, vamos usar o Elastic Workflows para coletar automaticamente esses dados a cada 30 minutos e indexá-los no Elasticsearch, para que possamos criar nossa própria analítica sobre eles.

O Elastic Workflows é um mecanismo de automação integrado dentro do Kibana que permite definir processos de várias etapas usando uma simples configuração YAML. Cada fluxo de trabalho pode ser acionado em um cronograma ou evento ou como uma ferramenta no Elastic Agent Builder, e cada etapa pode chamar APIs do Kibana, consultar o Elasticsearch ou transformar dados.

Vamos usar as contagens de visualização de dashboards como um exemplo concreto, mas o mesmo padrão se aplica a qualquer métrica exposta pela API de objetos salvos do Kibana.

Pré-requisitos

Elastic Cloud ou cluster autogerenciado executando a versão 9.3
Fluxos de trabalho ativados (Configurações avançadas)

Passo 1: explorar os dados brutos no Dev Tools

Antes de construir qualquer coisa, vamos entender quais dados temos. O Kibana armazena a maior parte de sua configuração e metadados como objetos salvos em um índice interno dedicado. Uma das coisas que o Kibana monitora dessa forma são as contagens de visualizações do dashboard, usando um tipo especial de objeto salvo chamado contadores de uso. Você pode consultá-los diretamente pelas Ferramentas de Desenvolvimento:

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

A resposta tem aparência semelhante a esta:

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

O campo counterName é o ID do dashboard, e count é a contagem cumulativa de visualizações para aquele dashboard naquele dia específico. Kibana cria um objeto contador por dashboard por dia; você pode ver o sufixo de data no ID do objeto (... visualizado:servidor:20260310). A contagem cresce ao longo do dia à medida que os usuários abrem o dashboard.

Em vez de replicar esse modelo de documento diário em nosso índice, criaremos um documento por execução de fluxo de trabalho. Cada documento registra quantas visualizações aquele dashboard acumulou no dia no momento da captura.

Passo 2: criar o índice de destino

Precisamos de um índice para armazenar os snapshots da vista do nosso dashboard. O comando a seguir cria com mapeamentos explícitos para que possamos agregar e visualizar depois. Execute isso nas ferramentas de desenvolvimento:

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

O uso de mapeamentos keyword para IDs e nomes permite agregações. Usar integer para view_count é um padrão seguro, já que o Kibana reinicia o contador diariamente e atingir o limite de 32 bits (mais de 2 bilhões de visualizações em um único dia) não é uma preocupação realista. Ainda permite operações numéricas, como max, avg e min, entre outras.

Passo 3: Crie o fluxo de trabalho

Acesse Stack Management > Fluxo de trabalho > Novo Fluxo de Trabalho e cole a seguinte configuração YAML do fluxo de trabalho:

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

Na próxima seção, vamos analisar o fluxo de trabalho passo a passo.

Como funciona o fluxo de trabalho

Gatilhos

O fluxo de trabalho é executado com um gatilho programado a cada 30 minutos. Isso nos fornece dados de séries temporais sem sobrecarregar a API.

buscar_visualizações_do_painel

Usa kibana.request para chamar a API de objetos salvos do Kibana. Não é necessário configurar autenticação: o motor de fluxo de trabalho anexa automaticamente os cabeçalhos corretos com base no contexto de execução.

index_each_dashboard (foreach)

Itera sobre o array saved_objects retornado pela etapa anterior. O item atual em cada iteração está disponível como foreach.item. Dentro do loop, executamos duas etapas aninhadas para cada dashboard.

1. fetch_dashboard_name:

Resolve o título do dashboard legível por humanos chamando GET /api/saved_objects/dashboard/{id}. Adicionamos on-failure: continue: true para que, se um dashboard for excluído mas ainda tiver contadores de visualização, o loop continue em vez de falhar toda a execução.

2. index_doc:

Indexa cada documento usando POST /dashboard-views/_doc (sem um ID explícito), o que permite que o Elasticsearch gere IDs automaticamente. Isso cria um novo documento a cada execução, construindo um histórico de contagens de visualizações ao longo do tempo, em vez de sobrescrever o snapshot anterior.

Duas coisas que valem a pena notar:

O campo captured_at usa o filtro de data para formatar o carimbo de data/hora como ISO 8601. Sem isso, o valor aparece como uma string de data em JavaScript, como Tue Mar 10 2026 05:03:47 GMT+0000, que o Elasticsearch não mapeia como data.
O view_count usa a sintaxe ${{ }} com | plus: 0 para preservar o tipo numérico. Usar {{ }} o renderizaria como uma string, o que impediria operações matemáticas no dashboard.

A UI permite que você depure cada uma das etapas do fluxo de trabalho.

Etapa 4: Crie o dashboard de estatísticas

Depois que o fluxo de trabalho for executado algumas vezes e os dados forem coletados, crie um novo dashboard no Kibana usando a Data view dashboard-views.

Alguns painéis para começar:

Principais dashboards por visualizações: use um gráfico de barras com dashboard_name no eixo X e last_value(view_count) no eixo Y. Isso mostra a contagem diária atual de visualizações por dashboard.
Visualizações ao longo do tempo: use um gráfico de linhas com captured_at no eixo X e last_value(view_count) no eixo Y, dividido por dashboard_name. Como cada execução adiciona um novo documento, use o último valor para obter a contagem de picos por buckets, em vez de somar duplicados.
Snapshot atual: use uma tabela de dados com os captured_at mais recentes para mostrar as contagens de visualizações mais recentes em todos os dashboards.

Como cada fluxo de trabalho cria um novo documento, você pode filtrar por faixa de tempo para analisar a atividade em períodos específicos, comparar semana a semana ou criar alertas quando um dashboard cair abaixo de um limite de visualização.

Conclusão

O Elastic Workflows é uma boa opção para esse tipo de coleta periódica de dados porque tanto a fonte (Kibana API) quanto o destino (Elasticsearch) são nativos, o que significa zero gerenciamento de credenciais. O motor de fluxo de trabalho lida automaticamente com autenticação para kibana.request e elasticsearch.request etapas, então a única coisa que você escreve é a lógica.

Recursos

Elastic Open Web Crawler como código

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

Com o Elastic Open Web Crawler e sua arquitetura orientada por linha de comando, ter configurações de crawler versionadas e um pipeline de CI/CD com testes locais agora é bastante simples de se obter.

Tradicionalmente, o gerenciamento de rastreadores era um processo manual e propenso a erros. Isso envolvia editar configurações diretamente na interface do usuário e ter dificuldades com a clonagem de configurações de rastreamento, reversão, controle de versão e muito mais. Tratar as configurações do rastreador como código resolve isso, proporcionando os mesmos benefícios que esperamos no desenvolvimento de software: repetibilidade, rastreabilidade e automação.

Esse fluxo de trabalho facilita a integração do Open Web Crawler ao seu pipeline de CI/CD para reversões, backups e migrações — tarefas que eram muito mais complicadas com versões anteriores do Elastic Crawler, como o Elastic Web Crawler ou o App Search Crawler.

Neste artigo, vamos aprender como:

Gerencie nossas configurações de rastreamento usando o GitHub.
Ter um ambiente local para testar pipelines antes da implantação.
Criar um ambiente de produção para executar o rastreador web com novas configurações sempre que enviarmos alterações para nossa branch principal.

Você pode encontrar o repositório do projeto aqui. No momento em que escrevo, estou usando o Elasticsearch 9.1.3 e o Open Web Crawler 0.4.2.

Pré-requisitos

Docker Desktop
instância do Elasticsearch
Máquina virtual com acesso SSH (por exemplo, AWS EC2) e Docker instalado.

Etapas

Estrutura de pastas
Configuração do rastreador
Arquivo Docker-compose (ambiente local)
Ações do GitHub
Testando localmente
Implantação em produção
Realizar alterações e redistribuir

Estrutura de pastas

Para este projeto, teremos a seguinte estrutura de arquivos:

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

Configuração do rastreador

Em crawler-config.yml, colocaremos o seguinte:

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

Este script irá extrair dados de https://web-scraping.dev/products, um site fictício para produtos. Iremos rastrear apenas as três primeiras páginas de produtos. A configuração max_crawl_depth impedirá que o rastreador descubra mais páginas do que as definidas como seed_urls , não abrindo os links dentro delas.

Elasticsearch host e api_key serão preenchidos dinamicamente dependendo do ambiente em que estamos executando o script.

Arquivo Docker-compose (ambiente local)

Para o ambiente local docker-compose.yml, implantaremos o rastreador e um único cluster Elasticsearch + Kibana, para que possamos visualizar facilmente os resultados do rastreamento antes da implantação em produção.

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

Observe como o rastreador aguarda até que o Elasticsearch esteja pronto para ser executado.

Ações do GitHub

Agora precisamos criar uma ação do GitHub que copie as novas configurações e execute o rastreador em nossa máquina virtual a cada push para o repositório principal. Isso garante que sempre tenhamos a configuração mais recente implantada, sem precisar entrar manualmente na máquina virtual para atualizar arquivos e executar o rastreador. Vamos usar o AWS EC2 como provedor de máquinas virtuais.

O primeiro passo é adicionar o host (VM_HOST), o usuário da máquina (VM_USER), a chave SSH RSA (VM_KEY), o host do Elasticsearch (ES_HOST) e a chave da API do Elasticsearch (ES_API_KEY) aos segredos da ação do GitHub:

Dessa forma, a ação poderá acessar nosso servidor para copiar os novos arquivos e executar a indexação.

Agora, vamos criar nosso arquivo .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

Essa ação executará os seguintes passos sempre que enviarmos alterações para o arquivo de configuração do rastreador:

Preencha o arquivo de configuração YAML com o host e a chave da API do Elasticsearch.
Copie a pasta de configuração para a nossa máquina virtual.
Conecte-se à nossa VM via SSH.
Execute o rastreamento com a configuração que acabamos de copiar do repositório.

Testando localmente

Para testar nosso rastreador localmente, criamos um script bash que popula o host do Elasticsearch com a versão local do Docker e inicia uma busca. Você pode executar ./local.sh para executá-lo.

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

Vamos verificar as Ferramentas de Desenvolvedor do Kibana para confirmar se o campo web-crawler-index foi preenchido corretamente:

Implantação em produção

Agora estamos prontos para enviar a alteração para a branch principal, o que implantará o crawler em sua máquina virtual e começará a enviar logs para sua instância do Elasticsearch Serverless.

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

Isso acionará a ação do GitHub, que executará o script de implantação na máquina virtual e iniciará a indexação.

Você pode confirmar se a ação foi executada acessando o repositório do GitHub e visitando a aba “Ações”:

Realizar alterações e redistribuir

Algo que você pode ter notado é que o price de cada produto faz parte do corpo do documento. O ideal seria armazenar o preço em um campo separado para que pudéssemos aplicar filtros a ele.

Vamos adicionar essa alteração ao arquivo crawler.yml para usar regras de extração para extrair o preço da 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

Também vemos que o preço inclui um sinal de dólar ($), que devemos remover se quisermos executar consultas de intervalo. Podemos usar um pipeline de ingestão para isso. Observe que estamos fazendo referência a ele em nosso novo arquivo de configuração do rastreador acima:

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

Podemos executar esse comando em nosso cluster Elasticsearch de produção. Para o desenvolvimento, como é efêmero, podemos fazer com que a criação do pipeline faça parte do arquivo docker-compose.yml adicionando o seguinte serviço. Observe que também adicionamos um depends_on ao serviço de rastreamento para que ele seja iniciado após a criação bem-sucedida do 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!'; "

Agora vamos executar `./local.sh` para ver a alteração localmente:

Ótimo! Agora vamos impulsionar a mudança:

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

Para confirmar se tudo funciona corretamente, você pode verificar seu Kibana de produção, que deverá refletir as alterações e mostrar o preço como um novo campo sem o símbolo de dólar.

Conclusão

O Elastic Open Web Crawler permite que você gerencie seu crawler como código, o que significa que você pode automatizar todo o pipeline — do desenvolvimento à implantação — e adicionar ambientes locais efêmeros e testes com os dados rastreados programaticamente, para citar alguns exemplos.

Você está convidado a clonar o repositório oficial e começar a indexar seus próprios dados usando este fluxo de trabalho. Você também pode ler este artigo para aprender como executar uma pesquisa semântica em índices produzidos pelo rastreador.

Criando um app de buscas com o Blazor e o Elasticsearch

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

Neste artigo, você aprenderá como aproveitar suas habilidades em C# para criar um aplicativo de busca usando Blazor e Elasticsearch. Vamos usar o cliente Elasticsearch .NET para executar consultas de pesquisa de texto completo, semântica e híbrida .

NOTA: Se você estiver familiarizado com a versão antiga do cliente C# do Elasticsearch, o NEST, leia esta postagem do blog sobre a descontinuação do cliente NEST e seus novos recursos. O NEST era a geração anterior do cliente .NET, que foi substituído pelo Elastic.Clients.Elasticsearch package

O que é Blazor?

Blazor é um framework web de código aberto baseado em HTML, CSS e C#, criado pela Microsoft para permitir que desenvolvedores criem aplicações web que rodam tanto no cliente quanto no servidor. O Blazor também permite criar componentes reutilizáveis para desenvolver aplicações mais rapidamente; ele possibilita que os desenvolvedores criem a visualização HTML e as ações em C# no mesmo arquivo, o que ajuda a manter um código legível e limpo. Além disso, com o Blazor Hybrid, você pode criar aplicativos móveis nativos acessando os recursos nativos da plataforma por meio de código .NET.

Algumas das características que fazem do Blazor uma ótima estrutura para se trabalhar:

Opções de renderização do lado do servidor e do lado do cliente
Componentes de interface do usuário reutilizáveis
Atualizações em tempo real com SignalR
Gerenciamento de estado integrado
Sistema de roteamento integrado
Tipagem forte e verificações em tempo de compilação

Por que Blazor?

O Blazor oferece diversas vantagens em relação a outros frameworks e bibliotecas: permite que os desenvolvedores usem C# tanto para o código do cliente quanto para o código do servidor, fornecendo tipagem forte e verificação em tempo de compilação, o que aumenta a confiabilidade. Ele se integra perfeitamente ao ecossistema .NET, permitindo a reutilização de bibliotecas e ferramentas .NET, e oferece suporte robusto para depuração.

O que é ESRE?

O Elasticsearch Relevance Engine ™ (ESRE) é um conjunto de ferramentas para criar aplicações de busca utilizando aprendizado de máquina e inteligência artificial sobre o poderoso mecanismo de busca Elasticsearch.

Para saber mais sobre ESRE, você pode ler nossa postagem esclarecedora no blog, que está disponível aqui.

Configurando o ELSER

Para aproveitar os recursos do ESRE da Elastic, usaremos o ELSER como nosso provedor de modelos.

Para usar os modelos ELSER do Elasticsearch, você precisa de uma licença Platinum ou Enterprise e de um nó dedicado para Machine Learning (ML) com no mínimo 4 GB de espaço. Saiba mais aqui.

Comece criando o ponto de extremidade de inferência:

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

Se esta for a sua primeira vez usando o ELSER, você poderá encontrar um erro 502 Bad Gateway enquanto o modelo é carregado em segundo plano. Você pode verificar o status do modelo em Machine Learning > Trained Models no Kibana. Após a implantação, você poderá prosseguir para a próxima etapa.

Dados de indexação

Você pode baixar o conjunto de dados aqui e, em seguida, importar os dados usando o Kibana. Para isso, acesse a página inicial e clique em "Carregar dados". Em seguida, carregue o arquivo e clique em Import. Por fim, acesse a aba Advanced e cole os seguintes mapeamentos:

{ "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 criar um índice capaz de executar consultas semânticas e de texto completo. O tipo de campo semantic_text cuidará do agrupamento e da incorporação dos dados. Observe que estamos indexando longDescription como semantic_text, você pode usar copy_to se quiser indexar um campo como semantic_text e text`.

Construindo o aplicativo com Blazor e Elasticsearch

Chave de API

A primeira coisa que precisamos fazer é criar uma chave de API para autenticar nossas solicitações ao Elasticsearch. A chave da API deve ser somente leitura e permitir apenas consultas ao índice books-blazor .

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

Você verá algo parecido com isto:

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

Salve o valor do campo de resposta encoded , pois ele será necessário posteriormente. Se você estiver usando o Elastic Cloud, também precisará do seu ID da nuvem. (Você pode encontrá-lo aqui).

Criando o projeto Blazor

Comece instalando o Blazor e criando um projeto de exemplo seguindo as instruções oficiais.

Após a criação do projeto, a estrutura de pastas e arquivos deve ser semelhante a esta:

O aplicativo modelo inclui o Bootstrap v5.1.0. para estilização.

Finalize a configuração do projeto instalando o cliente Elasticsearch .NET :

dotnet add package Elastic.Clients.Elasticsearch

Após concluir esta etapa, sua página deverá ter esta aparência:

Estrutura de pastas

Agora, vamos organizar nossas pastas da seguinte forma:

Explicação dos arquivos:

Components/Pages/Search.razor: página principal contendo a barra de pesquisa, os resultados e os filtros.
Components/Pages/Search.razor.css: estilos de página.
Components/Elasticsearch/SearchBar.razor: componente da barra de pesquisa.
Components/Elasticsearch/Results.razor: componente de resultados.
Components/Elasticsearch/Facet.razor: componente de filtros.
Components/Svg/GlassIcon.razor: ícone de pesquisa.
Components/_Imports.razor: este arquivo importará todos os componentes.
Models/Book.cs: este arquivo armazenará o esquema do campo do livro.
Models/Response.cs: este arquivo armazenará o esquema de resposta, incluindo os resultados da pesquisa, as facetas e o total de resultados.
Services/ElasticsearchService.cs: Serviço Elasticsearch. Ele será responsável pela conexão e pelas consultas ao Elasticsearch.

Configuração inicial

Vamos começar com uma limpeza.

Apague os arquivos:

Components/Pages/Counter.razor
Componentes/Páginas/Weather.razor
Componentes/Páginas/Home.razor
Components/Layout/NavMenu.razor
Components/Layout/NavMenu.razor.css

Verifique o arquivo /Components/_Imports.razor . Você deve ter as seguintes importações:

@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

Integrando o Elastic ao projeto

Agora, vamos importar os componentes do Elasticsearch:

Vamos remover a barra lateral padrão para termos mais espaço para nossa aplicação, removendo-a do arquivo /Components/Layout/MainLayout.razor :

@inherits LayoutComponentBase

@Body

An unhandled error has occurred. Reload 🗙

Agora vamos inserir as credenciais do Elasticsearch para os segredos do usuário:

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

Usando esta abordagem, o .Net 8 armazena dados sensíveis em um local separado, fora da pasta do projeto e os torna acessíveis usando a interface IConfiguration . Essas variáveis estarão disponíveis para qualquer projeto .NET que utilize os mesmos segredos de usuário.

Em seguida, vamos modificar o arquivo Program.cs para ler os segredos e montar o cliente Elasticsearch:

Primeiro, importe as bibliotecas necessárias:

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

BlazorApp.Services: contém o serviço Elasticsearch.
Elastic.Clients.Elasticsearch: importa a biblioteca cliente Elasticsearch para .NET 8.
Elastic.Transport: importa a biblioteca de transporte do Elasticsearch, que nos permite usar a classe ApiKey para autenticar nossas solicitações.

Em segundo lugar, insira o seguinte código antes da linha 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 lerá as credenciais do Elasticsearch a partir dos segredos do usuário e criará uma instância de cliente Elasticsearch.

Após a inicialização do cliente Elasticsearch, adicione a seguinte linha para registrar o serviço Elasticsearch:

builder.Services.AddScoped();

O próximo passo será construir a lógica de busca no arquivo /Services/ElasticsearchService.cs :

Primeiro, importe as bibliotecas e os modelos necessários:

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

Em segundo lugar, adicione a classe ElasticsearchService, o construtor e as variáveis:

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

Configurando a pesquisa

Agora, vamos construir nossa lógica de busca:

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 irá construir os filtros para a consulta de pesquisa usando as facetas selecionadas pelo usuário.
BuildHybridQuery irá construir uma consulta de pesquisa híbrida que combina pesquisa de texto completo e pesquisa semântica.

Em seguida, adicione o método de pesquisa:

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

SearchBooksAsyncA função realizará a busca usando a consulta híbrida e retornará os resultados, incluindo as agregações para a construção das facetas.
FormatFacets: irá formatar a resposta de agregações em um dicionário.
ConvertFacetDictionary: irá converter o dicionário de facetas em um formato mais legível.

O próximo passo é criar os modelos que representarão os dados retornados no hits da consulta Elasticsearch que serão impressos como resultados em nossa página de pesquisa.

Começamos criando o arquivo /Models/Book.cs e adicionando o seguinte:

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

Em seguida, configure a resposta do Elastic no arquivo /Models/Response.cs e adicione o seguinte:

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

Configurando uma interface de usuário básica

Em seguida, adicione o componente SearchBar. No arquivo /Components/Elasticsearch/SearchBar.razor , adicione o seguinte:

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

Este componente contém uma barra de pesquisa e um botão para realizar a pesquisa.

O Blazor oferece grande flexibilidade ao permitir a geração dinâmica de HTML usando código C# dentro do mesmo arquivo.

Em seguida, no arquivo /Components/Elasticsearch/Results.razor construiremos o componente de resultados que exibirá os resultados da pesquisa:

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

Por fim, precisaremos criar facetas para filtrar os resultados da pesquisa.

Nota: Os facets são filtros que permitem aos usuários refinar os resultados da pesquisa com base em atributos ou categorias específicos, como tipo de produto, faixa de preço ou marca. Esses filtros geralmente são apresentados como opções clicáveis, frequentemente na forma de caixas de seleção, para ajudar os usuários a refinar sua pesquisa e encontrar resultados relevantes com mais facilidade. No contexto do Elasticsearch, os facets são criados usando agregações.

Configuramos as facetas inserindo o seguinte código no arquivo /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 lê de uma agregação terms nos campos author, categories e status e, em seguida, produz uma lista de filtros para enviar de volta ao Elasticsearch.

Agora, vamos juntar tudo.

No arquivo /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); } }

Nossa página está funcionando!

Como você pode ver, a página é funcional, mas carece de estilo. Vamos adicionar um pouco de CSS para deixar a aparência mais organizada e responsiva.

Vamos começar a substituir os estilos de layout. No arquivo 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; }

Adicione os estilos para a página de pesquisa no arquivo 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; } }

Nossa página está começando a ficar melhor:

Vamos dar os toques finais:

Crie os seguintes arquivos:

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

E adicione os 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 executar o aplicativo, você pode usar o seguinte comando:

dotnet watch

Você conseguiu! Agora você pode pesquisar livros em seu índice Elasticsearch usando a barra de pesquisa e filtrar os resultados por autor, categoria e status.

Realização de buscas semânticas e de texto completo

Por padrão, nosso aplicativo realizará uma pesquisa híbrida usando tanto pesquisa de texto completo quanto pesquisa semântica. Você pode alterar a lógica de pesquisa criando dois métodos separados, um para pesquisa de texto completo e outro para pesquisa semântica, e então selecionando um dos métodos para construir a consulta com base na entrada do usuário.

Adicione os seguintes métodos à classe ElasticsearchService no arquivo /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 os métodos funcionam de forma semelhante ao método BuildHybridQuery , mas realizam apenas pesquisa de texto completo ou pesquisa semântica.

Você pode modificar o método SearchBooksAsync para usar o método de pesquisa selecionado:

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

Você pode encontrar o formulário de inscrição completo aqui.

Conclusão

Blazor é uma estrutura eficaz que permite criar aplicações web usando C#. O Elasticsearch é um mecanismo de busca poderoso que permite criar aplicativos de busca. Combinando ambos, você pode facilmente criar aplicativos de busca robustos, aproveitando o poder do ESRE para criar uma experiência de busca semântica em pouco tempo.

Gustavo Llermaly - Elasticsearch Labs

Monitorando as visualizações do dashboard do Kibana com o Elastic Workflows

Pré-requisitos

Passo 1: explorar os dados brutos no Dev Tools

Passo 2: criar o índice de destino

Passo 3: Crie o fluxo de trabalho

Como funciona o fluxo de trabalho

Gatilhos

buscar_visualizações_do_painel

index_each_dashboard (foreach)

Etapa 4: Crie o dashboard de estatísticas

Conclusão

Recursos

Elastic Open Web Crawler como código

Pré-requisitos

Etapas

Estrutura de pastas

Configuração do rastreador

Arquivo Docker-compose (ambiente local)

Ações do GitHub

Testando localmente

Implantação em produção

Realizar alterações e redistribuir

Conclusão

Criando um app de buscas com o Blazor e o Elasticsearch

O que é Blazor?

Por que Blazor?

O que é ESRE?

Configurando o ELSER

Dados de indexação

Construindo o aplicativo com Blazor e Elasticsearch

Chave de API

Criando o projeto Blazor

Estrutura de pastas

Configuração inicial

Integrando o Elastic ao projeto

Configurando a pesquisa

Configurando uma interface de usuário básica

@result?.Title

@facet.Key

Semantic Search with Elasticsearch and Blazor

Realização de buscas semânticas e de texto completo

Conclusão