tatical/index: Use an `ul` for the legends and render real links

refs #2529
refs #3804
This commit is contained in:
Johannes Meyer 2019-07-04 14:49:53 +02:00
parent c28155408f
commit 1aca142e1a
2 changed files with 116 additions and 98 deletions

View File

@ -1,4 +1,4 @@
<?php if (!$this->compact): ?>
<?php if (! $this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
<?= $this->filterEditor ?>
@ -15,116 +15,128 @@
<div class="donut">
<?= $hostStatusSummaryChart ?>
</div>
<table class="donut-table">
<tbody>
<ul class="donut-legend">
<?php if ($statusSummary->hosts_up): ?>
<tr href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<th class="state state-ok badge"><?= $statusSummary->hosts_up ?></th>
<td><?= $this->translate('Up') ?></td>
</tr>
<?php endif;
if ($statusSummary->hosts_down_handled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 1, 'host_handled' => 1, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<th class="state state-critical handled badge"><?= $statusSummary->hosts_down_handled ?></th>
<td><?= $this->translate('Down') ?> (<?= $this->translate('Handled') ?>)</td>
</tr>
<?php endif;
if ($statusSummary->hosts_down_unhandled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 1, 'host_handled' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<th class="state state-critical badge"><?= $statusSummary->hosts_down_unhandled ?></th>
<td><?= $this->translate('Down') ?></td>
</tr>
<?php endif;
if ($statusSummary->hosts_unreachable_handled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 2, 'host_handled' => 1, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<th class="state state-unreachable handled badge"><?= $statusSummary->hosts_unreachable_handled ?></th>
<td><?= $this->translate('Unreachable') ?> (<?= $this->translate('Handled') ?>)</td>
</tr>
<?php endif;
if ($statusSummary->hosts_unreachable_unhandled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 2, 'host_handled' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<th class="state state-unreachable badge"><?= $statusSummary->hosts_unreachable_unhandled ?></th>
<td><?= $this->translate('Unreachable') ?></td>
</tr>
<?php endif;
if ($statusSummary->hosts_pending):?>
<tr href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 99, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<th class="state state-pending badge"><?= $statusSummary->hosts_pending ?></th>
<td><?= $this->translate('Pending') ?></td>
</tr>
<?php endif;
if ($statusSummary->hosts_not_checked):?>
<tr href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_active_checks_enabled' => 0, 'host_passive_checks_enabled' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<th class="state slice-state-not-checked badge"><?= $statusSummary->hosts_not_checked ?></th>
<td><?= $this->translate('Not Checked') ?></td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<span class="state state-ok badge"><?= $statusSummary->hosts_up ?></span><?= $this->translate('Up') ?>
</a>
</li>
<?php endif ?>
</tbody>
</table>
<?php if ($statusSummary->hosts_down_handled): ?>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 1, 'host_handled' => 1, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<span class="state state-critical handled badge"><?= $statusSummary->hosts_down_handled ?></span><?= $this->translate('Down') ?> (<?= $this->translate('Handled') ?>)
</a>
</li>
<?php endif ?>
<?php if ($statusSummary->hosts_down_unhandled): ?>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 1, 'host_handled' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<span class="state state-critical badge"><?= $statusSummary->hosts_down_unhandled ?></span><?= $this->translate('Down') ?>
</a>
</li>
<?php endif ?>
<?php if ($statusSummary->hosts_unreachable_handled): ?>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 2, 'host_handled' => 1, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<span class="state state-unreachable handled badge"><?= $statusSummary->hosts_unreachable_handled ?></span><?= $this->translate('Unreachable') ?> (<?= $this->translate('Handled') ?>)
</a>
</li>
<?php endif ?>
<?php if ($statusSummary->hosts_unreachable_unhandled): ?>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 2, 'host_handled' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<span class="state state-unreachable badge"><?= $statusSummary->hosts_unreachable_unhandled ?></span><?= $this->translate('Unreachable') ?>
</a>
</li>
<?php endif ?>
<?php if ($statusSummary->hosts_pending): ?>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_state' => 99, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<span class="state state-pending badge"><?= $statusSummary->hosts_pending ?></span><?= $this->translate('Pending') ?>
</a>
</li>
<?php endif ?>
<?php if ($statusSummary->hosts_not_checked): ?>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/hosts', array('host_active_checks_enabled' => 0, 'host_passive_checks_enabled' => 0, 'sort' => 'host_last_check', 'dir' => 'asc')) ?>">
<span class="state slice-state-not-checked badge"><?= $statusSummary->hosts_not_checked ?></span><?= $this->translate('Not Checked') ?>
</a>
</li>
<?php endif ?>
</ul>
</div>
<div class="donut-container">
<h2><?= $this->translate('Service Summary') ?></h2>
<div class="donut">
<?= $serviceStatusSummaryChart ?>
</div>
<table class="donut-table">
<tbody>
<ul class="donut-legend">
<?php if ($statusSummary->services_ok):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-ok badge"><?= $statusSummary->services_ok ?></th>
<td><?= $this->translate('Ok') ?></td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-ok badge"><?= $statusSummary->services_ok ?></span><?= $this->translate('Ok') ?>
</a>
</li>
<?php endif;
if ($statusSummary->services_warning_handled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 1, 'service_handled' => 1, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-warning handled badge"><?= $statusSummary->services_warning_handled ?></th>
<td><?= $this->translate('Warning') ?> (<?= $this->translate('Handled') ?>)</td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 1, 'service_handled' => 1, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-warning handled badge"><?= $statusSummary->services_warning_handled ?></span><?= $this->translate('Warning') ?> (<?= $this->translate('Handled') ?>)
</a>
</li>
<?php endif;
if ($statusSummary->services_warning_unhandled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 1, 'service_handled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-warning badge"><?= $statusSummary->services_warning_unhandled ?></th>
<td><?= $this->translate('Warning') ?></td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 1, 'service_handled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-warning badge"><?= $statusSummary->services_warning_unhandled ?></span><?= $this->translate('Warning') ?>
</a>
</li>
<?php endif;
if ($statusSummary->services_critical_handled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 2, 'service_handled' => 1, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-critical handled badge"><?= $statusSummary->services_critical_handled ?></th>
<td><?= $this->translate('Critical') ?> (<?= $this->translate('Handled') ?>)</td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 2, 'service_handled' => 1, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-critical handled badge"><?= $statusSummary->services_critical_handled ?></span><?= $this->translate('Critical') ?> (<?= $this->translate('Handled') ?>)
</a>
</li>
<?php endif;
if ($statusSummary->services_critical_unhandled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 2, 'service_handled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-critical badge"><?= $statusSummary->services_critical_unhandled ?></th>
<td><?= $this->translate('Critical') ?></td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 2, 'service_handled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-critical badge"><?= $statusSummary->services_critical_unhandled ?></span><?= $this->translate('Critical') ?>
</a>
</li>
<?php endif;
if ($statusSummary->services_unknown_handled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 3, 'service_handled' => 1, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-unknown handled badge"><?= $statusSummary->services_unknown_handled ?></th>
<td><?= $this->translate('Unknown') ?> (<?= $this->translate('Handled') ?>)</td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 3, 'service_handled' => 1, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-unknown handled badge"><?= $statusSummary->services_unknown_handled ?></span><?= $this->translate('Unknown') ?> (<?= $this->translate('Handled') ?>)
</a>
</li>
<?php endif;
if ($statusSummary->services_unknown_unhandled):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 3, 'service_handled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-unknown badge"><?= $statusSummary->services_unknown_unhandled ?></th>
<td><?= $this->translate('Unknown') ?></td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 3, 'service_handled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-unknown badge"><?= $statusSummary->services_unknown_unhandled ?></span><?= $this->translate('Unknown') ?>
</a>
</li>
<?php endif;
if ($statusSummary->services_pending):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 99, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state state-pending badge"><?= $statusSummary->services_pending ?></th>
<td><?= $this->translate('Pending') ?></td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_state' => 99, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state state-pending badge"><?= $statusSummary->services_pending ?></span><?= $this->translate('Pending') ?>
</a>
</li>
<?php endif;
if ($statusSummary->services_not_checked):?>
<tr href="<?= $this->filteredUrl('monitoring/list/services', array('service_active_checks_enabled' => 0, 'service_passive_checks_enabled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<th class="state slice-state-not-checked badge"><?= $statusSummary->services_not_checked ?></th>
<td><?= $this->translate('Not Checked') ?></td>
</tr>
<li>
<a href="<?= $this->filteredUrl('monitoring/list/services', array('service_active_checks_enabled' => 0, 'service_passive_checks_enabled' => 0, 'sort' => 'service_last_check', 'dir' => 'asc')) ?>">
<span class="state slice-state-not-checked badge"><?= $statusSummary->services_not_checked ?></span><?= $this->translate('Not Checked') ?>
</a>
</li>
<?php endif?>
</tbody>
</table>
</ul>
</div>
</div>
</div>

View File

@ -491,22 +491,28 @@ ul.tree li a.error:hover {
}
.donut-container {
display: inline-block;
width: 36em;
height: 36em;
position: relative;
float: left;
}
.donut-table {
max-width: 45%;
display: inline-block;
position: absolute;
top: 23em;
left: 17.5em;
.donut-legend {
width: 50%;
padding: 0;
margin: 0 0 0 auto;
list-style-type: none;
& > tbody > tr:hover {
text-decoration: underline;
cursor: pointer;
li {
vertical-align: middle;
&:not(:last-child) {
margin-bottom: .5em;
}
.badge {
font-weight: bold;
margin-right: .5em;
vertical-align: initial;
}
}
}