toaster: fix layout for command-line builds in recent builds area

Command-line builds were displayed incorrectly, so that the
HTML elements for other builds were being "consumed" by the
command-line build elements due to incorrect positioning of
element end tags.

Fix by ensuring end tags close elements in the right places.

As the indentation was all over the place in the most recent
builds section template, it was almost impossible to see what the
problem was. So that was fixed, too.

[YOCTO #9842]

Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 123 insertions, 124 deletions

diff --git a/lib/toaster/toastergui/templates/mrb_section.html b/lib/toaster/toastergui/templates/mrb_section.html
index 4b4e3e691..b164269a1 100644
--- a/lib/toaster/toastergui/templates/mrb_section.html
+++ b/lib/toaster/toastergui/templates/mrb_section.html
@@ -3,6 +3,7 @@
 {% load project_url_tag %}
 {% load humanize %}
 <script src="{% static 'js/mrbsection.js' %}"></script>
+
 <script>
   $(document).ready(function () {
     var ctx = {
@@ -18,165 +19,163 @@
   });
 </script>
 
-{%if mru %}
+{% if mru %}
 
-  {%if mrb_type == 'project' %}
-  <h2>
-    Latest project builds
+  {% if mrb_type == 'project' %}
+    <h2>
+      Latest project builds
 
-    {% if project.is_default %}
-    <span class="glyphicon glyphicon-question-sign get-help heading-help" title="" data-original-title="Builds in this project cannot be started from Toaster: they are started from the command line"></span>
-    {% endif %}
-  </h2>
+      {% if project.is_default %}
+        <span class="glyphicon glyphicon-question-sign get-help heading-help" data-original-title="Builds in this project cannot be started from Toaster: they are started from the command line"></span>
+        {% endif %}
+    </h2>
   {% else %}
     <div class="page-header">
-      <h1>
-      Latest builds
-      </h1>
+      <h1>Latest builds</h1>
     </div>
   {% endif %}
+
   <div id="latest-builds">
-  {% for build in mru %}
-  <div data-latest-build-result="{{ build.id }}" class="alert build-result {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == build.FAILED%}alert-danger{%else%}alert-info{%endif%}">
+    {% for build in mru %}
+      <div data-latest-build-result="{{build.id}}" class="alert build-result {% if build.outcome == build.SUCCEEDED %}alert-success{% elif build.outcome == build.FAILED %}alert-danger{% else %}alert-info{% endif %}">
         {% if mrb_type != 'project' %}
-        <div class="row project-name">
-          <div class="col-md-12">
-            <small>
-              <a class="alert-link text-uppercase" href={% project_url build.project %}>{{build.project.name}}</a>
-            </small>
+          <div class="row project-name">
+            <div class="col-md-12">
+              <small>
+                <a class="alert-link text-uppercase" href={% project_url build.project %}>{{build.project.name}}</a>
+              </small>
+            </div>
           </div>
-        </div>
         {% endif %}
+
         <div class="row">
           <div class="col-md-3">
-    {%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
-              <a href="{%url 'builddashboard' build.pk%}" class="alert-link">
-    {% endif %}
+            {% if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
+              <a href="{% url 'builddashboard' build.pk %}" class="alert-link">
+            {% endif %}
+
             {% if build.target_set.all.count > 0 %}
-                <span data-toggle="tooltip"
-                  {% if build.target_set.all.count > 1 %}
-                    {{build.get_sorted_target_list.0.target}}
-                    title="Recipes:
-                    {% for target in build.get_sorted_target_list %}
-                        {% if target.task %}
-                            {{target.target}}:{{target.task}}
-                        {% else %}
-                            {{target.target}}
-                        {% endif %}
-                    {% endfor %}"
-                  {% endif %}
-                >
+              <span data-toggle="tooltip"
+                {% if build.target_set.all.count > 1 %}
+                  {{build.get_sorted_target_list.0.target}}
+                  title="Recipes:
+                  {% for target in build.get_sorted_target_list %}
+                    {% if target.task %}
+                      {{target.target}}:{{target.task}}
+                    {% else %}
+                      {{target.target}}
+                    {% endif %}
+                  {% endfor %}"
+                {% endif %}
+              >
                 {% if build.target_set.all.0.task %}
-                    {{build.get_sorted_target_list.0.target}}:{{build.target_set.all.0.task}}
+                  {{build.get_sorted_target_list.0.target}}:{{build.target_set.all.0.task}}
                 {% else %}
-                    {{build.get_sorted_target_list.0.target}}
+                  {{build.get_sorted_target_list.0.target}}
                 {% endif %}
+
                 {% if build.target_set.all.count > 1 %}
-                    (+{{build.target_set.all.count|add:"-1"}})
+                  (+{{build.target_set.all.count|add:"-1"}})
                 {% endif %}
-                </span>
-             {% endif %}
-    {%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
-                </a>
-    {% endif %}
-            </div>
-    {% if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
+              </span>
+            {% endif %}
+            {% if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
+              </a>
+            {% endif %}
+          </div>
+
+          {% if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
             <div class="col-md-2">
-                {% if build.completed_on|format_build_date  %}
-                    {{ build.completed_on|date:'d/m/y H:i' }}
-                {% else %}
-                    {{ build.completed_on|date:'H:i' }}
-                {% endif %}
+              {% if build.completed_on|format_build_date  %}
+                {{build.completed_on|date:'d/m/y H:i'}}
+              {% else %}
+                {{ build.completed_on|date:'H:i' }}
+              {% endif %}
             </div>
-    {% endif %}
-    {%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
+          {% endif %}
+
+          {% if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
             <div class="col-md-2">
-      {% if  build.errors.count %}
+              {% if build.errors.count %}
                 <span class="glyphicon glyphicon-minus-sign"></span>
-                <a href="{%url 'builddashboard' build.pk%}#errors" class="alert-link">{{build.errors.count}} error{{build.errors.count|pluralize}}</a>
-      {% endif %}
+                <a href="{%url 'builddashboard' build.pk%}#errors" class="alert-link">
+                  {{build.errors.count}} error{{build.errors.count|pluralize}}
+                </a>
+              {% endif %}
             </div>
+
             <div class="col-md-2">
-      {% if  build.warnings.count %}
+              {% if build.warnings.count %}
                 <span class="glyphicon glyphicon-warning-sign build-warnings"></span>
-                <a href="{%url 'builddashboard' build.pk%}#warnings" class="alert-link build-warnings">{{build.warnings.count}} warning{{build.warnings.count|pluralize}}</a>
-      {% endif %}
+                <a href="{%url 'builddashboard' build.pk%}#warnings" class="alert-link build-warnings">
+                  {{build.warnings.count}} warning{{build.warnings.count|pluralize}}
+                </a>
+              {% endif %}
             </div>
+
             <div class="col-md-3">
               Build time: <a class="alert-link" href="{% url 'buildtime' build.pk %}">{{ build.timespent_seconds|sectohms }}
               </a>
+
               {% if build.project.is_default %}
-                  <span class="pull-right glyphicon glyphicon-question-sign get-help
-                  {% if build.outcome == build.SUCCEEDED %}
-                      get-help-green
-                  {% elif build.outcome == build.FAILED %}
-                      get-help-red
-                  {% else %}
-                      get-help-blue
-                  {% endif %}
-                  " title="Builds in this project cannot be started from Toaster: they are started from the command line">
-                  </span>
+                <span class="pull-right glyphicon glyphicon-question-sign get-help {% if build.outcome == build.SUCCEEDED %}get-help-green{% elif build.outcome == build.FAILED %}get-help-red{% else %}get-help-blue{% endif %}"
+                title="Builds in this project cannot be started from Toaster: they are started from the command line">
+                </span>
               {% else %}
-                  <a href="#" class="run-again-btn alert-link
-                      {% if build.outcome == build.SUCCEEDED %}
-                          success
-                      {% elif build.outcome == build.FAILED %}
-                          danger
-                      {% else %}
-                          info
-                      {%endif%}
-                      pull-right"
-                      data-request-url="{% url 'xhr_buildrequest' build.project.pk %}"
-                      data-target='{{build.target_set.all|get_tasks|json}}'>
-                      <span class="glyphicon glyphicon-repeat"></span>
-                      Rebuild
-                  </a>
+                <a href="#" class="run-again-btn alert-link {% if build.outcome == build.SUCCEEDED %}success{% elif build.outcome == build.FAILED %}danger{% else %}info{% endif %} pull-right"
+                data-request-url="{% url 'xhr_buildrequest' build.project.pk %}"
+                data-target='{{build.target_set.all|get_tasks|json}}'>
+                  <span class="glyphicon glyphicon-repeat"></span>
+                  Rebuild
+                </a>
               {% endif %}
             </div>
-    {%endif%}
+          {% endif %}
 
-    {%if build.outcome == build.IN_PROGRESS %}
-    <div class="col-md-4" style="display:none" id="cancelling-msg-{{build.buildrequest.pk}}">
-      Cancelling the build ...
-    </div>
-    <div class="col-md-4 col-md-offset-1 progress-info">
-      <div class="progress" id="build-pc-done-title-{{build.pk}}">
-        <div id="build-pc-done-bar-{{build.pk}}" style="width: {{build.completeper}}%;" class="progress-bar"></div>
-      </div>
-    </div>
-    <div class="col-md-4 progress-info"><span id="build-pc-done-{{build.pk}}">{{build.completeper}}</span>% of tasks complete
-    {# No build cancel for command line builds project #}
-    {% if build.project.is_default %}
-    <span class="glyphicon glyphicon-question-sign get-help get-help-blue pull-right" title="Builds in this project cannot be cancelled from Toaster: they can only be cancelled from the command line"></span>
-    {% else %}
-      <a href="#" class="cancel-build-btn pull-right alert-link"
-          data-buildrequest-id={{build.buildrequest.pk}}
-          data-request-url="{% url 'xhr_buildrequest' build.project.pk %}" >
-        <span class="glyphicon glyphicon-remove-circle"></span>
-        Cancel
-      </a>
-    </div>
-    {% endif %}
+          {% if build.outcome == build.IN_PROGRESS %}
+            <div class="col-md-4" style="display:none" id="cancelling-msg-{{build.buildrequest.pk}}">
+              Cancelling the build ...
+            </div>
 
-    {%endif%} {# end if in progress #}
+            <div class="col-md-4 col-md-offset-1 progress-info">
+              <div class="progress" id="build-pc-done-title-{{build.pk}}">
+                <div id="build-pc-done-bar-{{build.pk}}" style="width: {{build.completeper}}%;" class="progress-bar">
+                </div>
+              </div>
+            </div>
 
-    {% if build.outcome == build.CANCELLED %}
-    <div class="col-md-6">
-      Build cancelled
-    </div>
-    <div class="col-md-3">
-      <a href="#" class="info pull-right run-again-btn alert-link"
-        data-request-url="{% url 'xhr_buildrequest' build.project.pk %}"
-        data-target='{{build.target_set.all|get_tasks|json}}'>
-        <span class="glyphicon glyphicon-repeat"></span>
-        Rebuild
-      </a>
-    </div>
-    {% endif %}
-  </div>
-</div>
-  {% endfor %}
-  </div>
+            <div class="col-md-4 progress-info">
+              <span id="build-pc-done-{{build.pk}}">{{build.completeper}}</span>% of tasks complete
+              {# No build cancel for command line builds project #}
+              {% if build.project.is_default %}
+                <span class="glyphicon glyphicon-question-sign get-help get-help-blue pull-right" title="Builds in this project cannot be cancelled from Toaster: they can only be cancelled from the command line"></span>
+              {% else %}
+                <a href="#" class="cancel-build-btn pull-right alert-link"
+                data-buildrequest-id={{build.buildrequest.pk}}
+                data-request-url="{% url 'xhr_buildrequest' build.project.pk %}">
+                  <span class="glyphicon glyphicon-remove-circle"></span>
+                  Cancel
+                </a>
+              {% endif %}
+            </div>
+          {% endif %} {# end if in progress #}
 
-{%endif%}
+          {% if build.outcome == build.CANCELLED %}
+            <div class="col-md-6">
+              Build cancelled
+            </div>
 
+            <div class="col-md-3">
+              <a href="#" class="info pull-right run-again-btn alert-link"
+              data-request-url="{% url 'xhr_buildrequest' build.project.pk %}"
+              data-target='{{build.target_set.all|get_tasks|json}}'>
+                <span class="glyphicon glyphicon-repeat"></span>
+                Rebuild
+              </a>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+{% endif %}
\ No newline at end of file