FD3-634 se añaden elementos al STAR de CM.

src/StatsBundle/Controller/StatsController.php

@@ -1360,7 +1360,11 @@ class StatsController extends Controller
         $prefix = "d_{$cmtsDeviceId}_s_{$serverId}";
         $_mac = $mac = strtolower($cablemodem->getMac());
         
-        $star = $this->getConsumptionDevice($serverId,$cmtsDeviceId,1,$mac,null,null);
+        $fs = strtotime('-30 days');
+        $ts = strtotime('now');
+        $fromStar = date("Y-m-d",$fs);
+        $toStar = date("Y-m-d",$ts);
+        $star = $this->getConsumptionDevice($serverId,$cmtsDeviceId,1,$mac,$fromStar,$toStar);
 
         // Get Cablemodem stats from Redis
         $key = "cm_stats_{$prefix}";
@@ -1425,7 +1429,13 @@ class StatsController extends Controller
                 'from' => $from,
                 'to' => $to,
                 'portsMetrics' => $portsMetrics,
-                'star' => $star
+                'star' => $star,
+                'fs' => $fs,
+                'ts' => $ts,
+                'server' => $serverId,
+                'fatherDevice' => $cmtsDeviceId,
+                'fatherDeviceType' => 1,
+                'device' => $mac
             ));
         }
 
@@ -1567,7 +1577,7 @@ class StatsController extends Controller
             ));
         }
         
-        return new JsonResponse(array('series' => $series,));
+        return new JsonResponse(array('series' => $series));
     }
 
     private function getPonportOnus($onus) {
@@ -1674,41 +1684,6 @@ class StatsController extends Controller
         $this->getSeries($series, $errors, $targets, $search, "olt: {$prefix}");
         $end = microtime(true);
         
-        /*
-        // Get Interface stats from Redis
-        $key_ifs_stats = "cmts_stats_ifs_{$prefix}";
-        $interfacesStats = $redis->get($key_ifs_stats);
-
-        // Get interfaces with snr, cer and utilization
-        foreach($interfacesStats as $index => $value) {
-            if(isset($value['utilization'])) {
-                foreach($value['utilization'] as $i => $value) {
-                    if($value != 0) {
-                        $utilizationSum += $value;
-                        $utilizationCount++;
-                        $utilizations[] = "{$index}.{$i}";
-                        $targets["utilization_{$index}.{$i}"] = array("target" => "{$prefix}_if_utilization_{$index}.{$i}");
-                    }
-                }
-            }
-            
-            if(isset($value['signal']) && $value['signal'] > 0) {
-                $snrs[] = $index;
-                $snrSum += $value['signal'];
-                $snrCount++;
-                $targets["signal_{$index}"] = array("target" => "{$prefix}_if_signal_{$index}");
-            }
-        }
-
-        if($cers = $this->getInterfaceWithCer($cmtsDeviceId, $serverId)) {
-            foreach($cers as $index) {
-                $targets["cer_{$index}"] = array("target" => "{$prefix}_if_cer_{$index}");
-            }
-        }
-
-        
-        */
-
         $adminPool = $this->get('sonata.admin.pool');
 
         $filter = array('deviceId' => $oltDeviceId, 'deviceServer' => $serverId, 'deviceType' => 'FTTHBundle\Entity\OLT');
@@ -1717,21 +1692,6 @@ class StatsController extends Controller
 
         $signals = $this->onuSignal($oltDeviceId, $serverId);
 
-        /*
-        $key = "cmts_desc_{$prefix}";
-        $dataCached = $redis->get($key);
-
-        $_desc = array();
-        if(isset($dataCached[0])) {
-            $desc = explode(",", $dataCached[0]);
-            foreach($desc as $d) {
-                $_desc[] = ucfirst(trim($d));
-            }
-        }
-
-        
-        */
-
         $end = microtime(true);
         $time = $end - $init;
 
@@ -1828,7 +1788,7 @@ class StatsController extends Controller
 
 
         $categories = $series = $serie_accumulated = $serie_total = $serie_total_x_day = $serie_in = $serie_out = array();
-        $total = $total_in = $total_out = $accumulated = $daily_prom = $projection = $count_days = 0;
+        $total = $total_in = $total_out = $accumulated = $projection = $count_days = 0;
         
         $days = $this->getDaysWeek();
         
@@ -1843,7 +1803,7 @@ class StatsController extends Controller
             $d = $date->format('Y-m-d');
             $label = $date->format('d/m');
             $categories[$d] = "'$label'";
-            $serie_accumulated[$d] = $serie_total[$d] = $serie_in[$d] = $serie_out[$d] = null;
+            $serie_accumulated[$d] = $serie_total[$d] = $serie_in[$d] = $serie_out[$d] = 00.00;
         }
         
         foreach($consumed as $data) {
@@ -1857,9 +1817,9 @@ class StatsController extends Controller
             
             $_d = $data['date']->format('N');
 
-            $serie_total_x_day[$_d]['total'] += ($data['in'] + $data['out']);
-            $serie_total_x_day[$_d]['in'] += $data['in'];
-            $serie_total_x_day[$_d]['out'] += $data['out'];
+            $serie_total_x_day[$_d]['total'] += number_format(($data['in'] + $data['out']),'3','.','');
+            $serie_total_x_day[$_d]['in'] += number_format($data['in'],'3','.','');
+            $serie_total_x_day[$_d]['out'] += number_format($data['out'],'3','.','');
             $total += ($data['in'] + $data['out']);
         }
 
