diff options
Diffstat (limited to 'clover/controller/control/static/js/visibility.js')
| -rw-r--r-- | clover/controller/control/static/js/visibility.js | 285 |
1 files changed, 285 insertions, 0 deletions
diff --git a/clover/controller/control/static/js/visibility.js b/clover/controller/control/static/js/visibility.js new file mode 100644 index 0000000..362b7a3 --- /dev/null +++ b/clover/controller/control/static/js/visibility.js @@ -0,0 +1,285 @@ +$( document ).ready(function() { + + $(document).foundation(); + // Refresh + var refresh_on = setInterval(refresh_visibility, 5000); + + // Controls + $( "#visibilitySwitch" ).click(function() { + if (this.checked) { + refresh_on = setInterval(refresh_visibility, 5000); + } else { + clearInterval(refresh_on); + } + }); + + $( "#clear_visibility" ).click(function() { + $.get( "visibility/clear", function( data ) { + alert(data); + }); + }); + + // Visibility selection + $( "#visibility_selected" ).selectable(); + $( "#vservices" ).selectable(); + + $( "#visibility_selected" ).on( "selectableselected", function() { + var vselected = []; + $(".ui-selected", this).each(function() { + vselected.push(this.innerHTML); + }); + set_visibility(vselected); + }); + + $( "#visibility_selected" ).on( "selectableunselected", function() { + var vselected = []; + $(".ui-selected", this).each(function() { + vselected.push(this.innerHTML); + }); + set_visibility(vselected); + }); + + var vse = [] ; + $("ol#vservices > li.ui-widget-content.ui-selectee", this).each(function() { + vse.push(this.innerHTML) + }); + for (var i=0; i<vse.length; i++) { + $("#visibility_selected > li", this).each(function() { + if (vse[i] === this.innerHTML.replace(/-/g, '_')) { + $(this).addClass("ui-selected"); + } + }); + } + + $( "#visibility_accordion" ).accordion({collapsible: true, active: false}); + + +}); + +function set_visibility(vselected) { + + var services = {}; + var y = []; + vselected.forEach(function(element) { + var x = {}; + x['name'] = element + y.push(x) + }); + services['services'] = y + + $.ajax({ + type: "POST", + url: "visibility/set", + data: JSON.stringify(services), + contentType: "application/json; charset=utf-8", + dataType: "json", + async: false, + success: function(data){alert(data);}, + failure: function(errMsg) { + alert(errMsg); + } + }); + +} + +function refresh_visibility() { + $.get( "visibility/get/stats/all", function( data ) { + + // Response Times + var head1 = '<div class="cell">Service</div>'; + var head2 = '<div class="cell">Min(ms)</div>'; + var head3 = '<div class="cell">Avg(ms)</div>'; + var head4 = '<div class="cell">Max(ms)</div>'; + var content = head1 + head2 + head3 + head4; + for (var i=0; i<data.response_times.length; i++) { + var o = data.response_times[i]; + content = content + + '<div class="cell bbb">' + + o.name + '</div><div class="cell bbb">' + + o.min + '</div><div class="cell bbb">' + + o.avg + '</div><div class="cell bbb">' + + o.max + '</div>'; + } + $( ".tracing_rt" ).html( content ); + + // System Counts + content = '<div class="vtoplevel"><a>Traces: ' + + data.trace_count + "</a><br><a>Spans: " + + data.span_count + "</a><br><a>Metrics: " + + data.metric_count + "</a></div>" ; + $( ".system_counts" ).html( content ); + + // Distinct + update_distinct('request_urls', data) + update_distinct('user_agents', data) + update_distinct('status_codes', data) + update_distinct('op_names', data) + update_distinct('node_ids', data) + update_distinct('upstream_clusters', data) + + // Tracing Charts, URL count + $(".span_urls_all").empty(); + var el = document.createElement("div"); + $(".span_urls_all").append(el); + + var data1 = []; + for (var i=0; i<data.request_url_count.length; i++) { + data1.push({ + "URLs": data.request_url_count[i][0], + "Count": data.request_url_count[i][1] + }); + } + + var vis1 = new candela.components.BarChart(el, { + data: data1, + x: "URLs", + y: "Count", + width: 600, + height: 400, + renderer: "svg" + }); + vis1.render(); + + // URL/status code count + $(".status_codes_all").empty(); + var el1 = document.createElement("div"); + $(".status_codes_all").append(el1); + + data1 = []; + for (var i=0; i<data.status_code_count.length; i++) { + data1.push({ + "Status Codes, URLs": data.status_code_count[i][0], + "Count": data.status_code_count[i][1] + }); + } + + var vis2 = new candela.components.BarChart(el1, { + data: data1, + x: "Status Codes, URLs", + y: "Count", + width: 600, + height: 400, + renderer: "svg" + }); + vis2.render(); + + // URL/service count + $(".span_node_urls_all").empty(); + var el2 = document.createElement("div"); + $(".span_node_urls_all").append(el2); + + data1 = []; + for (var i=0; i<data.node_url_count.length; i++) { + data1.push({ + "Services, URLs": data.node_url_count[i][0], + "Count": data.node_url_count[i][1] + }); + } + + var vis3 = new candela.components.BarChart(el2, { + data: data1, + x: "Services, URLs", + y: "Count", + width: 600, + height: 800, + renderer: "svg" + }); + vis3.render(); + + // Plotly, user-agent % + data1 = []; + var ua_values = []; + var ua_labels = []; + var ua_sum = 0; + for (var i=0; i<data.user_agent_count.length; i++) { + ua_sum = ua_sum + data.user_agent_count[i][1]; + } + var yval = 0; + for (var i=0; i<data.user_agent_count.length; i++) { + yval = Math.round(( data.user_agent_count[i][1] / ua_sum ) * 100); + ua_values.push(yval); + ua_labels.push(data.user_agent_count[i][0]); + } + data1 = [{ + values: ua_values, + labels: ua_labels, + type: 'pie' + }] + Plotly.newPlot('span_user_agents_all', data1); + + // Node_id count + $(".span_node_id_all").empty(); + var el3 = document.createElement("div"); + $(".span_node_id_all").append(el3); + + data1 = []; + for (var i=0; i<data.node_id_count.length; i++) { + data1.push({ + "Services": data.node_id_count[i][0], + "Count": data.node_id_count[i][1] + }); + } + + var vis4 = new candela.components.BarChart(el3, { + data: data1, + x: "Services", + y: "Count", + width: 600, + height: 400, + renderer: "svg" + }); + vis4.render(); + + // Plotly, metrics + $("#metrics_graphs").empty(); + var toggle = true; + for (var i=0; i<data.metrics_time.length; i++) { + var metric = data.metrics_time[i]; + var po = ''; + if (toggle) { + po = ' small-offset-2'; + toggle = false; + } else { + toggle = true; + } + var portlet = '<div class="large-4 cell clover-portlet' + + po + '">'; + var mdiv = '<div id="' + metric.name + '"></div>'; + var m_html = portlet + mdiv + '</div>'; + $("#metrics_graphs").append(m_html); + + data1 = []; + var x_values = []; + var y_values = []; + for (var j=0; j<metric.values.length; j++) { + x_values.push(j); + y_values.push(metric.values[j]); + } + data1 = [{ + x: x_values, + y: y_values, + type: 'scatter' + }] + var m_title = metric.service + '<br>' + metric.prefix + '<br>' + + metric.suffix; + var layout = { + title: m_title + }; + Plotly.newPlot(metric.name, data1, layout); + } + + }); + $.get( "visibility/metrics", function( data ) { + $( ".service_metrics" ).html( data ); + }); + +} + +function update_distinct(dkey, data) { + content = ''; + for (var i=0; i<data[dkey].length; i++) { + content = content + data[dkey][i] + '<br>'; + } + var container = '.' + dkey; + $(container).html(content); +} |