Skip to content

Commit

Permalink
Apply csp for inline css style
Browse files Browse the repository at this point in the history
  • Loading branch information
sukhwinder33445 committed Aug 17, 2023
1 parent 95b50e9 commit 5e577ee
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 62 deletions.
53 changes: 32 additions & 21 deletions library/Icingadb/Widget/Detail/CheckStatistics.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -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]
Expand Down Expand Up @@ -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']]),
Expand All @@ -197,29 +202,27 @@ 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
? Format::seconds($checkInterval)
: (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(
Expand All @@ -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'])));
Expand Down Expand Up @@ -368,5 +377,7 @@ protected function assemble()
)
));
}

$this->addHtml($this->style);
}
}
87 changes: 46 additions & 41 deletions library/Icingadb/Widget/Detail/DowntimeCard.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -23,6 +26,9 @@ class DowntimeCard extends BaseHtmlElement

protected $tag = 'div';

/** @var Style */
protected $style;

public function __construct(Downtime $downtime)
{
$this->downtime = $downtime;
Expand All @@ -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()
Expand Down Expand Up @@ -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(
Expand All @@ -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');
Expand All @@ -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']);

Expand Down Expand Up @@ -249,6 +252,8 @@ protected function assemble()
$timeline,
$below
]);

$this->addHtml($this->style);
}

protected function calcRelativeLeft($value)
Expand Down

0 comments on commit 5e577ee

Please sign in to comment.