@@ -1869,19 +1829,8 @@ class StatsController extends Controller
             }    
         }
 
-        /* $dPer = $dIn = $dOut = $dTot = array(1=>0,2=>0,3=>0,4=>0,5=>0,6=>0,7=>0);
-        foreach($serie_total_x_day as $d => &$data) {
-            
-            $data['percent'] 
-            $dIn[$d] = $data['in'];
-            $dOut[$d] = $data['out'];
-            $dTot[$d] = $data['total'];
-            if($total > 0) {
-                $dPer[$d] = number_format(($data['total'] / $total) * 100, 2, '.','');
-            }
-        } */
 
-        $series = array('in' => $serie_in,'out' => $serie_out,'total' => $serie_total,'categories' => $categories, 'accumulated' => $serie_accumulated, 'xday' => $serie_total_x_day);
+        $series = array('in' => $serie_in,'out' => $serie_out,'total' => $serie_total,'categories' => $categories, 'accumulated' => $serie_accumulated, 'xday' => $serie_total_x_day, 'accumulated_last' => $accumulated);
         
         return $series;
 
@@ -1894,4 +1843,26 @@ class StatsController extends Controller
         return $days;
     }
 
+     /**
+     * @Route("/admin/stats/star/getjson", name="star_get_json")
+     *
+     * @return string
+     */
+    public function starGetJson(Request $request)
+    {
+        
+        ($request->get('from'))? $from = date("Y-m-d", $request->get('from')) : $from = date("Y-m-d",strtotime("-12 hour"));
+        ($request->get('to'))? $to = date("Y-m-d", $request->get('to')) : $to = date("Y-m-d",strtotime("now"));
+        
+        $server = $request->get('server');
+        $fatherDevice = $request->get('fatherDevice');
+        $fatherDeviceType = $request->get('fatherDeviceType');
+        $device = $request->get('device');
+
+
+        $series = $this->getConsumptionDevice($server,$fatherDevice,$fatherDeviceType,$device,$from,$to);
+
+        return new JsonResponse($series);
+    }
+
 }

src/StatsBundle/Resources/public/css/style.css

@@ -87,4 +87,24 @@
     font-size: 22px;
     color: #3c8dbc;
     opacity: 0.6;
+}
+
+#sla-datetimepicker6 input, #sla-datetimepicker6 span.calendar-icon {
+    border-color: #605ca8!important;
+}
+
+#datetimepicker6 input, #datetimepicker6 span.calendar-icon {
+    border-color: #3d9970!important;
+}
+
+.profile-limit-input {
+    width: 20%
+}
+
+.red-value {
+    color:#e24d42;
+}
+
+.green-value {
+    color:#3f6833;
 }

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

@@ -253,6 +253,8 @@ list:
     status_onus: Estado de ONU
     label_status_cm: Estado de CM
     label_status_onu: Estado de ONU
+    label_accumulated_limit: Acumulado / Límite (GB)
+    accumulated: Acumulado
 
 info:
     info_onu_1: Información básica de ONU obtenida desde API FTTH
