Skip to content

Commit ff2e895

Browse files
keshav-spacekeshav-space
committed
Use full available screen width in run details view
Signed-off-by: Keshav Priyadarshi <git@keshav.space>
1 parent 15d338c commit ff2e895

File tree

1 file changed

+136
-135
lines changed

1 file changed

+136
-135
lines changed

‎vulnerabilities/templates/pipeline_run_details.html‎

Lines changed: 136 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -34,161 +34,162 @@
3434
{% endblock %}
3535

3636
{% block content %}
37-
<div class="container">
38-
<a href="{% url 'runs-list' pipeline_id=run.pipeline.pipeline_id %}" class="button is-info my-4">
39-
<i class="fa fa-arrow-left mr-2"></i>Back to All Runs
40-
</a>
41-
<h1 class="title">{{ pipeline_name }} Run Log</h1>
42-
<hr>
37+
<div class="container is-fluid">
38+
<div class="columns is-centered">
39+
<div class="column is-two-thirds">
40+
<a href="{% url 'runs-list' pipeline_id=run.pipeline.pipeline_id %}" class="button is-info my-4">
41+
<i class="fa fa-arrow-left mr-2"></i>Back to All Runs
42+
</a>
43+
<h1 class="title">{{ pipeline_name }} Run Log</h1>
44+
<hr>
4345

