fetch custom metrics using WPT closing #678

sitespeedio · Jun 5, 2015 · a4e85d1 · a4e85d1
1 parent 679ecf1
commit a4e85d1
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,9 @@
 
 version 3.5.1 (unreleased)
 ------------------------
-* Holy cow, we now support WebPageTest scripting ( https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting)! Every  occurrence of {{{URL}}} in your script will be replaced with the URL that is actually going to be tested.
+* Holy cow, we now support WebPageTest scripting ( https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting)! Every  occurrence of {{{URL}}} in your script will be replaced with the URL that is actually going to be tested. Feed the script file to sitespeed.io using --wptScript
+
+* When we are at it, also support custom scripts to collect metrics for WebPageTest! Feed your custom javascript metrics file using --wptCustomMetrics. Read more here: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/custom-metrics 
 
 version 3.5
 ------------------------

diff --git a/lib/analyze/webpagetest.js b/lib/analyze/webpagetest.js
@@ -99,6 +99,10 @@ function analyzeUrl(args, asyncDoneCallback) {
     video: true
   });
 
+  if (config.wptCustomMetrics) {
+    wptOptions.custom = config.wptCustomMetrics;
+  }
+
   // set basic auth if it is configured
   if (config.basicAuth) {
     wptOptions.login = config.basicAuth.split(':')[0];

diff --git a/lib/cli.js b/lib/cli.js
@@ -385,6 +385,16 @@ var cli = nomnom.help(
 			return fileHelper.getFileAsString(path);
 		}
 	},
+	wptCustomMetrics: {
+		metavar: '<FILE>',
+		help: 'Fetch metrics from your page using Javascript',
+		callback: function(path) {
+			return validatePathOption('wptCustomMetrics', path);
+		},
+		transform: function(path) {
+			return fileHelper.getFileAsString(path);
+		}
+	},
 	wptHost: {
 		metavar: '<domain>',
 		help: 'The domain of your WebPageTest instance.'

diff --git a/lib/collectors/pages.js b/lib/collectors/pages.js
@@ -215,6 +215,17 @@ function collectWPT(pageData, p) {
         });
       }
 
+      // and custom metrics
+      var customMetrics = browserAndLocation.response.data.median[view].custom;
+      if (customMetrics) {
+        customMetrics.value.forEach(function(metricName) {
+          p.wpt[location][browser][connectivity][view][metricName] = {
+            'v': browserAndLocation.response.data.median[view][metricName],
+            'unit': ''
+          };
+        });
+      }
+
       others.forEach(function(metric) {
         p.wpt[location][browser][connectivity][view][metric] = {
           'v': browserAndLocation.response.data.median[view][metric],

diff --git a/lib/graphite/graphiteCollector.js b/lib/graphite/graphiteCollector.js
@@ -171,10 +171,14 @@ GraphiteCollector.prototype._getWPTStats = function(page, urlKey) {
 				Object.keys(page.wpt[location][browser]).forEach(function(connectivity) {
 					Object.keys(page.wpt[location][browser][connectivity]).forEach(function(view) {
 						Object.keys(page.wpt[location][browser][connectivity][view]).forEach(function(metric) {
+							// we can have custom metrics that are not numbers
+							// so lets skip them
+							if (!isNaN(metric)) {
 							statistics += self.namespace + '.' + urlKey + '.wpt.' + location + '.' +
 								connectivity + '.' + browser + '.' + view + '.' + metric + '.median ' +
 								page.wpt[location][browser][connectivity][view][metric].v +
 								self.timeStamp;
+							}
 						});
 					});
 				});

diff --git a/lib/util/hbHelpers.js b/lib/util/hbHelpers.js
@@ -185,6 +185,10 @@ module.exports.registerHelpers = function registerHelpers() {
     return util.getWPTKey(location, connectivity);
   });
 
+  hb.registerHelper('getWPTCustomMetricValue', function(view, metricName) {
+      return view[metricName];
+  });
+
   hb.registerHelper('getColumnsMeta', function(column, columnsMeta, ruleDictionary, type) {
     // TODO major cleanup
     // strip

diff --git a/templates/partials/wpt.hb b/templates/partials/wpt.hb
@@ -62,6 +62,42 @@
              {{/if}}
          </tbody>
        </table>
+     </div>
+
+     {{#if response.data.median.firstView.custom.value}}
+     <h3>Custom Metrics</h3>
+     <div class="table-responsive">
+       <table class="table table-condensed table-striped table-bordered">
+         <thead>
+           <tr>
+             <th>View</th>
+             {{#each response.data.median.firstView.custom.value}}
+             <th>{{this}}</th>
+             {{/each}}
+          </tr>
+        </thead>
+        <tbody>
+            <tr>
+              <tr>
+                <td><strong>First View</strong></td>
+                {{#each response.data.median.firstView.custom.value}}
+                <td>{{getWPTCustomMetricValue ../response.data.median.firstView this}}</td>
+                {{/each}}
+              </tr>
+              {{#if response.data.median.repeatView}}
+              <tr>
+                <td><strong>Repeat View</strong></td>
+                {{#each response.data.median.repeatView.custom.value}}
+                <td>{{getWPTCustomMetricValue ../response.data.median.repeatView this}}</td>
+                {{/each}}
+              </tr>
+              {{/if}}
+            </tbody>
+          </table>
+        </div>
+
+        {{/if}}
+
 
       <h3>Waterfall first view</h3>