method list and tree pages were optimized

CHANGELOG.md

@@ -4,6 +4,21 @@
 
 There are next changes:
 
+## 1.1.2
+
+There are next changes:
+
+- method list page was improved
+- data on method list and tree pages are sorted now by the first param
+- keep a graph period when go to a parent or child method
+
+## 1.1.1
+
+There are next changes:
+
+- added a flame graph by params diff
+- added a link to flame graph in the diff interface
+
 ## 1.1.0
 
 There are next changes:

src/Badoo/LiveProfilerUI/Pages/FlameGraphPage.php

@@ -17,7 +17,7 @@
 class FlameGraphPage extends BasePage
 {
     const MAX_METHODS_IN_FLAME_GRAPH = 3000;
-    const DEFAULT_THRESHOLD = 100;
+    const DEFAULT_THRESHOLD = 300;
 
     /** @var string */
     protected static $template_path = 'flame_graph';

src/Badoo/LiveProfilerUI/Pages/ProfileMethodListPage.php

@@ -54,6 +54,7 @@ protected function cleanData() : bool
         $this->data['app'] = isset($this->data['app']) ? trim($this->data['app']) : '';
         $this->data['label'] = isset($this->data['label']) ? trim($this->data['label']) : '';
         $this->data['snapshot_id'] = isset($this->data['snapshot_id']) ? (int)$this->data['snapshot_id'] : 0;
+        $this->data['all'] = isset($this->data['all']) ? (bool)$this->data['all'] : false;
 
         if (!$this->data['snapshot_id'] && (!$this->data['app'] || !$this->data['label'])) {
             throw new \InvalidArgumentException('Empty snapshot_id, app and label');
@@ -82,7 +83,9 @@ public function getTemplateData() : array
             throw new \InvalidArgumentException('Can\'t get snapshot');
         }
 
-        $all_fields = $this->FieldList->getAllFieldsWithVariations();
+        $all_fields = $this->data['all'] ?
+            $this->FieldList->getAllFieldsWithVariations() :
+            $this->FieldList->getFields();
         $fields = array_diff($this->FieldList->getFields(), [$this->calls_count_field]);
         $field_descriptions = $this->FieldList->getFieldDescriptions();
 
@@ -93,6 +96,7 @@ public function getTemplateData() : array
         foreach ($records as $Row) {
             /** @var \Badoo\LiveProfilerUI\Entity\MethodData $Row */
             $values = $Row->getValues();
+            $values = array_intersect_key($values, array_flip($all_fields));
 
             foreach ($fields as $field) {
                 $all_fields[$field . '_excl'] = $field . '_excl';
@@ -103,6 +107,8 @@ public function getTemplateData() : array
             $Row->setValues($values);
         }
 
+        $this->sortList($records);
+
         $wall = $this->View->fetchFile(
             'profiler_result_view_part',
             [
@@ -117,6 +123,17 @@ public function getTemplateData() : array
         return [
             'snapshot' => $Snapshot,
             'wall' => $wall,
+            'all' => $this->data['all'],
         ];
     }
+
+    protected function sortList(array &$records)
+    {
+        $sort_field = (string)current($this->FieldList->getFields());
+        usort($records, function ($Element1, $Element2) use ($sort_field) : int {
+            /** @var \Badoo\LiveProfilerUI\Entity\MethodData $Element1 */
+            /** @var \Badoo\LiveProfilerUI\Entity\MethodData $Element2 */
+            return $Element2->getValue($sort_field) > $Element1->getValue($sort_field) ? 1 : -1;
+        });
+    }
 }

src/Badoo/LiveProfilerUI/Pages/ProfileMethodTreePage.php

@@ -127,7 +127,8 @@ public function getTemplateData() : array
         $common_block_data = [
             'link_base' => $link_base,
             'fields' => $this->FieldList->getAllFieldsWithVariations(),
-            'field_descriptions' => $this->FieldList->getFieldDescriptions()
+            'field_descriptions' => $this->FieldList->getFieldDescriptions(),
+            'stat_interval' => $this->data['stat_interval'],
         ];
 
         $method_data = $this->getMethodDataWithHistory($date_to_snapshot_map, $this->data['method_id']);
@@ -145,6 +146,7 @@ public function getTemplateData() : array
 
         $parents = $this->getMethodParentsWithHistory($date_to_snapshot_map, $this->data['method_id']);
         if (!empty($parents)) {
+            $this->sortList($parents);
             $view_data['parents'] = $this->View->fetchFile(
                 'profiler_result_view_part',
                 $common_block_data + ['data' => $parents],
@@ -154,6 +156,7 @@ public function getTemplateData() : array
 
         $children = $this->getMethodChildrenWithHistory($date_to_snapshot_map, $this->data['method_id']);
         if ($children) {
+            $this->sortList($children);
             $view_data['children'] = $this->View->fetchFile(
                 'profiler_result_view_part',
                 $common_block_data + ['data' => $children, 'hide_lines_column' => true],
@@ -166,6 +169,16 @@ public function getTemplateData() : array
         return $view_data;
     }
 
+    protected function sortList(array &$records)
+    {
+        $sort_field = (string)current($this->FieldList->getFields());
+        usort($records, function ($Element1, $Element2) use ($sort_field) : int {
+            /** @var \Badoo\LiveProfilerUI\Entity\MethodData $Element1 */
+            /** @var \Badoo\LiveProfilerUI\Entity\MethodData $Element2 */
+            return $Element2->getValue($sort_field) > $Element1->getValue($sort_field) ? 1 : -1;
+        });
+    }
+
     protected function getMainMethodId() : int
     {
         $methods = $this->Method->findByName('main()', true);

src/templates/profile_method_list.php

@@ -1,5 +1,6 @@
 <link rel="stylesheet" href="/js/rrd/libs/jquery-tablesorter/theme.blue.css">
 <script src="/js/rrd/libs/jquery-tablesorter/jquery.tablesorter.min.js"></script>
+<script src="/js/rrd/libs/jquery-tablesorter/jquery.tablesorter.pager.js"></script>
 <script src="/js/rrd/libs/jquery-tablesorter/jquery.tablesorter.widgets.js"></script>
 <script src="/profiler/widget-columnSelector.js"></script>
 
@@ -86,6 +87,10 @@
     #popover-target .disabled {
         color: #ddd;
     }
+
+    .tablesorter-filter.disabled {
+        display: none;
+    }
 </style>
 
 <?php include __DIR__ . '/navbar.block.php'; ?>
@@ -106,8 +111,152 @@
     <div id="columnSelector" class="columnSelector">
         <!-- this div is where the column selector is added -->
     </div>
+    <?php if (empty($data['all'])): ?>
+        <a class="btn btn-default" href="/profiler/list-view.phtml?snapshot_id=<?= $data['snapshot']->getId() ?>&all=1">Show all columns</a>
+    <?php else: ?>
+        <a class="btn btn-default" href="/profiler/list-view.phtml?snapshot_id=<?= $data['snapshot']->getId() ?>&all=0">Show compact</a>
+    <?php endif; ?>
 </div>
-<table class="table table-striped sortable">
+
+<table class="table table-striped sortable hidden">
     <?= $data['wall'] ?>
 </table>
+
+<div id="pager" class="pager hidden">
+    <form>
+        <span class="first glyphicon glyphicon-step-backward" title="First page" ></span>
+        <span class="prev glyphicon glyphicon-triangle-left" title="Previous page" ></span>
+        <span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
+        <span class="next glyphicon glyphicon-triangle-right" title="Next page" ></span>
+        <span class="last glyphicon glyphicon-step-forward" title="Last page" ></span>
+        <select class="pagesize">
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option selected="selected" value="50">50</option>
+            <option value="all">all</option>
+        </select>
+    </form>
+</div>
+
+<script>
+    // this code may be included a few times
+    $(function(){
+        if (window.tablesorter_processed) return;
+        window.tablesorter_processed = true;
+
+        $.tablesorter.addParser({
+            // set a unique id
+            id: 'parse-values',
+            is: function(s, table, cell, $cell) {
+                // apply this parser to all columns
+                return true;
+            },
+            format: function(s, table, cell, cellIndex) {
+                return s.replace(/,/g,'').replace(/^-$/, '0');
+            },
+            type: 'numeric'
+        });
+        var options = {
+            theme : 'blue',
+            showProcessing: true,
+            widthFixed: false,
+        };
+
+        options.widgets = ['zebra', 'columnSelector', 'stickyHeaders', 'filter'];
+        options.widgetOptions = {
+            // target the column selector markup
+            columnSelector_container : $('#columnSelector'),
+            // column status, true = display, false = hide
+            // disable = do not display on list
+            columnSelector_columns : {
+                0: 'disable' /* set to disabled; not allowed to unselect it */,
+                1: 'disable' /* set to disabled; not allowed to unselect it */,
+            },
+            // remember selected columns (requires $.tablesorter.storage)
+            columnSelector_saveColumns: true,
+
+            // container layout
+            columnSelector_layout : '<label><input type="checkbox">{name}</label>',
+            // layout customizer callback called for each column
+            // function($cell, name, column) { return name || $cell.html(); }
+            columnSelector_layoutCustomizer : null,
+            // data attribute containing column name to use in the selector container
+            columnSelector_name  : 'data-selector-name',
+
+            /* Responsive Media Query settings */
+            // enable/disable mediaquery breakpoints
+            columnSelector_mediaquery: true,
+            // toggle checkbox name
+            columnSelector_mediaqueryName: 'Auto: ',
+            // breakpoints checkbox initial setting
+            columnSelector_mediaqueryState: true,
+            // hide columnSelector false columns while in auto mode
+            columnSelector_mediaqueryHidden: true,
+
+            // set the maximum and/or minimum number of visible columns; use null to disable
+            columnSelector_maxVisible: null,
+            columnSelector_minVisible: null,
+            // responsive table hides columns with priority 1-6 at these breakpoints
+            // see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
+            // *** set to false to disable ***
+            columnSelector_breakpoints : [ '20em', '30em', '40em', '50em', '60em', '70em' ],
+            // data attribute containing column priority
+            // duplicates how jQuery mobile uses priorities:
+            // http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
+            columnSelector_priority : 'data-priority',
+
+            // class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
+            // applied icons; use this class name (input.checked) instead of input:checked
+            columnSelector_cssChecked : 'checked',
+
+            // class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody)
+            columnSelector_classHasSpan : 'hasSpan',
+
+            // event triggered when columnSelector completes
+            columnSelector_updated : 'columnUpdate',
+
+
+
+            // extra class name added to the sticky header row
+            stickyHeaders : '',
+            // number or jquery selector targeting the position:fixed element
+            stickyHeaders_offset : $('.top-bar'),
+            // added to table ID, if it exists
+            stickyHeaders_cloneId : '-sticky',
+            // trigger "resize" event on headers
+            stickyHeaders_addResizeEvent : true,
+            // if false and a caption exist, it won't be included in the sticky header
+            stickyHeaders_includeCaption : true,
+            // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
+            stickyHeaders_zIndex : 2,
+            // jQuery selector or object to attach sticky header to
+            stickyHeaders_attachTo : null,
+            // jQuery selector or object to monitor horizontal scroll position (defaults: xScroll > attachTo > window)
+            stickyHeaders_xScroll : null,
+            // jQuery selector or object to monitor vertical scroll position (defaults: yScroll > attachTo > window)
+            stickyHeaders_yScroll : null,
+
+            // scroll table top into view after filtering
+            stickyHeaders_filteredToTop: true,
+
+            filter_searchDelay : 50,
+            filter_ignoreCase : true
+        }
+        $('#columnSelector').css('z-index', 1);
+        $('.sortable')
+            .removeClass('hidden')
+            .tablesorter(options)
+            .tablesorterPager({
+                container: $("#pager"),
+                size: 50,
+                savePages : true,
+                updateArrows: true,
+                output: '{startRow:input} – {endRow} / {totalRows} rows',
+            });
+        $('#pager').removeClass('hidden');
+        $('[data-toggle="tooltip"]').tooltip({
+            placement: "bottom"
+        });
+    });
+</script>
 <?php endif; ?>

src/templates/profile_method_tree.php

@@ -304,6 +304,28 @@ function () {
                         drawAllGraphs();
                     }
                 );
+
+                $.tablesorter.addParser({
+                    // set a unique id
+                    id: 'parse-values',
+                    is: function(s, table, cell, $cell) {
+                        // apply this parser to all columns
+                        return true;
+                    },
+                    format: function(s, table, cell, cellIndex) {
+                        return s.replace(/,/g,'').replace(/^-$/, '0');
+                    },
+                    type: 'numeric'
+                });
+                var options = {
+                    theme : 'blue',
+                    showProcessing: true,
+                    widthFixed: false,
+                };
+                $('.sortable').tablesorter(options);
+                $('[data-toggle="tooltip"]').tooltip({
+                    placement: "bottom"
+                });
             });
         </script>