Add default dashboard, fix componentLoader issue introduced before
This commit is contained in:
Jannis Moßhammer
parent
f5e4831bef
commit
8eea09ab53
|
|
@ -0,0 +1,24 @@
|
|||
[Landing]
|
||||
title = "Landing page"
|
||||
[Landing.Hostgroups]
|
||||
url = "monitoring/chart/hostgroup?height=280&width=500"
|
||||
height = "280"
|
||||
width = "500"
|
||||
height = ""
|
||||
width = ""
|
||||
|
||||
[Landing.Servicegroups]
|
||||
url = "monitoring/chart/servicegroup?height=280&width=500"
|
||||
height = "280"
|
||||
width = "500"
|
||||
height = ""
|
||||
width = ""
|
||||
|
||||
[Landing.Problem Services]
|
||||
url = "monitoring/list/services?service_problem=1"
|
||||
service_problem = "1"
|
||||
|
||||
[Landing.Unhandled Problem Hosts]
|
||||
url = "monitoring/list/hosts?host_state%3E0=&host_handled=0"
|
||||
host_state>0 = ""
|
||||
host_handled = "0"
|
||||
|
|
@ -93,14 +93,14 @@ class BarGraph extends Styleable implements Drawable
|
|||
$rect->setAttribute('data-icinga-graph-index', $idx++);
|
||||
$rect->setAttribute('data-icinga-graph-type', 'bar');
|
||||
$rect->setAdditionalStyle('clip-path: url(#clip);');
|
||||
$rect->setAnimation(
|
||||
/*$rect->setAnimation(
|
||||
new Animation(
|
||||
'y',
|
||||
$ctx->yToAbsolute(100),
|
||||
$ctx->yToAbsolute($point[1]),
|
||||
rand(1, 1.5)/2
|
||||
)
|
||||
);
|
||||
);*/
|
||||
$group->appendChild($rect->toSvg($ctx));
|
||||
}
|
||||
return $group;
|
||||
|
|
|
|||
|
|
@ -236,8 +236,11 @@ class PieChart extends Chart
|
|||
*/
|
||||
private function renderStackedPie(Canvas $innerBox, DOMElement $labelBox)
|
||||
{
|
||||
$radius = 50;
|
||||
$radius = 40;
|
||||
$minRadius = 20;
|
||||
if (count($this->pies) == 0) {
|
||||
return;
|
||||
}
|
||||
$shrinkStep = ($radius - $minRadius) / count($this->pies);
|
||||
$x = $radius;
|
||||
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ class PieSlice extends Animatable implements Drawable
|
|||
$path->append(array($midX, $midY))->toAbsolute();
|
||||
|
||||
$midX += intval($r/2 * sin(M_PI/9)) * ($midRadius > M_PI ? -1 : 1);
|
||||
$midY -= intval($r/2 * cos(M_PI/7)) * ($midRadius < M_PI*1.5 && $midRadius > M_PI/2 ? -1 : 1);
|
||||
$midY -= intval($r/2 * cos(M_PI/3) ) * ($midRadius < M_PI*1.4 && $midRadius > M_PI/3 ? -1 : 1);
|
||||
|
||||
if ($ctx->ytoRelative($midY) > 100) {
|
||||
$midY = $ctx->yToAbsolute(100);
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ class LinearUnit implements AxisUnit
|
|||
*/
|
||||
public function key()
|
||||
{
|
||||
return (string) $this->currentValue;
|
||||
return (string) intval($this->currentValue);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<?php
|
||||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
/**
|
||||
* This file is part of Icinga 2 Web.
|
||||
*
|
||||
* Icinga 2 Web - Head for multiple monitoring backends.
|
||||
* Copyright (C) 2013 Icinga Development Team
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public License
|
||||
* as published by the Free Software Foundation; either version 2
|
||||
* of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program; if not, write to the Free Software
|
||||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*
|
||||
* @copyright 2013 Icinga Development Team <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*/
|
||||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
|
||||
|
||||
namespace Icinga\Chart\Unit;
|
||||
|
||||
|
||||
class StaticAxis implements AxisUnit
|
||||
{
|
||||
private $items = array();
|
||||
|
||||
/**
|
||||
* Add a dataset to this AxisUnit, required for dynamic min and max vlaues
|
||||
*
|
||||
* @param array $dataset The dataset that will be shown in the Axis
|
||||
* @param int $id The idx in the dataset (0 for x, 1 for y)
|
||||
*/
|
||||
public function addValues(array $dataset, $idx = 0)
|
||||
{
|
||||
$datapoints = array();
|
||||
foreach ($dataset['data'] as $points) {
|
||||
$this->items[] = $points[$idx];
|
||||
}
|
||||
$this->items = array_unique($this->items);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform the given absolute value in an axis relative value
|
||||
*
|
||||
* @param int $value The absolute, dataset dependent value
|
||||
*
|
||||
* @return int An axis relative value
|
||||
*/
|
||||
public function transform($value)
|
||||
{
|
||||
$flipped = array_flip($this->items);
|
||||
if (!isset($flipped[$value])) {
|
||||
return 0;
|
||||
}
|
||||
$pos = $flipped[$value];
|
||||
return 1 + (99 / count($this->items) * $pos);
|
||||
}
|
||||
/**
|
||||
* Set the axis minimum value to a fixed value
|
||||
*
|
||||
* @param int $min The new minimum value
|
||||
*/
|
||||
public function setMin($min)
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the axis maximum value to a fixed value
|
||||
*
|
||||
* @param int $max The new maximum value
|
||||
*/
|
||||
public function setMax($max)
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* (PHP 5 >= 5.0.0)<br/>
|
||||
* Return the current element
|
||||
* @link http://php.net/manual/en/iterator.current.php
|
||||
* @return mixed Can return any type.
|
||||
*/
|
||||
public function current()
|
||||
{
|
||||
return 1 + (99 / count($this->items) * key($this->items));
|
||||
}
|
||||
|
||||
/**
|
||||
* (PHP 5 >= 5.0.0)<br/>
|
||||
* Move forward to next element
|
||||
* @link http://php.net/manual/en/iterator.next.php
|
||||
* @return void Any returned value is ignored.
|
||||
*/
|
||||
public function next()
|
||||
{
|
||||
return next($this->items);
|
||||
}
|
||||
|
||||
/**
|
||||
* (PHP 5 >= 5.0.0)<br/>
|
||||
* Return the key of the current element
|
||||
* @link http://php.net/manual/en/iterator.key.php
|
||||
* @return mixed scalar on success, or null on failure.
|
||||
*/
|
||||
public function key()
|
||||
{
|
||||
return current($this->items);
|
||||
}
|
||||
|
||||
/**
|
||||
* (PHP 5 >= 5.0.0)<br/>
|
||||
* Checks if current position is valid
|
||||
* @link http://php.net/manual/en/iterator.valid.php
|
||||
* @return boolean The return value will be casted to boolean and then evaluated.
|
||||
* Returns true on success or false on failure.
|
||||
*/
|
||||
public function valid()
|
||||
{
|
||||
return current($this->items) !== false;
|
||||
}
|
||||
|
||||
/**
|
||||
* (PHP 5 >= 5.0.0)<br/>
|
||||
* Rewind the Iterator to the first element
|
||||
* @link http://php.net/manual/en/iterator.rewind.php
|
||||
* @return void Any returned value is ignored.
|
||||
*/
|
||||
public function rewind()
|
||||
{
|
||||
return reset($this->items);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -85,10 +85,10 @@ class Component implements Widget
|
|||
*/
|
||||
private $template =<<<'EOD'
|
||||
|
||||
<div data-icinga-component="app/dashboard" class="dashboard-component" data-icinga-url="{URL}">
|
||||
<div data-icinga-component="app/dashboard" style="overflow:hidden" class="dashboard-component" data-icinga-url="{URL}">
|
||||
<h1 class="pull-left"><a data-icinga-target="self" href="{FULL_URL}"> {TITLE}</a></h1>
|
||||
{REMOVE_BTN}
|
||||
<div class="container">
|
||||
<div class="container" >
|
||||
|
||||
</div>
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -74,15 +74,16 @@ class Monitoring_ChartController extends ActionController
|
|||
public function testAction() {
|
||||
$this->chart = new GridChart();
|
||||
$this->chart->setAxisLabel("X axis label", "Y axis label")
|
||||
->setAxisMin(null, 0);
|
||||
->setXAxis(new \Icinga\Chart\Unit\StaticAxis());
|
||||
$data1 = array();
|
||||
$data2 = array();
|
||||
$data3 = array();
|
||||
for ($i=0; $i<25; $i++) {
|
||||
$data[] = array(1379344218+$i*10, rand(0,12));
|
||||
$data2[] = array(1379344218+$i*10, rand(4,30));
|
||||
$data3[] = array(1379344218+$i*10, rand(0,30));
|
||||
|
||||
$data3[] = array('Label ' . $i, rand(0,30));
|
||||
}
|
||||
|
||||
/*
|
||||
$this->chart->drawLines(
|
||||
array(
|
||||
'label' => 'Nr of outtakes',
|
||||
|
|
@ -99,7 +100,7 @@ class Monitoring_ChartController extends ActionController
|
|||
'showPoints' => true
|
||||
)
|
||||
);
|
||||
|
||||
*/
|
||||
$this->chart->drawBars(
|
||||
array(
|
||||
'label' => 'Some other line',
|
||||
|
|
@ -108,7 +109,7 @@ class Monitoring_ChartController extends ActionController
|
|||
'showPoints' => true
|
||||
)
|
||||
);
|
||||
|
||||
/*
|
||||
$this->chart->drawLines(
|
||||
array(
|
||||
'label' => 'Nr of outtakes',
|
||||
|
|
@ -117,7 +118,7 @@ class Monitoring_ChartController extends ActionController
|
|||
'data' => $data2
|
||||
)
|
||||
);
|
||||
|
||||
*/
|
||||
$this->view->svg = $this->chart;
|
||||
}
|
||||
|
||||
|
|
@ -126,60 +127,179 @@ class Monitoring_ChartController extends ActionController
|
|||
$query = GroupsummaryView::fromRequest(
|
||||
$this->_request,
|
||||
array(
|
||||
'hostgroup_name',
|
||||
'cnt_hosts_up',
|
||||
'cnt_hosts_unreachable',
|
||||
'cnt_hosts_unreachable_unhandled',
|
||||
'cnt_hosts_down',
|
||||
'cnt_hosts_down_unhandled',
|
||||
'cnt_hosts_pending',
|
||||
'cnt_services_ok',
|
||||
'cnt_services_unknown',
|
||||
'cnt_services_unknown_unhandled',
|
||||
'cnt_services_critical',
|
||||
'cnt_services_critical_unhandled',
|
||||
'cnt_services_warning',
|
||||
'cnt_services_warning_unhandled',
|
||||
'cnt_services_pending'
|
||||
'hostgroup',
|
||||
'hosts_up',
|
||||
'hosts_unreachable_handled',
|
||||
'hosts_unreachable_unhandled',
|
||||
'hosts_down_handled',
|
||||
'hosts_down_unhandled',
|
||||
'hosts_pending',
|
||||
'services_ok',
|
||||
'services_unknown_handled',
|
||||
'services_unknown_unhandled',
|
||||
'services_critical_handled',
|
||||
'services_critical_unhandled',
|
||||
'services_warning_handled',
|
||||
'services_warning_unhandled',
|
||||
'services_pending'
|
||||
)
|
||||
)->getQuery()->fetchRow();
|
||||
)->getQuery()->fetchAll();
|
||||
$this->view->height = intval($this->getParam('height', 220));
|
||||
$this->view->width = intval($this->getParam('width', 520));
|
||||
if (count($query) === 1) {
|
||||
$this->drawGroupPie($query[0]);
|
||||
} else {
|
||||
$this->drawHostGroupChart($query);
|
||||
}
|
||||
}
|
||||
|
||||
$this->view->chart = new PieChart();
|
||||
$this->view->chart->drawPie(
|
||||
public function servicegroupAction()
|
||||
{
|
||||
$query = GroupsummaryView::fromRequest(
|
||||
$this->_request,
|
||||
array(
|
||||
'data' => array(
|
||||
(int) $query->cnt_hosts_up,
|
||||
(int) $query->cnt_hosts_down,
|
||||
(int) $query->cnt_hosts_unreachable,
|
||||
(int) $query->cnt_hosts_pending
|
||||
),
|
||||
'colors' => array('00ff00', 'ff0000', 'ffff00', 'fefefe'),
|
||||
'labels'=> array(
|
||||
(int) $query->cnt_hosts_up . ' Up Hosts',
|
||||
(int) $query->cnt_hosts_down . ' Down Hosts',
|
||||
(int) $query->cnt_hosts_unreachable . ' Unreachable Hosts',
|
||||
(int) $query->cnt_hosts_pending . ' Pending Hosts'
|
||||
)
|
||||
),
|
||||
array(
|
||||
'data' => array(
|
||||
(int) $query->cnt_services_ok,
|
||||
(int) $query->cnt_services_warning,
|
||||
(int) $query->cnt_services_critical,
|
||||
(int) $query->cnt_services_unknown,
|
||||
(int) $query->cnt_services_pending
|
||||
),
|
||||
'colors' => array('00ff00', 'ffff00','ff0000', 'efef00', 'fefefe'),
|
||||
'labels'=> array(
|
||||
$query->cnt_services_ok . ' Up Services',
|
||||
$query->cnt_services_warning . ' Warning Services',
|
||||
$query->cnt_services_critical . ' Down Services',
|
||||
$query->cnt_services_unknown . ' Unreachable Services',
|
||||
$query->cnt_services_pending . ' Pending Services'
|
||||
)
|
||||
'servicegroup',
|
||||
'services_ok',
|
||||
'services_unknown_handled',
|
||||
'services_unknown_unhandled',
|
||||
'services_critical_handled',
|
||||
'services_critical_unhandled',
|
||||
'services_warning_handled',
|
||||
'services_warning_unhandled',
|
||||
'services_pending'
|
||||
)
|
||||
)->getQuery()->fetchAll();
|
||||
$this->view->height = intval($this->getParam('height', 220));
|
||||
$this->view->width = intval($this->getParam('width', 520));
|
||||
|
||||
);
|
||||
$this->drawServiceGroupChart($query);
|
||||
|
||||
}
|
||||
|
||||
private function drawServiceGroupChart($query)
|
||||
{
|
||||
$okBars = array();
|
||||
$warningBars = array();
|
||||
$critBars = array();
|
||||
$unknownBars = array();
|
||||
foreach ($query as $servicegroup) {
|
||||
$okBars[] = array($servicegroup->servicegroup, $servicegroup->services_ok);
|
||||
$warningBars[] = array($servicegroup->servicegroup, $servicegroup->services_warning_unhandled);
|
||||
$critBars[] = array($servicegroup->servicegroup, $servicegroup->services_critical_unhandled);
|
||||
$unknownBars[] = array($servicegroup->servicegroup, $servicegroup->services_unknown_unhandled);
|
||||
}
|
||||
$this->view->chart = new GridChart();
|
||||
$this->view->chart->setAxisLabel("X axis label", "Y axis label")
|
||||
->setXAxis(new \Icinga\Chart\Unit\StaticAxis());
|
||||
$this->view->chart->drawBars(
|
||||
array(
|
||||
'label' => 'Services ok',
|
||||
'color' => '00ff00',
|
||||
'stack' => 'stack1',
|
||||
'data' => $okBars
|
||||
),
|
||||
array(
|
||||
'label' => 'Services warning',
|
||||
'color' => 'ffff00',
|
||||
'stack' => 'stack1',
|
||||
'data' => $warningBars
|
||||
),
|
||||
array(
|
||||
'label' => 'Services critical',
|
||||
'color' => 'ff0000',
|
||||
'stack' => 'stack1',
|
||||
'data' => $critBars
|
||||
),
|
||||
array(
|
||||
'label' => 'Services unknown',
|
||||
'color' => 'E066FF',
|
||||
'stack' => 'stack1',
|
||||
'data' => $unknownBars
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
private function drawHostGroupChart($query)
|
||||
{
|
||||
$upBars = array();
|
||||
$downBars = array();
|
||||
$unreachableBars = array();
|
||||
foreach ($query as $hostgroup) {
|
||||
$upBars[] = array($hostgroup->hostgroup, $hostgroup->hosts_up);
|
||||
$downBars[] = array($hostgroup->hostgroup, $hostgroup->hosts_down_unhandled);
|
||||
$unreachableBars[] = array($hostgroup->hostgroup, $hostgroup->hosts_unreachable_unhandled);
|
||||
}
|
||||
$this->view->chart = new GridChart();
|
||||
$this->view->chart->setAxisLabel("X axis label", "Y axis label")
|
||||
->setXAxis(new \Icinga\Chart\Unit\StaticAxis());
|
||||
$this->view->chart->drawBars(
|
||||
array(
|
||||
'label' => 'Hosts up',
|
||||
'color' => '00ff00',
|
||||
'stack' => 'stack1',
|
||||
'data' => $upBars
|
||||
),
|
||||
array(
|
||||
'label' => 'Hosts down',
|
||||
'color' => 'ff0000',
|
||||
'stack' => 'stack1',
|
||||
'data' => $downBars
|
||||
),
|
||||
array(
|
||||
'label' => 'Hosts unreachable',
|
||||
'color' => 'E066FF',
|
||||
'stack' => 'stack1',
|
||||
'data' => $unreachableBars
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
private function drawGroupPie($query)
|
||||
{
|
||||
$this->view->chart = new PieChart();
|
||||
if (isset($query->hosts_up)) {
|
||||
$this->view->chart->drawPie(array(
|
||||
'data' => array(
|
||||
// (int) $query->hosts_up,
|
||||
(int) $query->hosts_down_handled,
|
||||
(int) $query->hosts_down_unhandled,
|
||||
(int) $query->hosts_unreachable_handled,
|
||||
(int) $query->hosts_unreachable_unhandled,
|
||||
(int) $query->hosts_pending
|
||||
),
|
||||
'colors' => array( 'ff4444', 'ff0000', 'E066FF', 'f099FF', 'fefefe'),
|
||||
'labels'=> array(
|
||||
// (int) $query->hosts_up . ' Up Hosts',
|
||||
(int) $query->hosts_down_handled . ' Down Hosts (Handled)',
|
||||
(int) $query->hosts_down_unhandled . ' Down Hosts (Unhandled)',
|
||||
(int) $query->hosts_unreachable_handled . ' Unreachable Hosts (Handled)',
|
||||
(int) $query->hosts_unreachable_unhandled . ' Unreachable Hosts (Unhandled)',
|
||||
(int) $query->hosts_pending . ' Pending Hosts'
|
||||
)
|
||||
),array(
|
||||
'data' => array(
|
||||
// (int) $query->services_ok,
|
||||
(int) $query->services_warning_unhandled,
|
||||
(int) $query->services_warning_handled,
|
||||
(int) $query->services_critical_unhandled,
|
||||
(int) $query->services_critical_handled,
|
||||
(int) $query->services_unknown_unhandled,
|
||||
(int) $query->services_unknown_handled,
|
||||
(int) $query->services_pending
|
||||
),
|
||||
'colors' => array( 'ff4444', 'ff0000', 'ffff00', 'ffff33', 'E066FF', 'f099FF', 'fefefe'),
|
||||
'labels'=> array(
|
||||
// $query->services_ok . ' Up Services',
|
||||
$query->services_warning_handled . ' Warning Services (Handled)',
|
||||
$query->services_warning_unhandled . ' Warning Services (Unhandled)',
|
||||
$query->services_critical_handled . ' Down Services (Handled)',
|
||||
$query->services_critical_unhandled . ' Down Services (Unhandled)',
|
||||
$query->services_unknown_handled . ' Unreachable Services (Handled)',
|
||||
$query->services_unknown_unhandled . ' Unreachable Services (Unhandled)',
|
||||
$query->services_pending . ' Pending Services',
|
||||
|
||||
)
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<div style="width:500px; height:300px;margin:auto">
|
||||
<?=
|
||||
$chart->render();
|
||||
?>
|
||||
</div>
|
||||
<div style="width:<?= $this->width; ?>px;height:<?= $this->height; ?>px">
|
||||
<?=
|
||||
$chart->render();
|
||||
?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
<div style="width:<?= $this->width; ?>px;height:<?= $this->height; ?>px">
|
||||
<?=
|
||||
$chart->render();
|
||||
?>
|
||||
</div>
|
||||
|
|
@ -48,9 +48,8 @@ define(['jquery', 'logging', 'icinga/componentRegistry'], function ($, log, regi
|
|||
function (Cmp) {
|
||||
var cmp;
|
||||
try {
|
||||
if (typeof $(target).attr('id') === 'undefined') {
|
||||
cmp = new Cmp(target);
|
||||
}
|
||||
cmp = new Cmp(target);
|
||||
|
||||
} catch (e) {
|
||||
log.emergency('Error in component "' + cmpType + '" : "' + e + '"');
|
||||
err(e);
|
||||
|
|
|
|||
|
|
@ -47,11 +47,13 @@ define(['jquery', 'logging', 'URIjs/URI', 'icinga/componentLoader'], function($,
|
|||
$.ajax({
|
||||
url: this.dashboardUrl
|
||||
}).done((function(response) {
|
||||
this.container.empty();
|
||||
this.container.html(response);
|
||||
dashboardContainer.freetile('layout');
|
||||
$(window).on('layoutchange', function() {
|
||||
dashboardContainer.freetile('layout');
|
||||
});
|
||||
|
||||
this.triggerRefresh();
|
||||
components.load();
|
||||
}).bind(this)).fail((function(response, reason) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue