From fce76be0411e855a734ebeeae9ebbe1671cce64f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Mon, 25 Aug 2014 17:30:24 +0200
Subject: [PATCH] Improve Phantomas metrics reporting

---
 app/node_views/results.html | 38 +++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/node_views/results.html b/app/node_views/results.html
index 7d998a9..fc5d12f 100644
--- a/app/node_views/results.html
+++ b/app/node_views/results.html
@@ -20,8 +20,8 @@
         <div class="resultsMenu">
             <a class="menuItem" href="/"><span>New test<span></a>
             <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="setView('summary')"><span>Summary</span></div>
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><span>Metrics</span></div>
             <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><span>Spaghetti</span></div>
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><span>Metrics</span></div>
         </div>
 
         <div ng-if="phantomasResults.error">
@@ -53,13 +53,6 @@
             </div>
         </div>
 
-        <div ng-show="view == 'metrics' && !phantomasResults.error" class="metrics">
-            <h2>Metrics</h2>
-            <ul>
-                <li ng-repeat="(key,val) in phantomasResults.metrics">{{key}}: {{val}}</li>
-            </ul>
-        </div>
-
         <div ng-show="view == 'execution' && !phantomasResults.error" class="execution">
             <h2>Javascript interactions with the DOM</h2>
             <div class="filters">
@@ -173,6 +166,35 @@
                 </div>
             </div>
         </div>
+
+        <div ng-show="view == 'metrics' && !phantomasResults.error" class="metrics">
+            <h2>Metrics</h2>
+            
+            <h3>Phantomas report</h3>
+            <div ng-repeat="(moduleName, module) in metricsModule">
+                <h4>{{moduleName}}</h4>
+                <div ng-repeat="(metricName, metric) in module" ng-if="phantomasResults.metrics[metricName] >= 0" class="module" id="metric_{{metricName}}">
+                    <div class="value">
+                        {{metricName}}: {{phantomasResults.metrics[metricName]}}
+                        <span ng-if="metric.unit == 'ms' || metric.unit == 'bytes'">{{metric.unit}}</span>
+                    </div>
+                    <div class="legend">
+                        {{metric.desc}}
+                        <span ng-if="metric.unreliable">(unreliable)</span>
+                    </div>
+                    <div ng-if="phantomasResults.offenders[metricName]" class="offenders">
+                        <div ng-if="!metric.showingOffenders" ng-click="metric.showingOffenders = true">Show offenders</div>
+                        <div ng-if="metric.showingOffenders" ng-click="metric.showingOffenders = false">Hide offenders</div>
+                        <ul ng-if="metric.showingOffenders">
+                            <li ng-repeat="offender in phantomasResults.offenders[metricName] track by $index">
+                                {{offender}}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
     </div>