FD3-631 Se actualiza vista de PonPort

src/StatsBundle/Admin/PonPortAdmin.php

@@ -112,9 +112,9 @@ class PonPortAdmin extends BaseAdmin
     {
 
         $actions = parent::configureActionButtons($action, $object);
-        if($action == "show") {
+        /* if($action == "show") {
             $actions['show_in_map'] = array('template' => 'StatsBundle:PonPort:map_button.html.twig');
-        }
+        } */
         
         return $actions;
     }

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

@@ -4,12 +4,12 @@ breadcrumb:
     link_stats_device_list: Listado Dispositivos
     link_device_list: Listado de Dispositivos
     link_device_create: Crear Dispositivo
-    link_onu_list: Listado de ONUs
-    link_pon_port_list: Listado de PonPorts
-    link_cmts_interface_list: Listado de Interfaces
-    link_cablemodem_list: Listado de Cablemodems
-    link_cmts_list: Listado de CMTS
-    link_olt_list: Listado de OLT
+    link_onu_list: Listado ONU
+    link_pon_port_list: Listado PonPort
+    link_cmts_interface_list: Listado Interface
+    link_cablemodem_list: Listado Cablemodems
+    link_cmts_list: Listado CMTS
+    link_olt_list: Listado OLT
 
 filter:
     label_name: Nombre
@@ -250,6 +250,7 @@ list:
     label_tx_power_average: TX Power AVG
     label_psn: Pon Serial Number
     label_sn: Serial Number
+    status_onus: Estado de ONU
 
 info:
     info_onu_1: Información básica de ONU obtenida desde API FTTH
@@ -259,6 +260,7 @@ info:
     info_cablemodem_1: Información básica del CM obtenida desde API Cablemodem
     info_cablemodem_2: Información de configuración y perfíl de CM obtenida desde API Cablemodem
     info_cmts: Información básica del CMTS obtenida desde API Cablemodem
+    info_ponport_status_onu: Cantidad de ONUs online y offline, valores obtenidos desde API de datos históricos y con mayor frecuencia de actualización
 
     
 help:
@@ -329,7 +331,7 @@ rx_tx_title: Tx & Rx
 cablemodems_with_lat_lng: cablemodems geolocalizados
 interface_cms_map_title: RX de cablemodems en la Interface
 consumption_subtitle: Consumo mensual acumulado
-ponport_onu_map_title: RX de onus en el PonPort
+ponport_onu_map_title: RX de onus conectadas al PonPort
 onus_with_lat_lng: onus geolocalizadas
 tx_title: TX Power
 memory_cards_percent: Memory Cards

src/StatsBundle/Resources/views/PonPort/base_show_v2.html.twig

@@ -1,6 +1,6 @@
 {% extends 'SonataAdminBundle:CRUD:base_show.html.twig' %}
 
-{% block show %}
+{% block sonata_page_content %}
     <link rel="stylesheet" type="text/css" href="{{ asset('bundles/stats/css/style.css') }}">
     {% include 'LeafletBundle:Leaflet:resources_only_leaflet.html.twig' %}
     <script src="{{ asset('bundles/stats/highcharts/code/highcharts.js') }}" type="text/javascript" charset="utf-8"></script>

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

@@ -23,7 +23,10 @@
         <br />
        
         <table class="table table-hover table-condensed table-striped table-bordered">
-        <thead><th colspan=2>{{ 'list.label_olt'|trans({}, 'StatsBundle') }}</th></thead>
+        <thead>
+        <th colspan=2>{{ 'list.label_olt'|trans({}, 'StatsBundle') }}
+        <span class="info-title"><i class="fa fa-info-circle" title="{{ 'info.info_olt'|trans({}, 'StatsBundle') }}"></i></span>
+        </th></thead>
         <tbody>
             {% for index, value in olt %}
             {% set label = "list.label_" ~ index %}
@@ -40,6 +43,55 @@
             {% endfor %}    
         </tbody>
         </table>
+        <br />
+        
+        {% 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 %}
+        <table class="table table-hover table-condensed table-striped table-bordered">
+        <thead>
+        <th colspan=1>{{ 'list.status_onus'|trans({}, 'StatsBundle') }}
+        <span class="info-title"><i class="fa fa-info-circle" title="{{ 'info.info_ponport_status_onu'|trans({}, 'StatsBundle') }}"></i></span>
+        </th></thead>
+        <tbody>
+            <tr>
+                <td>
+                    <div class="clearfix">
+                        <div class="clearfix" style="float:left;width: 40%;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>
+                        </div>
+                        <div class="clearfix"  style="float:left;width: 10%;text-align:center">
+                            <span style="font-weight: bold; font-size: 50px; color:#ccc; margin: 0px 20px;">/</span>
+                        </div>
+                        <div class="clearfix"  style="float:left;width: 40%;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>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+        </table>
+        
+
     </div>
 </div>
 

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

@@ -6,8 +6,8 @@
             <th>{{ 'list.label_psn'|trans({},'StatsBundle') }}</th>
             <th>{{ 'list.label_sn'|trans({},'StatsBundle') }}</th>
             <th>{{ 'list.label_port'|trans({},'StatsBundle') }}</th>
-            <th>{{ 'list.label_status'|trans({},'StatsBundle') }}</th>
             <th>{{ 'list.label_index'|trans({},'StatsBundle') }}</th>
+            <th>{{ 'list.label_status'|trans({},'StatsBundle') }}</th>
             <th>{{ 'list.label_rx_power'|trans({},'StatsBundle') }}</th>
             <th>{{ 'list.label_tx_power'|trans({},'StatsBundle') }}</th>
             <th>{{ 'list.label_rx_power_olt'|trans({},'StatsBundle') }}</th>

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

@@ -7,13 +7,6 @@
     <div id="map"></div>
 </div>
 
-<br />
-
-<div class="col-sm-8">
-{% include '@Stats/Stats/picker.html.twig' %}
-</div>
-
-
 <script>
 
 /* --------------------- PROGRAMA PRINCIPAL ------------------------- */

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

@@ -1,95 +1,111 @@
-<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">{{ 'ONUs'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen">({{onus|length}})</span></a>
-                    </li>
-                    <li>
-                        <a href="#tab_3" data-toggle="tab">{{ 'Optical'|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-4">
-                                {% include '@Stats/Stats/Template/ponport_info_1.html.twig' %}
-                            </div>
-                            <div class="col-sm-8">
-                                {% include '@Stats/Stats/Template/ponport_onus_location.html.twig' %}
-                            </div>
-                            
-                        </div>
-                        <br />
-                        <div class="clearfix">
-                            <div class="col-sm-9" style="text-align:center">
-                                <div id="ponport_bandwidth" style="height: 400px;"></div>
-                            </div>
-                            <div class="col-sm-3">
-                                {% include '@Stats/Stats/Template/interface_bandwidth_info.html.twig' %}
-                            </div>
-                        </div>
-                        <br />
-                        
-                        <div class="clearfix">
-                            <div class="col-sm-9" style="text-align:center">
-                                <div id="ponport_tx" style="height: 400px;"></div>
+<section class="content-header">
+    <div class="sticky-wrapper" style="">
+        <nav class="navbar navbar-default" role="navigation" style="width: auto;">
+            <div class="container-fluid">
+                <div class="hidden-xs clearfix" >
+                    <div style="float:left; padding-top:13px; margin: 0px 10px;"><a href="{{url('admin_stats_ponport_list')}}">{{"breadcrumb.link_pon_port_list"|trans({}, 'StatsBundle')}}</a></div>
+                    <div class="menu-slash">/</div>
+                    <div style="float:left; padding-top:13px; margin: 0px 10px;"><span><b>{{ponport.getPonPort|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>
+        </nav>
+    </div>
+</section>
+
+<section class="content">
+    <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">{{ 'ONUs'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen">({{onus|length}})</span></a>
+                        </li>
+                        <li>
+                            <a href="#tab_3" data-toggle="tab">{{ 'Optical'|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-4">
+                                    {% include '@Stats/Stats/Template/ponport_info_1.html.twig' %}
+                                </div>
+                                <div class="col-sm-8">
+                                    {% include '@Stats/Stats/Template/ponport_onus_location.html.twig' %}
+                                </div>
+
                             </div>
-                            <div class="col-sm-3">
-                                {% include '@Stats/Stats/Template/ponport_tx_info.html.twig' %}
+                            <br />
+                            <div class="clearfix">
+                                <div class="col-sm-9" style="text-align:center">
+                                    <div id="ponport_bandwidth" style="height: 400px;"></div>
+                                </div>
+                                <div class="col-sm-3">
+                                    {% include '@Stats/Stats/Template/interface_bandwidth_info.html.twig' %}
+                                </div>
                             </div>
-                        </div>
-                        <br />
-                        
-                        <div class="clearfix">
-                            <div class="col-sm-9" style="text-align:center">
-                                <div id="ponport_onu" style="height: 400px;"></div>
+                            <br />
+
+                            <div class="clearfix">
+                                <div class="col-sm-9" style="text-align:center">
+                                    <div id="ponport_tx" style="height: 400px;"></div>
+                                </div>
+                                <div class="col-sm-3">
+                                    {% include '@Stats/Stats/Template/ponport_tx_info.html.twig' %}
+                                </div>
                             </div>
-                            <div class="col-sm-3">
-                                <div id="onu_count" style="width:75%; margin:0 auto"></div>
+                            <br />
+
+                            <div class="clearfix">
+                                <div class="col-sm-12" style="text-align:center">
+                                    <div id="ponport_onu" style="height: 400px;"></div>
+                                </div>
                             </div>
+                            <br />
+
                         </div>
-                        <br />
-                        
-                    </div>
 
 
-                    {# TAB ONUs #}
-                    <div class="tab-pane" id="tab_2">
-                        {% include '@Stats/Stats/Template/ponport_onus.html.twig' %}
-                    </div>
+                        {# TAB ONUs #}
+                        <div class="tab-pane" id="tab_2">
+                            {% include '@Stats/Stats/Template/ponport_onus.html.twig' %}
+                        </div>
 
-                    {# TAB Optical #}
-                    <div class="tab-pane" id="tab_3">
-                        <div class="clearfix">
-                        
-                            <div class="col-sm-12" style="text-align:center">
-                                <div id="ponport_rx" style="height: 400px; width: 100%"></div>
-                            </div>
-                            <br />
-                            <div class="col-sm-12">
-                                <div id="ponport_voltage" style="height: 400px; width: 100%"></div>
-                            </div>
-                            <br />
-                            <div class="col-sm-12">
-                                <div id="ponport_temperature" style="height: 400px; width: 100%"></div>
+                        {# TAB Optical #}
+                        <div class="tab-pane" id="tab_3">
+                            <div class="clearfix">
+
+                                <div class="col-sm-12" style="text-align:center">
+                                    <div id="ponport_rx" style="height: 400px; width: 100%"></div>
+                                </div>
+                                <br />
+                                <div class="col-sm-12">
+                                    <div id="ponport_voltage" style="height: 400px; width: 100%"></div>
+                                </div>
+                                <br />
+                                <div class="col-sm-12">
+                                    <div id="ponport_temperature" style="height: 400px; width: 100%"></div>
+                                </div>
                             </div>
                         </div>
-                    </div>
 
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</section>
 
 
 <script type="text/javascript">
@@ -104,18 +120,18 @@ if((to - from) <= 21600) {
 
 Highcharts.chart('ponport_bandwidth', {
     chart: {type: 'spline'},
-    title: {text: 'Bandwidth PonPort'},
-    subtitle: {text: 'IN Bandwidth / OUT Bandwidth'},
-    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
+    title: {text: "{{ 'Bandwidth PonPort'|trans({}, 'StatsBundle') }}"},
+    subtitle: {},
+    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}}, spline: {marker: {enabled: true}}},
     series: [{
-        name: "IN Bandwidth",
+        name: "in",
         data: {{series['in_bandwidth']['data']|json_encode}},
         color: '#3f6833'
         },{
-        name: "OUT Bandwidth",
+        name: "out",
         data: {{series['out_bandwidth']['data']|json_encode}},
         color: '#e24d42'
     }]
@@ -124,8 +140,8 @@ Highcharts.chart('ponport_bandwidth', {
 Highcharts.chart('ponport_onu', {
     chart: {type: 'area'},
     title: {text: 'Onus'},
-    subtitle: {text: 'Online / Offline'},
-    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: {min: 0,stackLabels: {enabled: false,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'}}},
     tooltip: {valueSuffix: ' onu',valueDecimals: 0},
     plotOptions: {series: {marker: {enabled: markerEnable}}, area: {stacking: 'normal', dataLabels: {enabled: false, color: '#666666'}}},
@@ -140,33 +156,11 @@ Highcharts.chart('ponport_onu', {
     }]
 });
 
-Highcharts.chart('onu_count', {
-    chart: {type: 'pie'},
-    title: {},
-    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: {{status['online']}},
-            sliced: true,
-            selected: true,
-            color: '#3f6833'
-        }, {
-            name: 'Offline',
-            y: {{status['offline']}},
-            color: '#e24d42'
-        }]
-    }]
-});
-
 Highcharts.chart('ponport_tx', {
     chart: {type: 'area'},
-    title: {text: '{{ 'tx_title'|trans({}, 'StatsBundle') }}'},
+    title: {text: "{{ 'tx_title'|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: {format: '{value} dBm'},min: null},
     tooltip: {valueSuffix: ' dBm',valueDecimals: 2},
     plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
@@ -181,9 +175,9 @@ Highcharts.chart('ponport_tx', {
 
 Highcharts.chart('ponport_voltage', {
     chart: {type: 'area'},
-    title: {text: 'Voltage'},
+    title: {text: "{{ 'Voltage'|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: {format: '{value} V'},min: 0},
     tooltip: {valueSuffix: ' V',valueDecimals: 2},
     plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
@@ -198,9 +192,9 @@ Highcharts.chart('ponport_voltage', {
 
 Highcharts.chart('ponport_temperature', {
     chart: {type: 'area'},
-    title: {text: 'Temperature'},
+    title: {text: "{{ 'Temperature'|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: {format: '{value} ºC'},min: 0},
     tooltip: {valueSuffix: ' ºC',valueDecimals: 2},
     plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
@@ -215,9 +209,9 @@ Highcharts.chart('ponport_temperature', {
 
 Highcharts.chart('ponport_rx', {
     chart: {type: 'spline'},
-    title: {text: 'RX Power'},
+    title: {text: "{{ 'RX Power'|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: {format: '{value} dBm'},min: null},
     tooltip: {valueSuffix: ' dBm',valueDecimals: 2},
     plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},