monitoring: Make timeline colors accessible

fixes #11871

modules/monitoring/application/controllers/TimelineController.php

@@ -46,34 +46,33 @@ class TimelineController extends Controller
             ),
             array(
                 'notify'        => array(
+                    'class'     => 'timeline-notification',
                     'detailUrl' => $detailUrl,
-                    'label'     => mt('monitoring', 'Notifications'),
+                    'label'     => mt('monitoring', 'Notifications')
-                    'color'     => '#3a71ea'
                 ),
                 'hard_state'    => array(
+                    'class'     => 'timeline-hard-state',
                     'detailUrl' => $detailUrl,
-                    'label'     => mt('monitoring', 'Hard state changes'),
+                    'label'     => mt('monitoring', 'Hard state changes')
-                    'color'     => '#ff7000'
                 ),
                 'comment'       => array(
+                    'class'     => 'timeline-comment',
                     'detailUrl' => $detailUrl,
-                    'label'     => mt('monitoring', 'Comments'),
+                    'label'     => mt('monitoring', 'Comments')
-                    'color'     => '#79bdba'
                 ),
                 'ack'           => array(
-                    'detailUrl' => $detailUrl,
+                    'class'     => 'timeline-ack',
-                    'label'     => mt('monitoring', 'Acknowledgements'),
+                    'label'     => mt('monitoring', 'Acknowledgements')
-                    'color'     => '#a2721d'
                 ),
                 'dt_start'      => array(
+                    'class'     => 'timeline-downtime-start',
                     'detailUrl' => $detailUrl,
-                    'label'     => mt('monitoring', 'Started downtimes'),
+                    'label'     => mt('monitoring', 'Started downtimes')
-                    'color'     => '#8e8e8e'
                 ),
                 'dt_end'        => array(
+                    'class'     => 'timeline-downtime-end',
                     'detailUrl' => $detailUrl,
-                    'label'     => mt('monitoring', 'Ended downtimes'),
+                    'label'     => mt('monitoring', 'Ended downtimes')
-                    'color'     => '#d5d6ad'
                 )
             )
         );

modules/monitoring/application/views/scripts/timeline/index.phtml

@@ -13,9 +13,9 @@ if (! $beingExtended && !$this->compact): ?>
     </div>
     <div class="timeline-legend">
         <h2><?= $this->translate('Legend'); ?></h2>
-<?php foreach ($groupInfo as $labelAndColor): ?>
+<?php foreach ($groupInfo as $labelAndClass): ?>
-        <span style="background-color: <?= $labelAndColor['color']; ?>;">
+        <span class="<?= $labelAndClass['class'] ?>">
-            <span><?= $labelAndColor['label']; ?></span>
+            <span><?= $labelAndClass['label']; ?></span>
         </span>
 <?php endforeach ?>
     </div>
@@ -84,11 +84,9 @@ $extrapolatedCircleWidth = $timeline->getExtrapolatedCircleWidth($timeInfo[1][$g
 ?>
 <?php if ($firstRow && $extrapolatedCircleWidth !== $circleWidth): ?>
             <div class="circle-box" style="width: <?= $extrapolatedCircleWidth; ?>;">
-                <div class="outer-circle extrapolated" style="<?= sprintf(
+                <div class="outer-circle extrapolated <?= $timeInfo[1][$groupName]->getClass() ?>" style="<?= sprintf(
-                    'width: %4$s; height: %4$s; border-color: %3$s; background-color: %1$s; margin-top: -%2$Fem;',
+                    'width: %2$s; height: %2$s; margin-top: -%1$Fem;',
-                    Color::changeBrightness($timeInfo[1][$groupName]->getColor(), 0.7),
                     (float) substr($extrapolatedCircleWidth, 0, -2) / 2,
-                    $timeInfo[1][$groupName]->getColor(),
                     $extrapolatedCircleWidth
                 ); ?>">
 <?php else: ?>
@@ -114,11 +112,10 @@ $extrapolatedCircleWidth = $timeline->getExtrapolatedCircleWidth($timeInfo[1][$g
                                 strtolower($labelAndColor['label']),
                                 $titleTime
                             ),
-                            'class' => 'inner-circle',
+                            'class' => 'inner-circle ' . $timeInfo[1][$groupName]->getClass(),
                             'style' => sprintf(
-                                'width: %3$s; height: %3$s; background-color: %2$s; margin-top: -%1$Fem; margin-left: -%1$Fem;',
+                                'width: %2$s; height: %2$s; margin-top: -%1$Fem; margin-left: -%1$Fem;',
                                 (float) substr($circleWidth, 0, -2) / 2,
-                                $timeInfo[1][$groupName]->getColor(),
                                 (string) $circleWidth
                             )
                         )

modules/monitoring/library/Monitoring/Timeline/TimeEntry.php

@@ -55,11 +55,11 @@ class TimeEntry
     protected $label;
 
     /**
-     * The color of this group
+     * The CSS class of the entry
      *
      * @var string
      */
-    protected $color;
+    protected $class;
 
     /**
      * Return a new TimeEntry object with the given attributes being set
@@ -209,22 +209,25 @@ class TimeEntry
     }
 
     /**
-     * Set this group's color
+     * Get the CSS class
-     *
-     * @param   string  $color  The color to set. (The css name or hex-code)
-     */
-    public function setColor($color)
-    {
-        $this->color = $color;
-    }
-
-    /**
-     * Get the color of this group
      *
      * @return  string
      */
-    public function getColor()
+    public function getClass()
     {
-        return $this->color;
+        return $this->class;
+    }
+
+    /**
+     * Set the CSS class
+     *
+     * @param   string  $class
+     *
+     * @return  $this
+     */
+    public function setClass($class)
+    {
+        $this->class = $class;
+        return $this;
     }
 }

