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>