Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ngParis #12 - Devops Metrix

ngParis #12 - Devops Metrix

Presentation of Devops Metrix, a smart visualization of a projects' wallet's agility with AngularJS and D3.

53d87cec9fec3602638fafeaf79b9c96?s=128

David Nowinsky

June 23, 2014
Tweet

Transcript

  1. Adlen Jean-Rémi David Afane Beaudoin Nowinsky The agile glimpse

  2. DevOps

  3. VCS CI Analytics Coverage

  4. D3.js

  5. D3.js 1. Representation 2. Easy integration with Angular.js 3. Directives

    + global process (init/update/watcher)
  6. Initialization svg = d3.select $element[0] .select 'svg' node = svg.selectAll

    '.node' .data projectsData .enter() .append 'g' circlesContainer = node.append 'g'
  7. One project Project circlesContainer.append 'circle'

  8. A small project Project A large project Project circle.attr 'r',

    bubbleSize
  9. Latest release 6 months ago Latest release yesterday Project Project

    circle.style 'opacity', bubbleOpacity
  10. Build failed Build passed Project Project circle.style 'fill', bubbleColor

  11. Only a few tests Large test coverage Project Project circle.style

    'fill', (d) -> 'url(#gradient-' + bubbleId(d) + ')'
  12. Production down Production up Project Project circle.classed 'offline', (d) ->

    !d.online (+ css animation)
  13. Not agile :-( Really agile :-) 10 Project 2 Project

    circlesContainer .append 'text' .text bubbleScore
  14. Angular / D3.js integration svg = d3.select $element[0] .select 'svg'

    node = svg.selectAll '.node' .data projectsData .enter() .append 'g' circlesContainer = node.append 'g'
  15. Angular / D3.js integration svg = d3.select $element[0] .select 'svg'

    node = svg.selectAll '.node' .data $scope.projects .enter() .append 'g' circlesContainer = node.append 'g'
  16. Angular / D3.js integration angular.module 'metrix.dashboard' .directive 'metrixProjectsBubbles', -> template:

    '<svg></svg>' link: ($scope, $element) -> ...
  17. Gathering data

  18. Gathering data 1. Data generation 2. Getting real data: Github

    / Travis CI 3. CORS
  19. Using APIs .factory ‘DataProvider’, ($q, $http) -> getContributors = (url)

    -> deferred = $q.defer() $http { method: 'GET', url: url } .success (data) -> deferred.resolve data.length .error -> deferred.resolve 0 deferred.promise getContributors ‘URL_TO_API’ .then contributors -> project.contributors = contributors
  20. Bootstrapping the project

  21. Bootstrapping the project Bower -> easy package manager Gulp ->

    stream building system
  22. Gulpfile structure # Set up gulp = require 'gulp' #

    Plugins coffee = require 'gulp-coffee' # and so on # Parameters parameters = require '../config/parameters.coffee' # Tasks gulp.task 'build', ['copy', 'compile'] # Definition of task’s dependencies gulp.task 'copy', ['assets', 'vendors'] # A dependency’s dependencies gulp.task 'assets', [], -> … # Down to each elementary task gulp.task 'compile', ['copy', 'coffee', 'jade', 'less']
  23. Gulpfile tasks gulp.task 'coffee', [], -> gulp.src parameters.app_path + '/**/*.coffee'

    .pipe coffee bare: true .pipe concat parameters.app_main_file .pipe gulp.dest parameters.web_path + '/js' .pipe filesize() .on 'error', gutil.log
  24. Contribute! github.com/jrbeaudoin/devops-metrix

  25. The agile glimpse jrbeaudoin.github.io/devops-metrix github.com/jrbeaudoin/devops-metrix david.nowinsky.net/gulp-book/ Adlen Jean-Rémi David Afane

    Beaudoin Nowinsky