Merge lp:~juliank/merge-o-matic/javascript-query into lp:merge-o-matic

[Julian Andres Klode]

This adds a search box and two check boxes for:

- merges with uploads in proposed
- merges without them

This uses the history modification API thingy, and replaces the search part of the URL, so you end up with queries like:

https://merges.ubuntu.com/main.html?query=foundations-bugs&showProposed=false&showMergeNeeded=true

I tested that the JavaScript and HTML works, but I might have messed up the integration into the Python script. I lack the files to test the merge-status.py script on my system.

[Colin Watson (cjwatson)]

review: Approve

[lp:~juliank/merge-o-matic/javascript-query]

313. By Julian Andres Klode on 2018-01-26

use === instead of == and fix an empty line that got inserted somehow

314. By Julian Andres Klode on 2018-01-26

Some more == to === fixes

[Julian Andres Klode (juliank)]

Verified that it generates the same output as my test file, so it's good to go.

review: Approve

[Tiago Stürmer Daitx (tdaitx)]

Case insensitive search can be done by using toUpperCase() - or toLowerCase().

Example: !rows[i].textContent.toUpperCase().match(query.value.toUpperCase()).

[Julian Andres Klode (juliank)]

Might be better to just make the regex case insensitive, AKA

new RegExp(query.value, "i")

but that will be a new MP :)

=== modified file 'merge-status.py'
--- merge-status.py	2018-01-26 12:58:47 +0000
+++ merge-status.py	2018-01-26 13:35:55 +0000
@@ -26,6 +26,7 @@
 import os
 import re
 from rfc822 import parseaddr
+import textwrap
 import time
 
 from deb.controlfile import ControlFile
@@ -249,6 +250,14 @@
         print("<img src=\".img/ubuntulogo-100.png\" id=\"ubuntu\">",
               file=status)
         print("<h1>Ubuntu Merge-o-Matic: %s</h1>" % component, file=status)
+        
+        print("<div id=\"filters\">", file=status)
+        print("<b>Filters:</b>", file=status)
+        print("<input id=\"query\" name=\"query\"/>", file=status)
+        print("<input id=\"showProposed\" checked=\"checked\" type=\"checkbox\">Show merges with something in proposed</input>", file=status)
+        print("<input id=\"showMergeNeeded\" checked=\"checked\" type=\"checkbox\">Show merges without something in proposed</input>", file=status)
+        print("</div>", file=status)
+
 
         for section in SECTIONS:
             section_merges = [ m for m in merges if m[0] == section ]
@@ -285,6 +294,58 @@
               % component, file=status)
         print("<p><small>Generated at %s.</small></p>" %
               time.strftime('%Y-%m-%d %H:%M:%S %Z'), file=status)
+              
+        print(textwrap.dedent("""
+            <script type="text/javascript">
+                (function() {
+                    var query = document.getElementById("query");
+                    var showProposed = document.getElementById("showProposed");
+                    var showMergeNeeded = document.getElementById("showMergeNeeded");
+
+                    // Function to filter stuff
+                    function filterText() {
+                        var tables=document.getElementsByTagName("table");
+                        for (var t=0; t < tables.length; t++) {
+                            var rows=tables[t].getElementsByTagName("tr");
+                            for (var i=2; i < rows.length; i += 2)  {
+                                var hide = (query.value && !rows[i].textContent.match(query.value)) ||
+                                           (!showProposed.checked && rows[i].bgColor === '#d0d0d0') ||
+                                           (!showMergeNeeded.checked && rows[i].bgColor !== '#d0d0d0');
+                                rows[i].hidden=rows[i+1].hidden=hide;
+                            }
+                        }
+                        
+                        var search = (query.value ? "query=" + encodeURIComponent(query.value) + "&": "")  + "showProposed=" + encodeURIComponent(showProposed.checked) + "&showMergeNeeded=" + encodeURIComponent(showMergeNeeded.checked);
+                        
+                        history.replaceState({"query": query.value, "showProposed": showProposed.checked, "showMergeNeeded": showMergeNeeded.checked}, "", "?" + search);
+
+                    }
+                    
+                    // Set initial filter state from search part of URL
+                    var initState = location.search.substring(1).split("&");
+                    for (var i = 0; i < initState.length; i++) {
+                        var kv = initState[i].split("=");
+                        switch (decodeURIComponent(kv[0])) {
+                            case "query":
+                                query.value = decodeURIComponent(kv[1]);
+                                break;
+                            case "showProposed":
+                                showProposed.checked = ("true" === decodeURIComponent(kv[1]))
+                                break;
+                            case "showMergeNeeded":
+                                showMergeNeeded.checked = ("true" === decodeURIComponent(kv[1]));
+                                break;
+                        }
+                    }
+
+                    filterText();
+
+                    // Add event listeners
+                    query.addEventListener('input', filterText);
+                    showProposed.addEventListener('change', filterText);
+                    showMergeNeeded.addEventListener('change', filterText);
+                })();
+            </script>"""), file=status)
         print("</body>", file=status)
         print("</html>", file=status)