|
|
@@ -0,0 +1,393 @@
|
|
|
+<div class="box box-primary">
|
|
|
+ <br />
|
|
|
+ <div class="box-body">
|
|
|
+ <div class="col-sm-12">
|
|
|
+ <div class="nav-tabs-custom">
|
|
|
+ <ul class="nav nav-tabs">
|
|
|
+ <li class="active">
|
|
|
+ <a href="#tab_1" data-toggle="tab">{{ 'Description'|trans({}, 'StatsBundle') }}</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#tab_2" data-toggle="tab">{{ 'Radio Frequency'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen">(TX avg {{series['tx_2']['avg']|number_format(2)}} / RX avg {{series['rx_3']['avg']|number_format(2)}})</span></a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#tab_3" data-toggle="tab">{{ 'Codewords'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen"></span></a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#tab_4" data-toggle="tab">{{ 'SLA'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen"></span></a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="tab-content clearfix">
|
|
|
+
|
|
|
+ {# TAB Description #}
|
|
|
+ <div class="tab-pane active" id="tab_1">
|
|
|
+ <div class="clearfix">
|
|
|
+ <div class="col-sm-3">
|
|
|
+ {% include '@Stats/Stats/Template/cablemodem_info_1.html.twig' %}
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-4">
|
|
|
+ {% include '@Stats/Stats/Template/cablemodem_info_2.html.twig' %}
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-5">
|
|
|
+ {% include '@Stats/Stats/Template/cablemodem_location.html.twig' %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <div class="clearfix">
|
|
|
+ <div class="col-sm-9" style="text-align:center">
|
|
|
+ <div id="cablemodem_bandwidth" style="height: 400px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-3">
|
|
|
+ {% include '@Stats/Stats/Template/onu_bandwidth_info.html.twig' %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="col-sm-9" style="text-align:center">
|
|
|
+ <div id="cablemodem_consumption" style="height: 400px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-3">
|
|
|
+ {% include '@Stats/Stats/Template/onu_consumption_info.html.twig' %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+
|
|
|
+ <div class="clearfix">
|
|
|
+ <div class="col-sm-12" style="text-align:center">
|
|
|
+ <div id="cablemodem_status" style="height: 400px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {# TAB Frecuency #}
|
|
|
+ <div class="tab-pane" id="tab_2">
|
|
|
+ <div class="clearfix">
|
|
|
+ <div class="col-sm-12" style="text-align:center">
|
|
|
+ <div id="cablemodem_tx" style="height: 400px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-12" style="text-align:center">
|
|
|
+ <div id="cablemodem_rx" style="height: 400px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-12" style="text-align:center">
|
|
|
+ <div id="cablemodem_signal" style="height: 400px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-12" style="text-align:center">
|
|
|
+ <div id="cablemodem_mx" style="height: 400px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {# TAB Codewords #}
|
|
|
+ <div class="tab-pane" id="tab_3">
|
|
|
+ <div class="clearfix">
|
|
|
+ {% for index in portsMetrics['correcteds'] %}
|
|
|
+ <div class="col-sm-12" style="width: 100%">
|
|
|
+ <div id="cablemodem_codewords_{{index}}" style="width: 100%"></div>
|
|
|
+ </div>
|
|
|
+ {% endfor %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {# TAB SLA #}
|
|
|
+ <div class="tab-pane" id="tab_4">
|
|
|
+ <div class="clearfix">
|
|
|
+
|
|
|
+ <div class="col-sm-9" >
|
|
|
+ <div id="cablemodem_latency_jitter" style="width: 100%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-3">
|
|
|
+ {% include '@Stats/Stats/Template/cablemodem_latency_jitter_info.html.twig' %}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="clearfix">
|
|
|
+ <div class="col-sm-12" >
|
|
|
+ <div id="cablemodem_loss" style="width: 100%"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script type="text/javascript">
|
|
|
+
|
|
|
+var from = {{from}};
|
|
|
+var to = {{to}};
|
|
|
+var markerEnable = false;
|
|
|
+if((to - from) <= 21600) {
|
|
|
+ markerEnable = true;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_bandwidth', {
|
|
|
+ chart: {type: 'spline'},
|
|
|
+ title: {text: '{{'Bandwidth Cablemodem'|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {text: 'IN Bandwidth / OUT Bandwidth'},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {formatter: bandwidthAxisLabel,align: 'left'},min: 0},
|
|
|
+ tooltip: {formatter: bandwidthTooltip},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
|
|
|
+ series: [{
|
|
|
+ name: "IN Bandwidth",
|
|
|
+ data: {{series['in_bandwidth']['data']|json_encode}},
|
|
|
+ color: '#3f6833'
|
|
|
+ },{
|
|
|
+ name: "OUT Bandwidth",
|
|
|
+ data: {{series['out_bandwidth']['data']|json_encode}},
|
|
|
+ color: '#e24d42'
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_consumption', {
|
|
|
+ chart: {type: 'area'},
|
|
|
+ title: {text: '{{'Consumption Cablemodem'|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {text: 'IN Consumption / OUT Consumption'},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {formatter: consumptionAxisLabel,align: 'left'},min: 0},
|
|
|
+ tooltip: {formatter: consumptionTooltip},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
|
|
|
+ series: [{
|
|
|
+ name: "IN Consumption",
|
|
|
+ data: {{series['in_consumption']['data']|json_encode}},
|
|
|
+ color: '#3f6833'
|
|
|
+ },{
|
|
|
+ name: "OUT Consumption",
|
|
|
+ data: {{series['out_consumption']['data']|json_encode}},
|
|
|
+ color: '#e24d42'
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_status', {
|
|
|
+ chart: {type: 'area'},
|
|
|
+ title: {text: '{{'Status'|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {text: 'Online / Offline'},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: { categories: ['Offline', 'Online'], min: 0,stackLabels: {enabled: true,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'}}},
|
|
|
+ tooltip: {formatter: onuStatusTooltip},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, column: {stacking: 'normal',dataLabels: {enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'}}},
|
|
|
+ legend: {enabled: false},
|
|
|
+ series: [{
|
|
|
+ name: 'Status',
|
|
|
+ step: 'right',
|
|
|
+ data: {{series['status']['data']|json_encode}},
|
|
|
+ color: '#3f6833'
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_latency_jitter', {
|
|
|
+ chart: {type: 'spline'},
|
|
|
+ title: {text: '{{''|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {text: 'Latency / Jitter'},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {align: 'left'}},
|
|
|
+ tooltip: {valueSuffix: ' ms',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
|
|
|
+ series: [{
|
|
|
+ name: "Latency",
|
|
|
+ data: {{series['latency']['data']|json_encode}}
|
|
|
+ },{
|
|
|
+ name: "Jitter",
|
|
|
+ data: {{series['jitter']['data']|json_encode}}
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_loss', {
|
|
|
+ chart: {type: 'area'},
|
|
|
+ title: {text: '{{ ''|trans({}, 'StatsBundle') }}'},
|
|
|
+ subtitle: {text: 'Packet Loss'},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {format: '{value} %'}, min: 0},
|
|
|
+ tooltip: {valueSuffix: ' %',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
|
|
|
+ legend: {enabled: false},
|
|
|
+ series: [{
|
|
|
+ name: "Packet Loss",
|
|
|
+ data: {{series['loss']['data']|json_encode}},
|
|
|
+ color: '#1299da',
|
|
|
+ fillOpacity: 0.2
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+{% for index in portsMetrics['correcteds'] %}
|
|
|
+Highcharts.chart('cablemodem_codewords_{{index}}', {
|
|
|
+ chart: {type: 'spline'},
|
|
|
+ title: {text: 'Port {{index}}'},
|
|
|
+ subtitle: {text: 'Codewords'},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {format: '{value}'},min: 0},
|
|
|
+ tooltip: {valueSuffix: ' codewords',valueDecimals: 0},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}, dataLabels: {enabled: false, color: '#666666'}}},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Correcteds",
|
|
|
+ data: {{series['correcteds_'~index]['data']|json_encode}},
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Unerroreds",
|
|
|
+ data: {{series['unerroreds_'~index]['data']|json_encode}},
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Uncorrectables",
|
|
|
+ data: {{series['uncorrectables_'~index]['data']|json_encode}},
|
|
|
+ }
|
|
|
+ ]
|
|
|
+});
|
|
|
+{% endfor %}
|
|
|
+
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_tx', {
|
|
|
+ chart: {type: 'spline'},
|
|
|
+ title: {text: '{{'TX Power'|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {align: 'left'}},
|
|
|
+ tooltip: {valueSuffix: ' dBmV',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: false}}},
|
|
|
+ series: [
|
|
|
+ {% for index in portsMetrics['txPower'] %}
|
|
|
+ {
|
|
|
+ name: "Port {{index}}",
|
|
|
+ data: {{series['tx_' ~ index]['data']|json_encode}}
|
|
|
+ },
|
|
|
+ {% endfor %}
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_rx', {
|
|
|
+ chart: {type: 'spline'},
|
|
|
+ title: {text: '{{'RX Power'|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {align: 'left'}},
|
|
|
+ tooltip: {valueSuffix: ' dBmV',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: false}}},
|
|
|
+ series: [
|
|
|
+ {% for index in portsMetrics['rxPower'] %}
|
|
|
+ {
|
|
|
+ name: "Port {{index}}",
|
|
|
+ data: {{series['rx_' ~ index]['data']|json_encode}}
|
|
|
+ },
|
|
|
+ {% endfor %}
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_signal', {
|
|
|
+ chart: {type: 'spline'},
|
|
|
+ title: {text: '{{'SNR'|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {align: 'left'}},
|
|
|
+ tooltip: {valueSuffix: ' dB',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: false}}},
|
|
|
+ series: [
|
|
|
+ {% for index in portsMetrics['signal'] %}
|
|
|
+ {
|
|
|
+ name: "Port {{index}}",
|
|
|
+ data: {{series['signal_' ~ index]['data']|json_encode}}
|
|
|
+ },
|
|
|
+ {% endfor %}
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('cablemodem_mx', {
|
|
|
+ chart: {type: 'spline'},
|
|
|
+ title: {text: '{{'Microreflection'|trans({}, 'StatsBundle')}}'},
|
|
|
+ subtitle: {},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {align: 'left'}},
|
|
|
+ tooltip: {valueSuffix: ' dBc',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: false}}},
|
|
|
+ series: [
|
|
|
+ {% for index in portsMetrics['microreflection'] %}
|
|
|
+ {
|
|
|
+ name: "Port {{index}}",
|
|
|
+ data: {{series['microreflection_' ~ index]['data']|json_encode}}
|
|
|
+ },
|
|
|
+ {% endfor %}
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+{#
|
|
|
+/*
|
|
|
+Highcharts.chart('onu_rf', {
|
|
|
+ chart: {type: 'area'},
|
|
|
+ title: {text: '{{ 'rx_tx_title'|trans({}, 'StatsBundle') }}'},
|
|
|
+ subtitle: {},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {format: '{value} dB'},min: null},
|
|
|
+ tooltip: {valueSuffix: ' dB',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
|
|
|
+ series: [{
|
|
|
+ name: "TX Power",
|
|
|
+ data: {{series['tx']['data']|json_encode}},
|
|
|
+ color: '#6ed0e0',
|
|
|
+ fillOpacity: 0.2
|
|
|
+ },{
|
|
|
+ name: "RX Power",
|
|
|
+ data: {{series['rx']['data']|json_encode}},
|
|
|
+ color: '#4841AD',
|
|
|
+ fillOpacity: 0.2
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('onu_voltage', {
|
|
|
+ chart: {type: 'area'},
|
|
|
+ title: {text: 'Voltage'},
|
|
|
+ subtitle: {},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {format: '{value} V'},min: 0},
|
|
|
+ tooltip: {valueSuffix: ' V',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
|
|
|
+ legend: {enabled: false},
|
|
|
+ series: [{
|
|
|
+ name: "Voltage",
|
|
|
+ data: {{series['voltage']['data']|json_encode}},
|
|
|
+ color: '#4841AD',
|
|
|
+ fillOpacity: 0.2
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('onu_temperature', {
|
|
|
+ chart: {type: 'area'},
|
|
|
+ title: {text: 'Temperature'},
|
|
|
+ subtitle: {},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: {labels: {format: '{value} ºC'},min: 0},
|
|
|
+ tooltip: {valueSuffix: ' ºC',valueDecimals: 2},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
|
|
|
+ legend: {enabled: false},
|
|
|
+ series: [{
|
|
|
+ name: "Temperature",
|
|
|
+ data: {{series['temperature']['data']|json_encode}},
|
|
|
+ color: '#B75426',
|
|
|
+ fillOpacity: 0.2
|
|
|
+ }]
|
|
|
+});
|
|
|
+
|
|
|
+Highcharts.chart('onu_status', {
|
|
|
+ chart: {type: 'area'},
|
|
|
+ title: {text: 'Estatus'},
|
|
|
+ subtitle: {text: 'Online / Offline'},
|
|
|
+ xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
|
|
|
+ yAxis: { categories: ['Offline', 'Online'], min: 0,stackLabels: {enabled: true,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'}}},
|
|
|
+ tooltip: {formatter: onuStatusTooltip},
|
|
|
+ plotOptions: {series: {marker: {enabled: markerEnable}}, column: {stacking: 'normal',dataLabels: {enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'}}},
|
|
|
+ legend: {enabled: false},
|
|
|
+ series: [{
|
|
|
+ name: 'Status',
|
|
|
+ step: 'right',
|
|
|
+ data: {{series['status']['data']|json_encode}},
|
|
|
+ color: '#3f6833'
|
|
|
+ }]
|
|
|
+});
|
|
|
+*/
|
|
|
+#}
|
|
|
+
|
|
|
+</script>
|
Maximiliano Schvindt