Skip to content

Commit a95f08d

Browse files
agjohnsonagjohnson
committed
HTML and CSS for build detail page
1 parent 73a8bc0 commit a95f08d

File tree

2 files changed

+290
-78
lines changed

2 files changed

+290
-78
lines changed

‎readthedocs/builds/static/builds/css/detail.css

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
/* Build detail styles */
2+
3+
div.build-detail div.build-id {
4+
font-size: 1.5em;
5+
}
6+
7+
div.build-detail div.build-version {
8+
line-height: 2em;
9+
}
10+
11+
div.build-detail div.build-version span.build-commit {
12+
color: #887;
13+
font-style: italic;
14+
}
15+
16+
div.build-detail div.build-state {
17+
margin: .7em 0em 1em 0em;
18+
font-size: 1.2em;
19+
}
20+
21+
div.build-detail div.build-state > span.build-state-successful,
22+
div.build-detail div.build-state > span.build-state-failed {
23+
padding: .3em .5em;
24+
border-radius: .3em;
25+
-moz-border-radius: .3em;
26+
-ms-border-radius: .3em;
27+
-webkit-border-radius: .3em;
28+
color: white;
29+
}
30+
31+
div.build-detail div.build-state > span.build-state-failed {
32+
background: #a55;
33+
}
34+
div.build-detail div.build-state > span.build-state-successful {
35+
background: #5a5;
36+
}
37+
38+
ul.build-meta {
39+
display: block;
40+
width: 40%;
41+
float: right;
42+
overflow: auto;
43+
font-size: .9em;
44+
text-align: right;
45+
}
46+
47+
/* Error box */
48+
div.build-detail div.build-error {
49+
padding: .3em .5em;
50+
margin: .3em;
51+
border: 2px solid #a55;
52+
border-radius: .2em;
53+
-moz-border-radius: .2em;
54+
-ms-border-radius: .2em;
55+
-webkit-border-radius: .2em;
56+
color: #a55;
57+
}
58+
59+
div.build-detail div.build-error h3 {
60+
text-shadow: none;
61+
font-weight: normal;
62+
color: #a55;
63+
}
64+
65+
div.build-detail div.build-error p {
66+
margin-bottom: 0em;
67+
}
68+
69+
/* Build command list */
70+
div#build-commands {
71+
clear: right;
72+
}
73+
74+
div.build-command {
75+
padding: .5em;
76+
margin: 5px;
77+
font-size: .9em;
78+
background: #eee;
79+
color: #443;
80+
border: 1px solid #e4e4e4;
81+
border-bottom-color: #ddd;
82+
83+
border-radius: .3em;
84+
-moz-border-radius: .3em;
85+
-webkit-border-radius: .3em;
86+
-ms-border-radius: .3em;
87+
}
88+
89+
div.build-command.build-command-failed {
90+
background: #a55;
91+
color: white;
92+
}
93+
94+
div.build-command div.build-command-run,
95+
div.build-command div.build-command-output {
96+
display: block;
97+
overflow: hidden;
98+
}
99+
100+
div.build-command div.build-command-run {
101+
cursor: pointer;
102+
}
103+
104+
div.build-command div.build-command-output {
105+
margin-top: .5em;
106+
}
107+
108+
div.build-command div.build-command-run > span,
109+
div.build-command div.build-command-output > span {
110+
display: block;
111+
margin-bottom: -16px;
112+
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
113+
white-space: pre;
114+
overflow-x: scroll;
115+
overflow-y: hidden;
116+
}
117+
118+
div.build-command div.build-command-run > span::-webkit-scrollbar,
119+
div.build-command div.build-command-output > span::-webkit-scrollbar {
120+
-webkit-appearance: none;
121+
height: 15px;
122+
}
123+
124+
div.build-command div.build-command-output > span {
125+
padding: .5em;
126+
}
127+
128+
div.build-command div.build-command-output,
129+
div.build-command div.build-command-meta {
130+
background: #443;
131+
color: #ffe;
132+
}
133+
134+
div.build-command div.build-command-meta {
135+
padding: .5em;
136+
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
137+
text-align: right;
138+
color: #bba;
139+
}
140+
141+
div.build-command.build-command-failed div.build-command-meta {
142+
color: #a55;
143+
}

‎readthedocs/templates/builds/build_detail.html

Lines changed: 147 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,168 @@
11
{% extends "projects/base_project.html" %}
22

33
{% load i18n %}
4+
{% load static %}
45

56
{% block title %}{{ build.project.name }}{% endblock %}
67

