tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-30 17:24:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3515 from Icinga/fix/shaky-monitoring-health-layout-3434

Browse Source 
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
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>
<?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>

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

@ -8,17 +8,19 @@ 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>
<td colspan="3">
<span class="badge state-critical">
<?=
$this->qlink(
@ -33,7 +35,7 @@ if (! $this->compact): ?>
</tr>
<tr>
<th><?= $this->translate('Host Problems:') ?></th>
<td>
<td colspan="3">
<span class="badge state-critical">
<?=
$this->qlink(
@ -48,19 +50,16 @@ if (! $this->compact): ?>
</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>
<th><?= $this->translate('Runtime Variables') ?></th>
<th colspan="3"><?= $this->translate('Host Checks') ?></th>
</tr>
</thead>
<tbody>
@ -74,19 +73,17 @@ if (! $this->compact): ?>
</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>
@ -94,23 +91,20 @@ if (! $this->compact): ?>
<th><?= $this->translate('Total') ?></th>
<td><?= $rv->total_services ?></td>
<td><?= sprintf('%.2f', $rv->average_services_per_host) ?></td>
<td></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>
</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('Check Performance') ?></th>
<th><?= $this->translate('Checks') ?></th>
<th><?= $this->translate('Latency') ?></th>
<th><?= $this->translate('Execution time') ?></th>
@ -131,16 +125,13 @@ if (! $this->compact): ?>
</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>
<th><?= $this->translate('Check Performance') ?></th>
<th colspan="3"><?= $this->translate('Passive Checks') ?></th>
</tr>
</thead>
<tbody>
@ -155,6 +146,5 @@ if (! $this->compact): ?>
</tbody>
</table>
</div>
</div>
</div>

47
modules/monitoring/public/css/module.less
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 {
color: @gray;
}
.stats > h3 {
color: @gray;
.stats > h2 {
text-align: left;
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 */