Use togglable subcontainers in the time range picker

refs #44
This commit is contained in:
Alexander A. Klimov 2017-11-08 18:36:34 +01:00
parent fd8bc54564
commit bed0c869da
7 changed files with 86 additions and 28 deletions

View file

@ -43,7 +43,7 @@ class ListController extends MonitoringAwareController
$this->setupSortControl(['host_display_name' => mt('monitoring', 'Hostname')], $hosts);
$this->handleTimeRangePickerRequest();
$this->view->timeRangePicker = $this->renderTimeRangePicker($this->view);
$this->view->timeRangePicker = $this->renderTimeRangePicker();
}
public function servicesAction()
@ -74,7 +74,7 @@ class ListController extends MonitoringAwareController
], $services);
$this->handleTimeRangePickerRequest();
$this->view->timeRangePicker = $this->renderTimeRangePicker($this->view);
$this->view->timeRangePicker = $this->renderTimeRangePicker();
}
/**

View file

@ -0,0 +1,16 @@
<?php
namespace Icinga\Module\Graphite\Controllers;
use Icinga\Module\Graphite\Forms\TimeRangePicker\CustomForm;
use Icinga\Web\Controller;
class SubcontainerController extends Controller
{
public function customtimerangepickerAction()
{
$this->view->form = $form = new CustomForm();
$form->setRedirectUrl($this->getRequest()->getUrl()->getParams()->getRequired('redirect'))
->handleRequest();
}
}

View file

@ -3,7 +3,9 @@
namespace Icinga\Module\Graphite\Forms\TimeRangePicker;
use Icinga\Web\Form;
use Icinga\Web\View;
use Zend_Form_Decorator_HtmlTag;
use Zend_Form_Element;
use Zend_Form_Element_Select;
class CommonForm extends Form
@ -41,6 +43,38 @@ class CommonForm extends Form
public function createElements(array $formData)
{
/** @var View $view */
$view = $this->getView();
$this->addElement($this->reduceDecorators($this->createElement(
'note',
'custom_range',
[
'description' => $this->translate('Specify custom time range'),
'escape' => false,
'value' => sprintf(
'<span class="subcontainer" id="form_timerangepickercommon_graphite-custom_range-%s">%s%s</span>',
md5($this->getRequest()->getUrl()->getAbsoluteUrl()),
$view->qlink(
null,
'#',
null,
[
'class' => 'button-link subcontainer-toggle',
'icon' => 'service'
]
),
sprintf(
'<div class="subcontainer-content" data-icinga-url="%s"></div>',
$view->url(
'graphite/subcontainer/customtimerangepicker',
['redirect' => $this->getRequest()->getUrl()->getAbsoluteUrl()]
)
)
)
]
)));
$this->addElements([
$this->createSelect(
'minutes',
@ -129,16 +163,27 @@ class CommonForm extends Form
'autosubmit' => true
]);
return $this->reduceDecorators($element);
}
/**
* Reduce the decorators set of the given element to the minimum
*
* @param Zend_Form_Element $element
*
* @return Zend_Form_Element
*/
protected function reduceDecorators(Zend_Form_Element $element)
{
$decorators = $element->getDecorators();
$element->setDecorators([
return $element->setDecorators([
'Zend_Form_Decorator_ViewHelper' => $decorators['Zend_Form_Decorator_ViewHelper'],
'Zend_Form_Decorator_HtmlTag' => new Zend_Form_Decorator_HtmlTag([
'tag' => 'span',
'title' => $description
'title' => $element->getDescription()
])
]);
return $element;
}
/**

View file

@ -0,0 +1,3 @@
<div class="content">
<?= /** @var \Icinga\Module\Graphite\Forms\TimeRangePicker\CustomForm $form */ $form ?>
</div>

View file

@ -15,7 +15,7 @@ class DetailviewExtension extends DetailviewExtensionHook
{
$this->handleTimeRangePickerRequest();
return '<h2>' . mt('graphite', 'Graphs') . '</h2>'
. $this->renderTimeRangePicker($this->getView())
. $this->renderTimeRangePicker()
. Graphs::forMonitoredObject($object)
->setCompact()
->setWidth(440)

View file

@ -37,30 +37,11 @@ trait TimeRangePickerTrait
/**
* Render all needed forms and links
*
* @param View $view
*
* @return string
*/
protected function renderTimeRangePicker(View $view)
protected function renderTimeRangePicker()
{
$result = $this->getTimeRangePickerCommonForm();
$url = Url::fromRequest();
if ($url->hasParam(TimeRangePicker::getRangeCustomizationParameter())) {
$result .= $this->getTimeRangePickerCustomForm();
} else {
$result .= $view->qlink(
$view->translate('Custom', 'TimeRangePicker'),
$url->with(TimeRangePicker::getRangeCustomizationParameter(), '1'),
null,
[
'class' => 'button-link',
'data-base-target' => '_self'
]
);
}
return '<div class="timerangepicker-forms">' . $result . '</div>';
return '<div class="timerangepicker-forms">' . $this->getTimeRangePickerCommonForm() . '</div>';
}
/**

View file

@ -90,3 +90,16 @@ form[name=form_timerangepickercustom_graphite] {
margin: 0.25em;
}
}
form[name="form_timerangepickercommon_graphite"] span[title] .subcontainer {
position: relative;
.subcontainer-content {
position: absolute;
.content {
background-color: #ffffff;
border: thin dotted #000000;
}
}
}