Make "hosts" and "services" views responsive

This commit is contained in:
Matthias Jentsch 2014-10-01 09:24:52 +02:00
parent bbee06b57f
commit f188bf6b9c
5 changed files with 78 additions and 57 deletions

View File

@ -43,6 +43,13 @@ class Monitoring_HostsController extends Controller
public function showAction() public function showAction()
{ {
$this->getTabs()->add(
'show',
array(
'title' => t('Hosts'),
'url' => Url::fromRequest()
)
)->activate('show');
$this->setAutorefreshInterval(15); $this->setAutorefreshInterval(15);
$checkNowForm = new CheckNowCommandForm(); $checkNowForm = new CheckNowCommandForm();
$checkNowForm $checkNowForm

View File

@ -43,6 +43,13 @@ class Monitoring_ServicesController extends Controller
public function showAction() public function showAction()
{ {
$this->getTabs()->add(
'show',
array(
'title' => t('Services'),
'url' => Url::fromRequest()
)
)->activate('show');
$this->setAutorefreshInterval(15); $this->setAutorefreshInterval(15);
$checkNowForm = new CheckNowCommandForm(); $checkNowForm = new CheckNowCommandForm();
$checkNowForm $checkNowForm

View File

@ -5,26 +5,23 @@
<?php if (count($objects) === 0): ?> <?php if (count($objects) === 0): ?>
<?= $this->translate('No hosts matching the filter') ?> <?= $this->translate('No hosts matching the filter') ?>
<?php else: ?> <?php else: ?>
<h1><?= sprintf($this->translate('Summary For %u Hosts'), count($objects)) ?></h1> <div class="hbox-item">
<table style="width: 100%; font-size: 0.8em;"> <b><?= sprintf($this->translate('Hosts (%u)'), array_sum(array_values($hostStates))) ?></b>
<tr> </div>
<th colspan="2"><?= sprintf($this->translate('%u Hosts'), array_sum(array_values($hostStates))) ?></th> <div class="hbox-item">
</tr>
<tr>
<td align="center">
<?= $this->hostStatesPieChart ?> <?= $this->hostStatesPieChart ?>
</td> </div>
<td> <div class="hbox-item" style="font-size: 14px">
<?php <?php foreach (array_filter($hostStates) as $text => $count) {
echo sprintf('%s: %u <br>', strtoupper($text), $count);
foreach (array_filter($hostStates) as $text => $count) { } ?>
echo sprintf('%s: %u<br>', strtoupper($text), $count); </div>
}
<h3>
<?= sprintf($this->translate('%u Hosts'),
count($objects))
?> ?>
</td> </h3>
</tr>
</table>
<div> <div>
<a href="<?= $listAllLink ?>" title="<?= $this->translate('List all') ?>"> <a href="<?= $listAllLink ?>" title="<?= $this->translate('List all') ?>">
@ -32,8 +29,6 @@
</a> </a>
</div> </div>
<hr>
<div> <div>
<?= $checkNowForm ?> <?= $checkNowForm ?>
</div> </div>
@ -53,7 +48,7 @@
</div> </div>
<?php if (! empty($unhandledObjects)): ?> <?php if (! empty($unhandledObjects)): ?>
<h2> <h3>
<?= sprintf( <?= sprintf(
$this->translatePlural( $this->translatePlural(
'%u Unhandled Host Problem', '%u Unhandled Host Problem',
@ -62,7 +57,7 @@
), ),
count($unhandledObjects) count($unhandledObjects)
) ?> ) ?>
</h2> </h3>
<div> <div>
<a href="<?= $downtimeUnhandledLink ?>" <a href="<?= $downtimeUnhandledLink ?>"
title="<?= $this->translate('Schedule downtimes for unhandled problem hosts') ?>"> title="<?= $this->translate('Schedule downtimes for unhandled problem hosts') ?>">

View File

@ -5,39 +5,34 @@
<?php if (count($objects) === 0): ?> <?php if (count($objects) === 0): ?>
<?= $this->translate('No services matching the filter') ?> <?= $this->translate('No services matching the filter') ?>
<?php else: ?> <?php else: ?>
<h1><?= sprintf($this->translate('Summary For %u Services'), count($objects)) ?></h1>
<table style="width: 100%; font-size: 0.8em;"> <div class="hbox">
<tr> <div class="hbox-item" style="width: 6em;">
<th colspan="2"><?= sprintf($this->translate('%u Services'), array_sum(array_values($serviceStates))) ?></th> <b><?= sprintf($this->translate('Services (%u)'), array_sum(array_values($serviceStates))) ?></b>
<th colspan="2"><?= sprintf($this->translate('%u Hosts'), array_sum(array_values($hostStates))) ?></th> </div>
</tr> <div class="hbox-item">
<tr>
<td align="center">
<?= $this->serviceStatesPieChart ?> <?= $this->serviceStatesPieChart ?>
</td> </div>
<td> <div class="hbox-item" style="font-size: 14px">
<?php <?php foreach (array_filter($serviceStates) as $text => $count) {
echo sprintf(' %s: %u <br>', strtoupper($text), $count);
} ?>
</div>
</div>
foreach (array_filter($serviceStates) as $text => $count) { <div class="hbox">
echo sprintf('%s: %u<br>', strtoupper($text), $count); <div class="hbox-item" style="width: 6em;">
} <b><?= sprintf($this->translate('Hosts (%u)'), array_sum(array_values($hostStates))) ?></b>
</div>
?> <div class="hbox-item">
</td>
<td align="center">
<?= $this->hostStatesPieChart ?> <?= $this->hostStatesPieChart ?>
</td> </div>
<td> <div class="hbox-item" style="font-size: 14px">
<?php <?php foreach (array_filter($hostStates) as $text => $count) {
echo sprintf('%s: %u <br>', strtoupper($text), $count);
foreach (array_filter($hostStates) as $text => $count) { } ?>
echo sprintf('%s: %u<br>', strtoupper($text), $count); </div>
} </div>
?>
</td>
</tr>
</table>
<div> <div>
<a href="<?= $listAllLink ?>" title="<?= $this->translate('List all') ?>"> <a href="<?= $listAllLink ?>" title="<?= $this->translate('List all') ?>">
@ -45,7 +40,6 @@
</a> </a>
</div> </div>
<hr>
<div> <div>
<?= $checkNowForm ?> <?= $checkNowForm ?>
@ -66,7 +60,7 @@
</div> </div>
<?php if (! empty($unhandledObjects)): ?> <?php if (! empty($unhandledObjects)): ?>
<h2> <h3>
<?= sprintf( <?= sprintf(
$this->translatePlural( $this->translatePlural(
'%u Unhandled Service Problem', '%u Unhandled Service Problem',
@ -75,7 +69,7 @@
), ),
count($unhandledObjects) count($unhandledObjects)
) ?> ) ?>
</h2> </h3>
<div> <div>
<a href="<?= $downtimeUnhandledLink ?>" <a href="<?= $downtimeUnhandledLink ?>"
title="<?= $this->translate('Schedule downtimes for unhandled problem services') ?>"> title="<?= $this->translate('Schedule downtimes for unhandled problem services') ?>">

View File

@ -331,3 +331,21 @@ html {
font-weight: bold; font-weight: bold;
color: white; color: white;
} }
.hbox {
display: inline-block;
}
.hbox-item {
display: inline-block;
vertical-align: top;
margin-bottom: 0.25em;
margin-left: 1em;
margin-right: 1em;
}
.hbox-spacer {
display: inline-block;
vertical-align: top;
width: 2em;
}