tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CSS and Parts: Tactical Overview redesin

This commit is contained in:
Bernd Erk 2015-09-29 14:23:32 +02:00
parent 44b9d44641
commit 09e32b63f8
3 changed files with 117 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
View File

@ -5,9 +5,9 @@
<div class="box contents"> <div class="box contents">
<?php if ($this->statusSummary->hosts_without_flap_detection || $this->statusSummary->services_without_flap_detection || <?php if ($this->statusSummary->hosts_without_flap_detection || $this->statusSummary->services_without_flap_detection ||
$this->statusSummary->hosts_flapping || $this->statusSummary->services_flapping): ?> $this->statusSummary->hosts_flapping || $this->statusSummary->services_flapping): ?>
<div class="box-separator feature-highlight"><?= $this->translate('Flap Detection'); ?></div> <div class="box-separator badge feature-highlight"><?= $this->translate('Flap Detection'); ?></div>
<?php else: ?> <?php else: ?>
<div class="box-separator"><?= $this->translate('Flap Detection'); ?></div> <div class="box-separator badge"><?= $this->translate('Flap Detection'); ?></div>
<?php endif ?> <?php endif ?>
<table> <table>
<tbody> <tbody>
@ -126,9 +126,9 @@
</tbody> </tbody>
</table> </table>
<?php if ($this->statusSummary->hosts_not_triggering_notifications || $this->statusSummary->services_not_triggering_notifications): ?> <?php if ($this->statusSummary->hosts_not_triggering_notifications || $this->statusSummary->services_not_triggering_notifications): ?>
<div class="box-separator feature-highlight"><?= $this->translate('Notifications'); ?></div> <div class="box-separator badge feature-highlight"><?= $this->translate('Notifications'); ?></div>
<?php else: ?> <?php else: ?>
<div class="box-separator"><?= $this->translate('Notifications'); ?></div> <div class="box-separator badge"><?= $this->translate('Notifications'); ?></div>
<?php endif ?> <?php endif ?>
<table> <table>
<tbody> <tbody>
@ -205,9 +205,9 @@
</tbody> </tbody>
</table> </table>
<?php if ($this->statusSummary->hosts_not_processing_event_handlers || $this->statusSummary->services_not_processing_event_handlers): ?> <?php if ($this->statusSummary->hosts_not_processing_event_handlers || $this->statusSummary->services_not_processing_event_handlers): ?>
<div class="box-separator feature-highlight"><?= $this->translate('Event Handlers'); ?></div> <div class="box-separator badge feature-highlight"><?= $this->translate('Event Handlers'); ?></div>
<?php else: ?> <?php else: ?>
<div class="box-separator"><?= $this->translate('Event Handlers'); ?></div> <div class="box-separator badge"><?= $this->translate('Event Handlers'); ?></div>
<?php endif ?> <?php endif ?>
<table> <table>
<tbody> <tbody>

12
modules/monitoring/application/views/scripts/tactical/components/parts/servicestatesummarybyhoststate.phtml
View File

