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:
Eric Lippmann 2018-07-10 09:25:25 +02:00 committed by GitHub
commit 5f3da9d5e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 135 additions and 130 deletions

View File

@ -8,11 +8,11 @@ if (! $this->compact): ?>
</div>
<?php endif ?>
<div class="content processinfo grid">
<div class="content processinfo">
<div class="boxview">
<div class="box process col-1-2">
<div class="box process">
<h2 tabindex="0"><?= $this->translate('Process Info') ?></h2>
<table class="avp">
<table class="name-value-table">
<tbody>
<tr>
<th><?= $this->translate('Program Version') ?></th>
@ -75,7 +75,7 @@ if (! $this->compact): ?>
</div>
<?php endif ?>
</div>
<div class="box features col-1-2">
<div class="box features">
<h2 tabindex="0"><?= $this->translate('Feature Commands') ?></h2>
<?= $this->toggleFeaturesForm ?>
</div>

View File

@ -8,153 +8,143 @@ if (! $this->compact): ?>
</div>
<?php endif ?>
<div class="content stats grid">
<div class="content stats">
<div class="boxview">
<div class="box stats col-1-2">
<h3 tabindex="0"><?= $this->unhandledProblems ?> <?= $this->translate('Unhandled Problems:') ?>
<span class="badge state-critical"> <?= $this->unhandledProblems ?> </span>
</h3>
<table class="avp">
<div class="box stats">
<h2 tabindex="0"><?= $this->unhandledProblems ?> <?= $this->translate('Unhandled Problems:') ?></h2>
<table class="name-value-table">
<thead>
<th></th>
<th colspan="3"></th>
</thead>
<tbody>
<tr>
<th> <?= $this->translate('Service Problems:') ?> </th>
<td>
<span class="badge state-critical">
<?=
$this->qlink(
$this->unhandledServiceProblems,
'monitoring/list/services?service_problem=1&service_handled=0&sort=service_severity',
null,
array('data-base-target' => '_next')
)
?>
</span>
</td>
</tr>
<tr>
<th> <?= $this->translate('Host Problems:') ?> </th>
<td>
<span class="badge state-critical">
<?=
$this->qlink(
$this->unhandledhostProblems,
'monitoring/list/hosts?host_problem=1&host_handled=0',
null,
array('data-base-target' => '_next')
)
?>
</span>
</td>
</tr>
<tr>
<th><?= $this->translate('Service Problems:') ?></th>
<td colspan="3">
<span class="badge state-critical">
<?=
$this->qlink(
$this->unhandledServiceProblems,
'monitoring/list/services?service_problem=1&service_handled=0&sort=service_severity',
null,
array('data-base-target' => '_next')
)
?>
</span>
</td>
</tr>
<tr>
<th><?= $this->translate('Host Problems:') ?></th>
<td colspan="3">
<span class="badge state-critical">
<?=
$this->qlink(
$this->unhandledhostProblems,
'monitoring/list/hosts?host_problem=1&host_handled=0',
null,
array('data-base-target' => '_next')
)
?>
</span>
</td>
</tr>
</tbody>
</table>
<br>
<h3 tabindex="0" class="tinystatesummary" data-base-target="_next">
<h2 tabindex="0" class="tinystatesummary" data-base-target="_next">
<?php $this->stats = $hoststats ?>
<?= $this->render('list/components/hostssummary.phtml') ?>
</h3>
<table class="avp">
</h2>
<table class="name-value-table">
<thead>
<tr>
<th><strong><?= $this->translate('Runtime Variables') ?></strong></th>
<th><?= $this->translate('Host Checks') ?></th>
<th></th>
<th></th>
</tr>
<tr>
<th><?= $this->translate('Runtime Variables') ?></th>
<th colspan="3"><?= $this->translate('Host Checks') ?></th>
</tr>
</thead>
<tbody>
<tr>
<th> <?= $this->translate('Total') ?> </th>
<td> <?= $rv->total_scheduled_hosts ?> </td>
</tr>
<tr>
<th> <?= $this->translate('Scheduled') ?> </th>
<td> <?= $rv->total_scheduled_hosts ?> </td>
</tr>
<tr>
<th><?= $this->translate('Total') ?></th>
<td><?= $rv->total_scheduled_hosts ?></td>
</tr>
<tr>
<th><?= $this->translate('Scheduled') ?></th>
<td><?= $rv->total_scheduled_hosts ?></td>
</tr>
</tbody>
</table>
<br>
<h3 class="tinystatesummary" data-base-target="_next">
<h2 class="tinystatesummary" data-base-target="_next">
<?php $this->stats = $servicestats ?>
<?= $this->render('list/components/servicesummary.phtml') ?>
</h3>
<table class="avp">
</h2>
<table class="name-value-table">
<thead>
<tr>
<th><strong> <?= $this->translate('Runtime Variables') ?> </strong></th>
<th><?= $this->translate('Runtime Variables') ?></th>
<th><?= $this->translate('Service Checks') ?></th>
<th><?= $this->translate('Per Host') ?></th>
<th></th>
<th colspan="2"><?= $this->translate('Per Host') ?></th>
</tr>
</thead>
<tbody>
<tr>
<th> <?= $this->translate('Total') ?> </th>
<td> <?= $rv->total_services ?> </td>
<td> <?= sprintf('%.2f', $rv->average_services_per_host) ?> </td>
<td></td>
<th><?= $this->translate('Total') ?></th>
<td><?= $rv->total_services ?></td>
<td><?= sprintf('%.2f', $rv->average_services_per_host) ?></td>
</tr>
<tr>
<th> <?= $this->translate('Scheduled') ?> </th>
<td> <?= $rv->total_scheduled_services ?> </td>
<td> <?= sprintf('%.2f', $rv->average_scheduled_services_per_host) ?> </td>
<td></td>
<th><?= $this->translate('Scheduled') ?></th>
<td><?= $rv->total_scheduled_services ?></td>
<td><?= sprintf('%.2f', $rv->average_scheduled_services_per_host) ?></td>
</tr>
</tbody>
</table>
<br>
<h3><?= $this->translate('Active checks') ?></h3>
<table class="avp">
<h2><?= $this->translate('Active checks') ?></h2>
<table class="name-value-table">
<thead>
<tr>
<th><strong> <?= $this->translate('Check Performance') ?> </strong></th>
<th><?= $this->translate('Checks') ?></th>
<th><?= $this->translate('Latency') ?></th>
<th><?= $this->translate('Execution time') ?></th>
</tr>
<tr>
<th><?= $this->translate('Check Performance') ?></th>
<th><?= $this->translate('Checks') ?></th>
<th><?= $this->translate('Latency') ?></th>
<th><?= $this->translate('Execution time') ?></th>
</tr>
</thead>
<tbody>
<tr>
<th><?= $this->translate('Host Checks') ?></th>
<td><?= $cp->host_active_count; ?></td>
<td><?= sprintf('%.3f', $cp->host_active_latency_avg) ?>s</td>
<td><?= sprintf('%.3f', $cp->host_active_execution_avg) ?>s</td>
</tr>
<tr>
<th><?= $this->translate('Service Checks') ?></th>
<td><?= $cp->service_active_count; ?></td>
<td><?= sprintf('%.3f', $cp->service_active_latency_avg) ?>s</td>
<td><?= sprintf('%.3f', $cp->service_active_execution_avg) ?>s</td>
</tr>
<tr>
<th><?= $this->translate('Host Checks') ?></th>
<td><?= $cp->host_active_count; ?></td>
<td><?= sprintf('%.3f', $cp->host_active_latency_avg) ?>s</td>
<td><?= sprintf('%.3f', $cp->host_active_execution_avg) ?>s</td>
</tr>
<tr>
<th><?= $this->translate('Service Checks') ?></th>
<td><?= $cp->service_active_count; ?></td>
<td><?= sprintf('%.3f', $cp->service_active_latency_avg) ?>s</td>
<td><?= sprintf('%.3f', $cp->service_active_execution_avg) ?>s</td>
</tr>
</tbody>
</table>
<br>
<h3><?= $this->translate('Passive checks') ?></h3>
<table class="avp">
<h2><?= $this->translate('Passive checks') ?></h2>
<table class="name-value-table">
<thead>
<tr>
<th><strong> <?= $this->translate('Check Performance') ?> </strong></th>
<th><?= $this->translate('Passive Checks') ?></th>
<th></th>
<th></th>
</tr>
<tr>
<th><?= $this->translate('Check Performance') ?></th>
<th colspan="3"><?= $this->translate('Passive Checks') ?></th>
</tr>
</thead>
<tbody>
<tr>
<th><?= $this->translate('Host Checks') ?></th>
<td><?= $cp->host_passive_count ?></td>
</tr>
<tr>
<th><?= $this->translate('Service Checks') ?></th>
<td><?= $cp->service_passive_count ?></td>
</tr>
<tr>
<th><?= $this->translate('Host Checks') ?></th>
<td><?= $cp->host_passive_count ?></td>
</tr>
<tr>
<th><?= $this->translate('Service Checks') ?></th>
<td><?= $cp->service_passive_count ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

