branch master updated: templates: Add dashboard filter support.

[Mathieu Othacehe]

This is an automated email from the git hooks/post-receive script.

mothacehe pushed a commit to branch master
in repository guix-cuirass.

The following commit(s) were added to refs/heads/master by this push:
     new 73ba694  templates: Add dashboard filter support.
73ba694 is described below

commit 73ba694a14e1d77db15b1342b9f8da6708dd0bcb
Author: Mathieu Othacehe <othacehe@gnu.org>
AuthorDate: Wed Dec 1 19:09:02 2021 +0100

    templates: Add dashboard filter support.
    
    * src/cuirass/templates.scm (evaluation-dashboard): Add filter support.
    * src/static/js/cuirass.js: Add dashboard filter support.
---
 src/cuirass/templates.scm |  14 +++++
 src/static/js/cuirass.js  | 129 +++++++++++++++++++++++++++-------------------
 2 files changed, 89 insertions(+), 54 deletions(-)

diff --git a/src/cuirass/templates.scm b/src/cuirass/templates.scm
index a26c190..d8e1392 100644
--- a/src/cuirass/templates.scm
+++ b/src/cuirass/templates.scm
@@ -1954,6 +1954,20 @@ text-dark d-flex position-absolute w-100"))
                       (aria-hidden "true"))
                    "")
                   " Loading")))
+      (div
+       (@ (class "input-group")
+          (role "search")
+          (style "width:15em"))
+       (label (@ (for "query-jobs")
+                 (class "sr-only"))
+              "Search for jobs")
+       (input (@ (type "text")
+                 (class "form-control")
+                 (id   "query-jobs")
+                 (name "query-jobs")
+                 (placeholder "search for jobs"))))
+
+      (br)
       (div (@ (id "dashboard")
               (class "invisible")
               (url ,jobs))))))
diff --git a/src/static/js/cuirass.js b/src/static/js/cuirass.js
index bb7b107..587cd31 100644
--- a/src/static/js/cuirass.js
+++ b/src/static/js/cuirass.js
@@ -65,6 +65,8 @@ $(document).ready(function() {
 
     /* Dashboard page. */
     $(function(){
+        var cache_data;
+
         if ($("#get-dashboard").length > 0) {
             function enableLoadButton() {
                 $('#load-btn').removeAttr('disabled');
@@ -107,67 +109,86 @@ $(document).ready(function() {
                 return Math.round(Number(width));
             }
 
+            function drawPage(data) {
+                var width = svgWidth();
+                var circle_radius = radius(data.length);
+                var margin_x = circle_radius;
+                var margin_y = circle_radius;
+                var margin_circle_x = 3;
+                var margin_circle_y = (2.5 * circle_radius);
+                var circle_count_x =
+                    Math.floor((width - 2 * margin_x) /
+                               ((2 * circle_radius) + margin_circle_x));
+                var height = ((data.length / circle_count_x) *
+                              margin_circle_y) +
+                    circle_radius + 2 * margin_y;
+
+                var div = d3.select('body').append('div')
+                    .attr('class', 'tooltip')
+                    .style('opacity', 0);
+                var svg = d3.select('#content').append('svg')
+                    .attr('width', width)
+                    .attr('height', height);
+
+                var circles = svg.append('g')
+                    .selectAll('circle')
+                    .data(data)
+                    .enter()
+                    .append('a')
+                    .attr('xlink:href', d => '/build/' + d.build + '/details')
+                    .append('circle')
+                    .attr('r', circle_radius)
+                    .attr('cx', function(d, i) {
+                        return margin_x +
+                            (i % circle_count_x)
+                            * (circle_radius * 2 + margin_circle_x);
+                    })
+                    .attr('cy', function (d, i) {
+                        return margin_y + Math.floor(i / circle_count_x)
+                            * margin_circle_y;
+                    })
+                    .style('fill', d => color(d.status))
+                    .on('mouseover', function(event, d) {
+                        var circle = d3.select(this)
+                            .style('fill', 'steelblue');
+                        div.style('opacity', .9);
+                        div.html(d.name)
+                            .style('left', (event.pageX + 30) + 'px')
+                            .style('top', (event.pageY - 30) + 'px');
+                    })
+                    .on('mouseout', function(event, d) {
+                        var circle = d3.select(this)
+                            .style('fill', color(d.status));
+                        div.style('opacity', 0);
+                        div.html('')
+                            .style('left', '0px')
+                            .style('top', '0px');
+                    })
+                enableLoadButton();
+            }
+
+            function filterSvg(str) {
+                d3.selectAll("svg").remove();
+                drawPage(cache_data.filter(function (c, i) {
+                    return c.name.includes(str);
+                }));
+            }
+
             function initSvg(jobs) {
                 d3.json(jobs).then(function (data) {
-                    var width = svgWidth();
-                    var circle_radius = radius(data.length);
-                    var margin_x = circle_radius;
-                    var margin_y = circle_radius;
-                    var margin_circle_x = 3;
-                    var margin_circle_y = (2.5 * circle_radius);
-                    var circle_count_x =
-                        Math.floor((width - 2 * margin_x) /
-                                   ((2 * circle_radius) + margin_circle_x));
-                    var height = ((data.length / circle_count_x) *
-                                  margin_circle_y) +
-                        circle_radius + 2 * margin_y;
-
-                    var div = d3.select('body').append('div')
-                        .attr('class', 'tooltip')
-                        .style('opacity', 0);
-                    var svg = d3.select('#content').append('svg')
-                        .attr('width', width)
-                        .attr('height', height);
-                    var circles = svg.append('g')
-                        .selectAll('circle')
-                        .data(data)
-                        .enter()
-                        .append('a')
-                        .attr('xlink:href', d => '/build/' + d.build + 
'/details')
-                        .append('circle')
-                        .attr('r', circle_radius)
-                        .attr('cx', function(d, i) {
-                            return margin_x +
-                                (i % circle_count_x)
-                                * (circle_radius * 2 + margin_circle_x);
-                        })
-                        .attr('cy', function (d, i) {
-                            return margin_y + Math.floor(i / circle_count_x)
-                                * margin_circle_y;
-                        })
-                        .style('fill', d => color(d.status))
-                        .on('mouseover', function(event, d) {
-                            var circle = d3.select(this)
-                                .style('fill', 'steelblue');
-                            div.style('opacity', .9);
-                            div.html(d.name)
-                                .style('left', (event.pageX + 30) + 'px')
-                                .style('top', (event.pageY - 30) + 'px');
-                        })
-                        .on('mouseout', function(event, d) {
-                            var circle = d3.select(this)
-                                .style('fill', color(d.status));
-                            div.style('opacity', 0);
-                            div.html('')
-                                .style('left', '0px')
-                                .style('top', '0px');
-                        })
-                    enableLoadButton();
+                    cache_data = data;
+                    drawPage(data);
                 });
             }
 
+            $('#query-jobs').on('input', function(e){
+                filterSvg($(this).val());
+            });
+
             var dashboard = $('#dashboard');
             initSvg(dashboard.attr('url'));
+
+            window.filterSvg = filterSvg;
         }
     });