Dernier article pour cette série sur comment faire un dashboard qui déchire avec Dashing. Nous avons préalablement vu pourquoi utiliser dashing, puis nous avons vu comment faire un super widget giphy, aujourd’hui je vous propose de finir avec un widget JIRA.
Tout d’abord, avant d’attaquer la partie technique laissez-moi vous expliquer pourquoi ce widget nous est utile.
Notre équipe est organisée dans une logique Kanban, c’est-à-dire que nous travaillons en flux tiré et nous nous efforçons de limiter l’encours. Afin de gérer notre flux nous utilisons principalement deux outils : le suivi du nombre d’éléments en cours et notre « throughput », c’est-à-dire notre débit. C’est ce deuxième indicateur qui va nous intéresser aujourd’hui.
Après avoir étudié notre débit pendant plusieurs semaines, nous nous sommes rendu compte que nous délivrions environ quinze éléments en quinze jours.
Nous allons donc faire une petite jauge pour dashing pour visualiser en temps réel le nombre d’élément qui sont sortis les quinze derniers jours et ainsi avoir un feedback pour nous prévenir lorsque ce nombre chute (ou pour nous arrêter boire un coup s’il augmente trop 😉 ).
Je pars du principe que vous avez lu l’article précédent et donc que vous avez déjà un embryon de dashboard à minima.
Pour commencer nous allons donc ajouter à notre dashboard (/dashboard/foodash.erb) un nouveau widget de type « meter » :
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="throughtput" data-view="Meter" data-title="Nb tickets DONE (15j)" data-min="0" data-max="30"></div>
</li>
Nous utilisons pour le moment le widget de base, si vous démarrez votre dashboard vous devriez avoir quelque chose comme ça :
Bien, passons à l’alimentation de notre widget. Nous allons maintenant créer un fichier jira.rb dans le répertoire jobs :
# encoding: utf-8
require 'httparty'
require 'json'
SCHEDULER.every '5m', :first_in => 0 do |job|
nbDays = 15
auth = {:username => "USERNAME", :password => "PASSWORD"}
url_jira = "http://your.jira.com/rest/api/2.0.alpha1/search?jql="
issues_done = getIssues(url_jira, auth, nbDays)
send_event(:throughtput, value: issues_done.length)
end
def getIssues(url_jira, auth, nbDays)
jql = 'project=SEC AND status=Closed AND resolution = Fixed AND type!=Epic AND resolutiondate>startOfDay(-'+nbDays.to_s+")"
url = url_jira+ERB::Util.url_encode(jql)
res = HTTParty.get(url, :basic_auth => auth)
return res["issues"]
end
A noter qu’en fonction de votre version de jira, il faudra que vous modifiez l’appel à l’API, mais ce ne devrait pas être bien compliqué à migrer. J’ai par facilité préféré utiliser une authentification par login/password. Dans l’idéal il faudrait transformer ceci en authentification oauth (si quelqu’un veut proposer une amélioration ce sera avec plaisir). Attention à bien penser à encoder l’url sinon il y a de grande chance pour que l’appel à Jira ne fonctionne pas.
Suite à la création de notre job, notre widget se met à jour automatiquement toutes les cinq minutes :
Maintenant, ce que nous souhaitons faire c’est y apporter un peu de couleur pour faciliter la lecture. Dans l’idéal notre widget sera vert si nous avons fini au moins 12 éléments, jaune jusqu’à 9, puis rouge en deçà (bornes définies avec l’équipe).
Nous ajoutons donc dans notre job une petite méthode pour définir la couleur (méthode bien verbeuse pour en faciliter la lecture cher lecteur) :
def getBackgroundColorByNBIssuesDone(nbIssues)
hotness = "cool"
if nbIssues < 12
hotness = "warm"
if nbIssues < 9
hotness = "hot"
end
end
return hotness
end
Et nous modifions le send event pour envoyer également cette couleur au widget :
send_event(:throughtput, value: issues_done.length, hotness: getBackgroundColorByNBIssuesDone(issues_done.length))
Pour que la couleur de fond soit modifié nous allons modifier le fichier coffeescript de notre widget meter, widgets/meter/meter.coffee et ajouter cette partie :
onData: (data) ->
node = $(@node)
hotcss = switch
when data.hotness == "cool" then "#00C176"
when data.hotness == "warm" then "#FABE28"
when data.hotness == "hot" then "#FF003C"
$(@node).css("background-color", hotcss)
Ainsi notre widget ressemblera à ça :
Ou sinon :
Voilà, notre widget est déjà terminé. Comme vous l’avez-vu, nous avons quelque chose de très précis, facile à lire et ceci pour tout juste une trentaine de ligne de code. De plus, cette jauge colorée pourra être réutilisée pour d’autres indicateurs.
C’est ainsi que se termine cette série d’article Dashing, j’espère que cela vous aura donné envie de vous lancer, vous aussi, dans la création de joli dashboard très utile. Si vous avez besoin d’aide, n’hésitez pas à nous contacter.
Agile Tribu 