recordsansible/ara
Code Issues Proposed changes

UI: Wrap long task results and host facts

Browse Source 
A long string could otherwise extend off-screen.

Change-Id: Id183baabebb5e1e86192beb71c392f9885905a22
This commit is contained in:
David Moreau Simard 2020-06-22 15:50:34 -04:00
parent c60d8b194d
commit 8d3de34ee0
No known key found for this signature in database
GPG Key ID: 7D4729EC4E64E8B7
3 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ara/ui/static/css/ara.css
View File

@ -32,4 +32,12 @@ tbody tr:hover {
.pf-c-alert p {
font-size: 0.8em;
}
}
#host-details pre {
white-space: pre-wrap;
}
#result-details pre {
white-space: pre-wrap;
}

18
ara/ui/templates/host.html
View File

@ -8,18 +8,22 @@
Host: {{ host.name }}
</div>
<div class="pf-c-card__body">
<table class="pf-c-table pf-m-grid-md" role="grid">
<table class="pf-c-table pf-m-grid-md pf-m-compact" role="grid" id="host-details">
<thead>
<tr>
<th>Fact</th>
<th>Value</th>
<tr role="row">
<th role="columnheader" scope="col" class="pf-m-width-20">Fact</th>
<th role="columnheader" scope="col" class="pf-m-width-80">Value</th>
</tr>
</thead>
<tbody>
{% for fact, value in host.facts.items %}
<tr>
<td id="{{ fact }}" style="white-space: nowrap"><a href="#{{ fact }}">{{ fact }}</a></td>
<td>{{ value | format_data | safe }}</td>
<tr role="row">
<td role="cell" id="{{ fact }}" data-label="{{ fact }}" class="pf-m-width-20">
<a href="#{{ fact }}">{{ fact }}</a>
</td>
<td role="cell" data-label="Value" class="pf-m-width-80">
{{ value | format_data | safe }}
</td>
</tr>
{% endfor %}
</tbody>

18
ara/ui/templates/result.html
View File

@ -20,18 +20,22 @@
</div>
<div class="pf-c-card__body">
<h1><strong>Result</strong></h1>
<table class="pf-c-table pf-m-grid-md" role="grid">
<table class="pf-c-table pf-m-grid-md pf-m-compact" role="grid" id="result-details">
<thead>
<tr>
<th>Field</th>
<th>Value</th>
<tr role="row">
<th role="columnheader" scope="col" class="pf-m-width-20">Field</th>
<th role="columnheader" scope="col" class="pf-m-width-80">Value</th>
</tr>
</thead>
<tbody>
{% for field, value in result.content.items %}
<tr>
<td id="{{ field }}" style="white-space: nowrap"><a href="#{{ field }}">{{ field }}</a></td>
<td>{{ value | format_data | safe }}</td>
<tr role="row">
<td role="cell" id="{{ field }}" data-label="{{ field }}" class="pf-m-width-20">
<a href="#{{ field }}">{{ field }}</a>
</td>
<td role="cell" data-label="Value" class="pf-m-width-80">
{{ value | format_data | safe }}
</td>
</tr>
{% endfor %}
</tbody>