Canvas: elementos Metric e Markdown

Elementos do Canvas no Kibana

No momento, o Canvas oferece uma seleção de aproximadamente vinte elementos internos que podem ser adicionados a workpads (consulte o blog Getting Started (Introdução) para obter uma lista completa). Neste blog, nosso foco serão apenas dois deles: Metrics e Markdown

	Metric: uma caixa de texto simplificada que só exibe um valor de dado com um rótulo
	Markdown: Uma caixa de texto mais completa que exibe dados dinâmicos usando handlebars.js {{variables}} e sintaxe markdown.

Nota: se você já tiver o Canvas e os dados de exemplo instalados, poderá pular a seção de revisão direto para o tutorial principal: Como trabalhar com Metrics

Revisão rápida

Se você ainda não passou pelo blog Getting Started, recomendo que faça isso agora, porque neste blog, vamos usar conceitos do Getting Started que são importantes de você saber, além de precisarmos que você tenha o seguinte:

1. Elasticsearch e Kibana funcionando (versão 6.4 ou superior)
2. Canvas instalado

Como criar um workpad no Canvas

1. Clique na aba “Canvas” na barra lateral
2. Clique em “Create workpad”
3. Dê um nome exclusivo para o workpad

Instalação de dados de amostra

Para este tutorial, usaremos um conjunto de dados de amostra fornecido pela Elastic — especificamente, os dados de voos de amostra.

Nota: esse conjunto de dados só está disponível no Kibana versões 6.4 e superiores.

Acesse sua instância do Kibana:

1. Clique na página inicial principal do “Kibana” na barra lateral
2. Na parte inferior da seção “Add Data to Kibana” (Adicionar dados ao Kibana), clique no link que diz “Load a data set and a Kibana dashboard” (Carregar um conjunto de dados e um painel Kibana).
3. No bloco “Sample flight data” (Dados de voos de amostra), clique em “Add” (Adicionar).

Referência rápida

A tabela a seguir oferece informações sobre o conjunto de dados de amostra que acabou de ser instalado. Os campos em negrito sublinhado são aqueles que usaremos depois nesta atividade, mas você pode fazer testes com os outros.

Como trabalhar com Metrics

Começar do básico

Vamos descobrir o número total de minutos gasto em atrasos de voos e exibi-lo em um elemento de métrica. Para isso, vamos usar uma consulta SQL para obter o total do campo FlightDelayMin de nosso conjunto de dados de exemplo.

1. Clique em “Add element” (Adicionar elemento)
2. Escolha “Metric” (Métrica)
1. DICA: quando um elemento é criado, o Canvas usa dados de exemplo para que você possa vê-lo funcionando imediatamente.
3. No painel à direita, selecione a aba “Data” (Dados).
4. Clique em “Change your data source” (Alterar sua fonte de dados).
5. Selecione “Elasticsearch SQL”.
6. Digite o seguinte no editor de consultas SQL:

SELECT
    SUM(FlightDelayMin) AS delay
FROM
    kibana_sample_data_flights

Mais explicações: essa consulta SQL está selecionando todos os valores json com a chave FlightDelayMin do índice kibana_sample_data_flights. Esses dados estão sendo retornados em uma “coluna” chamada “delay”.

7. Clique em “Save” (Salvar).

Observe que o elemento da métrica agora está mostrando um símbolo de alerta. Isso é porque o elemento está apontado para os dados errados.

8. Na parte de cima do painel de edição, selecione a aba “Display”.
9. Na seção “Numbers” (Números), defina o seguinte:
• Medidas: value
• Campo: delay
10. Altere o rótulo da métrica para dizer: “Total Delay in Minutes” (Delay total em minutos)

Personalização

Vamos adicionar um filtro de tempo para que possamos ver o número de minutos gastos em atrasos de voos em um intervalo.

1. Clique em “Add element” (Adicionar elemento)
2. Escolha “Time Filter” (Filtro de tempo)

Observe que o elemento da métrica agora está mostrando um símbolo de alerta. É por isso que todos os elementos do workpad são afetados imediatamente pelo filtro de tempo, mas ele ainda não está configurado corretamente.

3. Mova o filtro de tempo para um local vazio no workpad
4. O campo de tempo padrão para o elemento do filtro de tempo é @timestamp, que não está correto neste caso. No painel de edição para o filtro de tempo, defina o valor da coluna para: timestamp (por exemplo, exclua a @)
5. Clique em “Set” (Definir)
6. Clique no filtro de tempo e selecione os seguintes intervalos:
• Last 24 hours (Últimas 24 horas)
• Last 7 days (Últimos 7 dias)
• Last 2 weeks (Últimas 2 semanas)

