You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by ak...@apache.org on 2015/09/26 04:09:59 UTC

ignite git commit: IGNITE-843 Reworked charts to angular way. Minor renaming and cleanup.

Repository: ignite
Updated Branches:
  refs/heads/ignite-843 6e984c871 -> 14306f322


IGNITE-843 Reworked charts to angular way. Minor renaming and cleanup.


Project: http://git-wip-us.apache.org/repos/asf/ignite/repo
Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/14306f32
Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/14306f32
Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/14306f32

Branch: refs/heads/ignite-843
Commit: 14306f32220c85b5473dad01bd12f3e3ca37e9d0
Parents: 6e984c8
Author: AKuznetsov <ak...@gridgain.com>
Authored: Sat Sep 26 09:09:51 2015 +0700
Committer: AKuznetsov <ak...@gridgain.com>
Committed: Sat Sep 26 09:09:51 2015 +0700

----------------------------------------------------------------------
 modules/control-center-web/src/main/js/bin/www  |   2 +-
 .../src/main/js/controllers/admin-controller.js |   2 +-
 .../main/js/controllers/caches-controller.js    |   2 +-
 .../main/js/controllers/clusters-controller.js  |   2 +-
 .../src/main/js/controllers/common-module.js    |  70 +++---
 .../main/js/controllers/metadata-controller.js  |   2 +-
 .../main/js/controllers/profile-controller.js   |   2 +-
 .../src/main/js/controllers/sql-controller.js   | 240 +++++++++++--------
 .../main/js/controllers/summary-controller.js   |   2 +-
 .../control-center-web/src/main/js/package.json |   4 +-
 .../main/js/views/configuration/sidebar.jade    |   3 +
 .../main/js/views/configuration/summary.jade    |   9 +-
 .../src/main/js/views/sql/chart-settings.jade   |   8 +-
 .../src/main/js/views/sql/sql.jade              |  11 +-
 .../src/main/js/views/templates/layout.jade     |   7 +-
 15 files changed, 201 insertions(+), 165 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/bin/www
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/bin/www b/modules/control-center-web/src/main/js/bin/www
index 641cce5..289be0b 100644
--- a/modules/control-center-web/src/main/js/bin/www
+++ b/modules/control-center-web/src/main/js/bin/www
@@ -12,7 +12,7 @@ var agentManager = require('../agents/agent-manager');
 
 var fs = require('fs');
 
-var debug = require('debug')('ignite-web-control-center:server');
+var debug = require('debug')('ignite-web-console:server');
 
 /**
  * Get port from environment and store in Express.

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/admin-controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/admin-controller.js b/modules/control-center-web/src/main/js/controllers/admin-controller.js
index 76cca9f..f5e372b 100644
--- a/modules/control-center-web/src/main/js/controllers/admin-controller.js
+++ b/modules/control-center-web/src/main/js/controllers/admin-controller.js
@@ -16,7 +16,7 @@
  */
 
 // Controller for Admin screen.
