Guia do Usuário Kibana. Visualização. Parte 6

Um quinto da tradução da documentação oficial de visualização de dados em Kibana.

Link para o material original: Kibana User Guide [6.6] »Visualizar

Link para a Parte 1: Guia do usuário do Kibana. Visualização. Parte 1
Link para a Parte 2: Guia do Usuário Kibana. Visualização. Parte 2
Link para a Parte 3: Guia do Usuário Kibana. Visualização. Parte 3
Link para a Parte 4: Guia do Usuário Kibana. Visualização. Parte 4
Link para a Parte 5: Guia do Usuário Kibana. Visualização. Parte 5

Conteúdo:

1. Gráficos Vega

2. Inspecionando visualizações

Conta Vega

Advertência Esse recurso é experimental e pode ser alterado ou removido em uma versão futura. O Elastic fará o possível para corrigir quaisquer problemas, mas as funções experimentais não são suportadas pelas funções oficiais do SLA do GA.
Você pode criar visualizações dos dados do Vega e do VegaLite dentro do Kibana, tanto offline quanto na parte superior do mapa. Para ver o Vega em ação, assista a este breve vídeo de visão geral .

Comece com o Vega

Siga estas etapas para criar sua primeira visualização Vega.

1. No Kibana, selecione Visualizar e adicione uma visualização Vega. Você deve ver o gráfico padrão.
2. Tente alterar a mark de line para point , area , bar , circle , square , ... (consulte a documentação ).
3. Experimente o restante das visualizações Vega ou VegaLite. Pode ser necessário tornar absolutos os URLs, por exemplo, substituir "url": "data/world-110m.json" por "url": "https://vega.imtqy.com/editor/data/world-110m.json" (veja a nota abaixo).
4. Usando o utilitário makelogs , crie alguns dados de logstash e tente os exemplos de logstash ( não use makelogs em um cluster de produção).

Vega vs VegaLite

O VegaLite é uma versão simplificada do Vega, útil para um início rápido, mas com várias limitações. O VegaLite é automaticamente convertido em Vega antes da execução. Compare logstash-simple_line-vega e logstash-simple_line-vegalite (ambos usam alguns dados de logstash do Elasticsearch). Você pode usar este editor para converter o VegaLite em Vega.

Consultas do Elasticsearch

Por padrão, um item de dados Vega pode usar dados internos e externos com o parâmetro "url" . O Kibana adiciona suporte para consultas diretas do Elasticsearch recarregando o valor da "url" .
Aqui está um exemplo de uma consulta Elasticsearch que conta o número de documentos em todos os índices. A consulta usa o campo @timestamp para filtrar o intervalo de tempo e dividi-lo em segmentos do histograma.

 // An object instead of a string for the url value // is treated as a context-aware Elasticsearch query. url: { // Filter the time picker (upper right corner) with this field %timefield%: @timestamp // Apply dashboard context filters when set %context%: true // Which indexes to search index: _all // The body element may contain "aggs" and "query" subfields body: { aggs: { time_buckets: { date_histogram: { // Use date histogram aggregation on @timestamp field field: @timestamp // interval value will depend on the daterange picker // Use an integer to set approximate bucket count interval: { %autointerval%: true } // Make sure we get an entire range, even if it has no data extended_bounds: { min: { %timefilter%: "min" } max: { %timefilter%: "max" } } // Use this for linear (eg line, area) graphs // Without it, empty buckets will not show up min_doc_count: 0 } } } // Speed up the response by only including aggregation results size: 0 } } 

