Merge pull request #3515 from Icinga/fix/shaky-monitoring-health-layout-3434
monitoring/health: Cleanup layout and make it dashboard compliant
This commit is contained in:
commit
5f3da9d5e9
|
@ -8,11 +8,11 @@ if (! $this->compact): ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
|
|
||||||
<div class="content processinfo grid">
|
<div class="content processinfo">
|
||||||
<div class="boxview">
|
<div class="boxview">
|
||||||
<div class="box process col-1-2">
|
<div class="box process">
|
||||||
<h2 tabindex="0"><?= $this->translate('Process Info') ?></h2>
|
<h2 tabindex="0"><?= $this->translate('Process Info') ?></h2>
|
||||||
<table class="avp">
|
<table class="name-value-table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th><?= $this->translate('Program Version') ?></th>
|
<th><?= $this->translate('Program Version') ?></th>
|
||||||
|
@ -75,7 +75,7 @@ if (! $this->compact): ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="box features col-1-2">
|
<div class="box features">
|
||||||
<h2 tabindex="0"><?= $this->translate('Feature Commands') ?></h2>
|
<h2 tabindex="0"><?= $this->translate('Feature Commands') ?></h2>
|
||||||
<?= $this->toggleFeaturesForm ?>
|
<?= $this->toggleFeaturesForm ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,153 +8,143 @@ if (! $this->compact): ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
|
|
||||||
<div class="content stats grid">
|
<div class="content stats">
|
||||||
<div class="boxview">
|
<div class="boxview">
|
||||||
<div class="box stats col-1-2">
|
<div class="box stats">
|
||||||
<h3 tabindex="0"><?= $this->unhandledProblems ?> <?= $this->translate('Unhandled Problems:') ?>
|
<h2 tabindex="0"><?= $this->unhandledProblems ?> <?= $this->translate('Unhandled Problems:') ?></h2>
|
||||||
<span class="badge state-critical"> <?= $this->unhandledProblems ?> </span>
|
<table class="name-value-table">
|
||||||
</h3>
|
<thead>
|
||||||
<table class="avp">
|
<th></th>
|
||||||
|
<th colspan="3"></th>
|
||||||
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th> <?= $this->translate('Service Problems:') ?> </th>
|
<th><?= $this->translate('Service Problems:') ?></th>
|
||||||
<td>
|
<td colspan="3">
|
||||||
<span class="badge state-critical">
|
<span class="badge state-critical">
|
||||||
<?=
|
<?=
|
||||||
$this->qlink(
|
$this->qlink(
|
||||||
$this->unhandledServiceProblems,
|
$this->unhandledServiceProblems,
|
||||||
'monitoring/list/services?service_problem=1&service_handled=0&sort=service_severity',
|
'monitoring/list/services?service_problem=1&service_handled=0&sort=service_severity',
|
||||||
null,
|
null,
|
||||||
array('data-base-target' => '_next')
|
array('data-base-target' => '_next')
|
||||||
)
|
)
|
||||||
?>
|
?>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th> <?= $this->translate('Host Problems:') ?> </th>
|
<th><?= $this->translate('Host Problems:') ?></th>
|
||||||
<td>
|
<td colspan="3">
|
||||||
<span class="badge state-critical">
|
<span class="badge state-critical">
|
||||||
<?=
|
<?=
|
||||||
$this->qlink(
|
$this->qlink(
|
||||||
$this->unhandledhostProblems,
|
$this->unhandledhostProblems,
|
||||||
'monitoring/list/hosts?host_problem=1&host_handled=0',
|
'monitoring/list/hosts?host_problem=1&host_handled=0',
|
||||||
null,
|
null,
|
||||||
array('data-base-target' => '_next')
|
array('data-base-target' => '_next')
|
||||||
)
|
)
|
||||||
?>
|
?>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<br>
|
|
||||||
|
|
||||||
<h3 tabindex="0" class="tinystatesummary" data-base-target="_next">
|
<h2 tabindex="0" class="tinystatesummary" data-base-target="_next">
|
||||||
<?php $this->stats = $hoststats ?>
|
<?php $this->stats = $hoststats ?>
|
||||||
<?= $this->render('list/components/hostssummary.phtml') ?>
|
<?= $this->render('list/components/hostssummary.phtml') ?>
|
||||||
</h3>
|
</h2>
|
||||||
<table class="avp">
|
<table class="name-value-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th><strong><?= $this->translate('Runtime Variables') ?></strong></th>
|
<th><?= $this->translate('Runtime Variables') ?></th>
|
||||||
<th><?= $this->translate('Host Checks') ?></th>
|
<th colspan="3"><?= $this->translate('Host Checks') ?></th>
|
||||||
<th></th>
|
</tr>
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th> <?= $this->translate('Total') ?> </th>
|
<th><?= $this->translate('Total') ?></th>
|
||||||
<td> <?= $rv->total_scheduled_hosts ?> </td>
|
<td><?= $rv->total_scheduled_hosts ?></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th> <?= $this->translate('Scheduled') ?> </th>
|
<th><?= $this->translate('Scheduled') ?></th>
|
||||||
<td> <?= $rv->total_scheduled_hosts ?> </td>
|
<td><?= $rv->total_scheduled_hosts ?></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<br>
|
|
||||||
|
|
||||||
<h3 class="tinystatesummary" data-base-target="_next">
|
<h2 class="tinystatesummary" data-base-target="_next">
|
||||||
<?php $this->stats = $servicestats ?>
|
<?php $this->stats = $servicestats ?>
|
||||||
<?= $this->render('list/components/servicesummary.phtml') ?>
|
<?= $this->render('list/components/servicesummary.phtml') ?>
|
||||||
</h3>
|
</h2>
|
||||||
<table class="avp">
|
<table class="name-value-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th><strong> <?= $this->translate('Runtime Variables') ?> </strong></th>
|
<th><?= $this->translate('Runtime Variables') ?></th>
|
||||||
<th><?= $this->translate('Service Checks') ?></th>
|
<th><?= $this->translate('Service Checks') ?></th>
|
||||||
<th><?= $this->translate('Per Host') ?></th>
|
<th colspan="2"><?= $this->translate('Per Host') ?></th>
|
||||||
<th></th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th> <?= $this->translate('Total') ?> </th>
|
<th><?= $this->translate('Total') ?></th>
|
||||||
<td> <?= $rv->total_services ?> </td>
|
<td><?= $rv->total_services ?></td>
|
||||||
<td> <?= sprintf('%.2f', $rv->average_services_per_host) ?> </td>
|
<td><?= sprintf('%.2f', $rv->average_services_per_host) ?></td>
|
||||||
<td></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th> <?= $this->translate('Scheduled') ?> </th>
|
<th><?= $this->translate('Scheduled') ?></th>
|
||||||
<td> <?= $rv->total_scheduled_services ?> </td>
|
<td><?= $rv->total_scheduled_services ?></td>
|
||||||
<td> <?= sprintf('%.2f', $rv->average_scheduled_services_per_host) ?> </td>
|
<td><?= sprintf('%.2f', $rv->average_scheduled_services_per_host) ?></td>
|
||||||
<td></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<br>
|
|
||||||
|
|
||||||
<h3><?= $this->translate('Active checks') ?></h3>
|
<h2><?= $this->translate('Active checks') ?></h2>
|
||||||
<table class="avp">
|
<table class="name-value-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th><strong> <?= $this->translate('Check Performance') ?> </strong></th>
|
<th><?= $this->translate('Check Performance') ?></th>
|
||||||
<th><?= $this->translate('Checks') ?></th>
|
<th><?= $this->translate('Checks') ?></th>
|
||||||
<th><?= $this->translate('Latency') ?></th>
|
<th><?= $this->translate('Latency') ?></th>
|
||||||
<th><?= $this->translate('Execution time') ?></th>
|
<th><?= $this->translate('Execution time') ?></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th><?= $this->translate('Host Checks') ?></th>
|
<th><?= $this->translate('Host Checks') ?></th>
|
||||||
<td><?= $cp->host_active_count; ?></td>
|
<td><?= $cp->host_active_count; ?></td>
|
||||||
<td><?= sprintf('%.3f', $cp->host_active_latency_avg) ?>s</td>
|
<td><?= sprintf('%.3f', $cp->host_active_latency_avg) ?>s</td>
|
||||||
<td><?= sprintf('%.3f', $cp->host_active_execution_avg) ?>s</td>
|
<td><?= sprintf('%.3f', $cp->host_active_execution_avg) ?>s</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th><?= $this->translate('Service Checks') ?></th>
|
<th><?= $this->translate('Service Checks') ?></th>
|
||||||
<td><?= $cp->service_active_count; ?></td>
|
<td><?= $cp->service_active_count; ?></td>
|
||||||
<td><?= sprintf('%.3f', $cp->service_active_latency_avg) ?>s</td>
|
<td><?= sprintf('%.3f', $cp->service_active_latency_avg) ?>s</td>
|
||||||
<td><?= sprintf('%.3f', $cp->service_active_execution_avg) ?>s</td>
|
<td><?= sprintf('%.3f', $cp->service_active_execution_avg) ?>s</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<br>
|
|
||||||
|
|
||||||
<h3><?= $this->translate('Passive checks') ?></h3>
|
<h2><?= $this->translate('Passive checks') ?></h2>
|
||||||
<table class="avp">
|
<table class="name-value-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th><strong> <?= $this->translate('Check Performance') ?> </strong></th>
|
<th><?= $this->translate('Check Performance') ?></th>
|
||||||
<th><?= $this->translate('Passive Checks') ?></th>
|
<th colspan="3"><?= $this->translate('Passive Checks') ?></th>
|
||||||
<th></th>
|
</tr>
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th><?= $this->translate('Host Checks') ?></th>
|
<th><?= $this->translate('Host Checks') ?></th>
|
||||||
<td><?= $cp->host_passive_count ?></td>
|
<td><?= $cp->host_passive_count ?></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th><?= $this->translate('Service Checks') ?></th>
|
<th><?= $this->translate('Service Checks') ?></th>
|
||||||
<td><?= $cp->service_passive_count ?></td>
|
<td><?= $cp->service_passive_count ?></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -316,10 +316,12 @@ div.box.hostservicechecks th {
|
||||||
/* Monitoring health - PROCESS - element styles */
|
/* Monitoring health - PROCESS - element styles */
|
||||||
|
|
||||||
div.box.process {
|
div.box.process {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 50em;
|
||||||
border: 1px solid @gray-lighter;
|
border: 1px solid @gray-lighter;
|
||||||
border-left: 15px solid @gray;
|
border-left: 15px solid @gray;
|
||||||
min-height: 30em;
|
margin-bottom: 1em;
|
||||||
min-width: 30em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process div.box.header {
|
.process div.box.header {
|
||||||
|
@ -329,19 +331,22 @@ div.box.process {
|
||||||
|
|
||||||
.process > .boxview > div.box {
|
.process > .boxview > div.box {
|
||||||
min-height: 30em;
|
min-height: 30em;
|
||||||
min-width: 30em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.process h2 {
|
.process h2 {
|
||||||
padding-bottom: 15px;
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
border-bottom:1px solid @gray-lighter;
|
border-bottom:1px solid @gray-lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process th {
|
.process th {
|
||||||
|
width: 50%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.process td {
|
.process td {
|
||||||
|
width: 50%;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
@ -369,10 +374,10 @@ div.backend-not-running {
|
||||||
/* Monitoring health - FEATURE - element styles */
|
/* Monitoring health - FEATURE - element styles */
|
||||||
|
|
||||||
div.box.features {
|
div.box.features {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 50em;
|
||||||
border: 1px solid @gray-lighter;
|
border: 1px solid @gray-lighter;
|
||||||
border-left: 15px solid @gray;
|
border-left: 15px solid @gray;
|
||||||
min-height: 30em;
|
|
||||||
min-width: 30em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.features div.box.header {
|
.features div.box.header {
|
||||||
|
@ -382,11 +387,12 @@ div.box.features {
|
||||||
|
|
||||||
.features > .boxview > div.box {
|
.features > .boxview > div.box {
|
||||||
min-height: 30em;
|
min-height: 30em;
|
||||||
min-width: 30em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.features h2 {
|
.features h2 {
|
||||||
padding-bottom: 15px;
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
border-bottom:1px solid @gray-lighter;
|
border-bottom:1px solid @gray-lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -394,6 +400,8 @@ div.box.features {
|
||||||
/* Monitoring health - STATS - element styles */
|
/* Monitoring health - STATS - element styles */
|
||||||
|
|
||||||
div.box.stats {
|
div.box.stats {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 50em;
|
||||||
border: 1px solid @gray-lighter;
|
border: 1px solid @gray-lighter;
|
||||||
border-left: 15px solid @gray;
|
border-left: 15px solid @gray;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
|
@ -403,23 +411,30 @@ div.box.stats {
|
||||||
min-height: 30em;
|
min-height: 30em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats > .avp > tbody {
|
.stats > .name-value-table {
|
||||||
|
table-layout: fixed;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats > table {
|
.stats > table > thead {
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats > table > thead{
|
|
||||||
color: @gray;
|
color: @gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats > h3 {
|
.stats > h2 {
|
||||||
color: @gray;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom:1px solid @gray-lighter;
|
border-bottom: 1px solid @gray-lighter;
|
||||||
padding-bottom: 15px;
|
|
||||||
|
> .hosts-summary,
|
||||||
|
> .services-summary {
|
||||||
|
width: 100%;
|
||||||
|
> .state-badges {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tinystatesummary .badge {
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Monitoring timeline styles */
|
/* Monitoring timeline styles */
|
||||||
|
|
Loading…
Reference in New Issue