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

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

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