-controlCenterModule.controller('adminController',
+consoleModule.controller('adminController',
     ['$scope', '$window', '$http', '$common', '$confirm',
     function ($scope, $window, $http, $common, $confirm) {
     $scope.users = null;

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/caches-controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/caches-controller.js b/modules/control-center-web/src/main/js/controllers/caches-controller.js
index 5fbb03d..9171774 100644
--- a/modules/control-center-web/src/main/js/controllers/caches-controller.js
+++ b/modules/control-center-web/src/main/js/controllers/caches-controller.js
@@ -16,7 +16,7 @@
  */
 
 // Controller for Caches screen.
-controlCenterModule.controller('cachesController', [
+consoleModule.controller('cachesController', [
     '$scope', '$controller', '$http', '$timeout', '$common', '$focus', '$confirm', '$message', '$clone', '$table', '$preview', '$loading', '$unsavedChangesGuard',
     function ($scope, $controller, $http, $timeout, $common, $focus, $confirm, $message, $clone, $table, $preview, $loading, $unsavedChangesGuard) {
             $unsavedChangesGuard.install($scope);

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/clusters-controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/clusters-controller.js b/modules/control-center-web/src/main/js/controllers/clusters-controller.js
index 0c141b9..5adca57 100644
--- a/modules/control-center-web/src/main/js/controllers/clusters-controller.js
+++ b/modules/control-center-web/src/main/js/controllers/clusters-controller.js
@@ -16,7 +16,7 @@
  */
 
 // Controller for Clusters screen.
-controlCenterModule.controller('clustersController', [
+consoleModule.controller('clustersController', [
     '$scope', '$controller', '$http', '$timeout', '$common', '$focus', '$confirm', '$message', '$clone', '$table', '$preview', '$loading', '$unsavedChangesGuard',
     function ($scope, $controller, $http, $timeout, $common, $focus, $confirm, $message, $clone, $table, $preview, $loading, $unsavedChangesGuard) {
         $unsavedChangesGuard.install($scope);

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/common-module.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/common-module.js b/modules/control-center-web/src/main/js/controllers/common-module.js
index 6ae751b..b88f2e4 100644
--- a/modules/control-center-web/src/main/js/controllers/common-module.js
+++ b/modules/control-center-web/src/main/js/controllers/common-module.js
@@ -15,18 +15,18 @@
  * limitations under the License.
  */
 
-var controlCenterModule = angular.module('ignite-web-control-center',
-    ['ngAnimate', 'smart-table', 'mgcrea.ngStrap', 'ui.ace', 'ngSanitize', 'treeControl', 'darthwade.loading', 'agGrid', 'dndLists']);
+var consoleModule = angular.module('ignite-web-console',
+    ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap', 'smart-table', 'ui.ace', 'treeControl', 'darthwade.loading', 'agGrid', 'nvd3', 'dndLists']);
 
 // Modal popup configuration.
-controlCenterModule.config(function ($modalProvider) {
+consoleModule.config(function ($modalProvider) {
     angular.extend($modalProvider.defaults, {
         html: true
     });
 });
 
 // Comboboxes configuration.
-controlCenterModule.config(function ($popoverProvider) {
+consoleModule.config(function ($popoverProvider) {
     angular.extend($popoverProvider.defaults, {
         trigger: 'manual',
         placement: 'right',
@@ -36,7 +36,7 @@ controlCenterModule.config(function ($popoverProvider) {
 });
 
 // Tooltips configuration.
-controlCenterModule.config(function ($tooltipProvider) {
+consoleModule.config(function ($tooltipProvider) {
     angular.extend($tooltipProvider.defaults, {
         container: 'body',
         delay: 150,
@@ -47,7 +47,7 @@ controlCenterModule.config(function ($tooltipProvider) {
 });
 
 // Comboboxes configuration.
-controlCenterModule.config(function ($selectProvider) {
+consoleModule.config(function ($selectProvider) {
     angular.extend($selectProvider.defaults, {
         container: 'body',
         maxLength: '5',
@@ -60,7 +60,7 @@ controlCenterModule.config(function ($selectProvider) {
 });
 
 // Alerts configuration.
-controlCenterModule.config(function ($alertProvider) {
+consoleModule.config(function ($alertProvider) {
     angular.extend($alertProvider.defaults, {
         container: 'body',
         placement: 'top-right',
@@ -70,14 +70,14 @@ controlCenterModule.config(function ($alertProvider) {
 });
 
 // Modals configuration.
-controlCenterModule.config(function($modalProvider) {
+consoleModule.config(function($modalProvider) {
     angular.extend($modalProvider.defaults, {
         animation: 'am-fade-and-scale'
     });
 });
 
 // Common functions to be used in controllers.
-controlCenterModule.service('$common', [
+consoleModule.service('$common', [
     '$alert', '$popover', '$timeout', '$focus', '$window', function ($alert, $popover, $timeout, $focus, $window) {
         function isDefined(v) {
             return !(v === undefined || v === null);
@@ -857,7 +857,7 @@ controlCenterModule.service('$common', [
     }]);
 
 // Confirm popup service.
-controlCenterModule.service('$confirm', function ($modal, $rootScope, $q) {
+consoleModule.service('$confirm', function ($modal, $rootScope, $q) {
     var scope = $rootScope.$new();
 
     var deferred;
@@ -896,7 +896,7 @@ controlCenterModule.service('$confirm', function ($modal, $rootScope, $q) {
 });
 
 // Show modal message service.
-controlCenterModule.service('$message', function ($modal, $rootScope) {
+consoleModule.service('$message', function ($modal, $rootScope) {
     var scope = $rootScope.$new();
 
     var messageModal = $modal({templateUrl: '/message', scope: scope, placement: 'center', show: false});
@@ -912,7 +912,7 @@ controlCenterModule.service('$message', function ($modal, $rootScope) {
 });
 
 // Confirm change location.
-controlCenterModule.service('$unsavedChangesGuard', function () {
+consoleModule.service('$unsavedChangesGuard', function () {
     return {
         install: function ($scope) {
             $scope.$on("$destroy", function() {
@@ -930,7 +930,7 @@ controlCenterModule.service('$unsavedChangesGuard', function () {
 
 
 // Service for confirm or skip several steps.
-controlCenterModule.service('$confirmBatch', function ($rootScope, $modal,  $q) {
+consoleModule.service('$confirmBatch', function ($rootScope, $modal,  $q) {
     var scope = $rootScope.$new();
 
     var contentGenerator = function () {
@@ -1015,7 +1015,7 @@ controlCenterModule.service('$confirmBatch', function ($rootScope, $modal,  $q)
 });
 
 // 'Clone' popup service.
-controlCenterModule.service('$clone', function ($modal, $rootScope, $q) {
+consoleModule.service('$clone', function ($modal, $rootScope, $q) {
     var scope = $rootScope.$new();
 
     var deferred;
@@ -1042,7 +1042,7 @@ controlCenterModule.service('$clone', function ($modal, $rootScope, $q) {
 });
 
 // Tables support service.
-controlCenterModule.service('$table', ['$common', '$focus', function ($common, $focus) {
+consoleModule.service('$table', ['$common', '$focus', function ($common, $focus) {
     function _swapSimpleItems(a, ix1, ix2) {
         var tmp = a[ix1];
 
@@ -1265,7 +1265,7 @@ controlCenterModule.service('$table', ['$common', '$focus', function ($common, $
 }]);
 
 // Preview support service.
-controlCenterModule.service('$preview', ['$timeout', '$interval', function ($timeout, $interval) {
+consoleModule.service('$preview', ['$timeout', '$interval', function ($timeout, $interval) {
     var Range = require('ace/range').Range;
 
     var prevContent = [];
@@ -1481,7 +1481,7 @@ controlCenterModule.service('$preview', ['$timeout', '$interval', function ($tim
     }
 }]);
 
-controlCenterModule.service('ngCopy', ['$window', '$common', function ($window, $common) {
+consoleModule.service('ngCopy', ['$window', '$common', function ($window, $common) {
     var body = angular.element($window.document.body);
 
     var textArea = angular.element('<textarea/>');
@@ -1521,7 +1521,7 @@ controlCenterModule.service('ngCopy', ['$window', '$common', function ($window,
 }]);
 
 // Filter to decode name using map(value, label).
-controlCenterModule.filter('displayValue', function () {
+consoleModule.filter('displayValue', function () {
     return function (v, m, dflt) {
         var i = _.findIndex(m, function (item) {
             return item.value == v;
@@ -1539,7 +1539,7 @@ controlCenterModule.filter('displayValue', function () {
     }
 });
 
-controlCenterModule.filter('clustersSearch', function() {
+consoleModule.filter('clustersSearch', function() {
     var discoveries = {
         'Vm': 'static ips',
         'Multicast': 'multicast',
@@ -1569,7 +1569,7 @@ controlCenterModule.filter('clustersSearch', function() {
     }
 });
 
-controlCenterModule.filter('cachesSearch', function() {
+consoleModule.filter('cachesSearch', function() {
     return function(array, query) {
         if (!angular.isUndefined(array) && !angular.isUndefined(query) && !angular.isUndefined(query.$)) {
             var filtredArray = [];
@@ -1589,7 +1589,7 @@ controlCenterModule.filter('cachesSearch', function() {
     }
 });
 
-controlCenterModule.filter('metadatasSearch', function() {
+consoleModule.filter('metadatasSearch', function() {
     return function(array, query) {
         if (!angular.isUndefined(array) && !angular.isUndefined(query) && !angular.isUndefined(query.$)) {
             var filtredArray = [];
@@ -1608,7 +1608,7 @@ controlCenterModule.filter('metadatasSearch', function() {
 });
 
 // Directive to enable validation for IP addresses.
-controlCenterModule.directive('ipaddress', function () {
+consoleModule.directive('ipaddress', function () {
     const ip = '(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])';
     const port = '([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])';
     const portRange = '(:' + port + '(..' + port + ')?)?';
@@ -1628,7 +1628,7 @@ controlCenterModule.directive('ipaddress', function () {
 });
 
 // Directive to enable validation to match specified value.
-controlCenterModule.directive('match', function ($parse) {
+consoleModule.directive('match', function ($parse) {
     return {
         require: 'ngModel',
         link: function (scope, elem, attrs, ctrl) {
@@ -1642,7 +1642,7 @@ controlCenterModule.directive('match', function ($parse) {
 });
 
 // Directive to bind ENTER key press with some user action.
-controlCenterModule.directive('onEnter', function ($timeout) {
+consoleModule.directive('onEnter', function ($timeout) {
     return function (scope, elem, attrs) {
         elem.on('keydown keypress', function (event) {
             if (event.which === 13) {
@@ -1664,7 +1664,7 @@ controlCenterModule.directive('onEnter', function ($timeout) {
 });
 
 // Directive to bind ESC key press with some user action.
-controlCenterModule.directive('onEscape', function () {
+consoleModule.directive('onEscape', function () {
     return function (scope, elem, attrs) {
         elem.on('keydown keypress', function (event) {
             if (event.which === 27) {
@@ -1684,7 +1684,7 @@ controlCenterModule.directive('onEscape', function () {
 });
 
 // Directive to retain selection. To fix angular-strap typeahead bug with setting cursor to the end of text.
-controlCenterModule.directive('retainSelection', function ($timeout) {
+consoleModule.directive('retainSelection', function ($timeout) {
     var promise;
 
     return function (scope, elem, attr) {
@@ -1735,7 +1735,7 @@ controlCenterModule.directive('retainSelection', function ($timeout) {
 });
 
 // Factory function to focus element.
-controlCenterModule.factory('$focus', function ($timeout) {
+consoleModule.factory('$focus', function ($timeout) {
     return function (id) {
         // Timeout makes sure that is invoked after any other event has been triggered.
         // E.g. click events that need to run before the focus or inputs elements that are
@@ -1765,7 +1765,7 @@ controlCenterModule.factory('$focus', function ($timeout) {
 });
 
 // Directive to auto-focus element.
-controlCenterModule.directive('autoFocus', function($timeout) {
+consoleModule.directive('autoFocus', function($timeout) {
     return {
         restrict: 'AC',
         link: function(scope, element) {
@@ -1777,7 +1777,7 @@ controlCenterModule.directive('autoFocus', function($timeout) {
 });
 
 // Directive to focus next element on ENTER key.
-controlCenterModule.directive('enterFocusNext', function ($focus) {
+consoleModule.directive('enterFocusNext', function ($focus) {
     return function (scope, elem, attrs) {
         elem.on('keydown keypress', function (event) {
             if (event.which === 13) {
@@ -1790,7 +1790,7 @@ controlCenterModule.directive('enterFocusNext', function ($focus) {
 });
 
 // Directive to mark elements to focus.
-controlCenterModule.directive('onClickFocus', function ($focus) {
+consoleModule.directive('onClickFocus', function ($focus) {
     return function (scope, elem, attr) {
         elem.on('click', function () {
             $focus(attr.onClickFocus);
@@ -1804,7 +1804,7 @@ controlCenterModule.directive('onClickFocus', function ($focus) {
 });
 
 // Navigation bar controller.
-controlCenterModule.controller('activeLink', [
+consoleModule.controller('activeLink', [
     '$scope', function ($scope) {
         $scope.isActive = function (path) {
             return window.location.pathname.substr(0, path.length) == path;
@@ -1812,7 +1812,7 @@ controlCenterModule.controller('activeLink', [
     }]);
 
 // Login popup controller.
-controlCenterModule.controller('auth', [
+consoleModule.controller('auth', [
     '$scope', '$modal', '$http', '$window', '$common', '$focus',
     function ($scope, $modal, $http, $window, $common, $focus) {
         $scope.action = 'login';
@@ -1867,7 +1867,7 @@ controlCenterModule.controller('auth', [
     }]);
 
 // Download agent controller.
-controlCenterModule.controller('agent-download', [
+consoleModule.controller('agent-download', [
     '$scope', '$modal', function ($scope, $modal) {
         // Pre-fetch modal dialogs.
         var _agentDownloadModal = $modal({scope: $scope, templateUrl: '/agent/download', show: false});
@@ -1893,7 +1893,7 @@ controlCenterModule.controller('agent-download', [
     }]);
 
 // Navigation bar controller.
-controlCenterModule.controller('notebooks', ['$scope', '$modal', '$window', '$http', '$common',
+consoleModule.controller('notebooks', ['$scope', '$modal', '$window', '$http', '$common',
     function ($scope, $modal, $window, $http, $common) {
     $scope.$root.notebooks = [];
 
@@ -1948,6 +1948,6 @@ controlCenterModule.controller('notebooks', ['$scope', '$modal', '$window', '$ht
 }]);
 
 // Navigation bar controller.
-controlCenterModule.controller('save-remove', ['$scope', function ($scope) {
+consoleModule.controller('save-remove', ['$scope', function ($scope) {
     $scope.removeDropdown = [{ 'text': 'Remove All', 'click': 'removeAllItems()'}];
 }]);

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/metadata-controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/metadata-controller.js b/modules/control-center-web/src/main/js/controllers/metadata-controller.js
index 16d9ca3..c14169f 100644
--- a/modules/control-center-web/src/main/js/controllers/metadata-controller.js
+++ b/modules/control-center-web/src/main/js/controllers/metadata-controller.js
@@ -16,7 +16,7 @@
  */
 
 // Controller for Metadata screen.
-controlCenterModule.controller('metadataController', [
+consoleModule.controller('metadataController', [
     '$scope', '$controller', '$http', '$modal', '$common', '$timeout', '$focus', '$confirm', '$confirmBatch', '$message', '$clone', '$table', '$preview', '$loading', '$unsavedChangesGuard',
     function ($scope, $controller, $http, $modal, $common, $timeout, $focus, $confirm, $confirmBatch, $message, $clone, $table, $preview, $loading, $unsavedChangesGuard) {
             $unsavedChangesGuard.install($scope);

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/profile-controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/profile-controller.js b/modules/control-center-web/src/main/js/controllers/profile-controller.js
index 52e123f..d5ca95d 100644
--- a/modules/control-center-web/src/main/js/controllers/profile-controller.js
+++ b/modules/control-center-web/src/main/js/controllers/profile-controller.js
@@ -16,7 +16,7 @@
  */
 
 // Controller for Profile screen.
-controlCenterModule.controller('profileController',
+consoleModule.controller('profileController',
     ['$scope', '$http', '$common', '$focus', '$confirm', function ($scope, $http, $common, $focus, $confirm) {
     $scope.profileUser = angular.copy($scope.user);
 

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/sql-controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/sql-controller.js b/modules/control-center-web/src/main/js/controllers/sql-controller.js
index 1f66919..2aeddc2 100644
--- a/modules/control-center-web/src/main/js/controllers/sql-controller.js
+++ b/modules/control-center-web/src/main/js/controllers/sql-controller.js
@@ -16,7 +16,7 @@
  */
 
 // Controller for SQL notebook screen.
-controlCenterModule.controller('sqlController',
+consoleModule.controller('sqlController',
     ['$scope', '$window','$controller', '$http', '$timeout', '$common', '$confirm', '$interval', '$popover', '$loading',
     function ($scope, $window, $controller, $http, $timeout, $common, $confirm, $interval, $popover, $loading) {
     // Initialize the super class and extend it.
@@ -29,47 +29,43 @@ controlCenterModule.controller('sqlController',
     $scope.agentGoal = 'execute sql statements';
     $scope.agentTestDriveOption = '--test-drive-sql';
 
-    $scope.removeKeyColumn = function (paragraph, index) {
+    $scope.chartRemoveKeyColumn = function (paragraph, index) {
         paragraph.chartKeyCols.splice(index, 1);
 
-        $scope.applyChartSettings(paragraph);
+        _chartApplySettings(paragraph, true);
     };
 
-    $scope.removeValColumn = function (paragraph, index) {
+    $scope.chartRemoveValColumn = function (paragraph, index) {
         paragraph.chartValCols.splice(index, 1);
 
-        $scope.applyChartSettings(paragraph);
+        _chartApplySettings(paragraph, true);
     };
 
-    function acceptableColumn(cols, newCol) {
+    function _chartAcceptableColumn(cols, newCol) {
         return _.findIndex(cols, function (col) {
             return col.label == newCol.label;
         }) < 0;
     }
 
-    $scope.acceptKeyColumn = function(paragraph, item) {
-        var accepted = acceptableColumn(paragraph.chartKeyCols, item);
+    $scope.chartAcceptKeyColumn = function(paragraph, item) {
+        var accepted = _chartAcceptableColumn(paragraph.chartKeyCols, item);
 
         if (accepted) {
-            $timeout(function () {
-                $scope.applyChartSettings(paragraph);
-            });
-
             paragraph.chartKeyCols = [item];
+
+            _chartApplySettings(paragraph, true);
         }
 
         return false;
     };
 
-    $scope.acceptValColumn = function(paragraph, item) {
-        var accepted = acceptableColumn(paragraph.chartValCols, item) && item.label != TIME_LINE;
+    $scope.chartAcceptValColumn = function(paragraph, item) {
+        var accepted = _chartAcceptableColumn(paragraph.chartValCols, item) && item.label != TIME_LINE;
 
         if (accepted) {
-            $timeout(function () {
-                $scope.applyChartSettings(paragraph);
-            });
-
             paragraph.chartValCols.push(item);
+
+            _chartApplySettings(paragraph, true);
         }
 
         return false;
@@ -295,7 +291,7 @@ controlCenterModule.controller('sqlController',
         paragraph.result = paragraph.result === new_result ? 'none' : new_result;
 
         if (changed && paragraph.chart())
-            $scope.applyChartSettings(paragraph);
+            _chartApplySettings(paragraph, changed);
     };
 
     $scope.resultEq = function(paragraph, result) {
@@ -447,7 +443,7 @@ controlCenterModule.controller('sqlController',
             if (paragraph.result == 'none')
                 paragraph.result = 'table';
             else if (paragraph.chart())
-                $scope.applyChartSettings(paragraph);
+                _chartApplySettings(paragraph);
         }
     };
 
@@ -745,41 +741,10 @@ controlCenterModule.controller('sqlController',
         return col.label;
     }
 
-    function _insertChart(paragraph, datum, chart, remove) {
-        var chartId = 'chart-' + paragraph.id;
+    function _chartApplySettings(paragraph, resetCharts) {
+        if (resetCharts)
+            paragraph.charts = [];
 
-        var xAxisLabel = 'X';
-        var yAxisLabel = 'Y';
-
-        if (paragraph.chartColumnsConfigured()) {
-            xAxisLabel = _.map(paragraph.chartKeyCols, _colLabel).join(', ');
-            yAxisLabel = _.map(paragraph.chartValCols, _colLabel).join(', ');
-        }
-
-        $timeout(function() {
-            if (remove)
-                d3.select('#' + chartId).selectAll('*').remove();
-
-            if (chart.xAxis)
-                chart.xAxis.axisLabel(xAxisLabel);
-
-            if (chart.yAxis) {
-                chart.yAxis.axisLabel(yAxisLabel);
-                chart.yAxis.tickFormat(d3.format(',.2f'));
-            }
-
-            // Insert new chart.
-            d3.select('#' + chartId)
-                .append('svg')
-                .datum(datum)
-                .call(chart)
-                .attr('height', 400);
-
-            chart.update();
-        });
-    }
-
-    $scope.applyChartSettings = function (paragraph) {
         if (paragraph.chart() && paragraph.nonEmpty()) {
             switch (paragraph.result) {
                 case 'bar':
@@ -799,7 +764,7 @@ controlCenterModule.controller('sqlController',
                     break;
             }
         }
-    };
+    }
 
     function _xLbl(d) {
         return d.lbl;
@@ -809,16 +774,40 @@ controlCenterModule.controller('sqlController',
         return d.val;
     }
 
+    function _chartAxisLabel(cols, dflt) {
+        return $common.isEmptyArray(cols) ? dflt : _.map(cols, _colLabel).join(', ');
+    }
+
     function _barChart(paragraph) {
-        nv.addGraph(function() {
-            var chart = nv.models.multiBarChart()
-                .showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
-                .x(_xLbl)
-                .y(_yVal)
-                .margin({left: 70});
-
-            _insertChart(paragraph, _chartDatumLblNum(paragraph), chart, true);
-        });
+        var data = _chartDatumLblNum(paragraph);
+
+        if ($common.isEmptyArray(paragraph.charts)) {
+            var options = {
+                chart: {
+                    type: 'multiBarChart',
+                    height: 400,
+                    margin: {left: 70},
+                    x: _xLbl,
+                    y: _yVal,
+                    xAxis: {
+                        axisLabel:  _chartAxisLabel(paragraph.chartKeyCols, 'X')
+                    },
+                    yAxis: {
+                        axisLabel:  _chartAxisLabel(paragraph.chartValCols, 'Y'),
+                        tickFormat: d3.format(',.2f')
+                    },
+                    showControls: true
+                }
+            };
+
+            paragraph.charts = [{options: options, data: data}];
+
+            $timeout(function () {
+                paragraph.charts[0].api.update();
+            })
+        }
+        else
+            paragraph.charts[0].api.updateWithData(data);
     }
 
     function _pieChart(paragraph) {
@@ -827,29 +816,32 @@ controlCenterModule.controller('sqlController',
         if (datum.length == 0)
             datum = [{key: 'No data', values: []}];
 
-        var first = true;
-
-        datum.forEach(function (d) {
-            nv.addGraph(function() {
-                var chart = nv.models.pieChart()
-                    .x(_xLbl)
-                    .y(_yVal)
-                    .showLabels(true)
-                    .labelThreshold(.05)
-                    .labelType('percent')
-                    .donut(true)
-                    .donutRatio(0.35);
-
-                var datum = [];
-
-                if (paragraph.chartColumnsConfigured())
-                    datum = paragraph.rows;
-
-                _insertChart(paragraph, d.values, chart, first);
-
-                first = false;
-            });
+        paragraph.charts = _.map(datum, function (data) {
+            return {
+                options: {
+                    chart: {
+                        type: 'pieChart',
+                        height: 400,
+                        x: _xLbl,
+                        y: _yVal,
+                        showLabels: true,
+                        labelThreshold: 0.05,
+                        labelType: 'percent',
+                        donut: true,
+                        donutRatio: 0.35
+                    },
+                    title: {
+                        enable: true,
+                        text: data.key
+                    }
+                },
+                data: data.values
+            }
         });
+
+        $timeout(function () {
+            paragraph.charts[0].api.update();
+        })
     }
 
     function _xX(d) {
@@ -860,31 +852,73 @@ controlCenterModule.controller('sqlController',
         return d.y;
     }
 
+    function _chartTimeTickFormat(d) {
+        return d3.time.format('%X')(new Date(d));
+    }
+
     function _lineChart(paragraph) {
-        nv.addGraph(function() {
-            var chart = nv.models.lineChart()
-                .useInteractiveGuideline(true)
-                .x(_xX)
-                .y(_yY)
-                .margin({left: 70});
+        var data = _chartDatumNumNum(paragraph);
+
+        if ($common.isEmptyArray(paragraph.charts)) {
+            var options = {
+                chart: {
+                    type: 'lineChart',
+                    height: 400,
+                    margin: {left: 70},
+                    x: _xX,
+                    y: _yY,
+                    xAxis: {
+                        axisLabel:  _chartAxisLabel(paragraph.chartKeyCols, 'X'),
+                        tickFormat: paragraph.chartTimeLineEnabled() ? _chartTimeTickFormat : d3.format(',.2f')
+                    },
+                    yAxis: {
+                        axisLabel:  _chartAxisLabel(paragraph.chartValCols, 'Y'),
+                        tickFormat: d3.format(',.2f')
+                    },
+                    useInteractiveGuideline: true
+                }
+            };
 
-            chart.xAxis.tickFormat(d3.format(',.2f'));
+            paragraph.charts = [{options: options, data: data}];
 
-            _insertChart(paragraph, _chartDatumNumNum(paragraph), chart, true);
-        });
+            $timeout(function () {
+                paragraph.charts[0].api.update();
+            })
+        }
+        else
+            paragraph.charts[0].api.updateWithData(data);
     }
 
     function _areaChart(paragraph) {
-        nv.addGraph(function() {
-            var chart = nv.models.stackedAreaChart()
-                .x(_xX)
-                .y(_yY)
-                .margin({left: 70});
+        var data = _chartDatumNumNum(paragraph);
+
+        if ($common.isEmptyArray(paragraph.charts)) {
+            var options = {
+                chart: {
+                    type: 'stackedAreaChart',
+                    height: 400,
+                    margin: {left: 70},
+                    x: _xX,
+                    y: _yY,
+                    xAxis: {
+                        axisLabel:  _chartAxisLabel(paragraph.chartKeyCols, 'X'),
+                        tickFormat: paragraph.chartTimeLineEnabled() ? _chartTimeTickFormat : d3.format(',.2f')
+                    },
+                    yAxis: {
+                        axisLabel:  _chartAxisLabel(paragraph.chartValCols, 'Y'),
+                        tickFormat: d3.format(',.2f')
+                    }
+                }
+            };
 
-            chart.xAxis.tickFormat(d3.format(',.2f'));
+            paragraph.charts = [{options: options, data: data}];
 
-            _insertChart(paragraph, _chartDatumNumNum(paragraph), chart, true);
-        });
+            $timeout(function () {
+                paragraph.charts[0].api.update();
+            })
+        }
+        else
+            paragraph.charts[0].api.updateWithData(data);
     }
 
     $scope.actionAvailable = function (paragraph, needQuery) {

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/controllers/summary-controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/controllers/summary-controller.js b/modules/control-center-web/src/main/js/controllers/summary-controller.js
index 8fb3213..db49a94 100644
--- a/modules/control-center-web/src/main/js/controllers/summary-controller.js
+++ b/modules/control-center-web/src/main/js/controllers/summary-controller.js
@@ -16,7 +16,7 @@
  */
 
 // Controller for Summary screen.
-controlCenterModule.controller('summaryController', [
+consoleModule.controller('summaryController', [
     '$scope', '$http', '$common', '$loading', '$message',
     function ($scope, $http, $common, $loading, $message) {
     $scope.joinTip = $common.joinTip;

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/package.json
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/package.json b/modules/control-center-web/src/main/js/package.json
index 9e88a0d..9b6556e 100644
--- a/modules/control-center-web/src/main/js/package.json
+++ b/modules/control-center-web/src/main/js/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "ignite-web-control-center",
+  "name": "ignite-web-console",
   "version": "1.0.0",
-  "description": "Web application for configuration, monitoring Ignite Cluster",
+  "description": "Interactive Web console for configuration, executing SQL queries and monitoring of Apache Ignite Cluster",
   "private": true,
   "scripts": {
     "start": "node ./bin/www"

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/views/configuration/sidebar.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/views/configuration/sidebar.jade b/modules/control-center-web/src/main/js/views/configuration/sidebar.jade
index c5410c2..abd0ba8 100644
--- a/modules/control-center-web/src/main/js/views/configuration/sidebar.jade
+++ b/modules/control-center-web/src/main/js/views/configuration/sidebar.jade
@@ -17,6 +17,9 @@
 extends ../templates/layout
 
 append scripts
+    script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-xml.js')
+    script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-java.js')
+
     script(src='/data-structures.js')
     script(src='/generator-common.js')
     script(src='/generator-xml.js')

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/views/configuration/summary.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/views/configuration/summary.jade b/modules/control-center-web/src/main/js/views/configuration/summary.jade
index 524bdda..a35a5ea 100644
--- a/modules/control-center-web/src/main/js/views/configuration/summary.jade
+++ b/modules/control-center-web/src/main/js/views/configuration/summary.jade
@@ -17,15 +17,10 @@
 extends sidebar
 
 append scripts
-    script(src='/summary-controller.js')
-
-    script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-chrome.js')
-    script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-xml.js')
-    script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-java.js')
     script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-dockerfile.js')
-    script(src='/generator-docker.js')
 
-append css
+    script(src='/generator-docker.js')
+    script(src='/summary-controller.js')
 
 include ../includes/controls
 

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/views/sql/chart-settings.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/views/sql/chart-settings.jade b/modules/control-center-web/src/main/js/views/sql/chart-settings.jade
index b2a549b..1cbfe80 100644
--- a/modules/control-center-web/src/main/js/views/sql/chart-settings.jade
+++ b/modules/control-center-web/src/main/js/views/sql/chart-settings.jade
@@ -26,14 +26,14 @@
                     li(ng-repeat='col in paragraph.chartColumns track by $index')
                         .btn.btn-default.btn-chart-column-movable(dnd-draggable='col' dnd-effect-allowed='copy') {{col.label}}
                 label X axis
-                ul.chart-settings-columns-list(dnd-list='paragraph.chartKeyCols' dnd-drop='acceptKeyColumn(paragraph, item)')
+                ul.chart-settings-columns-list(dnd-list='paragraph.chartKeyCols' dnd-drop='chartAcceptKeyColumn(paragraph, item)')
                     li(ng-repeat='col in paragraph.chartKeyCols track by $index')
                         .btn.btn-info.btn-chart-column {{col.label}}
-                            i.fa.fa-close(ng-click='removeKeyColumn(paragraph, $index)')
+                            i.fa.fa-close(ng-click='chartRemoveKeyColumn(paragraph, $index)')
                 label Y axis
-                ul.chart-settings-columns-list(dnd-list='paragraph.chartValCols' dnd-drop='acceptValColumn(paragraph, item)')
+                ul.chart-settings-columns-list(dnd-list='paragraph.chartValCols' dnd-drop='chartAcceptValColumn(paragraph, item)')
                     li(ng-repeat='col in paragraph.chartValCols track by $index')
                         .btn.btn-success.btn-chart-column {{col.label}}
-                            i.fa.fa-close(ng-click='removeValColumn(paragraph, $index)')
+                            i.fa.fa-close(ng-click='chartRemoveValColumn(paragraph, $index)')
     h3.popover-footer Drag columns to axis
 

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/views/sql/sql.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/views/sql/sql.jade b/modules/control-center-web/src/main/js/views/sql/sql.jade
index ac20a2b..d14eade 100644
--- a/modules/control-center-web/src/main/js/views/sql/sql.jade
+++ b/modules/control-center-web/src/main/js/views/sql/sql.jade
@@ -17,13 +17,13 @@ extends ../templates/layout
 append css
     link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css')
 append scripts
-    script(src='/sql-controller.js')
-
-    script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-chrome.js')
     script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-sql.js')
     script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js')
+
     script(src='//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js')
-    script(src='//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js')
+    script(src='//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js')
+
+    script(src='/sql-controller.js')
 
 mixin btn-toolbar(btn, click, tip)
     i.btn.btn-default.fa(class=btn ng-click=click bs-tooltip='' data-title=tip data-trigger='hover' data-placement='bottom')
@@ -150,7 +150,8 @@ block container
                                         .chart-settings-link
                                             i.fa.fa-chevron-circle-down
                                             a(ng-show='paragraph.chart' ng-click='$event.stopPropagation()' bs-popover data-template-url='chart-settings' data-placement='bottom' data-auto-close='1' data-trigger='click') Chart settings
-                                        div(id='chart-{{paragraph.id}}')
+                                        div(ng-repeat='chart in paragraph.charts')
+                                            nvd3(options='chart.options' data='chart.data' api='chart.api')
                                     div(ng-show='paragraph.queryId')
                                         hr(style='margin-top: 0; margin-bottom: 5px')
                                         i.fa.fa-chevron-circle-right(style='float: right;margin-right: 10px;' ng-click='nextPage(paragraph)')

http://git-wip-us.apache.org/repos/asf/ignite/blob/14306f32/modules/control-center-web/src/main/js/views/templates/layout.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/views/templates/layout.jade b/modules/control-center-web/src/main/js/views/templates/layout.jade
index a864270..74e2a6e 100644
--- a/modules/control-center-web/src/main/js/views/templates/layout.jade
+++ b/modules/control-center-web/src/main/js/views/templates/layout.jade
@@ -15,7 +15,7 @@
     limitations under the License.
 
 doctype html
-html(ng-app='ignite-web-control-center' ng-init='user = #{JSON.stringify(user)}; becomeUsed = #{becomeUsed}')
+html(ng-app='ignite-web-console' ng-init='user = #{JSON.stringify(user)}; becomeUsed = #{becomeUsed}')
     head
         title=title
 
@@ -45,13 +45,14 @@ html(ng-app='ignite-web-control-center' ng-init='user = #{JSON.stringify(user)};
 
             // script(src='//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.2/angular-strap.js')
             // script(src='/js/angular-strap-2.3.2.js')
+            // TODO IGNITE-843: Forked Angular Strap with fix for https://github.com/mgcrea/angular-strap/issues/1852
             script(src='//cdn.rawgit.com/akuznetsov-gridgain/angular-strap/fix-1852/dist/angular-strap.min.js')
-
             script(src='//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.2/angular-strap.tpl.min.js')
 
             script(src='//cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.3/smart-table.js')
 
             script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js')
+            script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-chrome.js')
             script(src='//angular-ui.github.io/ui-ace/dist/ui-ace.min.js')
 
             script(src='//cdn.rawgit.com/wix/angular-tree-control/master/angular-tree-control.js')
@@ -63,6 +64,8 @@ html(ng-app='ignite-web-control-center' ng-init='user = #{JSON.stringify(user)};
 
             script(src='//cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/1.3.0/angular-drag-and-drop-lists.min.js')
 
+            script(src='//cdn.rawgit.com/krispo/angular-nvd3/master/dist/angular-nvd3.min.js')
+
             script(src='/common-module.js')
             script(src='/data-structures.js')