From 8f26f0dbf645cf12849c926ecbfa3425fe2c8702 Mon Sep 17 00:00:00 2001
From: Marius Hein <marius.hein@netways.de>
Date: Wed, 8 Oct 2014 16:17:43 +0200
Subject: [PATCH] AlertSummary: Basic styling
refs #4074
---
.../views/scripts/alertsummary/index.phtml | 91 +++++++++++--------
modules/monitoring/public/css/module.less | 24 +++++
2 files changed, 76 insertions(+), 39 deletions(-)
diff --git a/modules/monitoring/application/views/scripts/alertsummary/index.phtml b/modules/monitoring/application/views/scripts/alertsummary/index.phtml
index 9b253dad8..8e8c08e1c 100644
--- a/modules/monitoring/application/views/scripts/alertsummary/index.phtml
+++ b/modules/monitoring/application/views/scripts/alertsummary/index.phtml
@@ -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>
\ No newline at end of file
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index 5ab6d9c82..7e734bb33 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -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;
+}