mirror of
https://github.com/apache/impala.git
synced 2025-12-19 09:58:28 -05:00
In the "Fragment Instances" page of a query, even though it is possible to sort the rows based on the fragment's name, it is difficult to distinguish between fragments and their instances. With row grouping based on fragment's name, it becomes easier to distinguish one fragment's instance from the other. The lexographical sorting of instances can still be done based on different columns, which splits the fragment's group and orders the rows lexicographically only based on the column's values. Row grouping has been implemented using the "RowGroup" extension for datatables - https://datatables.net/extensions/rowgroup/. Datatable libraries and its extensions have been added under the directory - "www/datatables". The datatable library's license has been updated according to version 1.13.2, which was previously not updated. The related row grouping extension's license has also been included. Change-Id: If2b7ed6e2a6d605553242a7db4dbeaa7fcae4606 Reviewed-on: http://gerrit.cloudera.org:8080/22226 Reviewed-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com> Tested-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com>
195 lines
4.9 KiB
JavaScript
195 lines
4.9 KiB
JavaScript
/*! DataTables Bootstrap 4 integration
|
|
* ©2011-2017 SpryMedia Ltd - datatables.net/license
|
|
*/
|
|
|
|
(function( factory ){
|
|
if ( typeof define === 'function' && define.amd ) {
|
|
// AMD
|
|
define( ['jquery', 'datatables.net'], function ( $ ) {
|
|
return factory( $, window, document );
|
|
} );
|
|
}
|
|
else if ( typeof exports === 'object' ) {
|
|
// CommonJS
|
|
module.exports = function (root, $) {
|
|
if ( ! root ) {
|
|
// CommonJS environments without a window global must pass a
|
|
// root. This will give an error otherwise
|
|
root = window;
|
|
}
|
|
|
|
if ( ! $ ) {
|
|
$ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
|
|
require('jquery') :
|
|
require('jquery')( root );
|
|
}
|
|
|
|
if ( ! $.fn.dataTable ) {
|
|
require('datatables.net')(root, $);
|
|
}
|
|
|
|
return factory( $, root, root.document );
|
|
};
|
|
}
|
|
else {
|
|
// Browser
|
|
factory( jQuery, window, document );
|
|
}
|
|
}(function( $, window, document, undefined ) {
|
|
'use strict';
|
|
var DataTable = $.fn.dataTable;
|
|
|
|
|
|
|
|
/**
|
|
* DataTables integration for Bootstrap 4. This requires Bootstrap 4 and
|
|
* DataTables 1.10 or newer.
|
|
*
|
|
* This file sets the defaults and adds options to DataTables to style its
|
|
* controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
|
|
* for further information.
|
|
*/
|
|
|
|
/* Set the defaults for DataTables initialisation */
|
|
$.extend( true, DataTable.defaults, {
|
|
dom:
|
|
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
|
|
"<'row'<'col-sm-12'tr>>" +
|
|
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
|
|
renderer: 'bootstrap'
|
|
} );
|
|
|
|
|
|
/* Default class modification */
|
|
$.extend( DataTable.ext.classes, {
|
|
sWrapper: "dataTables_wrapper dt-bootstrap4",
|
|
sFilterInput: "form-control form-control-sm",
|
|
sLengthSelect: "custom-select custom-select-sm form-control form-control-sm",
|
|
sProcessing: "dataTables_processing card",
|
|
sPageButton: "paginate_button page-item"
|
|
} );
|
|
|
|
|
|
/* Bootstrap paging button renderer */
|
|
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
|
|
var api = new DataTable.Api( settings );
|
|
var classes = settings.oClasses;
|
|
var lang = settings.oLanguage.oPaginate;
|
|
var aria = settings.oLanguage.oAria.paginate || {};
|
|
var btnDisplay, btnClass;
|
|
|
|
var attach = function( container, buttons ) {
|
|
var i, ien, node, button;
|
|
var clickHandler = function ( e ) {
|
|
e.preventDefault();
|
|
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
|
|
api.page( e.data.action ).draw( 'page' );
|
|
}
|
|
};
|
|
|
|
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
|
button = buttons[i];
|
|
|
|
if ( Array.isArray( button ) ) {
|
|
attach( container, button );
|
|
}
|
|
else {
|
|
btnDisplay = '';
|
|
btnClass = '';
|
|
|
|
switch ( button ) {
|
|
case 'ellipsis':
|
|
btnDisplay = '…';
|
|
btnClass = 'disabled';
|
|
break;
|
|
|
|
case 'first':
|
|
btnDisplay = lang.sFirst;
|
|
btnClass = button + (page > 0 ?
|
|
'' : ' disabled');
|
|
break;
|
|
|
|
case 'previous':
|
|
btnDisplay = lang.sPrevious;
|
|
btnClass = button + (page > 0 ?
|
|
'' : ' disabled');
|
|
break;
|
|
|
|
case 'next':
|
|
btnDisplay = lang.sNext;
|
|
btnClass = button + (page < pages-1 ?
|
|
'' : ' disabled');
|
|
break;
|
|
|
|
case 'last':
|
|
btnDisplay = lang.sLast;
|
|
btnClass = button + (page < pages-1 ?
|
|
'' : ' disabled');
|
|
break;
|
|
|
|
default:
|
|
btnDisplay = button + 1;
|
|
btnClass = page === button ?
|
|
'active' : '';
|
|
break;
|
|
}
|
|
|
|
if ( btnDisplay ) {
|
|
var disabled = btnClass.indexOf('disabled') !== -1;
|
|
|
|
node = $('<li>', {
|
|
'class': classes.sPageButton+' '+btnClass,
|
|
'id': idx === 0 && typeof button === 'string' ?
|
|
settings.sTableId +'_'+ button :
|
|
null
|
|
} )
|
|
.append( $('<a>', {
|
|
'href': disabled ? null : '#',
|
|
'aria-controls': settings.sTableId,
|
|
'aria-disabled': disabled ? 'true' : null,
|
|
'aria-label': aria[ button ],
|
|
'aria-role': 'link',
|
|
'aria-current': btnClass === 'active' ? 'page' : null,
|
|
'data-dt-idx': button,
|
|
'tabindex': settings.iTabIndex,
|
|
'class': 'page-link'
|
|
} )
|
|
.html( btnDisplay )
|
|
)
|
|
.appendTo( container );
|
|
|
|
settings.oApi._fnBindAction(
|
|
node, {action: button}, clickHandler
|
|
);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// IE9 throws an 'unknown error' if document.activeElement is used
|
|
// inside an iframe or frame.
|
|
var activeEl;
|
|
|
|
try {
|
|
// Because this approach is destroying and recreating the paging
|
|
// elements, focus is lost on the select button which is bad for
|
|
// accessibility. So we want to restore focus once the draw has
|
|
// completed
|
|
activeEl = $(host).find(document.activeElement).data('dt-idx');
|
|
}
|
|
catch (e) {}
|
|
|
|
attach(
|
|
$(host).empty().html('<ul class="pagination"/>').children('ul'),
|
|
buttons
|
|
);
|
|
|
|
if ( activeEl !== undefined ) {
|
|
$(host).find( '[data-dt-idx='+activeEl+']' ).trigger('focus');
|
|
}
|
|
};
|
|
|
|
|
|
return DataTable;
|
|
}));
|