Nota: há um total de 4 semanas de dados de exemplo. 2 semanas de dados “passados” e 2 semanas de dados “futuros” com o meio sendo a data em que o dado foi instalado.

Uma abordagem mais avançada

Agora, vamos tentar obter o atraso de voo médio. Para isso, precisaremos personalizar o código nos bastidores para ele ficar melhor.

1. Veja se a primeira métrica que criamos foi selecionada.
2. No canto superior direito da tela, clique em “Duplicate” (Duplicar).
3. Mova o novo elemento da métrica para um local vazio no workpad
4. Altere o rótulo da métrica para dizer: “Average Delay in Minutes” (Atraso médio em minutos)
5. Selecione a aba “Data” (Dados)
6. Digite o seguinte no editor de consultas SQL:

SELECT
    AVG(FlightDelayMin) AS delay
FROM
    kibana_sample_data_flights

7. Clique em “Save” (Salvar).
8. Expanda o elemento métrica para que você consiga ver o número inteiro
• Você verá algo assim: 47.33517114633586
• Seria muito bom se conseguíssemos arredondar esse número
9. No canto inferior direito, clique em “Expression editor” (Editor de expressão). Isso abre um editor de código que nos permite modificar o código que está alimentando o elemento selecionado.
10. No editor de expressão na terceira linha do código, você deverá ver uma função “math”. Esta é a linha de código que queremos modificar:

11. Na documentação do Canvas, a Elastic oferece uma lista de funções math que podemos usar
12. Queremos usar a função round(a,b)
• a é o valor a ser arredondado
• b é o número das casas decimais
13. No editor de expressões, altere a linha 3 para incluir a função de arredondamento, conforme abaixo:
1. Linha 3: | math "round(delay,0)"
14. No canto inferior direito do editor de expressões, clique em “Run” (Executar).

Como trabalhar com Markdown

Começar do básico

Vamos descobrir o número total de voos e exibir o resultado em um elemento markdown. Para fazer isso, vamos executar um comando SQL contra o campo FlightNum de nosso conjunto de dados de exemplo.

1. Clique em “Add Element” (Adicionar elemento).
2. Escolha “Markdown”
1. DICA: quando um elemento é criado, o Canvas usa dados de exemplo para que você possa vê-lo funcionando imediatamente.
3. No painel à direita, selecione a aba “Data” (Dados).
4. Clique em “Change your data source” (Alterar sua fonte de dados).
5. Selecione “Elasticsearch SQL”.
6. Digite o seguinte no editor de consultas SQL:

SELECT
    FlightNum
FROM
    kibana_sample_data_flights

7. Clique em “Save” (Salvar).
8. Clique na aba “Display”
9. Exclua tudo do editor “Markdown content” (Conteúdo Markdown) exceto por:

**{{rows.length}} rows**

Nota: o elemento markdown , conforme o nome indica, oferece suporte à sintaxe markdown: e.g. **, ##, ```, etc. Para quem não é familiarizado com a sintaxe markdown, no exemplo acima, estamos cercando o texto com ** para colocá-lo em negrito.

10. Clique em “Apply” (Aplicar)
11. O elemento markdown agora mostra o número total de fileiras no conjunto de dados, que é o número total de voos. Atualize o texto para o seguinte:

Total number of flights: **{{rows.length}}**

12. Clique em “Apply” (Aplicar)
13. Clique no sinal “+” no editor Markdown no canto superior direito da tela
14. Selecione “Text Settings” (Configurações de texto) no menu suspenso
15. Nas configurações de texto, ajuste o seguinte:
1. Tamanho da fonte: 36
2. Alinhamento: Centralizado
16. Redimensione o elemento markdown para que o texto caiba melhor

Personalização

Agora, vamos descobrir quantos voos foram atrasados e por quê. Para fazer isso, vamos usar o campo FlightDelayType.

1. Clique em “Add Element” (Adicionar elemento).
2. Escolha “Markdown”
3. No painel à direita, selecione a aba “Data” (Dados).
4. Clique em “Change your data source” (Alterar sua fonte de dados).
5. Selecione “Elasticsearch SQL”.
6. Digite o seguinte no editor de consultas SQL:

