Use svg to render cert expiration progress bar

Icinga · Jul 14, 2023 · 11b9a40 · 11b9a40
1 parent 714f32c
commit 11b9a40
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 27 deletions.
diff --git a/library/X509/ExpirationWidget.php b/library/X509/ExpirationWidget.php
@@ -4,13 +4,16 @@
 
 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
 {
+ /** @var int Is used to limit the svg sections of a single progress bar */
+ public const MAX_SVG_SECTIONS = 60;
+
  protected $tag = 'div';
 
  protected $from;
@@ -66,21 +69,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(['class' => 'progress-bar'], 35);
+ $progressBar
+ ->markComplete((int) ($ratio * static::MAX_SVG_SECTIONS / 100.0))
+ ->setCompletedCssClass($state)
+ ->setSections(static::MAX_SVG_SECTIONS);
+
+ $this->addHtml(HtmlElement::create('span', ['class' => 'progress-bar-label', 'title' => $dateTip], $message));
+ $this->addHtml($progressBar);
  }
 }
diff --git a/public/css/module.less b/public/css/module.less
@@ -35,15 +35,25 @@
  }
 }
 
-.progress-bar {
- background-color: @gray-lighter;
- border-radius: 2px;
- box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
- height: 0.5em;
-
- > div {
- border-radius: 2px;
- height: 100%;
+svg.progress-bar {
+ height: 1.5em;
+ width: 100%;
+ filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
+
+ .state-none > * {
+ fill: @gray-lighter;
+ }
+
+ .state-ok {
+ fill: @color-ok;
+ }
+
+ .state-warning {
+ fill: @state-warning;
+ }
+
+ .state-critical {
+ fill: @color-critical;
  }
 }
 
@@ -54,6 +64,10 @@
 
 .expiration-col {
  width: 18em;
+
+ span.progress-bar-label {
+ font-size: 0.9em;
+ }
 }
 
 .icon-col > i {