From 25979f44e3bb54aaf04b32f7b41bb51bac22235c Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Fri, 7 Mar 2014 13:15:26 +0100 Subject: [PATCH] Refine box styles --- .../controllers/TacticalController.php | 9 ++++ .../views/scripts/list/contactgroups.phtml | 5 +- .../components/monitoringfeatures.phtml | 53 ++++++++++++------- .../views/scripts/tactical/index.phtml | 7 ++- public/css/icinga/layout-colors.less | 7 --- public/css/icinga/monitoring-colors.less | 52 +++++++++++++----- 6 files changed, 91 insertions(+), 42 deletions(-) diff --git a/modules/monitoring/application/controllers/TacticalController.php b/modules/monitoring/application/controllers/TacticalController.php index 0fd636278..f7df84091 100644 --- a/modules/monitoring/application/controllers/TacticalController.php +++ b/modules/monitoring/application/controllers/TacticalController.php @@ -4,11 +4,20 @@ use Icinga\Module\Monitoring\Controller as MonitoringController; use Icinga\Module\Monitoring\DataView\StatusSummary; +use Icinga\Web\Url; class Monitoring_TacticalController extends MonitoringController { public function indexAction() { + $this->getTabs()->add( + 'tactical_overview', + array( + 'title' => 'Tactical Overview', + 'url' => Url::fromPath('monitoring/tactical') + ) + )->activate('tactical_overview'); + $this->view->statusSummary = StatusSummary::fromRequest( $this->_request, array( diff --git a/modules/monitoring/application/views/scripts/list/contactgroups.phtml b/modules/monitoring/application/views/scripts/list/contactgroups.phtml index 49883eba2..ddf1d0f6d 100644 --- a/modules/monitoring/application/views/scripts/list/contactgroups.phtml +++ b/modules/monitoring/application/views/scripts/list/contactgroups.phtml @@ -1,7 +1,8 @@ +compact): ?>
- tabs ?> + tabs ?>
- +
$groupInfo): ?> diff --git a/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml b/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml index fe6656fb9..41ad3331d 100644 --- a/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml +++ b/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml @@ -1,21 +1,26 @@

translate('Monitoring Features'); ?>

+statusSummary->hosts_without_flap_detection || $this->statusSummary->services_without_flap_detection || + $this->statusSummary->hosts_flapping || $this->statusSummary->services_flapping): ?> +
translate('Flap detection'); ?>
+
translate('Flap detection'); ?>
+
statusSummary->hosts_without_flap_detection): ?> -
+
+ ); ?>" class="feature-highlight"> statusSummary->hosts_without_flap_detection); ?> -
+
href( 'monitoring/list/hosts', array('host_is_flapping' => 1) - ); ?>" style="color: red;"> + ); ?>" class="feature-highlight"> statusSummary->hosts_flapping); ?> @@ -35,15 +40,15 @@
statusSummary->services_without_flap_detection): ?> -
+
+ ); ?>" class="feature-highlight"> statusSummary->services_without_flap_detection); ?> -
+
href( 'monitoring/list/services', array('service_is_flapping' => 1) - ); ?>" style="color: red;"> + ); ?>" class="feature-highlight"> statusSummary->services_flapping); ?> @@ -64,21 +69,25 @@
+statusSummary->hosts_not_triggering_notifications || $this->statusSummary->services_not_triggering_notifications): ?> +
translate('Notifications'); ?>
+
translate('Notifications'); ?>
+
statusSummary->hosts_not_triggering_notifications): ?> -
+
+ ); ?>" class="feature-highlight"> statusSummary->hosts_not_triggering_notifications); ?> -
+
+
+ ); ?>" class="feature-highlight"> statusSummary->services_not_triggering_notifications); ?> -
+
translate('Event handlers'); ?>
+
translate('Event handlers'); ?>
+
statusSummary->hosts_not_processing_event_handlers): ?> -
+
+ ); ?>" class="feature-highlight"> statusSummary->hosts_not_processing_event_handlers); ?> -
+
+
+ ); ?>" class="feature-highlight"> statusSummary->services_not_processing_event_handlers); ?> -
+
+compact): ?> +
+ tabs ?> +
+ +
render('tactical/components/problem_hosts.phtml'); ?> render('tactical/components/ok_hosts.phtml'); ?> diff --git a/public/css/icinga/layout-colors.less b/public/css/icinga/layout-colors.less index 1d9211675..0b6c25660 100644 --- a/public/css/icinga/layout-colors.less +++ b/public/css/icinga/layout-colors.less @@ -50,10 +50,3 @@ @colorInvalid: #999; @colorUnreachable: #dd66ff; @colorUnreachableHandled: #ee99ff; -@colorActiveCheck: #44bb77; -@colorPassiveCheck: #44ccaa; -@colorDisabledCheck: #cccccc; -@colorEnabled: #44bb77; -@colorDisabled: #cccccc; -@colorFlapping: #16c3cc; - diff --git a/public/css/icinga/monitoring-colors.less b/public/css/icinga/monitoring-colors.less index e006b5bc9..20f0b6de9 100644 --- a/public/css/icinga/monitoring-colors.less +++ b/public/css/icinga/monitoring-colors.less @@ -237,8 +237,8 @@ a.critical { /* Box caption */ .boxview div.box h2 { - margin-top: 0; - margin-bottom: 0.4em; + margin-top: 0.2em; + margin-bottom: 0.6em; color: white; font-weight: bold; @@ -246,7 +246,7 @@ a.critical { .boxview div.box h3 { margin-top: 0; - margin-bottom: 0.4em; + margin-bottom: 0.6em; font-size: 0.8em; color: #eee; @@ -254,7 +254,7 @@ a.critical { /* Box body of contents */ .boxview div.box.contents { - background: #eee; + background: #fbfbfb; border-radius: 0.4em; -moz-border-radius: 0.4em; } @@ -279,12 +279,17 @@ a.critical { } .boxview div.box-separator { - border-style: solid; - border-color: #555; + font-size: 0.8em; + padding: 0.4em 0 0.4em; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 0; border-right-width: 0; + + font-weight: bold; + letter-spacing: 0.1em; + border-style: solid; + border-color: #555; background-color: #bbb; } @@ -321,28 +326,30 @@ a.critical { /* Monitoring box element styles */ +/* Host- and Servicegroup element styles */ + div.box.entry.state_up, div.box.entry.state_ok { - border-left: 0.5em solid @colorOk; + border-left: 1em solid @colorOk; } div.box.entry.state_pending { - border-left: 0.5em solid @colorPending; + border-left: 1em solid @colorPending; } div.box.entry.state_down, div.box.entry.state_critical { - border-left: 0.5em solid @colorCritical; + border-left: 1em solid @colorCritical; background-color: @colorCritical; color: white; } div.box.entry.state_warning { - border-left: 0.5em solid @colorWarning; + border-left: 1em solid @colorWarning; background-color: @colorWarning; color: white; } div.box.entry.state_unreachable, div.box.entry.state_unknown { - border-left: 0.5em solid @colorUnknown; + border-left: 1em solid @colorUnknown; background-color: @colorUnknown; color: white; } @@ -352,6 +359,27 @@ div.box.entry.handled { color: inherit; } +/* Tactical overview element styles */ + +div.tactical div.box { + min-height: 15em; +} + +div.box.monitoringfeatures div.box-separator { + color: white; + background-color: @colorOk; +} + +div.box.monitoringfeatures div.feature-highlight { + background-color: @colorCritical; +} + +div.box.monitoringfeatures a.feature-highlight { + font-weight: bold; +} + +/* Contactgroup element styles */ + div.box.contactgroup { width: 18em; } @@ -367,7 +395,7 @@ div.box.contactgroup div.box.entry img { margin: 0.4em; float: left; - border: 2px solid white; + border: 2px solid LightGrey; } div.box.contactgroup div.box.entry a {