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
   

   View Slide

2. DevOps
   

   View Slide

3. VCS
   CI
   Analytics
   Coverage
   

   View Slide

4. D3.js
   

   View Slide

5. D3.js
   1. Representation
   2. Easy integration with Angular.js
   3. Directives + global process
   (init/update/watcher)
   

   View Slide

6. Initialization
   svg = d3.select $element[0]
   .select 'svg'
   node = svg.selectAll '.node'
   .data projectsData
   .enter()
   .append 'g'
   circlesContainer = node.append 'g'
   

   View Slide

7. One project
   Project
   circlesContainer.append 'circle'
   

   View Slide

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

   View Slide

9. Latest release
   6 months ago
   Latest release
   yesterday
   Project Project
   circle.style 'opacity', bubbleOpacity
   

   View Slide

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

    View Slide

11. Only a few tests Large test coverage
    Project
    Project
    circle.style 'fill', (d) -> 'url(#gradient-' + bubbleId(d) + ')'
    

    View Slide

12. Production down Production up
    Project
    Project
    circle.classed 'offline', (d) -> !d.online
    (+ css animation)
    

    View Slide

13. Not agile :-( Really agile :-)
    10
    Project
    2
    Project
    circlesContainer .append 'text'
    .text bubbleScore
    

    View Slide

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'
    

    View Slide

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'
    

    View Slide

16. Angular / D3.js integration
    angular.module 'metrix.dashboard'
    .directive 'metrixProjectsBubbles',
    ->
    template: ''
    link: ($scope, $element) ->
    ...
    

    View Slide

17. Gathering data
    

    View Slide

18. Gathering data
    1. Data generation
    2. Getting real data: Github / Travis CI
    3. CORS
    

    View Slide

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
    

    View Slide

20. Bootstrapping the project
    

    View Slide

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

    View Slide

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']
    

    View Slide

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
    

    View Slide

24. Contribute!
    github.com/jrbeaudoin/devops-metrix
    

    View Slide

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
    

    View Slide