Skip to content

M
Managetests
Commit 3af66a35 authored by Pietro Albini's avatar Pietro Albini
Browse files
Options

Complete the new frontend 

- Fixed a few errors of the previous commit
- Restyled the mobile view
- Moved the icons to dedicated svg files
- Added automatic reloading of the index when deploying
parent 062e9a0d
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 124 deletions
managetests/frontend/__init__.py
View file @ 3af66a35
......@@ -33,7 +33,16 @@ def create_app(manager):
branches.sort(key=lambda branch: branch.name)
branches.sort(key=lambda branch: branch.pinned, reverse=True)
return flask.render_template("index.html", branches=branches)
deploying = False
for branch in branches:
if branch.status() == "deploying":
deploying = True
break
return flask.render_template("index.html",
branches=branches,
deploying=deploying,
)
@app.route("/+logs/<branch>/build.log")
def build_log(branch):
......
managetests/frontend/static/icons/broken.svg 0 → 100644
View file @ 3af66a35
<!-- Copyright (c) 2016 Luca Lumetti <lumetti.luca@gmail.com> -->
<!-- Released under the GNU-AGPL v3+ license. See LICENSE for details -->
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'>
<circle fill='#d73024' cx='7' cy='7' r='7'/>
<path fill='#fff' d='M4.5,3.5 L7,6 L9.5,3.5 L10.5,4.5 L8,7 L10.5,9.5 L9.5,10.5 L7,8 L4.5,10.5 L3.5,9.5 L6,7 L3.5,4.5 4.5,3.5z' />
</svg>
managetests/frontend/static/icons/deploying.svg 0 → 100644
View file @ 3af66a35
<!-- Copyright (c) 2016 Luca Lumetti <lumetti.luca@gmail.com> -->
<!-- Released under the GNU-AGPL v3+ license. See LICENSE for details -->
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'>
<circle fill='#007aa6' cx='7' cy='7' r='7' />
<circle fill='#ffffff' cx='7' cy='7' r='4.75' />
<circle fill='#007aa6' cx='7' cy='7' r='3' />
<path fill='#007aa6' d='M7,7 L11.75,7 L11.75,11.75 L7,11.75 7,7z' />
<path fill='#ffffff' d='M8.75,7 L12.75,7 L10.8765,9.5 8.5,7z' />
</svg>
managetests/frontend/static/icons/not-present.svg 0 → 100644
View file @ 3af66a35
<!-- Copyright (c) 2016 Luca Lumetti <lumetti.luca@gmail.com> -->
<!-- Released under the GNU-AGPL v3+ license. See LICENSE for details -->
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'>
<circle fill='#007aa6' cx='7' cy='7' r='7'/>
<path fill='#fff' d='M6,2.5 L8,2.5 L8,8 L6,8 L6,11.5 L8,11.5 L8,9.5 L6,9.5 6,2.5z' />
</svg>
managetests/frontend/static/icons/running.svg 0 → 100644
View file @ 3af66a35
<!-- Copyright (c) 2016 Luca Lumetti <lumetti.luca@gmail.com> -->
<!-- Released under the GNU-AGPL v3+ license. See LICENSE for details -->
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'>
<circle fill='#0f8420' cx='7' cy='7' r='7'/>
<path fill='#fff' d='M6 11 L2.5 8 l1.5,-1.5 L6,8 l4.2,-3.7 1.5,1.5z' />
</svg>
managetests/frontend/static/style.css
View file @ 3af66a35
/* A program which manages Ubuntu-it's web test server
* Copyright (C) 2015-2016 Pietro Albini <pietroalbini@ubuntu.com>
* 2016 Luca Lumetti <lumetti.luca@gmail.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
......@@ -16,6 +17,7 @@
*/
@charset "utf-8";
body {
font-family: sans-serif;
color: #333;
......@@ -65,7 +67,7 @@ th#branch-name{
}
th#state{
width: 15%;
width: 2%;
}
th#author{
......@@ -76,6 +78,10 @@ th#merge-request{
width: 7%;
}
th#commit {
width: 13%;
}
th#build-log{
width: 10%;
}
......@@ -84,48 +90,51 @@ th#live{
width: 13%;
}
div.footer div {
color: #aaa;
font-size: 0.9em;
margin: 0;
ul.inline {
margin: 0.5em 0;
padding: 0;
}
div.footer div {
ul.inline li {
display: inline-block;
margin: 0 0 0 1em;
margin: 0.2em 0 0.2em 1em;
}
div.footer div:first-child {
ul.inline li:first-child {
margin-left: 0;
}
ul.footer {
color: #aaa;
font-size: 0.9em;
margin: 1.5em 0;
}
span.dot {
background-position: 0 50%;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
width: 14px;
overflow: hidden;
color: transparent;
line-height: 56px;
}
span.dot-warn {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23d73024' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='m271.459,73.426c-3.48-1.74-10.441,0-12.181,3.48l-19.106,32.244c-12.72-53.752-60.4-93.149-118.363-93.149-67.865,0.001-121.809,53.945-121.809,121.81s53.944,121.808 121.808,121.808c5.22,0 8.701-3.48 8.701-8.701s-3.48-8.701-8.701-8.701c-57.424,0-104.407-46.983-104.407-104.407s46.984-104.406 104.407-104.406c51.281,7.10543e-15 94.123,37.5 102.737,86.397l-40.092-23.752c-5.22-1.74-10.441,0-12.181,3.48-1.74,5.22 0,10.441 3.48,12.181l53.944,33.062c1.74,1.74 3.48,1.74 5.22,1.74 0,0 1.74,0 1.74-3.48 1.74,0 3.48-1.74 5.22-3.48l1.062-1.74h0.679c0-0.348-0.052-0.679-0.052-1.01l31.375-51.194c1.739-5.221-0.001-10.442-3.481-12.182zs' /%3E%3C/svg%3E");
span.dot-broken {
background-image: url("/+assets/icons/broken.svg");
}
span.dot-negative {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23d73024' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M4.5,3.5 L7,6 L9.5,3.5 L10.5,4.5 L8,7 L10.5,9.5 L9.5,10.5 L7,8 L4.5,10.5 L3.5,9.5 L6,7 L3.5,4.5 4.5,3.5z' /%3E%3C/svg%3E");
span.dot-not-present {
background-image: url("/+assets/icons/not-present.svg");
}
span.dot-informative {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23f99b11' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M6,2.5 L8,2.5 L8,8 L6,8 L6,11.5 L8,11.5 L8,9.5 L6,9.5 6,2.5z' /%3E%3C/svg%3E");
span.dot-running {
background-image: url("/+assets/icons/running.svg");
}
span.dot-positive {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%230f8420' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M6 11 L2.5 8 l1.5,-1.5 L6,8 l4.2,-3.7 1.5,1.5z' /%3E%3C/svg%3E");
}
span.dot-loading {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='%23007aa6' cx='7' cy='7' r='7'/%3E%3Ccircle fill='%23ffffff' cx='7' cy='7' r='4.75'/%3E%3Ccircle fill='%23007aa6' cx='7' cy='7' r='3'/%3E%3Cpath fill='%23007aa6' d='M7,7 L11.75,7 L11.75,11.75 L7,11.75 7,7z' /%3E%3Cpath fill='%23ffffff' d='M8.75,7 L12.75,7 L10.8765,9.5 8.5,7z' /%3E%3C/svg%3E");
span.dot-deploying {
background-image: url("/+assets/icons/deploying.svg");
animation-name: rotation;
animation-duration: 1.5s;
animation-iteration-count: infinite;
......@@ -140,97 +149,34 @@ span.dot-loading {
}
}
ul {
width: 200px;
margin: 20px 30px;
list-style: none;
text-align: left;
padding: 0;
line-height: 1.3em;
justify-content: flex-start;
flex: 1 auto;
}
ul li {
font-size: 16px;
position: relative;
padding: 5px 0 10px 10px;
}
ul li span.author {
font-size: 14px;
}
ul li:before {
position: absolute;
left: -15px;
top: 0px;
content: '';
display: block;
border-left: 1px solid #aaa;
height: 1em;
border-bottom: 1px solid #aaa;
width: 20px;
}
ul li:after {
position: absolute;
left: -15px;
bottom: -7px;
content: '';
display: block;
border-left: 1px solid #aaa;
height: 100%;
}
ul li.root {
margin: 0px 0px 0px -20px;
padding: 0 0 10px 0;
font-size: 22px;
}
ul li.root:before {
div.mobile {
display: none;
}
ul li.root:after {
display: none;
div.mobile div.branch {
margin: 2em 0;
}
ul li:last-child:after {
display: none;
div.mobile div.branch h3 {
font-weight: 400;
margin: 0 0 0.7em 0;
}
div.mobile{
display: none;
div.mobile div.branch h3 span.dot {
margin-left: 0.4em;
}
@media all and (max-width: 52em) {
table.branches{
display: none;
}
div.mobile {
display: flex;
justify-content: stretch;
align-content: flex-start;
flex-flow: row wrap;
margin: 0 auto;
}
div.wrapper {
width: 96%;
}
div.footer div {
display: block;
margin: 0.5em 0;
table.branches{
display: none;
}
}
@media all and (max-width: 30em) {
span.extra {
margin-top: 0.1em;
div.mobile {
display: block;
}
span.extra small:first-child {
margin-left: 0;
div.wrapper {
width: 95%;
}
}
managetests/frontend/templates/index.html
View file @ 3af66a35
......@@ -15,16 +15,19 @@
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see http://www.gnu.org/licenses/>.
#}
{% extends "layout.html" %}
{% set title = "Branch disponibili" %}
{% block content %}
<table class="branches">
<thead>
<tr>
<th id="branch-name">Nome branch</th>
<th id="state">Stato</th>
<th id="state"></th>
<th id="author">Proprietario</th>
<th id="merge-request">MR</th>
<th id="commit">Commit</th>
<th id="build-log"></th>
<th id="live"></th>
</tr>
......@@ -36,13 +39,13 @@
<td>
{% set status = branch.status() %}
{% if status == "deploying" %}
<span class="dot dot-informative"></span>
<span class="dot dot-deploying">Deploying</span>
{% elif status == "not_present" %}
<span class="dot dot-warning"></span>
<span class="dot dot-not-present">Not present</span>
{% elif status == "running" %}
<span class="dot dot-positive"></span>
<span class="dot dot-running">Running</span>
{% elif status == "broken" %}
<span class="dot dot-negative"></span>
<span class="dot dot-broken">Broken</span>
{% else %}
{{ status }}
{% endif %}
......@@ -58,9 +61,10 @@
<a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
</td>
{% endif %}
<td>-</td>
<td>
{% if branch.has_build_log() %}
<a href="{{ url_for(" build_log ", branch=branch.name) }}">Build log</a> {% endif %}
<a href="{{ url_for("build_log", branch=branch.name) }}">Build log</a> {% endif %}
</td>
<td>
{% if branch.is_running() %}
......@@ -70,32 +74,53 @@
{% endfor %}
</tbody>
</table>
<div class="mobile">
{% for branch in branches %}
<ul>
<li class="root">
<div class="branch">
<h3>
{{ branch.name }}
{% if not branch.pinned %}
<span class="author">(<a href="{{ branch.author_url }}">{{ branch.author }}</a>)</span>
{% endif %} {% set status = branch.status() %} {% if status == "deploying" %}
<span class="dot dot-informative"></span>
{% set status = branch.status() %} {% if status == "deploying" %}
<span class="dot dot-deploying">(deploying)</span>
{% elif status == "not_present" %}
<span class="dot dot-warning"></span>
<span class="dot dot-not-present">(not present)</span>
{% elif status == "running" %}
<span class="dot dot-positive"></span>
<span class="dot dot-running">(running)</span>
{% elif status == "broken" %}
<span class="dot dot-negative"></span>
{% else %} {{ status }} {% endif %}
</li>
<span class="dot dot-broken">(broken)</span>
{% else %}<span>({{ status }})</span>{% endif %}
</h3>
{% if not branch.pinned %}
<li><a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a></li>
{% endif %} {% if branch.has_build_log() %}
<li><a href="{{ url_for(" build_log ", branch=branch.name) }}">Build log</a>Build Log</a>
</li>
{% if branch.is_running() %}
<li><a href="/{{ branch.name }}/">Istanza live</a></li>
<ul class="inline">
<li>
MR <a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
di <a href="{{ branch.author_url }}">{{ branch.author }}</a>
</li>
</ul>
{% endif %}
</ul>
<ul class="inline">
{% if branch.has_build_log() %}
<li><a href="{{ url_for("build_log", branch=branch.name) }}">Build log</a></a>
{% endif %}
</li>
{% if branch.is_running() %}
<li><a href="/{{ branch.name }}/">Istanza live</a></li>
{% endif %}
</ul>
</div>
{% endfor %}
</div>
{% if deploying %}
<script type="text/javascript">
// Reload the page after 30 seconds
window.setTimeout(function() {
location.reload();
}, 15000);
</script>
{% endif %}
{% endblock %}
managetests/frontend/templates/layout.html
View file @ 3af66a35
......@@ -28,7 +28,7 @@
<hr>
{% block content %}{% endblock %}
<hr>
<ul class="footer">
<ul class="inline footer">
<li>
Questo è managetests, realizzato con &#9829; dal Gruppo Web
di Ubuntu-it.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment