Dans cet article, je vais vous présenter Dashing, un outil formidable pour créer un tableau de bord totalement personnalisé et ceci, de manière assez simple.

Dashing, basé sur Sinatra (un framework Ruby), vous permet de concevoir des tableaux de bord en utilisant des widgets.

A l'origine, Dashing était affiché sur un écran du bureau de Shopify, un gestionnaire de site e-commerce.

Pour vous faire une idée rapidement de Dashing, voici une démo.

Cet article est une présentation de Dashing et également un tutoriel pour l'installer et commencer sa configuration.

Exemple tiré de https://github.com/ssplatt/dashing_jobs

Installation

Pour le tuto, je vais installer Dashing sur une Debian 8.2 classique, en accès root.

Dashing est écrit en Ruby. Il va donc falloir installer ce qu'il faut avant :

apt-get install libssl-dev ruby-dev nodejs bundler rubygems

Ensuite, lancez l'installation de Dashing :

apt-get install dashing

Création d'un tableau de bord

Une fois Dashing correctement installé sur votre machine, il faut créer notre dashboard.

Rendez-vous dans le répertoire où vous souhaitez stocker vos données et lancez la commande suivante en remplaçant mon_dashboard par ce que vous voulez :

dashing new mon_dashboard

Positionnons-nous dans le répertoire du tableau de bord :

cd mon_dashboard

Et lancez l'installation des dépendances des paquets Ruby :

bundle

Cela va prendre quelques minutes. Une fois l'installation terminée, vous pouvez lancer Dashing via cette commande :

dashing start

Attention, si vous quittez le terminal, Dashing s'arrêtera. Il faut que vous laissiez ce terminal ouvert pour pouvoir accéder à votre tableau de bord.

Rendez-vous sur votre navigateur et accédez à l'adresse de votre machine suivie de :3030 : http://192.168.1.159:3030 par exemple.

Par défaut, Dashing fourni deux tableaux de bord : sample et sampletv.

Les widgets

Dashing met à disposition une pléthore de widgets qui vous vous permettront d'agrémenter vos tableaux de bords plus facilement ! La liste complète est disponible en cliquant sur ce lien.

Vous y trouverez de tout : statut des sauvegardes avec Bacula, les épisodes à venir de vos séries avec BetaSeries, détails d'une page Facebook, météo, nombre d'issues sur un projet GitHub, lecteur RSS, etc, etc...

Si vous avez des compétences en Coffee, SCSS et HTML, vous pourrez créer vos propres widgets !

Paramétrage d'un tableau de bord

La structure de Dashing est la suivante :

  • /dashboards : contient les templates des tableaux de bord
  • /jobs : contient les fichiers de paramètres des widgets
  • /widgets : contient les différents widgets disponibles pour vos tableaux de bord

Commençons par créer notre propre tableau de bord. Pour cela, rendez-vous dans le dossier /dashboards et créez un fichier .erb avec votre éditeur préféré :

cd dashboards
vi dash.erb

Insérez-y pour l'instant seulement ces lignes :

<% content_for :title do %>Dashboard<% end %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="welcome" data-view="Text" data-title="Hello" data-text="This is your shiny new dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div>
    </li>
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
      <div data-view="Clock"></div>
      <i class="icon-time icon-background"></i>
    </li>
  </ul>
</div>

Sauvegardez votre fichier et lancez la commande pour démarrer Dashing (dashing start). Admirez le résultat sur un navigateur.

Les tableaux de bord sont globalement du HTML classique. Chaque widget est un <li> :

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
  <div data-id="server_status" data-view="ServerStatus" data-title="Server Status"></div>
</li>

Des attributs sont présents pour positionner le widget :

  • data-row : correspond au numéro de la ligne sur laquelle le widget se positionnera
  • data-col : est le numéro de la colonne
  • data-sizex : correspond à la largeur du widget en nombre de bloc
  • data-sizey : idem que data-sizex mais pour la hauteur

Pour les deux premiers, vous pouvez les laisser à 1, le plugin gridset permettant d'afficher les blocs et de les déplacer classe automatiquement les widgets s'ils n'ont pas de position définie.

Ensuite, le contenu présent dans le <li> change suivant le widget utilisé. Leur documentation explique généralement bien leur fonctionnement.

Intégration d'un widget

Pour le fun, on va intégrer un widget dans notre tableau de bord. Parmi la liste des widgets proposés, j'ai choisi server_status.