@@ -270,6 +272,8 @@ info:
     info_olt_1_cpu: Porcentaje de uso de los CPU de la OLT
     info_olt_1_memory: Porcentaje de uso de memoria de la OLT
     show_if_usage: Mostrar Interfaces con porcentaje de uso promedio mayor a 50%
+    limit_profile_value: Valor obtenido desde el perfil del dispositivo
+    limit_default_value: Valor definido por defecto como referencia
 
     
 help:
@@ -336,6 +340,7 @@ link_action_edit_location: Modificar/Añadir ubicación
 consumption_info_evolution: Evolución del consumo mensual y porcentaje de utilización. El valor se reinicia con el comienzo de un nuevo mes.
 nas_data_origen: Salvo OLT Huawei, estos valores se obtienen desde el NAS, consultar sobre la ejecución de los comandos de estadísticas sobre el mismo.
 picker_find: Buscar
+picker_find_star: Buscar STAR
 rx_tx_title: Tx & Rx
 cablemodems_with_lat_lng: cablemodems geolocalizados
 interface_cms_map_title: RX de cablemodems en la Interface
@@ -357,6 +362,7 @@ Bandwidth Cablemodem: Bandwidth CM
 Consumption Cablemodem: Consumo CM
 Optical: Mediciones Ópticas
 limit: límite
+Limit: Límite
 Radio Frequency: Mediciones RadioFrecuencia
 Interface Utilization: Usage
 interface_cms_map_tx_title: TX de cablemodems conectados a la Interface
@@ -387,4 +393,6 @@ Wed: Miércoles
 Thu: Jueves
 Fri: Viernes
 Sat: Sábado
-Sun: Domingo
+Sun: Domingo
+Usage: Uso
+Diff: Diferencia

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