SELECT
    FlightDelayType,
    COUNT(FlightDelayType) AS count
FROM
    kibana_sample_data_flights
GROUP BY
    FlightDelayType

7. Clique em “Save” (Salvar).
8. Clique na aba “Display”
9. Exclua tudo do editor “Markdown content” (Conteúdo Markdown) exceto por:

{{#each columns}}
 **{{name}}**
{{/each}}

1. Mais explicações:
2. Esta é uma sintaxe handlebar.js. Para cada coluna retornada pela consulta SQL, estamos imprimindo o nome da coluna. No entanto, precisamos imprimir o valor de cada fileira na coluna FlightDelayType. Por isso, vamos corrigir as coisas na próxima etapa.

10. No editor “Markdown content” substitua:
• columns por rows
• name por FlightDelayType
11. Clique em “Apply” (Aplicar)
12. Agora temos uma lista de tipos de atraso. Vamos adicionar a contagem para cada tipo. No editor “Markdown content” substitua os conteúdos atuais pelo código abaixo:

{{#each rows}}
- {{FlightDelayType}} -- {{count}}

{{/each}}

1. Vamos explicar o código acima:
2. Linha 1: Para cada linha...
3. Linha 2: Imprima um "-" para indicar que esse é um item de lista, depois imprima as duas variáveis separadas por "--"
4. Linha 3: Imprima uma nova linha
5. Linha 4: Encerre o ciclo

13. Clique em “Apply” (Aplicar)

Uma abordagem mais avançada

No elemento markdown que acabamos de criar, observe que uma as linhas é: No Delays -- 2856 Isso não nos dá nenhuma informação sobre atrasos, na verdade, está falando sobre voos que saíram na hora. Vamos nos livrar dessa linha para exibir somente os voos que de fato tiveram atraso. Para isso, vamos usar uma função Canvas chamada filterrows

1. É importante selecionar o elemento markdown que acabamos de criar (o que mostra todos os tipos de atraso).
2. No canto inferior direito da tela, clique no “Expression editor” (Editor de expressão). Isso abre um editor de código que nos permite modificar o código que está alimentando o elemento selecionado.
3. No editor de expressão, você deve ver algo similar ao seguinte:

filters
| essql 
  query="SELECT
    FlightDelayType,
    COUNT(FlightDelayType) AS count
FROM
    kibana_sample_data_flights
GROUP BY
    FlightDelayType"
| markdown "{{#each rows}}
- {{FlightDelayType}} -- {{count}}

{{/each}}"

4. Vamos passar os dados através da função filterrows antes de usar o elemento markdown. Vamos inserir um newline na linha 10 e adicionar as funções filterrows logo acima da função markdown. Não se esqueça do | no começo da linha.

...
GROUP BY
    FlightDelayType"
<b style="background-color:#ffae5b"><i>| filterrows {}</i></b>
| markdown "{{#each rows}}
- {{FlightDelayType}} -- {{count}}
...

5. Queremos filtrar as linhas com base nos valores contidos na coluna FlightDelayType. Para fazer isso, precisamos usar outra função chamada getCell, que nos dá o valor de cada linha de uma determinada coluna (docs para função “getCell”).

| filterrows { <b style="background-color:#ffae5b"><i>getCell “FlightDelayType”</i></b> }

6. Depois, vamos adicionar o valor de cada linha em uma função chamada any, que nos retorna true ou false com base em uma checagem de condições (docs para função any).

| filterrows {getCell “FlightDelayType” <b style="background-color:#ffae5b"><i>| any {}</i></b> }

7. Por fim, para a checagem e condições, vamos verificar se o valor não é igual a “No Delay” (sem atraso) usando uma função chamada neq (docs para a função “neq”).

| filterrows {getCell “FlightDelayType” | any { <b style="background-color:#ffae5b"><i>neq “No Delay”</i></b> }}

8. No canto inferior direito do editor de expressões, clique em “Run” (Executar). A linha que contém “No Delay -- 2856” deve desaparecer.

Links para outros recursos úteis

É isso! Você viu diversos exemplos do uso dos elementos Metric e Markdown no Canvas. Experimente adicionar outros elementos ao seu workpad e veja tudo o que você pode aproveitar do Canvas.

Veja alguns outros tutoriais do Canvas aqui:

• Comece a usar o Canvas no Kibana
• Histórias do Canvas
• Mas, antes, um café... (Uma história do Canvas da Elastic{ON})