Use svg to render CERT expiration progress bar

Icinga · Jul 13, 2023 · a1f3501 · a1f3501
1 parent 714f32c
commit a1f3501
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/library/X509/ExpirationWidget.php b/library/X509/ExpirationWidget.php
@@ -4,10 +4,10 @@
 
 namespace Icinga\Module\X509;
 
+use Icinga\Chart\ProgressBar;
 use Icinga\Date\DateFormatter;
 use ipl\Html\BaseHtmlElement;
-use ipl\Html\Html;
-use ipl\Html\HtmlString;
+use ipl\Html\HtmlElement;
 
 class ExpirationWidget extends BaseHtmlElement
 {
@@ -66,21 +66,13 @@ protected function assemble()
             $state = 'state-ok';
         }
 
-        $this->add([
-            Html::tag(
-                'span',
-                ['class' => '', 'style' => 'font-size: 0.9em;', 'title' => $dateTip],
-                $message
-            ),
-            Html::tag(
-                'div',
-                ['class' => 'progress-bar dont-print'],
-                Html::tag(
-                    'div',
-                    ['style' => sprintf('width: %.2F%%;', $ratio), 'class' => "bg-stateful {$state}"],
-                    new HtmlString('&nbsp;')
-                )
-            )
-        ]);
+        $progressBar = new ProgressBar(null, 35);
+        $progressBar
+            ->markComplete((int) ($ratio * 20 / 100.0))
+            ->setCompletedCssClass($state)
+            ->setSections(20);
+
+        $this->addHtml(HtmlElement::create('span', ['class' => 'progress-bar-label', 'title' => $dateTip], $message));
+        $this->addHtml(HtmlElement::create('div', ['class' => 'progress-bar'], $progressBar));
     }
 }
diff --git a/public/css/module.less b/public/css/module.less
@@ -36,14 +36,28 @@
 }
 
 .progress-bar {
-  background-color: @gray-lighter;
-  border-radius: 2px;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
-  height: 0.5em;
+  height: 1.5em;
 
-  > div {
-    border-radius: 2px;
+  svg {
     height: 100%;
+    width: 100%;
+    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
+
+    .uncompleted {
+      fill: @gray-lighter;
+    }
+
+    .state-ok {
+      fill: @color-ok;
+    }
+
+    .state-warning {
+      fill: @state-warning;
+    }
+
+    .state-critical {
+      fill: @color-critical;
+    }
   }
 }
 
@@ -54,6 +68,10 @@
 
 .expiration-col {
   width: 18em;
+
+  span.progress-bar-label {
+    font-size: 0.9em;
+  }
 }
 
 .icon-col > i {