ATLAS-3761:- UI: Show progress bar for migration page

dashboardv2/public/css/scss/migration-style.scss

@@ -26,3 +26,7 @@
 @import "theme.scss";
 @import "stats.scss";
 @import "override.scss";
+
+.initialLoading {
+    left: 0px !important;
+}
\ No newline at end of file

dashboardv2/public/css/scss/stats.scss

@@ -61,6 +61,7 @@
     .panel {
         &.panel-default {
             padding: 5px;
+            margin: 5px;
         }
 
         .panel-body {
@@ -80,6 +81,12 @@
 
     .table {
         &.stat-table {
+            width: 100%;
+
+            td {
+                display: table-cell;
+            }
+
             &.notification-table {
                 &.table-striped>tbody>tr:nth-of-type(odd) {
                     background-color: $color_white_lilac_approx;
@@ -113,12 +120,48 @@
     }
 }
 
-.refresh-container {
-    background: white;
+.statistics-header {
+    height: 50px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: fixed;
-    z-index: 9999;
-    right: 23px;
-    top: 7px;
+    z-index: 999;
+    top: 0px;
+    padding: 0px 15px;
+    background: #fff;
+    border-bottom: 1px #e8e9ee solid;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .05);
+
+    &>div {
+        margin: 0px 5px;
+    }
+
+    pre {
+        width: 100%;
+        padding: 5px 10px;
+        margin: 0px 10px;
+        color: $gray;
+
+        .color {
+            color: $color_jungle_green_approx;
+            font-weight: bold;
+        }
+    }
+
+    .progress {
+        width: 100%;
+        margin-top: 7px;
+        margin-bottom: 0px;
+
+        .progress-bar-success {
+            background-color: $color_jungle_green_approx;
+        }
+    }
+
+    .refresh-container {
+        background: white;
         border-radius: 23px;
 
         .btn {
@@ -126,4 +169,5 @@
             border-radius: 23px;
             padding: 10px 10px;
         }
+    }
 }
\ No newline at end of file

dashboardv2/public/js/migration.js

@@ -77,9 +77,6 @@ require.config({
         'pnotify': {
             'exports': ['pnotify']
         },
-        'jstree': {
-            'deps': ['jquery']
-        },
         'd3': {
             'exports': ['d3']
         }
@@ -106,7 +103,6 @@ require.config({
         'moment': 'libs/moment/js/moment.min',
         'moment-timezone': 'libs/moment-timezone/moment-timezone-with-data.min',
         'jquery-ui': 'external_lib/jquery-ui/jquery-ui.min',
-        'jstree': 'libs/jstree/jstree.min',
         'd3': 'libs/d3/d3.min'
     },
 

dashboardv2/public/js/templates/migration/MigrationView_tmpl.html

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div id="r_statisticsView" style="padding-top:30px;"></div>
+<div id="r_statisticsView" style="padding-top:60px;"></div>
\ No newline at end of file

dashboardv2/public/js/templates/site/Statistics_tmpl.html

@@ -14,8 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="refresh-container statisticsRefresh hide" data-id="statisticsRefresh">
+<div class="statistics-header col-md-12 hide">
+    <div class="progress hide">
+        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-id="migrationProgressBar">
+            <span data-id="migrationProgressBarValue"></span>
+        </div>
+    </div>
+    <pre class="successStatus hide">Migration is <span class="color">successful</span>. To exit form migration mode, please remove <span class="color">atlas.migration.data.filename</span> property and restart Atlas.</pre>
+    <div class="refresh-container statisticsRefresh" data-id="statisticsRefresh">
         <button type="button" class="btn fa fa-refresh pull-right btn-sm btn-action" title="Refresh Data"></button>
+    </div>
 </div>
 <div class="panel-group server-stats-container statsContainer hide col-md-12" id="accordion">
     <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">

dashboardv2/public/js/utils/Helper.js

@@ -113,6 +113,7 @@ define(['require',
     $("body").on('click', '.btn', function() {
         $(this).blur();
     });
+    if ($.fn.select2) {
         $.fn.select2.amd.define("TagHideDeleteButtonAdapter", [
                 "select2/utils",
                 "select2/selection/multiple",
@@ -189,7 +190,7 @@ define(['require',
                 return adapter;
             });
 
-    if ($.fn.select2) {
+
         $.fn.select2.amd.define("ServiceTypeFilterDropdownAdapter", [
                 "select2/utils",
                 "select2/dropdown",

dashboardv2/public/js/utils/MigrationEnums.js

+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+define(['require'], function(require) {
+    'use strict';
+
+    var Enums = {};
+
+    Enums.migrationStatus = {
+        STARTED: "STARTED",
+        IN_PROGRESS: "IN_PROGRESS",
+        FAIL: "FAIL",
+        DONE: "DONE"
+    }
+
+    return Enums;
+});
\ No newline at end of file

dashboardv2/public/js/views/site/Statistics.js

@@ -28,10 +28,11 @@ define(['require',
     'collection/VTagList',
     'utils/CommonViewFunction',
     'utils/Enums',
+    'utils/MigrationEnums',
     'moment',
     'utils/Utils',
     'moment-timezone'
-], function(require, Backbone, StatTmpl, StatsNotiTable, TopicOffsetTable, EntityTable, Modal, VCommon, UrlLinks, VTagList, CommonViewFunction, Enums, moment, Utils) {
+], function(require, Backbone, StatTmpl, StatsNotiTable, TopicOffsetTable, EntityTable, Modal, VCommon, UrlLinks, VTagList, CommonViewFunction, Enums, MigrationEnums, moment, Utils) {
     'use strict';
 
     var StatisticsView = Backbone.Marionette.LayoutView.extend(
@@ -57,15 +58,17 @@ define(['require',
                 memoryCard: "[data-id='memory-card']",
                 memoryPoolUsage: "[data-id='memory-pool-usage-card']",
                 statisticsRefresh: "[data-id='statisticsRefresh']",
-                notificationDetails: "[data-id='notificationDetails']"
+                notificationDetails: "[data-id='notificationDetails']",
+                migrationProgressBar: "[data-id='migrationProgressBar']",
+                migrationProgressBarValue: "[data-id='migrationProgressBarValue']"
             },
             /** ui events hash */
             events: function() {
                 var events = {};
                 events["click " + this.ui.statisticsRefresh] = function(e) {
-                    this.$('.statsContainer,.statsNotificationContainer,.statisticsRefresh').addClass('hide');
-                    this.$('.statsLoader,.statsNotificationLoader').addClass('show');
+                    this.showLoader();
                     this.fetchMetricData();
+                    this.fetchStatusData();
                 };
                 return events;
             },
@@ -77,7 +80,11 @@ define(['require',
                 _.extend(this, options);
                 var that = this;
                 this.DATA_MAX_LENGTH = 25;
-                if (this.isMigrationView !== true) {
+                this.loaderCount = 0;
+                if (this.isMigrationView) {
+                    this.migrationImportStatus = new VTagList();
+                    this.migrationImportStatus.url = UrlLinks.migrationStatusApiUrl();
+                } else {
                     var modal = new Modal({
                         title: 'Statistics',
                         content: this,
@@ -111,8 +118,54 @@ define(['require',
                     })
                 }
             },
+            fetchStatusData: function() {
+                var that = this;
+                ++this.loaderCount;
+                that.migrationImportStatus.fetch({
+                    success: function(data) {
+                        var data = _.first(data.toJSON()),
+                            migrationStatus = data.MigrationStatus || null,
+                            operationStatus = migrationStatus.operationStatus,
+                            showProgress = true,
+                            totalProgress = 0,
+                            progressMessage = "";
+                        if (migrationStatus) {
+                            if (MigrationEnums.migrationStatus[operationStatus] === "DONE") {
+                                showProgress = false;
+                            } else if (MigrationEnums.migrationStatus[operationStatus] === "IN_PROGRESS" || MigrationEnums.migrationStatus[operationStatus] === "STARTED") {
+                                var currentIndex = migrationStatus.currentIndex || 0,
+                                    totalCount = migrationStatus.totalCount || 0;
+                                totalProgress = Math.ceil((migrationStatus.currentIndex / migrationStatus.totalCount) * 100)
+                                progressMessage = totalProgress + "%";
+                                that.ui.migrationProgressBar.removeClass("progress-bar-danger");
+                                that.ui.migrationProgressBar.addClass("progress-bar-success");
+                            } else if (MigrationEnums.migrationStatus[operationStatus] === "FAIL") {
+                                totalProgress = "100";
+                                progressMessage = "Failed";
+                                that.ui.migrationProgressBar.addClass("progress-bar-danger");
+                                that.ui.migrationProgressBar.removeClass("progress-bar-success");
+                            }
+                            if (showProgress) {
+                                that.$el.find(".statistics-header>.progress").removeClass("hide");
+                                that.$el.find(".statistics-header>.successStatus").addClass("hide");
+                                that.ui.migrationProgressBar.css({ width: totalProgress + '%' });
+                                that.ui.migrationProgressBarValue.text(progressMessage);
+                            } else {
+                                that.$el.find(".statistics-header>.progress").addClass("hide");
+                                that.$el.find(".statistics-header>.successStatus").removeClass("hide");
+                            }
+                        }
+
+                    },
+                    complete: function() {
+                        --that.loaderCount;
+                        that.hideLoader();
+                    }
+                });
+            },
             fetchMetricData: function(options) {
                 var that = this;
+                ++this.loaderCount;
                 this.metricCollection.fetch({
                     success: function(data) {
                         var data = _.first(data.toJSON());
@@ -120,11 +173,6 @@ define(['require',
                         that.renderEntities({ data: data });
                         that.renderSystemDeatils({ data: data });
                         that.renderClassifications({ data: data });
-                        that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
-                        if (that.isMigrationView) {
-                            that.$('.statisticsRefresh').removeClass('hide');
-                        }
-                        that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
                         if (options && options.update) {
                             if (that.modal) {
                                 that.modal.$el.find('.header-button .fa-refresh').prop('disabled', false).removeClass('fa-spin');
@@ -133,11 +181,37 @@ define(['require',
                                 content: "Metric data is refreshed"
                             })
                         }
+                    },
+                    complete: function() {
+                        --that.loaderCount;
+                        that.hideLoader()
                     }
                 });
             },
+            hideLoader: function() {
+                if (this.loaderCount === 0) {
+                    var className = ".statsContainer";
+                    if (this.isMigrationView) {
+                        className += ",.statistics-header";
+                    }
+                    this.$(className).removeClass('hide');
+                    this.$('.statsLoader').removeClass('show');
+                }
+            },
+            showLoader: function() {
+                var className = ".statsContainer";
+                if (this.isMigrationView) {
+                    className += ",.statistics-header";
+                }
+                this.$(className).addClass('hide');
+                this.$('.statsLoader').addClass('show');
+            },
             onRender: function() {
                 this.bindEvents();
+                if (this.isMigrationView) {
+                    this.showLoader();
+                    this.fetchStatusData();
+                }
                 this.fetchMetricData();
             },
             closePanel: function(options) {

dashboardv2/public/migration-status.html.tpl

@@ -45,13 +45,9 @@
 </head>
 
 <body>
-    <div class="container-fluid">
-        <div class="col-sm-12">
     <div class="page-wrapper">
         <div class="initialLoading"></div>
     </div>
-        </div>
-    </div>
     <!-- build:js scripts/main.js -->
     <script data-main="js/migration.js?bust=<%- bust %>" src="js/libs/requirejs/require.js?bust=<%- bust %>"></script>
     <!-- endbuild -->