8+
{% block extra_scripts %}
9+
<script type="text/javascript" src="{% static 'vendor/knockout.js' %}"></script>
10+
<script type="text/javascript" src="{% static 'builds/js/detail.js' %}"></script>
11+
<script type="text/javascript">
12+
$(document).ready(function () {
13+
var view = build.BuildDetailView.init({{ build_json|safe }});
14+
});
15+
</script>
16+
{% endblock %}
717

8-
{% block project_editing %}
9-
{% with builds_active="active" %}
10-
{% include "core/project_bar.html" %}
11-
{% endwith %}
18+
{% block extra_links %}
19+
<link rel="stylesheet" href="{% static 'builds/css/detail.css' %}" />
1220
{% endblock %}
1321

14-
{% block content-header %}<h1>{% blocktrans with build.project.name as project_name %}Build for {{ project_name }}{% endblocktrans %}</h1>{% endblock %}
22+
{% block project_editing %}
23+
{% with builds_active="active" %}
24+
{% include "core/project_bar.html" %}
25+
{% endwith %}
26+
{% endblock %}
1527

1628
{% block content %}
17-
<div id="build-{{ build.id }}" class="build">
18-
<p>{% blocktrans with build.date|date:"N j, Y. P" as build_date %}Built: {{ build_date }}{% endblocktrans %}</p>
19-
20-
<p>{% trans "State:" %} <b><span id="build-state">{{ build.get_state_display }}</span></b>
21-
<img src="{{ MEDIA_URL }}images/loader.gif" class="hide build-loading">
22-
</p>
23-
24-
<p>{% trans "Outcome:" %}
25-
<b>
26-
<span id="build-success">
27-
{% if build.state != 'finished' %}{% trans "Not yet finished" %} {% else %} {% if build.success %}{% trans "Passed" %}{% else %}{% trans "Failed" %}{% endif %}{% endif %} {% if not build.success %} ({% trans "Status Code:" %} {{ build.exit_code }}){% endif %}
28-
</span>
29-
</b>
30-
</p>
31-
32-
{% if build.version %}
33-
<p>{% trans "Version:" %} <b>{{ build.version.slug }}</b></p>
34-
{% endif %}
35-
36-
<p>{% trans "Type:" %} <b>{{ build.type }}</b></p>
37-
38-
{% if build.commit %}
39-
<p>{% trans "Commit" %}: <b>{{ build.commit }}</b></p>
40-
{% endif %}
41-
42-
{% if build.length %}
43-
<p>{% trans "Length:" %} <b>{{ build.length }}</b> seconds</p>
44-
{% endif %}
45-
46-
{% if build.builder and request.user.is_staff %}
47-
<p>{% trans "Builder:" %} <b>{{ build.builder }}</b></p>
48-
{% endif %}
29+
<div class="build build-detail" id="build-detail">
30+
31+
<!-- Build meta data -->
32+
<ul class="build-meta">
33+
<div data-bind="visible: finished()">
34+
<li>
35+
{% trans "Completed" %}
36+
<span>{{ build.date|date:"N j, Y. P" }}</span>
37+
</li>
38+
39+
<li>
40+
{% trans "Build took" %}
41+
<span data-bind="text: length">
42+
{{ build.length }}
43+
</span>
44+
{% trans "seconds" %}
45+
</li>
46+
</div>
47+
48+
{% if build.builder and request.user.is_staff %}
49+
<li>
50+
{% trans "Built on" %}
51+
{{ build.builder }}
52+
</li>
53+
{% endif %}
54+
</ul>
4955

50-
<p>
51-
<button id="build-show-full-output">
52-
{% trans "Show full build output" %}
53-
</button>
54-
</p>
56+
<div class="build-id">
57+
{% blocktrans with build_id=build.pk %}
58+
Build #{{ build_id }}
59+
{% endblocktrans %}
60+
</div>
5561

56-
<div id="build-output-wrapper" style="display: none;">
57-
<h3>{% trans "Build Output" %}</h3>
58-
<pre class="build-output"><span id="build-output">{{ build.output }}</span></pre>
62+
<div class="build-version">
63+
<span class="build-version-slug">
64+
{{ build.version.slug }}
65+
</span>
66+
<span class="build-commit"
67+
data-bind="visible: commit">
68+
(<span data-bind="text: commit">{{ build.commit }}</span>)
69+
</span>
70+
</div>
5971

