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>
|
||||
<?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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in New Issue