diff --git a/library/Icingadb/Widget/Detail/CheckStatistics.php b/library/Icingadb/Widget/Detail/CheckStatistics.php index 0e23f7dba..d2490f10a 100644 --- a/library/Icingadb/Widget/Detail/CheckStatistics.php +++ b/library/Icingadb/Widget/Detail/CheckStatistics.php @@ -4,9 +4,11 @@ namespace Icinga\Module\Icingadb\Widget\Detail; +use Icinga\Application\Icinga; use Icinga\Date\DateFormatter; use Icinga\Module\Icingadb\Widget\CheckAttempt; use Icinga\Module\Icingadb\Widget\EmptyState; +use Icinga\Util\Csp; use Icinga\Util\Format; use ipl\Html\Attributes; use ipl\Html\BaseHtmlElement; @@ -15,6 +17,7 @@ use ipl\Html\HtmlString; use ipl\Html\Text; use ipl\Web\Common\Card; +use ipl\Web\Style; use ipl\Web\Widget\StateBall; use ipl\Web\Widget\TimeAgo; use ipl\Web\Widget\TimeSince; @@ -46,9 +49,16 @@ class CheckStatistics extends Card protected $defaultAttributes = ['class' => ['progress-bar', 'check-statistics']]; + /** @var Style */ + protected $style; + public function __construct($object) { $this->object = $object; + + $this->style = (new Style()) + ->setModule(Icinga::app()->getRequest()->getModuleName()) + ->setNonce(Csp::getStyleNonce()); } protected function assembleBody(BaseHtmlElement $body) @@ -124,7 +134,7 @@ protected function assembleBody(BaseHtmlElement $body) } } - $progressBar->getAttributes()->add('style', sprintf('width: %s%%', $leftNow)); + $this->style->addInlineStyleFor($progressBar, ['width' => $leftNow . '%']); $leftExecutionEnd = $nextCheckTime !== null ? $durationScale * ( 1 - ($nextCheckTime - $executionEndTime) / ($nextCheckTime - $lastUpdateTime) @@ -138,10 +148,8 @@ protected function assembleBody(BaseHtmlElement $body) 'class' => ['highlighted', 'marker', 'right'], 'title' => $nextCheckTime !== null ? DateFormatter::formatDateTime($nextCheckTime) : null ])); - $markerExecutionEnd = new HtmlElement('div', Attributes::create([ - 'class' => ['highlighted', 'marker'], - 'style' => sprintf('left: %F%%', $hPadding + $leftExecutionEnd), - ])); + $markerExecutionEnd = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']])); + $this->style->addInlineStyleFor($markerExecutionEnd, ['left' => ($hPadding + $leftExecutionEnd) . '%']); $progress = new HtmlElement('div', Attributes::create([ 'class' => ['progress', time() < $executionEndTime ? 'running' : null] @@ -178,10 +186,7 @@ protected function assembleBody(BaseHtmlElement $body) ); $executionEnd = new HtmlElement( 'li', - Attributes::create([ - 'class' => 'positioned', - 'style' => sprintf('left: %F%%', $hPadding + $leftExecutionEnd) - ]), + Attributes::create(['class' => 'positioned']), new HtmlElement( 'div', Attributes::create(['class' => ['bubble', 'upwards', 'top-left-aligned']]), @@ -197,16 +202,11 @@ protected function assembleBody(BaseHtmlElement $body) ) ); + $this->style->addInlineStyleFor($executionEnd, ['left' => ($hPadding + $leftExecutionEnd) . '%']); + $intervalLine = new HtmlElement( 'li', - Attributes::create([ - 'class' => 'interval-line', - 'style' => sprintf( - 'left: %F%%; width: %F%%;', - $hPadding + $leftExecutionEnd, - $durationScale - $leftExecutionEnd - ) - ]), + Attributes::create(['class' => 'interval-line']), new VerticalKeyValue( t('Interval'), $checkInterval @@ -214,12 +214,15 @@ protected function assembleBody(BaseHtmlElement $body) : (new EmptyState(t('n. a.')))->setTag('span') ) ); + + $this->style->addInlineStyleFor($intervalLine, [ + 'left' => ($hPadding + $leftExecutionEnd) . '%', + 'width' => ($durationScale - $leftExecutionEnd) . '%' + ]); + $executionLine = new HtmlElement( 'li', - Attributes::create([ - 'class' => ['interval-line', 'execution-line'], - 'style' => sprintf('left: %F%%; width: %F%%;', $hPadding, $leftExecutionEnd) - ]), + Attributes::create(['class' => ['interval-line', 'execution-line']]), new VerticalKeyValue( sprintf('%s / %s', t('Execution Time'), t('Latency')), FormattedString::create( @@ -233,6 +236,12 @@ protected function assembleBody(BaseHtmlElement $body) ) ) ); + + $this->style->addInlineStyleFor($executionLine, [ + 'left' => $hPadding . '%', + 'width' => $leftExecutionEnd . '%' + ]); + if ($executionEndTime !== null) { $executionLine->addHtml(new HtmlElement('div', Attributes::create(['class' => 'start']))); $executionLine->addHtml(new HtmlElement('div', Attributes::create(['class' => 'end']))); @@ -368,5 +377,7 @@ protected function assemble() ) )); } + + $this->addHtml($this->style); } } diff --git a/library/Icingadb/Widget/Detail/DowntimeCard.php b/library/Icingadb/Widget/Detail/DowntimeCard.php index cc2cb1928..038e6d255 100644 --- a/library/Icingadb/Widget/Detail/DowntimeCard.php +++ b/library/Icingadb/Widget/Detail/DowntimeCard.php @@ -4,9 +4,12 @@ namespace Icinga\Module\Icingadb\Widget\Detail; +use Icinga\Application\Icinga; use Icinga\Module\Icingadb\Model\Downtime; +use Icinga\Util\Csp; use ipl\Html\Attributes; use ipl\Html\HtmlElement; +use ipl\Web\Style; use ipl\Web\Widget\TimeAgo; use ipl\Web\Widget\TimeUntil; use ipl\Web\Widget\VerticalKeyValue; @@ -23,6 +26,9 @@ class DowntimeCard extends BaseHtmlElement protected $tag = 'div'; + /** @var Style */ + protected $style; + public function __construct(Downtime $downtime) { $this->downtime = $downtime; @@ -35,6 +41,10 @@ public function __construct(Downtime $downtime) } else { $this->duration = $this->end - $this->start; } + + $this->style = (new Style()) + ->setModule(Icinga::app()->getRequest()->getModuleName()) + ->setNonce(Csp::getStyleNonce()); } protected function assemble() @@ -83,17 +93,14 @@ protected function assemble() $evade = true; } - $markerFlexStart = new HtmlElement('div', Attributes::create([ - 'class' => ['highlighted', 'marker'], - 'style' => sprintf('left: %F%%', $flexStartLeft) - ])); + $markerFlexStart = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']])); + $markerFlexEnd = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']])); - $markerFlexEnd = new HtmlElement('div', Attributes::create([ - 'class' => ['highlighted', 'marker'], - 'style' => sprintf('left: %F%%', $flexEndLeft) - ])); + $this->style + ->addInlineStyleFor($markerFlexStart, ['left' => $flexStartLeft . '%']) + ->addInlineStyleFor($markerFlexEnd, ['left' => $flexEndLeft . '%']); - $markerStart->getAttributes()->remove('class', 'highlighted'); + $markerStart->getAttributes()->remove('class', 'highlighted'); // TODO:(note) these looks redudant to me $markerEnd->getAttributes()->remove('class', 'highlighted'); $scheduledEndBubble = new HtmlElement( @@ -110,19 +117,24 @@ protected function assemble() 'class' => ['progress', 'downtime-elapsed'], 'data-animate-progress' => true, 'data-start-time' => ((float) $this->downtime->start_time->format('U.u')), - 'data-end-time' => ((float) $this->downtime->end_time->format('U.u')), - 'style' => sprintf('left: %F%%; width: %F%%;', $flexStartLeft, $flexEndLeft - $flexStartLeft) + 'data-end-time' => ((float) $this->downtime->end_time->format('U.u')) ]), new HtmlElement( 'div', Attributes::create(['class' => 'bar']), new HtmlElement('div', Attributes::create(['class' => 'now'])) )); + $this->style->addInlineStyleFor($timelineProgress, [ + 'left' => $flexStartLeft . '%', + 'width' => ($flexEndLeft - $flexStartLeft) . '%' + ]); + if (time() > $this->end) { - $markerEnd->getAttributes() - ->set('style', sprintf('left: %F%%', $hPadding + $this->calcRelativeLeft($this->end))); - $scheduledEndBubble->getAttributes() - ->set('style', sprintf('left: %F%%', $hPadding + $this->calcRelativeLeft($this->end))); + $this->style + ->addInlineStyleFor($markerEnd, ['left' => ($hPadding + $this->calcRelativeLeft($this->end)) . '%']) + ->addInlineStyleFor($scheduledEndBubble, [ + 'left' => ($hPadding + $this->calcRelativeLeft($this->end)) . '%' + ]); } else { $scheduledEndBubble->getAttributes() ->add('class', 'right'); @@ -141,32 +153,23 @@ protected function assemble() $scheduledEndBubble ]); - $above->add([ - Html::tag( - 'li', - [ - 'class' => 'positioned', - 'style' => sprintf('left: %F%%', $flexStartLeft) - ], - Html::tag( - 'div', - ['class' => ['bubble', ($evade ? 'left-aligned' : null)]], - new VerticalKeyValue(t('Start'), new TimeAgo($this->downtime->start_time->getTimestamp())) - ) - ), - Html::tag( - 'li', - [ - 'class' => 'positioned', - 'style' => sprintf('left: %F%%', $flexEndLeft) - ], - Html::tag( - 'div', - ['class' => ['bubble', ($evade ? 'right-aligned' : null)]], - new VerticalKeyValue(t('End'), new TimeUntil($this->downtime->end_time->getTimestamp())) - ) - ) - ]); + $aboveStart = Html::tag('li', ['class' => 'positioned'], Html::tag( + 'div', + ['class' => ['bubble', ($evade ? 'left-aligned' : null)]], + new VerticalKeyValue(t('Start'), new TimeAgo($this->downtime->start_time->getTimestamp())) + )); + + $aboveEnd = Html::tag('li', ['class' => 'positioned'], Html::tag( + 'div', + ['class' => ['bubble', ($evade ? 'right-aligned' : null)]], + new VerticalKeyValue(t('End'), new TimeUntil($this->downtime->end_time->getTimestamp())) + )); + + $this->style + ->addInlineStyleFor($aboveStart, ['left' => $flexStartLeft . '%']) + ->addInlineStyleFor($aboveEnd, ['left' => $flexEndLeft . '%']); + + $above->add([$aboveStart, $aboveEnd]); } elseif ($this->downtime->is_flexible) { $this->addAttributes(['class' => 'flexible']); @@ -249,6 +252,8 @@ protected function assemble() $timeline, $below ]); + + $this->addHtml($this->style); } protected function calcRelativeLeft($value)