Saiba como trabalhar com os elementos Data Table e Debug no Canvas, usando uma amostra de conjunto de dados incluída no Elasticsearch e Kibana.

canvas_debug_banner.jpg

thumb-bw-gears-motor.jpg

Canvas: Data Table and Debug Elements

Canvas: elementos Data Table e Debug

fullbleed2.jpg

canvas_metric_thumb.jpg

Canvas: Metric and Markdown Elements

Canvas: elementos Metric e Markdown

<table style="background: #FFFFD2;">
<tbody>
<tr>
	<td><i>Atualizado em 21 de dezembro de 2018: O Canvas é fornecido com o Kibana 6.5+ e não precisa mais ser instalado separadamente.</i>
	</td>
</tr>
</tbody>
</table>
<h4>Ter que atualizar apresentações manualmente já é coisa do passado.</h4>

<p>O Canvas é uma ferramenta de apresentação (dentro do Kibana) que permite criar apresentações de alta qualidade visual e slides que extraem dados em tempo real diretamente do Elasticsearch. Isso significa que você não precisa mais atualizar apresentações de forma manual e contará sempre com os recursos visuais, diagramas e gráficos mais recentes. Entretanto, o Canvas pode fazer muitas coisas e tem a flexibilidade de ser usado para mais do que apenas o caso de uso principal apresentado neste artigo.
</p>
<p>Veja abaixo um vídeo de Rashid Khan, criador do Canvas, onde ele apresenta sua visão para o Canvas no Elastic{ON} 2018.
</p>
<div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/ga3NJzS76dX9kCgVaDBCrV.jpg" data-uuid="ga3NJzS76dX9kCgVaDBCrV" data-v="4" data-type="inline">
</div>

<h2>Por que usar o Canvas</h2>

<p>Criar uma apresentação pode ser algo trabalhoso, principalmente quando é necessário manipular dados para deixá-los mais palatáveis para o público do que JSON puro. Até algo simples como fazer uma captura de tela de um gráfico de barras e depois colocar a imagem na apresentação poderá ser entediante se os dados do gráfico precisarem de atualização frequente. Infelizmente, é comum que você precise exportar dados, limpá-los e colá-los em sua apresentação com imagens e outros recursos. Esse processo pode ser entediante e complicado.
</p>
<p>Estas questões nem mesmo abordam a possibilidade de se ter que ajustar informações ao vivo (por exemplo, durante uma apresentação). Imagine uma apresentação que contenha um slide com os resultados da empresa por trimestre. O que aconteceria se, durante a apresentação, o CEO pedisse para ver o relatório de resultados mensal? Ou alguém se preparou para essa opção com antecedência e fez o slide ou você terá que dizer que só poderá dar essa informação depois.
</p>
<p>O Canvas não só resolve a parte entediante de se ter que atualizar visualizações em suas apresentações constantemente, ele também dá aos usuários ferramentas e filtros poderosos para ajustar os dados no momento da apresentação, tornando-as mais dinâmicas, flexíveis e convincentes.
</p>

<h2>Pré-requisitos e Instalação do Canvas</h2>

<h3>Pré-requisitos</h3>

<p>Para começar a usar o Canvas, você vai precisar do seguinte:
</p>
<ul>
	<li>Elasticsearch para armazenamento e indexação de dados</li>
	<li>Kibana para a Interface do Usuário</li>
</ul>
<p>Se ainda não tiver esses recursos instalados e funcionando, leia <a href="/guide/en/elastic-stack-get-started/6.4/get-started-elastic-stack.html">Como começar a usar o Elastic Stack</a> para saber mais. Consulte também o repositório de <a href="https://github.com/elastic/quick-deploy">Quick Deploy</a>, que apresenta um jeito fácil de configurar o Elasticsearch e o Kibana em uma máquina com Ubuntu em minutos.
</p>
<h3>Como instalar o Canvas</h3>

<p>A partir da versão 6.5, o Canvas é fornecido com a distribuição padrão do Kibana. Basta instalar o <a href="/pt/downloads/elasticsearch">Elasticsearch</a> e o <a href="/pt/downloads/kibana">Kibana</a> para começar a usar o Canvas. <i>(Nota: esta seção foi atualizada em dezembro de 2018 para refletir as instruções para a versão 6.5 e mais recentes)</i>
</p>

<h2>Fontes de dados</h2>

<p>Para fins deste tutorial, vamos usar o <a href="/pt/beats/metricbeat">Metricbeat</a> como uma fonte rápida, fácil e relativamente previsível de dados em tempo real.
</p>
<h3>1. Baixe e descompacte o Metricbeat</h3>

<p>Acesse a <a href="/pt/downloads/beats/metricbeat">página de download do Metricbeat</a> para baixar o código binário correto para o seu sistema operacional. Depois de fazer o download, descompacte o arquivo. Depois de descompactar, você encontrará diversos arquivos no diretório do Metricbeat.
</p>
<h3>2. Como configurar o Metricbeat</h3>

