Merge pull request #39 from eduardoboucas/feat/wptUrl

Load WPT URL from profile file

README.md

@@ -2,7 +2,7 @@
 
 # Front-end
 
-> v1.0.2
+> v1.1.0
 
 *Visualisation layer and data store for SpeedTracker*
 

_includes/listAllProfiles

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

_profiles/default.html

@@ -30,6 +30,14 @@
   runs: 1
   url: "https://my-website.com"
 
+#
+# The URL of the WebPageTest instance to be used with this profile. Please note that
+# if you decide to encrypt this URL, the filmstrip section will not be displayed.
+#
+# If you leave this field out, the public instance of WebPageTest will be used.
+#
+#wptUrl: https://www.webpagetest.org
+
 #
 # Performance budgets are defined with a metric id, a max/min allowed value
 # (in milliseconds), and one or multiple alerts — referenced by the ids defined
@@ -42,7 +50,7 @@
 #budgets:
 #  -
 #    metric: TTFB
-#    max: 600
+#    max: 1000
 #    alerts: ["emailAlert", "slackAlert"]
 #  -
 #    metric: firstPaint

app/Chart.js

@@ -16,10 +16,12 @@ class Chart extends React.Component {
     const dates = Utils.getDateRangeForPeriod(this.props.period)
     const dateFrom = dates.from.getTime()
     const dateTo = dates.to.getTime()
+    const results = this.props.results
+    const wptUrl = this.props.wptUrl
 
     let timestamps = []
 
-    Object.keys(this.props.results).forEach(timestamp => {
+    Object.keys(results).forEach(timestamp => {
       const timestampMillis = timestamp * 1000
 
       if ((timestampMillis >= dateFrom) && (timestampMillis <= dateTo)) {
@@ -33,7 +35,7 @@ class Chart extends React.Component {
       let metric = objectPath.get(Constants.metrics, metricPath)
 
       const values = timestamps.map(timestamp => {
-        let value = objectPath.get(this.props.results[timestamp], metricPath)
+        let value = objectPath.get(results[timestamp], metricPath)
 
         if (typeof metric.transform === 'function') {
           value = metric.transform(value)
@@ -49,7 +51,7 @@ class Chart extends React.Component {
         data: values,
         label: metric.name,
         lineTension: 0.6,
-        pointHoverRadius: 5,
+        pointHoverRadius: 10,
         pointHitRadius: 10,
         pointRadius: 5
       })
@@ -102,6 +104,16 @@ 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')
+        },
         scales: {
           xAxes: [{
             type: 'time',
@@ -111,13 +123,12 @@ class Chart extends React.Component {
               },
               min: labels[0],
               max: labels[labels.length - 1]
-              // min: dates.from.getTime(),
-              // max: dates.to.getTime()
             }
           }],
           yAxes: [{
             ticks: {
-              beginAtZero: true
+              beginAtZero: true,
+              max: this.props.maxValue
             },
             scaleLabel: {
               display: (this.props.yLabel !== undefined),
@@ -131,10 +142,17 @@ class Chart extends React.Component {
           callbacks: {
             title: function (tooltipItems, data) {
               const date = new Date(tooltipItems[0].xLabel)
-
-              return date.toISOString()
+              const year = date.getFullYear()
+              const month = date.getMonth() + 1
+              const day = date.getDate()
+              const hours = date.getHours()
+              const minutes = date.getMinutes()
+              const seconds = date.getSeconds()
+
+              return `${day}/${month}/${year} @ ${hours}:${minutes}:${seconds}`
             }
-          }
+          },
+          position: 'nearest'
         }
       }
     })

app/Constants.js

@@ -127,6 +127,12 @@ export default {
       transform: (value) => (value / 1000).toFixed(2),
       unit: 's',
       description: 'The time it takes for the page to be fully visually populated'
+    },
+    pagespeed: {
+      color: [51, 103, 214],
+      name: 'PageSpeed score',
+      unit: '',
+      description: 'A custom metric defined by Google PageSpeed Insights'
     }
   },
 

app/Dashboard.js

@@ -12,6 +12,9 @@ class Dashboard extends React.Component {
     const lastTs = timestamps[timestamps.length - 1]
     const lastResult = results[lastTs]
     const videoFrames = (lastResult && lastResult.videoFrames) || []
+    const wptUrl = this.props.profile.wptUrl
+      ? (this.props.profile.wptUrl.indexOf('http') === 0 ? this.props.profile.wptUrl : null)
+      : 'https://www.webpagetest.org'
 
     return (
       <div className="u-wrapper">
@@ -20,14 +23,24 @@ class Dashboard extends React.Component {
                  lastResult={lastResult}
                  metrics={['TTFB', 'loadTime', 'fullyLoaded']}
                  title="Load times"
-                 yLabel="Time (seconds)"/>
+                 yLabel="Time (seconds)"
+                 wptUrl={wptUrl}/>
 
         <Section {...this.props}
                  id="rendering"
                  lastResult={lastResult}
                  metrics={['firstPaint', 'SpeedIndex', 'visualComplete']}
                  title="Rendering"
-                 yLabel="Time (seconds)"/>
+                 yLabel="Time (seconds)"
+                 wptUrl={wptUrl}/>
+
+        <Section {...this.props}
+                 id="pagespeed"
+                 lastResult={lastResult}
+                 maxValue={100}
+                 metrics={['pagespeed']}
+                 title="Google PageSpeed"
+                 yLabel="Score"/>
 
         <Section {...this.props}
                  id="contentBreakdownBytes"
@@ -42,7 +55,8 @@ class Dashboard extends React.Component {
                   'breakdown.other.bytes'
                  ]}
                  title="Content breakdown (size)"
-                 yLabel="Traffic (kilobytes)"/>
+                 yLabel="Traffic (kilobytes)"
+                 wptUrl={wptUrl}/>
 
         <Section {...this.props}
                  id="contentBreakdownRequests"
@@ -57,9 +71,10 @@ class Dashboard extends React.Component {
                   'breakdown.other.requests'
                  ]}
                  title="Content breakdown (requests)"
-                 yLabel="Requests"/>
+                 yLabel="Requests"
+                 wptUrl={wptUrl}/>
 
-        {videoFrames.length ? 
+        {videoFrames.length && wptUrl &&
           <div className="c-Section">
             <h3 className="c-Section__title">Latest filmstrip view</h3>
             <div className="c-Filmstrip">
@@ -69,12 +84,12 @@ class Dashboard extends React.Component {
                 return (
                   <div key={index} className="c-Filmstrip__item">
                     <p className="c-Filmstrip__progress">{progress} ({frame._vc}%)</p>
-                    <img className="c-Filmstrip__image" src={Utils.getVideoFrameURL(lastResult.id, frame._t)}/>
+                    <img className="c-Filmstrip__image" src={Utils.getVideoFrameURL(wptUrl, lastResult.id, frame._t)}/>
                   </div>
                 )
               })}
             </div>
-          </div> : null}
+          </div>}
       </div>
     )
   }

app/Utils.js

@@ -38,10 +38,11 @@ const getDateRangeForPeriod = (period) => {
   }
 }
 
-const getVideoFrameURL = (id, time) => {
+const getVideoFrameURL = (baseURL, id, time) => {
+  baseURL = baseURL || 'https://www.webpagetest.org'
   let frame = leftPad(time / 100, 4)
 
-  return `https://www.webpagetest.org/getfile.php?test=${id}&video=video_1&file=frame_${frame}.jpg`
+  return `${baseURL}/getfile.php?test=${id}&video=video_1&file=frame_${frame}.jpg`
 }
 
 const leftPad = (input, length, pad) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "speedtracker",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Website performance monitoring tool",
   "main": "index.js",
   "scripts": {

profiles.json

@@ -1,4 +1,4 @@
 ---
 layout: null
 ---
-{% assign profiles = '' | split: '' %}{% for profile in site.profiles %}{% capture profileData %}{"slug":{{ profile.slug | jsonify }},"name":{{ profile.name | jsonify }},"budgets":{{ profile.budgets | jsonify }},"tests":{% include listProfileTests profile=profile.slug %}}{% endcapture %}{% assign profiles = profiles | push: profileData %}{% endfor %}[{{ profiles | join: ',' }}]
+{% assign profiles = '' | split: '' %}{% for profile in site.profiles %}{% capture profileData %}{"slug":{{ profile.slug | jsonify }},"name":{{ profile.name | jsonify }},"budgets":{{ profile.budgets | jsonify }},"tests":{% include listProfileTests profile=profile.slug %},"wptUrl":{{ profile.wptUrl | jsonify }}}{% endcapture %}{% assign profiles = profiles | push: profileData %}{% endfor %}[{{ profiles | join: ',' }}]

speedtracker.yml

@@ -53,19 +53,6 @@ encryptionKey: "YOUR_ENCRYPTED_KEY"
 wptKey: "YOUR_ENCRYPTED_WEBPAGETEST_KEY"
 
 
-# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
-#                                                                             #
-#  > wptUrl                                                   (!) Encrypted   #
-#                                                                             #
-#  The URL for the WebPageTest server to be used in the tests. If you're      #
-#  running a private instance, uncomment the line and insert the URL to your  #
-#  WebPageTest server. You can leave it out if you use the public instance.   #
-#                                                                             #
-# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
-
-#wptUrl: "YOUR_ENCRYPTED_WPT_INSTANCE_URL"
-
-
 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
 #                                                                             #
 #  > alerts                                                                   #