<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Observabilite on Rémi Tech Notes</title><link>https://www.vrchr.fr/tags/observabilite/</link><description>Recent content in Observabilite on Rémi Tech Notes</description><generator>Hugo</generator><language>fr-fr</language><lastBuildDate>Mon, 12 Jun 2023 00:00:00 +0000</lastBuildDate><atom:link href="https://www.vrchr.fr/tags/observabilite/index.xml" rel="self" type="application/rss+xml"/><item><title>Tour d'horizon du Blinky by Enix</title><link>https://www.vrchr.fr/posts/2023/06/12/blinky/</link><pubDate>Mon, 12 Jun 2023 00:00:00 +0000</pubDate><guid>https://www.vrchr.fr/posts/2023/06/12/blinky/</guid><description>Tour d&amp;#39;horizon de la solution blinky proposée par Enix</description><content:encoded><![CDATA[<p>En début d'année 2023, alors que je sympathisais avec les équipes orgas du KCD, et notamment les gens d'Enix, est passé dans ma timeline twitter un programme de test &quot;beta&quot; pour un nouveau produit physique, aka le &quot;blinky&quot;. Friand des participations aux beta-tests (j'ai eu accès à la certification Prometheus ainsi), je me suis inscrit.</p>
<p>Quelques temps plus tard, je recevais un mail m'indiquant que j'étais sélectionné, super ! Ce programme permet à quelques heureux de jouer avec le produit, et remonter les usages / idées / bugs à l'équipe, pour qu'ils puissent trouver un business-model adéquat avec le produit, enfin j'imagine.</p>
<p>Je vais donc recevoir le précieux, et pouvoir jouer avec !! Une soirée pour les privilégiés sur Paris a même lieu avec remise en main propre. Pour les autres, comme moi, ce sera livré par voie postale.</p>
<h2 id="blinky">Blinky</h2>
<p><img alt="Blinky emballé" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-01.webp"></p>
<p>Dans le sachet, on a droit à :</p>
<ul>
<li>Le blinky, of course</li>
<li>Une mini-doc, pour les chanceux ;)</li>
<li>Quelques sucreries !</li>
</ul>
<p>Une fois déballé, on a un petit cercle en plastique de 8 cm de diamètre sur 3 cm de hauteur.
<img alt="Blinky déballé" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-02.webp"></p>
<p>Ok, je vous parle de l'objet, mais il sert à quoi concrètement ??</p>
<p>Et bien il s'agit d'un mini gyrophare connecté à une appli web (en mode SaaS), qui permet de clignoter sur plusieurs événements, notamment des alertes Prometheus, des actions GitLab, ou même des choses plus génériques, nous y reviendrons dans la partie &quot;Application&quot;.</p>
<h2 id="côté-hardware">Côté hardware</h2>
<p>Alors je ne suis pas du tout expert en la matière, et ça ne m'intéresse pas plus que cela... Tout ce que je peux vous dire c'est que cela fonctionne avec un ESP32-WROOM-32E de chez ESPRESSIF. Je vous laisse lire le thread de <a href="https://twitter.com/zwindler/status/1667156444297216001">@zwindler</a> sur le sujet !</p>
<p>Niveau connectique, il est alimenté par USB-C, avec une alimentation externe (non fournie). Aucune idée de sa consommation.</p>
<p>Ce qui m'intéresse c'est le produit &quot;fini&quot;, et ce que je peux en faire. On passe alors à l'appli !</p>
<h2 id="côté-software">Côté software</h2>
<p>La mini-doc nous invite à aller sur <a href="https://app.getblinky.io/">https://app.getblinky.io/</a>, pour s'enregistrer et configurer l'appareil.</p>
<p>Après avoir entré son mail, on active notre compte, puis on crée une organisation.
<img alt="Application Organization" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-app-orga.webp"></p>
<h3 id="installation">Installation</h3>
<p>On va maintenant lier notre blinky à l'application. Pour se faire, l'appli utilise la fonctionnalité &quot;WebSerial&quot; des navigateurs. Utilisez alors un navigateur comme Chrome.</p>
<p>Lorsque celui-ci est associé, un petit nom aléatoire lui est donné, que vous pourrez changer au besoin. Le mien s'appelle &quot;Welcome Giraffe&quot;.</p>
<p>Une fois associé, on configure le wifi sur l'objet pour que celui-ci puisse ensuite fonctionner de manière autonome et commiquer avec l'appli web.
<img alt="Blinky Wifi" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-1-blinky-config-wifi.webp"></p>
<p>Lorsque celui-ci est OK, une petite LED verte sur le boitier montre qu'il est UP.</p>
<h3 id="configuration">Configuration</h3>
<p>Maintenant qu'on a un blinky connecté, que peut-on en faire ? On peut l'interfacer de 3 manières :</p>
<ol>
<li>Via une configuration Prometheus &amp; Alertmanager</li>
<li>Via des hooks GitLab</li>
<li>Via un webhook générique
<img alt="Blinky Integration" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-integrations.webp"></li>
</ol>
<h4 id="prometheus">Prometheus</h4>
<p>Dans un premier temps, on va regarder ce qui est fait avec Prometheus.</p>
<p>On définit un nom (ici  <code>prometheus-1</code> , super inspiré), puis une réaction, qui va définir un pattern d'affichage, un intervalle mini entre 2 alertes. On va lier notre blinky à cette alerte (dans le cas où l'on en a plusieurs), puis il suffira de copier la configuration d'alertmanager sur notre application en production.</p>
<p>On peut définir des conditions supplémentaires sur les labels, afin d'éviter de surcharger la configuration d'Alertmanager à la source.
<img alt="Blinky Prometheus" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-prom.webp"></p>
<h4 id="gitlab">GitLab</h4>
<p>De la même manière, on peut créer des événements sur actions GitLab : sur du push, des issues ou pipelines CI/CD.</p>
<p>On défini un pattern à afficher, les blinkies associés, et il suffira ensuite de copier la configuration des hooks dans votre projet GitLab !
<img alt="Blinky GitLab" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-gitlab.webp"></p>
<h4 id="webhook">Webhook</h4>
<p>Enfin, il est possible de créer un webhook tout simple, qu'on pourra même déclencher via une simple commande <code>curl</code>. Et il est aussi possible de tester directement depuis l'interface web.
<img alt="Blinky Webhook" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-webhook.webp"></p>
<h3 id="les-patterns">Les patterns</h3>
<p>Je vous ai expliqué comment générer un événement, mais pas comment définir la couleur ou schéma qui permettra au blinky de bien clignoter... Et bien cela se fait avec les patterns !</p>
<p>Il s'agit de séquences qui permettront aux leds de prendre une couleur particulière, pendant un certain laps de temps, et ainsi pouvoir faire clignoter e blinky, faire un chenillard, etc..</p>
<p>Par défaut 8 patterns sont définis, dont le &quot;rainbow&quot; ci-dessous.
<img alt="Rainbow Pattern" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-rainbow.webp"></p>
<p>Pour en créer un nouveau, c'est SUPER simple, l'interface étant très intuitive.</p>
<p>Ci-après un exemple de rose, pour faire plaisir à ma fille (oui c'est très cliché, mais ça lui plait) :
<img alt="Pink Pattern" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-pink.webp"></p>
<h2 id="utilisation--feedback">Utilisation &amp; feedback</h2>
<p>Maintenant qu'on a définit des patterns, qu'on les a associés à des intégrations Prometheus, GitLab ou autre, que fait-on pour que ça marche ? Et bien rien, juste s'assurer que le blinky est alimenté, et qu'il s'allume de temps en temps (pas trop souvent non plus, surtout sur déclenchement d'alertes).</p>
<p>Si l'on retourne sur le menu du blinky, on peut voir les derniers messages envoyés, avec différents status : Played, Failed, Pending... Ce serait drole de pouvoir monitorer ces events sur un autre blinky #inception :)
<img alt="Blinky messages" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-messages.webp"></p>
<p>L'application web est super simple, j'ai eu un blinky fonctionnel en 2 temps 3 mouvements. Et si jamais on s'en sort pas, on peut toujours aller sur le canal discord du projet pour échanger.</p>
<p>Sur le matériel lui-même, ça fait le boulot, juste j'aurais aimé connaitre dans quel sens se met l'objet, suivant les patterns qu'on définit ça peut se jouer à l'envers ;) Et je sais pas aussi si dans un environnement &quot;pro&quot;, une prise Ethernet en PoE serait la bienvenue ?</p>
<p>Enfin bravo à l'équipe, c'est ludique, fun, j'espère que ce petit projet rencontrera un petit succès !
<img alt="Blinky sur le bureau" class="zoomable" decoding="async" loading="lazy" src="/2023/06/2023-06-12-blinky-03.webp"></p>
<h3 id="notes">Notes</h3>
<p>Difficile de maintenir un blog tech à jour, même si celui-ci est tout jeune, ce n'est jamais évident de prendre le temps pour mettre noir sur blanc les idées et articles que l'on souhaite partager.</p>
<p>Malgré un backlog qui se remplit doucement, la &quot;peur de la page blanche&quot; accentue le fait de ne pas écrire autant que je le souhaiterais. Et je ne parle pas non plus des priorités pro et perso ;)</p>
<p>Mais aujourd'hui je me force un peu pour vous parler d'un projet qui change un tout petit peu des REX de confs ou how-tos, j'espère que cela vous a plu !</p>]]></content:encoded></item></channel></rss>