modules/monitoring/library/Monitoring/Timeline/TimeLine.php

@@ -200,7 +200,7 @@ class TimeLine implements IteratorAggregate
     }
 
     /**
-     * Return all known group types (identifiers) with their respective labels and colors as array
+     * Return all known group types (identifiers) with their respective labels and classess as array
      *
      * @return  array
      */
@@ -208,8 +208,8 @@ class TimeLine implements IteratorAggregate
     {
         $groupInfo = array();
         foreach ($this->identifiers as $name => $attributes) {
+            $groupInfo[$name]['class'] = $attributes['class'];
             $groupInfo[$name]['label'] = $attributes['label'];
-            $groupInfo[$name]['color'] = $attributes['color'];
         }
 
         return $groupInfo;

modules/monitoring/public/css/module.less

@@ -417,6 +417,61 @@ div.timeline {
   }
 }
 
+@timeline-notification-color: #3a71ea;
+@timeline-hard-state-color: #ff7000;
+@timeline-comment-color: #79bdba;
+@timeline-ack-color: #a2721d;
+@timeline-downtime-start-color: #8e8e8e;
+@timeline-downtime-end-color: #d5d6ad;
+
+.timeline-notification {
+  background-color: @timeline-notification-color;
+
+  &.extrapolated {
+    background-color: lighten(@timeline-notification-color, 20%);
+  }
+}
+
+.timeline-hard-state {
+  background-color: @timeline-hard-state-color;
+
+  &.extrapolated {
+    background-color: lighten(@timeline-hard-state-color, 20%);
+  }
+}
+
+.timeline-comment {
+  background-color: @timeline-comment-color;
+
+  &.extrapolated {
+    background-color: lighten(@timeline-comment-color, 20%);
+  }
+}
+
+.timeline-ack {
+  background-color: @timeline-ack-color;
+
+  &.extrapolated {
+    background-color: lighten(@timeline-ack-color, 20%);
+  }
+}
+
+.timeline-downtime-start {
+  background-color: @timeline-downtime-start-color;
+
+  &.extrapolated {
+    background-color: lighten(@timeline-downtime-start-color, 20%);
+  }
+}
+
+.timeline-downtime-end {
+  background-color: @timeline-downtime-end-color;
+
+  &.extrapolated {
+    background-color: lighten(@timeline-downtime-end-color, 20%);
+  }
+}
+
 /* End of monitoring timeline styles */
 
 /* Object features */

public/css/themes/high-contrast.less

@@ -16,7 +16,6 @@
 @text-color: #191919;
 @text-color-light: #555555;
 
-
 .badge {
   background-color: @text-color-light;
 }
@@ -64,3 +63,63 @@
     color: @text-color;
     text-decoration: underline;
 }
+
+.icinga-module.module-monitoring {
+  @timeline-notification-color: #1650CF;
+  @timeline-hard-state-color: #A24600;
+  @timeline-comment-color: #346964;
+  @timeline-ack-color: #855D18;
+  @timeline-downtime-start-color: #515151;
+  @timeline-downtime-end-color: #5e5e2f;
+
+  // Unfortunately it does not suffice to only override the timeline colors here, because our less compiler seems to
+  // have the related style block in module.less already evaluated
+
+  .timeline-notification {
+    background-color: @timeline-notification-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-notification-color, 20%);
+    }
+  }
+
+  .timeline-hard-state {
+    background-color: @timeline-hard-state-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-hard-state-color, 20%);
+    }
+  }
+
+  .timeline-comment {
+    background-color: @timeline-comment-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-comment-color, 20%);
+    }
+  }
+
+  .timeline-ack {
+    background-color: @timeline-ack-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-ack-color, 20%);
+    }
+  }
+
+  .timeline-downtime-start {
+    background-color: @timeline-downtime-start-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-downtime-start-color, 20%);
+    }
+  }
+
+  .timeline-downtime-end {
+    background-color: @timeline-downtime-end-color;
+
+    &.extrapolated {
+      background-color: lighten(@timeline-downtime-end-color, 20%);
+    }
+  }
+}