FD3-631 Se actualiza vista OLT

src/StatsBundle/Resources/translations/StatsBundle.es.yml

@@ -252,6 +252,7 @@ list:
     label_sn: Serial Number
     status_onus: Estado de ONU
     label_status_cm: Estado de CM
+    label_status_onu: Estado de ONU
 
 info:
     info_onu_1: Información básica de ONU obtenida desde API FTTH
@@ -358,4 +359,6 @@ Interface Utilization: Usage
 interface_cms_map_tx_title: TX de cablemodems conectados a la Interface
 interface_cms_map_rx_title: RX de cablemodems conectados a la Interface
 Bandwidth CMTS: Bandwidth CMTS
-Consumption CMTS: Consumo CMTS
+Consumption CMTS: Consumo CMTS
+Consumption OLT: Consumo OLT
+Bandwidth OLT: Bandwidth OLT

src/StatsBundle/Resources/views/Stats/Template/interface_bandwidth_info.html.twig

@@ -8,7 +8,7 @@
     <tr>
         <td style="white-space: nowrap;">{{ 'list.label_bandwidth_avg'|trans({}, 'StatsBundle') }}</td>
         <td>
-            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['in_bandwidth']['avg']} only %}
+            <b>{% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['in_bandwidth']['avg']} only %}</b>
         </td>
     </tr>
     <tr>
@@ -30,7 +30,7 @@
     <tr>
         <td style="white-space: nowrap;">{{ 'list.label_bandwidth_avg'|trans({}, 'StatsBundle') }}</td>
         <td>
-            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['out_bandwidth']['avg']} only %}
+            <b>{% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['out_bandwidth']['avg']} only %}</b>
         </td>
     </tr>
     <tr>

src/StatsBundle/Resources/views/Stats/Template/olt_status_onu_info.html.twig

@@ -0,0 +1,80 @@
+{% set total = series['on']['last'] + series['off']['last'] %}
+{% if total > 0 %}
+    {% set onPercent = ((series['on']['last'] / total) * 100)|number_format(1, '.', '') %}
+    {% set offPercent = ((series['off']['last'] / total) * 100)|number_format(1, '.', '') %}
+{% else %}
+    {% set onPercent = 0.0 %}
+    {% set offPercent = 0.0 %}
+{% endif %}
+
+<div class="box box-widget">
+    <div class="box-body">
+        <table class="table table-hover table-condensed table-striped table-bordered">
+        <thead><th>{{ 'list.label_status_onu'|trans({}, 'StatsBundle') }}</th></thead>
+        
+        <tbody>
+            <tbody>
+                {% if series['on']['count'] > 0 %}
+                <tr>
+                    <td style="text-align:center">
+                        <div>
+                            <span style="font-weight: bold; font-size: 50px; color: #3f6833">
+                                {{series['on']['last']|number_format(0,'.','')}}
+                            </span>
+                        </div>
+                        <div>
+                            <span class="text_column_stats">online ({{onPercent}} %)</span>
+                        </div>
+                    </td>
+                </tr>
+                {% else %}
+                <tr>
+                    <td style="text-align:center">
+                        <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+                        <br />
+                        <span class="text_column_stats">online</span>
+                    </td>
+                </tr>
+                {% endif %}
+
+                {% if series['off']['count'] > 0 %}
+                <tr>
+                    <td style="text-align:center">
+                        <div>
+                            <span style="font-weight: bold; font-size: 50px; color: #e24d42">
+                                {{series['off']['last']|number_format(0,'.','')}}
+                            </span>
+                        </div>
+                        <div>
+                            <span class="text_column_stats">offline ({{offPercent}} %)</span>
+                        </div>
+                    </td>
+                </tr>
+                {% else %}
+                <tr>
+                    <td style="text-align:center">
+                        <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+                        <br />
+                        <span class="text_column_stats">offline</span>
+                    </td>
+                </tr>
+                {% endif %}
+                
+                {% if total > 0 %}
+                <tr>
+                    <td style="text-align:center">
+                        <div>
+                            <span style="font-weight: bold; font-size: 50px; color: #666666">
+                                {{total|number_format(0,'.','')}}
+                            </span>
+                        </div>
+                        <div>
+                            <span class="text_column_stats">total</span>
+                        </div>
+                    </td>
+                </tr>
+                {% endif %}
+            </tbody>
+        </table>
+    </div>
+</div>

src/StatsBundle/Resources/views/Stats/Template/onu_bandwidth_info.html.twig

@@ -11,7 +11,7 @@
     <tr>
         <td style="white-space: nowrap;">{{ 'list.label_bandwidth_avg'|trans({}, 'StatsBundle') }}</td>
         <td>
