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 <[email protected]> Authored: Sat Sep 26 09:09:51 2015 +0700 Committer: AKuznetsov <[email protected]> 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')
