Status view and icons

refs #4824

library/Icinga/Web/Controller/ActionController.php

@@ -112,6 +112,7 @@ class ActionController extends Zend_Controller_Action
         $url = substr($url, strlen($this->getRequest()->getBaseUrl()));
         // the host is mandatory, but ignored in Zend
         $req = new Request('http://ignoredhost/' . $url);
+        $req->setUser($this->getRequest()->getUser());
         $req->setBaseUrl($this->getRequest()->getBaseUrl());
         $router = Zend_Controller_Front::getInstance()->getRouter();
         $router->route($req);

modules/monitoring/application/views/helpers/Perfdata.php

@@ -80,7 +80,7 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
             $result = $perfdata;
         }
         if (! $compact && $result !== '') {
-            $result = '<table style="width: 100%">' . $result . '</table>';
+            $result = '<table style="width: 100%; border: none;">' . $result . '</table>';
         }
 
         return $result;

modules/monitoring/application/views/scripts/list/hosts.phtml

@@ -43,7 +43,7 @@ $viewHelper = $this->getHelper('MonitoringState');
 
           <?php if (!$host->host_notifications_enabled): ?>
           <a href="#" title="Notifications Disabled">
-            <i>{{NOTIFICATIONS_DISABLED_ICON}}</i>
+              <i class="icon-table icinga-icon-notification-disabled"></i>
           </a>
           <?php endif; ?>
 

modules/monitoring/application/views/scripts/show/components/status.phtml

@@ -0,0 +1,116 @@
+<?php
+    $object = $this->object;
+    $type = (isset($object->service_description) === true) ? 'service' : 'host';
+
+    if ($type === 'host') {
+        $objectStateName = strtolower($this->util()->getHostStateName($this->object->host_state));
+    } else {
+        $objectStateName = strtolower($this->util()->getServiceStateName($this->object->service_state));
+    }
+?>
+<div>
+    <div class="panel-heading border-status-<?= $objectStateName ?>">
+        <div class="panel-hostname">
+            <?php if ($type === 'host'): ?>
+                <a title="View all services for this host"
+                   href="<?= $this->href('monitoring/list/services', array('host' => $object->host_name)); ?>">
+                    <?= $this->escape($object->host_name); ?>
+                </a><?= ($object->host_name !== $object->host_alias) ? ',' : ''; ?>
+
+                <?php if ($object->host_name !== $object->host_alias): ?>
+                    <?= $object->host_alias ?>
+                <?php endif; ?>
+
+                <span class="panel-header-status">
+                    - <?= $this->util()->getHostStateName($this->object->host_state); ?>
+                    since <?= $this->timeSince($this->object->host_last_state_change); ?>
+                </span>
+
+            <?php else: ?>
+                <?= $this->escape($object->service_description); ?>
+
+                <span class="panel-header-status">
+                    - <?= $this->util()->getServiceStateName($object->service_state); ?>
+                    since <?= $this->timeSince($object->service_last_state_change); ?>
+                </span>
+            <?php endif; ?>
+
+            <?= $this->render('show/components/statusIcons.phtml'); ?>
+
+            <?php if ($object->service_display_name && $object->service_description !== $object->service_display_name): ?>
+                <div class="small-row">
+                    (<?= $object->service_display_name; ?>)
+                </div>
+            <?php endif; ?>
+            <div class="small-row">
+                <?php if ($type === 'service'): ?>
+                    On <?= $object->host_name; ?>
+                    <?php if ($object->host_state > 0): ?>
+                        (<?= $this->util()->getHostStateName($this->object->host_state); ?>)
+                    <?php endif; ?>
+                <?php endif; ?>
+
+                <?php if ($object->action_url || $object->notes_url): ?>
+                        <br />
+                        <?php if ($object->notes_url): ?>
+                            <a target="_new" href='<?= $object->notes_url ?>'>Notes</a>
+                        <?php endif; ?>
+                        <?php if ($object->action_url): ?>
+                            <a target="_new" href='<?= $this->object->action_url ?>'>Action</a>
+                        <?php endif; ?>
+                <?php endif; ?>
+            </div>
+        </div>
+    </div>
+
+    <hr class="separator" />
+
+    <div class="panel-body">
+
+        <div class="panel-row">
+            <p><?= $this->pluginOutput($object->output); ?></p>
+
+            <form>
+                <button type="submit" class="button btn-cta btn-wide">Recheck</button>
+            </form>
+        </div>
+
+        <div class="panel-row">
+            <?php if ($object->perfdata): ?>
+                <div class="small-row">
+                    <?= $this->perfdata($this->object->perfdata); ?>
+                </div>
+            <?php endif; ?>
+            <?php if ($object->long_output): ?>
+                <div class="small-row">
+                    <?= $this->pluginOutput($object->long_output); ?>
+                </div>
+            <?php endif; ?>
+        </div>
+
+        <div class="panel-row">
+            <div class="panel-label">
+                Last Check
+            </div>
+            <div class="panel-content">
+                <?= $this->dateFormat()->formatDateTime($object->last_check); ?>
+            </div>
+        </div>
+
+        <div class="panel-row">
+            <div class="panel-label">
+                Next Check
+            </div>
+            <div class="panel-content">
+                <?= $this->dateFormat()->formatDateTime($object->next_check); ?>
+            </div>
+            <div class="panel-button">
+                <form>
+                    <button class="button btn-common btn-small">
+                        <i class="icinga-icon-reschedule"></i>
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