44-
<div class="box has-background-info-light is-light p-4">
45-
<div class="columns is-multiline is-vcentered is-mobile is-gapless">
46-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
47-
<p class="is-size-7 has-text-weight-semibold">Pipeline ID</p>
48-
<p class="has-text-grey is-size-7 mr-2">
49-
{{ run.pipeline.pipeline_id }}
50-
<i class="fa fa-copy has-text-grey"
51-
id="copy-pipeline-id"
52-
style="font-size: 0.60rem; cursor: pointer;"
53-
onclick="copyToClipboard('copy-pipeline-id', '{{ run.pipeline.pipeline_id }}')">
54-
</i>
55-
</p>
56-
</div>
57-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
58-
<p class="is-size-7 has-text-weight-semibold">Status</p>
59-
<p class="has-text-grey is-size-7">
60-
{% include "includes/job_status.html" with status=run.status compact=True %}
61-
</p>
62-
</div>
63-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
64-
<p class="is-size-7 has-text-weight-semibold">Runtime</p>
65-
<p class="has-text-grey is-size-7">
66-
{% if run.runtime %}
46+
<div class="box has-background-info-light is-light p-4">
47+
<div class="columns is-multiline is-vcentered is-mobile is-gapless">
48+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
49+
<p class="is-size-7 has-text-weight-semibold">Pipeline ID</p>
50+
<p class="has-text-grey is-size-7 mr-2">
51+
{{ run.pipeline.pipeline_id }}
52+
<i class="fa fa-copy has-text-grey" id="copy-pipeline-id"
53+
style="font-size: 0.60rem; cursor: pointer;"
54+
onclick="copyToClipboard('copy-pipeline-id', '{{ run.pipeline.pipeline_id }}')">
55+
</i>
56+
</p>
57+
</div>
58+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
59+
<p class="is-size-7 has-text-weight-semibold">Status</p>
60+
<p class="has-text-grey is-size-7">
61+
{% include "includes/job_status.html" with status=run.status compact=True %}
62+
</p>
63+
</div>
64+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
65+
<p class="is-size-7 has-text-weight-semibold">Runtime</p>
66+
<p class="has-text-grey is-size-7">
67+
{% if run.runtime %}
6768
{{ run.runtime|humanize_duration }}
68-
{% else %}
69+
{% else %}
6970
N/A
70-
{% endif %}
71-
</p>
72-
</div>
73-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
74-
<p class="is-size-7 has-text-weight-semibold">Exit Code</p>
75-
<p class="has-text-grey is-size-7">{{ run.run_exitcode|default_if_none:"N/A" }}</p>
76-
</div>
77-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
78-
<p class="is-size-7 has-text-weight-semibold">Start</p>
79-
<p class="has-text-grey is-size-7">
80-
{% if run.run_start_date %}
71+
{% endif %}
72+
</p>
73+
</div>
74+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
75+
<p class="is-size-7 has-text-weight-semibold">Exit Code</p>
76+
<p class="has-text-grey is-size-7">{{ run.run_exitcode|default_if_none:"N/A" }}</p>
77+
</div>
78+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
79+
<p class="is-size-7 has-text-weight-semibold">Start</p>
80+
<p class="has-text-grey is-size-7">
81+
{% if run.run_start_date %}
8182
{{ run.run_start_date|date:"Y-m-d h:i a T" }}
82-
{% else %}
83+
{% else %}
8384
N/A
84-
{% endif %}
85-
</p>
86-
</div>
87-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile ">
88-
<p class="is-size-7 has-text-weight-semibold">End</p>
89-
<p class="has-text-grey is-size-7">
90-
{% if run.run_end_date %}
85+
{% endif %}
86+
</p>
87+
</div>
88+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile ">
89+
<p class="is-size-7 has-text-weight-semibold">End</p>
90+
<p class="has-text-grey is-size-7">
91+
{% if run.run_end_date %}
9192
{{ run.run_end_date|date:"Y-m-d h:i a T" }}
92-
{% else %}
93+
{% else %}
9394
N/A
94-
{% endif %}
95-
</p>
96-
</div>
97-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
98-
<p class="is-size-7 has-text-weight-semibold">Created</p>
99-
<p class="has-text-grey is-size-7">{{ run.created_date|date:"Y-m-d h:i a T" }}</p>
100-
</div>
101-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
102-
<p class="is-size-7 has-text-weight-semibold">Version</p>
103-
<p class="has-text-grey is-size-7">{{ run.vulnerablecode_version }}</p>
104-
</div>
105-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
106-
<p class="is-size-7 has-text-weight-semibold">Commit</p>
107-
<p class="has-text-grey is-size-7">
108-
{% if run.vulnerablecode_commit %}
109-
<a href="{{ run.pipeline_url }}"
110-
target="_blank">
111-
{{ run.vulnerablecode_commit }}
112-
<i class="fa fa-external-link fa_link_custom"></i>
113-
</a>
114-
{% endif %}
115-
</p>
116-
</div>
117-
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
118-
<p class="is-size-7 has-text-weight-semibold">Job ID</p>
119-
<p class="has-text-grey is-size-7 mr-2">
120-
{{ run.run_id }}
121-
<i class="fa fa-copy has-text-grey"
122-
id="copy-job-id"
123-
style="font-size: 0.60rem; cursor: pointer;"
124-
onclick="copyToClipboard('copy-job-id', '{{ run.run_id }}')">
125-
</i>
126-
</p>
95+
{% endif %}
96+
</p>
97+
</div>
98+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
99+
<p class="is-size-7 has-text-weight-semibold">Created</p>
100+
<p class="has-text-grey is-size-7">{{ run.created_date|date:"Y-m-d h:i a T" }}</p>
101+
</div>
102+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
103+
<p class="is-size-7 has-text-weight-semibold">Version</p>
104+
<p class="has-text-grey is-size-7">{{ run.vulnerablecode_version }}</p>
105+
</div>
106+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
107+
<p class="is-size-7 has-text-weight-semibold">Commit</p>
108+
<p class="has-text-grey is-size-7">
109+
{% if run.vulnerablecode_commit %}
110+
<a href="{{ run.pipeline_url }}" target="_blank">
111+
{{ run.vulnerablecode_commit }}
112+
<i class="fa fa-external-link fa_link_custom"></i>
113+
</a>
114+
{% endif %}
115+
</p>
116+
</div>
117+
<div class="column is-one-fifth-desktop is-one-quarter-tablet is-half-mobile">
118+
<p class="is-size-7 has-text-weight-semibold">Job ID</p>
119+
<p class="has-text-grey is-size-7 mr-2">
120+
{{ run.run_id }}
121+
<i class="fa fa-copy has-text-grey" id="copy-job-id"
122+
style="font-size: 0.60rem; cursor: pointer;"
123+
onclick="copyToClipboard('copy-job-id', '{{ run.run_id }}')">
124+
</i>
125+
</p>
126+
</div>
127127
</div>
128128
</div>
129-
</div>
130129

131-
{% if not run.run_end_date and not run.pipeline.live_logging %}
130+
{% if not run.run_end_date and not run.pipeline.live_logging %}
132131
<div class="notification has-text-centered" style="background-color: #f8edb2;">
133132
<p class="is-size-6 has-text-grey-dark">
134133
<i class="fa fa-exclamation-triangle mr-1"></i>
135134
Live streaming of log is disabled for this pipeline.
136135
Log will be available once this pipeline has finished running.
137136
</p>
138137
</div>
139-
{% endif %}
138+
{% endif %}
140139

