Fix configuration checkboxes and colors in piecharts

refs #5765

modules/monitoring/application/controllers/MultiController.php

@@ -64,6 +64,7 @@ class Monitoring_MultiController extends ActionController
                 'host_unhandled_service_count',
                 'host_passive_checks_enabled',
                 'host_obsessing',
+                'host_state',
                 'host_notifications_enabled',
                 'host_event_handler_enabled',
                 'host_flap_detection_enabled',
@@ -90,8 +91,8 @@ class Monitoring_MultiController extends ActionController
         $this->view->hostnames = $this->getProperties($hosts, 'host_name');
         $this->view->downtimes = $this->getDowntimes($hosts);
         $this->view->errors    = $errors;
-        $this->view->states    = $this->countStates($hosts);
+        $this->view->states    = $this->countStates($hosts, 'host', 'host_name');
-        $this->view->pie       = $this->createPie($this->view->states);
+        $this->view->pie       = $this->createPie($this->view->states, $this->view->getHelper('MonitoringState')->getHostStateColors());
 
         // Handle configuration changes
         $this->handleConfigurationForm(array(
@@ -147,10 +148,10 @@ class Monitoring_MultiController extends ActionController
         $this->view->hostnames      = $this->getProperties($services, 'host_name');
         $this->view->servicenames   = $this->getProperties($services, 'service_description');
         $this->view->downtimes      = $this->getDowntimes($services);
-        $this->view->service_states = $this->countStates($services);
+        $this->view->service_states = $this->countStates($services, 'service');
-        $this->view->host_states    =  $this->countStates($services, 'host_name', 'host_state');
+        $this->view->host_states    = $this->countStates($services, 'host',  'host_name');
-        $this->view->service_pie    = $this->createPie($this->view->service_states);
+        $this->view->service_pie    = $this->createPie($this->view->service_states, $this->view->getHelper('MonitoringState')->getServiceStateColors());
-        $this->view->host_pie       = $this->createPie($this->view->host_states);
+        $this->view->host_pie       = $this->createPie($this->view->host_states, $this->view->getHelper('MonitoringState')->getHostStateColors());
         $this->view->errors         = $errors;
 
         $this->handleConfigurationForm(array(
@@ -242,16 +243,14 @@ class Monitoring_MultiController extends ActionController
         return $problems;
     }
 
-    private function countStates($objects, $unique = null, $state = 'service_state')
+    private function countStates($objects, $type = 'host', $unique = null)
     {
         $known  = array();
-        $states = array(
+        if ($type === 'host') {
-            '0'  => 0,
+            $states = array_fill_keys($this->view->getHelper('MonitoringState')->getHostStateNames(), 0);
-            '1'  => 0,
+        } else {
-            '2'  => 0,
+            $states = array_fill_keys($this->view->getHelper('MonitoringState')->getServiceStateNames(), 0);
-            '3'  => 0,
+        }
-            '99' => 0
-        );
         foreach ($objects as $object) {
             if (isset($unique)) {
                 if (array_key_exists($object->$unique, $known)) {
@@ -259,22 +258,16 @@ class Monitoring_MultiController extends ActionController
                 }
                 $known[$object->$unique] = true;
             }
-            $states[$object->$state]++;
+            $states[$this->view->monitoringState($object, $type)]++;
         }
-        return array(
+        return $states;
-            'up'          => $states['0'],
-            'down'        => $states['1'],
-            'unreachable' => $states['2'],
-            'unknown'     => $states['3'],
-            'pending'     => $states['99']
-        );
     }
 
-    private function createPie($states)
+    private function createPie($states, $colors)
     {
         $chart = new InlinePie(
             array_values($states),
-            array('#44bb77', '#FF5566', '#FF5566', '#E066FF', '#77AAFF')
+            $colors
         );
         $chart->setLabels(array_keys($states))
             ->setHeight(100)

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

@@ -7,7 +7,6 @@ class Zend_View_Helper_MonitoringState extends Zend_View_Helper_Abstract
 
     public function monitoringState($object, $type = 'service')
     {
-
         if ($type === 'service') {
             return $this->servicestates[$object->service_state];
         } elseif ($type === 'host') {
@@ -15,6 +14,26 @@ class Zend_View_Helper_MonitoringState extends Zend_View_Helper_Abstract
         }
     }
 
+    public function getServiceStateColors()
+    {
+        return array('#44bb77', '#FFCC66', '#FF5566', '#E066FF', '#77AAFF');
+    }
+
+    public function getHostStateColors()
+    {
+        return array('#44bb77', '#FF5566', '#E066FF', '#77AAFF');
+    }
+
+    public function getServiceStateNames()
+    {
+        return array_values($this->servicestates);
+    }
+
+    public function getHostStateNames()
+    {
+        return array_values($this->hoststates);
+    }
+
     public function getStateFlags($object, $type = 'service')
     {
         $state_classes = array();

modules/monitoring/application/views/scripts/multi/components/summary.phtml

@@ -15,7 +15,7 @@
                 'monitoring/command/reschedulenextcheck',
                 array(
                     'host'       => $this->target['host'],
-                    'service'    => $this->target['service'],
+                    'service'    => array_key_exists('service', $this->target) ? $this->target['service'] : null,
                     'checktime'  => time(),
                     'forcecheck' => '1'
                 )

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

@@ -1,33 +1,59 @@
 <?php
 $this->is_service = false;
 $this->hostquery = implode($this->hostnames, ',');
-$this->target = array(
+$this->target = array('host'	=> $this->hostquery);
-	'host' => $this->hostquery
-);
 ?>
 
-<?= $this->tabs->render($this); ?>
+<div class="controls">
-<div>
+    <?= $this->tabs; ?>
-    <div class="panel panel-heading">
-       <b> Hosts </b> (<?= count($objects) ?> objects)
-       <div class="pull-right">
-            <a rel="tooltip" title="Submit passive checkresults" href="<?=
-            $this->href(
-                'monitoring/command/submitpassivecheckresult',
-                $this->target
-            );
-            ?>" class="button btn-cta btn-common btn-small">
-                <i class="icinga-icon-submit"></i>
-            </a>
 </div>
-    </div>
-    <hr class="separator" />
 
-    <div class="panel panel-body">
+<div class="content">
+    <h1> Summary for <?= count($objects) ?> hosts </h1>
+
+    <?= $this->render('multi/components/objectlist.phtml'); ?>
+    <table class="avp">
+        <tr>
+            <th align="center">
+                <h3><?= array_sum(array_values($states)) ?> Hosts</h3>
+            </th>
+            <th></th>
+        </tr>
+        <tr>
+            <td align="center">
+                <?= $this->pie->render(); ?>
+            </td>
+            <td>
+                <?php
+                foreach ($states as $state => $count) {
+                    if ($count > 0) {
+                        echo ucfirst($state) . ': ' . $count . '<br />';
+                    }
+                }
+                ?>
+            </td>
+            <td></td>
+        </tr>
+    </table>
+
+    <h2> <?=$this->icon('hostgroup.png')?> Host Actions </h2>
+
+    <table class="avp newsection">
+        <tbody>
             <?= $this->render('multi/components/summary.phtml'); ?>
-    </div>
-</div>
-
             <?= $this->render('multi/components/comments.phtml'); ?>
             <?= $this->render('multi/components/downtimes.phtml'); ?>
-<?= $this->render('multi/components/configuration.phtml'); ?>
+        </tbody>
+    </table>
+
+    <?= $this->render('multi/components/flags.phtml') ?>
+</div>
+
+<a
+    rel="tooltip"
+    title="Submit passive checkresults"
+    href="<?= $this->href('monitoring/command/submitpassivecheckresult', $this->target); ?>"
+    class="button btn-cta btn-common btn-small"
+>
+    <i class="icinga-icon-submit"></i>
+</a>

public/js/icinga/events.js

@@ -135,7 +135,7 @@
             $(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
 
             // Toggle all triStateButtons
-            $(document).on('click', '.tristate input.tristate', { self: this}, this.clickTriState);
+            $(document).on('click', 'div.tristate .tristate-dummy', { self: this }, this.clickTriState);
 
             // TBD: a global autocompletion handler
             // $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
@@ -253,12 +253,13 @@
 
         clickTriState: function (event) {
             var $tristate = $(this);
-            var old       = $tristate.data('icinga-old');
             var triState  = parseInt($tristate.data('icinga-tristate'), 10);
-            var value     = $tristate.data('icinga-value');
-            var self      = event.data.self;
 
-            // update value
+            // load current values
+            var old   = $tristate.data('icinga-old');
+            var value = $tristate.parent().find('input:radio:checked').first().prop('checked', false).val();
+
+            // calculate the new value
             if (triState) {
                 // 1         => 0
                 // 0         => unchanged
@@ -269,19 +270,17 @@
                 // 0 => 1
                 value = value === '1' ? '0' : '1';
             }
-            $tristate.data('icinga-value', value);
+            // update form value
+            $tristate.parent().find('input:radio[value="' + value + '"]').prop('checked', true);
+            // update dummy
 
-            // also set form value
+            console.log(value + ' === ' + old + ' ?');
-            $tristate.prop('value', value);
+            if (value !== old) {
-
+                $tristate.parent().find('b.tristate-changed').css('visibility', 'visible');
-            var $changed = $tristate.parent().find('.tristate-status').first();
-            if (old != value) {
-                $changed.text('changed');
             } else {
-                $changed.empty();
+                $tristate.parent().find('b.tristate-changed').hide();
             }
-            $tristate.find('.tristate-status').text(value);
+            self.icinga.ui.setTriState(value.toString(), $tristate);    
-            self.icinga.ui.updateTriState(value.toString(), $tristate);
         },
 
         /**
@@ -600,6 +599,7 @@
             $(document).off('mouseleave', '.historycolorgrid td', this.historycolorgidUnhover);
             $(document).off('mouseenter', 'li.dropdown', this.dropdownHover);
             $(document).off('mouseleave', 'li.dropdown', this.dropdownLeave);
+            $(document).off('click', 'div.tristate .tristate-dummy', this.clickTriState);
         },
 
         destroy: function() {

public/js/icinga/ui.js

@@ -469,35 +469,32 @@
         initializeTriStates: function ($html) {
             var self = this;
             $('div.tristate', $html).each(function(index, item) {
-                var target   = item;
+                var $target  = $(item);
-                var $target  = $(target);
+
+                // hide input boxess and remove text nodes
+                $target.find("input").hide();
+                $target.contents().filter(function() { return this.nodeType == 3; }).remove();
+                
+                // has three states?
+                var triState = $target.find('input[value="unchanged"]').size() > 0 ? 1 : 0;
+                
+                // fetch current value from radiobuttons
                 var value  = $target.find('input:checked').first().val();
-                var triState = value === 'unchanged' ? true : false;
-                var name     = $('input', target).first().attr('name');
-                var old      = value;
         
-                var getStateDescription = function(value) {
-                    if (value === 'unchanged') {
-                        return '(mixed values)';
-                    }
-                    return '';
-                };
-
-                $target.empty();
-                $target.parent().parent()
-                    .find('label')
-                    .append('&#160;&#160;<span class="tristate-changed"></span>');
                 $target.append(
-                    '<input name="' + name + '" ' +
+                  '<input class="tristate-dummy" ' +
-                        'class="tristate" type="checkbox" ' +
+                        ' data-icinga-old="' + value + '" data-icinga-tristate="' + triState + '" type="checkbox" ' +
-                        'data-icinga-old="' + old + '" ' +
+                        (value === '1' ? 'checked ' : ( value === 'unchanged' ? 'indeterminate="true" ' : ' ' )) +
-                        'data-icinga-tristate="' + triState + '" ' +
+                  '/> <b style="visibility: hidden;" class="tristate-changed"> (changed) </b>'
-                        'data-icinga-value="' + value + '" ' +
-                        ( value === 'unchanged' ? 'indeterminate=1 ' : ' ' ) +
-                        ( value === '1' ? 'checked ' : ' ' ) +
-                    '></input>' +
-                    '<div class="tristate-status">' + getStateDescription(value) + '</div>'
                 ); 
+                if (triState) {
+                  // TODO: find a better way to activate indeterminate checkboxes after load.
+                  $target.append(
+                    '<script type="text/javascript"> ' +
+                      ' $(\'input.tristate-dummy[indeterminate="true"]\').each(function(i, el){ el.indeterminate = true; }); ' + 
+                    '</script>'
+                  );
+                }
             });
         },
 
@@ -507,20 +504,16 @@
          * @param value     {String}  The value to set, can be '1', '0' and 'unchanged'
          * @param $checkbox {jQuery}  The checkbox
          */
-        updateTriState: function(value, $checkbox)
+        setTriState: function(value, $checkbox)
         {
-            console.log($checkbox);
             switch (value) {
                 case ('1'):
-                    console.log('checked true; indeterminate: false');
                     $checkbox.prop('checked', true).prop('indeterminate', false);
                     break;
                 case ('0'):
-                    console.log('checked false; indeterminate: false');
                     $checkbox.prop('checked', false).prop('indeterminate', false);
                     break;
                 case ('unchanged'):
-                    console.log('checked false; indeterminate: true');
                     $checkbox.prop('checked', false).prop('indeterminate', true);
                     break;
             }