modules/monitoring/application/views/scripts/show/components/statusIcons.phtml

@@ -0,0 +1,57 @@
+<?php
+    $o = $this->object;
+    $isService = (isset($o->service_description)) ? true : false;
+    $transitionObject = new \stdClass();
+    $transitionObject->handled =
+        ($isService) ? $o->service_handled : $o->host_handled;
+    $transitionObject->state =
+        ($isService) ? $o->service_state : $o->host_state;
+    $transitionObject->acknowledged =
+        ($isService) ? $o->service_acknowledged : $o->host_acknowledged;
+    $transitionObject->in_downtime =
+        ($isService) ? $o->in_downtime : $o->host_in_downtime;
+    $transitionObject->is_flapping =
+        ($isService) ? $o->is_flapping : $o->host_is_flapping;
+    $transitionObject->notifications_enabled =
+        ($isService) ? $o->notifications_enabled : $o->service_notifications_enabled;
+    $transitionObject->active_checks_enabled =
+        ($isService) ? $o->active_checks_enabled : $o->host_active_checks_enabled;
+    $transitionObject->passive_checks_enabled =
+        ($isService) ? $o->passive_checks_enabled : $o->host_passive_checks_enabled;
+    $transitionObject->last_comment =
+        ($isService) ? $o->last_comment : $o->host_last_comment;
+?>
+
+<span>
+    <?php if (!$transitionObject->handled && $transitionObject->state > 0): ?>
+        <i title="Unhandled" class="icinga-icon-unhandled"></i>
+    <?php endif; ?>
+
+    <?php if ($transitionObject->acknowledged && !$transitionObject->in_downtime): ?>
+        <i title="Acknowledged" class="icinga-icon-acknowledgement"></i>
+    <?php endif; ?>
+
+    <?php if ($transitionObject->is_flapping): ?>
+        <i title="Flapping" class="icinga-icon-flapping"></i>
+    <?php endif; ?>
+
+    <?php if (!$transitionObject->notifications_enabled): ?>
+        <i title="Notifications Disabled" class="icinga-icon-notification-disabled"></i>
+    <?php endif; ?>
+
+    <?php if ($transitionObject->in_downtime): ?>
+        <i title="In Downtime" class="icinga-icon-in-downtime"></i>
+    <?php endif; ?>
+
+    <?php if (!$transitionObject->active_checks_enabled): ?>
+        <?php if (!$transitionObject->passive_checks_enabled): ?>
+            <i title="Active And Passive Checks Disabled" class="icinga-icon-active-passive-checks-disabled"></i>
+        <?php else: ?>
+            <i title="Active Checks Disabled" class="icinga-icon-active-checks-disabled"></i>
+        <?php endif; ?>
+    <?php endif; ?>
+
+    <?php if ($transitionObject->last_comment !== null): ?>
+        <i title="Comments" class="icinga-icon-comment"></i>
+    <?php endif; ?>
+            </span>