@@ -0,0 +1,129 @@
+
+{% if remoteData['profile_limit'] is defined and remoteData['profile_limit'] is not null and remoteData['profile_limit'] > 0 %}
+    {% set profile_limit = true %}
+    {% set limit = remoteData['profile_limit'] %}
+{% else %}
+    {% set profile_limit = false %}
+    {% set limit = 800 %}
+{% endif %}
+
+{% set total = star['accumulated_last']|number_format(3,'.','') %}
+{% set usage = (total / limit * 100)|number_format(2,'.','') %}
+{% set diff = (limit - total)|number_format(3,'.','') %}
+
+{% set classDiff = "red-value" %}
+{% if diff > 0 %}
+    {% set classDiff = "green-value" %}
+{% endif %}
+
+
+<table class="table table-condensed table-bordered" style="margin-top:38px; border-top:2px solid #3c8dbc;">
+    <thead>
+        <th>{{ 'list.accumulated'|trans({}, 'StatsBundle') }}</th>
+    </thead>
+    <tbody>
+    <tr>
+        <td>
+            <span style="color:#7a6563">{{ 'list.label_accumulated_limit'|trans({}, 'StatsBundle') }} </span>
+            <input id="profile-limit-input" type="number" min="1" class="profile-limit-input" value="{{limit|number_format(0,'.','')}}" />
+            {% if profile_limit %}
+                <span class="info-title"><i class="fa fa-info-circle" title="{{ 'info.limit_profile_value'|trans({}, 'StatsBundle') }}"></i></span>
+            {% else %}
+                <span class="info-title"><i class="fa fa-info-circle" title="{{ 'info.limit_default_value'|trans({}, 'StatsBundle') }}"></i></span>
+            {% endif %}
+            <br />
+            <div class="clearfix">
+                <div class="clearfix" style="float:left">
+                    <div style="float:left; padding-top:10px">
+                    <span style="font-weight: bold; font-size: 40px">
+                        <span id="device-total-accumulated-span">{{total}}</span>
+                        <input id="device-total-accumulated" type="hidden" value="{{total}}" />
+                    </span>
+                    </div>
+                    <div style="float:left; padding-top:20px; padding-left: 5px">
+                        {{'Accumulated'|trans({},'StatsBundle')}}
+                        <br />
+                        <span class="text_column_stats">GB</span>
+                    </div>
+                </div>
+                <div class="clearfix"  style="float:left">
+                    <span style="font-weight: bold; font-size: 50px; color:#7a6563">/</span>
+                </div>
+                <div class="clearfix"  style="float:left">
+                    <div style="float:left; padding-top:10px">
+                    <span style="font-weight: bold; font-size: 40px">
+                        <span id="profile-limit-value">{{limit|number_format(0,'.','')}}</span>
+                    </span>
+                    </div>
+                    <div style="float:left; padding-top:20px; padding-left: 5px">
+                        {{'Limit'|trans({},'StatsBundle')}}
+                        <br />
+                        <span class="text_column_stats">GB</span>
+                    </div>
+                </div>
+            </div>
+            <br />
+            <div class="clearfix">
+                <div class="clearfix" style="float:left">
+                    <div style="float:left; padding-top:10px">
+                    <span style="font-weight: bold; font-size: 40px">
+                        <span id="profile-usage-value">{{usage}}</span>
+                    </span>
+                    </div>
+                    <div style="float:left; padding-top:20px; padding-left: 5px">
+                        {{'Usage'|trans({},'StatsBundle')}}
+                        <br />
+                        <span class="text_column_stats">%</span>
+                    </div>
+                </div>
+                <div class="clearfix"  style="float:left">
+                    <span style="font-weight: bold; font-size: 50px; color:#7a6563">/</span>
+                </div>
+                <div class="clearfix"  style="float:left">
+                    <div style="float:left; padding-top:10px">
+                    <span style="font-weight: bold; font-size: 40px">
+                        <span class="{{classDiff}}" id="profile-usage-diff">{{diff}}</span>
+                    </span>
+                    </div>
+                    <div style="float:left; padding-top:20px; padding-left: 5px">
+                        {{'Diff'|trans({},'StatsBundle')}}
+                        <br />
+                        <span class="text_column_stats">GB</span>
+                    </div>
+                </div>
+            </div>
+
+        </td>
+    </tr>
+    </tbody>
+</table>
+
+<script type="text/javascript">
+
+    $(function () {
+
+        $("#profile-limit-input").on('change keydown keypress keyup mousedown click mouseup', function() {
+            reloadValuesUsage();
+        });
+    });
+
+    function reloadValuesUsage() {
+        var value = $("#profile-limit-input").val();
+        var usage =  $("#device-total-accumulated").val();
+        
+        if(value <= 0) {
+            value = {{limit|number_format(0,'.','')}};
+        }
+        
+        $("#profile-limit-value").val(value);
+        $("#profile-usage-value").html(((usage / value) * 100).toFixed(2));
+        $("#profile-usage-diff").html((value - usage).toFixed(2));
+        if((value - usage) > 0) {
+            $("#profile-usage-diff").attr('class','green-value');
+        } else {
+            $("#profile-usage-diff").attr('class','red-value');
+        }
+    }
+
+</script>
+        

src/StatsBundle/Resources/views/Stats/picker-sla.html.twig

