Merge pull request #1692 from shanzi/md

Overview panel's content

www/md_base/src/app/common/directives/panel/panel.directive.coffee

@@ -8,10 +8,9 @@ class Panel extends Directive
             controllerAs: 'panel'
             bindToController: true
             scope:
-                name: '='
-                title: '='
-                isCollapsed: '='
-                template: '='
+                # Using bind directly to avoid `title` attr on the element which lead to showing a tooltip
+                # This also makes the interface more simpler for outsiders.
+                bind: '='
                 locked: '='
         }
 
@@ -21,20 +20,20 @@ class _Panel extends Controller
     constructor: (@$element, @$scope, $compile) ->
         # The following watch statement is necessary as the collapse function
         # is done by toggleClass in this controller instead of binding in template.
-        @$scope.$watch 'panel.isCollapsed', (=> @updateCollapse())
+        @$scope.$watch 'panel.bind.collapsed', (=> @updateCollapse())
 
-        if @name
-            tag = @name.replace /_/g, '-'
+        if @bind.name
+            tag = @bind.name.replace /_/g, '-'
             content = @$element.children().eq(0).children().eq(1)
             content.html("<#{tag}></#{tag}>")
             $compile(content.contents())(@$scope)
 
     toggleCollapse: ->
-        @isCollapsed = !@isCollapsed
+        @bind.collapsed = !@bind.collapsed
         return
 
     updateCollapse: ->
-        if @isCollapsed
+        if @bind.collapsed
             @$element.addClass('collapsed')
         else
             @$element.removeClass('collapsed')

www/md_base/src/app/common/directives/panel/panel.less

@@ -13,10 +13,15 @@ panel {
     padding: 10px;
   }
 
