From 6fd2ed17d82a4b9bdbef6bdd67adc323b2fbf5cc Mon Sep 17 00:00:00 2001 From: Dhinesh Date: Thu, 12 Nov 2020 12:21:11 +0530 Subject: [PATCH] UI interface changes --- .../isp_country_analytics.js | 129 +++++---- dashboards/isp-country-analytics/pkg.yaml | 2 +- .../isp-country-analytics/template.haml | 2 +- .../peering-analytics-drilldown/app.css | 4 +- .../peering_analytics_drilldown.js | 18 +- .../peering-analytics-drilldown/pkg.yaml | 2 +- .../peering-analytics-drilldown/template.haml | 246 +++++++++++------- .../peering-analytics/peering_analytics.js | 10 +- dashboards/peering-analytics/pkg.yaml | 2 +- dashboards/peering-analytics/template.haml | 30 +-- 10 files changed, 248 insertions(+), 197 deletions(-) diff --git a/dashboards/isp-country-analytics/isp_country_analytics.js b/dashboards/isp-country-analytics/isp_country_analytics.js index 69ea19c..3ceaa46 100644 --- a/dashboards/isp-country-analytics/isp_country_analytics.js +++ b/dashboards/isp-country-analytics/isp_country_analytics.js @@ -70,55 +70,35 @@ class ISPOverviewMapping{ this.crosskey_interface=opts.crosskey_interface; } - //new time selector + //new time selector new ShowNewTimeSelector({divid:"#new_time_selector"+this.rand_id, update_input_ids:"#from_date,#to_date", default_ts:this.default_selected_time - }); + },this.callback_load_routers,this); this.mk_time_interval(); - //get router toppers for drowdown in form - var top_routers=await fetch_trp(TRP.Message.Command.COUNTER_GROUP_TOPPER_REQUEST, { - counter_group: "{2314BB8E-2BCC-4B86-8AA2-677E5554C0FE}", - time_interval: this.tmint , - meter:0, - maxitems:500 - }); - var router_key_map ={} - for(let i= 0 ; i < top_routers.keys.length ; i++){ - if (top_routers.keys[i].key=="SYS:GROUP_TOTALS"){ - continue; - } - router_key_map[top_routers.keys[i].key] = top_routers.keys[i].label - } - //get interface toppers for dropdown in form - var top_intfs=await fetch_trp(TRP.Message.Command.COUNTER_GROUP_TOPPER_REQUEST, { - counter_group: "{C0B04CA7-95FA-44EF-8475-3835F3314761}", - time_interval: this.tmint , - meter:0, - maxitems:1000 - }); - var interface_meters = {}; - var all_dropdown = {"0":["Please select",[["0","Please select"]]]}; - top_intfs.keys= this.sort_hash(top_intfs,"key"); - for(let i= 0 ; i < top_intfs.keys.length ; i++){ - if (top_intfs.keys[i].key=="SYS:GROUP_TOTALS"){ - continue; - } - let intf =top_intfs.keys[i].key; - let router_key=intf.split("_")[0]; - if(interface_meters[router_key] == undefined){ - interface_meters[router_key] = []; - } - interface_meters[router_key].push([top_intfs.keys[i].key,top_intfs.keys[i].label]); - } + this.load_routers_interfaces(); - for (var key in interface_meters) { - var meters = interface_meters[key]; - meters.unshift(["0","Please select"]); - all_dropdown[key]=[router_key_map[key],meters]; + this.cg_meters = {}; + await get_counters_and_meters_json(this.cg_meters); + //find crosskeyguid is present automatically find base counter group + if(this.crosskey_interface && this.cg_meters.crosskey[this.crosskey_interface]){ + this.filter_cgguid = this.cg_meters.crosskey[this.crosskey_interface][1]; } + this.form.submit($.proxy(this.submit_form,this)); + if(this.dash_params.valid_input == "1" || this.dash_params.valid_input==1){ + this.form.submit(); + } + } + + + async callback_load_routers(s,e,args){ + await args.load_routers_interfaces(); + } + + async load_routers_interfaces(){ + this.mk_time_interval(); let selected_router = null, selected_interface=null; let incoming_key = this.dash_params.key || "" let keyparts = incoming_key.split("_"); @@ -127,32 +107,21 @@ class ISPOverviewMapping{ selected_interface = keyparts.join("_"); } - var js_params = {meter_details:all_dropdown, - selected_cg : selected_router || localStorage.getItem("apps.countryanalytics.last-selected-router"), - selected_st : selected_interface || localStorage.getItem("apps.countryanalytics.last-selected-interface"), + var load_router_opts = { + tmint : this.tmint, + selected_cg : selected_router || localStorage.getItem("apps.peeringanalytics.last-selected-router"), + selected_st : selected_interface || localStorage.getItem("apps.peeringanalytics.last-selected-interface"), update_dom_cg : "routers"+this.rand_id, update_dom_st : "interfaces"+this.rand_id, chosen:true } - //Load meter combo for routers and interfaces - new CGMeterCombo(JSON.stringify(js_params)); - - - this.cg_meters = {}; - await get_counters_and_meters_json(this.cg_meters); - //find crosskeyguid is present automatically find base counter group - if(this.crosskey_interface && this.cg_meters.crosskey[this.crosskey_interface]){ - this.filter_cgguid = this.cg_meters.crosskey[this.crosskey_interface][1]; - } - - this.form.submit($.proxy(this.submit_form,this)); - if(this.dash_params.valid_input == "1" || this.dash_params.valid_input==1){ - this.form.submit(); - } + $(`#routers${this.rand_id}`).find("option").remove(); + await load_routers_interfaces_dropdown(load_router_opts); } + //make time interval to get toppers. mk_time_interval(){ var selected_fromdate = $('#from_date'+this.rand_id).val(); @@ -186,6 +155,16 @@ class ISPOverviewMapping{ await this.get_data(); }; this.form.find("#btn_submit").prop('disabled', false); + new ExportToPDF({add_button_to:".add_download_btn", + tint:this.tmint, + logo_tlhs:this.logo_tlhs, + download_file_name:"Country Analytics", + report_opts:{ + header:{h1:"Country Analytics Report"}, + report_title:{h1:this.target_text}, + nodes:this.report_nodes + } + }); } // reset UI for every submit @@ -201,6 +180,19 @@ class ISPOverviewMapping{ e.preventDefault() $(this).tab('show') }); + this.report_nodes = []; + _.each([this.meter_details_in.upload,this.meter_details_in.download],$.proxy(function(idx,ai){ + this.report_nodes.push({type:"table",header_text:"auto",h1:"h3",h2:"h3 small",section_header:ai,find_by:`#table_${ai}`}); + this.report_nodes.push({type:"page_break"}); + this.report_nodes.push({type:"svg",header_text:"auto",h1:"h3",h2:"h3 small",find_by:`#traffic_chart_${ai}_`}); + this.report_nodes.push({type:"svg",header_text:"auto",h1:"h3",h2:"h3 small",find_by:`#donut_chart${ai}_`}); + this.report_nodes.push({type:"page_break"}); + this.report_nodes.push({type:"svg",header_text:"auto",h1:"h3",h2:"h3 small",find_by:`#sankey_chart_${ai}`}); + if(ai!=1){ + this.report_nodes.push({type:"page_break",add_header_footer:false}); + } + + },this)); //this.data_dom.find('.toppers_table_div').append("Please wait..."); //title part @@ -331,7 +323,7 @@ class ISPOverviewMapping{ for(let i= 0 ; i < cgtoppers.length ; i++){ let topper = cgtoppers[i]; - let dropdown = $("Options"); + let dropdown = $(""); let dropdown_menu = $(""); dropdown_menu.append("
  • Traffic Chart
    • "); dropdown_menu.append("
  • Key Dashboard
    • "); @@ -371,7 +363,6 @@ class ISPOverviewMapping{ },this)); table.tablesorter(); table.closest('.panel').find(".badge").html(rows.length); - new ExportToCSV({table_id:this.table_id,filename_prefix:"top_upload_asn",append_to:"panel"}); } pagination_callback(){ @@ -401,8 +392,8 @@ class ISPOverviewMapping{ } async draw_chart(){ - this.dount_div_id = `dount_chart${this.meter_index}_${this.rand_id}`; - this.data_dom.find(`#country_overview_${this.meter_index}`).find(".donut_chart").append($("
    ",{id:this.dount_div_id})); + this.donut_div_id = `donut_chart${this.meter_index}_${this.rand_id}`; + this.data_dom.find(`#country_overview_${this.meter_index}`).find(".donut_chart").append($("
    ",{id:this.donut_div_id})); this.trfchart_div_id = `traffic_chart_${this.meter_index}_${this.rand_id}`; this.data_dom.find(`#country_overview_${this.meter_index}`).find(".traffic_chart").append($("
    ",{id:this.trfchart_div_id})); this.data_dom.find(`#country_overview_${this.meter_index}`).find(".traffic_chart_div").find(".animated-background").remove(); @@ -447,10 +438,10 @@ class ISPOverviewMapping{ 'sendDataToCloud'], showSendToCloud:false, responsive: true }; - Plotly.newPlot(this.dount_div_id, data, layout,ploty_options); + Plotly.newPlot(this.donut_div_id, data, layout,ploty_options); if(cgtoppers.length==0){ - $('#'+this.dount_div_id).html("
    No data found.
    "); + $('#'+this.donut_div_id).html("
    No data found.
    "); } var keys = _.map(cgtoppers,function(ai){return ai.key}); @@ -484,8 +475,8 @@ class ISPOverviewMapping{ to_date:this.form.find("#to_date"+this.rand_id).val(), valid_input:1, surface:"STACKEDAREA", - ref_model:ref_model - }; + ref_model:ref_model, + };`` await $.ajax({ url:"/trpjs/generate_chart", data:model_data, @@ -620,12 +611,16 @@ class ISPOverviewMapping{ switch($.inArray(target.parent()[0],target.closest("td").find("li:not(.divider)"))){ case 0: case -1: + let desc = this.form.find("#routers option:selected").text(); + desc = `${desc} / ${this.form.find("#interfaces option:selected").text()}` + desc = `${desc} / ${tr.data("label")}`; let params = { key: tr.data("full_key").toString().replace(/\\/g,"\\\\"), statids:tr.data("statid"), cgguid:this.cgguid, window_fromts:this.tmint.from.tv_sec, window_tots:this.tmint.to.tv_sec, + description:desc } let url = "/trpjs/generate_chart_lb?"+$.param(params); load_modal(url); diff --git a/dashboards/isp-country-analytics/pkg.yaml b/dashboards/isp-country-analytics/pkg.yaml index 84b7d64..87e6dfc 100644 --- a/dashboards/isp-country-analytics/pkg.yaml +++ b/dashboards/isp-country-analytics/pkg.yaml @@ -1,6 +1,6 @@ name: ISP Country Analytics -version: 0.0.2 +version: 0.0.3 author: trisul diff --git a/dashboards/isp-country-analytics/template.haml b/dashboards/isp-country-analytics/template.haml index bbeeb7d..0bab77a 100644 --- a/dashboards/isp-country-analytics/template.haml +++ b/dashboards/isp-country-analytics/template.haml @@ -47,7 +47,7 @@ .tab-pane.active#country_overview_0{data-use-width:1} .row .col-xs-12.toppers_table_div - .panel.panel-primary + .panel.panel-primary.add_download_btn .panel-heading %h3 %i.fa.fa-table.fa-fw diff --git a/dashboards/peering-analytics-drilldown/app.css b/dashboards/peering-analytics-drilldown/app.css index a93878a..6e2e225 100644 --- a/dashboards/peering-analytics-drilldown/app.css +++ b/dashboards/peering-analytics-drilldown/app.css @@ -1,7 +1,5 @@ -.toppers_table_div,.donut_chart_div,.traffic_chart_div,.sankey_chart_div +.donut_chart_div,.traffic_chart_div,.sankey_chart_div { - border:2px solid #eee; - box-shadow: 1px 1px #eee; min-height: 300px; } .ui_data{ diff --git a/dashboards/peering-analytics-drilldown/peering_analytics_drilldown.js b/dashboards/peering-analytics-drilldown/peering_analytics_drilldown.js index daf6221..074911a 100644 --- a/dashboards/peering-analytics-drilldown/peering_analytics_drilldown.js +++ b/dashboards/peering-analytics-drilldown/peering_analytics_drilldown.js @@ -167,8 +167,8 @@ class ISPDrilldownMapping{ async redraw_all(meter_name){ let idx = Object.keys(this.meters).findIndex(k=>k==meter_name); await this.draw_toppers_table(meter_name,idx); - this.draw_donut_chart(meter_name,idx); await this.draw_traffic_chart(meter_name,idx); + this.draw_donut_chart(meter_name,idx); this.draw_sankey_chart(meter_name,idx); } @@ -178,7 +178,7 @@ class ISPDrilldownMapping{ var table = this.dom.find(`#peering_drilldown_${idx}`).find(".toppers_table").find("table"); table.attr("id",`table_${idx}`); - this.dom.find(`#peering_drilldown_${idx}`).find(".toppers_table").removeClass('animated-background'); + this.dom.find(`#peering_drilldown_${idx}`).find(".toppers_table_div").find('.animated-background').remove(); table.addClass('table table-hover table-sysdata'); table.find("thead").append("RouterInterfaceVolume >"); let cgtoppers = this.toppers_data.slice(0,this.maxitems); @@ -269,7 +269,7 @@ class ISPDrilldownMapping{ } async draw_donut_chart(meter_name,idx){ this.donut_div_id = `peering_drilldown_${idx}_donut`; - this.dom.find(`#peering_drilldown_${idx}`).find(".donut_chart").removeClass('animated-background'); + this.dom.find(`#peering_drilldown_${idx}`).find(".donut_chart_div").find('.animated-background').remove(); this.dom.find(`#peering_drilldown_${idx}`).find(".donut_chart").append($("
    ",{id:this.donut_div_id})); let cgtoppers = this.toppers_data.slice(0,this.maxitems); var values = []; @@ -319,7 +319,7 @@ class ISPDrilldownMapping{ } } this.traf_chart_id = `peering_drilldown_${idx}_traffic_chart` - this.dom.find(`#peering_drilldown_${idx}`).find(`.interfaces_traffic_chart`).attr("id",this.traf_chart_id); + this.dom.find(`#peering_drilldown_${idx}`).find(`.traffic_chart`).attr("id",this.traf_chart_id); let ref_model = [this.parent_cgguid,this.keyt.key,this.meters[meter_name],"Total"]; var model_data = {cgguid:this.crosskey_interface, meter:this.meters[meter_name], @@ -327,8 +327,12 @@ class ISPDrilldownMapping{ from_date:this.form.find("#from_date").val(), to_date:this.form.find("#to_date").val(), valid_input:1, - ref_model:ref_model + ref_model:ref_model, + show_title:false, + legend_position:"bottom" }; + this.dom.find(`#peering_drilldown_${idx}`).find(`.traffic_chart_div`).find(".animated-background").remove(); + if(keys.length==0){ $('#'+this.traf_chart_id).html("no data found"); return @@ -347,7 +351,7 @@ class ISPDrilldownMapping{ this.sankey_div_id = `peering_drilldown_${midx}_sankey`; this.dom.find(`#peering_drilldown_${midx}`).find(".interfaces_sankey_chart").append($("
    ",{id:this.sankey_div_id})); - + this.dom.find(`#peering_drilldown_${midx}`).find('.sankey_chart_div').find(".animated-background").remove(); // Get Bytes Toppers let tdata = this.toppers_data.slice(0,30); let keylookup = {}; @@ -508,7 +512,7 @@ class ISPDrilldownMapping{ } this.description = description; description = `${description} ${h_fmtduration(this.tmint.to.tv_sec- this.tmint.from.tv_sec)}` - $('.show_description').html(description) + $('.target').html(description) } }; diff --git a/dashboards/peering-analytics-drilldown/pkg.yaml b/dashboards/peering-analytics-drilldown/pkg.yaml index 6b54648..6ca7354 100644 --- a/dashboards/peering-analytics-drilldown/pkg.yaml +++ b/dashboards/peering-analytics-drilldown/pkg.yaml @@ -1,6 +1,6 @@ name: Peering Analytics Drilldown -version: 1.0.21 +version: 1.0.22 author: trisul diff --git a/dashboards/peering-analytics-drilldown/template.haml b/dashboards/peering-analytics-drilldown/template.haml index 463b1b2..21a8dd0 100644 --- a/dashboards/peering-analytics-drilldown/template.haml +++ b/dashboards/peering-analytics-drilldown/template.haml @@ -24,18 +24,18 @@ .drilldown_data .row .col-xs-12 - %h4.show_description.text-muted + %h4.target %ul.nav.nav-tabs#peering_drilldown_tabs %li.active %a{href:"#peering_drilldown_0",data-toggle:"tab",role:"tab"} %i.fa.fa-cloud-upload.fa-fw - %i.fa.fa-upload.fa-fw + %i.fa.fa-download.fa-fw Recv from Upstream %span.volume_0 %li %a{href:"#peering_drilldown_1",data-toggle:"tab",role:"tab"} - %i.fa.fa-cloud-download.fa-fw - %i.fa.fa-download.fa-fw + %i.fa.fa-cloud-upload.fa-fw + %i.fa.fa-upload.fa-fw Trans to Upstream %span.volume_1 %li @@ -48,7 +48,7 @@ %li %a{href:"#peering_drilldown_3",data-toggle:"tab",role:"tab"} %i.fa.fa-cloud-download.fa-fw - %i.fa.fa-download.fa-fw + %i.fa.fa-upload.fa-fw Trans to Downstream %span.volume_3 %li @@ -58,38 +58,48 @@ .tab-content{style:"padding-top:10px"} .tab-pane.active#peering_drilldown_0{data-use-width:1} .row - .col-xs-12 + .col-xs-12.toppers_table_div .panel.panel-primary.add_download_btn .panel-heading - %h3 + %h3 %i.fa.fa-table.fa-fw - Top Upstream Interface Receive - %small - Show top interfaces by receive + Top Interfaces As Receive + %small Show top 100 interfaces by Receive (Downloading from upstream) + %span.badge.badge-info + %p + %small.target .panel-body - .toppers_table.animated-background + .toppers_table %table %thead %tbody - .col-xs-12 + .animated-background + .row + .col-xs-12.traffic_chart_div .panel.panel-primary .panel-heading %h3 - %i.fa.fa-pie-chart.fa-fw - Percent share of interfaces receive traffic + %i.fa.fa-area-chart.fa-fw + Stacked area chart + %small Showing top Interface traffic receive from upstream over the selected time period + %p + %small.target .panel-body - .donut_chart.animated-background - .col-xs-12 + .traffic_chart + .animated-background + .row + .col-xs-12.donut_chart_div .panel.panel-primary .panel-heading %h3 - %i.fa.fa-area-chart.fa-fw - Stacked area chart - %small - Showing top interfaces receive traffic over the selected time period + %i.fa.fa-pie-chart.fa-fw + Percent share of Interface traffic receive from upstream + %p + %small.target .panel-body - .interfaces_traffic_chart - .col-xs-12 + .donut_chart + .animated-background + .col-xs-12.sankey_chart_div .panel.panel-primary .panel-heading %h3 @@ -99,140 +109,178 @@ Shows receive traffic flows from the left side (AS) to the right (Interfaces). Thickness represents volume of traffic. Put your mouse over a node to show actual values. .panel-body .interfaces_sankey_chart - + .animated-background .tab-pane#peering_drilldown_1{data-use-width:1} .row - .col-xs-12 - .panel.panel-success + .col-xs-12.toppers_table_div + .panel.panel-primary .panel-heading - %h3 + %h3 %i.fa.fa-table.fa-fw - Top Upstream Interface Transmit - %small - Show top interfaces which uploading data + Top Upstream Transmit + %small Show top 100 Upstream Interace by Transmit (Upload to upstream) + %span.badge.badge-info + %p + %small.target .panel-body - .toppers_table.animated-background + .toppers_table %table %thead %tbody - .col-xs-12 - .panel.panel-success + .animated-background + .row + .col-xs-12.traffic_chart_div + .panel.panel-primary .panel-heading %h3 - %i.fa.fa-pie-chart.fa-fw - Percent share of interfaces download traffic - + %i.fa.fa-area-chart.fa-fw + Stacked area chart + %small Showing top interfaces upload to upstream traffic over the selected time period + %p + %small.target + .panel-body - .donut_chart.animated-background - .col-xs-12 - .panel.panel-success + .traffic_chart + .animated-background + .row + .col-xs-12.donut_chart_div + .panel.panel-primary .panel-heading %h3 - %i.fa.fa-area-chart.fa-fw - Stacked area chart - %small - Showing top interfaces download traffic over the selected time period + %i.fa.fa-pie-chart.fa-fw + Percent share of interfaces upload traffic to upstream + %p + %small.target .panel-body - .interfaces_traffic_chart - .col-xs-12 - .panel.panel-success + .donut_chart + .animated-background + .row + .col-xs-12.sankey_chart_div + .panel.panel-primary .panel-heading - %h3 - %i.fa.fa-random.fa-fw - Sankey Chart + %h3 + %i.fa.fa-random.fa-fw + Sankey Chart %small - Shows download traffic flows from the left side (AS) to the right (Interfaces). Thickness represents volume of traffic. Put your mouse over a node to show actual values. + Shows download traffic flows from the left side (AS) to the right (ISP routers). Thickness represents volume of traffic. Put your mouse over a node to show actual values. .panel-body .interfaces_sankey_chart + .animated-background .tab-pane#peering_drilldown_2{data-use-width:1} .row - .col-xs-12 - .panel.panel-primary + .col-xs-12.toppers_table_div + .panel.panel-success .panel-heading - %h3 + %h3 %i.fa.fa-table.fa-fw - Top Downstream Interface Receive - %small - Show top interfaces by receive + Top Interfaces receive from downstream + %small Show top 100 interfaces receive from downstream (Receive form downstrem) + %span.badge.badge-info + %p + %small.target .panel-body - .toppers_table.animated-background + .toppers_table %table %thead %tbody - .col-xs-12 - .panel.panel-primary + .animated-background + .row + .col-xs-12.traffic_chart_div + .panel.panel-success .panel-heading %h3 - %i.fa.fa-pie-chart.fa-fw - Percent share of interfaces receive traffic + %i.fa.fa-area-chart.fa-fw + Stacked area chart + %small Showing top interfaces download from downstream traffic over the selected time period + %p + %small.target + .panel-body - .donut_chart.animated-background - .col-xs-12 - .panel.panel-primary + .traffic_chart + .animated-background + .row + .col-xs-12.donut_chart_div + .panel.panel-success .panel-heading %h3 - %i.fa.fa-area-chart.fa-fw - Stacked area chart - %small - Showing top interfaces receive traffic over the selected time period + %i.fa.fa-pie-chart.fa-fw + Percent share of interfaces download traffic from downstream + %p + %small.target .panel-body - .interfaces_traffic_chart - .col-xs-12 - .panel.panel-primary + .donut_chart + .animated-background + .row + .col-xs-12.sankey_chart_div + .panel.panel-success .panel-heading - %h3 - %i.fa.fa-random.fa-fw - Sankey Chart + %h3 + %i.fa.fa-random.fa-fw + Sankey Chart %small - Shows receive traffic flows from the left side (AS) to the right (Interfaces). Thickness represents volume of traffic. Put your mouse over a node to show actual values. + Shows download traffic flows from the left side (AS) to the right (ISP routers). Thickness represents volume of traffic. Put your mouse over a node to show actual values. .panel-body .interfaces_sankey_chart + .animated-background .tab-pane#peering_drilldown_3{data-use-width:1} .row - .col-xs-12 - .panel.panel-primary + .col-xs-12.toppers_table_div + .panel.panel-success .panel-heading - %h3 + %h3 %i.fa.fa-table.fa-fw - Top Downstream Interface Transmit - %small - Show top interfaces by receive + Top Interfaces transmit to downstream + %small Show top 100 interfaces transmit to downstream + %span.badge.badge-info + %p + %small.target .panel-body - .toppers_table.animated-background + .toppers_table %table %thead %tbody - .col-xs-12 - .panel.panel-primary + .animated-background + .row + .col-xs-12.traffic_chart_div + .panel.panel-success .panel-heading %h3 - %i.fa.fa-pie-chart.fa-fw - Percent share of interfaces receive traffic + %i.fa.fa-area-chart.fa-fw + Stacked area chart + %small Showing top interfaces transmit to downstream traffic over the selected time period + %p + %small.target + .panel-body - .donut_chart.animated-background - .col-xs-12 - .panel.panel-primary + .traffic_chart + .animated-background + .row + .col-xs-12.donut_chart_div + .panel.panel-success .panel-heading %h3 - %i.fa.fa-area-chart.fa-fw - Stacked area chart - %small - Showing top interfaces receive traffic over the selected time period + %i.fa.fa-pie-chart.fa-fw + Percent share of interfaces download transmit to downstream + %p + %small.target .panel-body - .interfaces_traffic_chart - .col-xs-12 - .panel.panel-primary + .donut_chart + .animated-background + .row + .col-xs-12.sankey_chart_div + .panel.panel-success .panel-heading - %h3 - %i.fa.fa-random.fa-fw - Sankey Chart + %h3 + %i.fa.fa-random.fa-fw + Sankey Chart %small - Shows receive traffic flows from the left side (AS) to the right (Interfaces). Thickness represents volume of traffic. Put your mouse over a node to show actual values. + Shows download traffic flows from the left side (AS) to the right (ISP routers). Thickness represents volume of traffic. Put your mouse over a node to show actual values. .panel-body .interfaces_sankey_chart + .animated-background .tab-pane#peering_drilldown_agg{data-use-width:1} .row diff --git a/dashboards/peering-analytics/peering_analytics.js b/dashboards/peering-analytics/peering_analytics.js index 912e53c..cbb68b5 100644 --- a/dashboards/peering-analytics/peering_analytics.js +++ b/dashboards/peering-analytics/peering_analytics.js @@ -364,7 +364,7 @@ class ISPOverviewMapping{ for(let i= 0 ; i < cgtoppers.length ; i++){ let topper = cgtoppers[i]; - let dropdown = $("Options"); + let dropdown = $(""); let dropdown_menu = $("
      "); dropdown_menu.append("
    • Drilldown
      • "); dropdown_menu.append("
    • Traffic Chart
      • "); @@ -530,7 +530,9 @@ class ISPOverviewMapping{ to_date:this.form.find("#to_date"+this.rand_id).val(), valid_input:1, surface:"STACKEDAREA", - ref_model:ref_model + ref_model:ref_model, + show_title:false, + legend_position:"bottom" }; await $.ajax({ url:"/trpjs/generate_chart", @@ -680,12 +682,16 @@ class ISPOverviewMapping{ })); break; case 1: + let desc = this.form.find("#routers option:selected").text(); + desc = `${desc} / ${this.form.find("#interfaces option:selected").text()}` + desc = `${desc} / ${tr.data("label")}`; let params = { key: tr.data("full_key").toString().replace(/\\/g,"\\\\"), statids:tr.data("statid"), cgguid:this.cgguid, window_fromts:this.tmint.from.tv_sec, window_tots:this.tmint.to.tv_sec, + description:desc } let url = "/trpjs/generate_chart_lb?"+$.param(params); load_modal(url); diff --git a/dashboards/peering-analytics/pkg.yaml b/dashboards/peering-analytics/pkg.yaml index b9b62f7..057b09c 100644 --- a/dashboards/peering-analytics/pkg.yaml +++ b/dashboards/peering-analytics/pkg.yaml @@ -1,6 +1,6 @@ name: Peering Analytics -version: 1.0.22 +version: 1.0.23 author: trisul diff --git a/dashboards/peering-analytics/template.haml b/dashboards/peering-analytics/template.haml index b63db73..227a720 100644 --- a/dashboards/peering-analytics/template.haml +++ b/dashboards/peering-analytics/template.haml @@ -36,7 +36,7 @@ %li.active %a{href:"#isp_overview_0",data-toggle:"tab",role:"tab"} %i.fa.fa-cloud-upload.fa-fw - %i.fa.fa-upload.fa-fw + %i.fa.fa-download.fa-fw Receive from Upstream %span.volume_0 %li @@ -54,7 +54,7 @@ %li %a{href:"#isp_overview_3",data-toggle:"tab",role:"tab"} %i.fa.fa-cloud-download.fa-fw - %i.fa.fa-download.fa-fw + %i.fa.fa-upload.fa-fw Transmit to Downstream %span.volume_3 .tab-content{style:"padding-top:10px"} @@ -66,7 +66,7 @@ %h3 %i.fa.fa-table.fa-fw Top Upstream AS Receive - %small Show top 100 AS by Receive (Downloading) + %small Show top 100 AS by Receive (Downloading from upstream) %span.badge.badge-info %p %small.target @@ -83,7 +83,7 @@ %h3 %i.fa.fa-area-chart.fa-fw Stacked area chart - %small Showing top AS upload traffic over the selected time period + %small Showing top AS traffic receive from upstream over the selected time period %p %small.target @@ -96,7 +96,7 @@ .panel-heading %h3 %i.fa.fa-pie-chart.fa-fw - Percent share of AS upload traffic + Percent share of AS traffic receive from upstream %p %small.target .panel-body @@ -117,12 +117,12 @@ .tab-pane#isp_overview_1{data-use-width:1} .row .col-xs-12.toppers_table_div - .panel.panel-success + .panel.panel-primary .panel-heading %h3 %i.fa.fa-table.fa-fw Top Upstream Transmit AS - %small Show top 100 Upstream AS by Transmit (Upload) + %small Show top 100 Upstream AS by Transmit (Upload to upstream) %span.badge.badge-info %p %small.target @@ -134,12 +134,12 @@ .animated-background .row .col-xs-12.traffic_chart_div - .panel.panel-success + .panel.panel-primary .panel-heading %h3 %i.fa.fa-area-chart.fa-fw Stacked area chart - %small Showing top AS download traffic over the selected time period + %small Showing top AS upload to upstream traffic over the selected time period %p %small.target @@ -148,11 +148,11 @@ .animated-background .row .col-xs-12.donut_chart_div - .panel.panel-success + .panel.panel-primary .panel-heading %h3 %i.fa.fa-pie-chart.fa-fw - Percent share of AS download traffic + Percent share of AS upload traffic to upstream %p %small.target .panel-body @@ -160,7 +160,7 @@ .animated-background .row .col-xs-12.sankey_chart_div - .panel.panel-success + .panel.panel-primary .panel-heading %h3 %i.fa.fa-random.fa-fw @@ -195,7 +195,7 @@ %h3 %i.fa.fa-area-chart.fa-fw Stacked area chart - %small Showing top AS download traffic over the selected time period + %small Showing top AS download traffic from downstream over the selected time period %p %small.target @@ -208,7 +208,7 @@ .panel-heading %h3 %i.fa.fa-pie-chart.fa-fw - Percent share of AS download traffic + Percent share of AS receive traffic from downstream %p %small.target .panel-body @@ -264,7 +264,7 @@ .panel-heading %h3 %i.fa.fa-pie-chart.fa-fw - Percent share of downstream receive traffic + Percent share of downstream transmit traffic %p %small.target .panel-body