Skip to content

A
atlas
Commit b4246817 by kevalbhatt
Options

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

parent f304f59f
Showing with 185 additions and 27 deletions
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>
\ No newline at end of file
<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 0 → 100644
/**
* 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 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment