From d34ea588b1bf53cd8e0ecbb39ed2b4de8f6c5dd6 Mon Sep 17 00:00:00 2001 From: Jennifer Mourek Date: Thu, 16 Nov 2017 16:12:10 +0100 Subject: [PATCH] Tactical overview: Add donut graphs --- library/Icinga/Chart/Donut.php | 402 ++++++++++++++++++ .../controllers/TacticalController.php | 129 +++--- .../views/scripts/tactical/index.phtml | 122 +++++- public/css/icinga/widgets.less | 118 +++++ 4 files changed, 715 insertions(+), 56 deletions(-) create mode 100644 library/Icinga/Chart/Donut.php diff --git a/library/Icinga/Chart/Donut.php b/library/Icinga/Chart/Donut.php new file mode 100644 index 000000000..6fedcca63 --- /dev/null +++ b/library/Icinga/Chart/Donut.php @@ -0,0 +1,402 @@ + 'slice-state-ok']) + * + * @return $this + */ + public function addSlice($data, $attributes = array()) + { + $this->slices[] = array($data, $attributes); + + $this->count += $data; + + return $this; + } + + /** + * Set the thickness for this Donut + * + * @param integer $thickness + * + * @return $this + */ + public function setThickness($thickness) + { + $this->thickness = $thickness; + + return $this; + } + /** + * Get the thickness for this Donut + * + * @return integer + */ + public function getThickness() + { + return $this->thickness; + } + + /** + * Set the center color for this Donut + * + * @param string $centerColor + * + * @return $this + */ + public function setCenterColor($centerColor) + { + $this->centerColor = $centerColor; + + return $this; + } + + /** + * Get the center color for this Donut + * + * @return string + */ + public function getCenterColor() + { + return $this->centerColor; + } + + /** + * Set the text of the big label + * + * @param string $labelBig + * + * @return $this + */ + public function setLabelBig($labelBig) + { + $this->labelBig = $labelBig; + + return $this; + } + + /** + * Get the text of the big label + * + * @return string + */ + public function getLabelBig() + { + return $this->labelBig; + } + + /** + * Set the url behind the big label + * + * @param Url $labelBigUrl + * + * @return $this + */ + public function setLabelBigUrl($labelBigUrl) + { + $this->labelBigUrl = $labelBigUrl; + + return $this; + } + + /** + * Get the url behind the big label + * + * @return Url + */ + public function getLabelBigUrl() + { + return $this->labelBigUrl; + } + + /** + * Set the text of the small label + * + * @param string $labelSmall + * + * @return $this + */ + public function setLabelSmall($labelSmall) + { + $this->labelSmall = $labelSmall; + + return $this; + } + + /** + * Get the text of the small label + * + * @return string + */ + public function getLabelSmall() + { + return $this->labelSmall; + } + + /** + * Put together all slices of this Donut + * + * @return array $svg + */ + protected function assemble() + { + // svg tag containing the ring + $svg = array( + 'tag' => 'svg', + 'attributes' => array( + 'xmlns' => 'http://www.w3.org/2000/svg', + 'viewbox' => '0 0 40 40', + 'class' => 'donut-graph' + ), + 'content' => array() + ); + + // Donut hole + $svg['content'][] = array( + 'tag' => 'circle', + 'attributes' => array( + 'cx' => 20, + 'cy' => 20, + 'r' => $this->radius, + 'fill' => $this->getCenterColor() + ) + ); + + // When there is no data show gray circle + $svg['content'][] = array( + 'tag' => 'circle', + 'attributes' => array( + 'cx' => 20, + 'cy' => 20, + 'r' => $this->radius, + 'fill' => $this->getCenterColor(), + 'stroke-width' => $this->getThickness(), + 'class' => 'slice-state-not-checked' + ) + ); + + $slices = $this->slices; + + if ($this->count !== 0) { + array_walk($slices, function (&$slice) { + $slice[0] = round(100 / $this->count * $slice[0], 2); + }); + } + + // on 0 the donut would start at "3 o'clock" and the offset shifts counterclockwise + $offset = 25; + + foreach ($slices as $slice) { + $svg['content'][] = array( + 'tag' => 'circle', + 'attributes' => $slice[1] + array( + 'cx' => 20, + 'cy' => 20, + 'r' => $this->radius, + 'fill' => 'transparent', + 'stroke-width' => $this->getThickness(), + 'stroke-dasharray' => $slice[0] . ' ' . (99.9 - $slice[0]), // 99.9 prevents gaps (slight overlap) + 'stroke-dashoffset' => $offset + ) + ); + // negative values shift in the clockwise direction + $offset -= $slice[0]; + } + + if ($this->getLabelBig() || $this->getLabelSmall()) { + $labels = array( + 'tag' => 'div', + 'attributes' => array( + 'class' => 'donut-label' + ), + 'content' => array() + ); + + if ($this->getLabelBig()) { + $labels['content'][] = + array( + 'tag' => 'a', + 'attributes' => array( + 'href' => $this->getLabelBigUrl() ? $this->getLabelBigUrl()->getAbsoluteUrl() : null, + 'class' => 'donut-label-big' + ), + 'content' => $this->shortenLabel($this->getLabelBig()) + ); + } + + if ($this->getLabelSmall()) { + $labels['content'][] = array( + 'tag' => 'p', + 'attributes' => array( + 'class' => 'donut-label-small', + 'x' => '50%', + 'y' => '50%' + ), + 'content' => $this->getLabelSmall() + ); + } + + $svg['content'][] = $labels; + } + + return $svg; + } + + /** + * Shorten the label to 3 digits if it is numeric + * + * 10 => 10 ... 1111 => ~1k ... 1888 => ~2k + * + * @param int|string $label + * + * @return string + */ + protected function shortenLabel($label) + { + if (is_numeric($label) && strlen($label) > 3) { + return '~' . substr(round($label, -3), 0, 1) . 'k'; + } + + return $label; + } + + protected function encode($content) + { + if (version_compare(PHP_VERSION, '5.4.0') >= 0) { + $replaceFlags = ENT_COMPAT | ENT_SUBSTITUTE | ENT_HTML5; + } else { + $replaceFlags = ENT_COMPAT | ENT_IGNORE; + } + + return htmlspecialchars($content, $replaceFlags, 'UTF-8', true); + } + + protected function renderAttributes(array $attributes) + { + $html = []; + + foreach ($attributes as $name => $value) { + if ($value === null) { + continue; + } + + if (is_bool($value) && $value) { + $html[] = $name; + continue; + } + + if (is_array($value)) { + $value = implode(' ', $value); + } + + $html[] = "$name=\"" . $this->encode($value) . '"'; + } + + return implode(' ', $html); + } + + protected function renderContent(array $element) + { + $tag = $element['tag']; + $attributes = isset($element['attributes']) ? $element['attributes'] : array(); + $content = isset($element['content']) ? $element['content'] : null; + + $html = array( + // rtrim because attributes may be empty + rtrim("<$tag " . $this->renderAttributes($attributes)) + . ">" + ); + + if ($content !== null) { + if (is_array($content)) { + foreach ($content as $child) { + $html[] = is_array($child) ? $this->renderContent($child) : $this->encode($child); + } + } else { + $html[] = $this->encode($content); + } + } + + $html[] = ""; + + return implode("\n", $html); + } + + public function render() + { + $svg = $this->assemble(); + + return $this->renderContent($svg); + } +} diff --git a/modules/monitoring/application/controllers/TacticalController.php b/modules/monitoring/application/controllers/TacticalController.php index 7ef702484..2f220f161 100644 --- a/modules/monitoring/application/controllers/TacticalController.php +++ b/modules/monitoring/application/controllers/TacticalController.php @@ -3,6 +3,7 @@ namespace Icinga\Module\Monitoring\Controllers; +use Icinga\Chart\Donut; use Icinga\Module\Monitoring\Controller; use Icinga\Web\Url; use Icinga\Web\Widget\Tabextension\DashboardAction; @@ -13,6 +14,7 @@ class TacticalController extends Controller public function indexAction() { $this->setAutorefreshInterval(15); + $this->getTabs()->add( 'tactical_overview', array( @@ -24,66 +26,93 @@ class TacticalController extends Controller 'url' => Url::fromRequest() ) )->extend(new DashboardAction())->extend(new MenuAction())->activate('tactical_overview'); + $stats = $this->backend->select()->from( 'statussummary', array( 'hosts_up', - 'hosts_pending', - 'hosts_down', + 'hosts_down_handled', 'hosts_down_unhandled', - 'hosts_unreachable', + 'hosts_unreachable_handled', 'hosts_unreachable_unhandled', - - 'services_ok_on_ok_hosts', - 'services_ok_not_checked_on_ok_hosts', - 'services_pending_on_ok_hosts', - 'services_pending_not_checked_on_ok_hosts', - 'services_warning_handled_on_ok_hosts', - 'services_warning_unhandled_on_ok_hosts', - 'services_warning_passive_on_ok_hosts', - 'services_warning_not_checked_on_ok_hosts', - 'services_critical_handled_on_ok_hosts', - 'services_critical_unhandled_on_ok_hosts', - 'services_critical_passive_on_ok_hosts', - 'services_critical_not_checked_on_ok_hosts', - 'services_unknown_handled_on_ok_hosts', - 'services_unknown_unhandled_on_ok_hosts', - 'services_unknown_passive_on_ok_hosts', - 'services_unknown_not_checked_on_ok_hosts', - 'services_ok_on_problem_hosts', - 'services_ok_not_checked_on_problem_hosts', - 'services_pending_on_problem_hosts', - 'services_pending_not_checked_on_problem_hosts', - 'services_warning_handled_on_problem_hosts', - 'services_warning_unhandled_on_problem_hosts', - 'services_warning_passive_on_problem_hosts', - 'services_warning_not_checked_on_problem_hosts', - 'services_critical_handled_on_problem_hosts', - 'services_critical_unhandled_on_problem_hosts', - 'services_critical_passive_on_problem_hosts', - 'services_critical_not_checked_on_problem_hosts', - 'services_unknown_handled_on_problem_hosts', - 'services_unknown_unhandled_on_problem_hosts', - 'services_unknown_passive_on_problem_hosts', - 'services_unknown_not_checked_on_problem_hosts', - - 'hosts_active', - 'hosts_passive', + 'hosts_pending', 'hosts_not_checked', - 'services_active', - 'services_passive', + + 'services_ok', + 'services_warning_handled', + 'services_warning_unhandled', + 'services_critical_handled', + 'services_critical_unhandled', + 'services_unknown_handled', + 'services_unknown_unhandled', + 'services_pending', 'services_not_checked', - 'hosts_not_processing_event_handlers', - 'services_not_processing_event_handlers', - 'hosts_not_triggering_notifications', - 'services_not_triggering_notifications', - 'hosts_without_flap_detection', - 'services_without_flap_detection', - 'hosts_flapping', - 'services_flapping' ) ); $this->applyRestriction('monitoring/filter/objects', $stats); - $this->view->statusSummary = $stats->fetchRow(); + + $summary = $stats->fetchRow(); + + $hostSummaryChart = new Donut(); + $hostSummaryChart + ->addSlice($summary->hosts_up, array('class' => 'slice-state-ok')) + ->addSlice($summary->hosts_down_handled, array('class' => 'slice-state-critical-handled')) + ->addSlice($summary->hosts_down_unhandled, array('class' => 'slice-state-critical')) + ->addSlice($summary->hosts_unreachable_handled, array('class' => 'slice-state-unreachable-handled')) + ->addSlice($summary->hosts_unreachable_unhandled, array('class' => 'slice-state-unreachable')) + ->addSlice($summary->hosts_pending, array('class' => 'slice-state-pending')) + ->addSlice($summary->hosts_not_checked, array('class' => 'slice-state-not-checked')); + if ($summary->hosts_down_unhandled > 1) { + $hostSummaryChart + ->setLabelBig($summary->hosts_down_unhandled) + ->setLabelSmall($this->translate('hosts down')); + } elseif ($summary->hosts_down_unhandled === 1) { + $hostSummaryChart + ->setLabelBig($summary->hosts_down_unhandled) + ->setLabelSmall($this->translate('host down')); + } + + $serviceSummaryChart = new Donut(); + $serviceSummaryChart + ->addSlice($summary->services_ok, array('class' => 'slice-state-ok')) + ->addSlice($summary->services_warning_handled, array('class' => 'slice-state-warning-handled')) + ->addSlice($summary->services_warning_unhandled, array('class' => 'slice-state-warning')) + ->addSlice($summary->services_critical_handled, array('class' => 'slice-state-critical-handled')) + ->addSlice($summary->services_critical_unhandled, array('class' => 'slice-state-critical')) + ->addSlice($summary->services_unknown_handled, array('class' => 'slice-state-unknown-handled')) + ->addSlice($summary->services_unknown_unhandled, array('class' => 'slice-state-unknown')) + ->addSlice($summary->services_pending, array('class' => 'slice-state-pending')) + ->addSlice($summary->services_not_checked, array('class' => 'slice-state-not-checked')); + if ($summary->services_critical_unhandled > 1) { + $serviceSummaryChart + ->setLabelBig($summary->services_critical_unhandled) + ->setLabelSmall($this->translate('services critical')); + } elseif ($summary->services_critical_unhandled === 1) { + $hostSummaryChart + ->setLabelBig($summary->hosts_down_unhandled) + ->setLabelSmall($this->translate('service critical')); + } + + $this->view->hostStatusSummaryChart = $hostSummaryChart + ->setLabelBigUrl($this->view->url( + 'monitoring/list/hosts', + array( + 'host_state' => 1, 'host_handled' => 0, + 'sort' => 'host_last_check', 'dir' => 'asc' + ) + )) + ->render(); + $this->view->serviceStatusSummaryChart = $serviceSummaryChart + ->setLabelBigUrl($this->view->url( + 'monitoring/list/services', + array( + 'service_state' => 2, + 'service_handled' => 0, + 'sort' => 'service_last_check', + 'dir' => 'asc' + ) + )) + ->render(); + $this->view->statusSummary = $summary; } } diff --git a/modules/monitoring/application/views/scripts/tactical/index.phtml b/modules/monitoring/application/views/scripts/tactical/index.phtml index 6639b0c1b..968dc73e2 100644 --- a/modules/monitoring/application/views/scripts/tactical/index.phtml +++ b/modules/monitoring/application/views/scripts/tactical/index.phtml @@ -5,11 +5,121 @@
-statusSummary->hosts_down || $this->statusSummary->hosts_unreachable): ?> - render('tactical/components/problem_hosts.phtml'); ?> - -statusSummary->hosts_up || $this->statusSummary->hosts_pending): ?> - render('tactical/components/ok_hosts.phtml'); ?> - +
+

translate('Host Summary') ?>

+
+ +
+ + + hosts_up): ?> + + + + + hosts_down_handled):?> + + + + + hosts_down_unhandled):?> + + + + + hosts_unreachable_handled):?> + + + + + hosts_unreachable_unhandled):?> + + + + + hosts_pending):?> + + + + + hosts_not_checked):?> + + + + + + +
hosts_up ?>translate('Up') ?>
hosts_down_handled ?>translate('Down handled') ?>
hosts_down_unhandled ?>translate('Down') ?>
hosts_unreachable_handled ?>translate('Unreachable handled') ?>
hosts_unreachable_unhandled ?>translate('Unreachable') ?>
hosts_pending ?>translate('Pending') ?>
hosts_not_checked ?>translate('Not Checked') ?>
+
+
+

translate('Service Summary') ?>

+
+ +
+ + + services_ok):?> + + + + + services_warning_handled):?> + + + + + services_warning_unhandled):?> + + + + + services_critical_handled):?> + + + + + services_critical_unhandled):?> + + + + + services_unknown_handled):?> + + + + + services_unknown_unhandled):?> + + + + + services_pending):?> + + + + + services_not_checked):?> + + + + + + +
services_ok ?>translate('Ok') ?>
services_warning_handled ?>translate('Warning handled') ?>
services_warning_unhandled ?>translate('Warning') ?>
services_critical_handled ?>translate('Critical handled') ?>
services_critical_unhandled ?>translate('Critical') ?>
services_unknown_handled ?>translate('Unknown handled') ?>
services_unknown_unhandled ?>translate('Unknown') ?>
services_pending ?>translate('Pending') ?>
services_not_checked ?>translate('Not Checked') ?>
+
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 610c976ce..cf014c8cd 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -341,3 +341,121 @@ ul.tree li a.error:hover { right: 6px; } } + +.slice-state-ok { + stroke: @color-ok; + background: @color-ok; +} + +.slice-state-warning-handled { + stroke: @color-warning-handled; + background: @color-warning-handled; +} + +.slice-state-warning { + stroke: @color-warning; + background: @color-unreachable-handled; +} + +.slice-state-critical-handled { + stroke: @color-critical-handled; + background: @color-critical-handled; +} + +.slice-state-critical { + stroke: @color-critical; + background: @color-critical; +} + +.slice-state-unknown-handled { + stroke: @color-unknown-handled; + background: @color-unknown-handled; +} + +.slice-state-unknown { + stroke: @color-unknown; + background: @color-unknown; +} + +.slice-state-unreachable-handled { + stroke: @color-unreachable-handled; + background: @color-unreachable-handled; +} + +.slice-state-unreachable { + stroke: @color-unreachable; + background: @color-unreachable; +} + +.slice-state-pending { + stroke: @color-pending; + background: @color-pending; +} + +.slice-state-not-checked { + stroke: @gray-light; + background: @gray-light; +} + +.donut { + width: 22em; + height: 22em; + min-width: 11.5em; + display: table; +} + +.donut-graph { + width: 22em; + height: 22em; +} + +.donut-label { + font-weight: bold; + fill: @text-color; +} + +.donut-label { + margin-top: -12.5em; + text-align: center; +} + +.donut-label-big { + color: @color-critical; + font-size: 6em; + line-height: 0; + text-anchor: middle; + &:hover { + text-decoration: none; + } +} + +.donut-label-small { + fill: @text-color; + font-size: 1.2em; + text-transform: lowercase; + text-anchor: middle; + -moz-transform: translateY(0.35em); + -ms-transform: translateY(0.35em); + -webkit-transform: translateY(0.35em); + transform: translateY(0.35em); +} + +.donut-container { + display: inline-block; + width: 36em; + height: 36em; + position: relative; +} + +.donut-table { + max-width: 45%; + display: inline-block; + position: absolute; + top: 23em; + left: 17.5em; + + & > tbody > tr:hover { + text-decoration: underline; + cursor: pointer; + } +}