Skip to content

A
atlas
Commit b4246817 by kevalbhatt
Options

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

parent f304f59f
Showing with 260 additions and 103 deletions
dashboardv2/public/css/scss/migration-style.scss
...@@ -25,4 +25,8 @@ ...@@ -25,4 +25,8 @@
@import "loader.scss"; @import "loader.scss";
@import "theme.scss"; @import "theme.scss";
@import "stats.scss"; @import "stats.scss";
@import "override.scss"; @import "override.scss";
\ No newline at end of file
.initialLoading {
left: 0px !important;
}
\ No newline at end of file
dashboardv2/public/css/scss/stats.scss
...@@ -61,6 +61,7 @@ ...@@ -61,6 +61,7 @@
.panel { .panel {
&.panel-default { &.panel-default {
padding: 5px; padding: 5px;
margin: 5px;
} }
.panel-body { .panel-body {
...@@ -80,6 +81,12 @@ ...@@ -80,6 +81,12 @@
.table { .table {
&.stat-table { &.stat-table {
width: 100%;
td {
display: table-cell;
}
&.notification-table { &.notification-table {
&.table-striped>tbody>tr:nth-of-type(odd) { &.table-striped>tbody>tr:nth-of-type(odd) {
background-color: $color_white_lilac_approx; background-color: $color_white_lilac_approx;
...@@ -113,17 +120,54 @@ ...@@ -113,17 +120,54 @@
} }
} }
.refresh-container { .statistics-header {
background: white; height: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed; position: fixed;
z-index: 9999; z-index: 999;
right: 23px; top: 0px;
top: 7px; padding: 0px 15px;
border-radius: 23px; background: #fff;
border-bottom: 1px #e8e9ee solid;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .05);
&>div {
margin: 0px 5px;
}
.btn { pre {
margin: 0px; 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; border-radius: 23px;
padding: 10px 10px;
.btn {
margin: 0px;
border-radius: 23px;
padding: 10px 10px;
}
} }
} }
\ No newline at end of file
dashboardv2/public/js/migration.js
...@@ -77,9 +77,6 @@ require.config({ ...@@ -77,9 +77,6 @@ require.config({
'pnotify': { 'pnotify': {
'exports': ['pnotify'] 'exports': ['pnotify']
}, },
'jstree': {
'deps': ['jquery']
},
'd3': { 'd3': {
'exports': ['d3'] 'exports': ['d3']
} }
...@@ -106,7 +103,6 @@ require.config({ ...@@ -106,7 +103,6 @@ require.config({
'moment': 'libs/moment/js/moment.min', 'moment': 'libs/moment/js/moment.min',
'moment-timezone': 'libs/moment-timezone/moment-timezone-with-data.min', 'moment-timezone': 'libs/moment-timezone/moment-timezone-with-data.min',
'jquery-ui': 'external_lib/jquery-ui/jquery-ui.min', 'jquery-ui': 'external_lib/jquery-ui/jquery-ui.min',
'jstree': 'libs/jstree/jstree.min',
'd3': 'libs/d3/d3.min' 'd3': 'libs/d3/d3.min'
}, },
......
dashboardv2/public/js/templates/migration/MigrationView_tmpl.html
...@@ -14,4 +14,4 @@ ...@@ -14,4 +14,4 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * 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 \ No newline at end of file
dashboardv2/public/js/templates/site/Statistics_tmpl.html
...@@ -14,8 +14,16 @@ ...@@ -14,8 +14,16 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div class="refresh-container statisticsRefresh hide" data-id="statisticsRefresh"> <div class="statistics-header col-md-12 hide">
<button type="button" class="btn fa fa-refresh pull-right btn-sm btn-action" title="Refresh Data"></button> <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>
<div class="panel-group server-stats-container statsContainer hide col-md-12" id="accordion"> <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"> <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
......
dashboardv2/public/js/utils/Helper.js
...@@ -113,83 +113,84 @@ define(['require', ...@@ -113,83 +113,84 @@ define(['require',
$("body").on('click', '.btn', function() { $("body").on('click', '.btn', function() {
$(this).blur(); $(this).blur();
}); });
$.fn.select2.amd.define("TagHideDeleteButtonAdapter", [ if ($.fn.select2) {
"select2/utils", $.fn.select2.amd.define("TagHideDeleteButtonAdapter", [
"select2/selection/multiple", "select2/utils",
"select2/selection/placeholder", "select2/selection/multiple",
"select2/selection/eventRelay", "select2/selection/placeholder",
"select2/selection/search", "select2/selection/eventRelay",
], "select2/selection/search",
function(Utils, MultipleSelection, Placeholder, EventRelay, SelectionSearch) { ],
function(Utils, MultipleSelection, Placeholder, EventRelay, SelectionSearch) {
// Decorates MultipleSelection with Placeholder // Decorates MultipleSelection with Placeholder
var adapter = Utils.Decorate(MultipleSelection, Placeholder);
adapter = Utils.Decorate(adapter, SelectionSearch);
adapter = Utils.Decorate(adapter, EventRelay);
adapter.prototype.render = function() {
// Use selection-box from SingleSelection adapter
// This implementation overrides the default implementation
var $search = $(
'<li class="select2-search select2-search--inline">' +
'<input class="select2-search__field" type="search" tabindex="-1"' +
' autocomplete="off" autocorrect="off" autocapitalize="none"' +
' spellcheck="false" role="textbox" aria-autocomplete="list" />' +
'</li>'
);
var adapter = Utils.Decorate(MultipleSelection, Placeholder); this.$searchContainer = $search;
adapter = Utils.Decorate(adapter, SelectionSearch); this.$search = $search.find('input');
adapter = Utils.Decorate(adapter, EventRelay); var $selection = MultipleSelection.prototype.render.call(this);
this._transferTabIndex();
return $selection;
};
adapter.prototype.render = function() { adapter.prototype.update = function(data) {
// Use selection-box from SingleSelection adapter // copy and modify SingleSelection adapter
// This implementation overrides the default implementation var that = this;
var $search = $( this.clear();
'<li class="select2-search select2-search--inline">' + if (data.length === 0) {
'<input class="select2-search__field" type="search" tabindex="-1"' + this.$selection.find('.select2-selection__rendered')
' autocomplete="off" autocorrect="off" autocapitalize="none"' + .append(this.$searchContainer);
' spellcheck="false" role="textbox" aria-autocomplete="list" />' + this.$search.attr('placeholder', this.options.get("placeholder"));
'</li>' return;
); }
this.$search.attr('placeholder', '');
var $rendered = this.$selection.find('.select2-selection__rendered'),
$selectionContainer = [];
if (data.length > 0) {
_.each(data, function(obj) {
var $container = $('<li class="select2-selection__choice"></li>'),
formatted = that.display(obj, $rendered),
$remove = $('<span class="select2-selection__choice__remove" role="presentation">&times;</span>'),
allowRemoveAttr = $(obj.element).data("allowremove"),
allowRemove = obj.allowRemove === undefined ? allowRemoveAttr : obj.allowRemove;
if (allowRemove === undefined || allowRemove !== false) {
$container.append($remove);
}
$container.data("data", obj);
$container.append(formatted);
$selectionContainer.push($container);
});
Utils.appendMany($rendered, $selectionContainer);
}
this.$searchContainer = $search;
this.$search = $search.find('input');
var $selection = MultipleSelection.prototype.render.call(this);
this._transferTabIndex();
return $selection;
};
adapter.prototype.update = function(data) { var searchHadFocus = this.$search[0] == document.activeElement;
// copy and modify SingleSelection adapter this.$search.attr('placeholder', '');
var that = this;
this.clear();
if (data.length === 0) {
this.$selection.find('.select2-selection__rendered') this.$selection.find('.select2-selection__rendered')
.append(this.$searchContainer); .append(this.$searchContainer);
this.$search.attr('placeholder', this.options.get("placeholder")); this.resizeSearch();
return; if (searchHadFocus) {
} this.$search.focus();
this.$search.attr('placeholder', ''); }
var $rendered = this.$selection.find('.select2-selection__rendered'), };
$selectionContainer = []; return adapter;
if (data.length > 0) { });
_.each(data, function(obj) {
var $container = $('<li class="select2-selection__choice"></li>'),
formatted = that.display(obj, $rendered),
$remove = $('<span class="select2-selection__choice__remove" role="presentation">&times;</span>'),
allowRemoveAttr = $(obj.element).data("allowremove"),
allowRemove = obj.allowRemove === undefined ? allowRemoveAttr : obj.allowRemove;
if (allowRemove === undefined || allowRemove !== false) {
$container.append($remove);
}
$container.data("data", obj);
$container.append(formatted);
$selectionContainer.push($container);
});
Utils.appendMany($rendered, $selectionContainer);
}
var searchHadFocus = this.$search[0] == document.activeElement;
this.$search.attr('placeholder', '');
this.$selection.find('.select2-selection__rendered')
.append(this.$searchContainer);
this.resizeSearch();
if (searchHadFocus) {
this.$search.focus();
}
};
return adapter;
});
if ($.fn.select2) {
$.fn.select2.amd.define("ServiceTypeFilterDropdownAdapter", [ $.fn.select2.amd.define("ServiceTypeFilterDropdownAdapter", [
"select2/utils", "select2/utils",
"select2/dropdown", "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', ...@@ -28,10 +28,11 @@ define(['require',
'collection/VTagList', 'collection/VTagList',
'utils/CommonViewFunction', 'utils/CommonViewFunction',
'utils/Enums', 'utils/Enums',
'utils/MigrationEnums',
'moment', 'moment',
'utils/Utils', 'utils/Utils',
'moment-timezone' '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'; 'use strict';
var StatisticsView = Backbone.Marionette.LayoutView.extend( var StatisticsView = Backbone.Marionette.LayoutView.extend(
...@@ -57,15 +58,17 @@ define(['require', ...@@ -57,15 +58,17 @@ define(['require',
memoryCard: "[data-id='memory-card']", memoryCard: "[data-id='memory-card']",
memoryPoolUsage: "[data-id='memory-pool-usage-card']", memoryPoolUsage: "[data-id='memory-pool-usage-card']",
statisticsRefresh: "[data-id='statisticsRefresh']", statisticsRefresh: "[data-id='statisticsRefresh']",
notificationDetails: "[data-id='notificationDetails']" notificationDetails: "[data-id='notificationDetails']",
migrationProgressBar: "[data-id='migrationProgressBar']",
migrationProgressBarValue: "[data-id='migrationProgressBarValue']"
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
var events = {}; var events = {};
events["click " + this.ui.statisticsRefresh] = function(e) { events["click " + this.ui.statisticsRefresh] = function(e) {
this.$('.statsContainer,.statsNotificationContainer,.statisticsRefresh').addClass('hide'); this.showLoader();
this.$('.statsLoader,.statsNotificationLoader').addClass('show');
this.fetchMetricData(); this.fetchMetricData();
this.fetchStatusData();
}; };
return events; return events;
}, },
...@@ -77,7 +80,11 @@ define(['require', ...@@ -77,7 +80,11 @@ define(['require',
_.extend(this, options); _.extend(this, options);
var that = this; var that = this;
this.DATA_MAX_LENGTH = 25; 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({ var modal = new Modal({
title: 'Statistics', title: 'Statistics',
content: this, content: this,
...@@ -111,8 +118,54 @@ define(['require', ...@@ -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) { fetchMetricData: function(options) {
var that = this; var that = this;
++this.loaderCount;
this.metricCollection.fetch({ this.metricCollection.fetch({
success: function(data) { success: function(data) {
var data = _.first(data.toJSON()); var data = _.first(data.toJSON());
...@@ -120,11 +173,6 @@ define(['require', ...@@ -120,11 +173,6 @@ define(['require',
that.renderEntities({ data: data }); that.renderEntities({ data: data });
that.renderSystemDeatils({ data: data }); that.renderSystemDeatils({ data: data });
that.renderClassifications({ 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 (options && options.update) {
if (that.modal) { if (that.modal) {
that.modal.$el.find('.header-button .fa-refresh').prop('disabled', false).removeClass('fa-spin'); that.modal.$el.find('.header-button .fa-refresh').prop('disabled', false).removeClass('fa-spin');
...@@ -133,11 +181,37 @@ define(['require', ...@@ -133,11 +181,37 @@ define(['require',
content: "Metric data is refreshed" 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() { onRender: function() {
this.bindEvents(); this.bindEvents();
if (this.isMigrationView) {
this.showLoader();
this.fetchStatusData();
}
this.fetchMetricData(); this.fetchMetricData();
}, },
closePanel: function(options) { closePanel: function(options) {
......
dashboardv2/public/migration-status.html.tpl
...@@ -45,12 +45,8 @@ ...@@ -45,12 +45,8 @@
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="page-wrapper">
<div class="col-sm-12"> <div class="initialLoading"></div>
<div class="page-wrapper">
<div class="initialLoading"></div>
</div>
</div>
</div> </div>
<!-- build:js scripts/main.js --> <!-- build:js scripts/main.js -->
<script data-main="js/migration.js?bust=<%- bust %>" src="js/libs/requirejs/require.js?bust=<%- bust %>"></script> <script data-main="js/migration.js?bust=<%- bust %>" src="js/libs/requirejs/require.js?bust=<%- bust %>"></script>
......
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