SONAR-5623 SONAR-5627 Update UI of the admin page

10 files changed, 29 insertions, 89 deletions

diff --git a/server/sonar-web/src/main/coffee/analysis-reports/app.coffee b/server/sonar-web/src/main/coffee/analysis-reports/app.coffee
index 0c602cada95..80b07c5f073 100644
--- a/server/sonar-web/src/main/coffee/analysis-reports/app.coffee
+++ b/server/sonar-web/src/main/coffee/analysis-reports/app.coffee
@@ -23,7 +23,6 @@ requirejs [
   'analysis-reports/layout'
   'analysis-reports/models/reports'
   'analysis-reports/views/reports-view'
-  'analysis-reports/views/header-view'
   'analysis-reports/views/actions-view'
 
   'common/handlebars-extensions'
@@ -33,7 +32,6 @@ requirejs [
   Layout
   Reports
   ReportsView
-  HeaderView
   ActionsView
 ) ->
 
@@ -65,8 +63,6 @@ requirejs [
         collection: @reports
       @layout.actionsRegion.show @actionsView
 
-      @layout.onResize()
-
       window.process.finishBackgroundProcess process
 
 
@@ -92,11 +88,6 @@ requirejs [
 
 
   App.addInitializer ->
-    @headerView = new HeaderView app: @
-    @layout.headerRegion.show @headerView
-
-
-  App.addInitializer ->
     @reports = new Reports()
     @router = new Router app: @
     Backbone.history.start()
diff --git a/server/sonar-web/src/main/coffee/analysis-reports/layout.coffee b/server/sonar-web/src/main/coffee/analysis-reports/layout.coffee
index 147522cd7bb..76bdd1068d0 100644
--- a/server/sonar-web/src/main/coffee/analysis-reports/layout.coffee
+++ b/server/sonar-web/src/main/coffee/analysis-reports/layout.coffee
@@ -7,32 +7,12 @@ define [
 ) ->
 
   class extends Marionette.Layout
-    className: 'navigator analysis-reports-navigator'
     template: Templates['analysis-reports-layout']
 
 
     regions:
-      headerRegion: '.navigator-header'
-      actionsRegion: '.navigator-actions'
-      resultsRegion: '.navigator-results'
-
-
-    ui:
-      side: '.navigator-side'
-      results: '.navigator-results'
-
-
-    initialize: ->
-      jQuery(window).on 'resize', => @onResize()
-
-
-    onResize: ->
-      footerEl = jQuery('#footer')
-      footerHeight = footerEl.outerHeight true
-
-      resultsEl = @ui.results
-      resultsHeight = jQuery(window).height() - resultsEl.offset().top - footerHeight
-      resultsEl.height resultsHeight
+      actionsRegion: '.analysis-reports-actions'
+      resultsRegion: '.analysis-reports-results'
 
 
     showSpinner: (region) ->
diff --git a/server/sonar-web/src/main/coffee/analysis-reports/views/header-view.coffee b/server/sonar-web/src/main/coffee/analysis-reports/views/header-view.coffee
deleted file mode 100644
index 3162189ff0a..00000000000
--- a/server/sonar-web/src/main/coffee/analysis-reports/views/header-view.coffee
+++ /dev/null
@@ -1,10 +0,0 @@
-define [
-  'backbone.marionette'
-  'templates/analysis-reports'
-], (
-  Marionette
-  Templates
-) ->
-
-  class extends Marionette.ItemView
-    template: Templates['analysis-reports-header']
diff --git a/server/sonar-web/src/main/coffee/analysis-reports/views/reports-empty-view.coffee b/server/sonar-web/src/main/coffee/analysis-reports/views/reports-empty-view.coffee
index da789ce358f..11ff49aeff5 100644
--- a/server/sonar-web/src/main/coffee/analysis-reports/views/reports-empty-view.coffee
+++ b/server/sonar-web/src/main/coffee/analysis-reports/views/reports-empty-view.coffee
@@ -7,5 +7,6 @@ define [
 ) ->
 
   class extends Marionette.ItemView
+    className: 'analysis-reports-no-results'
     tagName: 'li'
     template: Templates['analysis-reports-empty']
diff --git a/server/sonar-web/src/main/coffee/analysis-reports/views/reports-view.coffee b/server/sonar-web/src/main/coffee/analysis-reports/views/reports-view.coffee
index adc40931436..b75d8f8d9ef 100644
--- a/server/sonar-web/src/main/coffee/analysis-reports/views/reports-view.coffee
+++ b/server/sonar-web/src/main/coffee/analysis-reports/views/reports-view.coffee
@@ -31,15 +31,16 @@ define [
 
 
     bindScrollEvents: ->
-      $('.navigator-results').on 'scroll', (=> @loadMoreThrottled())
+      $(window).on 'scroll', (=> @loadMoreThrottled())
 
 
     unbindScrollEvents: ->
-      $('.navigator-results').off 'scroll'
+      $(window).off 'scroll'
 
 
     loadMore: ->
-      if $('.navigator-results').scrollTop() + $('.navigator-results').outerHeight() >= $('.navigator-results-list').outerHeight() - 40
+      lastItem = this.children.findByIndex(@collection.length - 1)
+      if $(window).scrollTop() + $(window).outerHeight() >= lastItem.$el.offset().top - 40
         @unbindScrollEvents()
         @options.app.fetchNextPage().done =>
           @bindScrollEvents() unless @collection.paging.maxResultsReached
diff --git a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-actions.hbs b/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-actions.hbs
index e8ce9787ee6..90f24e63851 100644
--- a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-actions.hbs
+++ b/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-actions.hbs
@@ -1,11 +1,6 @@
-{{#if state.active}}
-  {{t 'analysis_reports.current_activity'}}
-     
-  <a class="js-show-past-reports">{{t 'analysis_reports.past_reports'}}</a>
-{{else}}
-  <a class="js-show-current-activity">{{t 'analysis_reports.current_activity'}}</a>
-  &nbsp;&nbsp;&nbsp;
-  {{t 'analysis_reports.past_reports'}}
-{{/if}}
+<ul class="tabs">
+  <li><a class="js-show-current-activity {{#if state.active}}selected{{/if}}">{{t 'analysis_reports.current_activity'}}</a></li>
+  <li><a class="js-show-past-reports {{#unless state.active}}selected{{/unless}}">{{t 'analysis_reports.past_reports'}}</a></li>
+</ul>
 
-<span style="float: right;">{{tp 'analysis_reports.x_reports' total}}</span>
+<div class="analysis-reports-total">{{tp 'analysis_reports.x_reports' total}}</div>
diff --git a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-empty.hbs b/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-empty.hbs
index 00cb7e82333..b044d70fc04 100644
--- a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-empty.hbs
+++ b/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-empty.hbs
@@ -1 +1 @@
-<li>No reports to show</li>
+No reports to show
diff --git a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-header.hbs b/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-header.hbs
deleted file mode 100644
index 9eec52a18e4..00000000000
--- a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-header.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-<h1 class="navigator-header-title">{{t 'analysis_reports.page'}}</h1>
-<div class="navigator-header-description">The server is in charge to process reports submitted by batch analyses. This page allows to monitor the queue of pending reports to process, and gives access to the history of past analyses.</div>
diff --git a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-layout.hbs b/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-layout.hbs
index 6f55d7e7e5d..82a05f204bc 100644
--- a/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-layout.hbs
+++ b/server/sonar-web/src/main/hbs/analysis-reports/analysis-reports-layout.hbs
@@ -1,8 +1,8 @@
-<div class="navigator-header"></div>
+<h1 class="admin-page-title">{{t 'analysis_reports.page'}}</h1>
+<p class="admin-page-description">
+  The server is in charge to process reports submitted by batch analyses. This page allows to monitor the queue of
+  pending reports to process, and gives access to the history of past analyses.
+</p>
 
-<div class="navigator-content">
-  <div class="navigator-side">
-    <div class="navigator-actions"></div>
-    <div class="navigator-results"></div>
-  </div>
-</div>
+<div class="analysis-reports-actions"></div>
+<div class="analysis-reports-results"></div>
diff --git a/server/sonar-web/src/main/less/analysis-reports.less b/server/sonar-web/src/main/less/analysis-reports.less
index e734cb2dd45..c187e14e642 100644
--- a/server/sonar-web/src/main/less/analysis-reports.less
+++ b/server/sonar-web/src/main/less/analysis-reports.less
@@ -10,33 +10,17 @@
 @failedColor: #fcecec;
 
 
-.analysis-reports-navigator {
-  margin: -10px;
-
-  .navigator-side {
-    width: 50%;
-    max-width: none;
-    min-width: 660px;
-  }
-
-  .navigator-results {
-    width: auto;
-    max-width: none;
-    margin-top: 0;
-  }
-
-  .navigator-results-list > li {
-    cursor: default;
-
-    &:hover { background: transparent; }
-  }
-
-  .navigator-details { text-align: center; }
+.analysis-reports-actions {
+  margin-bottom: 10px;
+}
 
-  .navigator-actions {
-    padding: 5px 10px;
-  }
+.analysis-reports-total {
+  float: right;
+  margin-top: -20px;
+}
 
+.analysis-reports-no-results {
+  border: none !important;
 }
 
 .analysis-reports-report-pending {