You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by an...@apache.org on 2015/09/24 11:57:20 UTC
ignite git commit: # IGNITE-843 Used ag-grid for sql table.
Repository: ignite
Updated Branches:
refs/heads/ignite-843 e78a25546 -> beb402755
# IGNITE-843 Used ag-grid for sql table.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo
Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/beb40275
Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/beb40275
Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/beb40275
Branch: refs/heads/ignite-843
Commit: beb40275520b65487ca1dd74e7e88dcbdae1315e
Parents: e78a255
Author: Andrey <an...@gridgain.com>
Authored: Thu Sep 24 16:57:29 2015 +0700
Committer: Andrey <an...@gridgain.com>
Committed: Thu Sep 24 16:57:29 2015 +0700
----------------------------------------------------------------------
.../src/main/js/controllers/common-module.js | 36 +----
.../src/main/js/controllers/sql-controller.js | 33 ++--
.../src/main/js/public/stylesheets/style.scss | 151 +++++++++++++++----
.../src/main/js/views/sql/sql.jade | 57 +++----
.../src/main/js/views/templates/layout.jade | 4 +-
5 files changed, 177 insertions(+), 104 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ignite/blob/beb40275/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 b33ce67..2b5dc10 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
@@ -16,7 +16,7 @@
*/
var controlCenterModule = angular.module('ignite-web-control-center',
- ['ngAnimate', 'smart-table', 'mgcrea.ngStrap', 'ui.ace', 'ngSanitize', 'treeControl', 'darthwade.loading']);
+ ['ngAnimate', 'smart-table', 'mgcrea.ngStrap', 'ui.ace', 'ngSanitize', 'treeControl', 'darthwade.loading', 'agGrid']);
// Modal popup configuration.
controlCenterModule.config(function ($modalProvider) {
@@ -1803,40 +1803,6 @@ controlCenterModule.directive('onClickFocus', function ($focus) {
};
});
-// FloatThead wrapper for AngularJS.
-controlCenterModule.directive('floatThead', function ($timeout, $log) {
- // Usage:
- // Specify float-thead on any table element and optionally pass through a floatThead options object to initialize the library.
- // Optionally specify st-safe-src to have the directive watch any objects for changes and call 'reflow' on floatThead.
- // You can also manually trigger a reflow by triggering an event on the table element called 'update', eg: jQuery('.table').trigger('update');
- return {
- require: '?stSafeSrc',
- link: function (scope, element, attrs) {
- jQuery(element).floatThead(scope.$eval(attrs.floatThead));
-
- if (attrs.stSafeSrc) {
- // Set $watch to do a deep watch on the ngModel (collection) by specifying true as a 3rd parameter
- scope.$watch(attrs.stSafeSrc, function () {
- jQuery(element).floatThead('reflow');
- }, true);
- } else {
- $log.info('floatThead: stSafeSrc not provided!');
- }
-
- element.bind('update', function () {
- $timeout(function() {
- jQuery(element).floatThead('reflow');
- }, 0);
- });
-
- element.bind('$destroy', function() {
- jQuery(element).floatThead('destroy');
- });
- },
- restrict: 'A'
- };
-});
-
// Navigation bar controller.
controlCenterModule.controller('activeLink', [
'$scope', function ($scope) {
http://git-wip-us.apache.org/repos/asf/ignite/blob/beb40275/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 aad0eb0..6a51109 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
@@ -40,14 +40,6 @@ controlCenterModule.controller('sqlController',
$scope.exportDropdown = [{ 'text': 'Export all', 'click': 'exportAll(paragraph)'}];
- $scope.floatTheadOptions = {
- autoReflow: true,
- useAbsolutePositioning: true,
- scrollContainer: function($table) {
- return $table.closest(".sql-table-wrapper");
- }
- };
-
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: false,
@@ -75,6 +67,14 @@ controlCenterModule.controller('sqlController',
paragraph.nonEmpty = function () {
return this.rows && this.rows.length > 0;
};
+
+ Object.defineProperty(paragraph, 'gridOptions', { value: {
+ enableColResize: true,
+ columnDefs: [
+ {headerName: "Test", valueGetter: 'data[0]'}
+ ],
+ rowData: null
+ }});
}
$scope.aceInit = function (paragraph) {
@@ -163,7 +163,7 @@ controlCenterModule.controller('sqlController',
};
$scope.removeNotebook = function () {
- $confirm.confirm('Are you sure you want to remove notebook: "' + $scope.notebook.name + '"?')
+ $confirm.confirm('Are you sure you want to remove: "' + $scope.notebook.name + '"?')
.then(function () {
$http.post('/notebooks/remove', {_id: $scope.notebook._id})
.success(function () {
@@ -244,7 +244,7 @@ controlCenterModule.controller('sqlController',
};
$scope.removeParagraph = function(paragraph) {
- $confirm.confirm('Are you sure you want to remove paragraph: "' + paragraph.name + '"?')
+ $confirm.confirm('Are you sure you want to remove: "' + paragraph.name + '"?')
.then(function () {
var paragraph_idx = _.findIndex($scope.notebook.paragraphs, function (item) {
return paragraph == item;
@@ -314,15 +314,24 @@ controlCenterModule.controller('sqlController',
paragraph.meta = res.meta;
+ var columnDefs = [];
+
var idx = 0;
_.forEach(res.meta, function (meta) {
+ columnDefs.push({
+ headerName: meta.fieldName,
+ valueGetter: 'JSON.stringify(data[' + idx + '])'
+ });
+
var col = {value: idx++, label: meta.fieldName};
if (paragraph.disabledSystemColumns || _hideColumn(meta))
paragraph.chartColumns.push(col);
});
+ paragraph.gridOptions.api.setColumnDefs(columnDefs);
+
paragraph.chartColX = _selectAxis(paragraph.chartColumns, paragraph.chartColX, 0);
paragraph.chartColY = _selectAxis(paragraph.chartColumns, paragraph.chartColY, 1);
}
@@ -337,6 +346,10 @@ controlCenterModule.controller('sqlController',
paragraph.rows = res.rows;
+ paragraph.gridOptions.api.setRowData(res.rows);
+
+ paragraph.gridOptions.api.sizeColumnsToFit();
+
if (paragraph.result == 'none')
paragraph.result = 'table';
else if (paragraph.chart())
http://git-wip-us.apache.org/repos/asf/ignite/blob/beb40275/modules/control-center-web/src/main/js/public/stylesheets/style.scss
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/public/stylesheets/style.scss b/modules/control-center-web/src/main/js/public/stylesheets/style.scss
index bdec0d9..d3c009b 100644
--- a/modules/control-center-web/src/main/js/public/stylesheets/style.scss
+++ b/modules/control-center-web/src/main/js/public/stylesheets/style.scss
@@ -27,7 +27,6 @@ $ignite-border-color: #ddd;
$ignite-darck-border-color: #aaa;
$ignite-border-bottom-color: $brand-primary;
$ignite-background-color: #fff;
-$ignite-background-dark-color: #eee;
$ignite-header-color: #555;
$ignite-invalid-color: $brand-primary;
@@ -56,11 +55,11 @@ a.active {
}
.border-left {
- box-shadow: 1px 0 0 0 $ignite-background-dark-color inset;
+ box-shadow: 1px 0 0 0 $gray-lighter inset;
}
.border-right {
- box-shadow: 1px 0 0 0 $ignite-background-dark-color;
+ box-shadow: 1px 0 0 0 $gray-lighter;
}
.theme-line header {
@@ -137,7 +136,7 @@ ul.navbar-nav, .sidebar-nav {
.theme-line .typeahead {
.active {
font-size: 1em;
- background-color: $ignite-background-dark-color;
+ background-color: $gray-lighter;
}
}
@@ -295,7 +294,7 @@ h1, h2, h3, h4, h5, h6 {
.modal .modal-content {
border-radius: 0;
- background-color: $ignite-background-dark-color;
+ background-color: $gray-lighter;
}
.modal .modal-content .modal-header {
@@ -449,7 +448,7 @@ button.form-control {
}
.theme-line .notebook-header {
- border-color: $ignite-background-dark-color;
+ border-color: $gray-lighter;
line-height: 44px;
height: 44px;
@@ -474,8 +473,8 @@ button.form-control {
.theme-line .paragraphs {
[class*="col-"] {
- padding-left: 0 !important;
- padding-right: 0 !important;
+ padding-left: 0;
+ padding-right: 0;
}
.panel-group .panel + .panel {
@@ -516,17 +515,8 @@ button.form-control {
margin-bottom: 10px;
}
- .sql-table-wrapper {
- overflow: auto;
- position: relative;
-
- max-height: 300px;
-
- padding: 0;
-
- table {
- margin-bottom: 0;
- }
+ .sql-table {
+ height: 400px;
}
table thead {
@@ -645,8 +635,8 @@ button.form-control {
margin: 10px 0;
> .active > a {
- border-color: $ignite-border-color;
- background-color: $ignite-background-dark-color;
+ border-color: $table-border-color;
+ background-color: $gray-lighter;
}
}
}
@@ -732,8 +722,8 @@ button.form-control {
margin: 10px 0;
> .active > a {
- border-color: $ignite-border-color;
- background-color: $ignite-background-dark-color;
+ border-color: $table-border-color;
+ background-color: $gray-lighter;
}
}
}
@@ -852,8 +842,8 @@ button.form-control {
margin: 10px 0 0 0;
> .active > a {
- border-color: $ignite-border-color;
- background-color: $ignite-background-dark-color;
+ border-color: $table-border-color;
+ background-color: $gray-lighter;
}
}
}
@@ -885,7 +875,7 @@ button.form-control {
.table-details {
border-radius: 5px;
- border: thin dotted $ignite-border-color;
+ border: thin dotted $table-border-color;
margin-top: 10px;
@@ -1600,3 +1590,112 @@ treecontrol.tree-classic {
font-weight: normal;
}
}
+
+.docs-content {
+ .affix {
+ border-bottom: 1px solid $gray-lighter;
+ }
+}
+
+.ag-bootstrap {
+ :focus {
+ outline: none;
+ }
+
+ .ag-root {
+ }
+
+ .ag-cell {
+ padding: 3px 6px !important;
+ border-right: 1px solid #ccc
+ }
+
+ .ag-cell
+
+ .ag-pinned-header {
+ border-bottom: 2px solid $table-border-color;
+ }
+
+ .ag-header-container {
+ border-bottom: 2px solid $table-border-color;
+ }
+
+ .ag-header-cell {
+ text-align: left;
+ border-right: 1px solid #ccc
+ }
+
+ .ag-header-group-cell {
+ border-right: 1px solid grey;
+ }
+
+ .ag-header-group-cell-with-group {
+ border-bottom: 1px solid grey;
+ }
+
+ .ag-header-cell-label {
+ padding: 5px;
+ font-weight: 700;
+ font-size: 13px;
+ }
+
+ .ag-header-group-cell-label {
+ padding: 5px;
+ font-weight: bold;
+ }
+
+ .ag-header-cell-menu-button {
+ padding: 2px;
+ margin-top: 4px;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ box-sizing: content-box; /* When using bootstrap, box-sizing was set to 'border-box' */
+ }
+
+ .ag-header-cell-menu-button:hover {
+ border: 1px solid black;
+ }
+
+ .ag-row-odd {
+ background-color: #f6f6f6;
+ }
+
+ .ag-row-even {
+ background-color: white;
+ }
+
+ .ag-body {
+ background-color: $table-bg;
+ }
+
+ .ag-row-selected {
+ background-color: #B2DFEE;
+ /*background-color: #ECF1EF;*/
+ }
+
+ .ag-group-cell-entire-row {
+ background-color: #aaa;
+ }
+
+ .ag-group-cell {
+ }
+
+ .ag-filter-checkbox {
+ position: relative;
+ top: 2px;
+ left: 2px;
+ }
+
+ .ag-filter-header-container {
+ border-bottom: 1px solid lightgrey;
+ }
+
+ .ag-filter {
+ border: 1px solid black;
+ background-color: #f0f0f0;
+ }
+
+ .ag-selection-checkbox {
+ margin-left: 4px;
+ }
+}
http://git-wip-us.apache.org/repos/asf/ignite/blob/beb40275/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 14f3a02..5991dac 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
@@ -46,27 +46,27 @@ block container
i.tipLabel.fa.fa-floppy-o(ng-show='notebook.editName' ng-click='renameNotebook(notebook.editName)' bs-tooltip data-title='Save notebook name' data-trigger='hover')
.pull-right
+btn-toolbar('fa-plus', 'addParagraph()', 'Add new query')
- .block-callout-parent
- table
- tbody
- tr
- td.block-callout-left(width='50%')
- i.fa.fa-check-square.block-callout-header-left
- label.block-callout-header-left With SQL Notebook you can:
- ul
- li Create any number of queries
- li Execute and explain SQL queries
- li Execute scan queries
- li View data in tabular form and as charts
- td.block-callout-right(width='50%')
- i.fa.fa-check-square.block-callout-header-right
- label.block-callout-header-right To execute SQL you need:
- ul
- li Start Apache Ignite Cluster with caches
- li Populate caches with data
- li Start Apache Ignite Web Agent
- li Create paragraph, enter some SQL and execute it
- hr
+ .block-callout-parent
+ table
+ tbody
+ tr
+ td.block-callout-left(width='50%')
+ i.fa.fa-check-square.block-callout-header-left
+ label.block-callout-header-left With SQL Notebook you can:
+ ul
+ li Create any number of queries
+ li Execute and explain SQL queries
+ li Execute scan queries
+ li View data in tabular form and as charts
+ td.block-callout-right(width='50%')
+ i.fa.fa-check-square.block-callout-header-right
+ label.block-callout-header-right To execute SQL you need:
+ ul
+ li Start Apache Ignite Cluster with caches
+ li Populate caches with data
+ li Start Apache Ignite Web Agent
+ li Create paragraph, enter some SQL and execute it
+ hr
.docs-body.paragraphs
.panel-group(bs-collapse ng-model='notebook.expandedParagraphs' data-allow-multiple='true' data-start-collapsed='false')
.panel.panel-default(ng-repeat='paragraph in notebook.paragraphs')
@@ -78,8 +78,8 @@ block container
+btn-toolbar('fa-pencil', 'paragraph.edit = true; paragraph.editName = paragraph.name; $event.stopPropagation();', 'Rename paragraph')
.btn-group(ng-show='notebook.paragraphs.length > 1' ng-click='$event.stopPropagation();')
- +btn-toolbar('fa-pencil', 'paragraph.edit = true; paragraph.editName = paragraph.name;', 'Rename paragraph')
- +btn-toolbar('fa-remove', 'removeParagraph(paragraph)', 'Remove paragraph')
+ +btn-toolbar('fa-pencil', 'paragraph.edit = true; paragraph.editName = paragraph.name;', 'Rename query')
+ +btn-toolbar('fa-remove', 'removeParagraph(paragraph)', 'Remove query')
.pull-right
.btn-group(ng-model='paragraph.result' ng-click='$event.stopPropagation()' style='float: right')
@@ -133,7 +133,7 @@ block container
.col-sm-12(ng-show='!paragraph.errMsg && paragraph.result != "none"')
hr(style='margin-top: 0; margin-bottom: 10px')
.sql-empty-result(ng-show='!paragraph.rows') Result set is empty.
- div(ng-if='paragraph.rows && paragraph.result === "table"')
+ div(ng-show='paragraph.rows && paragraph.result === "table"')
.sql-table-total(ng-show='paragraph.rows && paragraph.result === "table"')
label Page #
b {{paragraph.page}}
@@ -144,14 +144,7 @@ block container
button.btn.btn-primary.fieldButton(ng-click='exportPage(paragraph)' ) Export
button.btn.btn-primary(id='export-item-dropdown' data-toggle='dropdown' data-container='body' bs-dropdown='exportDropdown' data-placement='bottom-right')
span.caret
- .sql-table-wrapper
- table.table.table-condensed(st-table='displayedResult' st-safe-src='paragraph.rows' float-thead='floatTheadOptions')
- thead
- tr
- th(ng-repeat='col in paragraph.meta track by $index' ng-if='paragraph.columnFilter(col)' bs-tooltip='columnToolTip(col)' data-placement='bottom') {{col.fieldName}}
- tbody
- tr(ng-repeat='row in displayedResult track by $index')
- td(ng-repeat='val in row track by $index' ng-if='paragraph.columnFilter(paragraph.meta[$index])') {{ val }}
+ .sql-table.ag-bootstrap(ag-grid='paragraph.gridOptions')
div(ng-show='paragraph.chart() && paragraph.nonEmpty()')
.chart-settings-link
i.fa.fa-chevron-circle-down
http://git-wip-us.apache.org/repos/asf/ignite/blob/beb40275/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 359f275..30af808 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
@@ -29,6 +29,7 @@ html(ng-app='ignite-web-control-center' ng-init='user = #{JSON.stringify(user)};
link(rel='stylesheet', href='//cdn.rawgit.com/wix/angular-tree-control/master/css/tree-control.css')
link(rel='stylesheet', href='//cdn.rawgit.com/wix/angular-tree-control/master/css/tree-control-attribute.css')
link(rel='stylesheet' href='//rawgithub.com/darthwade/angular-loading/master/angular-loading.css')
+ link(rel='stylesheet' href='//cdn.rawgit.com/ceolter/ag-grid/master/dist/ag-grid.css')
link(rel='stylesheet', href='/stylesheets/style.css')
block scripts
@@ -53,12 +54,13 @@ html(ng-app='ignite-web-control-center' ng-init='user = #{JSON.stringify(user)};
script(src='//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js')
script(src='//angular-ui.github.io/ui-ace/dist/ui-ace.min.js')
- script(src='//cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.13/jquery.floatThead.min.js')
script(src='//cdn.rawgit.com/wix/angular-tree-control/master/angular-tree-control.js')
script(src='//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js')
script(src='//rawgithub.com/darthwade/angular-loading/master/angular-loading.min.js')
+ script(src='//cdn.rawgit.com/ceolter/ag-grid/master/dist/ag-grid.js')
+
script(src='/common-module.js')
script(src='/data-structures.js')