-            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['in_bandwidth']['avg']} only %}
+            <b>{% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['in_bandwidth']['avg']} only %}</b>
         </td>
         <td>
         {% if remoteData['profile_download'] is not null and remoteData['profile_download'] > 0 and series['in_bandwidth']['avg'] > 0 %}
@@ -50,7 +50,7 @@
     <tr>
         <td style="white-space: nowrap;">{{ 'list.label_bandwidth_avg'|trans({}, 'StatsBundle') }}</td>
         <td>
-            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['out_bandwidth']['avg']} only %}
+            <b>{% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['out_bandwidth']['avg']} only %}</b>
         </td>
         <td>
         {% if remoteData['profile_upload'] is not null and remoteData['profile_upload'] > 0 and series['out_bandwidth']['avg'] > 0 %}

src/StatsBundle/Resources/views/Stats/show_cmts.html.twig

@@ -56,13 +56,6 @@ table.dataTable thead tr th, table.dataTable tbody tr td {
     {% set cerAvg = (cerAvg / (cers|length))|number_format(6, '.', '') %}
 {% endif %}
 
-{% set cmOn = series['on']['last'] %}
-{% set cmOff = series['off']['last'] %}
-{% set cmTotal = cmOn + cmOff %}
-{% set cmOnPercent = 0 %}
-{% if cmTotal > 0 %}
-    {% set cmOnPercent = ((cmOn / cmTotal) * 100)|number_format(2,'.','') %}
-{% endif %}
 <section class="content">
     <div class="box box-primary">
         <br />
@@ -208,7 +201,8 @@ Highcharts.chart('cmts_bandwidth', {
     }]
 });
 
