From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sat, 23 Mar 2024 18:57:49 +0000 (+0100)
Subject: vulnerabilities.cgi: Use CSS to colour the table
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=fbfde0088c58c506cab80d23fc240e3cab863302;p=people%2Fms%2Fipfire-2.x.git

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 0187b037f..030c824aa 100644
--- 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 4c6db6a5c..181a87c26 100644
--- 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;
 }