@@ -0,0 +1,165 @@
+{# <form method="post" name="form" id="picker-form"> #}
+    <div class="container" style="width: 530px; padding: 0px 10px">
+            <div class="form-group picker" style="width:25%">
+                <div class='input-group date' id='sla-datetimepicker6'>
+                    <input type="text" class="form-control" style="border-color: #605ca8"/>
+                    
+                    <span class="input-group-addon calendar-icon" style="border-color: #605ca8">
+                        <span class="glyphicon glyphicon-calendar"></span>
+                    </span>
+                </div>
+            </div>
+
+            <div class="form-group picker"  style="margin-left: 10px;width:25%">
+                <div class='input-group date' id='sla-datetimepicker7'>
+                    <input type="text" class="form-control" style="border-color: #605ca8"/>
+                    
+                    <span class="input-group-addon calendar-icon" style="border-color: #605ca8">
+                        <span class="glyphicon glyphicon-calendar"></span>
+                    </span>
+                </div>
+            </div>
+
+            <input name="from" id="sla-from-unixtime" type="hidden" class="form-control"/>
+            <input name="to" id="sla-to-unixtime" type="hidden" class="form-control"/>
+
+            <div class="form-group picker" style="width: 40%">
+                <button type="submit" id="pickerSlaButton" type="button" class="btn bg-purple btn-flat margin" style="margin: 0px 10px; float:left"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'picker_find_star'|trans({}, 'StatsBundle') }}</button>
+                {# <img src="{{ asset('bundles/stats/images/load3.gif') }}" style="float:left" /> #}
+                <svg id="loader" style="display:none; float:left" class="lds-polar" width="35px" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(50 50)"><g transform="scale(0.8780218186353332)">
+                <path d="M0 0L0 -40A40 40 0 0 1 34.64101615137754 -20.000000000000004" transform="rotate(0 0 0)" stroke="none" fill="#1d3f72"></path>
+                <animateTransform attributeName="transform" type="scale" values="0.8780218186353332;0.884786130589434;0.5342315887395934;0.17453079196443083;0.7159374117286236;0.8780218186353332" keyTimes="0;0.2;0.4;0.6;0.8;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
+                </g><g transform="scale(0.02223813056279795)">
+                <path d="M0 0L0 -40A40 40 0 0 1 34.64101615137754 -20.000000000000004" transform="rotate(60 0 0)" stroke="none" fill="#5699d2"></path>
+                <animateTransform attributeName="transform" type="scale" values="0.02223813056279795;0.37084029868553225;0.5828480347836038;0.15066733799945028;0.6942832732116193;0.17457184787393654;0.02223813056279795" keyTimes="0;0.16666666666666666;0.3333333333333333;0.5;0.6666666666666666;0.8333333333333334;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
+                </g><g transform="scale(0.6764099251986221)">
+                <path d="M0 0L0 -40A40 40 0 0 1 34.64101615137754 -20.000000000000004" transform="rotate(120 0 0)" stroke="none" fill="#d8ebf9"></path>
+                <animateTransform attributeName="transform" type="scale" values="0.6764099251986221;0.013125369880694618;0.35026957404081177;0.4762044726228394;0.7637378542310113;0.6764099251986221" keyTimes="0;0.2;0.4;0.6;0.8;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
+                </g><g transform="scale(0.5878860631237611)">
+                <path d="M0 0L0 -40A40 40 0 0 1 34.64101615137754 -20.000000000000004" transform="rotate(180 0 0)" stroke="none" fill="#71c2cc"></path>
+                <animateTransform attributeName="transform" type="scale" values="0.5878860631237611;0.9870877544948929;0.17696236773061805;0.5878860631237611" keyTimes="0;0.3333333333333333;0.6666666666666666;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
+                </g><g transform="scale(0.3664762972995939)">
+                <path d="M0 0L0 -40A40 40 0 0 1 34.64101615137754 -20.000000000000004" transform="rotate(240 0 0)" stroke="none" fill="#1d3f72"></path>
+                <animateTransform attributeName="transform" type="scale" values="0.3664762972995939;0.2672683449487724;0.3664762972995939" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
+                </g><g transform="scale(0.4869928171688228)">
+                <path d="M0 0L0 -40A40 40 0 0 1 34.64101615137754 -20.000000000000004" transform="rotate(300 0 0)" stroke="none" fill="#5699d2"></path>
+                <animateTransform attributeName="transform" type="scale" values="0.4869928171688228;0.8339110034839239;0.3943009866896828;0.4869928171688228" keyTimes="0;0.3333333333333333;0.6666666666666666;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
+                </g></g></svg>
+                
+            </div>
+    </div>
+{# </form> #}
+
+<script type="text/javascript">
+    var fromStar = {{fs}};
+    var toStar = {{ts}};
+    
+    var parameters = {server: '{{server}}', fatherDevice: '{{fatherDevice}}', fatherDeviceType: '{{fatherDeviceType}}', device: '{{device}}', from: fromStar, to: toStar};
+
+    $(function () {
+
+        
+        $('#sla-datetimepicker6').datetimepicker({
+            defaultDate: new Date(fromStar * 1000),
+            format: 'YYYY-MM-DD'
+        });
+        $('#sla-datetimepicker7').datetimepicker({
+            defaultDate: new Date(toStar * 1000),
+            format: 'YYYY-MM-DD',
+        });
+
+        $('#sla-from-unixtime').val(fromStar)
+        $('#sla-to-unixtime').val(toStar)
+        
+        $("#sla-datetimepicker6").on("dp.change", function (e) {
+            date = (e.date._d.getTime() / 1000).toFixed(0);
+            parameters.from = date;
+            $("#sla-from-unixtime").val(date);
+        });
+        $("#sla-datetimepicker7").on("dp.change", function (e) {
+            date = (e.date._d.getTime() / 1000).toFixed(0);
+            parameters.to = date;
+            $("#sla-to-unixtime").val(date);
+        });
+        
+    });
+
+    $('#pickerSlaButton').click(function(e) {
+
+        $("#loader").show();
+        $('#pickerSlaButton').attr('disabled','disabled');
+    
+        $.ajax({
+            url: "{{url('star_get_json')}}",
+            data: parameters,
+            type: "POST",
+        }).done(function(result) {
+            console.log(result);
+            
+            reloadDaily(result.xday);
+            reloadHistoric(result);
+            $("#device-total-accumulated").val(result.accumulated_last);
+            $("#device-total-accumulated-span").html(result.accumulated_last.toFixed(3));
+            reloadValuesUsage();
+
+            $("#loader").hide();
+            $('#pickerSlaButton').removeAttr('disabled');
+        });
+    
+
+    });
+
+    function reloadDaily(serie) {
+        $.each(serie, function(i, values){
+            $("#daily_"+i+"_in").html(values.in);
+            $("#daily_"+i+"_out").html(values.out);
+            $("#daily_"+i+"_total").html(values.total);
+            $("#daily_"+i+"_percent").html(values.percent);
+        });
+
+
+        var chart = $("#cablemodem_star_mega_flasheo").highcharts();
+        
+        Highcharts.data({
+            table: 'star-table',
+            startRow: 0,
+            endRow: 7,
+            endColumn: 3,
+            afterComplete: function(dataOptions) {
+                $.each(dataOptions.series, function(i, series) {
+                    chart.series[i].setData(series.data, false);
+                });
+                chart.redraw();
+                }},chart.options);
+    }
+
+    function reloadHistoric(series) {
+        var chart = $('#cablemodem_star').highcharts();
+        
+        var array = $.map(series.categories, function(value, index) {
+            return [value.replace("'", "")];
+        });
+
+        chart.xAxis[0].setCategories(array);
+        
+        $.each(chart.series, function(i, v){
+            name = v.options.id;
+            
+            var values = $.map(series[name], function(value, index) {
+                return [nullParseFloat(value)];
+            });
+            chart.series[i].setData(values, false, true);
+        });
+        
+        chart.redraw();
+    }
+
+    function nullParseFloat(number) {
+        if (number === null){
+            return null;
+        }
+        
+        return parseFloat(number);
+    }
+        
+</script>

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

@@ -2,9 +2,9 @@
     <div class="container" style="width: 500px; padding: 0px 10px">
             <div class="form-group picker">
                 <div class='input-group date' id='datetimepicker6'>
-                    <input type="text" class="form-control"/>
+                    <input type="text" class="form-control" style="border-color: #3d9970"/>
                     
-                    <span class="input-group-addon calendar-icon">
+                    <span class="input-group-addon calendar-icon" style="border-color: #3d9970">
                         <span class="glyphicon glyphicon-calendar"></span>
                     </span>
                 </div>
@@ -12,9 +12,9 @@
 
             <div class="form-group picker"  style="margin-left: 10px">
                 <div class='input-group date' id='datetimepicker7'>
-                    <input type="text" class="form-control"/>
+                    <input type="text" class="form-control" style="border-color: #3d9970"/>
                     
-                    <span class="input-group-addon calendar-icon">
+                    <span class="input-group-addon calendar-icon" style="border-color: #3d9970">
                         <span class="glyphicon glyphicon-calendar"></span>
                     </span>
                 </div>

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

@@ -7,7 +7,9 @@
                     <div class="menu-slash">/</div>
                     <div style="float:left; padding-top:13px; margin: 0px 10px;"><span><b>{{cablemodem.getMac|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 id="div-picker" style="float:left; padding-top:6px; margin: 0px 10px;">{% include '@Stats/Stats/picker.html.twig' %}</div>
+                    <div id="div-picker-sla" style="display:none; float:left; padding-top:6px; margin: 0px 10px;">{% include '@Stats/Stats/picker-sla.html.twig'%}</div>
                 </div>
                 <div class="navbar-collapse"></div>
             </div>
@@ -23,19 +25,19 @@
                 <div class="nav-tabs-custom">
                     <ul class="nav nav-tabs">
                         <li class="active">
-                            <a href="#tab_1" data-toggle="tab">{{ 'Description'|trans({}, 'StatsBundle') }}</a>
+                            <a class="tab-link" 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>
+                            <a class="tab-link" 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>
+                            <a class="tab-link" 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>
+                            <a class="tab-link" href="#tab_4" data-toggle="tab">{{ 'SLA'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen"></span></a>
                         </li>
                         <li>
-                            <a href="#tab_5" data-toggle="tab">{{ 'STAR'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen"></span></a>
+                            <a class="tab-link-star" href="#tab_5" data-toggle="tab">{{ 'STAR'|trans({}, 'StatsBundle') }} <span class="no_defined nas_data_origen"></span></a>
                         </li>
                     </ul>
                     <div class="tab-content clearfix">
@@ -140,7 +142,9 @@
                             <br /><br />
                             {# https://codepen.io/anon/pen/EpwxKa #}
                             <div class="clearfix">
-                                <div class="col-sm-2"></div>
+                                <div class="col-sm-4">
+                                    {% include '@Stats/Stats/Template/star_accumulated_last_value.html.twig' %}
+                                </div>
                                 <div class="col-sm-4">
                                     <table style="margin-top:70px" id="star-table" class="table table-hover table-condensed table-striped table-bordered">
                                         <thead>
@@ -151,13 +155,13 @@
                                             <th class="freq">{{ 'percent'|trans({},'StatsBundle') }}</th>
                                         </thead>    
                                         <tbody>
-                                            {% for data in star['xday'] %}
+                                            {% for index, data in star['xday'] %}
                                             <tr>
                                                 <td class="data">{{data['label']|trans({},'StatsBundle')}}</td>
-                                                <td class="data">{{data['out']|number_format(3,'.','')}}</td>
-                                                <td class="data">{{data['in']|number_format(3,'.','')}}</td>
-                                                <td class="data">{{data['total']|number_format(3,'.','')}}</td>
-                                                <td class="data">{{data['percent']|number_format(2,'.','')}}</td>
+                                                <td id="daily_{{index}}_out" class="data">{{data['out']|number_format(3,'.','')}}</td>
+                                                <td id="daily_{{index}}_in" class="data">{{data['in']|number_format(3,'.','')}}</td>
+                                                <td id="daily_{{index}}_total" class="data">{{data['total']|number_format(3,'.','')}}</td>
+                                                <td id="daily_{{index}}_percent" class="data">{{data['percent']|number_format(2,'.','')}}</td>
                                             </tr>
                                             {% endfor %}
                                         </tbody>
@@ -166,7 +170,7 @@
                                 <div class="col-sm-4">
                                     <div id="cablemodem_star_mega_flasheo" style="width: 100%;"></div>
                                 </div>
-                                <div class="col-sm-2"></div>
+                                {# <div class="col-sm-2"></div> #}
                             </div>
                         </div>
                     </div>
@@ -178,6 +182,17 @@
 
 <script type="text/javascript">
 
+$('.tab-link').click( function(e) {
+    $('#div-picker-sla').hide();
+    $('#div-picker').show();
+});
+
+$('.tab-link-star').click( function(e) {
+    $('#div-picker').hide();
+    $('#div-picker-sla').show();
+});
+
+
 var from = {{from}};
 var to = {{to}};
 var markerEnable = false;

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

@@ -28,8 +28,8 @@ table.dataTable thead tr th, table.dataTable tbody tr td {
 <script src="{{ asset('bundles/stats/highcharts/highchartsConfig.js') }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ asset('bundles/stats/datatables/jquery.dataTables.min.js') }}"></script>
 <script src="{{ asset('bundles/stats/highcharts/code/highcharts-more.js') }}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{ asset('bundles/stats/highcharts/code/modules/data.js') }}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{ asset('bundles/stats/highcharts/code/modules/exporting.js') }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ asset('bundles/stats/highcharts/code/modules/data.js') }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ asset('bundles/stats/highcharts/code/modules/exporting.js') }}" type="text/javascript" charset="utf-8"></script>
 
 {% endblock %}