View File

@ -316,10 +316,12 @@ div.box.hostservicechecks th {
/* Monitoring health - PROCESS - element styles */
div.box.process {
width: 100%;
max-width: 50em;
border: 1px solid @gray-lighter;
border-left: 15px solid @gray;
min-height: 30em;
min-width: 30em;
margin-bottom: 1em;
margin-right: 1em;
}
.process div.box.header {
@ -329,19 +331,22 @@ div.box.process {
.process > .boxview > div.box {
min-height: 30em;
min-width: 30em;
}
.process h2 {
padding-bottom: 15px;
margin-top: 0;
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom:1px solid @gray-lighter;
}
.process th {
width: 50%;
text-align: right;
}
.process td {
width: 50%;
padding-left: 2em;
text-align: left;
}
@ -369,10 +374,10 @@ div.backend-not-running {
/* Monitoring health - FEATURE - element styles */
div.box.features {
width: 100%;
max-width: 50em;
border: 1px solid @gray-lighter;
border-left: 15px solid @gray;
min-height: 30em;
min-width: 30em;
}
.features div.box.header {
@ -382,11 +387,12 @@ div.box.features {
.features > .boxview > div.box {
min-height: 30em;
min-width: 30em;
}
.features h2 {
padding-bottom: 15px;
margin-top: 0;
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom:1px solid @gray-lighter;
}
@ -394,6 +400,8 @@ div.box.features {
/* Monitoring health - STATS - element styles */
div.box.stats {
width: 100%;
max-width: 50em;
border: 1px solid @gray-lighter;
border-left: 15px solid @gray;
color: @text-color;
@ -403,23 +411,30 @@ div.box.stats {
min-height: 30em;
}
.stats > .avp > tbody {
.stats > .name-value-table {
table-layout: fixed;
text-align: left;
}
.stats > table {
padding-bottom: 15px;
}
.stats > table > thead{
.stats > table > thead {
color: @gray;
}
.stats > h3 {
color: @gray;
.stats > h2 {
text-align: left;
border-bottom:1px solid @gray-lighter;
padding-bottom: 15px;
border-bottom: 1px solid @gray-lighter;
> .hosts-summary,
> .services-summary {
width: 100%;
> .state-badges {
float: right;
}
}
}
.tinystatesummary .badge {
font-weight: normal;
}
/* Monitoring timeline styles */