+  .title-bar {
+    border-bottom: 1px solid #efefef;
+    padding-bottom: 5px;
+  }
+
   .title {
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-size: 16px;
+    font-size: 14px;
     color: #999;
     cursor: move;
     line-height: 36px;

www/md_base/src/app/common/directives/panel/panel.spec.coffee

@@ -12,28 +12,34 @@ describe 'panel', ->
 
     beforeEach inject injected
 
+    panelbind =
+        name: 'underline_should_be_replaced'
+        title: "test_title_string"
+        collapsed: false
+
     it 'should display title normally', ->
         $httpBackend.expectGETSVGIcons()
-        $rootScope.title = "test_title_string"
-        panel = $compile('<panel title="title">')($rootScope)
+        $rootScope.data = panelbind
+        panel = $compile('<panel bind="data">')($rootScope)
         $httpBackend.flush()
 
         title = panel.children().eq(0).children().eq(0)
         expect(title.text()).toBe("test_title_string")
 
     it 'should collapse normally', ->
         $httpBackend.expectGETSVGIcons()
-        panel = $compile('<panel is-collapsed="collapsed">')($rootScope)
+        $rootScope.data = panelbind
+        panel = $compile('<panel bind="data">')($rootScope)
         $httpBackend.flush()
 
         expect(panel.hasClass('collapsed')).toBe(false)
 
-        $rootScope.collapsed = true
+        panelbind.collapsed = true
         $rootScope.$digest()
 
         expect(panel.hasClass('collapsed')).toBe(true)
 
-        $rootScope.collapsed = false
+        panelbind.collapsed = false
         $rootScope.$digest()
 
         expect(panel.hasClass('collapsed')).toBe(false)
@@ -42,17 +48,18 @@ describe 'panel', ->
         expandButton = titlebar.children().eq(1).children().eq(0)
 
         expandButton.triggerHandler('click')
-        expect($rootScope.collapsed).toBe(true)
+        expect(panelbind.collapsed).toBe(true)
         expect(panel.hasClass('collapsed')).toBe(true)
 
         expandButton.triggerHandler('click')
-        expect($rootScope.collapsed).toBe(false)
+        expect(panelbind.collapsed).toBe(false)
         expect(panel.hasClass('collapsed')).toBe(false)
 
 
     it 'should lock normally', ->
         $httpBackend.expectGETSVGIcons()
-        panel = $compile('<panel locked="locked">')($rootScope)
+        $rootScope.data = panelbind
+        panel = $compile('<panel bind="data" locked="locked">')($rootScope)
         $httpBackend.flush()
 
         titlebar = panel.children().eq(0).children().eq(0)
@@ -69,8 +76,8 @@ describe 'panel', ->
 
     it 'should compile content directive correctly', ->
         $httpBackend.expectGETSVGIcons()
-        $rootScope.test_name = 'underline_should_be_replaced'
-        panel = $compile('<panel name="test_name">')($rootScope)
+        $rootScope.data = panelbind
+        panel = $compile('<panel bind="data">')($rootScope)
         $httpBackend.flush()
 
         content = panel.children().eq(0).children().eq(1)

www/md_base/src/app/common/directives/panel/panel.tpl.jade

@@ -1,8 +1,8 @@
 div.inner-container
   div.title-bar(layout="row")
-    div.title.no-select(flex, ng-class="{locked: panel.locked}") {{ panel.title }}
+    div.title.no-select(flex, ng-class="{locked: panel.locked}") {{ panel.bind.title }}
     div.buttons(ng-if="!panel.locked")
       md-button(ng-click="panel.toggleCollapse()")
-        md-icon(md-svg-icon="expand-panel", ng-show="panel.isCollapsed")
-        md-icon(md-svg-icon="collapse-panel", ng-show="!panel.isCollapsed")
+        md-icon(md-svg-icon="expand-panel", ng-show="panel.bind.collapsed")
+        md-icon(md-svg-icon="collapse-panel", ng-show="!panel.bind.collapsed")
   div.content

www/md_base/src/app/home/home.tpl.jade

@@ -13,9 +13,7 @@ div.dashboard-controls(layout="row")
 
 div.dashboard(ng-sortable="home.sortable_settings")
   panel(
+    bind="panel"
     ng-repeat="panel in home.panels",
-    name="panel.name",
-    title="panel.title",
-    is-collapsed="panel.collapsed",
     locked="home.settings.lock_panels.value",
     )

www/md_base/src/app/home/panels/overview/overview.directive.coffee

@@ -1,8 +1,45 @@
 class Overview extends Directive
 
-    constructor: ->
+   constructor: ->
         return {
             restrict: 'E'
             templateUrl: 'views/overview_panel.html'
+            controller: '_OverviewController'
+            controllerAs: 'overview'
         }
-
+
+class _Overview extends Controller
+    masters:
+        count: 0
+        active: 0
+
+    slaves:
+        count: 0
+        connections: 0
+
+    builders:
+        count: 0
+
+    schedulers:
+        count: 0
+
+    constructor: (buildbotService) ->
+        # TODO: Avoid fetch all the data here after # there is a direct API interface
+        buildbotService.all('masters').getList().then (entries) =>
+            actives = 0
+            for master in entries
+                actives += 1 if master.active
+            @masters.count = entries.length
+            @masters.active = actives
+
+        buildbotService.all('buildslaves').getList().then (entries) =>
+            connections = 0
+            connections += slave.connected_to.length for slave in entries
+            @slaves.count = entries.length
+            @slaves.connections = connections
+
+        buildbotService.all('builders').getList().then (entries) =>
+            @builders.count = entries.length
+
+        buildbotService.all('schedulers').getList().then (entries) =>
+            @schedulers.count = entries.length

www/md_base/src/app/home/panels/overview/overview.less

@@ -0,0 +1,43 @@
+overview {
+  display: block;
+  overflow: hidden;
+  padding: 20px 0;
+
+  .tile {
+    float: left;
+    width: 25%;
+    text-align: center;
+
+    .title {
+      font-size: 0.8em;
+      color: #333;
+    }
+
+    .count {
+      font-size: 80px;
+      color: #673ab7;
+    }
+
+    .extra {
+      color: #999;
+      font-size: 14px;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .count {
+      font-size: 50px !important;
+    }
+  }
+}
+
+.collapsed overview {
+  .tile {
+    width: 50%;
+    margin-bottom: 5px;
+  }
+
+  .count {
+    font-size: 50px;
+  }
+}

www/md_base/src/app/home/panels/overview/overview.spec.coffee

@@ -0,0 +1,46 @@
+beforeEach module 'app'
+
+describe 'overview', ->
+
+    $rootScope = $compile = $httpBackend = null
+
+    injected = ($injector) ->
+        $compile = $injector.get('$compile')
+        $rootScope = $injector.get('$rootScope')
+        $httpBackend = $injector.get('$httpBackend')
+        $q = $injector.get('$q')
+        mqService = $injector.get('mqService')
+        spyOn(mqService,"setBaseUrl").and.returnValue(null)
+        spyOn(mqService,"startConsuming").and.returnValue($q.when( -> ))
+        spyOn(mqService,"stopConsuming").and.returnValue(null)
+        decorateHttpBackend($httpBackend)
+
+    beforeEach inject injected
+
+    it 'should display tiles normally', ->
+        $httpBackend.expectDataGET('masters')
+        $httpBackend.expectDataGET('buildslaves')
+        $httpBackend.expectDataGET('builders')
+        $httpBackend.expectDataGET('schedulers')
+        elem = $compile('<overview></overview>')($rootScope)
+        $httpBackend.flush()
+
+        mastertile = elem.children().eq(0)
+        count = mastertile.children().eq(1).text().trim()
+        expect(count).toBe('1')
+        extra = mastertile.children().eq(2).text().trim()
+        expect(extra).toBe('0 active.')
+
+        slavetile = elem.children().eq(1)
+        count = slavetile.children().eq(1).text().trim()
+        expect(count).toBe('1')
+        extra = slavetile.children().eq(2).text().trim()
+        expect(extra).toBe('1 connections.')
+
+        builderstile = elem.children().eq(2)
+        count = builderstile.children().eq(1).text().trim()
+        expect(count).toBe('1')
+
+        schedulerstile = elem.children().eq(3)
+        count = schedulerstile.children().eq(1).text().trim()
+        expect(count).toBe('1')

www/md_base/src/app/home/panels/overview/overview_panel.tpl.jade

@@ -1 +1,22 @@
-| overview panel content
+div.tile
+  div.title Masters
+  div.count {{ overview.masters.count }}
+  div.extra
+    | {{ overview.masters.active }} active.
+div.tile
+  div.title Slaves
+  div.count {{ overview.slaves.count }}
+  div.extra
+    ng-pluralize(
+      count="overview.slaves.connections",
+      when="{'0': 'No connection.','one': '1 connection.','other': '{} connections.'}")
+div.tile
+  div.title Builders
+  div.count {{ overview.builders.count }}
+  div.extra
+    a(ui-sref="builds") View all builders
+div.tile
+  div.title Schedulers
+  div.count {{ overview.schedulers.count }}
+  div.extra
+    a(ui-sref="builds") View all schedulers