Fetch addition bug info from IT and display in UI. Refs #117

- added to TestCase page, Executions card, will execute on click - added to TestCase page, Bugs card - use client side caching as well b/c the same bugs may be shown multiple times in the same page. If data has already been fetched then use it - update TE widget in TR page to show timestamp | del btn. Later will show an info button here as well. NOTE: - adding bug details to TestRun page, TE widget needs Patternfly popovers and is best to be done when the entire page has been redesigned to the new UI
kiwitcms · Sep 18, 2019 · 5e84b2f · 5e84b2f
1 parent e4e3e77
commit 5e84b2f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 8 deletions.
diff --git a/tcms/templates/case/get_details_case_run.html b/tcms/templates/case/get_details_case_run.html
@@ -114,10 +114,12 @@ <h4 class="borderB">
 										{% for link in execution.links %}
 										<li>
 											<a {% if link.is_defect %}class="have_bug"{% endif %} href="{{ link.url }}" target="_blank" title="{{ link.url }}">{{ link.name|escape|default:link.url }}</a>
-											<span class="grey">{{ link.created_on|date:"N d, Y" }}</span>
-											<a href="javascript:void(0);" class="js-remove-testlog" data-param="{{ link.pk }}">
-												<img title="Remove this log" src="{% static 'images/remove_small.png' %}" />
-											</a>
+											<span class="grey" style="float: right">
+                                                                                            {{ link.created_on|date:"N d, Y" }} |
+											    <a href="javascript:void(0);" class="js-remove-testlog" data-param="{{ link.pk }}">
+												    <img title="Remove this log" src="{% static 'images/remove_small.png' %}" />
+											    </a>
+                                                                                        </span>
 										</li>
 										{% endfor %}
 									</ul>

diff --git a/tcms/testcases/static/testcases/js/get.js b/tcms/testcases/static/testcases/js/get.js
@@ -1,3 +1,6 @@
+const bug_details_cache = {}
+
+
 function addTag(module, object_id, tag_input, to_table) {
     var tag_name = tag_input.value;
 
@@ -215,7 +218,7 @@ $(document).ready(function() {
     });
 
     // bugs table
-    var bugs_table = $('#bugs').DataTable({
+    $('#bugs').DataTable({
         ajax: function(data, callback, settings) {
             dataTableJsonRPC('TestExecution.get_links',
                              {execution__case: case_id,
@@ -225,7 +228,16 @@ $(document).ready(function() {
             {
                 data: null,
                 render: function (data, type, full, meta) {
-                    return '<a href="' + data.url + '">' + data.url + '</a>';
+                    return '<a href="' + data.url + '" class="bug-url">' + data.url + '</a>';
+                }
+            },
+            {
+                data: null,
+                render: function (data, type, full, meta) {
+                    return '<a href="#bugs" data-toggle="popover" data-html="true" ' +
+                                'data-content="undefined" data-trigger="focus" data-placement="top">' +
+                                '<span class="fa fa-info-circle"></span>' +
+                           '</a>';
                 }
             },
         ],
@@ -238,6 +250,15 @@ $(document).ready(function() {
         order: [[ 0, 'asc' ]],
     });
 
+    $('#bugs').on('draw.dt', function () {
+        $('#bugs').find('[data-toggle=popover]')
+        .popovers()
+        .on('show.bs.popover', function(element) {
+            fetchBugDetails($(element.target).parents('tr').find('.bug-url')[0],
+                            element.target,
+                            bug_details_cache);
+        });
+    });
 
     // executions treeview
     // collapse all child rows
@@ -255,4 +276,31 @@ $(document).ready(function() {
       }
     });
 
+    $('[data-toggle=popover]')
+        .popovers()
+        .on('show.bs.popover', function(element) {
+            fetchBugDetails($(element.target).parents('.list-view-pf-body').find('.bug-url')[0],
+                            element.target,
+                            bug_details_cache);
+    });
 });
+
+
+function assignPopoverData(source, popover, data) {
+    source.title = data.title;
+    $(popover).attr('data-original-title', data.title);
+    $(popover).attr('data-content', data.description);
+}
+
+
+function fetchBugDetails(source, popover, cache) {
+    if (source.href in cache) {
+        assignPopoverData(source, popover, cache[source.href]);
+        return;
+    }
+
+    jsonRPC('Bug.details', [source.href], function(data) {
+        cache[source.href] = data;
+        assignPopoverData(source, popover, data);
+    }, true);
+}
diff --git a/tcms/testcases/templates/testcases/get.html b/tcms/testcases/templates/testcases/get.html
@@ -217,10 +217,20 @@ <h2 class="card-pf-title">
                                                     <div class="list-view-pf-body">
                                                         <div class="list-view-pf-description">
                                                             <div class="list-group-item-text">
-                                                                <a href="{{ bug.url }}">{{ bug.url }}</a>
+                                                                <a href="{{ bug.url }}" class="bug-url">{{ bug.url }}</a>
                                                             </div>
                                                         </div>
+
                                                         <div class="list-view-pf-additional-info">
+                                                            <div class="list-view-pf-additional-info-item">
+                                                                <a href="#"
+                                                                    data-toggle="popover" data-html="true"
+                                                                    data-content="undefined"
+                                                                    data-trigger="focus"
+                                                                    data-placement="top">
+                                                                    <span class="fa fa-info-circle"></span>
+                                                                </a>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -285,7 +295,7 @@ <h2 class="card-pf-title">
                     <table class="table" id="bugs">
                         <thead>
                             <tr>
-                                <th>{% trans 'Bug URL' %}</th>
+                                <th colspan="2">{% trans 'Bug URL' %}</th>
                             </tr>
                         </thead>
                     </table>