tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-29 08:44:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

AlertSummary: Basic styling

Browse Source 
refs #4074
This commit is contained in:
Marius Hein 2014-10-08 16:17:43 +02:00
parent 0825b2f071
commit 8f26f0dbf6
2 changed files with 76 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
modules/monitoring/application/views/scripts/alertsummary/index.phtml
View File

@ -13,32 +13,35 @@ $helper = $this->getHelper('MonitoringState');
<div class="content alertsummary"> <div class="content alertsummary">
<h1><?= $this->translate('Alert summary'); ?></h1> <h1><?= $this->translate('Alert summary'); ?></h1>
<div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<h2><?= $this->translate('Notifications and problems'); ?></h2> <h2><?= $this->translate('Notifications and problems'); ?></h2>
<div>
<div class="svg-container-responsive">
<?= $defectChart->render(); ?> <?= $defectChart->render(); ?>
</div> </div>
</div>
<div class="alertsummary-flex">
<h2><?= $this->translate('Time to reaction (Ack, Recover)'); ?></h2> <h2><?= $this->translate('Time to reaction (Ack, Recover)'); ?></h2>
<div>
<div class="svg-container-responsive">
<?= $healingChart->render(); ?> <?= $healingChart->render(); ?>
</div> </div>
</div>
</div>
<h2><?= $this->translate('Trend'); ?></h2> <h2><?= $this->translate('Trend'); ?></h2>
<div> <div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<?= $this->translate('Average') ?> <?= $this->translate('Average') ?>
<strong><?= $this->perf->avg; ?></strong> <strong><?= $this->perf->avg; ?></strong>
<?= $this->translate('notifications per hour'); ?>, <?= $this->translate('notifications per hour'); ?>,
<strong><?= $this->perf->last; ?></strong> <strong><?= $this->perf->last; ?></strong>
<?= $this->translate('in the last hour'); ?>. <?= $this->translate('in the last hour'); ?>.
</div>
<div> <?= $this->translate('Trend for the last 24h'); ?>
<?= $this->translate('Trend, problems in 24h'); ?>
(<?= $this->trend->percent; ?>% (<?= $this->trend->percent; ?>%
<?= $this->translate($this->trend->trend); ?>) <strong><?= $this->translate($this->trend->trend); ?></strong>)
<span> <span>
<?php if ($this->trend->trend === 'up'): ?> <?php if ($this->trend->trend === 'up'): ?>
@ -50,20 +53,30 @@ $helper = $this->getHelper('MonitoringState');
<?php endif; ?> <?php endif; ?>
</span> </span>
</div> </div>
</div>
<?php if ($this->recentAlerts): ?> <?php if ($this->recentAlerts): ?>
<h2><?= $this->translate('Top 5 recent alerts'); ?></h2> <h2><?= $this->translate('Top 5 recent alerts'); ?></h2>
<div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<?= $this->partial('list/notifications.phtml', array( <?= $this->partial('list/notifications.phtml', array(
'notifications' => $this->recentAlerts, 'notifications' => $this->recentAlerts,
'compact' => true, 'compact' => true,
'inline' => true 'inline' => true
)); ?> )); ?>
</div>
</div>
<?php endif; ?> <?php endif; ?>
<h2><?= $this->translate('History'); ?></h2> <h2><?= $this->translate('History'); ?></h2>
<div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<?= $this->partial('list/notifications.phtml', array( <?= $this->partial('list/notifications.phtml', array(
'notifications' => $this->notifications, 'notifications' => $this->notifications,
'compact' => true, 'compact' => true,
'inline' => true 'inline' => true
)); ?> )); ?>
</div> </div>
</div>
</div>

24
modules/monitoring/public/css/module.less
View File

@ -134,3 +134,27 @@ span.state.pending {
form.instance-features span.description, form.object-features span.description { form.instance-features span.description, form.object-features span.description {
display: inline; display: inline;
} }
.alertsummary-flex-container {
display: -ms-Flexbox;
-ms-box-orient: horizontal;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.alertsummary-flex {
flex: 1 1 auto;
overflow: auto;
border: 1px #333 solid;
padding: 5px;
margin: 0 10px 0 0;
border-spacing: 10px 10px;
}