SONAR-5623 Further frontend work

9 files changed, 154 insertions, 102 deletions

diff --git a/server/sonar-web/src/main/coffee/monitoring/app.coffee b/server/sonar-web/src/main/coffee/monitoring/app.coffee
index da57c63b4ec..6130fe06aad 100644
--- a/server/sonar-web/src/main/coffee/monitoring/app.coffee
+++ b/server/sonar-web/src/main/coffee/monitoring/app.coffee
@@ -42,7 +42,11 @@ requirejs [
   App = new Marionette.Application
 
 
-  # Construct layout
+  App.addInitializer ->
+    @state = new Backbone.Model active: true
+    @state.on 'change:active', => @reports?.fetch()
+
+
   App.addInitializer ->
     @layout = new MonitoringLayout app: @
     jQuery('#monitoring').empty().append @layout.render().el
@@ -65,15 +69,5 @@ requirejs [
     @reports.fetch()
 
 
-#  App.addInitializer ->
-#    @codingRulesActionsView = new CodingRulesActionsView
-#      app: @
-#      collection: @reports
-#    @layout.actionsRegion.show @codingRulesActionsView
-
-
-  # Message bundles
   l10nXHR = window.requestMessages()
-
-
   jQuery.when(l10nXHR).done -> App.start()
diff --git a/server/sonar-web/src/main/coffee/monitoring/mockjax.coffee b/server/sonar-web/src/main/coffee/monitoring/mockjax.coffee
index 94deb2289b3..ebf88e223e2 100644
--- a/server/sonar-web/src/main/coffee/monitoring/mockjax.coffee
+++ b/server/sonar-web/src/main/coffee/monitoring/mockjax.coffee
@@ -9,14 +9,14 @@ define ['third-party/jquery.mockjax'], ->
     responseText: JSON.stringify
       paging:
         pageIndex: 1
-        pageSize: 5
-        total: 206
-        pages: 42
+        pageSize: 3
+        total: 3
+        pages: 1
       reports: [
         {
           id: 84
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
+          project: "org.codehaus.sonar-plugins.visualstudio:sonar-visual-studio-plugin"
+          projectName: "Analysis Bootstrapper for Visual Studio Projects"
           startDate: "2014-07-19T23:11:33+06:00"
           status: "PENDING"
         }
@@ -24,90 +24,14 @@ define ['third-party/jquery.mockjax'], ->
           id: 83
           project: "org.codehaus.sonar:sonar"
           projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
+          startDate: "2014-07-19T23:11:33+06:00"
+          status: "WORKING"
         }
         {
           id: 82
           project: "org.codehaus.sonar:sonar"
           projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
-        }
-        {
-          id: 81
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
-        }
-        {
-          id: 80
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
-        }
-        {
-          id: 79
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
-        }
-        {
-          id: 78
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
-        }
-        {
-          id: 77
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
-        }
-        {
-          id: 76
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
-        }
-        {
-          id: 75
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some asdditional text or stack trace."
-        }
-        {
-          id: 74
-          project: "org.codehaus.sonar:sonar"
-          projectName: "SonarQube"
-          startDate: "2014-07-19T23:10:33+06:00"
-          endDate: "2014-07-19T23:12:01+06:00"
-          status: "DONE"
-          extra: "Some additional text or stack trace."
+          startDate: "2014-07-19T23:11:33+06:00"
+          status: "PENDING"
         }
       ]
diff --git a/server/sonar-web/src/main/coffee/monitoring/views/header-view.coffee b/server/sonar-web/src/main/coffee/monitoring/views/header-view.coffee
index 4decd30ef99..cbfa90101e4 100644
--- a/server/sonar-web/src/main/coffee/monitoring/views/header-view.coffee
+++ b/server/sonar-web/src/main/coffee/monitoring/views/header-view.coffee
@@ -8,3 +8,25 @@ define [
 
   class extends Marionette.ItemView
     template: Templates['monitoring-header']
+    
+
+    events:
+      'click .js-monitoring-past': 'showPastReports'
+      'click .js-monitoring-current': 'showCurrentActivity'
+
+
+    initialize: (options) ->
+      @listenTo options.app.state, 'change', @render
+
+
+    showPastReports: ->
+      @options.app.state.set active: false
+
+
+    showCurrentActivity: ->
+      @options.app.state.set active: true
+
+
+    serializeData: ->
+      _.extend super,
+        state: @options.app.state.toJSON()
diff --git a/server/sonar-web/src/main/coffee/monitoring/views/report-view.coffee b/server/sonar-web/src/main/coffee/monitoring/views/report-view.coffee
index 31680d448c2..6967d5dade2 100644
--- a/server/sonar-web/src/main/coffee/monitoring/views/report-view.coffee
+++ b/server/sonar-web/src/main/coffee/monitoring/views/report-view.coffee
@@ -9,3 +9,10 @@ define [
   class extends Marionette.ItemView
     tagName: 'li'
     template: Templates['monitoring-report']
+
+
+    onRender: ->
+      status = @model.get 'status'
+      @$el.addClass 'monitoring-report-pending' if status is 'PENDING'
+      @$el.addClass 'monitoring-report-working' if status is 'WORKING'
+      @$el.addClass 'monitoring-report-done' if status is 'DONE'
diff --git a/server/sonar-web/src/main/hbs/monitoring/monitoring-header.hbs b/server/sonar-web/src/main/hbs/monitoring/monitoring-header.hbs
index 7882d9e99f2..9ec333d0f87 100644
--- a/server/sonar-web/src/main/hbs/monitoring/monitoring-header.hbs
+++ b/server/sonar-web/src/main/hbs/monitoring/monitoring-header.hbs
@@ -1,2 +1,9 @@
 <h1 class="navigator-header-title">{{t 'monitoring.page'}}</h1>
 
+<div class="navigator-header-actions button-group">
+  {{#if state.active}}
+    <button class="js-monitoring-past">{{t 'monitoring.show_past_reports'}}</button>
+  {{else}}
+    <button class="js-monitoring-current">{{t 'monitoring.show_current_activity'}}</button>
+  {{/if}}
+</div>
diff --git a/server/sonar-web/src/main/hbs/monitoring/monitoring-layout.hbs b/server/sonar-web/src/main/hbs/monitoring/monitoring-layout.hbs
index f4bf713e493..b8bb92bc4bb 100644
--- a/server/sonar-web/src/main/hbs/monitoring/monitoring-layout.hbs
+++ b/server/sonar-web/src/main/hbs/monitoring/monitoring-layout.hbs
@@ -6,4 +6,9 @@
       <div class="navigator-results"></div>
     </div>
   </div>
+  <div class="navigator-main">
+    <div class="navigator-details">
+      <i class="spinner monitoring-spinner"></i>
+    </div>
+  </div>
 </div>
diff --git a/server/sonar-web/src/main/hbs/monitoring/monitoring-report.hbs b/server/sonar-web/src/main/hbs/monitoring/monitoring-report.hbs
index c6bdea3bc36..cf4ee94b215 100644
--- a/server/sonar-web/src/main/hbs/monitoring/monitoring-report.hbs
+++ b/server/sonar-web/src/main/hbs/monitoring/monitoring-report.hbs
@@ -1,7 +1,19 @@
-<div class="line line-small">
-  Started: {{dt startTime}}
-</div>
+{{#if endDate}}
+  <div class="line line-small">
+    Finished: {{dt endDate}}
+  </div>
+{{/if}}
 
 <div class="line">
-  <i class="icon-qualifier-trk"></i> {{projectName}}
+  <span class="monitoring-project">
+    <i class="icon-qualifier-trk"></i>
+    <a href="{{dashboardUrl project}}">{{projectName}}</a>
+  </span>
+
+  <span class="monitoring-timestamp line-small">
+    Started: {{dt startDate}}
+    {{#eq status 'WORKING'}}<i class="spinner monitoring-timestamp-spinner"></i> {{/eq}}
+  </span>
 </div>
+
+<div class="monitoring-report-id">{{id}} {{status}}</div>
diff --git a/server/sonar-web/src/main/less/monitoring.less b/server/sonar-web/src/main/less/monitoring.less
index 376b7b1ceb5..2b3ce0ea041 100644
--- a/server/sonar-web/src/main/less/monitoring.less
+++ b/server/sonar-web/src/main/less/monitoring.less
@@ -1,7 +1,25 @@
+@import (reference) "mixins";
+@import (reference) "variables";
+@import (reference) "ui";
+
+
+@pendingColor: #fdfce2;
+@workingColor: #ecf9fc;
+
+
 .monitoring-navigator {
   margin: -10px;
 
-  .navigator-results { margin-top: 0; }
+  .navigator-side {
+    width: 50%;
+    max-width: none;
+  }
+
+  .navigator-results {
+    width: auto;
+    max-width: none;
+    margin-top: 0;
+  }
 
   .navigator-results-list > li {
     cursor: default;
@@ -9,4 +27,66 @@
     &:hover { background: transparent; }
   }
 
+  .navigator-details { text-align: center; }
+
+}
+
+.monitoring-report-pending {
+  background-color: @pendingColor !important;
+}
+
+.monitoring-report-working {
+  background-color: @workingColor !important;
+}
+
+.monitoring-report-done {
+  opacity: 0.75;
+}
+
+.monitoring-project {
+  display: inline-block;
+  vertical-align: middle;
+  width: 30%;
+  .text-ellipsis;
+}
+
+.monitoring-timestamp {
+  display: inline-block;
+  vertical-align: middle;
+  width: 180px;
+  margin-left: 15px;
+}
+
+.monitoring-report-id {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  opacity: 0.3;
+  font-size: @bigFontSize;
+
+  &:before { content: '#'; }
+}
+
+.monitoring-spinner {
+  .size(200px, 200px);
+  margin-top: 20px;
 }
+
+.monitoring-spinner,
+.monitoring-spinner:before
+.monitoring-spinner:after {
+  -webkit-animation-duration: 6s;
+  animation-duration: 6s;
+}
+
+.monitoring-timestamp-spinner {
+  margin-left: 10px;
+}
+
+.monitoring-timestamp-spinner,
+.monitoring-timestamp-spinner:before,
+.monitoring-timestamp-spinner:after {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index a6028bd5417..3e5d1228951 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -2763,4 +2763,5 @@ libs.usageLink=Usages
 # MONITORING
 #
 #------------------------------------------------------------------------------
-
+monitoring.show_past_reports=Show Past Reports
+monitoring.show_current_activity=Show Current Activity