chore: hide the check report table when first open the HTML report when there is no passing check

Signed-off-by: Trong Nhan Mai <[email protected]>

Author: Trong Nhan Mai

src/macaron/output_reporter/results.py

@@ -116,9 +116,17 @@ def get_dict(self) -> dict:
         dict
             The dictionary representation of this record.
         """
+        has_passing_check = False
+        if self.context:
+            for res in self.context.check_results.values():
+                if res["result_type"] == CheckResultType.PASSED:
+                    has_passing_check = True
+                    break
+
         result = {
             "metadata": {
                 "timestamps": datetime.now().isoformat(sep=" ", timespec="seconds"),
+                "has_passing_check": has_passing_check,
             },
             "target": self.context.get_dict() if self.context else {},
             "dependencies": self.get_dep_summary(),

src/macaron/output_reporter/templates/base_template.html

@@ -255,26 +255,30 @@
             padding-left: 2em
         }
 
-        .caret {
+        /*
+            The reason why we need to create a separate .togler class is because all .caret calss are set binded
+            to the listener for extending/collapsing the provenance fields.
+        */
+        .caret, .toggler {
             cursor: pointer;
             user-select: none;
         }
 
         /* Create the caret using a unicode symbol, and style it. */
-        .caret::before {
+        .caret::before, .toggler::before {
             content: "\25B8";
             color: black;
             display: inline-block;
             margin-right: 6px;
         }
 
         /* Rotate the caret icon when clicked on. */
-        .caret-down::before {
+        .caret-down::before, .toggler-extend::before {
             transform: rotate(90deg);
         }
 
         /* Hide the nested list. */
-        .nested-ul {
+        .nested-ul, .hidden {
             display: none;
         }
 
@@ -672,6 +676,13 @@
                 });
             }
 
+            // Add a listener to the caret for extending/collapsing the check status table.
+            let check_status_toggler = document.getElementById("check_report_title");
+            check_status_toggler.addEventListener("click", function() {
+                this.classList.toggle("toggler-extend");
+                document.getElementById("check_report_content").classList.toggle("hidden");
+            });
+
             // When loaded, expand all CI services.<n> elements
             setExpandState(document.querySelectorAll(".tree-view-nested-list > * > .caret"), true);
             setExpandState(document.querySelectorAll(".tree-view-nested-list > * > * > * > .caret"), true);

src/macaron/output_reporter/templates/macaron.html

@@ -215,8 +215,29 @@
 
     <div class='space_divider'></div>
 
-    <div class="table_caption">Reports for Macaron checks</div>
-    {{ render_checks_report(target.checks.results) | indent(4) }}
+    {#
+        When there is no passing check for this software component, we hide the check report table when the viewer
+        first open the HTML file. However, the viewer could click the `toggler` to expand the table if they want to see it. To achieve this, there are two component we need to handle:
+        - The toggler, which is the symbol that indicate the Extended or Collapsed state of the check report table:
+        The class ``toggler-extend`` will apply the CSS rule to rotate the toggler symbol indicating the "Extend" state.
+        If ``toggler-extend`` is not set, the toggler will be in the Collapsed state.
+        - The ``check_report_content`` div, which contains the check report table: The HTML class ``hidden`` will set ``display: none`` to this div and hide the check report table.
+    #}
+    {% if metadata.has_passing_check %}
+    {#
+        Set the default state to Extend if there is a passing check.
+    #}
+    <div class="table_caption toggler toggler-extend" id="check_report_title">Reports for Macaron checks</div>
+    <div id="check_report_content">
+    {% else %}
+    {#
+        Set the default state to Collapsed if there is no passing check.
+    #}
+    <div class="table_caption toggler" id="check_report_title">Reports for Macaron checks</div>
+    <div id="check_report_content" class="hidden">
+    {% endif %}
+        {{ render_checks_report(target.checks.results) | indent(8) }}
+    </div>
 
     <div class='space_divider'></div>