@ -4,7 +4,7 @@ use Icinga\Module\Monitoring\Object\Service;
?> ?>
<?php if ($services_critical_handled || $services_critical_unhandled): ?> <?php if ($services_critical_handled || $services_critical_unhandled): ?>
<div class="box entry state_<?= Service::getStateText(2); ?> <?= $services_critical_unhandled ? '' : 'handled'; ?>"> <div class="box badge entry state-<?= Service::getStateText(2); ?> <?= $services_critical_unhandled ? '' : 'handled'; ?>">
<?php if ($services_critical_unhandled): ?> <?php if ($services_critical_unhandled): ?>
<?= $this->qlink( <?= $this->qlink(
$services_critical_unhandled . ' ' . Service::getStateText(2, true), $services_critical_unhandled . ' ' . Service::getStateText(2, true),
@ -103,7 +103,7 @@ use Icinga\Module\Monitoring\Object\Service;
</div> </div>
<?php endif ?> <?php endif ?>
<?php if ($services_warning_handled || $services_warning_unhandled): ?> <?php if ($services_warning_handled || $services_warning_unhandled): ?>
<div class="box entry state_<?= Service::getStateText(1); ?> <?= $services_warning_unhandled ? '' : 'handled'; ?>"> <div class="box badge entry state-<?= Service::getStateText(1); ?> <?= $services_warning_unhandled ? '' : 'handled'; ?>">
<?php if ($services_warning_unhandled): ?> <?php if ($services_warning_unhandled): ?>
<?= $this->qlink( <?= $this->qlink(
$services_warning_unhandled . ' ' . Service::getStateText(1, true), $services_warning_unhandled . ' ' . Service::getStateText(1, true),
@ -202,7 +202,7 @@ use Icinga\Module\Monitoring\Object\Service;
</div> </div>
<?php endif ?> <?php endif ?>
<?php if ($services_unknown_handled || $services_unknown_unhandled): ?> <?php if ($services_unknown_handled || $services_unknown_unhandled): ?>
<div class="box entry state_<?= Service::getStateText(3); ?> <?= $services_unknown_unhandled ? '' : 'handled'; ?>"> <div class="box badge entry state-<?= Service::getStateText(3); ?> <?= $services_unknown_unhandled ? '' : 'handled'; ?>">
<?php if ($services_unknown_unhandled): ?> <?php if ($services_unknown_unhandled): ?>
<?= $this->qlink( <?= $this->qlink(
$services_unknown_unhandled . ' ' . Service::getStateText(3, true), $services_unknown_unhandled . ' ' . Service::getStateText(3, true),
@ -301,7 +301,7 @@ use Icinga\Module\Monitoring\Object\Service;
</div> </div>
<?php endif ?> <?php endif ?>
<?php if ($services_ok): ?> <?php if ($services_ok): ?>
<div class="box entry state_<?= Service::getStateText(0); ?>"> <div class="box badge entry state-<?= Service::getStateText(0); ?>">
<?= $this->qlink( <?= $this->qlink(
$services_ok . ' ' . Service::getStateText(0, true), $services_ok . ' ' . Service::getStateText(0, true),
'monitoring/list/services', 'monitoring/list/services',
@ -348,7 +348,7 @@ use Icinga\Module\Monitoring\Object\Service;
</div> </div>
<?php endif ?> <?php endif ?>
<?php if ($services_pending): ?> <?php if ($services_pending): ?>
<div class="box entry state_<?= Service::getStateText(99); ?>"> <div class="box badge entry state-<?= Service::getStateText(99); ?>">
<?= $this->qlink( <?= $this->qlink(
$services_pending . ' ' . Service::getStateText(99, true), $services_pending . ' ' . Service::getStateText(99, true),
'monitoring/list/services', 'monitoring/list/services',
@ -393,4 +393,4 @@ use Icinga\Module\Monitoring\Object\Service;
); ?> ); ?>
<?php endif ?> <?php endif ?>
</div> </div>
<?php endif ?> <?php endif ?>

113
modules/monitoring/public/css/module.less
View File

@ -1,13 +1,110 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
/* Badges */ /* Generic box element */
.state-badges {
> ul > li { .boxview a {
padding-right: 5px; text-decoration: none;
&:last-child { }
padding-right: 0;
} .boxview > div.box {
} text-align: center;
vertical-align: top;
display: inline-block;
padding: 20px;
margin: 0.5em;
}
/* Box body of contents */
.boxview div.box.contents {
padding-top: 20px;
}
.boxview div.box.contents table {
width: 100%;
}
.boxview div.box.contents td {
vertical-align: top;
}
/* Box entry */
/* Any line of a box entry */
.boxview div.box.entry a {
display: block;
color: inherit;
}
.boxview div.box.badge {
border-radius: 3px;
margin: 5px;
padding: 5px;
}
.boxview div.box.entry a:hover {
}
/* First line of a box entry */
.boxview div.box.entry a:first-child {
}
/* End of generic box element */
/* Tactical overview element styles */
.tactical > .boxview > div.box {
min-height: 30em;
min-width: 30em;
}
.tactical div.box.header {
min-height: 5em;
border-bottom:1px solid @gray-lighter;
}
div.box.contents.zero {
}
div.box.ok_hosts.state_up {
border: 2px solid @color-ok;
border-top: 15px solid @color-ok;
}
div.box.problem_hosts.state_down {
border: 2px solid @color-critical;
border-top: 15px solid @color-critical;
}
div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
min-width: 11.1em;
}
div.box.monitoringfeatures {
border: 2px solid @gray;
border-top: 15px solid @gray;
}
div.box.monitoringfeatures div.box-separator {
color: white;
background-color: @color-ok;
}
div.box.monitoringfeatures div.feature-highlight {
background-color: @color-critical;
}
div.box.monitoringfeatures a.feature-highlight {
}
div.box.hostservicechecks {
border: 2px solid @gray;
border-top: 15px solid @gray;
}
div.box.hostservicechecks th {
padding-bottom: 20px;
} }
//p.pluginoutput { //p.pluginoutput {