vulnerabilities.cgi: Use CSS to colour the table

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/html/cgi-bin/vulnerabilities.cgi b/html/cgi-bin/vulnerabilities.cgi
index 0187b037f96dbffb991bcf0b14e1b4ad2736a0f7..030c824aa520b18667c15f18c6b6da0094295f83 100644 (file)
--- a/html/cgi-bin/vulnerabilities.cgi
+++ b/html/cgi-bin/vulnerabilities.cgi
@@ -98,71 +98,56 @@ if ($notice) {
 &Header::openbox('100%', 'center', $Lang::tr{'processor vulnerability mitigations'});
 
 print <<END;
-       <table class="tbl" width='100%'>
+       <table class="tbl">
                <thead>
                        <tr>
-                               <th align="center">
-                                       <strong>$Lang::tr{'vulnerability'}</strong>
+                               <th class="text-center">
+                                       $Lang::tr{'vulnerability'}
                                </th>
-                               <th align="center">
-                                       <strong>$Lang::tr{'status'}</strong>
+
+                               <th class="text-center">
+                                       $Lang::tr{'status'}
                                </th>
                        </tr>
                </thead>
+
                <tbody>
 END
 
-my $id = 0;
 for my $vuln (sort keys %VULNERABILITIES) {
        my ($status, $message) = &check_status($vuln);
        next if (!$status);
 
-       my $colour = "";
-       my $bgcolour = "";
-       my $status_message = "";
+       my $status_message = $status;
 
        # Not affected
-       if ($status eq "Not affected") {
+       if ($status eq "not-affected") {
                $status_message = $Lang::tr{'not affected'};
-               $colour = "white";
-               $bgcolour = ${Header::colourgreen};
 
        # Vulnerable
-       } elsif ($status eq "Vulnerable") {
+       } elsif ($status eq "vulnerable") {
                $status_message = $Lang::tr{'vulnerable'};
-               $colour = "white";
-               $bgcolour = ${Header::colourred};
 
        # Mitigated
-       } elsif ($status eq "Mitigation") {
+       } elsif ($status eq "mitigation") {
                $status_message = $Lang::tr{'mitigated'};
-               $colour = "white";
-               $bgcolour = ${Header::colourblue};
-
-       # Unknown report from kernel
-       } else {
-               $status_message = $status;
-               $colour = "black";
-               $bgcolour = ${Header::colouryellow};
        }
 
        print <<END;
                <tr>
-                       <td align="left">
-                               <strong>$VULNERABILITIES{$vuln}</strong>
-                       </td>
+                       <th scope="row">
+                               $VULNERABILITIES{$vuln}
+                       </th>
 
-                       <td bgcolor="$bgcolour" align="center">
-                               <font color="$colour">
+                       <td class="status is-$status">
 END
        if ($message) {
-               print "<strong>$status_message</strong> - $message";
+               print "$status_message - $message";
        } else {
-               print "<strong>$status_message</strong>";
+               print "$status_message";
        }
 
        print <<END;
-                               </font>
                        </td>
                </tr>
 END
@@ -237,11 +222,13 @@ sub check_status($) {
 
        # Fix status when something has been mitigated, but not fully, yet
        if ($status =~ /^(Mitigation): (.*vulnerable.*)$/) {
-               return ("Vulnerable", $status);
-       }
+               return ("vulnerable", $status);
+
+       } elsif ($status eq "Not affected") {
+               return "not-affected";
 
-       if ($status =~ /^(Vulnerable|Mitigation): (.*)$/) {
-               return ($1, $2);
+       } elsif ($status =~ /^(Vulnerable|Mitigation): (.*)$/) {
+               return (lc $1, $2);
        }
 
        return $status;

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 4c6db6a5c1bb5452326db8adc0c506954405c1d5..181a87c26268d7457c3eb88a1c68927af51fa3b0 100644 (file)
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -3,6 +3,8 @@
        --color-green-invert : #ffffff;
        --color-red          : #993333;
        --color-red-invert   : #ffffff;
+       --color-blue         : #333399;
+       --color-blue-invert  : #ffffff;
        --color-grey         : #d6d6d6;
        --color-light-grey   : #f0f0f0;
 }
@@ -356,6 +358,38 @@ table {
        border-bottom: 1px solid #363636;
 }
 
+.tbl .status {
+       text-align: center;
+       font-weight: bold;
+}
+
+.tbl .status.is-running {
+       background-color: var(--color-green);
+       color: var(--color-green-invert);
+}
+
+.tbl .status.is-stopped {
+       background-color: var(--color-red);
+       color: var(--color-red-invert);
+
+       width: 33%;
+}
+
+.tbl .status.is-vulnerable {
+       background-color: var(--color-red);
+       color: var(--color-red-invert);
+}
+
+.tbl .status.is-mitigation {
+       background-color: var(--color-blue);
+       color: var(--color-blue-invert);
+}
+
+.tbl .status.is-not-affected {
+       background-color: var(--color-green);
+       color: var(--color-green-invert);
+}
+
 table.fw-nat tbody tr td {
        height: 2.25em;
 }