tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
parent b88c6b0a6e 12b17d4b0a
commit 5f3da9d5e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 135 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
modules/monitoring/application/views/scripts/health/info.phtml
View File

@ -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>

88
modules/monitoring/application/views/scripts/health/stats.phtml
View File

@ -8,17 +8,19 @@ 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(
@ -32,8 +34,8 @@ if (! $this->compact): ?>
</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(
@ -48,69 +50,61 @@ if (! $this->compact): ?>
</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>
<th></th>
</tr> </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>
@ -131,16 +125,13 @@ if (! $this->compact): ?>
</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>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -155,6 +146,5 @@ if (! $this->compact): ?>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>

51
modules/monitoring/public/css/module.less
View File

@ -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 */