141-
{% if run.run_output|strip %}
142-
<div class="box">
143-
<h2 class="subtitle mb-2">Run Error</h2>
144-
<div class="log-wrapper" style="position: relative;">
145-
<button class="button is-medium is-light copy-btn" id="copy-error"
146-
onclick="copyCode('log-error', 'copy-error')">
147-
<span class="icon is-medium">
148-
<i class="fa fa-copy"></i>
149-
</span>
150-
</button>
151-
<pre><code id="log-error" class="language-toml">{{ run.run_output }}</code></pre>
140+
{% if run.run_output|strip %}
141+
<div class="box">
142+
<h2 class="subtitle mb-2">Run Error</h2>
143+
<div class="log-wrapper" style="position: relative;">
144+
<button class="button is-medium is-light copy-btn" id="copy-error"
145+
onclick="copyCode('log-error', 'copy-error')">
146+
<span class="icon is-medium">
147+
<i class="fa fa-copy"></i>
148+
</span>
149+
</button>
150+
<pre><code id="log-error" class="language-toml">{{ run.run_output }}</code></pre>
151+
</div>
152152
</div>
153-
</div>
154-
{% endif %}
153+
{% endif %}
155154

156-
{% if run.log|strip %}
157-
<div class="box">
158-
<h2 class="subtitle mb-2">Log Output</h2>
159-
<div class="log-wrapper" style="position: relative;">
160-
<button class="button is-medium is-light copy-btn" id="copy-code"
161-
onclick="copyCode('log-code', 'copy-code')">
162-
<span class="icon is-medium">
163-
<i class="fa fa-copy"></i>
164-
</span>
165-
</button>
155+
{% if run.log|strip %}
156+
<div class="box">
157+
<h2 class="subtitle mb-2">Log Output</h2>
158+
<div class="log-wrapper" style="position: relative;">
159+
<button class="button is-medium is-light copy-btn" id="copy-code"
160+
onclick="copyCode('log-code', 'copy-code')">
161+
<span class="icon is-medium">
162+
<i class="fa fa-copy"></i>
163+
</span>
164+
</button>
166165

167-
<pre style="display: flex; justify-content: center; align-items: center;">
166+
<pre style="display: flex; justify-content: center; align-items: center;">
168167
<code id="log-code" class="language-toml"><i class="fa fa-spinner fa-spin fa-4x"></i></code>
169168
</pre>
170169

171-
<div id="snippet-paginater" class="has-text-centered mt-3">
172-
<button id="prev-button" class="button is-link is-small mr-2" onclick="prevSnippet()">
173-
<i class="fa fa-arrow-left mr-1"></i>
174-
Prev
175-
</button>
176-
<span id="snippet-indicator">Snippet 1</span>
177-
<button id="next-button" class="button is-link is-small ml-2" onclick="nextSnippet()">
178-
Next
179-
<i class="fa fa-arrow-right ml-1"></i>
180-
</button>
181-
</div>
170+
<div id="snippet-paginater" class="has-text-centered mt-3">
171+
<button id="prev-button" class="button is-link is-small mr-2" onclick="prevSnippet()">
172+
<i class="fa fa-arrow-left mr-1"></i>
173+
Prev
174+
</button>
175+
<span id="snippet-indicator">Snippet 1</span>
176+
<button id="next-button" class="button is-link is-small ml-2" onclick="nextSnippet()">
177+
Next
178+
<i class="fa fa-arrow-right ml-1"></i>
179+
</button>
180+
</div>
182181

182+
</div>
183183
</div>
184-
</div>
185-
{% endif %}
186-
{% if run.run_output or run.log %}
184+
{% endif %}
185+
{% if run.run_output or run.log %}
187186
<a href="{% url 'runs-list' pipeline_id=run.pipeline.pipeline_id %}" class="button is-info my-4">
188187
<i class="fa fa-arrow-left mr-2"></i>Back to All Runs
189188
</a>
190-
{% endif %}
189+
{% endif %}
190+
</div>
191191
</div>
192+
</div>
192193
{% endblock %}
193194

194195

@@ -265,16 +266,16 @@ <h2 class="subtitle mb-2">Log Output</h2>
265266

266267
function copyToClipboard(button, text) {
267268
navigator.clipboard.writeText(text)
268-
.then(() => {
269-
const btn = document.getElementById(button);
270-
btn.classList.remove("fa-copy", "has-text-grey");
271-
btn.classList.add("has-text-success", "fa-check");
272-
setTimeout(() => {
273-
btn.classList.remove("fa-check", "has-text-success");
274-
btn.classList.add("has-text-grey", "fa-copy");
275-
}, 1500);
276-
})
277-
.catch(err => alert("Copy to clipboard failed."));
269+
.then(() => {
270+
const btn = document.getElementById(button);
271+
btn.classList.remove("fa-copy", "has-text-grey");
272+
btn.classList.add("has-text-success", "fa-check");
273+
setTimeout(() => {
274+
btn.classList.remove("fa-check", "has-text-success");
275+
btn.classList.add("has-text-grey", "fa-copy");
276+
}, 1500);
277+
})
278+
.catch(err => alert("Copy to clipboard failed."));
278279
}
279280

280281
</script>

0 commit comments

Comments
 (0)