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.

David Nowinsky

June 23, 2014
Tweet

More Decks by David Nowinsky

Other Decks in Technology

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