LIVY-352. Web UI: Added pagination by updating to use JQuery DataTables PR moved from old repo https://github.com/cloudera/livy/pull/326
[LIVY-352](https://issues.cloudera.org/browse/LIVY-352) Followup to https://github.com/cloudera/livy/pull/319 adding pagination and search by switching to use jQuery DataTables like the Spark Web UI.     Author: Alex Bozarth <ajboz...@us.ibm.com> Closes #3 from ajbozarth/ui-pagination. Project: http://git-wip-us.apache.org/repos/asf/incubator-livy/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-livy/commit/0d7d81b0 Tree: http://git-wip-us.apache.org/repos/asf/incubator-livy/tree/0d7d81b0 Diff: http://git-wip-us.apache.org/repos/asf/incubator-livy/diff/0d7d81b0 Branch: refs/heads/master Commit: 0d7d81b035779152ed04e7bcc6b2d3499e4c5674 Parents: 9d08a58 Author: Alex Bozarth <ajboz...@us.ibm.com> Authored: Mon Jul 3 14:26:56 2017 +0800 Committer: jerryshao <ss...@hortonworks.com> Committed: Mon Jul 3 14:26:56 2017 +0800 ---------------------------------------------------------------------- .../livy/server/ui/static/all-sessions.js | 6 + .../livy/server/ui/static/batches-table.html | 2 +- .../ui/static/dataTables.bootstrap.min.css | 1 + .../ui/static/dataTables.bootstrap.min.js | 8 + .../server/ui/static/jquery.dataTables.min.js | 167 +++++++++++++++++++ .../livy/server/ui/static/sessions-table.html | 3 +- .../com/cloudera/livy/server/ui/UIServlet.scala | 3 + 7 files changed, 188 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-livy/blob/0d7d81b0/server/src/main/resources/com/cloudera/livy/server/ui/static/all-sessions.js ---------------------------------------------------------------------- diff --git a/server/src/main/resources/com/cloudera/livy/server/ui/static/all-sessions.js b/server/src/main/resources/com/cloudera/livy/server/ui/static/all-sessions.js index 64dd86d..4de50d0 100644 --- a/server/src/main/resources/com/cloudera/livy/server/ui/static/all-sessions.js +++ b/server/src/main/resources/com/cloudera/livy/server/ui/static/all-sessions.js @@ -60,10 +60,15 @@ var numSessions = 0; var numBatches = 0; $(document).ready(function () { + $.extend( $.fn.dataTable.defaults, { + stateSave: true, + }); + var sessionsReq = $.getJSON(location.origin + "/sessions", function(response) { if (response && response.total > 0) { $("#interactive-sessions").load("/static/sessions-table.html .sessions-template", function() { loadSessionsTable(response.sessions); + $("#interactive-sessions-table").DataTable(); $('#interactive-sessions [data-toggle="tooltip"]').tooltip(); }); } @@ -74,6 +79,7 @@ $(document).ready(function () { if (response && response.total > 0) { $("#batches").load("/static/batches-table.html .sessions-template", function() { loadBatchesTable(response.sessions); + $("#batches-table").DataTable(); $('#batches [data-toggle="tooltip"]').tooltip(); }); } http://git-wip-us.apache.org/repos/asf/incubator-livy/blob/0d7d81b0/server/src/main/resources/com/cloudera/livy/server/ui/static/batches-table.html ---------------------------------------------------------------------- diff --git a/server/src/main/resources/com/cloudera/livy/server/ui/static/batches-table.html b/server/src/main/resources/com/cloudera/livy/server/ui/static/batches-table.html index 18c6ad8..447c522 100644 --- a/server/src/main/resources/com/cloudera/livy/server/ui/static/batches-table.html +++ b/server/src/main/resources/com/cloudera/livy/server/ui/static/batches-table.html @@ -18,7 +18,7 @@ <h4 id="batches-header" class="sessions-template">Batch Sessions</h4> -<table class="table table-striped sessions-table sessions-template"> +<table id="batches-table" class="table table-striped sessions-table sessions-template"> <thead class="sessions-table-head"> <tr> <th>Batch Id</th> http://git-wip-us.apache.org/repos/asf/incubator-livy/blob/0d7d81b0/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.css ---------------------------------------------------------------------- diff --git a/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.css b/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.css new file mode 100644 index 0000000..66a70ab --- /dev/null +++ b/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.css @@ -0,0 +1 @@ +table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-spa ce:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_as c_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody>table>thead .sorting:after,div.dataTables_scrollBody>table>thead .sorting_asc:after,div.dataTables_scrollBody>table>thead .sorting_desc:after{display:none}div.dataTables_scrollBody>table>tbody>tr:first-child>th,div.dataTables_scrollBody>table>tbody>tr:first-child>td{border-top:none}div.dataTables_scrollFoot>table{margin-top:0 !important;bord er-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin :0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} http://git-wip-us.apache.org/repos/asf/incubator-livy/blob/0d7d81b0/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.js ---------------------------------------------------------------------- diff --git a/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.js b/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.js new file mode 100644 index 0000000..98661c6 --- /dev/null +++ b/server/src/main/resources/com/cloudera/livy/server/ui/static/dataTables.bootstrap.min.js @@ -0,0 +1,8 @@ +/*! + DataTables Bootstrap 3 integration + ©2011-2015 SpryMedia Ltd - datatables.net/license +*/ +(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d,m){var f=b.fn.dataTable;b.extend(!0,f.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",renderer:"bootstrap"});b.extend(f.ext.classes, +{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm",sProcessing:"dataTables_processing panel panel-default"});f.ext.renderer.pageButton.bootstrap=function(a,h,r,s,j,n){var o=new f.Api(a),t=a.oClasses,k=a.oLanguage.oPaginate,u=a.oLanguage.oAria.paginate||{},e,g,p=0,q=function(d,f){var l,h,i,c,m=function(a){a.preventDefault();!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&o.page(a.data.action).draw("page")}; +l=0;for(h=f.length;l<h;l++)if(c=f[l],b.isArray(c))q(d,c);else{g=e="";switch(c){case "ellipsis":e="…";g="disabled";break;case "first":e=k.sFirst;g=c+(0<j?"":" disabled");break;case "previous":e=k.sPrevious;g=c+(0<j?"":" disabled");break;case "next":e=k.sNext;g=c+(j<n-1?"":" disabled");break;case "last":e=k.sLast;g=c+(j<n-1?"":" disabled");break;default:e=c+1,g=j===c?"active":""}e&&(i=b("<li>",{"class":t.sPageButton+" "+g,id:0===r&&"string"===typeof c?a.sTableId+"_"+c:null}).append(b("<a>",{href:"#", +"aria-controls":a.sTableId,"aria-label":u[c],"data-dt-idx":p,tabindex:a.iTabIndex}).html(e)).appendTo(d),a.oApi._fnBindAction(i,{action:c},m),p++)}},i;try{i=b(h).find(d.activeElement).data("dt-idx")}catch(v){}q(b(h).empty().html('<ul class="pagination"/>').children("ul"),s);i!==m&&b(h).find("[data-dt-idx="+i+"]").focus()};return f});
