diff --git a/application/controllers/CommandTransportController.php b/application/controllers/CommandTransportController.php index b0b4c327b..fe005375e 100644 --- a/application/controllers/CommandTransportController.php +++ b/application/controllers/CommandTransportController.php @@ -102,7 +102,6 @@ public function removeAction() $transportName = $this->params->getRequired('name'); $form = new ConfirmRemovalForm(); - $form->setAttrib('style', 'text-align:center;'); $form->setOnSuccess(function () use ($transportName) { (new CommandTransportConfig())->delete( 'transport', diff --git a/library/Icingadb/Widget/Detail/CheckStatistics.php b/library/Icingadb/Widget/Detail/CheckStatistics.php index f443ac134..64fef3922 100644 --- a/library/Icingadb/Widget/Detail/CheckStatistics.php +++ b/library/Icingadb/Widget/Detail/CheckStatistics.php @@ -15,7 +15,7 @@ use ipl\Html\Text; use ipl\Web\Common\Card; use ipl\Web\Widget\EmptyState; -use ipl\Web\Widget\StateBall; +use ipl\Web\Compat\StyleWithNonce; use ipl\Web\Widget\TimeAgo; use ipl\Web\Widget\TimeSince; use ipl\Web\Widget\TimeUntil; @@ -39,7 +39,6 @@ class CheckStatistics extends Card SVG; - protected $object; protected $tag = 'div'; @@ -53,6 +52,9 @@ public function __construct($object) protected function assembleBody(BaseHtmlElement $body) { + $styleElement = (new StyleWithNonce()) + ->setModule('icingadb'); + $hPadding = 10; $durationScale = 80; $checkInterval = $this->getCheckInterval(); @@ -129,7 +131,7 @@ protected function assembleBody(BaseHtmlElement $body) } } - $progressBar->getAttributes()->add('style', sprintf('width: %s%%', $leftNow)); + $styleElement->addFor($progressBar, ['width' => sprintf('%F%%', $leftNow)]); $leftExecutionEnd = $nextCheckTime !== null ? $durationScale * ( 1 - ($nextCheckTime - $executionEndTime) / ($nextCheckTime - $lastUpdateTime) @@ -143,10 +145,10 @@ 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']])); + $styleElement->addFor($markerExecutionEnd, [ + 'left' => sprintf('%F%%', $hPadding + $leftExecutionEnd) + ]); $progress = new HtmlElement('div', Attributes::create([ 'class' => ['progress', time() < $executionEndTime ? 'running' : null] @@ -183,10 +185,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']]), @@ -202,16 +201,11 @@ protected function assembleBody(BaseHtmlElement $body) ) ); + $styleElement->addFor($executionEnd, ['left' => sprintf('%F%%', $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 @@ -219,12 +213,15 @@ protected function assembleBody(BaseHtmlElement $body) : (new EmptyState(t('n. a.')))->setTag('span') ) ); + + $styleElement->addFor($intervalLine, [ + 'left' => sprintf('%F%%', $hPadding + $leftExecutionEnd), + 'width' => sprintf('%F%%', $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( @@ -238,6 +235,12 @@ protected function assembleBody(BaseHtmlElement $body) ) ) ); + + $styleElement->addFor($executionLine, [ + 'left' => sprintf('%F%%', $hPadding), + 'width' => sprintf('%F%%', $leftExecutionEnd) + ]); + if ($executionEndTime !== null) { $executionLine->addHtml(new HtmlElement('div', Attributes::create(['class' => 'start']))); $executionLine->addHtml(new HtmlElement('div', Attributes::create(['class' => 'end']))); @@ -282,7 +285,7 @@ protected function assembleBody(BaseHtmlElement $body) $nextCheck ); - $body->addHtml($above, $timeline, $below); + $body->addHtml($above, $timeline, $below, $styleElement); } /** diff --git a/library/Icingadb/Widget/Detail/DowntimeCard.php b/library/Icingadb/Widget/Detail/DowntimeCard.php index 0d85debcf..81f59dab7 100644 --- a/library/Icingadb/Widget/Detail/DowntimeCard.php +++ b/library/Icingadb/Widget/Detail/DowntimeCard.php @@ -7,6 +7,7 @@ use Icinga\Module\Icingadb\Model\Downtime; use ipl\Html\Attributes; use ipl\Html\HtmlElement; +use ipl\Web\Compat\StyleWithNonce; use ipl\Web\Widget\TimeAgo; use ipl\Web\Widget\TimeUntil; use ipl\Web\Widget\VerticalKeyValue; @@ -43,6 +44,9 @@ public function __construct(Downtime $downtime) protected function assemble() { + $styleElement = (new StyleWithNonce()) + ->setModule('icingadb'); + $timeline = Html::tag('div', ['class' => 'downtime-timeline timeline']); $hPadding = 10; @@ -87,18 +91,12 @@ protected function assemble() $evade = true; } - $markerFlexStart = new HtmlElement('div', Attributes::create([ - 'class' => ['highlighted', 'marker'], - 'style' => sprintf('left: %F%%', $flexStartLeft) - ])); - - $markerFlexEnd = new HtmlElement('div', Attributes::create([ - 'class' => ['highlighted', 'marker'], - 'style' => sprintf('left: %F%%', $flexEndLeft) - ])); + $markerFlexStart = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']])); + $markerFlexEnd = new HtmlElement('div', Attributes::create(['class' => ['highlighted', 'marker']])); - $markerStart->getAttributes()->remove('class', 'highlighted'); - $markerEnd->getAttributes()->remove('class', 'highlighted'); + $styleElement + ->addFor($markerFlexStart, ['left' => sprintf('%F%%', $flexStartLeft)]) + ->addFor($markerFlexEnd, ['left' => sprintf('%F%%', $flexEndLeft)]); $scheduledEndBubble = new HtmlElement( 'li', @@ -114,19 +112,26 @@ 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'])) )); + $styleElement->addFor($timelineProgress, [ + 'left' => sprintf('%F%%', $flexStartLeft), + 'width' => sprintf('%F%%', $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))); + $styleElement + ->addFor($markerEnd, [ + 'left' => sprintf('%F%%', $hPadding + $this->calcRelativeLeft($this->end)) + ]) + ->addFor($scheduledEndBubble, [ + 'left' => sprintf('%F%%', $hPadding + $this->calcRelativeLeft($this->end)) + ]); } else { $scheduledEndBubble->getAttributes() ->add('class', 'right'); @@ -145,32 +150,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())) + )); + + $styleElement + ->addFor($aboveStart, ['left' => sprintf('%F%%', $flexStartLeft)]) + ->addFor($aboveEnd, ['left' => sprintf('%F%%', $flexEndLeft)]); + + $above->add([$aboveStart, $aboveEnd, $styleElement]); } elseif ($this->downtime->is_flexible) { $this->addAttributes(['class' => 'flexible']); diff --git a/public/css/common.less b/public/css/common.less index d35ee203c..db4639a3e 100644 --- a/public/css/common.less +++ b/public/css/common.less @@ -403,3 +403,7 @@ div.show-more { } } } + +form[name="form_confirm_removal"] { + text-align: center; +}