-{# Highcharts.chart('cm_count', {
+{# /*
+Highcharts.chart('cm_count', {
     chart: {type: 'pie'},
     title: {text: "{{cmOnPercent}} % online"},
     subtitle: {text: "{{cmTotal}} cablemodems"},
@@ -229,7 +223,7 @@ Highcharts.chart('cmts_bandwidth', {
             color: '#D75C62'
         }]
     }]
-}); #}
+}); */ #}
 
 Highcharts.chart('cmts_cm', {
     chart: {type: 'area'},

src/StatsBundle/Resources/views/Stats/show_olt.html.twig

@@ -36,11 +36,11 @@ table.dataTable thead tr th, table.dataTable tbody tr td {
         <nav class="navbar navbar-default" role="navigation" style="width: auto;">
             <div class="container-fluid">
                 <div class="hidden-xs">
-                    <ol class="nav navbar-top-links breadcrumb">
-                        <li><a href="/app_dev.php/admin/dashboard"><i class="fa fa-home"></i></a></li>
-                        <li><a href="{{url('admin_stats_olt_list')}}">{{"breadcrumb.link_olt_list"|trans({}, 'StatsBundle')}}</a></li>
-                        <li class="active"><span>{{data['name']}}</span></li>
-                    </ol>
+                    <div style="float:left; padding-top:13px; margin: 0px 10px;"><a href="{{url('admin_stats_olt_list')}}">{{"breadcrumb.link_olt_list"|trans({}, 'StatsBundle')}}</a></div>
+                    <div class="menu-slash">/</div>
+                    <div style="float:left; padding-top:13px; margin: 0px 10px;"><span><b>{{data.name|upper}}</b></span></div>
+                    <div class="menu-slash">/</div>
+                    <div style="float:left; padding-top:6px; margin: 0px 10px;">{% include '@Stats/Stats/picker.html.twig' %}</div>
                 </div>
                 <div class="navbar-collapse"></div>
             </div>
@@ -75,11 +75,9 @@ table.dataTable thead tr th, table.dataTable tbody tr td {
                                     {% include '@Stats/Stats/Template/olt_info_1.html.twig' %}
                                 </div>
                                 <div class="col-sm-3">
-                                    <div id="onu_count" style="width:75%; margin:0 auto"></div>
+                                    {% include '@Stats/Stats/Template/olt_status_onu_info.html.twig' %}
                                 </div>
                                 <div class="col-sm-6">
-                                    {% include '@Stats/Stats/picker.html.twig' %}
-                                    <br />
                                     <div id="onu_consumption"></div>
                                 </div>
                             </div>
@@ -120,46 +118,22 @@ if((to - from) <= 21600) {
     markerEnable = true;
 }
 
-Highcharts.chart('onu_count', {
-    chart: {type: 'pie'},
-    title: {text: "{{onuOnPercent}} % online"},
-    subtitle: {text: "{{onuTotal}} onus"},
-    tooltip: {pointFormat: '{series.name}: <b>{point.y:.0f}</b>({point.percentage:.1f}%)'},
-    plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.y:.0f} ({point.percentage:.1f} %)',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}},
-    series: [{
-        name: 'Onus',
-        colorByPoint: true,
-        data: [{
-            name: 'Online',
-            y: {{onuOn}},
-            sliced: true,
-            selected: true,
-            color: '#4DD351'
-        }, {
-            name: 'Offline',
-            y: {{onuOff}},
-            color: '#D75C62'
-        }]
-    }]
-});
-
-
 Highcharts.chart('onu_consumption', {
     chart: {type: 'spline'},
     title: {text: '{{'Consumption OLT'|trans({}, 'StatsBundle')}}'},
-    subtitle: {text: '{{'consumption_subtitle'|trans({},'StatsBundle')}}'},
-    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
+    subtitle: {},
+    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: null}},
     yAxis: {labels: {formatter: consumptionAxisLabel,align: 'left'},min: 0},
     tooltip: {formatter: consumptionTooltip},
     plotOptions: {series: {marker: {enabled: markerEnable}, dataLabels: {enabled: false, color: '#666666', formatter: bandwidthDataLabel}}},
     series: [{
-        name: "OUT Consumption",
-        data: {{series['out_consumption']['data']|json_encode}},
-        color: '#e24d42'
-        },{
-        name: "IN Consumption",
+        name: "in",
         data: {{series['in_consumption']['data']|json_encode}},
         color: '#3f6833'
+        },{
+        name: "out",
+        data: {{series['out_consumption']['data']|json_encode}},
+        color: '#e24d42'
     }]
 });
 
@@ -167,26 +141,26 @@ Highcharts.chart('olt_bandwidth', {
     chart: {type: 'spline'},
     title: {text: '{{'Bandwidth OLT'|trans({}, 'StatsBundle')}}'},
     subtitle: {},
-    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
+    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: null}},
     yAxis: {labels: {formatter: bandwidthAxisLabel,align: 'left'},min: 0},
     tooltip: {formatter: bandwidthTooltip},
     plotOptions: {series: {marker: {enabled: markerEnable}, dataLabels: {enabled: false, color: '#666666', formatter: bandwidthDataLabel}}},
     series: [{
-        name: "OUT Bandwidth",
+        name: "in",
+        data: {{series['in_bandwidth']['data']|json_encode}},
+        color: '#3f6833'    
+        },{
+        name: "out",
         data: {{series['out_bandwidth']['data']|json_encode}},
         color: '#e24d42'
-        },{
-        name: "IN Bandwidth",
-        data: {{series['in_bandwidth']['data']|json_encode}},
-        color: '#3f6833'
     }]
 });
 
 Highcharts.chart('olt_cm', {
     chart: {type: 'area'},
-    title: {text: 'Onus'},
+    title: {text: '{{'Onus'|trans({}, 'StatsBundle')}}'},
     subtitle: {text: 'Online / Offline'},
-    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
+    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: null}},
     yAxis: {min: 0,stackLabels: {enabled: false,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'}}},
     tooltip: {valueSuffix: ' onus',valueDecimals: 0},
     plotOptions: {series: {marker: {enabled: false}}, area: {stacking: 'normal', dataLabels: {enabled: false, color: '#666666'}}},
@@ -255,69 +229,6 @@ Highcharts.chart('olt_signals', {
 });
 
 
-/*
-{#
-
-
-
-Highcharts.chart('interface_utilization', {
-    chart: {type: 'spline'},
-    title: {text: '{{'Interfaces Utilization'|trans({}, 'StatsBundle')}}'},
-    subtitle: {},
-    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
-    yAxis: {labels: {align: 'left'},min: 0, max: 100},
-    tooltip: {valueSuffix: ' %',valueDecimals: 2},
-    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: false}}},
-    series: [
-        {% for index in utilizations %}
-        {
-            name: "Interface {{index}}",
-            data: {{series['utilization_' ~ index]['data']|json_encode}}
-        },
-        {% endfor %}
-    ]
-});
-
-Highcharts.chart('interface_snr', {
-    chart: {type: 'spline'},
-    title: {text: '{{'Interfaces 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 snrs %}
-        {
-            name: "Interface {{index}}",
-            data: {{series['signal_' ~ index]['data']|json_encode}}
-        },
-        {% endfor %}
-    ]
-});
-
-Highcharts.chart('interface_cer', {
-    chart: {type: 'spline'},
-    title: {text: '{{'Interfaces CER'|trans({}, 'StatsBundle')}}'},
-    subtitle: {},
-    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
-    yAxis: {labels: {align: 'left'}},
-    tooltip: {valueSuffix: ' %',valueDecimals: 6},
-    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: false}}},
-    series: [
-        {% for index in cers %}
-        {
-            name: "Interface {{index}}",
-            data: {{series['cer_' ~ index]['data']|json_encode}}
-        },
-        {% endfor %}
-    ]
-});
-
-
-#}
-*/
-
 </script>
 
 {% endblock %}