grunt-apt pages

miglesiasEB · Jul 1, 2014 · 5eccb49 · 5eccb49
commit 5eccb49
Show file tree

Hide file tree

Showing 10 changed files with 473 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+components
+build
diff --git a/History.md b/History.md
diff --git a/Makefile b/Makefile
@@ -0,0 +1,14 @@
+
+build: components index.js grunt-wpt-page.css template.js
+	@component build --dev
+
+template.js: template.html
+	@component convert $<
+
+components: component.json
+	@component install --dev
+
+clean:
+	rm -fr build components template.js
+
+.PHONY: clean
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,38 @@
+
+# grunt-wpt-page
+
+  Keep tracking webpagetest score
+
+## Installation
+
+  Install with [component(1)](http://component.io):
+
+    $ component install sideroad/grunt-wpt-page
+
+## API
+
+
+
+## License
+
+  The MIT License (MIT)
+
+  Copyright (c) 2014 <copyright holders>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
diff --git a/component.json b/component.json
@@ -0,0 +1,24 @@
+{
+  "name": "grunt-wpt-page",
+  "description": "Keep tracking webpagetest score",
+  "version": "0.0.1",
+  "keywords": [],
+  "dependencies": {
+    "moment/moment": "*",
+    "yyx990803/vue": "*",
+    "components/jquery": "*",
+    "components/bootstrap": "*",
+    "lodash/lodash": "*"
+  },
+  "development": {},
+  "license": "MIT",
+  "scripts": [
+    "index.js"
+  ],
+  "templates": [
+    "index.html"
+  ],
+  "styles": [
+    "grunt-wpt-page.css"
+  ]
+}
diff --git a/grunt-wpt-page.css b/grunt-wpt-page.css
@@ -0,0 +1,3 @@
+.sidebar .affix select{
+	width: 68%;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel='stylesheet' href='//cdn.oesmith.co.uk/morris-0.4.3.min.css'>
+    <link rel='stylesheet' href='build/components-bootstrap/css/bootstrap.min.css'>
+    <link rel='stylesheet' href='build/components-bootstrap/css/bootstrap-theme.min.css'>
+    <link rel='stylesheet' href='build/build.css'>
+
+	<title>Grunt WebPageTest</title>
+</head>
+<body>
+
+	<div class="container">
+		<nav class="navbar navbar-default" role="navigation">
+		    <!-- Brand and toggle get grouped for better mobile display -->
+		    <div class="navbar-header">
+		        <a class="navbar-brand" href="#">Grunt WebPageTest</a>
+		    </div>
+		</nav>
+	</div>
+
+	<div id="app" class="container">
+		<div class="row">
+			<div class="col-md-2 sidebar" >
+				<div data-spy="affix" data-offset-top="60">
+			  		<h2>Location</h2>
+					<select id="locations" class="form-control" v-model="location" >
+						<option v-repeat="locations" value="{{$key}}" >{{$value}}</option>
+					</select>
+			  		<h2>URL</h2>
+					<select id="urls" class="form-control" v-model="url" v-on="change: render" >
+						<option v-repeat="urls" value="{{$key}}" >{{$key}}</option>
+					</select>
+
+					<ul class="nav nav-pills nav-stacked">
+					  <li>
+					  	<a href="#responseTime">Response Time</a>
+					  	<a href="#contentsSize">Contents Size</a>
+					  	<a href="#contentsRequests">Contents Requests</a>
+					  </li>
+					</ul>
+				</div>
+			</div>
+			<div class="col-md-10">
+
+				<h2 id="responseTime" >Response Time</h2>
+				<h3>FirstView</h3>
+				<h4>Average</h4>
+				<div id="firstAverage" class="graphs"></div>
+
+				<h4>Median</h4>
+				<div id="firstMedian" class="graphs"></div>
+
+				<h3>RepeatView</h3>
+				<h4>Average</h4>
+				<div id="repeatAverage" class="graphs"></div>
+
+				<h4>Median</h4>
+				<div id="repeatMedian" class="graphs"></div>
+
+				<h3>Detail</h3>
+				<h4>Average</h4>
+				<table class="table table-striped table-bordered">
+					<thead>
+						<tr>
+							<th rowspan="2">Date</th>
+							<th rowspan="2">ID</th>
+							<th colspan="2">FirstView</th>
+							<th colspan="2">RepeatView</th>
+						</tr>
+						<tr>
+							<th v-repeat="labels.responseTime.average">{{$value}}</th>
+							<th v-repeat="labels.responseTime.average">{{$value}}</th>
+						</tr>
+					</thead>
+					<tbody id="averageTable">
+						<tr v-repeat="tests" >
+							<td>{{info.completed | convertToDate }}</td>
+							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+							<td v-repeat="labels.responseTime.average">{{response.data.average.firstView[$key] | ms}}</td>
+							<td v-repeat="labels.responseTime.average">{{response.data.average.repeatView[$key] | ms}}</td>
+						</tr>
+					</tbody>
+				</table>
+
+				<h4>Median</h4>
+				<table class="table table-striped table-bordered">
+					<thead>
+						<tr>
+							<th rowspan="2">Date</th>
+							<th rowspan="2">ID</th>
+							<th colspan="6">FirstView</th>
+							<th colspan="6">RepeatView</th>
+						</tr>
+						<tr>
+
+							<th v-repeat="labels.responseTime.median">{{$value}}</th>
+							<th v-repeat="labels.responseTime.median">{{$value}}</th>
+						</tr>
+					</thead>
+					<tbody id="medianTable">
+						<tr v-repeat="tests">
+							<td>{{info.completed | convertToDate}}</td>
+							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+							<td v-repeat="labels.responseTime.median">{{response.data.median.firstView[$key] | ms}}</td>
+							<td v-repeat="labels.responseTime.median">{{response.data.median.repeatView[$key] | ms}}</td>
+						</tr>
+					</tbody>
+				</table>
+
+
+				<h2 id="contentsSize" >Contents Size</h2>
+				<h3>FirstView</h3>
+				<div id="firstContentsSize" class="graphs"></div>
+
+				<h3>RepeatView</h3>
+				<div id="repeatContentsSize" class="graphs"></div>
+
+				<h3>Detail</h3>
+				<table class="table table-striped table-bordered">
+					<thead>
+						<tr>
+							<th rowspan="2">Date</th>
+							<th rowspan="2">ID</th>
+							<th colspan="8">FirstView</th>
+							<th colspan="8">RepeatView</th>
+						</tr>
+						<tr>
+							<th>Total</th>
+							<th v-repeat="labels.contents">{{$value}}</th>
+							<th>Total</th>
+							<th v-repeat="labels.contents">{{$value}}</th>
+						</tr>
+					</thead>
+					<tbody id="contentsSizeTable">
+						<tr v-repeat="tests" >
+							<td>{{info.completed | convertToDate}}</td>
+							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+							<td>{{response.data.median.firstView.breakdown | totalBytes | KB}}</td>
+							<td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].bytes | KB}}</td>
+							<td>{{response.data.median.repeatView.breakdown | totalBytes | KB}}</td>
+							<td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].bytes | KB}}</td>
+	 					</tr>
+					</tbody>
+				</table>
+
+				<h2 id="contentsRequests" >Contents Requests</h2>
+				<h3>FirstView</h3>
+				<div id="firstContentsRequests" class="graphs"></div>
+
+				<h3>RepeatView</h3>
+				<div id="repeatContentsRequests" class="graphs"></div>
+
+				<h3>Detail</h3>
+				<table class="table table-striped table-bordered">
+					<thead>
+						<tr>
+							<th rowspan="2">Date</th>
+							<th rowspan="2">ID</th>
+							<th colspan="8">FirstView</th>
+							<th colspan="8">RepeatView</th>
+						</tr>
+						<tr>
+							<th>Total</th>
+							<th v-repeat="labels.contents">{{$value}}</th>
+							<th>Total</th>
+							<th v-repeat="labels.contents">{{$value}}</th>
+						</tr>
+					</thead>
+					<tbody id="contentsRequestsTable">
+						<tr v-repeat="tests" >
+							<td>{{info.completed | convertToDate}}</td>
+							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+							<td>{{response.data.median.firstView.breakdown | totalRequests }}</td>
+							<td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].requests }}</td>
+							<td>{{response.data.median.repeatView.breakdown | totalRequests }}</td>
+							<td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].requests }}</td>
+	 					</tr>
+					</tbody>
+				</table>
+
+			</div>
+		</div>
+	</div>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
+    <script src="//cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
+	<script src='build/build.js'></script>
+	<script type="text/javascript">
+		require("grunt-wpt-page/index.js");
+	</script>
+
+</body>
+</html>