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
Show 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): ...@@ -33,7 +33,16 @@ def create_app(manager):
branches.sort(key=lambda branch: branch.name) branches.sort(key=lambda branch: branch.name)
branches.sort(key=lambda branch: branch.pinned, reverse=True) 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") @app.route("/+logs/<branch>/build.log")
def build_log(branch): 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 /* A program which manages Ubuntu-it's web test server
* Copyright (C) 2015-2016 Pietro Albini <pietroalbini@ubuntu.com> * Copyright (C) 2015-2016 Pietro Albini <pietroalbini@ubuntu.com>
* 2016 Luca Lumetti <lumetti.luca@gmail.com> * 2016 Luca Lumetti <lumetti.luca@gmail.com>
*
* This program is free software: you can redistribute it and/or modify * 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 * 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 * by the Free Software Foundation, either version 3 of the License, or
...@@ -16,6 +17,7 @@ ...@@ -16,6 +17,7 @@
*/ */
@charset "utf-8"; @charset "utf-8";
body { body {
font-family: sans-serif; font-family: sans-serif;
color: #333; color: #333;
...@@ -65,7 +67,7 @@ th#branch-name{ ...@@ -65,7 +67,7 @@ th#branch-name{
} }
th#state{ th#state{
width: 15%; width: 2%;
} }
th#author{ th#author{
...@@ -76,6 +78,10 @@ th#merge-request{ ...@@ -76,6 +78,10 @@ th#merge-request{
width: 7%; width: 7%;
} }
th#commit {
width: 13%;
}
th#build-log{ th#build-log{
width: 10%; width: 10%;
} }
...@@ -84,48 +90,51 @@ th#live{ ...@@ -84,48 +90,51 @@ th#live{
width: 13%; width: 13%;
} }
div.footer div { ul.inline {
color: #aaa; margin: 0.5em 0;
font-size: 0.9em;
margin: 0;
padding: 0; padding: 0;
} }
div.footer div { ul.inline li {
display: inline-block; 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; margin-left: 0;
} }
ul.footer {
color: #aaa;
font-size: 0.9em;
margin: 1.5em 0;
}
span.dot { span.dot {
background-position: 0 50%; background-position: 0 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
height: 14px; height: 14px;
width: 14px; width: 14px;
overflow: hidden;
color: transparent;
line-height: 56px;
} }
span.dot-warn { span.dot-broken {
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"); 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-informative { span.dot-not-present {
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"); background-image: url("/+assets/icons/not-present.svg");
} }
span.dot-positive { span.dot-running {
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"); background-image: url("/+assets/icons/running.svg");
} }
span.dot-loading { span.dot-deploying {
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"); background-image: url("/+assets/icons/deploying.svg");
animation-name: rotation; animation-name: rotation;
animation-duration: 1.5s; animation-duration: 1.5s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
...@@ -140,97 +149,34 @@ span.dot-loading { ...@@ -140,97 +149,34 @@ span.dot-loading {
} }
} }
ul { div.mobile {
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 {
display: none; display: none;
} }
ul li.root:after { div.mobile div.branch {
display: none; margin: 2em 0;
} }
ul li:last-child:after { div.mobile div.branch h3 {
display: none; font-weight: 400;
margin: 0 0 0.7em 0;
} }
div.mobile{ div.mobile div.branch h3 span.dot {
display: none; margin-left: 0.4em;
} }
@media all and (max-width: 52em) { @media all and (max-width: 52em) {
table.branches{ table.branches{
display: none; display: none;
} }
div.mobile { 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; display: block;
margin: 0.5em 0;
} }
}
@media all and (max-width: 30em) { div.wrapper {
span.extra { width: 95%;
margin-top: 0.1em;
display: block;
}
span.extra small:first-child {
margin-left: 0;
} }
} }
managetests/frontend/templates/index.html
View file @ 3af66a35
...@@ -15,16 +15,19 @@ ...@@ -15,16 +15,19 @@
# You should have received a copy of the GNU Affero General Public License # 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/>. # along with this program. If not, see http://www.gnu.org/licenses/>.
#} #}
{% extends "layout.html" %} {% extends "layout.html" %}
{% set title = "Branch disponibili" %} {% set title = "Branch disponibili" %}
{% block content %} {% block content %}
<table class="branches"> <table class="branches">
<thead> <thead>
<tr> <tr>
<th id="branch-name">Nome branch</th> <th id="branch-name">Nome branch</th>
<th id="state">Stato</th> <th id="state"></th>
<th id="author">Proprietario</th> <th id="author">Proprietario</th>
<th id="merge-request">MR</th> <th id="merge-request">MR</th>
<th id="commit">Commit</th>
<th id="build-log"></th> <th id="build-log"></th>
<th id="live"></th> <th id="live"></th>
</tr> </tr>
...@@ -36,13 +39,13 @@ ...@@ -36,13 +39,13 @@
<td> <td>
{% set status = branch.status() %} {% set status = branch.status() %}
{% if status == "deploying" %} {% if status == "deploying" %}
<span class="dot dot-informative"></span> <span class="dot dot-deploying">Deploying</span>
{% elif status == "not_present" %} {% elif status == "not_present" %}
<span class="dot dot-warning"></span> <span class="dot dot-not-present">Not present</span>
{% elif status == "running" %} {% elif status == "running" %}
<span class="dot dot-positive"></span> <span class="dot dot-running">Running</span>
{% elif status == "broken" %} {% elif status == "broken" %}
<span class="dot dot-negative"></span> <span class="dot dot-broken">Broken</span>
{% else %} {% else %}
{{ status }} {{ status }}
{% endif %} {% endif %}
...@@ -58,9 +61,10 @@ ...@@ -58,9 +61,10 @@
<a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a> <a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
</td> </td>
{% endif %} {% endif %}
<td>-</td>
<td> <td>
{% if branch.has_build_log() %} {% 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>
<td> <td>
{% if branch.is_running() %} {% if branch.is_running() %}
...@@ -70,32 +74,53 @@ ...@@ -70,32 +74,53 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<div class="mobile"> <div class="mobile">
{% for branch in branches %} {% for branch in branches %}
<ul> <div class="branch">
<li class="root"> <h3>
{{ branch.name }} {{ branch.name }}
{% if not branch.pinned %}
<span class="author">(<a href="{{ branch.author_url }}">{{ branch.author }}</a>)</span> {% set status = branch.status() %} {% if status == "deploying" %}
{% endif %} {% set status = branch.status() %} {% if status == "deploying" %} <span class="dot dot-deploying">(deploying)</span>
<span class="dot dot-informative"></span>
{% elif status == "not_present" %} {% elif status == "not_present" %}
<span class="dot dot-warning"></span> <span class="dot dot-not-present">(not present)</span>
{% elif status == "running" %} {% elif status == "running" %}
<span class="dot dot-positive"></span> <span class="dot dot-running">(running)</span>
{% elif status == "broken" %} {% elif status == "broken" %}
<span class="dot dot-negative"></span> <span class="dot dot-broken">(broken)</span>
{% else %} {{ status }} {% endif %} {% else %}<span>({{ status }})</span>{% endif %}
</li> </h3>
{% if not branch.pinned %} {% if not branch.pinned %}
<li><a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a></li> <ul class="inline">
{% endif %} {% if branch.has_build_log() %} <li>
<li><a href="{{ url_for(" build_log ", branch=branch.name) }}">Build log</a>Build Log</a> MR <a href="{{ branch.mr_url }}">!{{ branch.mr_id }}</a>
di <a href="{{ branch.author_url }}">{{ branch.author }}</a>
</li>
</ul>
{% endif %}
<ul class="inline">
{% if branch.has_build_log() %}
<li><a href="{{ url_for("build_log", branch=branch.name) }}">Build log</a></a>
{% endif %}
</li> </li>
{% if branch.is_running() %} {% if branch.is_running() %}
<li><a href="/{{ branch.name }}/">Istanza live</a></li> <li><a href="/{{ branch.name }}/">Istanza live</a></li>
{% endif %} {% endif %}
</ul> </ul>
</div>
{% endfor %} {% endfor %}
</div> </div>
{% if deploying %}
<script type="text/javascript">
// Reload the page after 30 seconds
window.setTimeout(function() {
location.reload();
}, 15000);
</script>
{% endif %}
{% endblock %} {% endblock %}
managetests/frontend/templates/layout.html
View file @ 3af66a35
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<hr> <hr>
{% block content %}{% endblock %} {% block content %}{% endblock %}
<hr> <hr>
<ul class="footer"> <ul class="inline footer">
<li> <li>
Questo è managetests, realizzato con &#9829; dal Gruppo Web Questo è managetests, realizzato con &#9829; dal Gruppo Web
di Ubuntu-it. 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