diff --git a/src/resources/index.html b/src/resources/index.html
index 418d331..1e8dc54 100644
--- a/src/resources/index.html
+++ b/src/resources/index.html
@@ -1,255 +1,256 @@
 <!doctype html>
 <html>
-<head>
- <base href="/">
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <link rel="apple-touch-icon-precomposed" href="favicon-152.png">
- <link rel="icon" href="favicon.ico">
- <title>Laminar</title>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js" integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68=" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js" integrity="sha256-B8zvQ+y1lIQkcm+EJyCis+7AgsnzaTCBAHgkrPFQr9A=" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/ansi_up@1.3.0/ansi_up.js" integrity="sha256-2UR0QYPMTIY0yP5S6ubBS7wFNKhn8uW7pV5E3LlvI6U=" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" integrity="sha256-UXesixbeLkB/UYxVTzuj/gg3+LMzgwAmg3zD+C4ZASQ=" crossorigin="anonymous">
- <link href="css/app.css" rel="stylesheet">
- <link href="custom/style.css" rel="stylesheet">
- <script src="js/app.js" defer></script>
-</head>
-<body>
- <template id="home"><div>
-  <ol class="breadcrumb"><li class="active">Home</li></ol>
-  <div class="container-fluid"><div class="row">
-   <div class="col-sm-5 col-md-4 col-lg-3 dash">
-    <table class="table table-bordered">
-     <tr v-for="job in jobsQueued">
-      <td><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <i>queued</i></td>
-     </tr>
-     <tr v-for="job in jobsRunning">
-      <td><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link>
-       <small class="pull-right">{{formatDuration(job.started, job.completed)}}</small>
-       <div class="progress">
-         <div class="progress-bar progress-bar-striped" :class="'progress-bar-'+(job.overtime?'warning':'info')" :class="job.etc?'':'active'" :style="'width:'+(!job.etc?'100':job.progress)+'%'"></div>
-       </div>
-      </td>
-     </tr>
-     <tr v-for="job in jobsRecent">
-      <td><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link><br><small>Took {{formatDuration(job.started, job.completed)}} at {{formatDate(job.started)}}</small></td>
-     </tr>
-    </table>
-   </div>
-   <div class="col-sm-7 col-md-8 col-lg-9"><div class="row">
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Total runs per day this week</div>
-      <div class="panel-body">
-       <canvas id="chartBpd"></canvas>
-      </div>
-     </div>
-    </div>
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Most runs per job in the last 24 hours</div>
-      <div class="panel-body" id="chartStatus">
-       <canvas id="chartBpj"></canvas>
-      </div>
-     </div>
-    </div></div><div class="row">
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Longest average run time per job this week</div>
-      <div class="panel-body">
-       <canvas id="chartTpj"></canvas>
-      </div>
-     </div>
-    </div>
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Current executor utilization</div>
-      <div class="panel-body">
-       <canvas id="chartUtil"></canvas>
-      </div>
-     </div>
-    </div></div><div class="row">
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Regressions and recoveries</div>
-      <div class="panel-body"><div style="position:relative">
-       <canvas id="chartResultChanges"></canvas>
-       <ul v-for="job in resultChanged">
-         <li v-if="job.lastFailure>job.lastSuccess" :id="'rcd_'+job.name" class="chart-overlay"><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link>: <span v-html="runIcon('failed')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastFailure">#{{job.lastFailure}}</router-link> since <span v-html="runIcon('success')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastSuccess">#{{job.lastSuccess}}</router-link></li>
-         <li v-if="job.lastFailure<job.lastSuccess" :id="'rcd_'+job.name" class="chart-overlay"><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link>: <span v-html="runIcon('success')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastSuccess">#{{job.lastSuccess}}</router-link> since <span v-html="runIcon('failed')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastFailure">#{{job.lastFailure}}</router-link></li>
-       </ul>
-      </div></div>
-     </div>
-    </div>
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Low pass rates</div>
-      <div class="panel-body">
-       <canvas id="chartPassRates"></canvas>
-      </div>
-     </div>
-    </div></div><div class="row">
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Run time changes</div>
-      <div class="panel-body">
-       <canvas id="chartBuildTimeChanges"></canvas>
-      </div>
-     </div>
-    </div>
-    <div class="col-md-6">
-     <div class="panel panel-default">
-      <div class="panel-heading">Average run time distribution</div>
-      <div class="panel-body">
-       <canvas id="chartBuildTimeDist"></canvas>
-      </div>
-     </div>
-    </div>
-   </div></div>
-  </div></div> 
- </div></template>
- 
- <template id="jobs"><div>
-  <ol class="breadcrumb"><li><router-link to="/">Home</router-link></li><li class="active">Jobs</li></ol>
-  <div class="container-fluid"><div class="row">
-   <div class="col-xs-12">
-    <div class="pull-right">
-     <input class="form-control" id="jobFilter" v-model="search" placeholder="Filter...">
-    </div>
-    <ul class="nav nav-tabs">
-     <li v-show="ungrouped.length" :class="{'active':group==null}"><a href v-on:click.prevent="group = null">Ungrouped Jobs</a></li>
-     <li v-for="g in Object.keys(groups)" :class="{'active':g==group}"><a href v-on:click.prevent="group = g">{{g}}</a></li>
-    </ul>
-    <table class="table table-striped" id="joblist">
-     <tr   v-for="job in filteredJobs()">
-      <td><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link></td>
-      <td class="text-center"><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link></td>
-      <td class="text-center">{{formatDate(job.started)}}</td>
-      <td class="text-center">{{formatDuration(job.started,job.completed)}}</td>
-     </tr>
-    </table>
-   </div>
-  </div></div>
- </div></template>
- 
- <template id="job"><div>
-  <ol class="breadcrumb"><li><router-link to="/">Home</router-link></li><li><router-link to="/jobs">Jobs</router-link></li><li class="active">{{$route.params.name}}</li></ol></ol>
-  <div class="container-fluid">
-   <div class="row">
-    <div class="col-sm-5 col-md-6 col-lg-7">
-    <h3>{{$route.params.name}}</h3>
-    <div v-html="description"></div>
-    <dl class="dl-horizontal">
-     <dt>Last Successful Run</dt>
-     <dd><router-link v-if="lastSuccess" :to="'/jobs/'+$route.params.name+'/'+lastSuccess.number">#{{lastSuccess.number}}</router-link> {{lastSuccess?' - at '+formatDate(lastSuccess.started):'never'}}</dd>
-     <dt>Last Failed Run</dt>
-     <dd><router-link v-if="lastFailed" :to="'/jobs/'+$route.params.name+'/'+lastFailed.number">#{{lastFailed.number}}</router-link> {{lastFailed?' - at '+formatDate(lastFailed.started):'never'}}</dd>
-    </dl>
-    </div>
-    <div class="col-sm-7 col-md-6 col-lg-5">
-    <div class="panel panel-default">
-      <div class="panel-heading">Build time</div>
-      <div class="panel-body">
-      <canvas id="chartBt"></canvas>
-      </div>
-    </div>
-    </div>
-   </div>
-   <div class="row"><div class="col-xs-12">
-    <table class="table table-striped">
-     <thead><tr>
-      <th><a class="sort" :class="(sort.field=='result'?sort.order:'')" v-on:click="do_sort('result')">&nbsp;</a></th>
-      <th>Run <a class="sort" :class="(sort.field=='number'?sort.order:'')" v-on:click="do_sort('number')">&nbsp;</a></th>
-      <th class="text-center">Started <a class="sort" :class="(sort.field=='started'?sort.order:'')" v-on:click="do_sort('started')">&nbsp;</a></th>
-      <th class="text-center">Duration <a class="sort" :class="(sort.field=='duration'?sort.order:'')" v-on:click="do_sort('duration')">&nbsp;</a></th>
-      <th class="text-center hidden-xs">Reason <a class="sort" :class="(sort.field=='reason'?sort.order:'')" v-on:click="do_sort('reason')">&nbsp;</a></th>
-     </tr></thead>
-     <tr v-show="nQueued">
-      <td colspan="5"><i>{{nQueued}} run(s) queued</i></td>
-     </tr>
-     <tr v-for="job in jobsRunning" track-by="$index">
-      <td style="width:1px"><span v-html="runIcon(job.result)"></span></td>
-      <td><router-link :to="'/jobs/'+$route.params.name+'/'+job.number">#{{job.number}}</router-link></td>
-      <td class="text-center">{{formatDate(job.started)}}</td>
-      <td class="text-center">{{formatDuration(job.started, job.completed)}}</td>
-      <td class="text-center hidden-xs">{{job.reason}}</td>
-     </tr>
-     <tr v-for="job in jobsRecent" track-by="$index">
-      <td style="width:1px"><span v-html="runIcon(job.result)"></span></td>
-      <td><router-link :to="'/jobs/'+$route.params.name+'/'+job.number">#{{job.number}}</router-link></td>
-      <td class="text-center">{{formatDate(job.started)}}</td>
-      <td class="text-center">{{formatDuration(job.started, job.completed)}}</td>
-      <td class="text-center hidden-xs">{{job.reason}}</td>
-     </tr>
-    </table>
-    <ul class="pagination pull-right">
-      <li><button class="btn btn-default" v-on:click="page_prev" :disabled="sort.page==0">&laquo;</button></li>
-      <li>Page {{sort.page+1}} of {{pages}}</li>
-      <li><button class="btn btn-default" v-on:click="page_next" :disabled="sort.page==pages-1">&raquo;</button></li>
-    </ul>
-   </div></div>
-  </div>
- </div></template>
- 
- <template id="run"><div>
-  <ol class="breadcrumb"><li><router-link to="/">Home</router-link></li><li><router-link to="/jobs">Jobs</router-link></li><li><router-link :to="'/jobs/'+$route.params.name">{{$route.params.name}}</router-link></li><li class="active">#{{$route.params.number}}</li></ol></ol>
-  <div class="container-fluid">
-   <div class="row">
-    <div class="col-sm-5 col-md-6 col-lg-7">
-     <h3 style="float:left"><span v-html="runIcon(job.result)"></span> {{$route.params.name}} #{{$route.params.number}}</h3>
-     <nav class="pull-left">
-      <ul class="pagination" style="margin:15px 20px">
-       <li v-show="$route.params.number > 1"><router-link :to="'/jobs/'+$route.params.name+'/'+($route.params.number-1)">&laquo;</router-link></li>
-       <li v-show="latestNum > $route.params.number"><router-link :to="'/jobs/'+$route.params.name+'/'+(parseInt($route.params.number)+1)">&raquo;</router-link></li>
-      </ul>
-     </nav>
-     <div style="clear:both;"></div>
-     <dl class="dl-horizontal">
-      <dt>Reason</dt><dd>{{job.reason}}</dd>
-      <dt v-show="job.upstream.num > 0">Upstream</dt><dd v-show="job.upstream.num > 0"><router-link :to="'/jobs/'+job.upstream.name">{{job.upstream.name}}</router-link> <router-link :to="'/jobs/'+job.upstream.name+'/'+job.upstream.num">#{{job.upstream.num}}</router-link></li></dd>
-      <dt>Queued for</dt><dd>{{job.queued}}s</dd>
-      <dt>Started</dt><dd>{{formatDate(job.started)}}</dd>
-      <dt v-show="runComplete(job)">Completed</dt><dd v-show="job.completed">{{formatDate(job.completed)}}</dd>
-      <dt>Duration</dt><dd>{{formatDuration(job.started, job.completed)}}</dd>
-     </dl>
-    </div>
-    <div class="col-sm-7 col-md-6 col-lg-5">
-     <div class="progress" v-show="job.result == 'running'">
-      <div class="progress-bar  progress-bar-striped" :class="'progress-bar-'+(job.overtime?'warning':'info')" :class="job.etc?'':'active'" :style="{width:!job.etc?100:job.progress + '%'}"></div>
-     </div>
-     <div class="panel panel-default" v-show="job.artifacts.length">
-      <div class="panel-heading">Artifacts</div>
-      <div class="panel-body">
-       <ul class="list-unstyled" style="margin-bottom: 0">
-        <li v-for="art in job.artifacts"><a :href="art.url" target="_self">{{art.filename}}</a> [{{ art.size | iecFileSize }}]</li>
-       </ul>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="row"><div class="col-xs-12">
-    <button type="button" class="btn btn-default btn-xs pull-right" :class="{'active':autoscroll}" v-on:click="autoscroll = !autoscroll" style="margin-top:10px">Autoscroll</button>
-    <h4>Console output</h4>
-    <pre v-html="log"></pre>
-   </div></div>
-  </div>
- </div></template>
+    <head>
+        <base href="/">
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <link rel="apple-touch-icon-precomposed" href="favicon-152.png">
+        <link rel="icon" href="favicon.ico">
+        <title>Laminar</title>
+        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js" integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js" integrity="sha256-B8zvQ+y1lIQkcm+EJyCis+7AgsnzaTCBAHgkrPFQr9A=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/ansi_up@1.3.0/ansi_up.js" integrity="sha256-2UR0QYPMTIY0yP5S6ubBS7wFNKhn8uW7pV5E3LlvI6U=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" integrity="sha256-UXesixbeLkB/UYxVTzuj/gg3+LMzgwAmg3zD+C4ZASQ=" crossorigin="anonymous">
+        <link href="css/app.css" rel="stylesheet">
+        <link href="custom/style.css" rel="stylesheet">
+        <script src="js/app.js" defer></script>
+    </head>
+    <body>
 
