Add PageSpeed link and onClick descriptions

Author: eduardoboucas

_includes/listAllProfiles

@@ -1 +1 @@
-{% capture currentProfile %}{% include getCurrentProfile %}{% endcapture %}[{% for profile in site.profiles %}{slug:{{ profile.slug | jsonify }},name:{{ profile.name | jsonify }},wptUrl:{{ profile.wptUrl | jsonify }},budgets:{{ profile.budgets | jsonify }}{% if profile.slug == currentProfile %},active:true{% endif %}},{% endfor %}]
+{% capture currentProfile %}{% include getCurrentProfile %}{% endcapture %}[{% for profile in site.profiles %}{slug:{{ profile.slug | jsonify }},name:{{ profile.name | jsonify }},wptUrl:{{ profile.wptUrl | jsonify }},parameters:{{ profile.parameters | jsonify }},budgets:{{ profile.budgets | jsonify }}{% if profile.slug == currentProfile %},active:true{% endif %}},{% endfor %}]

_sass/components/_components.Chart.scss

@@ -21,4 +21,10 @@
     text-align: center;
     content: 'We need some more tests results to draw a chart.'
   }
+}
+
+.c-Chart__footer {
+  text-align: center;
+  font-size: 13px;
+  opacity: 0.5;
 }

app/Chart.js

@@ -104,16 +104,7 @@ class Chart extends React.Component {
         budgets: this.props.budgets
       },
       options: {
-        onClick: function (event, data) {
-          if (!data.length || !wptUrl) return
-
-          const index = data[0]._index
-          const timestamp = timestamps[index]
-          const result = results[timestamp]
-          const testUrl = `${wptUrl}/result/${result.id}/`
-
-          window.open(testUrl, '_blank')
-        },
+        onClick: this.props.onClick,
         scales: {
           xAxes: [{
             type: 'time',
@@ -168,10 +159,14 @@ class Chart extends React.Component {
 
   render() {
     const placeholderClass = (Object.keys(this.props.results) < 2) ? ' c-Chart--placeholder' : ''
-    
+ 
     return (
       <div className={`c-Chart${placeholderClass}`}>
         <canvas id={`chart${this.props.id}`} width="400" height="250"></canvas>
+
+        {this.props.onClickDescription &&
+          <p className="c-Chart__footer">{this.props.onClickDescription}</p>
+        }
       </div>
     )
   }

app/Dashboard.js

@@ -15,64 +15,94 @@ class Dashboard extends React.Component {
     const wptUrl = this.props.profile.wptUrl
       ? (this.props.profile.wptUrl.indexOf('http') === 0 ? this.props.profile.wptUrl : null)
       : 'https://www.webpagetest.org'
+    const profileUrl = this.props.profile.parameters.url
+
+    const onClickPagespeed = function (event, data) {
+      const encodedUrl = encodeURIComponent(profileUrl)
+      const insightsUrl = `https://developers.google.com/speed/pagespeed/insights/?url=${encodedUrl}`
+
+      window.open(insightsUrl, '_blank')
+    }
+
+    const onClickWpt = function (event, data) {
+      if (!data.length || !wptUrl) return
+
+      const index = data[0]._index
+      const timestamp = timestamps[index]
+      const result = results[timestamp]
+      const testUrl = `${wptUrl}/result/${result.id}/`
+
+      window.open(testUrl, '_blank')
+    }
 
     return (
       <div className="u-wrapper">
         <Section {...this.props}
-                 id="loadTimes"
-                 lastResult={lastResult}
-                 metrics={['TTFB', 'loadTime', 'fullyLoaded']}
-                 title="Load times"
-                 yLabel="Time (seconds)"
-                 wptUrl={wptUrl}/>
+          id="loadTimes"
+          lastResult={lastResult}
+          metrics={['TTFB', 'loadTime', 'fullyLoaded']}
+          onClick={onClickWpt}
+          onClickDescription="Click on a data point to see the corresponding WebPageTest result"
+          title="Load times"
+          yLabel="Time (seconds)"
+        />
 
         <Section {...this.props}
-                 id="rendering"
-                 lastResult={lastResult}
-                 metrics={['firstPaint', 'SpeedIndex', 'visualComplete']}
-                 title="Rendering"
-                 yLabel="Time (seconds)"
-                 wptUrl={wptUrl}/>
+          id="rendering"
+          lastResult={lastResult}
+          onClick={onClickWpt}
+          onClickDescription="Click on a data point to see the WebPageTest result"
+          metrics={['firstPaint', 'SpeedIndex', 'visualComplete']}
+          title="Rendering"
+          yLabel="Time (seconds)"
+        />
 
         <Section {...this.props}
-                 id="pagespeed"
-                 lastResult={lastResult}
-                 maxValue={100}
-                 metrics={['pagespeed']}
-                 title="Google PageSpeed"
-                 yLabel="Score"/>
+          id="pagespeed"
+          lastResult={lastResult}
+          maxValue={100}
+          metrics={['pagespeed']}
+          onClick={onClickPagespeed}
+          onClickDescription="Click on a data point to see the Google PageSpeed Insights report"
+          title="Google PageSpeed"
+          yLabel="Score"
+        />
 
         <Section {...this.props}
-                 id="contentBreakdownBytes"
-                 lastResult={lastResult}
-                 metrics={[
-                  'breakdown.html.bytes',
-                  'breakdown.js.bytes',
-                  'breakdown.css.bytes',
-                  'breakdown.image.bytes',
-                  'breakdown.flash.bytes',
-                  'breakdown.font.bytes',
-                  'breakdown.other.bytes'
-                 ]}
-                 title="Content breakdown (size)"
-                 yLabel="Traffic (kilobytes)"
-                 wptUrl={wptUrl}/>
+          id="contentBreakdownBytes"
+          lastResult={lastResult}
+          onClick={onClickWpt}
+          onClickDescription="Click on a data point to see the WebPageTest result"
+          metrics={[
+            'breakdown.html.bytes',
+            'breakdown.js.bytes',
+            'breakdown.css.bytes',
+            'breakdown.image.bytes',
+            'breakdown.flash.bytes',
+            'breakdown.font.bytes',
+            'breakdown.other.bytes'
+          ]}
+          title="Content breakdown (size)"
+          yLabel="Traffic (kilobytes)"
+        />
 
         <Section {...this.props}
-                 id="contentBreakdownRequests"
-                 lastResult={lastResult}
-                 metrics={[
-                  'breakdown.html.requests',
-                  'breakdown.js.requests',
-                  'breakdown.css.requests',
-                  'breakdown.image.requests',
-                  'breakdown.flash.requests',
-                  'breakdown.font.requests',
-                  'breakdown.other.requests'
-                 ]}
-                 title="Content breakdown (requests)"
-                 yLabel="Requests"
-                 wptUrl={wptUrl}/>
+          id="contentBreakdownRequests"
+          lastResult={lastResult}
+          onClick={onClickWpt}
+          onClickDescription="Click on a data point to see the WebPageTest result"
+          metrics={[
+            'breakdown.html.requests',
+            'breakdown.js.requests',
+            'breakdown.css.requests',
+            'breakdown.image.requests',
+            'breakdown.flash.requests',
+            'breakdown.font.requests',
+            'breakdown.other.requests'
+          ]}
+          title="Content breakdown (requests)"
+          yLabel="Requests"
+        />
 
         {videoFrames.length && wptUrl &&
           <div className="c-Section">