Improve the design of the checks and phases in html report

Fix the colspan of the main table, add a new column "Actions" into the
table and add possibility to show/hide the checks and phases row for
each result.

tmt/steps/report/html/template.html.j2

@@ -45,6 +45,12 @@
  margin: 30px 7px 0px 7px;
  }
 
+ #results table.check,
+ #results table.phase {
+ width: 100%;
+ background: #dadada;
+ }
+
  #results, #filters {
  border-spacing: 7px;
  }
@@ -89,15 +95,19 @@
  color: #c00;
  }
 
- #results tr.check {
+ #results tr.check,
+ #results tr.phase {
  font-size: 90%;
+ display: none;
  }
 
- #results tr.check td.result {
+ #results tr.check td.result,
+ #results tr.phase td.result {
  width: 5ex;
  }
 
- #results tr.check td.name {
+ #results tr.check td.name,
+ #results tr.phase td.name {
  color: #888;
  padding-left: 5ex;
  width: 22ex;
@@ -171,6 +181,18 @@
  filter_values["note"] = e.value;
  update_rows();
  }
+
+ // toggle the visibility of a given table row
+ function toggle_row_visibility(button, e) {
+ const element = document.getElementById(e);
+ if (element.style.display === 'none' || element.style.display === '') {
+ element.style.display = 'table-row';
+ button.textContent = button.textContent.replace('+', '-');
+ } else {
+ element.style.display = 'none';
+ button.textContent = button.textContent.replace('-', '+');
+ }
+ }
  </script>
 </head>
 
@@ -218,11 +240,13 @@ Context:
  <tr>
  <th>Result</th>
  <th>Test</th>
-{% if display_guest %}
+ {% if display_guest %}
  <th>Guest</th>
-{% endif %}
+ {% endif %}
  <th>Logs</th>
  <th>Data</th>
+ <th>Note</th>
+ <th>Actions</th>
  </tr>
  </thead>
  {% for result in results %}
@@ -238,21 +262,72 @@ Context:
  {% endfor %}
  </td>
  <td class="data"><a href="{{ base_dir | linkable_path | urlencode }}/{{ result.data_path | urlencode }}">data</a></td>
- {% if result.note %}
- <td class="note">{{ result.note | e }}</td>
- {% endif %}
+ <td class="note">
+ {% if result.note %}
+ {{ result.note | e }}
+ {% else %}
+ -
+ {% endif %}
+ </td>
+ <td class="action">
+ {% if result.check %}
+ <button onclick="toggle_row_visibility(this, 'check-{{ loop.index }}')" title="Show / hide checks">checks&nbsp;[+]</button>
+ {% endif %}
+ {% if result.phase %}
+ <button onclick="toggle_row_visibility(this, 'phase-{{ loop.index }}')" title="Show / hide phases">phases&nbsp;[+]</button>
+ {% endif %}
+ </td>
  </tr>
  {% if result.check %}
- <tr class="check">
- <td colspan="4">
- <table>
+ <tr class="check" id="check-{{ loop.index }}">
+ <td colspan="{% if display_guest %}7{% else %}6{% endif %}">
+ <h3>Checks</h3>
+ <table class="check">
+ <thead>
+ <tr>
+ <th>Result</th>
+ <th>Name</th>
+ <th>Logs</th>
+ </tr>
+ </thead>
  {% for check in result.check %}
  <tr>
  <td class="result {{ check.result.value | e }}">{{ check.result.value | e }}</td>
  <td class="name">{{ check.name | e }} ({{ check.event.value }})</td>
  <td class="log">
  {% for log in check.log %}
  <a href="{{ base_dir | linkable_path | urlencode }}/{{ log | urlencode }}">{{ log | basename }}</a>
+ {% else %}
+ -
+ {% endfor %}
+ </td>
+ </tr>
+ {% endfor %}
+ </table>
+ </td>
+ </tr>
+ {% endif %}
+ {% if result.phase %}
+ <tr class="phase" id="phase-{{ loop.index }}">
+ <td colspan="{% if display_guest %}7{% else %}6{% endif %}">
+ <h3>Phases</h3>
+ <table class="phase">
+ <thead>
+ <tr>
+ <th>Result</th>
+ <th>Name</th>
+ <th>Logs</th>
+ </tr>
+ </thead>
+ {% for phase in result.phase %}
+ <tr>
+ <td class="result {{ phase.result.value | e }}">{{ phase.result.value | e }}</td>
+ <td class="name">{{ phase.name | e }}</td>
+ <td class="log">
+ {% for log in phase.log %}
+ <a href="{{ base_dir | linkable_path | urlencode }}/{{ log | urlencode }}">{{ log | basename }}</a>
+ {% else %}
+ -
  {% endfor %}
  </td>
  </tr>