commit f322300e783891d7a91c2075ebf855603a4f04a7 Author: Dmitry Eremin-Solenikov <dbaryshkov@gmail.com> Date: Thu Jul 10 02:05:11 2014 +0400 Parse clients data for bridges Onionoo provides another API method for bridges - information about clients that used the bridge. Let Atlas provide average client count graphs. Signed-off-by: Dmitry Eremin-Solenikov <dbaryshkov@gmail.com> --- js/models/graph.js | 59 ++++++++++++++++++++++++++++++ js/views/details/main.js | 17 ++++++++- templates/details/bridge.html | 79 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 154 insertions(+), 1 deletion(-) diff --git a/js/models/graph.js b/js/models/graph.js index 33afea9..434ee9d 100644 --- a/js/models/graph.js +++ b/js/models/graph.js @@ -60,6 +60,29 @@ define([ return newar; }; + function parseClients(history, model, name) { + var newar; + _.each(_.keys(history), function(period, i) { + var first = history[period].first.split(' '); + var date = first[0].split('-'); + var time = first[1].split(':'); + first = new Date(date[0], date[1]-1, date[2], + time[0], time[1], time[2]); + var y = first.getTime(); + _.each(history[period].values, function(value, i) { + y += history[period].interval*1000; + var x = null + if (value != null) { + x = value*history[period].factor; + } + var mperiod = "clients_" + period.split("_")[1] + newar = model.get(mperiod)[name]; + newar.push([y,x]); + }); + }); + return newar; + }; + var graphModel = Backbone.Model.extend({ baseurl: 'https://onionoo.torproject.org', initialize: function() { @@ -70,6 +93,12 @@ define([ bw_months: {write: [], read: []}, bw_year: {write: [], read: []}, bw_years: {write: [], read: []}, + clients_days: {average: []}, + clients_week: {average: []}, + clients_month: {average: []}, + clients_months: {average: []}, + clients_year: {average: []}, + clients_years: {average: []}, weights_week: {advbw: [], cw: [], guard: [], exit: []}, weights_month: {advbw: [], cw: [], guard: [], exit: []}, weights_months: {advbw: [], cw: [], guard: [], exit: []}, @@ -150,6 +179,36 @@ define([ var exit = parseWeightHistory(relay.exit_probability, model, 'exit'); model.set({mperiod: {exit: exit}}); } + }, + lookup_clients: function(fingerprint, options) { + var model = this; + var success = options.success; + // Clear the model + this.set({ + clients_days: {average: []}, + clients_week: {average: []}, + clients_month: {average: []}, + clients_months: {average: []}, + clients_year: {average: []}, + clients_years: {average: []} + }); + + $.getJSON(this.baseurl+'/clients?lookup='+fingerprint, function(data) { + model.data = data; + success(model, data); + }); + }, + parse_clients_data: function(data) { + var model = this; + var relay = data.relays[0]; + if (!relay) + relay = data.bridges[0]; + this.fingerprint = relay.fingerprint; + + if ("average_clients" in relay) { + var average = parseClients(relay.average_clients, model, 'average'); + model.set({mperiod: {average: average}}); + } } }) return graphModel; diff --git a/js/views/details/main.js b/js/views/details/main.js index ff8ce8d..ee12b89 100644 --- a/js/views/details/main.js +++ b/js/views/details/main.js @@ -224,7 +224,22 @@ define([ }); } }); - }; + } else { + this.graph.lookup_clients(this.model.fingerprint, { + success: function() { + graph.parse_clients_data(graph.data); + graphs = ['clients_week', 'clients_month', + 'clients_months', 'clients_year', 'clients_years']; + _.each(graphs, function(g) { + var data = [graph.get(g).average]; + var labels = ["average number of connected clients"]; + var legendPos = [[3, 0]]; + var colors = ["#edc240"]; + plot(g, data, labels, legendPos, colors, "g", ".2g"); + }); + } + }); + } $("#loading").hide(); $(".flag .tooltip").hide(); diff --git a/templates/details/bridge.html b/templates/details/bridge.html index c091363..5a7a14c 100644 --- a/templates/details/bridge.html +++ b/templates/details/bridge.html @@ -174,6 +174,85 @@ </div> </li> </ul> +</div><div class="row"> + <ul class="thumbnails"> + <li class="span8"> + <div class="thumbnail"> + + <div id="clients_week" class="graph"> + <img src="img/no-data-available.png" alt=""> + </div> + <div class="caption"> + <h5>1 Week graph</h5> + <a id="save_clients_week" href="">Save Graph</a> + </div> + </div> + </li> + </ul> +</div> + +<div class="row"> + <ul class="thumbnails"> + <li class="span8"> + <div class="thumbnail"> + <div id="clients_month" class="graph"> + <img src="img/no-data-available.png" alt=""> + </div> + <div class="caption"> + <h5>1 Month graph</h5> + <a id="save_clients_month" href="">Save Graph</a> + </div> + </div> + </li> + </ul> +</div><div class="row"> + + <ul class="thumbnails"> + <li class="span8"> + <div class="thumbnail"> + + <div id="clients_months" class="graph"> + <img src="img/no-data-available.png" alt=""> + </div> + <div class="caption"> + <h5>3 Months graph</h5> + <a id="save_clients_months" href="">Save Graph</a> + </div> + </div> + </li> + </ul> +</div> + +<div class="row"> + <ul class="thumbnails"> + <li class="span8"> + <div class="thumbnail"> + <div id="clients_year" class="graph"> + <img src="img/no-data-available.png" alt=""> + </div> + <div class="caption"> + <h5>1 Year graph</h5> + <a id="save_clients_year" href="">Save Graph</a> + </div> + </div> + </li> + + </ul> +</div><div class="row"> + <ul class="thumbnails"> + <li class="span8"> + <div class="thumbnail"> + <div id="clients_years" class="graph"> + <img src="img/no-data-available.png" alt=""> + </div> + + <div class="caption"> + <h5>5 Years graph</h5> + <a id="save_clients_years" href="">Save Graph</a> + </div> + </div> + </li> + </ul> </div> <!--