O resultado completo possui o seguinte tipo de estrutura:

 { "aggregations": { "time_buckets": { "buckets": [{ "key_as_string": "2015-11-30T22:00:00.000Z", "key": 1448920800000, "doc_count": 28 }, { "key_as_string": "2015-11-30T23:00:00.000Z", "key": 1448924400000, "doc_count": 330 }, ... 

Observe que "key" é um registro de data e hora do Unix e pode ser usado sem conversão pelas expressões de data do Vega.

Para a maioria dos gráficos, precisamos apenas de uma lista de valores de segmentos; portanto, usamos o format: {property: "aggregations.time_buckets.buckets"} da expressão format: {property: "aggregations.time_buckets.buckets"} para focar apenas nos dados de que precisamos.

A solicitação pode ser especificada com um intervalo individual e um painel de informações contextuais. Esta consulta é equivalente a "%context%": true, "%timefield%": "@timestamp" , exceto para alterar o intervalo de tempo em 10 minutos atrás.

 { body: { query: { bool: { must: [ // This string will be replaced // with the auto-generated "MUST" clause "%dashboard_context-must_clause%" { range: { // apply timefilter (upper right corner) // to the @timestamp variable @timestamp: { // "%timefilter%" will be replaced with // the current values of the time filter // (from the upper right corner) "%timefilter%": true // Only work with %timefilter% // Shift current timefilter by 10 units back shift: 10 // week, day (default), hour, minute, second unit: minute } } } ] must_not: [ // This string will be replaced with // the auto-generated "MUST-NOT" clause "%dashboard_context-must_not_clause%" ] } } } } 

"%timefilter%" também pode ser usado para determinar um único valor mínimo ou máximo. Como mostrado acima, os limites extended_bounds no histograma de data podem ser configurados com dois valores - mínimo e máximo. Em vez de codificar o valor, você pode usar "min": {"%timefilter%": "min"} , que será substituído no início do intervalo de tempo atual. shift valores de shift e unit também são suportados. O "intervalo" pode ser definido dinamicamente, dependendo do intervalo atualmente selecionado: "interval": {"%autointerval%": 10} tentará obter cerca de 10 a 15 pontos de dados (segmentos).

Arquivos de mapa elástico

Essa é a capacidade de acessar os arquivos do Elastic Map Service de acordo com algum mecanismo.

 url: { // "type" defaults to "elasticsearch" otherwise type: emsfile // Name of the file, exactly as in the Region map visualization name: World Countries } // The result is a geojson file, get its features to use // this data source with the "shape" marks // https://vega.imtqy.com/vega/docs/marks/shape/ format: {property: "features"} 

Vega com mapa

O mapa Kibana, por padrão, pode ser usado como base para o gráfico Vega. Para ativar, o gráfico deve definir type=map na configuração do host.

 { "config": { "kibana": { "type": "map", // Initial map position "latitude": 40.7, // default 0 "longitude": -74, // default 0 "zoom": 7, // default 2 // defaults to "default". Use false to disable base layer. "mapStyle": false, // default 0 "minZoom": 5, // defaults to the maximum for the given style, // or 25 when base is disabled "maxZoom": 13, // defaults to true, shows +/- buttons to zoom in/out "zoomControl": false, // defaults to true, disables mouse wheel zoom "scrollWheelZoom": false, // When false, repaints on each move frame. // Makes the graph slower when moving the map "delayRepaint": true, // default true } }, /* the rest of Vega JSON */ } 

Essa visualização incorporará automaticamente uma projeção chamada "projection" . Use isso para calcular a posição de todas as tags geo-orientadas. Além disso, você pode usar longitude, latitude e escala. Esses sinais podem ser usados ​​no gráfico ou podem ser atualizados para alterar o posicionamento do mapa.

Depuração

Console de depuração do navegador

Use as ferramentas do navegador para depuração (por exemplo, F12 ou Ctrl + Shift + J no Chrome) para inspecionar a variável VEGA_DEBUG : * view - acesse para Exibir o objeto Vega. Consulte o Guia de depuração do Vega para saber como inspecionar dados e sinais em tempo de execução. Para o VegaLite, VEGA_DEBUG.view.data('source_0') obtém o conjunto de dados principal. Para o Vega, isso usa um nome de dados, que está especificamente na sua especificação do Vega. * especificação vega_spec do gráfico Vega JSON após algumas modificações do Kibana. No caso do VegaLite, esta é a saída do compilador VegaLite. * vegalite_spec - se for um gráfico VegaLite, a especificação JSON do gráfico antes de compilar o VegaLite

Dados

Se você estiver usando uma consulta do Elasticsearch, verifique se os dados recebidos são o que você esperava. A maneira mais fácil de ver isso é usando a guia "rede" nas ferramentas de depuração do navegador (por exemplo, F12). Modifique o gráfico um pouco para que ele faça uma consulta de pesquisa e analise a resposta do servidor. Outra abordagem é usar a guia Kibana Dev Tools - coloque o nome do índice dentro da primeira linha: GET <INDEX_NAME>/_search e adicione sua consulta com a próxima linha (apenas o valor do campo "query" ).
Se você precisar compartilhar o gráfico com alguém, poderá copiar a resposta da sequência de dados para gist.github.com , possivelmente com a extensão .json, use o botão [raw] e use esse URL diretamente no seu gráfico.
Para impedir que o Vega use fontes de dados não ES, adicione vega.enableExternalUrls: false ao arquivo kibana.yml.

Links úteis

• Editor - inclui exemplos para o Vega e o VegaLite, mas não suporta nenhum recurso específico do Kibana, como consultas ao Elasticsearch e mapas de base interativos.
• Tutoriais , documentos e exemplos do VegaLite.
• Livros didáticos , documentos e exemplos Vega.

Usando exemplos Vega e VegaLite

Ao usar os exemplos Vega e VegaLite , é necessário modificar a seção "dados" para usar um URL absoluto. Por exemplo, substitua "url": "data/world-110m.json" por "url": "https://vega.imtqy.com/editor/data/world-110m.json" . Além disso, em exemplos regulares do Vega, eles usam o modelo de layout de tamanho automático "autosize": "pad" e o Kibana usa o fit . Remova todos os valores de height autosize , width e height . Veja abaixo as dimensões e o posicionamento.

Opções de configuração adicionais

Essas opções são específicas para Kibana. O suporte da placa possui opções de configuração adicionais.

 { config: { kibana: { // Placement of the Vega-defined signal bindings. // Can be `left`, `right`, `top`, or `bottom` (default). controlsLocation: top // Can be `vertical` or `horizontal` (default). controlsDirection: vertical // If true, hides most of Vega and VegaLite warnings hideWarnings: true // Vega renderer to use: `svg` or `canvas` (default) renderer: canvas } } /* the rest of Vega code */ } 

Tamanho e posição

Vega e VegaLite.

Por padrão, os gráficos Vega no Kibana usarão o modelo de layout autosize = { type: 'fit', contains: 'padding' } para os gráficos Vega e VegaLite. O modelo de fit usa todo o espaço disponível, ignorando os valores de width e height , mas leva em consideração os valores de recuo. Você pode substituir esse comportamento especificando um valor de autosize diferente.

Vega no mapa.

Todos os gráficos Vega ignoram o height autosize , width , height e padding usando o modelo de fit recuo zero.

Inspeção de visualização

Muitas visualizações permitem que você inspecione os dados subjacentes à visualização.
Para inspecionar a visualização, clique no botão Inspecionar no editor ou selecione Inspecionar no menu do painel Painel.

A tela inicial mostra os dados básicos para visualização. Você pode carregar dados como um arquivo de valor separado por vírgula (CSV) nos formatos Formatado ou Bruto . Formatado carrega dados no formato de tabela. Raw carrega os dados como apresentados - datas como registros de data e hora, números sem milésimos separadores etc.

Para visualizar solicitações que coletam dados, selecione Solicitações no menu Exibir no canto superior direito.

Quais visualizações estão disponíveis dependem da visualização inspecionada.