- <div id="app">
-    <nav class="ui left visible vertical inverted sidebar labeled icon menu">
-      <span class="item"><img class="icon" src="icon.png">{{title}}</span>
-      <router-link to="/" class="item"><i class="bar chart icon"></i>Status</router-link>
-      <router-link to="/jobs" class="item"><i class="tasks icon"></i>Jobs</router-link>
-      <a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="item" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'"><i class="bell icon"></i>&#128276;</a>
-  </nav>
-    <div class="pusher">
-  <router-view></router-view>
-    </div>
-  <div v-show="!connected" id="popup-connecting"><span class="status spin">⚙&#xfe0e;</span>&nbsp;Connecting...</div>
- </div>
-</body>
+      <template id="home"><div>
+        <ol class="breadcrumb"><li class="active">Home</li></ol>
+        <div class="container-fluid"><div class="row">
+        <div class="col-sm-5 col-md-4 col-lg-3 dash">
+          <table class="table table-bordered">
+          <tr v-for="job in jobsQueued">
+            <td><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <i>queued</i></td>
+          </tr>
+          <tr v-for="job in jobsRunning">
+            <td><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link>
+            <small class="pull-right">{{formatDuration(job.started, job.completed)}}</small>
+            <div class="progress">
+              <div class="progress-bar progress-bar-striped" :class="'progress-bar-'+(job.overtime?'warning':'info')" :class="job.etc?'':'active'" :style="'width:'+(!job.etc?'100':job.progress)+'%'"></div>
+            </div>
+            </td>
+          </tr>
+          <tr v-for="job in jobsRecent">
+            <td><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name">{{job.name}}</router-link> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link><br><small>Took {{formatDuration(job.started, job.completed)}} at {{formatDate(job.started)}}</small></td>
+          </tr>
+          </table>
+        </div>
+        <div class="col-sm-7 col-md-8 col-lg-9"><div class="row">
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Total runs per day this week</div>
+            <div class="panel-body">
+            <canvas id="chartBpd"></canvas>
+            </div>
+          </div>
+          </div>
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Most runs per job in the last 24 hours</div>
+            <div class="panel-body" id="chartStatus">
+            <canvas id="chartBpj"></canvas>
+            </div>
+          </div>
+          </div></div><div class="row">
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Longest average run time per job this week</div>
+            <div class="panel-body">
+            <canvas id="chartTpj"></canvas>
+            </div>
+          </div>
+          </div>
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Current executor utilization</div>
+            <div class="panel-body">
+            <canvas id="chartUtil"></canvas>
+            </div>
+          </div>
+          </div></div><div class="row">
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Regressions and recoveries</div>
+            <div class="panel-body"><div style="position:relative">
+            <canvas id="chartResultChanges"></canvas>
+            <ul v-for="job in resultChanged">
+              <li v-if="job.lastFailure>job.lastSuccess" :id="'rcd_'+job.name" class="chart-overlay"><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link>: <span v-html="runIcon('failed')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastFailure">#{{job.lastFailure}}</router-link> since <span v-html="runIcon('success')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastSuccess">#{{job.lastSuccess}}</router-link></li>
+              <li v-if="job.lastFailure<job.lastSuccess" :id="'rcd_'+job.name" class="chart-overlay"><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link>: <span v-html="runIcon('success')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastSuccess">#{{job.lastSuccess}}</router-link> since <span v-html="runIcon('failed')"></span> <router-link :to="'/jobs/'+job.name+'/'+job.lastFailure">#{{job.lastFailure}}</router-link></li>
+            </ul>
+            </div></div>
+          </div>
+          </div>
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Low pass rates</div>
+            <div class="panel-body">
+            <canvas id="chartPassRates"></canvas>
+            </div>
+          </div>
+          </div></div><div class="row">
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Run time changes</div>
+            <div class="panel-body">
+            <canvas id="chartBuildTimeChanges"></canvas>
+            </div>
+          </div>
+          </div>
+          <div class="col-md-6">
+          <div class="panel panel-default">
+            <div class="panel-heading">Average run time distribution</div>
+            <div class="panel-body">
+            <canvas id="chartBuildTimeDist"></canvas>
+            </div>
+          </div>
+          </div>
+        </div></div>
+        </div></div> 
+      </div></template>
+
+      <template id="jobs"><div>
+        <ol class="breadcrumb"><li><router-link to="/">Home</router-link></li><li class="active">Jobs</li></ol>
+        <div class="container-fluid"><div class="row">
+        <div class="col-xs-12">
+          <div class="pull-right">
+          <input class="form-control" id="jobFilter" v-model="search" placeholder="Filter...">
+          </div>
+          <ul class="nav nav-tabs">
+          <li v-show="ungrouped.length" :class="{'active':group==null}"><a href v-on:click.prevent="group = null">Ungrouped Jobs</a></li>
+          <li v-for="g in Object.keys(groups)" :class="{'active':g==group}"><a href v-on:click.prevent="group = g">{{g}}</a></li>
+          </ul>
+          <table class="table table-striped" id="joblist">
+          <tr   v-for="job in filteredJobs()">
+            <td><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link></td>
+            <td class="text-center"><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link></td>
+            <td class="text-center">{{formatDate(job.started)}}</td>
+            <td class="text-center">{{formatDuration(job.started,job.completed)}}</td>
+          </tr>
+          </table>
+        </div>
+        </div></div>
+      </div></template>
+
+      <template id="job"><div>
+        <ol class="breadcrumb"><li><router-link to="/">Home</router-link></li><li><router-link to="/jobs">Jobs</router-link></li><li class="active">{{$route.params.name}}</li></ol></ol>
+        <div class="container-fluid">
+        <div class="row">
+          <div class="col-sm-5 col-md-6 col-lg-7">
+          <h3>{{$route.params.name}}</h3>
+          <div v-html="description"></div>
+          <dl class="dl-horizontal">
+          <dt>Last Successful Run</dt>
+          <dd><router-link v-if="lastSuccess" :to="'/jobs/'+$route.params.name+'/'+lastSuccess.number">#{{lastSuccess.number}}</router-link> {{lastSuccess?' - at '+formatDate(lastSuccess.started):'never'}}</dd>
+          <dt>Last Failed Run</dt>
+          <dd><router-link v-if="lastFailed" :to="'/jobs/'+$route.params.name+'/'+lastFailed.number">#{{lastFailed.number}}</router-link> {{lastFailed?' - at '+formatDate(lastFailed.started):'never'}}</dd>
+          </dl>
+          </div>
+          <div class="col-sm-7 col-md-6 col-lg-5">
+          <div class="panel panel-default">
+            <div class="panel-heading">Build time</div>
+            <div class="panel-body">
+            <canvas id="chartBt"></canvas>
+            </div>
+          </div>
+          </div>
+        </div>
+        <div class="row"><div class="col-xs-12">
+          <table class="table table-striped">
+          <thead><tr>
+            <th><a class="sort" :class="(sort.field=='result'?sort.order:'')" v-on:click="do_sort('result')">&nbsp;</a></th>
+            <th>Run <a class="sort" :class="(sort.field=='number'?sort.order:'')" v-on:click="do_sort('number')">&nbsp;</a></th>
+            <th class="text-center">Started <a class="sort" :class="(sort.field=='started'?sort.order:'')" v-on:click="do_sort('started')">&nbsp;</a></th>
+            <th class="text-center">Duration <a class="sort" :class="(sort.field=='duration'?sort.order:'')" v-on:click="do_sort('duration')">&nbsp;</a></th>
+            <th class="text-center hidden-xs">Reason <a class="sort" :class="(sort.field=='reason'?sort.order:'')" v-on:click="do_sort('reason')">&nbsp;</a></th>
+          </tr></thead>
+          <tr v-show="nQueued">
+            <td colspan="5"><i>{{nQueued}} run(s) queued</i></td>
+          </tr>
+          <tr v-for="job in jobsRunning" track-by="$index">
+            <td style="width:1px"><span v-html="runIcon(job.result)"></span></td>
+            <td><router-link :to="'/jobs/'+$route.params.name+'/'+job.number">#{{job.number}}</router-link></td>
+            <td class="text-center">{{formatDate(job.started)}}</td>
+            <td class="text-center">{{formatDuration(job.started, job.completed)}}</td>
+            <td class="text-center hidden-xs">{{job.reason}}</td>
+          </tr>
+          <tr v-for="job in jobsRecent" track-by="$index">
+            <td style="width:1px"><span v-html="runIcon(job.result)"></span></td>
+            <td><router-link :to="'/jobs/'+$route.params.name+'/'+job.number">#{{job.number}}</router-link></td>
+            <td class="text-center">{{formatDate(job.started)}}</td>
+            <td class="text-center">{{formatDuration(job.started, job.completed)}}</td>
+            <td class="text-center hidden-xs">{{job.reason}}</td>
+          </tr>
+          </table>
+          <ul class="pagination pull-right">
+            <li><button class="btn btn-default" v-on:click="page_prev" :disabled="sort.page==0">&laquo;</button></li>
+            <li>Page {{sort.page+1}} of {{pages}}</li>
+            <li><button class="btn btn-default" v-on:click="page_next" :disabled="sort.page==pages-1">&raquo;</button></li>
+          </ul>
+        </div></div>
+        </div>
+      </div></template>
+
+      <template id="run"><div>
+        <ol class="breadcrumb"><li><router-link to="/">Home</router-link></li><li><router-link to="/jobs">Jobs</router-link></li><li><router-link :to="'/jobs/'+$route.params.name">{{$route.params.name}}</router-link></li><li class="active">#{{$route.params.number}}</li></ol></ol>
+        <div class="container-fluid">
+        <div class="row">
+          <div class="col-sm-5 col-md-6 col-lg-7">
+          <h3 style="float:left"><span v-html="runIcon(job.result)"></span> {{$route.params.name}} #{{$route.params.number}}</h3>
+          <nav class="pull-left">
+            <ul class="pagination" style="margin:15px 20px">
+            <li v-show="$route.params.number > 1"><router-link :to="'/jobs/'+$route.params.name+'/'+($route.params.number-1)">&laquo;</router-link></li>
+            <li v-show="latestNum > $route.params.number"><router-link :to="'/jobs/'+$route.params.name+'/'+(parseInt($route.params.number)+1)">&raquo;</router-link></li>
+            </ul>
+          </nav>
+          <div style="clear:both;"></div>
+          <dl class="dl-horizontal">
+            <dt>Reason</dt><dd>{{job.reason}}</dd>
+            <dt v-show="job.upstream.num > 0">Upstream</dt><dd v-show="job.upstream.num > 0"><router-link :to="'/jobs/'+job.upstream.name">{{job.upstream.name}}</router-link> <router-link :to="'/jobs/'+job.upstream.name+'/'+job.upstream.num">#{{job.upstream.num}}</router-link></li></dd>
+            <dt>Queued for</dt><dd>{{job.queued}}s</dd>
+            <dt>Started</dt><dd>{{formatDate(job.started)}}</dd>
+            <dt v-show="runComplete(job)">Completed</dt><dd v-show="job.completed">{{formatDate(job.completed)}}</dd>
+            <dt>Duration</dt><dd>{{formatDuration(job.started, job.completed)}}</dd>
+          </dl>
+          </div>
+          <div class="col-sm-7 col-md-6 col-lg-5">
+          <div class="progress" v-show="job.result == 'running'">
+            <div class="progress-bar  progress-bar-striped" :class="'progress-bar-'+(job.overtime?'warning':'info')" :class="job.etc?'':'active'" :style="{width:!job.etc?100:job.progress + '%'}"></div>
+          </div>
+          <div class="panel panel-default" v-show="job.artifacts.length">
+            <div class="panel-heading">Artifacts</div>
+            <div class="panel-body">
+            <ul class="list-unstyled" style="margin-bottom: 0">
+              <li v-for="art in job.artifacts"><a :href="art.url" target="_self">{{art.filename}}</a> [{{ art.size | iecFileSize }}]</li>
+            </ul>
+            </div>
+          </div>
+          </div>
+        </div>
+        <div class="row"><div class="col-xs-12">
+          <button type="button" class="btn btn-default btn-xs pull-right" :class="{'active':autoscroll}" v-on:click="autoscroll = !autoscroll" style="margin-top:10px">Autoscroll</button>
+          <h4>Console output</h4>
+          <pre v-html="log"></pre>
+        </div></div>
+        </div>
+      </div></template>
+
+        <div id="app">
+            <nav class="ui left visible vertical inverted sidebar labeled icon menu">
+                <span class="item"><img class="icon" src="icon.png">{{title}}</span>
+                <router-link to="/" class="item"><i class="bar chart icon"></i>Status</router-link>
+                <router-link to="/jobs" class="item"><i class="tasks icon"></i>Jobs</router-link>
+                <a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="item" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'"><i class="bell icon"></i>&#128276;</a>
+            </nav>
+            <div class="pusher">
+                <router-view></router-view>
+            </div>
+            <div v-show="!connected" id="popup-connecting"><span class="status spin">⚙&#xfe0e;</span>&nbsp;Connecting...</div>
+        </div>
+    </body>
 </html>

	Run	Started	Duration	Reason
{{nQueued}} run(s) queued
	#{{job.number}}	{{formatDate(job.started)}}	{{formatDuration(job.started, job.completed)}}	{{job.reason}}
	#{{job.number}}	{{formatDate(job.started)}}	{{formatDuration(job.started, job.completed)}}	{{job.reason}}