<p>Depois, precisamos configurar o Metricbeat para enviar dados para a sua instância do Elasticsearch. Abra <code>metricbeat.yml</code> com seu editor de código favorito. Se a sua instância do Elasticsearch for...
</p>
<ol>
	<li><strong>Local:</strong> a configuração padrão já está definida para enviar dados para o Elasticsearch (executado em <code>http://localhost:9200</code>), portanto, não deverá ser necessário mudar nada. Se você precisar mudar algo, o processo será o mesmo que o da próxima etapa.</li>
	<li><strong>Remota:</strong> acesse a seção <em>Elasticsearch ouput</em> e modifique-a para apontar para a sua instância:
	<pre class="prettyprint">setup.kibana:
  host: "url-to-my-kibana-instance:5601"
...
...
output.elasticsearch:
  hosts: ["url-to-my-elasticsearch-instance:9200"]
	</pre>
	</li>
</ol>
<h3>3. Execute o Metricbeat</h3>

<p>Salve o arquivo metricbeat.yml. Execute o metricbeat com a opção <code>-setup</code>, que avisará ao sistema que ele deve carregar os dashboards de métricas padrão para o Kibana.
</p>
<pre class="prettyprint">./metricbeat -c metricbeat.yml -setup -e
</pre>
<p><em>DICA: se você adicionar a opção -e quando executar o Metricbeat, poderá ver os logs durante a execução.</em>
</p>

<h2>Como criar seu primeiro workpad no Canvas</h2>

<p>Os projetos do Canvas são chamados de “workpads”. Eles são como apresentações e podem ter várias páginas.
</p>
<ol>
	<li>Quando o Canvas estiver instalado e o Metricbeat configurado, vá para a sua instância do Kibana e selecione <em>Canvas</em> na barra lateral (conforme mostrado abaixo)</li>
	<li>Clique em “Create workpad”</li>
	<li>Dê um nome exclusivo para ele</li>
</ol>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltdb55167a4649a9ed/5c5837f365ace9e30b316503/image1.gif" data-sys-asset-uid="bltdb55167a4649a9ed" alt="image1.gif" data-image="r6kb6wouo89k">
</p>
<h3>Anatomia da Interface do Canvas</h3>

<p><br>
</p>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt1ad52e250654077f/5c304e37c05f480270a742ec/canvas.jpg" data-sys-asset-uid="blt1ad52e250654077f" alt="canvas.jpg" data-image="kmsbacpo2o38">
</p>
<ol>
	<li><strong>Botões</strong>
	<ul>
		<li><strong>Intervalo de Atualização de Dados</strong> – Defina o intervalo de verificação de atualizações do Elasticsearch</li>
		<li><strong>Alternar Tela Cheia</strong> – Alterna o “Modo de apresentação”</li>
		<li><strong>Exportar Workpad</strong> – Exporta o workpad como arquivo PDF</li>
		<li><strong>Alternar Barra Lateral de Edição</strong> – Oculta a sessão 6 do diagrama acima</li>
	</ul>
	</li>
	<li><strong>Adicionar Elemento</strong> – Exibe o selecionador de elementos para você adicionar gráficos, tabelas, imagens e muito mais ao seu workpad do Canvas</li>
	<li><strong>Controle de Camadas de Elementos</strong> – Escolha quais elementos ficarão por cima, para permitir composições e ocultações</li>
	<li><strong>Duplicar um Elemento</strong> – Nota: um elemento precisa estar selecionado para esse recurso funcionar</li>
	<li><strong>Workpad do Canvas</strong> – A área principal de trabalho</li>
	<li><strong>Controles de Edição</strong> – Um painel contextual com edição de propriedades para elementos selecionados incluindo fontes, cores, folhas de estilo personalizado, etc.</li>
	<li><strong>Abrir o Menu Principal do Canvas</strong> – Navegue entre workpads, clone, importe ou exclua workpads</li>
	<li><strong>Controle da Página</strong> – Adicione novas páginas ou alterne entre as existentes</li>
	<li><strong>Editor de Código do Elemento</strong> – Quando estiver em dúvida, codifique. Flexibilidade total para suas consultas, formatação e pipelines (falaremos mais sobre isso em outra publicação)</li>
</ol>

<h2 id="canvas_elements">Crie seus primeiros elementos no Canvas</h2>

<h3>Tipos de Elementos</h3>

<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltff2744f4cd06c410/5c5839ba122247d10be8ecad/image8.jpg" data-sys-asset-uid="bltff2744f4cd06c410" style="display: block; margin: auto;" data-image="ryao0cojup41">
</p>
<ol>
	<li>Clique em “Adicionar elemento”</li>
	<li>O Canvas é fornecido com diversos elementos integrados que podemos aproveitar imediatamente. Selecione o elemento “Gráfico de barra horizontal”.
	<br><em>DICA: quando um elemento é criado, o Canvas usa dados de exemplo para que você possa vê-lo funcionando imediatamente.</em></li>
	<li>No painel à direita, selecione a guia “Dados”</li>
	<li>Clique em “Alterar sua fonte de dados”</li>
	<li>Selecione “Documentos brutos do Elasticsearch”
	<br>
	<br>
	<table style="border:none">
	<tbody>
	<tr>
		<td style="border:none"><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt7ce97e22180c753c/5c57de54773ad9030c5c2bfa/image5_small.png" data-sys-asset-uid="blt7ce97e22180c753c" alt="image5_small.png" data-image="ryx7ffiomaa2">
		</td>
		<td style="vertical-align:middle; border:none"><strong>Fontes de dados explicadas:<br></strong><br>
			<ul>
				<li><strong>Dados de demo:</strong> Pequeno conjunto de dados de amostra usado quando você cria um novo elemento no Canvas. Mais usado para fins de teste.</li>
				<li><strong>Documentos brutos do Elasticsearch:</strong> permite acesso aos dados brutos no Elasticsearch.</li>
				<li><strong>Timelion:</strong> o timelion oferece uma maneira especializada de lidar com seus dados de séries temporais no Elastiscearch.</li>
				<li><strong>Elasticsearch SQL:</strong> assim como os documentos brutos, permite acesso aos seus dados no Elasticsearch com o recurso de sintaxe SQL.</li>
			</ul>
		</td>
	</tr>
	</tbody>
	</table>
	</li>
	<li>Selecione o índice <code>metricbeat-*</code> na lista do menu suspenso</li>
	<li>Clique em “Salvar” na parte inferior da barra lateral</li>
	<li>Volte para a parte superior e selecione a guia “Exibir”</li>
	<li>Vamos traçar o gráfico com o tempo completo e o nome do conjunto de métricas definindo os eixos para o gráfico de barras da seguinte forma:
	<ul>
		<li>Eixo X:
		<ul>
			<li>Medidas: Valor</li>
			<li>Campo: metricset.rtt</li>
		</ul>
		</li>
		<li>Eixo Y
		<ul>
			<li>Medidas: Valor</li>
			<li>Campo: metricset.name</li>
		</ul>
		</li>
		<li>Cor
		<ul>
			<li>Medidas: Valor</li>
			<li>Campo: metricset.name</li>
		</ul>
		</li>
	</ul>
	</li>
</ol>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt251899278831d9b2/5c304cae29d13af10bc2ab20/image7.gif" data-sys-asset-uid="blt251899278831d9b2" style="display: block; margin: auto;" data-image="8viqpbbag34l">
</p>
<p>Vamos adicionar mais um elemento...
</p>
<ol>
	<li>Clique em “Adicionar elemento”</li>
	<li>Selecione o elemento “Métrica”</li>
	<li>Arraste-o para algum lugar em que você possa vê-lo melhor</li>
	<li>No painel à direita, selecione a guia “Dados”</li>
	<li>Desta vez, selecione “Elasticsearch SQL”</li>
	<li>Digite o seguinte no editor de consultas SQL:<br>
	<code>SELECT COUNT(*) FROM metricbeat*</code></li>
	<li>Clique em “Salvar”</li>
	<li>Observe que o elemento agora mostra um aviso. Isso acontece porque o elemento não está mais puxando nenhum dado.</li>
	<li>Selecione a guia “Exibir” na parte superior da barra lateral</li>
	<li>Na seção “Números”, defina o seguinte:
	<ul>
		<li>Medidas: <code>Value</code></li>
		<li>Campo: <code>COUNT_1</code></li>
	</ul>
	</li>
	<li>Altere o rótulo deste elemento para “Entradas” já que ele está mostrando o número de entradas no Elasticsearch</li>
	<li>Se o Metricbeat ainda estiver sendo executado, veremos esse número atualizado ao vivo. No canto superior esquerdo da tela, clique em “Atualizar”</li>
	<li>Defina o intervalo de atualização como 5 segundos</li>
	<li>Veja sua apresentação com dados atualizados em tempo real.</li>
</ol>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt91dde0dbfdd24acc/5c30479f4657a057675ba64a/image4.gif" data-sys-asset-uid="blt91dde0dbfdd24acc" alt="image4.gif" data-image="rgzo7mc3zlk3">
</p>
<h3>Chega de atualizar manualmente suas apresentações!</h3>

<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt036f8600b18aa124/5c583bf4a669c2e50b763f2f/image6.2018-10-11_11_23_03.gif" data-sys-asset-uid="blt036f8600b18aa124" style="display: block; margin: auto;" data-image="w7sjb3qo1lnh">
</p>

<h2>Links para outros recursos úteis</h2>

<p>É isso! Você criou seu primeiro workpad no Canvas com dados em tempo real extraídos por meio do Metricbeat. Experimente adicionar outros elementos ao seu workpad e veja tudo o que você pode aproveitar do Canvas.
</p>
<p>Veja alguns outros tutoriais do Canvas aqui:
</p>
<ul>
	<li><a href="/pt/blog/kibana-canvas-metric-and-markdown-elements">Como trabalhar com métricas e elementos Markdown no Canvas</a></li>
	<li><a href="/pt/blog/kibana-canvas-data-table-and-debug-elements">Como trabalhar com tabelas de dados e elementos de depuração no Canvas</a></li>
	<li><a href="/pt/blog/elasticon-kibana-canvas-story-elasticoffee">Mas, antes, um café... (Uma história do Canvas no Elastic{ON})</a></li>
	<li><a href="/pt/blog/elasticon-kibana-canvas-story-ama">Estamos aqui para ajudar... (Uma história do Canvas no Elastic{ON})</a></li>
</ul>
<hr>
<p><em>Imagem do banner: "<a href="https://www.flickr.com/photos/ekilby/711547840">À mão</a>" por <a href="https://www.flickr.com/photos/ekilby/">Eric Kilby</a>, usuário de <a href="https://creativecommons.org/licenses/by/2.0/">CC BY</a> / Cortado do original</em>
</p>

canvas-dashboard-kibana-scoreboard-v2.jpg

canvas_intro_thumb.png

Getting Started with Canvas in Kibana

Comece a usar o Canvas no Kibana

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Ethan_Groves.jpg

Eng Sr, Product Marketing

Ethan Groves

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Communication Preferences - ONLY for /communication-preferences

<p>Ao enviar a confirmação, você reconhece que leu e concorda com nossos <a href="/pt/legal/elastic-cloud-account-terms" target="_self">Termos de Serviço</a> e também concorda em receber <a href="/pt/legal/privacy-statement#how-we-use-the-information" target="_self">comunicações especiais</a> por meio dos dados de contato que forneceu acima. Consulte a <a href="/pt/legal/privacy-statement/" target="_self">Declaração de Privacidade da Elastic</a> para saber mais detalhes ou para cancelar a qualquer momento.</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Serverless GDPR Text

<p>Ao enviar a confirmação, você reconhece que leu e concorda com nossos <a href="/pt/legal/serverless-preview-terms" target="_self">Termos de Serviço</a> e que a Elastic pode <a href="/pt/legal/privacy-statement#how-we-use-the-information" target="_self">entrar em contato com você</a> para divulgar nossos produtos e serviços relacionados usando os dados que você forneceu acima. Consulte a <a href="/pt/legal/privacy-statement/" target="_self">Declaração de Privacidade da Elastic</a> para saber mais detalhes ou para cancelar a qualquer momento.</p>

<p>By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.</p>

Cloud Trial GDPR Text

<p>Ao enviar, você concorda com os <a href="/pt/agreements/global/cloud-services-monthly" rel="nofollow">Termos de Serviço do Elastic Cloud</a>. Seus dados pessoais serão tratados de acordo com a <a href="/pt/legal/privacy-statement">Declaração de Privacidade da Elastic</a>.
</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Newsletter GDPR Text

<p>Ao enviar a confirmação, você reconhece que leu e concorda com nossos <a href="/pt/legal/terms-of-use" target="_self">Termos de Serviço</a> e que a Elastic pode <a href="/pt/legal/privacy-statement#how-we-use-the-information" target="_self">entrar em contato com você</a> para divulgar nossos produtos e serviços relacionados usando os dados que você forneceu acima. Consulte a <a href="/pt/legal/privacy-statement/" target="_self">Declaração de Privacidade da Elastic</a> para saber mais detalhes ou para cancelar a qualquer momento.</p>

Explore similar demos

Explore outras demonstrações semelhantes

Overview

Load More

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

O conteúdo desta página não está disponível no idioma selecionado. A Elastic está trabalhando para garantir que o conteúdo esteja disponível em vários idiomas.Agradecemos a compreensão.

Author

Articles by

Learn more

Watch now (no PT)

Watch now

See all top stories

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Share on LinkedIn

Follow us on LinkedIn

Search Integrations

All Solutions

Video for

Follow us on Twitter

See when this webinar starts in my time zone

Consultar a hora de início do webinar no meu fuso horário

Register to Watch

Register now

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

Não vai conseguir participar? Inscreva-se e nós lhe enviaremos a gravação. Você também receberá um email com conteúdo relacionado.

Author

Articles by Ethan Groves

Eng Sr, Product Marketing, Elastic

Canvas: elementos Data Table e Debug

Canvas: elementos Metric e Markdown

Comece a usar o Canvas no Kibana