SONAR-6639 redesign migration page, step 1

server/sonar-web/Gruntfile.coffee

@@ -125,6 +125,7 @@ module.exports = (grunt) ->
           'build-app:computation'
           'build-app:drilldown'
           'build-app:groups'
+          'build-app:maintenance'
           'build-app:markdown'
           'build-app:measures'
           'build-app:metrics'
@@ -232,6 +233,9 @@ module.exports = (grunt) ->
           '<%= BUILD_PATH %>/js/apps/metrics/templates.js': [
             '<%= SOURCE_PATH %>/js/apps/metrics/templates/**/*.hbs'
           ]
+          '<%= BUILD_PATH %>/js/apps/maintenance/templates.js': [
+            '<%= SOURCE_PATH %>/js/apps/maintenance/templates/**/*.hbs'
+          ]
 
 
     clean:

server/sonar-web/src/main/js/apps/maintenance/app.js

@@ -0,0 +1,17 @@
+define([
+  './main-view'
+], function (MainView) {
+
+  var App = new Marionette.Application();
+
+  App.on('start', function (options) {
+    var viewOptions = _.extend(options, {
+      model: new Backbone.Model()
+    });
+    var mainView = new MainView(viewOptions);
+    mainView.render().refresh();
+  });
+
+  return App;
+
+});

server/sonar-web/src/main/js/apps/maintenance/main-view.js

@@ -0,0 +1,46 @@
+define([
+  './templates'
+], function () {
+
+  return Marionette.ItemView.extend({
+    template: Templates['maintenance-main'],
+
+    events: {
+      'click #start-migration': 'onStartMigrationClick'
+    },
+
+    initialize: function () {
+      this.requestOptions = { type: 'GET', url: baseUrl + '/api/system/status' };
+      setInterval(function () {
+        this.refresh();
+      }.bind(this), 5000);
+    },
+
+    refresh: function () {
+      return Backbone.ajax(this.requestOptions).done(function (r) {
+        if (r.status === 'DB_MIGRATION_RUNNING' && this.options.setup) {
+          // we are at setup page and migration is running
+          // so, let's switch to the migration status WS
+          return this.startMigration();
+        }
+        this.model.set(r);
+        this.render();
+      }.bind(this));
+    },
+
+    onStartMigrationClick: function (e) {
+      e.preventDefault();
+      this.startMigration();
+    },
+
+    startMigration: function () {
+      this.requestOptions = { type: 'POST', url: baseUrl + '/api/system/migrate_db' };
+      return this.refresh();
+    },
+
+    serializeData: function () {
+      return _.extend(this._super(), { setup: this.options.setup });
+    }
+  });
+
+});

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-down.hbs

@@ -0,0 +1,5 @@
+<h1 class="maintenance-title text-danger">SonarQube is down</h1>
+<p class="maintenance-text">Something went wrong. Please contact your system administrator.</p>
+<p class="maintenance-text text-center">
+  <a href="{{link '/'}}">Try Again</a>
+</p>

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-migration-failed.hbs

@@ -0,0 +1,2 @@
+<h1 class="maintenance-title text-danger">Upgrade Failed</h1>
+<p class="maintenance-text">Database connection cannot be established. Please check database status and JDBC settings.</p>

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-migration-needed.hbs

@@ -0,0 +1,8 @@
+<h1 class="maintenance-title">Upgrade Database</h1>
+<p class="maintenance-text">The database upgrade can take several minutes.</p>
+<p class="maintenance-text">It is mandatory to <strong>back up database</strong> before upgrading.</p>
+<p class="maintenance-text"><strong>Copy the directory /extensions</strong> from previous version before upgrading.
+</p>
+<div class="maintenance-spinner">
+  <button id="start-migration">Upgrade</button>
+</div>

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-migration-not-supported.hbs

@@ -0,0 +1,2 @@
+<h1 class="maintenance-title text-danger">Migration not supported</h1>
+<p>Migration is not supported on embedded databases.</p>

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-migration-running.hbs

