tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

AlertSummary: Basic styling 

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

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

@ -13,57 +13,70 @@ $helper = $this->getHelper('MonitoringState');
<div class="content alertsummary">
<h1><?= $this->translate('Alert summary'); ?></h1>
<h2><?= $this->translate('Notifications and problems'); ?></h2>
<div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<h2><?= $this->translate('Notifications and problems'); ?></h2>
<div>
<?= $defectChart->render(); ?>
</div>
</div>
<div class="svg-container-responsive">
<?= $defectChart->render(); ?>
</div>
<h2><?= $this->translate('Time to reaction (Ack, Recover)'); ?></h2>
<div class="svg-container-responsive">
<?= $healingChart->render(); ?>
<div class="alertsummary-flex">
<h2><?= $this->translate('Time to reaction (Ack, Recover)'); ?></h2>
<div>
<?= $healingChart->render(); ?>
</div>
</div>
</div>
<h2><?= $this->translate('Trend'); ?></h2>
<div>
<?= $this->translate('Average') ?>
<strong><?= $this->perf->avg; ?></strong>
<?= $this->translate('notifications per hour'); ?>,
<strong><?= $this->perf->last; ?></strong>
<?= $this->translate('in the last hour'); ?>.
</div>
<div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<?= $this->translate('Average') ?>
<strong><?= $this->perf->avg; ?></strong>
<?= $this->translate('notifications per hour'); ?>,
<strong><?= $this->perf->last; ?></strong>
<?= $this->translate('in the last hour'); ?>.
<div>
<?= $this->translate('Trend, problems in 24h'); ?>
(<?= $this->trend->percent; ?>%
<?= $this->translate($this->trend->trend); ?>)
<?= $this->translate('Trend for the last 24h'); ?>
(<?= $this->trend->percent; ?>%
<strong><?= $this->translate($this->trend->trend); ?></strong>)
<span>
<?php if ($this->trend->trend === 'up'): ?>
<?= $this->icon('up.png'); ?>
<?php elseif ($this->trend->trend === 'unchanged'): ?>
<?= $this->icon('next.png'); ?>
<?php else: ?>
<?= $this->icon('down.png'); ?>
<?php endif; ?>
</span>
<span>
<?php if ($this->trend->trend === 'up'): ?>
<?= $this->icon('up.png'); ?>
<?php elseif ($this->trend->trend === 'unchanged'): ?>
<?= $this->icon('next.png'); ?>
<?php else: ?>
<?= $this->icon('down.png'); ?>
<?php endif; ?>
</span>
</div>
</div>
<?php if ($this->recentAlerts): ?>
<h2><?= $this->translate('Top 5 recent alerts'); ?></h2>
<?= $this->partial('list/notifications.phtml', array(
'notifications' => $this->recentAlerts,
'compact' => true,
'inline' => true
)); ?>
<div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<?= $this->partial('list/notifications.phtml', array(
'notifications' => $this->recentAlerts,
'compact' => true,
'inline' => true
)); ?>
</div>
</div>
<?php endif; ?>
<h2><?= $this->translate('History'); ?></h2>
<?= $this->partial('list/notifications.phtml', array(
'notifications' => $this->notifications,
'compact' => true,
'inline' => true
)); ?>
<div class="alertsummary-flex-container">
<div class="alertsummary-flex">
<?= $this->partial('list/notifications.phtml', array(
'notifications' => $this->notifications,
'compact' => true,
'inline' => true
)); ?>
</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 {
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;
}