Improve Phantomas metrics reporting

app/public/scripts/resultsCtrl.js

@@ -3,12 +3,15 @@ var app = angular.module('Results', []);
 app.controller('ResultsCtrl', function ($scope) {
     // Grab results from nodeJS served page
     $scope.phantomasResults = window._phantomas_results;
+    $scope.phantomasMetadata = window._phantomas_metadata.metrics;
 
     $scope.view = 'summary';
     $scope.slowRequestsOn = false;
     $scope.slowRequestsLimit = 5;
 
     if ($scope.phantomasResults.offenders && $scope.phantomasResults.offenders.javascriptExecutionTree) {
+        
+        // Get the execution tree from the offenders
         $scope.javascript = JSON.parse($scope.phantomasResults.offenders.javascriptExecutionTree);
     
         // Read the main elements of the tree and sum the total time
@@ -25,6 +28,20 @@ app.controller('ResultsCtrl', function ($scope) {
         });
     }
 
+    if ($scope.phantomasResults.metrics && $scope.phantomasResults.offenders) {
+
+        // Get the Phantomas modules from metadata
+        $scope.metricsModule = {};
+        for (var metricName in $scope.phantomasMetadata) {
+            var metric = $scope.phantomasMetadata[metricName];
+            if (!$scope.metricsModule[metric.module]) {
+                $scope.metricsModule[metric.module] = {};
+            }
+            $scope.metricsModule[metric.module][metricName] = metric;
+        }
+
+    }
+
     $scope.setView = function(viewName) {
         $scope.view = viewName;
     };

app/public/styles/results.css

@@ -40,6 +40,34 @@ h4 {
     text-align: left;
 }
 
+
+.metrics h4 {
+    padding-left: 2em;
+}
+
+.metrics .module {
+    padding-left: 4em;
+    padding-top: 0.5em;
+}
+
+.metrics .legend {
+    font-style: italic;
+    color: #aaa;
+}
+
+.metrics .offenders {
+    padding-left: 0em;
+    font-size: 0.8em;
+}
+
+.metrics .offenders div {
+    cursor: pointer;
+}
+
+.metrics .offenders ul {
+    margin-top: 0.5em;
+}
+
 .filters {
     margin: 1em 0;
     padding: 0.5em;