Don't rely on js for badge length setting

JS doesn't work when SVG is shown via <img> tag. Ticket: https://progress.opensuse.org/issues/124173
os-autoinst · Mar 20, 2023 · f28ac26 · f28ac26
1 parent 39af241
commit f28ac26
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 3 deletions.
diff --git a/lib/OpenQA/WebAPI/Controller/Test.pm b/lib/OpenQA/WebAPI/Controller/Test.pm
@@ -448,14 +448,84 @@ sub _badge ($self, $job) {
     my $status = 404;
 
     if ($job) {
-        my $result = $job->concise_result;
+        my $result = $self->param('result') // $job->concise_result;
         $badge_color = $BADGE_RESULT_COLORS{$result} // $BADGE_RESULT_COLORS{cancelled};
         $badge_text = $result =~ s/_/ /rg;
         $badge_text = $job->BUILD . ': ' . $badge_text if ($self->param('show_build'));
         $status = 200;
     }
 
-    $self->stash({badge_text => $badge_text, badge_color => $badge_color});
+    # determine the approximate required width of the badge
+    my $charlen = 11;
+    my %charlens = (
+        a => 0.62,
+        b => 0.64,
+        c => 0.55,
+        d => 0.64,
+        e => 0.62,
+        f => 0.35,
+        g => 0.64,
+        h => 0.64,
+        i => 0.28,
+        j => 0.28,
+        k => 0.58,
+        l => 0.28,
+        m => 0.97,
+        n => 0.64,
+        o => 0.61,
+        p => 0.64,
+        q => 0.64,
+        r => 0.40,
+        s => 0.53,
+        t => 0.40,
+        u => 0.64,
+        v => 0.60,
+        w => 0.82,
+        x => 0.60,
+        y => 0.60,
+        z => 0.53,
+        A => 0.71,
+        B => 0.69,
+        C => 0.70,
+        D => 0.77,
+        E => 0.63,
+        F => 0.58,
+        G => 0.78,
+        H => 0.76,
+        I => 0.30,
+        J => 0.30,
+        K => 0.66,
+        L => 0.56,
+        M => 0.87,
+        N => 0.75,
+        O => 0.79,
+        P => 0.61,
+        Q => 0.79,
+        R => 0.70,
+        S => 0.64,
+        T => 0.60,
+        U => 0.73,
+        V => 0.69,
+        W => 0.99,
+        X => 0.69,
+        Y => 0.61,
+        Z => 0.69,
+        ' ' => 0.38,
+        '#' => 0.84,
+        ':' => 0.34,
+        '-' => 0.37,
+        '\.' => 0.32,
+        '\!' => 0.40,
+        '[0-9]' => 0.64
+    );
+    my $badge_prefix_width = 85;
+    my $badge_suffix_padding = 2 * 5;
+    my $badge_width = $badge_prefix_width + $badge_suffix_padding + $charlen * length($badge_text);
+    while (my ($k, $v) = each %charlens) {
+        $badge_width -= $charlen * (() = $badge_text =~ /$k/g) * (1 - $v);
+    }
+
+    $self->stash({badge_text => $badge_text, badge_color => $badge_color, badge_width => $badge_width});
     $self->render('test/badge', format => 'svg', status => $status);
 }
 

diff --git a/templates/webapi/test/badge.svg.ep b/templates/webapi/test/badge.svg.ep
@@ -1,4 +1,4 @@
-<svg height="20" width="200" onload="bb = document.querySelector('#text').getBBox(); this.setAttribute('width', bb.x + bb.width + 5)" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+<svg height="20" width="<%= $badge_width %>" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <clipPath id="a">
     <rect rx="3" width="100%" height="100%"/>
   </clipPath>