60-
{% if build.setup %}
61-
<h3>{% trans "Setup Output" %}</h3>
62-
<pre class="build-output"><span id="build-setup">{{ build.setup }}</span></pre>
63-
{% endif %}
72+
<div class="build-state">
73+
<span>
74+
<span data-bind="visible: !finished(), text: state_display"
75+
style="display: none;">
76+
{{ build.get_state_display }}
77+
</span>
78+
<img src="{{ MEDIA_URL }}images/loader.gif"
79+
data-bind="visible: !finished()"
80+
style="display: none;" />
81+
</span>
82+
<span class="build-state-successful"
83+
data-bind="visible: finished() && success()"
84+
style="display: none;">
85+
{% trans "Build completed" %}
86+
</span>
87+
<span class="build-state-failed"
88+
data-bind="visible: finished() && !success()"
89+
style="display: none;">
90+
{% trans "Build failed" %}
91+
</span>
92+
</div>
6493

65-
{% if build.setup_error %}
66-
<h3>{% trans "Environment Standard Error" %}</h3>
67-
<pre class="build-error"><span id="build-setup_error">{{ build.setup_error }}</span></pre>
94+
{% if build.output %}
95+
{# If we have build output, this is an old build #}
96+
<p>
97+
<button data-bind="visible: !legacy_output(), click: show_legacy_output">
98+
{% trans "Show full build output" %}
99+
</button>
100+
</p>
101+
102+
<div data-bind="visible: legacy_output"
103+
style="display: none;">
104+
<h3>{% trans "Build Output" %}</h3>
105+
<pre class="build-output"><span id="build-output">{{ build.output }}</span></pre>
106+
107+
{% if build.setup %}
108+
<h3>{% trans "Setup Output" %}</h3>
109+
<pre class="build-output"><span id="build-setup">{{ build.setup }}</span></pre>
110+
{% endif %}
111+
112+
{% if build.setup_error %}
113+
<h3>{% trans "Environment Standard Error" %}</h3>
114+
<pre class="build-error"><span id="build-setup_error">{{ build.setup_error }}</span></pre>
115+
{% endif %}
116+
</div>
117+
118+
{% if build.error %}
119+
<h3>{% trans "Build Errors" %}</h3>
120+
<pre class="build-error"><span id="build-error">{{ build.error }}</span></pre>
68121
{% endif %}
69-
</div>
70122

71-
{% if build.error %}
72-
<h3>{% trans "Build Errors" %}</h3>
73-
<pre class="build-error"><span id="build-error">{{ build.error }}</span></pre>
123+
{% else %}
124+
{# Show new command output if lacking build.output #}
125+
126+
<div class="build-error"
127+
data-bind="visible: error"
128+
style="display: none;">
129+
<h3>{% trans "Error" %}</h3>
130+
<p class="build-error"
131+
data-bind="text: error">
132+
{{ build.error }}
133+
</p>
134+
</div>
135+
136+
<div id="build-commands"
137+
data-bind="visible: commands, foreach: display_commands"
138+
style="display: none;">
139+
<div class="build-command"
140+
data-bind="css: command_status">
141+
<div class="build-command-run" data-bind="click: toggleCommand">
142+
<span data-bind="text: command"></span>
143+
</div>
144+
<div class="build-command-return"
145+
data-bind="visible: is_showing">
146+
<div class="build-command-output">
147+
<span data-bind="text: output"></span>
148+
</div>
149+
150+
<div class="build-command-meta">
151+
<span class="build-command-time">
152+
{% trans "Command time:" %}
153+
<span data-bind="text: run_time">0</span>s
154+
</span>
155+
156+
<span class="build-command-exit-code">
157+
{% trans "Return" %}:
158+
<span data-bind="text: exit_code"></span>
159+
</span>
160+
</div>
161+
162+
</div>
163+
</div>
164+
</div>
74165
{% endif %}
75166

76167
</div>
77-
<form id="form" style="display: none;">
78-
<input type="submit">
79-
</form>
80-
{% endblock %}
81-
82-
{% block extra_scripts %}
83-
{{ block.super }}
84-
<script type="text/javascript" src="{{ MEDIA_URL }}javascript/build_updater.js"></script>
85-
86-
<script type="text/javascript">
87-
/* TODO Re-enable this, move to browserify module
88-
$(function() {
89-
new BuildUpdater({{ build.id }}).startPolling();
90-
});
91-
*/
92-
$(document).ready(function () {
93-
$('#build-show-full-output').click(function (ev) {
94-
$('#build-output-wrapper').show();
95-
this.remove();
96-
});
97-
})
98-
</script>
99168
{% endblock %}

0 commit comments

Comments
 (0)