tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-29 08:44:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Restructure timeline layout and styles

Browse Source 
refs #4190
This commit is contained in:
Johannes Meyer 2014-03-28 17:00:53 +01:00
parent c19791fdd7
commit e3be5dd255
2 changed files with 68 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
modules/monitoring/application/views/scripts/timeline/index.phtml
View File

@ -3,6 +3,7 @@ use Icinga\Util\Color;
$groupInfo = $timeline->getGroupInfo(); $groupInfo = $timeline->getGroupInfo();
$firstRow = true; $firstRow = true;
?> ?>
<div class="controls"> <div class="controls">
<div style="margin: 1em;" class="dontprint"> <div style="margin: 1em;" class="dontprint">
@ -18,69 +19,56 @@ $firstRow = true;
</div> </div>
</div> </div>
<div class="content" data-base-target="_next"> <div class="content" data-base-target="_next">
<table class="timeline"> <div class="timeline">
<tbody>
<?php foreach ($timeline as $timeInfo): ?> <?php foreach ($timeline as $timeInfo): ?>
<tr> <div class="timeframe">
<th> <span>
<a href="<?= $this->href( <a href="<?= $this->href(
'/monitoring/list/eventhistory', '/monitoring/list/eventhistory',
array( array(
'raw_timestamp<' => $timeInfo[0]->start->getTimestamp(), 'raw_timestamp<' => $timeInfo[0]->start->getTimestamp(),
'raw_timestamp>' => $timeInfo[0]->end->getTimestamp() 'raw_timestamp>' => $timeInfo[0]->end->getTimestamp()
) )
); ?>"> ); ?>">
<?= $timeInfo[0]->end->format($intervalFormat); ?> <?= $timeInfo[0]->end->format($intervalFormat); ?>
</a> </a>
</th> </span>
<div class="circles">
<?php foreach ($groupInfo as $groupName => $labelAndColor): ?> <?php foreach ($groupInfo as $groupName => $labelAndColor): ?>
<td>
<div class="circle-box">
<?php if (array_key_exists($groupName, $timeInfo[1])): ?> <?php if (array_key_exists($groupName, $timeInfo[1])): ?>
<?php <?php
$circleWidth = $timeline->calculateCircleWidth($timeInfo[1][$groupName], 2); $circleWidth = $timeline->calculateCircleWidth($timeInfo[1][$groupName], 2);
$extrapolatedCircleWidth = $timeline->getExtrapolatedCircleWidth($timeInfo[1][$groupName], 2); $extrapolatedCircleWidth = $timeline->getExtrapolatedCircleWidth($timeInfo[1][$groupName], 2);
?> ?>
<?php if ($firstRow && $extrapolatedCircleWidth !== $circleWidth): ?> <?php if ($firstRow && $extrapolatedCircleWidth !== $circleWidth): ?>
<?php <div class="outer-circle extrapolated" style="<?= sprintf(
$inlineStyle = sprintf( 'width: %3$s; height: %3$s; border-color: %2$s; background-color: %1$s;',
'width: %4$s; height: %4$s; margin-top: -%2$s; margin-left: -%2$s; border-color: %3$s; background-color: %1$s;', Color::changeBrightness($timeInfo[1][$groupName]->getColor(), 0.7),
Color::changeBrightness($timeInfo[1][$groupName]->getColor(), 0.7), $timeInfo[1][$groupName]->getColor(),
((float) substr($extrapolatedCircleWidth, 0, -2) / 2) . 'em', $extrapolatedCircleWidth
$timeInfo[1][$groupName]->getColor(), ); ?>">
$extrapolatedCircleWidth
);
?>
<div class="outer-circle extrapolated" style="<?= $inlineStyle; ?>">
<?php else: ?> <?php else: ?>
<div class="outer-circle"> <div class="outer-circle" style="<?= sprintf('width: %1$s; height: %1$s;', $circleWidth); ?>">
<?php endif ?> <?php endif ?>
<?php <a class="inner-circle" style="<?= sprintf(
$inlineStyle = sprintf( 'width: %3$s; height: %3$s; background-color: %2$s; margin-top: -%1$s; margin-left: -%1$s;',
'width: %3$s; height: %3$s; background-color: %2$s; margin-top: -%1$s; margin-left: -%1$s;', ((float) substr($circleWidth, 0, -2) / 2) . 'em',
((float) substr($circleWidth, 0, -2) / 2) . 'em', $timeInfo[1][$groupName]->getColor(),
$timeInfo[1][$groupName]->getColor(), $circleWidth
$circleWidth ); ?>" href="<?= $this->href(
); sprintf(
?> $timeInfo[1][$groupName]->getDetailUrl(),
<a class="inner-circle" style="<?= $inlineStyle; ?>" href="<?= $this->href( $timeInfo[0]->start->getTimestamp(),
sprintf( $timeInfo[0]->end->getTimestamp(),
$timeInfo[1][$groupName]->getDetailUrl(), $groupName
$timeInfo[0]->start->getTimestamp(), )
$timeInfo[0]->end->getTimestamp(), ); ?>" title="<?= $timeInfo[1][$groupName]->getValue(); ?> <?= $labelAndColor['label']; ?>"></a>
$groupName </div>
)
); ?>" title="<?= $timeInfo[1][$groupName]->getValue(); ?> <?= $labelAndColor['label']; ?>"></a>
</div>
<?php else: ?>
&nbsp;
<?php endif ?> <?php endif ?>
</div>
</td>
<?php endforeach ?> <?php endforeach ?>
</tr> </div>
<?php $firstRow = false; ?> </div>
<?php $firstRow = false; ?>
<?php endforeach ?> <?php endforeach ?>
</tbody> </div>
</table>
</div> </div>

57
public/css/icinga/monitoring-colors.less
View File

@ -660,45 +660,44 @@ div.timeline-legend {
} }
} }
table.timeline { div.timeline {
clear: left; div.timeframe {
height: 7em;
margin-bottom: 1em;
clear: left;
th { span {
width: 8em; width: 8em;
padding-right: 1.5em; margin-top: 2.3em;
margin-right: 1.5em;
display: block;
float: left;
text-align: center;
a { a {
color: black; color: black;
font-size: 0.8em; font-size: 0.8em;
text-decoration: none; font-weight: bold;
white-space: nowrap; text-decoration: none;
white-space: nowrap;
&:hover { &:hover {
color: #666; color: #666;
}
} }
} }
}
td { div.circles {
padding: 0.5em; float: left;
div.circle-box {
width: 6em;
height: 6em;
position: relative;
div.outer-circle { div.outer-circle {
width: 100%; // width: inline-style;
height: 100%; // height: inline-style;
position: absolute; margin: 0.5em;
position: relative;
float: left;
&.extrapolated { &.extrapolated {
// width: inline-style;
// height: inline-style;
top: 48%; // Compensate border
left: 48%; // Compensate border
// margin-top: inline-style;
// margin-left: inline-style;
border-width: 2px; border-width: 2px;
border-style: dotted; border-style: dotted;
//border-color: inline-style; //border-color: inline-style;