Apprenez à utiliser les éléments Data Table (Table de données) et Debug (Débogage) dans Canvas grâce à un échantillon de données disponible dans Elasticsearch

canvas_debug_banner.jpg

thumb-bw-gears-motor.jpg

Canvas: Data Table and Debug Elements

Canvas : éléments Data Table (Table de données) et Debug (Débogage)

Découvrez comment utiliser les éléments Metric et Markdown dans Canvas en utilisant un échantillon de données intégré à Elasticsearch et à Kibana.

fullbleed2.jpg

canvas_metric_thumb.jpg

Canvas: Metric and Markdown Elements

Canvas : les éléments Metric (Indicateur) et Markdown

<table style="background: #FFFFD2;">
<tbody>
<tr>
	<td><i>Mise à jour du 21&nbsp;décembre&nbsp;2018&nbsp;: Canvas est intégré à Kibana&nbsp;6.5+&nbsp;: vous n'avez plus besoin de l'installer séparément.</i>
	</td>
</tr>
</tbody>
</table>
<h4>Exit la mise à jour manuelle des tableaux et présentations.</h4>

<p>Canvas est un outil de présentation intégré à Kibana. Il vous permet de créer des présentations et des diapositives irréprochables, qui extraient directement les données actives d'Elasticsearch. Résultat&nbsp;? Vous pouvez dire adieu aux mises à jour manuelles de vos présentations&nbsp;: vos visuels, les éléments de vos diagrammes et vos graphiques sont mis à jour en quasi temps réel. Mais Canvas a plus d'un tour dans son sac et ne se limite pas au cas d'utilisation présenté dans cet article.
</p>
<p>Envie d'en savoir plus&nbsp;? Regardez cette vidéo du créateur de Canvas, Rashid&nbsp;Khan, qui nous parle de sa vision de Canvas à l'occasion de l'événement Elastic{ON}&nbsp;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>Pourquoi utiliser Canvas</h2>

<p>Créer une présentation prend du temps. Surtout lorsque les données présentées doivent être manipulées pour que votre audience les trouve plus digestes que du JSON. Intégrer à une présentation la capture d'écran d'un graphique à barres&nbsp;? A&nbsp;priori, rien de plus facile. Pourtant, même des tâches aussi simples peuvent très vite devenir fastidieuses si vous devez régulièrement mettre à jour les données de vos graphiques. Et vous êtes souvent obligé d'exporter vos données, de les nettoyer, de les coller dans votre présentation, d'ajouter des images, et j'en passe. Un processus qui peut très rapidement devenir aussi pénible que laborieux.
</p>
<p>Sans compter que les constatations ci-dessus n'effleurent même pas de loin la possibilité d'ajuster vos données à chaud (c'est-à-dire en direct lors de la présentation). Imaginez que lors d'une présentation, une diapositive montre les résultats trimestriels d'une entreprise et que le PDG demande à voir les résultats mensuels De deux choses l'une&nbsp;: soit un salarié assez prévoyant a pensé à préparer cette diapositive à l'avance, soit le PDG devra se contenter d'un&nbsp;: "Heu... Je vous la transmettrai après la réunion".
</p>
<p>Avec Canvas, finies les fastidieuses et incessantes mises à jour des visualisations. Mieux encore, Canvas intègre des outils et des filtres puissants, qui vous permettent d'ajuster vos données à chaud, pour des présentations flexibles, dynamiques et intéressantes.
</p>

<h2>Produits requis et installation de Canvas</h2>

<h3>Produits requis</h3>

<p>Pour vous lancer avec Canvas, vous aurez besoin des produits suivants&nbsp;:
</p>
<ul>
	<li>Elasticsearch pour le stockage et l'indexation des données</li>
	<li>Kibana pour l'IU</li>
</ul>
<p>Si vous n'avez pas déjà installé ces produits ou que vous ne les avez encore jamais utilisés, consultez la page <a href="/guide/en/elastic-stack-get-started/6.4/get-started-elastic-stack.html">Getting started with the Elastic Stack</a> pour en savoir plus. Vous pouvez aussi jeter un œil à ce <a href="https://github.com/elastic/quick-deploy">référentiel Github de déploiement rapide</a>, qui vous aidera à déployer Elasticsearch et Kibana sur une machine Ubuntu en quelques minutes.
</p>
<h3>Installation de Canvas</h3>

<p>À compter de la version&nbsp;6.5, Canvas fait partie de la distribution par défaut de Kibana. Pour faire vos premier pas avec Canvas, il vous suffit donc d'installer <a href="/fr/downloads/elasticsearch">Elasticsearch</a> et <a href="/fr/downloads/kibana">Kibana</a>. <i>(Remarque&nbsp;: Nous avons mis à jour cette section en décembre&nbsp;2018 pour y intégrer les instructions relatives aux versions&nbsp;6.5 et suivantes)</i>
</p>

<h2>Sources de données</h2>

<p>Pour les besoins de ce tutoriel, nous utiliserons <a href="/fr/beats/metricbeat">Metricbeat</a> comme source de données actives, car il s'agit d'une source rapide, simple à utiliser et relativement prévisible.
</p>
<h3>1. Télécharger et décompresser Metricbeat</h3>

<p>Rendez-vous sur la page de <a href="/fr/downloads/beats/metricbeat">téléchargement de Metricbeat</a> pour y télécharger le binaire adapté à votre système d'exploitation. Une fois le téléchargement terminé, décompressez le zip. Différents fichiers s'affichent dans le répertoire Metricbeat.
</p>
<h3>2. Configurer Metricbeat</h3>

<p>Vous devez ensuite configurer Metricbeat, afin qu'il envoie des données vers votre instance Elasticsearch. Ouvrez <code>metricbeat.yml</code> avec votre éditeur de code préféré. Si votre instance Elasticsearch est...
</p>
<ol>
	<li><strong>locale&nbsp;:</strong> la configuration par défaut est déjà paramétrée pour envoyer des données vers Elasticsearch (exécuté sur <code>http://localhost:9200</code>). Aucune modification n'est nécessaire. Si vous devez quand-même apporter des modifications, suivez le processus décrit à l'étape suivante.</li>
	<li><strong>distante&nbsp;:</strong> accédez à la section <em>Elasticsearch output</em> (Sortie Elasticsearch) et modifiez la sortie, afin qu'elle pointe vers votre instance&nbsp;:
	<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. Exécuter Metricbeat</h3>

<p>Enregistrez le fichier metricbeat.yml. Exécutez-le ensuite avec l'option&nbsp;<code>-setup</code>, qui demandera au système de charger les tableaux de bord par défaut vers Kibana.
</p>
<pre class="prettyprint">./metricbeat -c metricbeat.yml -setup -e
</pre>
<p><em>CONSEIL&nbsp;: si vous ajoutez l'option&nbsp;-e lorsque vous exécutez Metricbeat, vous pouvez afficher les logs en cours d'exécution.</em>
</p>

<h2>Comment créer votre première présentation Canvas</h2>

<p>Dans Canvas, les projets sont appelés "présentations". Ces dernières sont analogues aux présentations habituelles et peuvent comporter plusieurs pages.
</p>
<ol>
	<li>Une fois que vous avez installé Canvas et configuré Metricbeat, accédez à votre instance Kibana et sélectionnez <em>Canvas</em> dans le volet de gauche, comme illustré ci-dessous.</li>
	<li>Cliquez sur "Create workpad" (Créer une présentation).</li>
	<li>Nommez votre présentation et donnez-lui un nom unique.</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>Apparence de l'interface 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>Boutons</strong>
	<ul>
		<li><strong>Data Refresh Interval</strong> (Intervalle d'actualisation des données)&nbsp;- permet de définir le délai après lequel Canvas recherche des mises à jour dans Elasticsearch.</li>
		<li><strong>Toggle Fullscreen</strong> (Activer/Désactiver le plein écran)&nbsp;- permet d'activer ou de désactiver le "mode Présentation".</li>
		<li><strong>Export Workpad</strong> (Exporter la présentation)&nbsp;- permet d'exporter la présentation au format&nbsp;PDF.</li>
		<li><strong>Toggle Editing Sidebar</strong> (Afficher/Masquer le volet d'édition)&nbsp;- permet de masquer la section&nbsp;6 (image ci-dessus).</li>
	</ul>
	</li>
	<li><strong>Add Element</strong> (Ajouter un élément)&nbsp;- permet d'afficher le sélecteur d'éléments, afin d'intégrer à votre présentation Canvas des tableaux, des graphes, des images et plus encore.</li>
	<li><strong>Element Layer Control</strong> (Contrôle de la couche d'éléments)&nbsp;- vous permet de choisir les éléments à mettre au premier plan, de masquer des éléments et de créer des compositions.</li>
	<li><strong>Duplicate an Element</strong> (Dupliquer un élément)&nbsp;- Remarque&nbsp;: Vous devez sélectionner un élément pour utiliser cette option.</li>
	<li><strong>Canvas Workpad</strong> (Présentation Canvas)&nbsp;- principale zone de travail.</li>
	<li><strong>Editing Controls</strong> (Commandes d'édition)&nbsp;- panneau contextuel permettant de modifier les propriétés des éléments sélectionnés (polices, couleurs, feuilles de style personnalisées, etc.).</li>
	<li><strong>Canvas Main Menu</strong> (Menu principal Canvas)&nbsp;- permet de passer d'une présentation à une autre, de cloner, d'importer, d'exporter ou de supprimer des présentations.</li>
	<li><strong>Page Control</strong> (Contrôle de page)&nbsp; - permet de créer des pages ou de passer d'une page existante à une autre.</li>
	<li><strong>Element Code Editor</strong> (Éditeur de code d'élément)&nbsp;- pour coder tout ce que vous voulez à la moindre occasion. Un outil qui vous offre une flexibilité totale pour vos requêtes, votre mise en forme et vos pipelines. (On vous en dit plus dans un prochain article.)</li>
</ol>

<h2 id="canvas_elements">Créer vos premiers éléments dans Canvas</h2>

<h3>Types d'éléments</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>Cliquez sur "Add element" (Ajouter un élément)</li>
	<li>Canvas propose un grand nombre d'éléments intégrés que vous pouvez exploiter immédiatement. Sélectionnez l'élément "Horizontal Bar Chart" (Graphique à barres horizontal).
	<br><em>CONSEIL&nbsp;: lorsque vous créez un élément pour la première fois, celui-ci intègre des données de démonstration, afin que vous puissiez vous lancer sans attendre.</em></li>
	<li>Dans le panneau de droite, sélectionnez l'onglet "Data" (Données).</li>
	<li>Cliquez sur "Change your data source" (Changer de source de données)</li>
	<li>Sélectionnez "Elasticsearch Raw Documents" (Documents bruts 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>Les différentes sources de données&nbsp;:<br></strong><br>
			<ul>
				<li><strong>Données de démonstration&nbsp;:</strong> il s'agit d'un exemple de petit ensemble de données qui est intégré à votre nouvel élément Canvas lorsque vous en créez un pour la première fois. Il sert principalement à essayer l'outil.</li>
				<li><strong>Elasticsearch Raw Documents (Documents bruts Elasticsearch)&nbsp;:</strong> vous permet d'accéder à vos données brutes dans Elasticsearch.</li>
				<li><strong>Timelion&nbsp;:</strong> Timelion est spécialement conçu pour vous permettre de traiter vos données temporelles dans Elasticsearch.</li>
				<li><strong>Elasticsearch&nbsp;SQL&nbsp;:</strong> vous permet d'accéder à vos données hébergées dans Elasticsearch via une fonctionnalité de syntaxe SQL, de manière similaire à l'option "Raw Documents" (Documents bruts).</li>
			</ul>
		</td>
	</tr>
	</tbody>
	</table>
	</li>
	<li>Sélectionnez l'index <code>metricbeat-*</code> dans la liste déroulante.</li>
	<li>En bas du volet latéral, cliquez sur "Save" (Enregistrer).</li>
	<li>Revenez en haut du volet latéral et sélectionnez l'onglet "Display" (Affichage).</li>
	<li>Nous allons déterminer la durée des boucles en fonction du nom de l'ensemble d'indicateurs (metricset.name). Nous définissons donc les axes du graphique à barres comme suit&nbsp;:
	<ul>
		<li>X-Axis (Axe&nbsp;X)
		<ul>
			<li>Mesure&nbsp;: Value (Valeur)</li>
			<li>Champ&nbsp;: metricset.rtt</li>
		</ul>
		</li>
		<li>Y-Axis (Axe&nbsp;Y)
		<ul>
			<li>Mesure&nbsp;: Value (Valeur)</li>
			<li>Champ&nbsp;: metricset.name</li>
		</ul>
		</li>
		<li>Color (Couleur)
		<ul>
			<li>Mesure&nbsp;: Value (Valeur)</li>
			<li>Champ&nbsp;: 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>Ajoutons un autre élément…
</p>
<ol>
	<li>Cliquez sur "Add element" (Ajouter un élément)</li>
	<li>Sélectionnez l'élément "Metric" (Indicateur)</li>
	<li>Faites-le glisser pour le déposer à l'emplacement où il s'affiche le mieux.</li>
	<li>Dans le panneau de droite, sélectionnez l'onglet "Data" (Données).</li>
	<li>Cette fois, sélectionnez "Elasticsearch SQL"</li>
	<li>Dans l'éditeur de requête SQL, saisissez&nbsp;:<br>
	<code>SELECT COUNT(*) FROM metricbeat*</code></li>
	<li>Cliquez sur "Save" (Enregistrer)</li>
	<li>L'élément affiche maintenant un avertissement, car il n'extrait plus aucune donnée.</li>
	<li>En haut du volet latéral, sélectionnez l'onglet "Display" (Affichage).</li>
	<li>Dans la section "Number" (Nombre), définissez les valeurs suivantes&nbsp;:
	<ul>
		<li>Mesure&nbsp;: <code>Value (Valeur)</code></li>
		<li>Champ&nbsp;: <code>COUNT_1</code></li>
	</ul>
	</li>
	<li>Modifiez le champ "Label" (Libellé) de cet élément et saisissez "Entries" (Entrées), puisque ce champ doit afficher le nombre d'entrées Elasticsearch.</li>
	<li>Aussi longtemps que vous exécutez Metricbeat, vous voyez ce nombre se mettre à jour en direct. En haut à gauche de l'écran, cliquez sur "Refresh" (Actualiser).</li>
	<li>Définissez l'intervalle d'actualisation sur 5&nbsp;secondes.</li>
	<li>Et voilà&nbsp;! Votre présentation se met à jour avec les données actives.</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>Exit les mises à jour manuelles de vos présentations.</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>Liens vers d'autres ressources utiles</h2>

<p>C'est aussi simple que ça. Vous venez de créer votre première présentation Canvas et d'y intégrer des données actives via Metricbeat. N'hésitez pas à y ajouter d'autres éléments et à essayer les différentes fonctionnalités de Canvas.
</p>
<p>Nous vous proposons aussi de consulter d'autres tutoriels Canvas ici&nbsp;:
</p>
<ul>
	<li><a href="/fr/blog/kibana-canvas-metric-and-markdown-elements">Working with Metric and Markdown Elements in Canvas</a></li>
	<li><a href="/fr/blog/kibana-canvas-data-table-and-debug-elements">Working with Data Table and Debug Elements in Canvas</a></li>
	<li><a href="/fr/blog/elasticon-kibana-canvas-story-elasticoffee">But First, Coffee... (An Elastic{ON} Canvas Story)</a></li>
	<li><a href="/fr/blog/elasticon-kibana-canvas-story-ama">Here to Help... (An Elastic{ON} Canvas Story)</a></li>
</ul>
<hr>
<p><em>Image de la bannière&nbsp;: "<a href="https://www.flickr.com/photos/ekilby/711547840">By hand</a>" d'<a href="https://www.flickr.com/photos/ekilby/">Eric&nbsp;Kilby</a>, utilisée sous licence Creative&nbsp;Commons <a href="https://creativecommons.org/licenses/by/2.0/">CC&nbsp;BY</a>/recadrée depuis l'original</em>
</p>

Articles by Ethan Groves

Canvas : éléments Data Table (Table de données) et Debug (Débogage)

Canvas : les éléments Metric (Indicateur) et Markdown

Prise en main de Canvas dans Kibana

Produits

Entreprise

Ressources