@@ -0,0 +1,11 @@
+<h1 class="maintenance-title">Database Migration</h1>
+{{#if message}}
+  <p class="maintenance-text text-center">{{message}}</p>
+{{/if}}
+{{#if startedAt}}
+  <p class="maintenance-text text-center">
+    Started {{fromNow startedAt}}<br>
+    <small class="text-muted">{{dt startedAt}}</small>
+  </p>
+{{/if}}
+<p class="maintenance-spinner"><i class="spinner"></i></p>

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-migration-succeeded.hbs

@@ -0,0 +1,9 @@
+<h1 class="maintenance-title text-success">Done</h1>
+<p>Database migration has run and has been successful.</p>
+{{#if startedAt}}
+  <p class="maintenance-text text-center">
+    Started {{fromNow startedAt}}<br>
+    <small class="text-muted">{{dt startedAt}}</small>
+  </p>
+{{/if}}
+<p class="maintenance-spinner"><i class="spinner"></i></p>

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-migration.hbs

@@ -0,0 +1,10 @@
+<h1 class="maintenance-title">SonarQube is under maintenance</h1>
+<p class="maintenance-text">Whilst waiting, you might want to check
+  <a href="http://redirect.sonarsource.com/doc/plugin-library.html">new plugins</a> to extend the current functionality.
+</p>
+<p class="maintenance-text">If you are an administrator and have no idea why this message is showing, you should read the
+  <a href="http://redirect.sonarsource.com/doc/upgrading.html">upgrade guide</a>.
+</p>
+{{#eq status 'DB_MIGRATION_RUNNING'}}
+  <p class="maintenance-spinner"><i class="spinner"></i></p>
+{{/eq}}

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-no-migration.hbs

@@ -0,0 +1,4 @@
+<h1 class="maintenance-title">Database is up-to-date</h1>
+<p class="maintenance-text text-center">
+  <a href="{{link '/'}}">Go Home</a>
+</p>

server/sonar-web/src/main/js/apps/maintenance/templates/_maintenance-status-up.hbs

@@ -0,0 +1,5 @@
+<h1 class="maintenance-title">SonarQube is up</h1>
+<p class="maintenance-text text-center">All systems operational.</p>
+<p class="maintenance-text text-center">
+  <a href="{{link '/'}}">Go Home</a>
+</p>

server/sonar-web/src/main/js/apps/maintenance/templates/maintenance-main.hbs

@@ -0,0 +1,23 @@
+{{#unless setup}}
+
+  {{#eq status 'UP'}}{{> '_maintenance-status-up'}}{{/eq}}
+  {{#eq status 'DOWN'}}{{> '_maintenance-status-down'}}{{/eq}}
+  {{#eq status 'DB_MIGRATION_NEEDED'}}{{> '_maintenance-status-migration'}}{{/eq}}
+  {{#eq status 'DB_MIGRATION_RUNNING'}}{{> '_maintenance-status-migration'}}{{/eq}}
+
+{{else}}
+
+  {{#notNull state}}
+    {{#eq state 'NO_MIGRATION'}}{{> '_maintenance-status-no-migration'}}{{/eq}}
+    {{#eq state 'NOT_SUPPORTED'}}{{> '_maintenance-status-migration-not-supported'}}{{/eq}}
+    {{#eq state 'MIGRATION_RUNNING'}}{{> '_maintenance-status-migration-running'}}{{/eq}}
+    {{#eq state 'MIGRATION_SUCCEEDED'}}{{> '_maintenance-status-migration-succeeded'}}{{/eq}}
+    {{#eq state 'MIGRATION_FAILED'}}{{> '_maintenance-status-migration-failed'}}{{/eq}}
+  {{else}}
+    {{#eq status 'UP'}}{{> '_maintenance-status-up'}}{{/eq}}
+    {{#eq status 'DOWN'}}{{> '_maintenance-status-down'}}{{/eq}}
+    {{#eq status 'DB_MIGRATION_NEEDED'}}{{> '_maintenance-status-migration-needed'}}{{/eq}}
+    {{#eq status 'DB_MIGRATION_RUNNING'}}{{> '_maintenance-status-migration-running'}}{{/eq}}
+  {{/notNull}}
+
+{{/unless}}

server/sonar-web/src/main/less/components/page.less

@@ -46,7 +46,11 @@
 }
 
 .page-simple {
-  margin: 50px 180px 0;
+  max-width: 400px;
+  margin: 50px auto 0;
+  padding: 40px;
+  border: 1px solid @barBorderColor;
+  background-color: #fff;
   text-align: left;
 }
 

server/sonar-web/src/main/less/init/misc.less

@@ -48,6 +48,8 @@
 .big-spacer-bottom { margin-bottom: 16px; }
 .big-spacer-top    { margin-top: 16px; }
 
+.huge-spacer-top    { margin-top: 40px; }
+
 .little-spacer-left   { margin-left: 4px; }
 .little-spacer-right  { margin-right: 4px; }
 .little-spacer-bottom { margin-bottom: 4px; }

server/sonar-web/src/main/less/init/type.less

@@ -63,7 +63,7 @@ sub { vertical-align: text-bottom; }
 // Emphasising
 
 em     { font-style: italic; }
-strong { font-weight: bold; }
+strong { font-weight: 500; }
 
 
 // Quotes

server/sonar-web/src/main/less/pages.less

@@ -24,3 +24,4 @@
 @import "pages/issues";
 @import "pages/libraries";
 @import "pages/quality-gates";
+@import "pages/maintenance";

server/sonar-web/src/main/less/pages/maintenance.less

@@ -0,0 +1,22 @@
+@import (reference) "../variables";
+@import (reference) "../init/links";
+
+.maintenance-title {
+  margin-bottom: 40px;
+  line-height: 1.5;
+  font-size: 24px;
+  font-weight: 300;
+  text-align: center;
+}
+
+.maintenance-text {
+  margin-bottom: 16px;
+  line-height: 1.5;
+  font-size: 16px;
+  font-weight: 300;
+}
+
+.maintenance-spinner {
+  margin-top: 40px;
+  text-align: center;
+}

server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/nonav.html.erb

@@ -6,4 +6,9 @@
     </div>
   </div>
 </div>
+<script>
+  (function ($) {
+    $('html').addClass('dashboard-page');
+  })(window.jQuery);
+</script>
 </body></html>

server/sonar-web/src/main/webapp/WEB-INF/app/views/maintenance/index.html.erb

@@ -1,12 +1,8 @@
-<style>
-#maintenance {
-  padding: 10px;
-  border: 2px solid #4B9FD5;
-  background-color: #CAE3F2;
-}
-</style>
+<div id="maintenance"></div>
+
+<script>
+  require(['apps/maintenance/app'], function (App) {
+    App.start({ el: '#maintenance', setup: false });
+  });
+</script>
 
-<div id="maintenance">
-<h1>SonarQube is under maintenance. <a href="<%= ApplicationController.root_context -%>/">Please check back later.</a></h1>
-<p>Whilst waiting, you might want to check <a href="http://redirect.sonarsource.com/doc/plugin-library.html">new plugins</a> to extend the current functionality. </p><p>If you are an administrator and have no idea why this message is showing, you should read the <a href="http://redirect.sonarsource.com/doc/upgrading.html">upgrade guide</a>.</p>
-</div>

server/sonar-web/src/main/webapp/WEB-INF/app/views/setup/db_uptodate.html.erb

@@ -1,10 +1,9 @@
 <meta http-equiv='refresh' content='5;url=<%= home_path -%>'>
-
-<div class="notice migration" style="padding:10px">
-  <%= image_tag 'accept.png' -%> <b>Database is up-to-date.</b>
-  <br/>
-  <br/>
+<h1 class="maintenance-title text-success">Database is up-to-date</h1>
+<p class="maintenance-text">
   You will be redirected shortly to SonarQube.
-  <br/>
-  <i>(if this does not happen, you can <a href="<%= home_path -%>">click here to be redirected</a>)</i>
-</div>
+  <br>
+  <small class="text-muted">
+    (if this does not happen, you can <a href="<%= home_path -%>">click here to be redirected</a>)
+  </small>
+</p>

server/sonar-web/src/main/webapp/WEB-INF/app/views/setup/dbdown.html.erb

@@ -1,6 +1,5 @@
-<div class="alert alert-danger">
-  <h3 class="text-danger">Fail to connect to database</h3>
-  <p>Database connection cannot be established. Please check database status and JDBC settings.</p>
-  <br/>
+<h1 class="maintenance-title text-danger">Fail to connect to database</h1>
+<p class="maintenance-text">Database connection cannot be established. Please check database status and JDBC settings.</p>
+<div class="maintenance-spinner">
   <%= button_to "Try again", { :action => "index" }, :method => :get %>
 </div>

server/sonar-web/src/main/webapp/WEB-INF/app/views/setup/failed.html.erb

@@ -1,7 +1,2 @@
-<div class="error migration" style="padding:10px">
-  <%= image_tag 'exclamation.png' -%>
-  <b>Impossible to upgrade database</b>
-  <br/>
-  <br/>
-  <%= DatabaseMigrationManager.instance.message -%>
-</div>
+<h1 class="maintenance-title text-danger">Impossible to upgrade database</h1>
+<p class="maintenance-text"><%= DatabaseMigrationManager.instance.message -%></p>

server/sonar-web/src/main/webapp/WEB-INF/app/views/setup/form.html.erb

@@ -1,14 +1,10 @@
 <form action="<%= ApplicationController.root_context -%>/setup/setup_database" method="POST">
-<div class="admin migration">
-  <h1 class="marginbottom10">Upgrade database</h1>
-  <br/>
-  <h3>Important</h3>
-  <ul>
-    <li>The database upgrade can take several minutes.</li>
-    <li>It is mandatory to <b>back up database</b> before upgrading.</li>
-    <li><b>Copy the directory /extensions</b> from previous version before upgrading.</li>
-  </ul>
-  <br/>
-    <input 	type="submit" value="Upgrade">
-</div>
+  <h1 class="maintenance-title">Upgrade database</h1>
+  <p class="maintenance-text">The database upgrade can take several minutes.</p>
+  <p class="maintenance-text">It is mandatory to <strong>back up database</strong> before upgrading.</p>
+  <p class="maintenance-text"><strong>Copy the directory /extensions</strong> from previous version before upgrading.
+  </p>
+  <div class="maintenance-spinner">
+    <input type="submit" value="Upgrade">
+  </div>
 </form>

server/sonar-web/src/main/webapp/WEB-INF/app/views/setup/migration_running.html.erb

@@ -1,13 +1,6 @@
 <meta http-equiv='refresh' content='5;'>
 
-<%
-  start_time = DatabaseMigrationManager.instance.migration_start_time
-%>
-
-<div class="admin migration" style="padding:10px">
-  <i class="spinner" style="vertical-align: text-bottom;"></i>
-  <b>SonarQube Database is currently upgrading.</b>
-  <br/>
-  <br/>
-  Started <%= distance_of_time_in_words(start_time, Time.now) -%> ago (<%= l start_time -%>)
-</div>
+<% start_time = DatabaseMigrationManager.instance.migration_start_time %>
+<h1 class="maintenance-title">Database is currently upgrading</h1>
+<p class="maintenance-text text-center">Started <%= distance_of_time_in_words(start_time, Time.now) -%> ago (<%= l start_time -%>)</p>
+<div class="maintenance-spinner"><i class="spinner"></i></div>