Biocorp infrastructure
Tableau de bord personnalisé
Etude du besoin et test de différentes solutions de tableau de bord
Diffusion: [Titre ]
Reference: [Titre ]
Latest approved version: [version]
Approved for: [scope]
Approved by: [function] [name]
Signature:
Date: [date]
Changes history
Version Date Description Justification Authors
0.1.0 05/02/2019 Création du document Pieter JOUVE
P a g e 2 | 15
SOMMAIRE
1 Présentation du projet .......................................................................................................................... 3
2 Qu’est-ce qu’un tableau de bord? ........................................................................................................ 4
2.1 Définition ...................................................................................................................................... 4
2.2 Nos attentes .................................................................................................................................. 4
3 Les besoins de l’Openspace .................................................................................................................. 5
3.1 Formulaire ..................................................................................................................................... 5
3.2 Réponses au formulaire ................................................................................................................ 6
4 Comparatif tableau de bord .................................................................................................................. 7
4.1 Smashing ....................................................................................................................................... 7
4.1.1 Exemples de tableau de bord ............................................................................................... 8
4.1.2 Liens ...................................................................................................................................... 8
4.2 Mozaik ........................................................................................................................................... 9
4.2.1 Exemples de tableaux de bord ............................................................................................ 10
4.2.2 Liens .................................................................................................................................... 10
4.3 Tipboard ...................................................................................................................................... 11
4.3.1 Exemples de tableaux de bord ............................................................................................ 12
4.3.2 Liens .................................................................................................................................... 12
4.4 Grafana........................................................................................................................................ 13
4.4.1 Exemples de tableaux de bord ............................................................................................ 14
4.4.2 Liens .................................................................................................................................... 14
5 Solution envisagée .............................................................................................................................. 15
6 Sources ................................................................................................................................................ 15
P a g e 3 | 15
1 PRESENTATION DU PROJET
Un tableau de bord personnalisé dans l’OpenSpace de Biocorp apportera une facilité de compréhension de
différentes données plus ou moins importantes (rendez-vous, dates importantes, débit internet…) sur un ou
plusieurs écrans.
Ce document portera sur une étude des besoins et des demandes, et en fonction du résultat de l’étude la
présentation de plusieurs outils.
P a g e 4 | 15
2 QU’EST-CE QU’UN TABLEAU DE BORD?
2.1 DEFINITION
Un tableau de bord (Dashboard) est une représentation visuelle des informations les plus importantes, regroupées
sur un écran afin de pouvoir être facilement comprises. C’est un outil d’évaluation de l’organisation constituée de
plusieurs indicateurs de sa performance à des moments donnés ou sur des périodes données.
Les tableaux de bord sont les panneaux de contrôle ‘intelligents’ qui affichent les données en temps réel. C’est leur
différence fondamentale par rapport aux rapports et aux tableaux obsolètes, bien que toujours utilisés. La
participation humaine est minimisée, car pratiquement les données sont mises à jour en permanence en temps réel.
Un tableau de bord est avant tout un instrument d'aide à la décision. Il mesure la performance afin de mieux évaluer
le chemin parcouru et le chemin restant à parcourir pour accéder aux objectifs de performance.
C’est pour cela que la majorité des outils proposés sur le marché pour réaliser des tableaux de bords reste tout de
même des outils servant à la partie marketing.
2.2 NOS ATTENTES
Le tableau de bord qui sera mis en place dans l’OpenSpace, n’aura pas principalement un rôle commercial, mais
plus un rôle sur des informations internes à l’entreprise qui pourront servir à chaque employés (absence, dates
importantes rappels…).
P a g e 5 | 15
3 LES BESOINS DE L’OPENSPACE
Pour connaître les besoins de l’OpenSpace en matière d’outils de et fonctionnalités, un formulaire a était transmis
en main propre à tous les employés pour connaitre leurs avis et idées sur un tableau de bord.
3.1 FORMULAIRE
P a g e 6 | 15
3.2 REPONSES AU FORMULAIRE
Une fois tous les formulaires retournés, les réponses apportés ont était groupées et jugées (Optionnel, non
applicable, obligatoire…). Tous les employés de l’OpenSpace sont pour un tableau de bord.
Outils/fonctionnalités Nombre de
fois proposés Jugements
Occupation/planning salle de réunion
5 OPT
Occupation des WC 3 N/A
Absent du jour / lendemain 2 OBLIG
Actualité biocorp (client, audit, event…)
5 N/A => Dashboard salle de pause
LinkedIn Biocorp 1 N/A
Warning si annonce du jours / slack « com interne » sylvaine
2 OPT / Dashboard salle de pause
1 blague/gif par heure / jour
4 OPT
Allumé seulement en semaine de 8h à 18h
2 OK
Débit : nperf / réseau local / bande passante
4 OBLIG
Bourse BIOCORP 1 OPT / Dashboard salle de pause
Menu jour Arthur 1 N/A
Date importante avec description / tâche à effectuer
2 OBLIG
Alertes à une date données (ex : renouveler l’app iOS)
1 OBLIG
Liste des apps à jour + numéro de la version
1 OBLIG
Indicateur Jira / Gitlab 3 Gitlab : OPT / les x dernier job (20 ?) / 2-3 jours d'historique
Jira : OPT/ les X derniers ticket mis à jour
Trafic sur l’autoroute (A75) 1 N/A
Dealabs 1 OPT
Serveur statuts (jouer un son quand quelque chose vas mal)
1 OPT / lié au débit / ajout vitesse et connexion présente
Nbr d’application Easydialog téléchargées sur les stores/utilisés
1 OPT
Nbr d’Easylog sortant de la prod’
1 N/A, lié à l’ERP
OPT = Optionnel
OBLIG = Obligatoire
N/A = Non applicable
P a g e 7 | 15
4 COMPARATIF TABLEAU DE BORD
Comme dit précédemment, les tableaux de bords sont principalement utilisés dans un aspect analytique et
marketing, les outils permettant de créer un tableau de bord selon les besoins restes très limitées.
4.1 SMASHING
Smashing, le successeur de Dashing, est un framework basé sur Sinatra qui permet de construire d’excellents
tableaux de bord. Cela semble particulièrement bien sur les téléviseurs.
Principales caractéristiques :
• Widgets prédéfinis et/ou possibilité de créer entièrement des objets avec scss, html et coffeescript.
• Les widgets exploitent la puissance des liaisons de données pour garder les choses sèches et simples.
• Utilisation d'API pour transmettre des données au tableaux de bord ou un Ruby DSL pour récupérer des
données.
• Interface glisser-déposer pour réorganiser les widgets.
Avantages :
• Grande bibliothèque de widgets disponibles.
• Écrire des widgets personnalisés en HTML / ERB, SCSS et CoffeeScript.
• Docs complets avec de nombreux exemples. Le wiki sur la page Github de Smashing inclut de nombreux
exemples et procédures.
• Open source & auto-hébergé.
• Hébergez les tableaux de bord sur Heroku.
Inconvénient :
• Ne fonctionne pas sur IE car il repose sur des événements envoyés par le serveur que IE ne met pas en
œuvre.
• La plupart des widgets obsolètes et à mettre à jour.
P a g e 8 | 15
4.1.1 EXEMPLES DE TABLEAU DE BORD
4.1.2 LIENS
https://smashing.github.io/
https://github.com/Smashing/smashing/wiki
https://github.com/Smashing/smashing/wiki/Additional-Widgets
P a g e 9 | 15
4.2 MOZAIK
Mozaïk est un outil basé sur nodejs / react / d3 / stylus pour créer facilement des tableaux de bord.
P a g e 10 | 15
4.2.1 EXEMPLES DE TABLEAUX DE BORD
4.2.2 LIENS
http://mozaik.rocks/
https://github.com/plouc/mozaik
DEMO : http://mozaik.herokuapp.com/
P a g e 11 | 15
4.3 TIPBOARD
Tipboard vous permet de définir une mise en page propore, d’utiliser une bibliothèque de widgets et de créer des
widgets, de récupérer facilement des données de sources telles que Jira et d’alimenter les widgets via « REST API ».
Avantages :
• Simple et basé sur la configuration, pas grand-chose à coder.
• Fournit une API HTTP permettant de transférer des données vers un tableau de bord.
• Open source & auto-hébergé.
• Construire des dispositions de tableau de bord avec YAML
• Peut créer et afficher plusieurs tableaux de bord à partir d'une seule instance Tipboard
Inconvénients :
• Pas de moyen facile de déploiement
• Pas de support Python 3. Tipboard est uniquement sur Python 2.7.
P a g e 12 | 15
4.3.1 EXEMPLES DE TABLEAUX DE BORD
4.3.2 LIENS
https://allegro.tech/tipboard/
https://github.com/allegro/tipboard
https://tipboard.readthedocs.io/en/latest/
P a g e 13 | 15
4.4 GRAFANA
Grafana est un logiciel libre sous licence Apache 2.0 qui permet la visualisation et la mise en forme de données
métriques. Il permet de réaliser des tableaux de bord et des graphiques depuis plusieurs sources dont des bases de
données de série temporelle comme Graphite, InfluxDB et OpenTSDB.
Le but réel de Grafana est de pouvoir créer des tableaux de bords, qui vont nous afficher ce que l’on souhaite en
spécifiant une requête. Il est extrêmement puissant s’il est bien utilisé. Par exemple, on peut afficher pour une
configuration basique : mémoire ram utilisé, capacité du cpu, le nombre de requêtes apache sur une url web.
Grafana fonctionne avec des data sources qui vont stocker ses données, métriques. Il en existe beaucoup, mais les
plus connus et les plus utilisés sont : ElasticSearch, Prometheus, InfluxDB et Graphite.
Avantages :
• Système de permission pour maintenir l'accès des utilisateurs et des équipes.
• Plusieurs sources de données.
• Alertes intégrées.
Inconvénients :
• Pas d'apprentissage automatique intégré pour les alertes.
• Pas de recherche ou d'exploration de données.
• Les sources de données définissent la manière dont le panneau doit être créé.
• Mise en place complexe.
P a g e 14 | 15
4.4.1 EXEMPLES DE TABLEAUX DE BORD
4.4.2 LIENS
https://grafana.com/
https://github.com/grafana/grafana
DEMO : https://play.grafana.org/d/000000012/grafana-play-home?orgId=1
P a g e 15 | 15
5 SOLUTION ENVISAGEE
Contenu des demandes, ainsi que les possibilités de les respecter Smashing reste le meilleur choix car il permet un
contrôle total du tableau de bord, il est possible d’utiliser des widgets existants, de les modifier ou encore de créer
de nouveaux widgets.
Si des widgets sont impossible à créer, utiliser avec Smashing rien n’empêche d’utiliser un autre tableau de bord
pour utiliser les fonctionnalités manquantes ou nécessaire.
Si plusieurs tableaux de bord viennent à être mis en place, il y aura plusieurs onglets dans le navigateur. L’extension
« Revolver – Tabs » sous chrome permet de changer automatique d’onglet tout les x temps défini.
https://chrome.google.com/webstore/detail/revolver-tabs/dlknooajieciikpedpldejhhijacnbda/related
Les cartes SD des Raspberry ayant plus de chance de tomber en panne lors de l’extinction du Raspberry ou de
potentiel crash, il est préférable d’effectuer une sauvegarder/cloner la carte SD pour éviter la réinstallation de A à Z
si un problème survient.
https://projetsdiy.fr/sauvegarder-cloner-carte-sd-raspberry-
pi/#Faire_une_copie_de_sauvegarde_d8217une_carte_SD_depuis_Windows
6 SOURCES
https://www.slant.co/topics/9940/~open-source-dashboard-frameworks
https://www.supinfo.com/articles/single/3964-qu-est-ce-que-grafana
