commit 4af60ea0f94061ab42f8abe295453072c680503b Author: Mark Henderson mhenderson@stackoverflow.com Date: Mon Aug 28 08:12:19 2017 -0400
Ticket #15508:
- Sorts bandwidth nicely - Sorts IP addresses nicely
- Adds a file for custom sorting filters `dataTables.Sorting.js` - In `js/views/search/do.js` defines custom sorting options --- js/libs/datatables/dataTables.Sorting.js | 122 +++++++++++++++++++++++++++++++ js/main.js | 1 + js/views/search/do.js | 24 +++++- 3 files changed, 143 insertions(+), 4 deletions(-)
diff --git a/js/libs/datatables/dataTables.Sorting.js b/js/libs/datatables/dataTables.Sorting.js new file mode 100644 index 0000000..ba77fdd --- /dev/null +++ b/js/libs/datatables/dataTables.Sorting.js @@ -0,0 +1,122 @@ +var loadSortingExtensions = function(){ + /** + * Atlas renders speed as MiB/s, KiB/sec, etc - which as a string does + * not sort nicely at all. This sorting plugin fixes that by converting + * the speeds back into a raw Bytes value, and then sorting. It is based + * on two different versions of the datatabes file-size sorting plugin - + * https://datatables.net/plug-ins/sorting/file-size - the latest edition + * that has superior matching, and a very old version from 2011 that works + * with the version of datatables that Atlas runs on. + * @name File size + * @author mhenderson + */ + + var getBytesFromString = function(xstring,ystring){ + var xmatches = xstring.match( /(\d+(?:.\d+)?)\s*([a-z]+)/i ); + var ymatches = ystring.match( /(\d+(?:.\d+)?)\s*([a-z]+)/i ); + var multipliers = { + b: 1, + bytes: 1, + kb: 1000, + kib: 1024, + mb: 1000000, + mib: 1048576, + gb: 1000000000, + gib: 1073741824, + tb: 1000000000000, + tib: 1099511627776, + pb: 1000000000000000, + pib: 1125899906842624 + }; + + var x = xmatches[1]; + if (xmatches){ + x = x * multipliers[xmatches[2].toLowerCase()]; + } + var y = ymatches[1]; + if (ymatches) { + y = y * multipliers[ymatches[2].toLowerCase()]; + } + + return [x,y] + } + + jQuery.extend( jQuery.fn.dataTableExt.oSort, { + "file-size-asc": function ( a, b ) { + var raw = getBytesFromString(a,b) + var x = raw[0] + var y = raw[1] + return ((x < y) ? -1 : ((x > y) ? 1 : 0)); + }, + + "file-size-desc": function ( a, b ) { + var raw = getBytesFromString(a,b) + var x = raw[0] + var y = raw[1] + return ((x < y) ? 1 : ((x > y) ? -1 : 0)); + } + } ); + + /** + * Sorts a column containing IP addresses in typical dot notation. This can + * be most useful when using DataTables for a networking application, and + * reporting information containing IP address. Also has a matching type + * detection plug-in for automatic type detection. + * @name IP addresses + * @author Brad Wasson + */ + + jQuery.extend( jQuery.fn.dataTableExt.oSort, { + "ip-address-asc": function ( a, b ) { + var m = a.split("."), x = ""; + var n = b.split("."), y = ""; + for(var i = 0; i < m.length; i++) { + var item = m[i]; + if(item.length == 1) { + x += "00" + item; + } else if(item.length == 2) { + x += "0" + item; + } else { + x += item; + } + } + for(var i = 0; i < n.length; i++) { + var item = n[i]; + if(item.length == 1) { + y += "00" + item; + } else if(item.length == 2) { + y += "0" + item; + } else { + y += item; + } + } + return ((x < y) ? -1 : ((x > y) ? 1 : 0)); + }, + + "ip-address-desc": function ( a, b ) { + var m = a.split("."), x = ""; + var n = b.split("."), y = ""; + for(var i = 0; i < m.length; i++) { + var item = m[i]; + if(item.length == 1) { + x += "00" + item; + } else if (item.length == 2) { + x += "0" + item; + } else { + x += item; + } + } + for(var i = 0; i < n.length; i++) { + var item = n[i]; + if(item.length == 1) { + y += "00" + item; + } else if (item.length == 2) { + y += "0" + item; + } else { + y += item; + } + } + return ((x < y) ? 1 : ((x > y) ? -1 : 0)); + } + } ); +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index bd91484..8c49798 100644 --- a/js/main.js +++ b/js/main.js @@ -10,6 +10,7 @@ require.config({ text: 'libs/require/text', datatables: 'libs/datatables/jquery.dataTables.min', datatablest: 'libs/datatables/dataTables.TorStatus', + datatablessort: 'libs/datatables/dataTables.Sorting', tooltip: 'libs/bootstrap/bootstrap-tooltip', typeahead: 'libs/bootstrap/bootstrap-typeahead', collapse: 'libs/bootstrap/bootstrap-collapse', diff --git a/js/views/search/do.js b/js/views/search/do.js index 74f38f0..eb3d2aa 100644 --- a/js/views/search/do.js +++ b/js/views/search/do.js @@ -6,6 +6,7 @@ define([ 'collections/results', 'text!templates/search/do.html', 'datatables', + 'datatablessort', 'tooltip', 'helpers', 'collapse', @@ -115,12 +116,27 @@ define([ document.title = "Atlas"; this.filtering(); var asInitVals = new Array(); - var compiledTemplate = _.template(doSearchTemplate, {relays: this.relays, countries: CountryCodes, error: this.error}); + var compiledTemplate = _.template(doSearchTemplate, {relays: this.relays, countries: CountryCodes, error: this.error}); this.el.html(compiledTemplate); - var fp = this; - // This creates the table using DataTables + var fp = this; + loadSortingExtensions(); + // This creates the table using DataTables var oTable = $('#torstatus_results').dataTable({ - // Save the state of the tables + //Define column specific options + "aoColumns": [ + null, //Status + null, //Nickname + { "sType": "file-size" }, //Bandwidth + null, //Uptime + null, //Country + { "sType": "ip-address" }, //IP Address + null, //Flags + null, //Properties + null, //ORPort + null, //DirPort + null //Type + ], + // Save the state of the tables "sDom": "<'row'<'span6'l><'span6 hide'f>r>t<'row'<'span6'i><'span6'p>>", "bStateSave": false, "aaSorting": [],