Il permet de surveiller la disponibilité d'un site Web ou d'une machine.

Le README est succinct mais tout de même explicite. Commencez par ouvrir votre fichier /dashboards/dash.erb pour y insérer le code HTML suivant :

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="server_status" data-view="ServerStatus" data-title="Server Status"></div>
</li>

Enregistrez et rendez-vous dans le dossier des widgets pour y créer un dossier "server_status". Ensuite, copiez/collez le contenu de server_status.coffee dans un nouveau fichier nommé server_status.coffee. Faites de même pour server_status.html et server_status.scss.

Allez ensuite dans le dossier des jobs. Créez un fichier server_status.erb et insérez-y le contenu correspondant.
Les premières lignes de ce fichier doivent être modifiées par les noms des sites ou des machines que vous voulez vérifier. Si vous vérifiez une URL, choisissez comme method 'http' ; si c'est une machine sur votre réseau, 'ping'.

Enregistrez tout et relancez Dashing, vous devriez avoir ceci :

Le widget est personnalisable. Vous pouvez modifier les couleurs dans le fichier .scss (/widgets/server_status/server_status.scss).

C'était simple, n'est-ce pas ?!

Exemple d'un tableau de bord

Pour le tuto, j'ai créé un tableau de bord un peu plus conséquent contenant la météo, le statut de deux sites, la carte du trafic de Paris, une citation de Chuck Norris (toujours utile), un compte à rebours pour Noël et enfin un lecteur de flux RSS.

Tout a été très simple à intégrer. J'ai seulement modifier les couleurs du compte à rebours, un broutille sur le flux RSS et la météo.

Voici les widgets utilisés pour construire le tableau de bord :

Quelques astuces

Changer le temps de rafraîchissement d'un widget

Pour changer la fréquence de rafraîchissement des données d'un widget, il faut modifier le fichier du widget dans le dossier /jobs. Prenons l'exemple du widget server_status.

Dans le fichier /jobs/server_status.erb, il y a cette ligne :

SCHEDULER.every '5m', :first_in => 0 do |job|

C'est sur cette ligne que vous pourrez décider d'actualiser le widget toutes les x minutes. Ici, c'est toutes les 5 minutes.

Dashing utilise rufus-scheduler. Donc le paramétrage est ultra simple. Vous pouvez mettre SCHEDULER.every '3h' si vous voulez.

Changer le tableau de bord par défaut

Par défaut, Dashing lance le premier tableau de bord qu'il trouve dans son arborescence, par ordre alphabétique. Pour changer cela, ouvrez le fichier config.ru situé à la racine du projet.

En dessous de configure do, mettez cette ligne (avec une indentation) :

set :default_dashboard, 'dash'

Ainsi, le tableau de bord lancé par défaut sera celui nommé "dash".

Lancer Dashing en arrière-plan

Pour ne pas devoir laisser sa ligne de commande active quand on fait un dashing start, utilisez cette commande pour lancer Dashing en arrière-plan :

dashing start -d

Pour arrêter Dashing, faites simplement un dashing stop.

Un utilisateur a créé un script pour mettre Dashing en tant que service sur la machine.

Authentification pour accéder à Dashing

Par défaut, Dashing n'est pas protégé. Vous pouvez cependant mettre en place une sécurité login/password par HTTP simplement.

Pour cela, ouvrez le fichier de configuration config.ru situé à la racine du projet. Il va falloir modifier les lignes à partir de helpers do. Voici le code :

helpers do

  def protected!
    unless authorized?
      response['WWW-Authenticate'] = %(Basic realm="Restricted Area")
      throw(:halt, [401, "Not authorized\n"])
    end
  end

  def authorized?
    @auth ||=  Rack::Auth::Basic::Request.new(request.env)
    @auth.provided? && @auth.basic? && @auth.credentials && @auth.credentials == ['admin', 'mdp']
  end

end

Ici, le login est "admin" et le mot de passe "mdp".

D'autres méthodes d'authentification sont disponibles (via Google Apps, organisation GitHub).

Conclusion

Ultra paramétrable et personnalisable, Dashing est un excellent projet permettant de créer rapidement un tableau de bord. L'utilisation qui revient souvent sur le Net, c'est d'installer Dashing sur un Raspberry Pi et d'afficher le tableau de bord sur un écran en permanence.

La liste des widgets existants est longue mais rien ne vous empêche de créer les vôtres et de les partager à la communauté !