Archives
/
ohwgiles_laminar
mirror of https://github.com/ohwgiles/laminar
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

webui refresh

Browse Source 
WebUI rewritten in a more modern style, bootstrap is dropped in favour of
plain css/grid. Hand-crafted svgs replace utf-8 glyphs for a more uniform
look and smoother animation. webmanifest added for better mobile behaviour.

No doubt minor tweaks will follow...

resolves #57
pull/137/head
Oliver Giles 4 years ago
parent 4554039703
commit ae560b9de4
6 changed files with 462 additions and 371 deletions
Show Stats Download Patch File Download Diff File

6
CMakeLists.txt
Unescape View File

@ -62,7 +62,7 @@ add_custom_command(OUTPUT laminar.capnp.c++ laminar.capnp.h
# Zip and compile statically served resources
generate_compressed_bins(${CMAKE_SOURCE_DIR}/src/resources index.html js/app.js
favicon.ico favicon-152.png icon.png)
style.css manifest.webmanifest favicon.ico favicon-152.png icon.png)
# The code that allows dynamic modifying of index.html requires knowing its original size
add_custom_command(OUTPUT index_html_size.h
@ -78,11 +78,9 @@ file(DOWNLOAD https://raw.githubusercontent.com/drudru/ansi_up/v1.3.0/ansi_up.js
js/ansi_up.js EXPECTED_MD5 158566dc1ff8f2804de972f7e841e2f6)
file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
js/Chart.min.js EXPECTED_MD5 f6c8efa65711e0cbbc99ba72997ecd0e)
file(DOWNLOAD https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
css/bootstrap.min.css EXPECTED_MD5 5d5357cb3704e1f43a1f5bfed2aebf42)
# ...and compile them
generate_compressed_bins(${CMAKE_BINARY_DIR} js/vue-router.min.js js/vue.min.js
js/ansi_up.js js/Chart.min.js css/bootstrap.min.css)
js/ansi_up.js js/Chart.min.js)
# (see resources.cpp where these are fetched)
set(LAMINARD_CORE_SOURCES

16
src/resources.cpp
Unescape View File

@ -1,5 +1,5 @@
///
/// Copyright 2015-2019 Oliver Giles
/// Copyright 2015-2020 Oliver Giles
///
/// This file is part of Laminar
///
@ -27,11 +27,12 @@
extern const char _binary_##name##_z_end[]; \
resources.emplace(route, Resource{_binary_ ## name ## _z_start, _binary_ ## name ## _z_end, content_type})
#define CONTENT_TYPE_HTML "text/html; charset=utf-8"
#define CONTENT_TYPE_ICO "image/x-icon"
#define CONTENT_TYPE_PNG "image/png"
#define CONTENT_TYPE_JS "application/javascript; charset=utf-8"
#define CONTENT_TYPE_CSS "text/css; charset=utf-8"
#define CONTENT_TYPE_HTML "text/html; charset=utf-8"
#define CONTENT_TYPE_ICO "image/x-icon"
#define CONTENT_TYPE_PNG "image/png"
#define CONTENT_TYPE_JS "application/javascript; charset=utf-8"
#define CONTENT_TYPE_CSS "text/css; charset=utf-8"
#define CONTENT_TYPE_MANIFEST "application/manifest+json; charset=utf-8"
#define GZIP_FORMAT 16
@ -46,7 +47,8 @@ Resources::Resources()
INIT_RESOURCE("/js/vue-router.min.js", js_vue_router_min_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/Chart.min.js", js_Chart_min_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/css/bootstrap.min.css", css_bootstrap_min_css, CONTENT_TYPE_CSS);
INIT_RESOURCE("/style.css", style_css, CONTENT_TYPE_CSS);
INIT_RESOURCE("/manifest.webmanifest", manifest_webmanifest, CONTENT_TYPE_MANIFEST);
// Configure the default template
setHtmlTemplate(std::string());
}

456
src/resources/index.html
Unescape View File

@ -8,334 +8,200 @@
<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">
<link rel="manifest" href="/manifest.webmanifest">
<title>Laminar</title>
<script src="js/vue.min.js"></script>
<script src="js/vue-router.min.js"></script>
<script src="js/ansi_up.js"></script>
<script src="js/Chart.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="custom/style.css" rel="stylesheet">
<script src="js/app.js" defer></script>
<style>
body, html { height: 100%; }
.navbar { margin-bottom: 0; border-radius: 0; }
.navbar-brand { margin: 0 -15px; padding: 7px 15px }
.navbar-brand>img { display: inline; }
a.navbar-btn { color: #9d9d9d; }
a.navbar-btn.active { color: #fff; }
a.navbar-btn:hover { color: #fff; text-decoration: none; }
a.navbar-btn:focus { color: #fff; }
.bell { margin: 8px 15px; color: #9d9d9d; }
.bell:hover { text-decoration: none; color: #9d9d9d; cursor: pointer; }
.bell.active { color: #333; }
dt,dd { line-height: 2; }
canvas {
width: 100% !important;
max-width: 800px;
height: auto !important;
}
.progress {
height: 10px;
margin-top: 5px;
margin-bottom: 0;
}
table#joblist tr:first-child td { border-top: 0; }
#popup-connecting {
position: fixed;
background: white;
border: 1px solid #ddd;
bottom: 10px;
right: 10px;
padding: 20px;
}
/* status icons */
span.status {
display: inline-block;
width: 1em;
text-align: center;
font-family: sans-serif;
}
span.success { color: forestgreen; }
span.failed { color: firebrick; }
span.aborted { color: indigo; }
span.spin {
color: steelblue;
animation: 2s linear infinite spin;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* chart overlay */
li.chart-overlay {
position: absolute;
display: inline-block;
background: white;
border: 1px solid lightgray;
padding: 3px;
}
/* sort indicators */
a.sort {
position: relative;
margin-left: 7px;
}
a.sort:before, a.sort:after {
border: 4px solid transparent;
content: "";
position: absolute;
display: block;
height: 0;
width: 0;
right: 0;
top: 50%;
}
a.sort:before {
border-bottom-color: #ccc;
margin-top: -9px;
}
a.sort:after {
border-top-color: #ccc;
margin-top: 1px;
}
a.sort.dsc:after { border-top-color: #000; }
a.sort.asc:before { border-bottom-color: #000; }
a.sort:hover { text-decoration: none; cursor:pointer; }
a.sort:not(.asc):hover:before { border-bottom-color: #777; }
a.sort:not(.dsc):hover:after { border-top-color: #777; }
</style>
<link href="style.css" rel="stylesheet">
<link href="custom/style.css" rel="stylesheet">
</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>
<template id="home"><div id="page-home-main">
<nav>
<table class="table striped">
<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 style="float:right;">{{formatDuration(job.started, job.completed)}}</small>
<div class="progress" style="margin-top: 5px;">
<div class="progress-bar" :class="{overtime:job.overtime,indeterminate:!job.etc}" :style="job.etc && {width:job.progress+'%'}"></div>
</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>
</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>
</nav>
<section style="border-left: 1px solid #d0d0d0;">
<div id="page-home-stats">
<div>
<h3>Recent regressions</h3>
<table>
<tr v-for="job in resultChanged" v-if="job.lastFailure>job.lastSuccess"><td><router-link :to="'/jobs/'+job.name+'/'+job.lastFailure">{{job.name}} #{{job.lastFailure}}</router-link> since <router-link :to="'/jobs/'+job.name+'/'+job.lastSuccess">#{{job.lastSuccess}}</router-link></tr>
</table>
</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>
<h3>Low pass rates</h3>
<table>
<tr v-for="job in lowPassRates"><td><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link></td><td>{{Math.round(job.passRate*100)}}&nbsp;%</td></tr>
</table>
</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>
<h3>Utilization</h3>
<div><canvas id="chartUtil"></canvas></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 style="display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 5px; padding: 5px;">
<div><canvas id="chartBpd"></canvas></div>
<div><canvas id="chartBpj"></canvas></div>
<div><canvas id="chartTpj"></canvas></div>
<div><canvas id="chartBuildTimeChanges"></canvas></div>
<div><canvas id="chartBuildTimeDist"></canvas></div>
</div>
</div></div>
</div></div>
</div>
</section>
</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>
<nav style="display: grid; grid-auto-flow: column; justify-content: space-between; align-items: end; padding: 10px 15px;">
<div style="display:grid; grid-auto-flow: column; grid-gap: 15px; padding: 5px 0;">
<a v-show="ungrouped.length" :class="{'active':group==null}" href v-on:click.prevent="group = null">Ungrouped Jobs</a>
<a v-for="g in Object.keys(groups)" :class="{'active':g==group}" href v-on:click.prevent="group = g">{{g}}</a>
</div>
</div></div>
<input class="form-control" id="jobFilter" v-model="search" placeholder="Filter...">
</nav>
<table class="striped" id="job-list">
<tr v-for="job in filteredJobs()">
<td><router-link :to="'/jobs/'+job.name">{{job.name}}</router-link></td>
<td style="white-space: nowrap;"><span v-html="runIcon(job.result)"></span> <router-link :to="'/jobs/'+job.name+'/'+job.number">#{{job.number}}</router-link></td>
<td>{{formatDate(job.started)}}</td>
<td>{{formatDuration(job.started,job.completed)}}</td>
</tr>
</table>
</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>
<template id="job"><div id="page-job-main">
<div style="padding: 15px;">
<h2>{{$route.params.name}}</h2>
<div v-html="description"></div>
<dl>
<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 style="display: grid; justify-content: center; padding: 15px;">
<canvas id="chartBt"></canvas>
</div>
<div style="grid-column: 1/-1">
<table class="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 vp-sm-hide">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.concat(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 vp-sm-hide">{{job.reason}}</td>
</tr>
</table>
<div style="float: right; margin: 15px; display: inline-grid; grid-auto-flow: column; gap: 10px; align-items: center">
<button v-on:click="page_prev" :disabled="sort.page==0">&laquo;</button>
<span>Page {{sort.page+1}} of {{pages}}</span>
<button class="btn" v-on:click="page_next" :disabled="sort.page==pages-1">&raquo;</button>
</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">
<template id="run"><div style="display: grid; grid-template-rows: auto 1fr">
<div style="padding: 15px">
<div style="display: grid; grid-template-columns: auto 1fr 400px auto auto; gap: 5px; align-items: center">
<h2 style="white-space: nowrap"><span v-html="runIcon(job.result)"></span> {{$route.params.name}} #{{$route.params.number}}</h2>
<span></span>
<div><!-- extra div to preserve grid columns when v-show hides the progress bar -->
<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 class="progress-bar" :class="{overtime:job.overtime,indeterminate:!job.etc}" :style="job.etc && {width:job.progress+'%'}"></div>
</div>
</div>
<router-link :disabled="$route.params.number == 1" :to="'/jobs/'+$route.params.name+'/'+($route.params.number-1)" tag="button">&laquo;</router-link>
<router-link :disabled="$route.params.number == latestNum" :to="'/jobs/'+$route.params.name+'/'+(parseInt($route.params.number)+1)" tag="button">&raquo;</router-link>
</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 id="page-run-detail">
<dl>
<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>
<dl v-show="job.artifacts.length">
<dt>Artifacts</dt>
<dd>
<ul 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>
</dd>
</dl>
</div>
</div>
<div class="console-log">
<code v-html="log"></code>
<span v-show="job.result == 'running'" v-html="runIcon('running')" style="display: block;"></span>
</div>
</div></template>
<div id="app">
<nav class="navbar navbar-inverse">
<div>
<router-link to="/" class="navbar-brand"><img src="icon.png">{{title}}</router-link>
<router-link to="/jobs" class="btn navbar-btn pull-right">Jobs</router-link>
<main id="app" style="display: grid; grid-template-rows: auto 1fr auto; height: 100%;">
<nav id="nav-top" style="display: grid; grid-template-columns: auto auto 1fr auto; grid-gap: 15px;">
<router-link to="/" style="display: grid; grid-auto-flow: column; align-items: center; margin: 5px; font-size: 20px;">
<img src="icon.png"> {{title}}
</router-link>
<div id="nav-top-links" style="display: grid; grid-auto-flow: column; justify-content: start; gap: 15px; padding: 0 15px; align-items: center; font-size: 16px;">
<router-link to="/jobs">Jobs</router-link>
<router-link v-for="(crumb,i) in _route.path.slice(1).split('/').slice(1,-1)" :to="_route.path.split('/').slice(0,i+3).join('/')">{{crumb}}</router-link>
</div>
<div></div>
<div style="display: grid; align-items: center; padding: 0 15px">
<a v-on:click="toggleNotifications(!notify)" class="nav-icon" :class="{active:notify}" v-show="supportsNotifications" :title="(notify?'Disable':'Enable')+' notifications'">
<svg width="18" viewBox="0 0 12 12">
<g stroke-width="0.5">
<path d="m 6,9 c -1,0 -1,0 -1,1 0,1 2,1 2,0 0,-1 0,-1 -1,-1 z" />
<path d="m 1,10 c 3,-3 1,-9 5,-9 4,0 2,6 5,9 1,1 -3,-1 -5,-1 -2,0 -6,2 -5,1 z" />
</g>
</svg>
</a>
</div>
</nav>
<a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="bell pull-right" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'">&#128276;</a>
<router-view></router-view>
<div v-show="!connected" id="popup-connecting"><span class="status spin">⚙&#xfe0e;</span>&nbsp;Connecting...</div>
</div>
<div id="connecting-overlay" :class="{shown:!connected}">
<div><span v-html="runIcon('running')"></span> Connecting...</div>
</div>
</main>
</body>
</html>

98
src/resources/js/app.js
Unescape View File

@ -103,15 +103,24 @@ const ServerEventHandler = function() {
const Utils = {
methods: {
runIcon(result) {
var marker = '⚙';
var classname = result;
if (result === 'success')
marker = '✔';
else if (result === 'failed' || result === 'aborted')
marker = '✘';
else
classname = 'spin';
return '<span title="' + result + '" class="status ' + classname + '">' + marker + '&#xfe0e;</span>';
return (result == 'success') ? /* checkmark */
`<svg class="status success" viewBox="0 0 100 100">
<path d="m 23,46 c -6,0 -17,3 -17,11 0,8 9,30 12,32 3,2 14,5 20,-2 6,-6 24,-36
56,-71 5,-3 -9,-8 -23,-2 -13,6 -33,42 -41,47 -6,-3 -5,-12 -8,-15 z" />
</svg>`
: (result == 'failed' || result == 'aborted') ? /* cross */
`<svg class="status failed" viewBox="0 0 100 100">
<path d="m 19,20 c 2,8 12,29 15,32 -5,5 -18,21 -21,26 2,3 8,15 11,18 4,-6 17,-21
21,-26 5,5 11,15 15,20 8,-2 15,-9 20,-15 -3,-3 -17,-18 -20,-24 3,-5 23,-26 30,-33 -3,-5 -8,-9
-12,-12 -6,5 -26,26 -29,30 -6,-8 -11,-15 -15,-23 -3,0 -12,5 -15,7 z" />
</svg>`
: /* spinner */
`<svg class="status running" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke-width="15" fill="none" stroke-dasharray="175">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="2s" values="0 50 50;360 50 50"></animateTransform>
</circle>
</svg>`
;
},
formatDate: function(unix) {
// TODO: reimplement when toLocaleDateString() accepts formatting options on most browsers
@ -145,7 +154,8 @@ const ProgressUpdater = {
var p = (Math.floor(Date.now()/1000) + this.$root.clockSkew - o.started) / (o.etc - o.started);
if (p > 1.2) {
o.overtime = true;
} else if (p >= 1) {
}
if (p >= 1) {
o.progress = 99;
} else {
o.progress = 100 * p;
@ -178,7 +188,8 @@ const Home = function() {
var state = {
jobsQueued: [],
jobsRecent: [],
resultChanged: []
resultChanged: [],
lowPassRates: [],
};
var chtUtilization, chtBuildsPerDay, chtBuildsPerJob, chtTimePerJob;
@ -201,6 +212,7 @@ const Home = function() {
state.jobsRunning = msg.running;
state.jobsRecent = msg.recent;
state.resultChanged = msg.resultChanged;
state.lowPassRates = msg.lowPassRates;
this.$forceUpdate();
// setup charts
@ -243,6 +255,7 @@ const Home = function() {
}]
},
options:{
title: { display: true, text: 'Builds per day' },
tooltips:{callbacks:{title: function(tip, data) {
return buildsPerDayDates[tip[0].index].long;
}}},
@ -263,6 +276,7 @@ const Home = function() {
}]
},
options:{
title: { display: true, text: 'Builds per job' },
scales:{xAxes:[{ticks:{userCallback: (label, index, labels)=>{
if(Number.isInteger(label))
return label;
@ -281,6 +295,7 @@ const Home = function() {
}]
},
options:{
title: { display: true, text: 'Mean run time this week' },
scales:{xAxes:[{
ticks:{userCallback: tpjScale.scale},
scaleLabel: {
@ -293,52 +308,6 @@ const Home = function() {
}}}
}
});
var chtResultChanges = new Chart(document.getElementById("chartResultChanges"), {
type: 'horizontalBar',
data: {
labels: msg.resultChanged.map((e)=>{ return e.name; }),
datasets: [{
//label: '% Passed',
backgroundColor: msg.resultChanged.map((e)=>{return e.lastFailure > e.lastSuccess ? 'firebrick' : 'forestgreen';}),
data: msg.resultChanged.map((e)=>{ return e.lastSuccess - e.lastFailure; }),
itemid: msg.resultChanged.map((e)=> { return 'rcd_' + e.name; })
}]
},
options:{
scales:{
xAxes:[{ticks:{display: false}}],
yAxes:[{ticks:{display: false}}]
},
tooltips:{
enabled:false
}
}
});
var chtPassRates = new Chart(document.getElementById("chartPassRates"), {
type: 'horizontalBar',
data: {
labels: msg.lowPassRates.map((e)=>{ return e.name }),
datasets: [{
stack: 'passrate',
label: '% Passed',
backgroundColor: "forestgreen",
data: msg.lowPassRates.map((e)=>{ return e.passRate*100; })
},{
stack:'passrate',
label: '% Failed',
backgroundColor: "firebrick",
data: msg.lowPassRates.map((e)=>{ return (1-e.passRate)*100; })
}],
},
options:{
scales:{xAxes:[{ticks:{callback:(val,idx,values)=>{
return val + '%';
}}}]},
tooltips:{
enabled:false
}
}
});
var btcScale = timeScale(Math.max(msg.buildTimeChanges.map((e)=>{return Math.max(e.durations)})));
var chtBuildTimeChanges = new Chart(document.getElementById("chartBuildTimeChanges"), {
type: 'line',
@ -352,6 +321,7 @@ const Home = function() {
}})
},
options:{
title: { display: true, text: 'Build time changes' },
legend:{display:true},
scales:{
xAxes:[{ticks:{display: false}}],
@ -377,6 +347,9 @@ const Home = function() {
data: msg.buildTimeDist,
backgroundColor: "steelblue",
}]
},
options: {
title: { display: true, text: 'Build time distribution' }
}
});
},
@ -573,6 +546,7 @@ var Job = function() {
}]
},
options: {
title: { display: true, text: 'Build time' },
scales:{
xAxes:[{},{
id: 'avg',
@ -651,9 +625,7 @@ const Run = function() {
job: { artifacts: [], upstream: {} },
latestNum: null,
log: '',
autoscroll: false
};
var firstLog = false;
const logFetcher = (vm, name, num) => {
const abort = new AbortController();
fetch('log/'+name+'/'+num, {signal:abort.signal}).then(res => {
@ -668,11 +640,6 @@ const Run = function() {
return;
state.log += ansi_up.ansi_to_html(value.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\033\[\{([^:]+):(\d+)\033\\/g, (m,$1,$2)=>{return '<a href="jobs/'+$1+'" onclick="return vroute(this);">'+$1+'</a>:<a href="jobs/'+$1+'/'+$2+'" onclick="return vroute(this);">#'+$2+'</a>';}));
vm.$forceUpdate();
if (!firstLog) {
firstLog = true;
} else if (state.autoscroll) {
window.scrollTo(0, document.body.scrollHeight);
}
return pump();
});
}();
@ -780,7 +747,8 @@ new Vue({
new Notification('Job ' + data.result, {
body: data.name + ' ' + '#' + data.number + ': ' + data.result
});
}
},
runIcon: Utils.methods.runIcon
},
watch: {
notify(e) { localStorage.setItem('showNotifications', e ? 1 : 0); }

21
src/resources/manifest.webmanifest
Unescape View File

@ -0,0 +1,21 @@
{
"short_name": "Laminar",
"name": "Laminar",
"description": "Lightweight Continuous Integration",
"icons": [
{
"src": "/icon.png",
"type": "image/png",
"sizes": "36x36"
},
{
"src": "/favicon-152.png",
"type": "image/png",
"sizes": "152x152"
}
],
"start_url": "/",
"background_color": "#2F3340",
"display": "standalone",
"scope": "/"
}

236
src/resources/style.css
Unescape View File

@ -0,0 +1,236 @@
/* colour scheme */
:root {
--main-bg: #fff;
--main-fg: #333;
--nav-bg: #2F3340;
--nav-bg-darker: #292b33;
--nav-fg: #d0d0d0;
--nav-fg-light: #fafafa;
--icon-enabled: #d8cb83;
--success: #74af77;
--failure: #883d3d;
--running: #4786ab;
--warning: #de9a34;
--link-fg: #2f4579;
--console-bg: #313235;
--console-fg: #fff;
--alt-row-bg: #fafafa;
--border-grey: #d0d0d0;
}
/* basic resets */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol, ul { list-style: none; }
body, html { height: 100%; }
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color: var(--main-fg);
}
/* main header bar */
#nav-top { background-color: var(--nav-bg); }
#nav-top-links { background-color: var(--nav-bg-darker); }
#nav-top a { color: var(--nav-fg); }
#nav-top a:hover { color: white; text-decoration: none; }
/* navbar svg icons (enable notifications) */
.nav-icon { display: inherit; }
.nav-icon svg { fill: var(--nav-fg); stroke: #000; }
.nav-icon:hover { cursor: pointer; }
.nav-icon:hover svg { fill: var(--nav-fg-light); }
.nav-icon.active svg { fill: var(--icon-enabled); }
/* anchors */
a { color: var(--link-fg); text-decoration: none; }
a:visited { color: var(--link-fg); }
a:active { color: var(--link-fg); }
a:hover { text-decoration: underline; }
/* charts */
canvas {
width: 100% !important;
max-width: 800px;
height: auto !important;
}
#popup-connecting {
position: fixed;
background: white;
border: 1px solid #ddd;
bottom: 10px;
right: 10px;
padding: 20px;
}
/* status icons */
.status {
display: inline-block;
width: 1em;
vertical-align: middle;
margin-top: -2px; /* pixel-pushing */
}
svg.success path { fill: var(--success); }
svg.failed path { fill: var(--failure); }
svg.running circle { stroke: var(--running); }
/* sort indicators */
a.sort {
position: relative;
margin-left: 7px;
}
a.sort:before, a.sort:after {
border: 4px solid transparent;
content: "";
position: absolute;
display: block;
height: 0;
width: 0;
right: 0;
top: 50%;
}
a.sort:before {
border-bottom-color: var(--border-grey);
margin-top: -9px;
}
a.sort:after {
border-top-color: var(--border-grey);
margin-top: 1px;
}
a.sort.dsc:after { border-top-color: var(--main-fg); }
a.sort.asc:before { border-bottom-color: var(--main-fg); }
a.sort:hover { text-decoration: none; cursor:pointer; }
a.sort:not(.asc):hover:before { border-bottom-color: var(--main-fg); }
a.sort:not(.dsc):hover:after { border-top-color: var(--main-fg); }
/* job group tabs */
a.active { color: var(--main-fg); }
a.active:hover { text-decoration: none; }
/* run console output */
.console-log { padding: 15px; background-color: var(--console-bg); }
.console-log code { white-space: pre-wrap; color: var(--console-fg); }
.console-log a { color: var(--console-fg); }
/* text input (job filtering) */
input { padding: 5px 8px; }
/* description list (run detail) */
dl { display: grid; grid-template-columns: auto 1fr; }
dt { text-align: right; font-weight: bold; min-width: 85px; }
dt,dd { line-height: 2; }
/* tables */
table { border-spacing: 0; width: 100%; }
th { text-align: left; border-bottom: 1px solid var(--border-grey); }
td, th { padding: 8px; }
table.striped td { border-top: 1px solid var(--border-grey); }
table.striped tr:nth-child(even) { background-color: var(--alt-row-bg); }
td:first-child, th:first-child { padding-left: 15px; }
td:last-child, th:last-child { padding-right: 15px; }
/* next/prev navigation buttons */
button {
border: 1px solid var(--border-grey);
background-color: var(--alt-row-bg);
padding: 6px;
min-width: 29px;
}
button[disabled] { cursor: not-allowed; color: var(--border-grey); }
button:not([disabled]) { cursor: pointer; color: var(--main-fg); }
/* progress bar */
.progress {
width: 100%;
height: 8px;
border: 1px solid;
border-radius: 4px;
overflow: hidden;
border-color: var(--border-grey);
background-color: var(--alt-row-bg);
}
.progress-bar {
height: 100%;
width: 100%;
background-color: var(--running);
background-image: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.18) 35% 65%, transparent 65%);
background-size: 1rem;
transition: width .6s linear;
}
.progress-bar.overtime { background-color: var(--warning); }
.progress-bar.indeterminate {
animation: animate-stripes 1s linear infinite;
}
@keyframes animate-stripes {
from { background-position: 1rem 0; } to { background-position: 0 0; }
}
/* connecting overlay */
#connecting-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: grid;
align-content: end; justify-content: end;
color: var(--nav-fg-light);
font-size: 18px;
padding: 30px;
visibility: hidden;
background-color: rgba(0,0,0,0.75);
opacity: 0;
transition: opacity 0.5s ease, visibility 0s 0.5s;
}
#connecting-overlay.shown {
visibility: visible;
opacity: 1;
transition: opacity 0.5s ease 2s;
}
#connecting-overlay > div { opacity: 1; }
/* responsive layout */
#page-home-main {
display: grid;
grid-template-columns: auto 1fr;
}
@media (max-width: 865px) {
#page-home-main {
grid-template-columns: 1fr;
}
.vp-sm-hide { display: none; }
}
#page-home-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 15px;
gap: 15px;
text-align: center;
}
@media (max-width: 650px) {
#page-home-stats {
grid-template-columns: 1fr;
}
}
#page-job-main {
display: grid;
grid-template: auto 1fr / minmax(550px, 1fr) 1fr;
}
@media (max-width: 965px) {
#page-job-main {
grid-template: auto auto 1fr / 1fr;
}
}
#page-run-detail {
display: grid;
grid-template-columns: minmax(400px, auto) 1fr;
gap: 5px;
}
@media (max-width: 780px) {
#page-run-detail {
grid-template-columns: 1fr;
}
}
Write Preview
Loading…
Cancel
Save