Eric Lippmann
parent
656359a108
commit
ba5fe61fa9
|
|
@ -46,34 +46,33 @@ class TimelineController extends Controller
|
|||
),
|
||||
array(
|
||||
'notify' => array(
|
||||
'class' => 'timeline-notification',
|
||||
'detailUrl' => $detailUrl,
|
||||
'label' => mt('monitoring', 'Notifications'),
|
||||
'color' => '#3a71ea'
|
||||
'label' => mt('monitoring', 'Notifications')
|
||||
),
|
||||
'hard_state' => array(
|
||||
'class' => 'timeline-hard-state',
|
||||
'detailUrl' => $detailUrl,
|
||||
'label' => mt('monitoring', 'Hard state changes'),
|
||||
'color' => '#ff7000'
|
||||
'label' => mt('monitoring', 'Hard state changes')
|
||||
),
|
||||
'comment' => array(
|
||||
'class' => 'timeline-comment',
|
||||
'detailUrl' => $detailUrl,
|
||||
'label' => mt('monitoring', 'Comments'),
|
||||
'color' => '#79bdba'
|
||||
'label' => mt('monitoring', 'Comments')
|
||||
),
|
||||
'ack' => array(
|
||||
'detailUrl' => $detailUrl,
|
||||
'label' => mt('monitoring', 'Acknowledgements'),
|
||||
'color' => '#a2721d'
|
||||
'class' => 'timeline-ack',
|
||||
'label' => mt('monitoring', 'Acknowledgements')
|
||||
),
|
||||
'dt_start' => array(
|
||||
'class' => 'timeline-downtime-start',
|
||||
'detailUrl' => $detailUrl,
|
||||
'label' => mt('monitoring', 'Started downtimes'),
|
||||
'color' => '#8e8e8e'
|
||||
'label' => mt('monitoring', 'Started downtimes')
|
||||
),
|
||||
'dt_end' => array(
|
||||
'class' => 'timeline-downtime-end',
|
||||
'detailUrl' => $detailUrl,
|
||||
'label' => mt('monitoring', 'Ended downtimes'),
|
||||
'color' => '#d5d6ad'
|
||||
'label' => mt('monitoring', 'Ended downtimes')
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ if (! $beingExtended && !$this->compact): ?>
|
|||
</div>
|
||||
<div class="timeline-legend">
|
||||
<h2><?= $this->translate('Legend'); ?></h2>
|
||||
<?php foreach ($groupInfo as $labelAndColor): ?>
|
||||
<span style="background-color: <?= $labelAndColor['color']; ?>;">
|
||||
<span><?= $labelAndColor['label']; ?></span>
|
||||
<?php foreach ($groupInfo as $labelAndClass): ?>
|
||||
<span class="<?= $labelAndClass['class'] ?>">
|
||||
<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(
|
||||
'width: %4$s; height: %4$s; border-color: %3$s; background-color: %1$s; margin-top: -%2$Fem;',
|
||||
Color::changeBrightness($timeInfo[1][$groupName]->getColor(), 0.7),
|
||||
<div class="outer-circle extrapolated <?= $timeInfo[1][$groupName]->getClass() ?>" style="<?= sprintf(
|
||||
'width: %2$s; height: %2$s; margin-top: -%1$Fem;',
|
||||
(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
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*
|
||||
* @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
|
||||
* Get the CSS class
|
||||
*
|
||||
* @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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue