toaster: tweak styling and typos in recent builds area

Help icons need to have the Bootstrap tooltip() method called on
them so that the popups are correctly styled.

Ensure that the colour of the help/error/warning icons is correct,
depending on the build state.

Fix pluralisation of errors and warnings shown.

Add a div around the build state area so it's easy to pick up
where the state is going to display (e.g. in tests).

[YOCTO #9631]

Signed-off-by: Elliot Smith <elliot.smith@intel.com>

1 files changed, 7 insertions, 1 deletions

diff --git a/lib/toaster/toastergui/static/js/mrbsection.js b/lib/toaster/toastergui/static/js/mrbsection.js
index e7fbf0173..73d0935fa 100644
--- a/lib/toaster/toastergui/static/js/mrbsection.js
+++ b/lib/toaster/toastergui/static/js/mrbsection.js
@@ -84,14 +84,20 @@ function mrbSectionInit(ctx){
           }
           else if (stateChanged(build)) {
             // update the whole template
+            build.warnings_pluralise = (build.warnings !== 1 ? 's' : '');
+            build.errors_pluralise = (build.errors !== 1 ? 's' : '');
+
             tmpl = $.templates("#build-template");
 
-            html = tmpl.render(build);
+            html = $(tmpl.render(build));
 
             selector = '[data-latest-build-result="' + build.id + '"] ' +
               '[data-role="build-status-container"]';
             container = $(selector);
 
+            // initialize bootstrap tooltips in the new HTML
+            html.find('span.glyphicon-question-sign').tooltip();
+
             container.html(html);
           }
           else if (tasksProgressChanged(build)) {