mageekblog - Mot-clé - d3.jsLe blog personnel de Frédéric Hardy. Au menu, PHP, agilité, FreeBSD, cuisine et photographies.2021-12-02T08:20:54+01:00Frédéric Hardyurn:md5:26874ca5b8cd4cac8d08b0e68e64f63aDotclearphpfpm.cubism.jsurn:md5:b118a8c0ef3e395edb0aa547e503fd332013-07-10T14:01:00+02:002013-07-10T18:46:48+02:00mageekguyProjetscubism.jsd3.jsJavaScriptPHP-FPM<p>Depuis quelques jours, j'ai mis en production un serveur <a href="http://php.net/manual/fr/install.fpm.php">PHP-FPM</a> dans le cadre de mon activité professionnelle.</p>
<p>Cependant, nous rencontrons depuis sa mise en service un certain nombre de problèmes induits entre autres par le fait que nous n'avons aucune idée précise du nombre de connexions simultanées que le serveur doit être capable de gérer afin d'offrir une qualité de service optimale.</p>
<p>Et nous avons d'autant moins le droit à l'erreur qu'il s'agit d'un site marchand.</p>
<p>Nous avons donc besoin de superviser le serveur afin de détecter les montées en charge et valider le fait que les valeurs que nous avons défini pour les paramètres <code>pm.max_children</code>, <code>pm.start_servers</code>, <code>pm.min_spare_servers</code> et <code>pm.max_spare_servers</code>.</p>
<p>De plus, nous avons des plantages aléatoires au niveau de <a href="http://php.net/manual/fr/install.fpm.php">PHP-FPM</a> dont nous ne parvenons pas à cerner l'origine.</p>
<p>Pour cela, nous avons bien un outil de supervision, mais il a l'inconvénient de ne pas permettre un suivi en temps réel du serveur <a href="http://php.net/manual/fr/install.fpm.php">PHP-FPM</a>, puisqu'il génère des moyennes sur un intervalle de temps donnés.</p>
<p>Nous aurions pu évidemment modifier sa configuration pour avoir une vision plus fine de la situation, mais il m'a semblé plus pertinent, rapide et amusant de développer un script JavaScript capable de générer les graphiques dont nous avions besoin.</p> <p><a href="http://php.net/manual/fr/install.fpm.php">PHP-FPM</a> est en effet capable de fournir un grand nombre d'informations très pertinentes sur son état via une requête HTTP, et cela dans différents formats.</p>
<p>Il faut pour cela attribuer une valeur, comme par exemple <code>/status</code>, à la directive <code>pm.status_path</code> de <a href="http://php.net/manual/fr/install.fpm.php">PHP-FPM</a> via son fichier de configuration.</p>
<p>Une fois cela fait, ainsi qu'éventuellement un peu de configuration au niveau du serveur HTTP pour en limiter l'accès, il n'y a plus qu'à se rendre sur <code>/status</code> avec le navigateur de son choix pour obtenir un rapport sur l'état de PHP-FPM.</p>
<blockquote><pre>pool: mon_pool_qui_roxe
process manager: dynamic
start time: 08/Jul/2013:16:15:13 +0200
start since: 163022
accepted conn: 69031
listen queue: 0
max listen queue: 0
listen queue len: 0
idle processes: 8
active processes: 84
total processes: 92
max active processes: 97
max children reached: 0</pre></blockquote>
<p>Cerise sur le gâteau, il est possible de passer des arguments à cette URL pour obtenir des informations supplémentaires et un format différent.</p>
<p>L'ajout de <code>json</code>, <code>xml</code> ou <code>html</code> permet ainsi d'avoir les données au format correspondant, tandis que l'ajout de <code>full</code> permet d'avoir un état de chacun des sous-processus actuellement actifs de <a href="http://php.net/manual/fr/install.fpm.php">PHP-FPM</a>.</p>
<p>Et évidemment, ces arguments sont cumulables, et l'url <code>/status?json&full</code> permet donc d'avoir un rapport exhaustif de l'état du serveur au format <a href="http://fr.wikipedia.org/wiki/JavaScript_Object_Notation"><abbr title="JavaScript Object Notation">JSON</abbr></a>.</p>
<p>Une fois cela compris, il n'y a plus qu'à développer le script JavaScript capable d'exploiter ces informations.</p>
<p>Or, il se trouve qu'en <a href="http://blog.mageekbox.net/?post/2013/07/04/Timeline.d3.js">m'amusant</a> avec <a href="http://d3js.org">d3.js</a>, j'ai découvert <a href="http://square.github.io/cubism/">cubism.js</a> qui permet justement de représenter ce type d'information sous <a href="http://vis.berkeley.edu/papers/horizon/">une forme graphique</a> très efficace, du moins une fois que l'on en a compris le principe.</p>
<p>Ainsi est né <a href="https://github.com/mageekguy/phpfpm.cubism.js">phpfpm.cubism.js</a> qui est depuis aujourd'hui disponible sur github, même s'il ne s'agit que d'un <abbr title="Minimum Viable Product">MVP</abbr>.</p>
<p><a href="http://blog.mageekbox.net/public/screenshot.png" title="phpfpm.cubism.js"><img src="http://blog.mageekbox.net/public/.screenshot_m.jpg" alt="phpfpm.cubism.js" style="margin: 10px auto; display: block; " title="phpfpm.cubism.js, juil. 2013" /></a></p>
<p>En effet, si le code est parfaitement fonctionnel en l'état, il ne répond pas encore totalement à mon cahier des charges puisqu'il ne gère pas encore les informations relatives aux sous-processus de PHP-FPM.</p>
<p>Cependant, il permet d'avoir très rapidement une idée précise de l'état d'un serveur <a href="http://php.net/manual/fr/install.fpm.php">PHP-FPM</a> puisqu'il suffit d'accéder à l'URL correspondante pour commencer la collecte et l'affichage des données.</p>
<p>La documentation est de plus très succincte même si j'ai fais mon possible pour fournir les informations indispensables à sa mise en place qui est très rapide et n'est pas compliqué, loin s'en faut.</p>
<p>Et pour ceux qui se poserait la question, les graphiques dont le titre est préfixé par <code>~</code> permettent de visualiser le différentiel entre les informations collectées à l'instant <code>t</code> et celles obtenues à l'instant <code>t - 1</code>.</p>http://blog.mageekbox.net/?post/2013/07/10/phpfpm.cubism.js#comment-formhttp://blog.mageekbox.net/?feed/atom/comments/434Timeline.d3.jsurn:md5:8742af712221646de3592a6805aadb552013-07-04T13:30:00+02:002013-07-04T13:30:00+02:00mageekguyRéfléxionsatoumd3.jsmoment.jsPHP<p>J’utilise <a href="http://www.php.net">PHP</a> quotidiennement, en général plus de 8 heures par jour réparties entre mes développements professionnels et des projets personnels tels qu’<a href="http://www.atoum.org/atoum">atoum</a>.</p>
<p>Pour autant, je ne suis pas d’une fidélité exemplaire et je vais parfois voir ailleurs pour plusieurs raisons.</p>
<p>Il m’arrive en effet d’en avoir marre de voir des lignes de code à longueur de temps et de ressentir le besoin de manipuler des choses plus graphiques.</p>
<p>Ensuite, je trouve bénéfique d’allez voir ce qu’il se fait ailleurs afin de voir s’il n’est pas possible de mettre en application certains concepts intéressants dans mon propre contexte.</p> <p>Dernièrement, je me suis donc amusé un peu avec <a href="http://fr.wikipedia.org/wiki/Quartz_Composer">Quartz Composer</a> et avec <a href="http://d3js.org">d3.js</a>.</p>
<p>Ces deux outils ont en effet l’avantage d’être simples et rapides à appréhender, ce qui permet d’obtenir un résultat relativement intéressant en un minimum de temps.</p>
<p>Or, le temps est une ressource rarissime dans mon univers et ces outils sont donc très intéressants pour moi.</p>
<p>J’ai donc développé il y a quelque temps <a href="http://blog.mageekbox.net/?post/2012/12/22/Horloge-binaire">un économiseur d’écran pour OS X</a> prenant la forme d’une <a href="https://github.com/mageekguy/BinaryClock">horloge binaire</a>, et j’ai créé <a href="http://treemap.atoum.org">une représentation du taux de couverture d’un code par ses tests unitaires</a> originale à l’aide de <a href="http://d3js.org">d3.js</a>.</p>
<p>Et comme j’ai vraiment pris un grand plaisir à utiliser <a href="http://d3js.org">d3.js</a>, car tout comme <a href="http://www.atoum.org/atoum">atoum</a>, son utilisation est simple et intuitive, j’ai décidé de l’utiliser à nouveau à l’occasion de la publication de <a href="http://www.php.net">PHP</a> 5.5.</p>
<p>En effet, lorsque j’ai commencé la rédaction de mon <a href="http://blog.mageekbox.net/?post/2013/06/28/Impressive">précédent billet</a>, mon objectif était de décrire les apports de cette nouvelle version.</p>
<p>Cependant, depuis un certain temps, je me disais que le rythme de publication des versions du langage s’était considérablement accéléré, à tel point que j’ai du mal à le suivre.</p>
<p>Et après réflexion, il m’a semblé plus pertinent de mettre en lumière ce phénomène qui montre la vitalité de <a href="http://www.php.net">PHP</a> sur la durée plutôt que les nouvelles fonctionnalités de cette version 5.5.</p>
<p>Je me suis donc mis en quête à la fois <a href="http://php.net/eol.php">des données nécessaires</a> et d’un outil capable de les représenter efficacement sous une forme graphique.</p>
<p>Mon premier réflexe a donc été de lancer Numbers, mais j’ai bien vite compris que je ne parviendrais pas à obtenir ce que je désirais avec ce logiciel et j’ai alors pensé à <a href="http://d3js.org">d3.js</a>.</p>
<p>Ce projet se présente en effet lui-même comme un outil conçu pour manipuler des documents représentant des données, ce qui correspondait exactement à mon besoin et allait même au-delà puisqu’il permet de générer <a href="https://github.com/mbostock/d3/wiki/Gallery">des graphiques interactifs</a>.</p>
<p>J’ai donc demandé à mon moteur de recherche favori de me localiser un script utilisant <a href="http://d3js.org">d3.js</a> me permettant d’obtenir une représentation graphique des dates de sorties des différentes versions de <a href="http://www.php.net">PHP</a>.</p>
<p>Las, je n’ai pas trouvé de solution clef en main me satisfaisant et j’ai donc décidé de développer la mienne en me basant sur <a href="http://bl.ocks.org/bunkat/2338034">celle</a> qui correspondait le plus à mon besoin.</p>
<p>Grâce à la puissance de <a href="http://d3js.org">d3.js</a>, mais également de <a href="http://momentjs.com">moment.js</a>, j’ai donc obtenu relativement rapidement un résultat suffisant pour me permettre de publier un graphique acceptable dans mon billet.</p>
<p>Et cerise sur le gâteau, j’ai même lié à cette image la page permettant la génération du graphique.</p>
<p>Cependant, je ne me suis pas arrêté là et j’ai poursuivi mon développement, car je souhaitais ajouter un certain nombre de fonctionnalités.</p>
<p>Un profond remaniement de code plus tard afin d’avoir un code plus efficace et plus facile à maintenir et à faire évoluer, j’avais donc ajouté la possibilité de visualiser d’une manière plus précise une partie du graphe, amélioré la gestion des informations affichées et géré un nouveau paramètre permettant de représenter graphiquement le temps depuis lequel une version est obsolète.</p>
<p><a href="http://mgbx.net/phptimeline" title="timelined3js.png"><img src="http://blog.mageekbox.net/public/.timelined3js_m.jpg" alt="timelined3js.png" style="margin: 10px auto; display: block; " title="timelined3js.png, juil. 2013" /></a></p>
<p>Donc si vous êtes <a href="http://mgbx.net/phptimeline">dans le rouge</a>, vous êtes très mal et je vous encourage à <a href="http://fr2.php.net/manual/en/migration54.php">mettre à jour</a> votre version de <a href="http://www.php.net">PHP</a> le plus rapidement possible !</p>
<p>Il ne me reste aujourd’hui qu’à nettoyer un peu le code, permettre d’acquérir les données via une requête asynchrone afin de permettre la mise à jour automatique du graphe et corriger quelques problèmes esthétiques mineurs.</p>
<p>Accessoirement, je viens de le mettre sur <a href="https://github.com/mageekguy/timeline.d3.js">github</a>.</p>
<p>Le développement de ce code ne m’a pas posé de problème particulier, même si la programmation orientée objet en javascript ne s’appréhende pas du tout de la même façon dans ce langage qu’en <a href="http://www.php.net">PHP</a> et qu’il est assez facile d’obtenir des comportements très étranges lorsque l’on n’a pas pleinement conscience de ce que représente <code>this</code> lorsqu’on le manipule (dire qu’on dit que <a href="http://www.php.net">PHP</a> a des comportements étranges…).</p>
<p>La gestion du temps, absolument indispensable dans le cadre de ce graphique, n’a pas non plus été un problème grâce à <a href="http://momentjs.com">moment.js</a>.</p>
<p>Tout comme <a href="http://d3js.org">d3.js</a>, cet outil est en effet un véritable concentré de simplicité et d’efficacité qui permet au développeur de s’affranchir totalement de la problématique habituellement posée par la manipulation de données temporelles tous langages confondus, à tel point que sa documentation est presque inutile alors qu’elle est juste parfaite.</p>
<p>D3.js ne m’a pas non plus posé de problèmes particuliers, si ce n’est à cause de ma propre bêtise et de la fatigue induite par le fait que je m’obstine à coder jusqu’à minuit passé.</p>
<p>Sa documentation est en effet excellente et il existe de très nombreux exemples d’utilisation sur Internet dont l’étude permet de trouver le moyen d’obtenir un résultat particulier.</p>
<p>O'reilly publie de plus <a href="http://chimera.labs.oreilly.com/books/1230000000345/">un excellent livre</a> intitulé « Interactive Data Visualization for the Web » qui a l’énorme avantage d’être <a href="http://chimera.labs.oreilly.com/books/1230000000345/index.html">lisible gratuitement en ligne</a> et dans son intégralité et qui explique très bien les différents concepts mis en œuvre par <a href="http://d3js.org">d3.js</a>.</p>
<p>Il est donc très facile de trouver une solution à un problème.</p>
<p>Bref, j’ai passé un excellent moment loin de <a href="http://www.php.net">PHP</a>, et non, ce billet n'est pas sponsorisé.</p>http://blog.mageekbox.net/?post/2013/07/04/Timeline.d3.js#comment-formhttp://blog.mageekbox.net/?feed/atom/comments/431