modules/monitoring/application/views/scripts/show/host.phtml

@@ -1,112 +1,4 @@
-<?= $this->tabs->render($this); ?>
-
-<div>
-    <div class="row">
-        <div class="col-md-8">
-        <?php if ($this->object->host_icon_image): ?>
-            <img src="<?= $this->object->host_icon_image; ?>" alt="Host image" />
-        <?php else: ?>
-            {{HOST_ICON}}
-        <?php endif; ?>
-        <h4>
-            Host Status
-            <a href="<?= $this->href('monitoring/list/services', array('host' => $object->host_name)); ?>">
-                <?= $this->escape($this->object->host_name); ?>
-            </a>
-            <?php if ($this->object->host_address && $this->object->host_address !== $this->object->host_name): ?>
-                (<?= $this->object->host_address; ?>)
-            <?php endif; ?>
-            <?php if (isset($this->object->host_alias) && $this->object->host_alias !== $this->object->host_name): ?>
-                (<?= $this->object->host_alias; ?>)
-            <?php endif; ?>
-        </h4>
-        </div>
-        <div class="col-md-4">
-            <?= $this->util()->getHostStateName($this->object->host_state); ?>
-            since <?= $this->timeSince($this->object->host_last_state_change); ?>
-        </div>
-    </div>
-
-    <div>
-        <?= $this->pluginOutput($this->object->output); ?>
-    </div>
-
-    <a class="button" href="#">{{RECHECK_COMMAND}</a>
-
-    <div>
-        <?= $this->perfdata($this->object->perfdata); ?>
-    </div>
-
-    <div>
-        <?= $this->pluginOutput($this->object->long_output); ?>
-    </div>
-
-    <?= $this->render('show/components/comments.phtml'); ?>
-
-    <div>
-        Check Statistics
-        <dl class="dl-horizontal">
-            <dt>Last Check</dt>
-            <dd><?= $object->last_check; ?></dd>
-            <dt>Next Check</dt>
-            <dd><?= $object->next_check; ?> <a href="#" class="button">{{RESCHEDULE_COMMAND}}</a></dd>
-        </dl>
-    </div>
-
-    <div>
-        <table>
-            <i class="successIcon"></i>
-            <tr>
-                <?php if (!$object->host_handled && $object->host_state > 0): ?>
-                <td>
-                    <a href="#" title="Unhandled">
-                        <i>{{UNHANDLED_ICON}}</i>
-                    </a>
-                    <a href="#" title="Acknowledge">
-                        <i>{{ACKNOWLEDGE_COMMAND}}</i>
-                    </a>
-                </td>
-                <?php endif; ?>
-                <?php if ($object->service_acknowledged && !$object->service_in_downtime): ?>
-                <td>
-                    <a href="#" title="Acknowledged">
-                        <i>{{ACKNOWLEDGED_ICON}}</i>
-                    </a>
-                </td>
-                <?php endif; ?>
-            </tr>
-            <tr>
-                <td>Last Check</td>
-                <td></td>
-            </tr>
-            <tr>
-                <td>Next Check</td>
-                <td></td>
-                <td></td>
-            </tr>
-
-            <tr>
-            <?php if ($this->object->host_action_url || $this->object->host_notes_url): ?>
-                <tr>
-                    <td rowspan="2">
-                        <?php if ($this->object->host_action_url): ?>
-                            <a target="_new" href='<?= $this->object->host_notes_url ?>'>{{HOST_ACTIONS_ICON}}</a>
-                        <?php endif; ?>
-                        <?php if ($this->object->host_notes_url): ?>
-                            <a target="_new" href='<?= $this->object->host_notes_url ?>'>{{HOST_NOTES_ICON}}</a>
-                        <?php endif; ?>
-                    </td>
-                </tr>
-            <?php endif; ?>
-            <?php if ($this->object->perfdata): ?>
-                <tr>
-                    <td>Performance Data</td>
-                    <td><?= $this->perfdata($this->object->perfdata); ?></td>
-                </tr>
-            <?php endif; ?>
-        </table>
-    </div>
-</div>
+<?= $this->render('show/components/status.phtml'); ?>
 
 <?= $this->render('show/components/downtime.phtml'); ?>
 

modules/monitoring/application/views/scripts/show/service.phtml

@@ -1,111 +1,6 @@
 <?= $this->tabs->render($this); ?>
 
-<div class="panel panel-default">
-    <div class="panel-heading">
-        {{SERVICE_ICON}} <h1>Service Status <?= $this->escape($this->object->service_description); ?></h1>
-    </div>
-
-    <div class="panel-body">
-        <table>
-            <tr>
-                <?php if ($this->object->service_icon_image): ?>
-                <td>
-                    <div>
-                        <img src="<?= $this->object->service_icon_image; ?>" alt="Host image" />
-                    </div>
-                </td>
-                <?php endif; ?>
-                <?php if (!$object->service_handled && $object->service_state > 0): ?>
-                <td>
-                    <a href="#" title="Unhandled">
-                        <i>{{UNHANDLED_ICON}}</i>
-                    </a>
-                    <a href="#" title="Acknowledge">
-                        <i>{{ACKNOWLEDGE_COMMAND}}</i>
-                    </a>
-                </td>
-                <?php endif; ?>
-                <?php if ($object->service_acknowledged && !$object->service_in_downtime): ?>
-                <td>
-                    <a href="#" title="Acknowledged">
-                        <i>{{ACKNOWLEDGED_ICON}}</i>
-                    </a>
-                </td>
-                <?php endif; ?>
-                <td>
-                    <strong><?= $this->util()->getServiceStateName($this->object->service_state); ?></strong>
-                    since <?= $this->timeSince($this->object->service_last_state_change); ?>
-                </td>
-                <td><a class="button" href="#">{{RECHECK_COMMAND_BUTTON}</a></td>
-            </tr>
-            <?php if ($this->object->service_action_url || $this->object->service_notes_url): ?>
-                <tr>
-                    <td rowspan="2">
-                        <?php if ($this->object->service_action_url): ?>
-                            {{SERVICE_ACTIONS_ICON}}
-                            <a target="_new" href='<?= $this->object->service_notes_url ?>'>Host actions</a>
-                        <?php endif; ?>
-                        <?php if ($this->object->service_notes_url): ?>
-                            {{SERVICE_NOTES_ICON}}
-                            <a target="_new" href='<?= $this->object->service_notes_url ?>'>Host notes</a>
-                        <?php endif; ?>
-                    </td>
-                </tr>
-            <?php endif; ?>
-        </table>
-    </div>
-</div>
-
-<div class="panel panel-default">
-    <div class="panel-heading">
-        {{HOST_ICON}} <span><?= $this->escape($this->object->host_name); ?></span>
-    </div>
-
-    <div class="panel-body">
-        <table>
-            <tr>
-                <?php if ($this->object->host_icon_image): ?>
-                <td>
-                    <div>
-                        <img src="<?= $this->object->host_icon_image; ?>" alt="Host image" />
-                    </div>
-                </td>
-                <?php endif; ?>
-                <?php if ($this->object->host_address && $this->object->host_address !== $this->object->host_name): ?>
-                <td>
-                    <strong>Host Address:</strong> <?= $this->escape($this->object->host_address); ?>
-                </td>
-                <?php endif; ?>
-                <?php if (isset($this->object->host_alias) && $this->object->host_alias !== $this->object->host_name): ?>
-                <td>
-                    <strong>Alias:</strong> <?= $this->object->host_alias; ?>
-                </td>
-                <?php endif; ?>
-                <td>
-                    <strong><?= $this->util()->getHostStateName($this->object->host_state); ?></strong>
-                    since <?= $this->timeSince($this->object->host_last_state_change); ?>
-                <?php if ($this->object->host_acknowledged === '1'): ?>
-                    (Has been acknowledged)
-                <?php endif; ?>
-                </td>
-            </tr>
-            <?php if ($this->object->host_action_url || $this->object->host_notes_url): ?>
-                <tr>
-                    <td rowspan="2">
-                        <?php if ($this->object->host_action_url): ?>
-                            {{HOST_ACTIONS_ICON}}
-                            <a target="_new" href='<?= $this->object->host_notes_url ?>'>Host actions</a>
-                        <?php endif; ?>
-                        <?php if ($this->object->host_notes_url): ?>
-                            {{HOST_NOTES_ICON}}
-                            <a target="_new" href='<?= $this->object->host_notes_url ?>'>Host notes</a>
-                        <?php endif; ?>
-                    </td>
-                </tr>
-            <?php endif; ?>
-        </table>
-    </div>
-</div>
+<?= $this->render('show/components/status.phtml'); ?>
 
 <?= $this->render('show/components/command.phtml') ?>
 

modules/monitoring/library/Monitoring/Object/Host.php

@@ -60,11 +60,14 @@ class Host extends AbstractObject
             'flap_detection_enabled'    => 'host_flap_detection_enabled',
             'active_checks_enabled'     => 'host_active_checks_enabled',
             'current_check_attempt'     => 'host_current_check_attempt',
-            'max_check_attempts'        => 'host_max_check_attempts'
+            'max_check_attempts'        => 'host_max_check_attempts',
             'last_notification' => 'host_last_notification',
             'current_notification_number'   => 'host_current_notification_number',
             'percent_state_change' => 'host_percent_state_change',
-            'is_flapping' => 'host_is_flapping'
+            'is_flapping' => 'host_is_flapping',
+            'last_comment'              => 'host_last_comment',
+            'action_url'                => 'host_action_url',
+            'notes_url'                 => 'host_notes_url'
         ))->where('host_name', $this->name1)->fetchRow();
     }
 }

