ngParis #12 - Devops Metrix

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

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