Skip to content

Commit

Permalink
Apply csp to inline css style (#807)
Browse files Browse the repository at this point in the history 
## Blocked by
- Icinga/ipl-web#167
- Icinga/icingaweb2#5059
  • Loading branch information
@nilmerg
nilmerg authored Sep 8, 2023
2 parents 459db51 + f388b22 commit e92d90a
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 68 deletions.
1 change: 0 additions & 1 deletion application/controllers/CommandTransportController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
51 changes: 27 additions & 24 deletions library/Icingadb/Widget/Detail/CheckStatistics.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -39,7 +39,6 @@ class CheckStatistics extends Card
</svg>
SVG;


protected $object;

protected $tag = 'div';
Expand All @@ -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();
Expand Down Expand Up @@ -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)
Expand All @@ -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]
Expand Down Expand Up @@ -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']]),
Expand All @@ -202,29 +201,27 @@ 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
? Format::seconds($checkInterval)
: (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(
Expand All @@ -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'])));
Expand Down Expand Up @@ -282,7 +285,7 @@ protected function assembleBody(BaseHtmlElement $body)
$nextCheck
);

$body->addHtml($above, $timeline, $below);
$body->addHtml($above, $timeline, $below, $styleElement);
}

/**
Expand Down
82 changes: 39 additions & 43 deletions library/Icingadb/Widget/Detail/DowntimeCard.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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',
Expand All @@ -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');
Expand All @@ -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']);

Expand Down
4 changes: 4 additions & 0 deletions public/css/common.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,3 +403,7 @@ div.show-more {
}
}
}

form[name="form_confirm_removal"] {
text-align: center;
}

0 comments on commit e92d90a

Please sign in to comment.