modules/monitoring/library/Monitoring/Object/Service.php

@@ -74,7 +74,10 @@ class Service extends AbstractObject
             'notifications_enabled'     => 'service_notifications_enabled',
             'event_handler_enabled'     => 'service_event_handler_enabled',
             'flap_detection_enabled'    => 'service_flap_detection_enabled',
-            'active_checks_enabled'     => 'service_active_checks_enabled'
+            'active_checks_enabled'     => 'service_active_checks_enabled',
+            'last_comment'              => 'service_last_comment',
+            'action_url'                => 'service_action_url',
+            'notes_url'                 => 'service_notes_url'
         ))
         ->where('host_name', $this->name1)
         ->where('service_description', $this->name2)

public/css/icons.css

@@ -135,4 +135,130 @@
     display: inline-block;
     width: 16px;
     height: 16px;
+}
+
+.icinga-icon-csv {
+    background: transparent url("../img/icons/csv.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-pdf {
+    background: transparent url("../img/icons/pdf.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-json {
+    background: transparent url("../img/icons/json.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-downtime-start {
+    background: transparent url("../img/icons/downtime_start.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-downtime-end {
+    background: transparent url("../img/icons/downtime_end.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-hostgroup {
+    background: transparent url("../img/icons/hostgroup.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-servicegroup {
+    background: transparent url("../img/icons/servicegroup.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-host {
+    background: transparent url("../img/icons/host.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-service {
+    background: transparent url("../img/icons/service.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-success {
+    background: transparent url("../img/icons/success.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-history {
+    background: transparent url("../img/icons/history.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-reschedule {
+    background: transparent url("../img/icons/reschedule.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-softstate {
+    background: transparent url("../img/icons/softstate.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-next {
+    background: transparent url("../img/icons/next.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-prev {
+    background: transparent url("../img/icons/prev.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-refresh {
+    background: transparent url("../img/icons/refresh.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-expand {
+    background: transparent url("../img/icons/expand.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.icinga-icon-search {
+    background: transparent url("../img/icons/search.png") center center no-repeat;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
 }

public/css/main.css

@@ -35,6 +35,7 @@ body { padding-top: 70px; }
     font-size: 12px;
     line-height: 16px;
     display: block;
+    font-weight: normal;
 }
 
 /* ==========================================================================
@@ -42,21 +43,25 @@ body { padding-top: 70px; }
    ========================================================================== */
 
 html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  overflow-y: scroll;
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    overflow-y: scroll;
 }
 
 body {
-  margin: 0;
-  color: #262625;
-  font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
-  font-size: 16px;
+    margin: 0;
+    color: #262625;
+    font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
+    font-size: 16px;
 }
 
 p {
-  line-height: 18px;
+    line-height: 18px;
+}
+
+.gap {
+    margin-bottom: 15px;
 }
 
 
@@ -65,8 +70,8 @@ p {
    ========================================================================== */
 
 a {
-  color: #049baf;
-  text-decoration: none;
+    color: #049baf;
+    text-decoration: none;
 }
 
 /**
@@ -98,18 +103,18 @@ a:hover {
  */
 
 h1 {
-  color: #262625;
-  font-size: 20px;
+    color: #262625;
+    font-size: 20px;
 }
 
 h2 {
-  color: #262625;
-  font-size: 16px;
+    color: #262625;
+    font-size: 16px;
 }
 
 
 p {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 
@@ -119,8 +124,8 @@ p {
 
 
 table, th, td {
-text-align: left;
-vertical-align: top;
+    text-align: left;
+    vertical-align: top;
 }
 
 table {
@@ -129,16 +134,16 @@ table {
 }
 
 th {
-  font-weight: bold;
-  font-size: 18px;
-  padding: 8px 8px 10px 8px;
-  border-bottom: 2px solid #ddd;
+    font-weight: bold;
+    font-size: 18px;
+    padding: 8px 8px 10px 8px;
+    border-bottom: 2px solid #ddd;
 }
 
 td {
-  padding: 8px 10px 8px 8px !important;
-  border-bottom: 1px dotted #ddd !important;
-  border-top: none;
+    padding: 8px 10px 8px 8px !important;
+    border-bottom: 1px dotted #ddd !important;
+    border-top: none;
 
 }
 
@@ -148,32 +153,32 @@ td {
 
     display: block;
     clear: right;
-      overflow: hidden;
+    overflow: hidden;
 }
 
 .badge-container {
-  display: block;
-  overflow: hidden;
+    display: block;
+    overflow: hidden;
 }
 
 
 .badge {
-  background-color: #fff;
-  border-radius: 2px;
-  color: #ff3300;
-  display: inline-block;
-  font-size: 12px;
-  font-weight: bold;
-  line-height: 1;
-  min-width: 10px;
-  padding-bottom: 3px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 3px;
-  text-align: center;
-  vertical-align: baseline;
-  white-space: nowrap;
-  border: 1px solid #ff3300;
+    background-color: #fff;
+    border-radius: 2px;
+    color: #ff3300;
+    display: inline-block;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
+    min-width: 10px;
+    padding-bottom: 3px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 3px;
+    text-align: center;
+    vertical-align: baseline;
+    white-space: nowrap;
+    border: 1px solid #ff3300;
 
 }
 
@@ -181,72 +186,73 @@ td {
 .badge a:active,
 .badge a:hover,
 .badge:hover {
-  color: #ff3300 !important;
-  display: block !important;
+    color: #ff3300 !important;
+    display: block !important;
 
 }
 
 .host-name {
-  display: block;
-  margin-top: 5px;
-  font-weight: bold;
+    display: block;
+    margin-top: 5px;
+    font-weight: bold;
 }
 
 
 .active {
-  background-color: #f5f5f5;
+    background-color: #f5f5f5;
 
 }
 
 .output-text {
-  font-size: 12px;
-  line-height: 16px;
-  display: block;
+    font-size: 12px;
+    line-height: 16px;
+    display: block;
 }
 
+
 /* ==========================================================================
    Forms
    ========================================================================== */
 
 
 .form-inline .form-group {
-  display: inline-block;
-  margin-bottom: 0;
-  vertical-align: middle;
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
 }
 .form-group {
-  margin-bottom: 15px;
+    margin-bottom: 15px;
 }
 
 label {
-  display: inline-block;
-  font-weight: bold;
-  margin-bottom: 5px;
+    display: inline-block;
+    font-weight: bold;
+    margin-bottom: 5px;
 }
 
 .input-sm {
-  border-radius: 3px;
-  font-size: 16px;
+    border-radius: 3px;
+    font-size: 16px;
 
 
-  padding: 5px;
-  margin-right: 15px;
+    padding: 5px;
+    margin-right: 15px;
 
 }
 .form-control {
-  background-color: #FFFFFF;
-  border: 1px solid #CCCCCC;
-  border-radius: 4px;
-  padding: 5px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-  color: #555555;
-  display: block;
+    background-color: #FFFFFF;
+    border: 1px solid #CCCCCC;
+    border-radius: 4px;
+    padding: 5px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+    color: #555555;
+    display: block;
 
 
 
 
-  vertical-align: middle;
-  width: 100%;
+    vertical-align: middle;
+    width: 100%;
 }
 
 select.input-sm {
@@ -259,20 +265,20 @@ select.input-sm {
    ========================================================================== */
 
 .pagination > .active > a,
-.pagination > .active > span, 
-.pagination > .active > a:hover, 
-.pagination > .active > span:hover, 
-.pagination > .active > a:focus, 
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
 .pagination > .active > span:focus {
 
-  background-color: #049baf !important;
-  border-color: fuchsia !mportant;
+    background-color: #049baf !important;
+    border-color: fuchsia !mportant;
 
 }
 
 
 .pagination-sm > li > a, .pagination-sm > li > span {
-  font-size: 16px !important;
+    font-size: 16px !important;
 }
 
 
@@ -282,36 +288,38 @@ select.input-sm {
    ========================================================================== */
 
 .status-up {
-  background-color: #00cc33; /* green */
+    background-color: #00cc33; /* green */
 }
 
 .status-warning {
-  background-color: #00cc33; /* xx */
+    background-color: #00cc33; /* xx */
 }
 
 .status-critical {
-  background-color: #ff3300; /* red */
+    background-color: #ff3300; /* red */
 }
 
 .status-unknown {
-  background-color: #00cc33; /* xx */
+    background-color: #00cc33; /* xx */
 }
 
 .status-pending {
-  background-color: #00cc33; /* xx */
+    background-color: #00cc33; /* xx */
 }
 
-.tacheader-status-pending {
-    background-color: #bababa;
-}
+
 
 /** Service status **/
+.tacheader-status-pending {
+    background-color: #c0c0c0;
+}
+
 .tacheader-status-critical {
     background-color: #FF3300;
 }
 
 .tacheader-status-ok {
-    /* background-color: #00CC33; */
+    /** background-color: #00CC33; **/
 }
 
 .tacheader-status-warning {
@@ -333,9 +341,48 @@ select.input-sm {
 }
 
 .tacheader-status-up {
-    /* background-color: #00CC33; */
+    /** background-color: #00CC33; **/
 }
 
+/* Borders for Detail Headers  */
+.border-status-pending {
+    border-left: 8px solid #c0c0c0;
+}
+
+.border-status-critical {
+    border-left: 8px solid #FF3300;
+}
+
+.border-status-ok {
+    border-left: 10px solid #00CC33;
+}
+
+.border-status-warning {
+    border-left: 10px solid #FFA500;
+}
+
+.border-status-unknown {
+    border-left: 10px solid #E066FF;
+}
+
+/** Host status **/
+
+.border-status-unreachable {
+    border-left: 10px solid #E066FF;
+}
+
+.border-status-down {
+    border-left: 10px solid #FF3300;
+}
+
+.border-status-up {
+    border-left: 10px solid #00CC33;
+}
+
+
+
+
+
 
 
 /* ==========================================================================
@@ -343,24 +390,222 @@ select.input-sm {
    ========================================================================== */
 
 .icon-table {
-  width: 16px;
-  height: 20px;
-  display: block;
+    width: 16px;
+    height: 20px;
+    display: block;
+    background-position: 50% 0;
 }
 
-.icon-flapping {
-  background-image: url('images/flapping.png');
-  background-repeat: no-repeat;
-  background-position: 50% 0;
+.icon-header {
+    background-position: 0 50%;
+    padding-left: 25px;
+    height: 20px;
+}
 
-}  
+.icon-btn-small {
+    background-position: 0 0;
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+
+
+.icon-flapping {
+    background-image: url('images/flapping.png');
+    background-repeat: no-repeat;
+}
 .icon-comment {
-  background-image: url('images/comment.png');
-  background-repeat: no-repeat;
-  background-position: 0 0;
-}  
+    background-image: url('images/comment.png');
+    background-repeat: no-repeat;
+}
 .icon-unhandled {
-  background-image: url('images/unhandled.png');
-  background-repeat: no-repeat;
-  background-position: 0 0;
-}  
+    background-image: url('images/unhandled.png');
+    background-repeat: no-repeat;
+}
+.icon-host {
+    background-image: url('images/host.png');
+    background-repeat: no-repeat;
+}
+.icon-acknowledgement {
+    background-image: url('images/acknowledgement.png');
+    background-repeat: no-repeat;
+}
+.icon-remove {
+    background-image: url('images/remove.png');
+    background-repeat: no-repeat;
+}
+.icon-submit {
+    background-image: url('images/submit.png');
+    background-repeat: no-repeat;
+}
+.icon-create {
+    background-image: url('images/create.png');
+    background-repeat: no-repeat;
+}
+.icon-dashboard {
+    background-image: url('images/dashboard.png');
+    background-repeat: no-repeat;
+}
+.icon-disable {
+    background-image: url('images/disable.png');
+    background-repeat: no-repeat;
+}
+.icon-edit {
+    background-image: url('images/edit.png');
+    background-repeat: no-repeat;
+}
+.icon-error {
+    background-image: url('images/error.png');
+    background-repeat: no-repeat;
+}
+.icon-downtime {
+    background-image: url('images/in_downtime.png');
+    background-repeat: no-repeat;
+}
+.icon-save {
+    background-image: url('images/save.png');
+    background-repeat: no-repeat;
+}
+.icon-service {
+    background-image: url('images/service.png');
+    background-repeat: no-repeat;
+}
+.icon-user {
+    background-image: url('images/user.png');
+    background-repeat: no-repeat;
+}
+.icon-reschedule {
+    background-image: url('images/reschedule.png');
+    background-repeat: no-repeat;
+}
+
+
+/* ==========================================================================
+   Details Panel
+   ========================================================================== */
+
+.panel-heading {
+    border-bottom: 0;
+    margin-bottom: 0px !important;
+    padding-left: 5px;
+    padding-bottom: 3px;
+    padding-top: 5px;
+    overflow: hidden;
+    border-radius: 0;
+}
+
+.panel-hostname {
+    font-weight: bold;
+}
+
+.separator {
+    border-top: 2px solid #ddd;
+    border-bottom: 0;
+    margin: 0;
+    height: 2px;
+}
+
+.panel-header-status {
+    font-weight: normal;
+}
+
+.panel-row {
+    display: block;
+    margin-bottom: 10px;
+    overflow: hidden;
+    border-bottom: 1px dotted #ddd;
+    padding-bottom: 10px;
+}
+
+
+.panel-label {
+    float: left;
+    padding-right: 10px;
+    width: 30%;
+    clear: left;
+
+}
+.panel-content {
+    float: left;
+    padding-right: 10px;
+    display: inline-block;
+    max-width: 40%;
+}
+
+.panel-button {
+    float: right;
+    display: inline-block;
+    overflow: hidden;
+}
+
+.panel-body {
+    margin-bottom: 45px;
+}
+
+
+
+/* ==========================================================================
+   Buttons
+   ========================================================================== */
+
+.button {
+    text-align: center;
+    padding: 3px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px;
+}
+
+.btn-common {
+    border-color: #ddd;
+    color: #262625;
+    background: rgb(255,255,255); /* Old browsers */
+    background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
+}
+
+.panel-row > a:hover,
+.btn-common:hover {
+    border-color: #262625 !important;
+    color: #262625 !important;
+    text-decoration: none;
+}
+
+
+.btn-cta {
+    border-color: #049BAF;
+    color: #049BAF;
+    background: rgb(255,255,255); /* Old browsers */
+    background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
+}
+
+
+
+.btn-small {
+    width: 25px;
+    height: 25px;
+    display: inline-block;
+}
+
+.btn-wide {
+    width: 100%;
+    display: block;
+}
+
+.btn-half-left {
+    float: left;
+    width: 48%;
+}
+.btn-half-right {
+    float: right;
+    width: 48%;
+}