Add PieChart to display hosts and services, improve layout and fix flag

checkboxes

refs #5765

application/views/helpers/FormTriStateCheckbox.php

@@ -48,12 +48,15 @@ class Zend_View_Helper_FormTriStateCheckbox extends Zend_View_Helper_FormElement
     public function formTriStateCheckbox($name, $value = null, $attribs = null)
     {
         $class = "";
-        $xhtml = '<div>'
+        $xhtml = '<div class="tristate">'
                     . '<div>' . ($value == 1 ? ' ' : ($value === 'unchanged' ? ' ' : ' ' )) . '</div>'
+
                     . '<input class="' . $class . '" type="radio" value=1 name="'
                         . $name . '" ' . ($value == 1 ? 'checked' : '') . ' ">On</input> '
+
                     . '<input class="' . $class . '" type="radio" value=0 name="'
                         . $name . '" ' . ($value == 0 ? 'checked' : '') . ' ">Off</input> ';
+
         if ($value === 'unchanged') {
             $xhtml = $xhtml . '<input class="' . $class . '" type="radio" value="unchanged" name="'
             . $name . '" ' . 'checked "> Undefined </input>';

library/Icinga/Web/Widget/Chart/InlinePie.php

@@ -49,11 +49,12 @@ class InlinePie extends AbstractWidget
      * @var string
      */
     private $template =<<<'EOD'
+    <div class="inlinepie">
     <img
-        class='inlinepie'
         title="{title}" src="{url}" style="width: {width}px; height: {height}px; {style}"
         data-icinga-colors="{colors}" data-icinga-values="{data}"
     ></img>
+    </div>
 EOD;
 
     /**
@@ -118,10 +119,13 @@ EOD;
      * The labels to be displayed in the pie-chart
      *
      * @param null $labels
+     *
+     * @return $this
      */
     public function setLabels($labels = null)
     {
         $this->url->setParam('labels', implode(',', $labels));
+        return $this;
     }
 
     /**

modules/monitoring/application/controllers/MultiController.php

@@ -32,6 +32,7 @@ use \Icinga\Web\Controller\ActionController;
 use \Icinga\Web\Widget\Tabextension\OutputFormat;
 use \Icinga\Module\Monitoring\Backend;
 use \Icinga\Data\BaseQuery;
+use \Icinga\Web\Widget\Chart\InlinePie;
 use \Icinga\Module\Monitoring\Form\Command\MultiCommandFlagForm;
 use \Icinga\Module\Monitoring\DataView\HostStatus    as HostStatusView;
 use \Icinga\Module\Monitoring\DataView\ServiceStatus as ServiceStatusView;
@@ -89,6 +90,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->pie       = $this->createPie($this->view->states);
 
         // Handle configuration changes
         $this->handleConfigurationForm(array(
@@ -99,7 +102,6 @@ class Monitoring_MultiController extends ActionController
             'host_event_handler_enabled'  => 'Event Handler',
             'host_flap_detection_enabled' => 'Flap Detection'
         ));
-        $this->view->form->setAction('/icinga2-web/monitoring/multi/host');
     }
 
 
@@ -112,11 +114,11 @@ class Monitoring_MultiController extends ActionController
             $this->_request,
             array(
                 'host_name',
+                'host_state',
                 'service_description',
                 'service_handled',
                 'service_state',
                 'service_in_downtime',
-
                 'service_passive_checks_enabled',
                 'service_notifications_enabled',
                 'service_event_handler_enabled',
@@ -139,13 +141,17 @@ class Monitoring_MultiController extends ActionController
         );
         $comments = array_keys($this->getUniqueValues($commentQuery->fetchAll(), 'comment_internal_id'));
 
-        $this->view->objects = $this->view->services = $services;
+        $this->view->objects        = $this->view->services = $services;
-        $this->view->problems = $this->getProblems($services);
+        $this->view->problems       = $this->getProblems($services);
-        $this->view->comments = isset($comments) ? $comments : $this->getComments($services);
+        $this->view->comments       = isset($comments) ? $comments : $this->getComments($services);
-        $this->view->hostnames = $this->getProperties($services, 'host_name');
+        $this->view->hostnames      = $this->getProperties($services, 'host_name');
-        $this->view->servicenames = $this->getProperties($services, 'service_description');
+        $this->view->servicenames   = $this->getProperties($services, 'service_description');
-        $this->view->downtimes = $this->getDowntimes($services);
+        $this->view->downtimes      = $this->getDowntimes($services);
-        $this->view->errors = $errors;
+        $this->view->service_states = $this->countStates($services);
+        $this->view->host_states    =  $this->countStates($services, 'host_name', 'host_state');
+        $this->view->service_pie    = $this->createPie($this->view->service_states);
+        $this->view->host_pie       = $this->createPie($this->view->host_states);
+        $this->view->errors         = $errors;
 
         $this->handleConfigurationForm(array(
             'service_passive_checks_enabled' => 'Passive Checks',
@@ -154,9 +160,9 @@ class Monitoring_MultiController extends ActionController
             'service_event_handler_enabled'  => 'Event Handler',
             'service_flap_detection_enabled' => 'Flap Detection'
         ));
-        $this->view->form->setAction('/icinga2-web/monitoring/multi/service');
     }
 
+
     /**
      * Apply the query-filter received
      *
@@ -236,6 +242,47 @@ class Monitoring_MultiController extends ActionController
         return $problems;
     }
 
+    private function countStates($objects, $unique = null, $state = 'service_state')
+    {
+        $known = array();
+        $states = array(
+            '0'  => 0,
+            '1'  => 0,
+            '2'  => 0,
+            '3'  => 0,
+            '99' => 0
+        );
+        foreach ($objects as $object) {
+            if (isset($unique)) {
+                if (array_key_exists($object->$unique, $known)) {
+                    continue;
+                }
+                $known[$object->$unique] = true;
+            }
+            $states[$object->$state]++;
+        }
+        return array(
+            'up'          => $states['0'],
+            'down'        => $states['1'],
+            'unreachable' => $states['2'],
+            'unknown'     => $states['3'],
+            'pending'     => $states['99']
+        );
+    }
+
+    private function createPie($states)
+    {
+        $chart = new InlinePie(
+            array_values($states),
+            array('#44bb77', '#FF5566', '#FF5566', '#E066FF', '#77AAFF')
+        );
+        $chart->setLabels(array_keys($states))
+            ->setHeight(100)
+            ->setWidth(100);
+        return $chart;
+    }
+
+
     private function getComments($objects)
     {
         $unique = array();

modules/monitoring/application/forms/Command/MultiCommandFlagForm.php

@@ -32,6 +32,7 @@ namespace Icinga\Module\Monitoring\Form\Command;
 use \Icinga\Web\Form\Element\TriStateCheckbox;
 use \Icinga\Web\Form;
 use \Zend_Form_Element_Hidden;
+use \Zend_Form;
 
 /**
  * A form to edit multiple command flags of multiple commands at once. When some commands have
@@ -71,6 +72,7 @@ class MultiCommandFlagForm extends Form {
     {
         $this->flags = $flags;
         parent::__construct();
+        $this->setEnctype(Zend_Form::ENCTYPE_MULTIPART);
     }
 
     /**

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

@@ -4,20 +4,12 @@
 
 <tr class="newsection">
     <th>
-        Comments
+        <?= count($comments) ?> Comments
     </th>
-    <td>
-        There are <a href=" <?= $this->href(
-            'monitoring/list/comments',
-            array('comment_id' => implode(',', $this->comments))
-        );
-        ?>"> <?= count($comments) ?> </a>
-        comments for the selected <?= $objectName ?>
-    </td>
     <td>
         <a
             href="<?= $this->href('monitoring/command/removecomment', $this->target); ?>"
-        >
+            >
             <?= $this->icon('remove_petrol.png') ?> Remove Comments
         </a> <br >
         <a
@@ -32,4 +24,10 @@
             <?= $this->icon('acknowledgement_petrol.png') ?> Acknowledge
         </a>
     </td>
+    <td>Change <a href=" <?= $this->href(
+            'monitoring/list/comments',
+            array('comment_id' => implode(',', $this->comments))
+        );
+        ?>"> <?= count($comments) ?> </a>  comments.
+    </td>
 </tr>

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

@@ -1,26 +0,0 @@
-
-<!--<?php echo $this->form->render($this); ?>-->
-
-<form>
-<?php foreach($this->form->getElements() as $name => $element):
-    if ($element instanceof \Icinga\Web\Form\Element\TriStateCheckbox):
-        $element->setDecorators(array('ViewHelper'));
-        ?>
-        <tr>
-                <th>
-                    <?= $element->getLabel() ?>
-                </th>
-                <td>
-                    <?= $element->render() ?>
-                </td>
-        </tr>
-
-    <?php else: ?>
-        <tr>
-            <td> <?= $element->render() ?></td>
-        </tr>
-    <?php
-        endif;
-        endforeach;
-    ?>
-<form>

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

@@ -4,30 +4,22 @@
 
 <tr class="newsection">
     <th>
-        Downtimes
+        <?= count($downtimes) ?> Downtimes
     </th>
     <td>
-        <span> <?= count($downtimes) ?> </span> <?= $objectName ?> Selected items are currently in downtime.
+        <a href="<?=$this->href('monitoring/command/removedowntime', $this->target); ?>">
-    </td>
+            <?= $this->icon('remove_petrol.png') ?> Remove Downtimes
-    <td>
+        </a> <br />
         <a
             title="Schedule downtimes for all selected <?= $objectName ?>"
             href="<?= $this->href('monitoring/command/scheduledowntime', $this->target); ?>"
-        >
+            >
             <?= $this->icon('in_downtime_petrol.png') ?> Schedule Downtimes
-        </a> <br />
-
-        <a
-            href="<?=$this->href('monitoring/command/removedowntime', $this->target); ?>"
-        >
-            <?= $this->icon('remove_petrol.png') ?> Remove Downtimes
-        </a> <br />
-
-        <a
-            title="Remove all acknowledgements from all selected hosts or services"
-            href="<?=$this->href('monitoring/command/removeacknowledgement', $target);?>"
-        >
-            <?= $this->icon('remove_petrol.png') ?> Remove Acknowledgements
         </a>
     </td>
+    <td>
+        Change <a href="<?= $this->href('') ?>"
+            > <?= count($downtimes) ?>
+        </a> downtimes.
+    </td>
 </tr>

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

@@ -0,0 +1,31 @@
+<form
+    id="<?= $form->getId() ?>"
+    name="<?= $form->getName() ?>"
+    enctype="<?= $form->getEnctype() ?>"
+    action="<?= $form->getAction() ?>"
+    method="post"
+>
+    <table class="avp">
+        <tr class="newsection"><th></th><td></td></tr>
+    <?php foreach($this->form->getElements() as $name => $element):
+        if ($element instanceof \Icinga\Web\Form\Element\TriStateCheckbox):
+            $element->setDecorators(array('ViewHelper'));
+            ?>
+            <tr>
+                <th>
+                   <label for="<?= $element->getName() ?>"> <?= $element->getLabel() ?> </label>
+                </th>
+                <td>
+                    <?= $element->render() ?>
+                </td>
+            </tr>
+        <?php else: ?>
+            <tr>
+                <td> <?= $element->render() ?></td>
+            </tr>
+        <?php
+        endif;
+    endforeach;
+    ?>
+    </table>
+</form>

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

@@ -6,23 +6,24 @@
             'monitoring/show/service',
             array('host' => $object->host_name, 'service' => $object->service_description)
         );
+        echo '">' . $object->host_name . ' ' . $object->service_description . '</a>';
     } else {
         echo $this->href(
             'monitoring/show/host',
             array('host' => $object->host_name)
         );
-    }?>" >
+        echo '">' . $object->host_name . '</a>';
-    <!-- <?= $object->host_name; ?> <?= isset($object->service_description) ? $object->service_description : '' ?> -->
+    }?>,
 <?php } ?> <?php
     if (count($objects) > 5) {
         $text = ' ' . (count($objects) - 5) . ' more ...';
     } else {
         $text = ' show all ... ';
     }
-    if ($this->is_service) {
+    if (!$this->is_service) {
         $link = 'monitoring/list/hosts';
         $target = array(
-            'host' => $this->hostquery // implode(',', $hostnames)
+            'host' => $this->hostquery
         );
     } else {
         $link = 'monitoring/list/services';

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

@@ -7,11 +7,8 @@
 
 <tr>
     <th>
-        <?= $objectName ?>
+        <?= count($objects) . ' ' . $objectName ?>
     </th>
-    <td>
-        You have selected <?= count($objects) . ' ' . $objectName ?> .
-    </td>
     <td>
         <a
             href="<?=$this->href(
@@ -28,17 +25,18 @@
         </a> <br/>
         <a href="<?= $this->href('monitoring/command/reschedulenextcheck', $this->target) ?>">
             <?= $this->icon('reschedule_petrol.png') ?> Reschedule
-        </a>
+        </a> <br />
+
+    </td>
+    <td>
+         Perform actions on <?=  count($objects) . ' ' . $objectName ?>.
     </td>
 </tr>
 
-<tr>
+<tr class="newsection">
     <th>
-        Problems
+        <?= $this->problems ?> Problems
     </th>
-    <td>
-        The <?= $objectName ?> have <span> <?= $this->problems ?> </span> problems.
-    </td>
     <td>
         <a
             title="Schedule downtimes for all selected hosts"
@@ -47,22 +45,28 @@
             <?= $this->icon('in_downtime_petrol.png') ?> Schedule Downtimes
         </a>
     </td>
+    <td>
+        Handle <?= $this->problems ?> problems on <span> <?= count($this->objects) ?> </span> <?= $objectName ?>.
+    </td>
 </tr>
-
-
 <tr>
     <th>
-        Unhandled
+        <?= count($this->unhandled) ?> Unhandled
     </th>
-    <td>
-        <span> <?= count($this->unhandled) ?> </span> <?= $objectName ?> are unhandled.
-    </td>
     <td>
         <a
             title="Acknowledge all problems on the selected hosts or services"
             href="<?= $this->href('monitoring/command/acknowledgeproblem', $this->target);?>"
-            >
+        >
             <?= $this->icon('acknowledgement_petrol.png') ?> Acknowledge
+        </a>  <br />
+        <a
+            title="Remove all acknowledgements from all selected hosts or services"
+            href="<?=$this->href('monitoring/command/removeacknowledgement', $target);?>"
+            >
+            <?= $this->icon('remove_petrol.png') ?> Remove Acknowledgements
         </a>
     </td>
+    <td>
+    </td>
 </tr>

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

@@ -8,33 +8,67 @@ $this->target = array(
 );
 ?>
 
-<?= $this->tabs; ?>
-
 <div class="controls">
-    <h1> Summary for <?= count($objects) ?> services </h1>
+    <?= $this->tabs; ?>
 </div>
 
 <div class="content">
+    <h1> Summary for <?= count($objects) ?> services </h1>
+
     <?= $this->render('multi/components/objectlist.phtml'); ?>
-    <h3> <?=$this->icon('servicegroup.png')?> Service State </h3>
+    <table class="avp">
+        <tr>
+            <th align="center">
+                <h3><?= array_sum(array_values($service_states)) ?> Services</h3>
+            </th>
+            <th></th>
+            <th align="center">
+                <h3><?= array_sum(array_values($host_states)) ?> Hosts</h3>
+            </th>
+            <th></th>
+        </tr>
+        <tr>
+            <td align="center">
+                <?= $this->service_pie->render(); ?>
+            </td>
+            <td>
+                <?php
+                foreach ($service_states as $state => $count) {
+                    if ($count > 0) {
+                        echo ucfirst($state) . ': ' . $count . '<br />';
+                    }
+                }
+                ?>
+            </td>
+            <td align="center">
+                <?= $this->host_pie->render(); ?>
+            </td>
+            <td>
+                <?php
+                foreach ($host_states as $state => $count) {
+                    if ($count > 0) {
+                        echo ucfirst($state) . ': ' . $count . '<br />';
+                    }
+                }
+                ?>
+            </td>
+            <td></td>
+        </tr>
+    </table>
+
+    <h2> <?=$this->icon('servicegroup.png')?> Service Actions </h2>
 
     <table class="avp newsection">
         <tbody>
-        <?= $this->render('multi/components/summary.phtml'); ?>
+            <?= $this->render('multi/components/summary.phtml'); ?>
-        <?= $this->render('multi/components/comments.phtml'); ?>
+            <?= $this->render('multi/components/comments.phtml'); ?>
-        <?= $this->render('multi/components/downtimes.phtml'); ?>
+            <?= $this->render('multi/components/downtimes.phtml'); ?>
         </tbody>
     </table>
 
-    <h3> <?=$this->icon('configuration.png')?> Options </h3>
+    <?= $this->render('multi/components/flags.phtml') ?>
-    <table class="avp newsection">
-        <tbody>
-        <?= $this->render('multi/components/configuration.phtml') ?>
-        </tbody>
-    </table>
 </div>
 
-
 <a
     rel="tooltip"
     title="Submit passive checkresults"

public/js/icinga/events.js

@@ -68,11 +68,27 @@
 
             $('input.autofocus', el).focus();
 
-            $('.inlinepie', el).sparkline('html', {
+            $('div.inlinepie', el).each(function() {
-                type:        'pie',
+                var $img   = $(this).find('img');
-                sliceColors: ['#44bb77', '#ffaa44', '#ff5566', '#dcd'],
+                var title  = $img.attr('title'),
-                width:       '2em',
+                    values = $img.data('icinga-values'),
-                height:      '2em'
+                    colors = $img.data('icinga-colors'),
+                    width  = $img.css('width'),
+                    height = $img.css('height');
+                if (colors) {
+                    colors = colors.split(',');
+                }
+                $img.replaceWith(values);
+                $(this).sparkline(
+                    'html',
+                    {
+                        type:   'pie',
+                        sliceColors: colors || ['#44bb77', '#ffaa44', '#ff5566', '#dcd'],
+                        width:  width,
+                        height: height,
+                        tooltipChartTitle: title
+                    }
+                );
             });
         },
 
@@ -118,6 +134,8 @@
             $(document).on('mouseleave', '#sidebar', this.leaveSidebar);
             $(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
 
+            // Toggle all triStateButtons
+            $(document).on('click', '.tristate input.tristate', { self: this}, this.clickTriState);
 
             // TBD: a global autocompletion handler
             // $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
@@ -233,6 +251,39 @@
             return event.data.self.submitForm(event, true);
         },
 
+        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
+            if (triState) {
+                // 1         => 0
+                // 0         => unchanged
+                // unchanged => 1
+                value = value === '1' ? '0' : (value === '0' ? 'unchanged' : '1');
+            } else {
+                // 1 => 0
+                // 0 => 1
+                value = value === '1' ? '0' : '1';
+            }
+            $tristate.data('icinga-value', value);
+
+            // also set form value
+            $tristate.prop('value', value);
+
+            var $changed = $tristate.parent().find('.tristate-status').first();
+            if (old != value) {
+                $changed.text('changed');
+            } else {
+                $changed.empty();
+            }
+            $tristate.find('.tristate-status').text(value);
+            self.icinga.ui.updateTriState(value.toString(), $tristate);
+        },
+
         /**
          *
          */

public/js/icinga/loader.js

@@ -247,6 +247,8 @@
             if (! req.autorefresh) {
                 // TODO: Hook for response/url?
                 var $forms = $('[action="' + this.icinga.utils.parseUrl(url).path + '"]');
+
+                console.log('Old URL: ' + url);
                 var $matches = $.merge($('[href="' + url + '"]'), $forms);
                 $matches.each(function (idx, el) {
                     if ($(el).closest('#menu').length) {
@@ -273,6 +275,7 @@
                 });
             } else {
                 // TODO: next container url
+                // Get first container url?
                 active = $('[href].active', req.$target).attr('href');
             }
 
@@ -387,18 +390,7 @@
                     this.icinga.history.pushCurrentState();
                 }
             }
-
+            this.icinga.ui.initializeTriStates($resp);
-
-            /*
-             * Replace SVG piecharts with jQuery-Sparkline
-             */
-            $('.inlinepie', $resp).each(function(){
-                var title  = $(this).attr('title'),
-                    style  = $(this).attr('style'),
-                    values = $(this).data('icinga-values'),
-                    html   = '<div class="inlinepie" style="' + style + '" title="' + title + '">' + values + '</div>';
-                $(this).replaceWith(html);
-            });
 
             /**
              * Make multiselection-tables not selectable.

public/js/icinga/ui.js

@@ -463,6 +463,69 @@
             return $calc.width() / 1000;
         },
 
+        /**
+         * Initialize all TriStateCheckboxes in the given html
+         */
+        initializeTriStates: function ($html) {
+            var self = this;
+            $('div.tristate', $html).each(function(index, item) {
+                var target   = item;
+                var $target  = $(target);
+                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 + '" ' +
+                        'class="tristate" type="checkbox" ' +
+                        'data-icinga-old="' + old + '" ' +
+                        'data-icinga-tristate="' + triState + '" ' +
+                        'data-icinga-value="' + value + '" ' +
+                        ( value === 'unchanged' ? 'indeterminate=1 ' : ' ' ) +
+                        ( value === '1' ? 'checked ' : ' ' ) +
+                    '></input>' +
+                    '<div class="tristate-status">' + getStateDescription(value) + '</div>'
+                );
+            });
+        },
+
+        /**
+         * Set the value of the given TriStateCheckbox
+         *
+         * @param value     {String}  The value to set, can be '1', '0' and 'unchanged'
+         * @param $checkbox {jQuery}  The checkbox
+         */
+        updateTriState: 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;
+            }
+        },
+
         initializeControls: function (parent) {
 
             var self = this;