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

Refine styling of the servicematrix 

refs #4180
This commit is contained in:
Johannes Meyer 2014-03-19 09:10:39 +01:00
parent 1604f4728b
commit e9ec87b0e3
3 changed files with 98 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
application/views/scripts/pivottablePagination.phtml
View File

@ -6,6 +6,7 @@ if ($xAxisPaginator->count() <= 1 && $yAxisPaginator->count() <= 1) {
return; // Display this pagination only if there are multiple pages return; // Display this pagination only if there are multiple pages
} }
$fromTo = $this->translate('%s: %d to %d of %d');
$xAxisPages = $xAxisPaginator->getPages('all'); $xAxisPages = $xAxisPaginator->getPages('all');
$yAxisPages = $yAxisPaginator->getPages('all'); $yAxisPages = $yAxisPaginator->getPages('all');
@ -22,7 +23,21 @@ $yAxisPages = $yAxisPaginator->getPages('all');
<?php if ($xAxisPage !== $xAxisPages->current || $yAxisPage !== $yAxisPages->current): ?> <?php if ($xAxisPage !== $xAxisPages->current || $yAxisPage !== $yAxisPages->current): ?>
<a href="<?= Url::fromRequest()->overwriteParams( <a href="<?= Url::fromRequest()->overwriteParams(
array('page' => $xAxisPage . ',' . $yAxisPage) array('page' => $xAxisPage . ',' . $yAxisPage)
)->getAbsoluteUrl(); ?>" title="<?= $xAxisPage . ',' . $yAxisPage; ?>"></a> )->getAbsoluteUrl(); ?>" title="<?= sprintf(
$fromTo,
$this->translate('Hosts'),
($yAxisPage - 1) * $yAxisPages->itemCountPerPage + 1,
$yAxisPage === $yAxisPages->last ? $yAxisPages->totalItemCount : $yAxisPage * $yAxisPages->itemCountPerPage,
$yAxisPages->totalItemCount
) . '; ' . sprintf(
$fromTo,
$this->translate('Services'),
($xAxisPage - 1) * $xAxisPages->itemCountPerPage + 1,
$xAxisPage === $xAxisPages->last ? $xAxisPages->totalItemCount : $xAxisPage * $xAxisPages->itemCountPerPage,
$xAxisPages->totalItemCount
); ?>"></a>
<?php else: ?>
&nbsp;
<?php endif ?> <?php endif ?>
</td> </td>
<?php endforeach ?> <?php endforeach ?>

14
modules/monitoring/application/views/scripts/list/servicematrix.phtml
View File

@ -22,9 +22,17 @@
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
<th colspan="<?= count($serviceStates); ?>">
<div>
<?php foreach (array_keys($serviceStates) as $service_description): ?> <?php foreach (array_keys($serviceStates) as $service_description): ?>
<th><span><?= $service_description; ?></span></th> <span>
<abbr title="<?= $service_description; ?>">
<?= strlen($service_description) > 18 ? substr($service_description, 0, 18) . '...' : $service_description; ?>
</abbr>
</span>
<?php endforeach ?> <?php endforeach ?>
</div>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -39,14 +47,14 @@
</th> </th>
<?php foreach (array_values($serviceStates) as $service): ?> <?php foreach (array_values($serviceStates) as $service): ?>
<?php if ($service !== null): ?> <?php if ($service !== null): ?>
<td class="state_<?= $this->monitoringState($service, 'service'); ?> <?= $service->service_handled ? 'handled' : ''; ?>"> <td>
<a href="<?= $this->href( <a href="<?= $this->href(
'monitoring/show/service', 'monitoring/show/service',
array( array(
'host' => $service->host_name, 'host' => $service->host_name,
'service' => $service->service_description 'service' => $service->service_description
) )
); ?>" title="<?= $this->escape($service->service_output); ?>"></a> ); ?>" title="<?= $this->escape($service->service_output); ?>" class="state_<?= $this->monitoringState($service, 'service'); ?> <?= $service->service_handled ? 'handled' : ''; ?>"></a>
<?php else: ?> <?php else: ?>
<td> <td>
&centerdot; &centerdot;

139
public/css/icinga/monitoring-colors.less
View File

@ -507,8 +507,6 @@ div.pivot-pagination {
margin: 1em; margin: 1em;
table { table {
width: 1px; // Ensures that its cells are really of fixed width
table-layout: fixed;
border-spacing: 0.2em; border-spacing: 0.2em;
border-collapse: separate; border-collapse: separate;
border: 1px solid LightGrey; border: 1px solid LightGrey;
@ -516,8 +514,7 @@ div.pivot-pagination {
td { td {
padding: 0; padding: 0;
width: 1.7em; line-height: 1em;
height: 1.7em;
background-color: #fbfbfb; background-color: #fbfbfb;
&:hover, &.active { &:hover, &.active {
@ -525,63 +522,65 @@ div.pivot-pagination {
} }
a { a {
padding: 10% 50%; width: 16px;
height: 16px;
display: block;
} }
} }
} }
} }
table.pivot { table.pivot {
width: 1px; // Ensures that its cells are really of fixed width
table-layout: fixed;
border-spacing: 0.2em;
border-collapse: separate;
th, td {
width: 0.5em;
}
thead { thead {
th { th {
height: 6em; height: 6em;
padding: 0 0 1em 1.4em; padding: 2px;
vertical-align: bottom; position: relative;
&:first-of-type { div {
width: 4em; top: 2px;
} left: 2px;
right: -1.5em;
position: absolute;
padding-left: 1.2em;
span { span {
font-size: 0.8em; width: 1.5em;
line-height: 2.4em; margin-right: 4px;
white-space: nowrap; margin-top: 4em;
display: inline-block; line-height: 2em;
white-space: nowrap;
display: block;
float: left;
transform: rotate(-45deg); transform: rotate(-45deg);
transform-origin: bottom left; transform-origin: bottom left;
-o-transform: rotate(-45deg); -o-transform: rotate(-45deg);
-o-transform-origin: bottom left; -o-transform-origin: bottom left;
-ms-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
-ms-transform-origin: bottom left; -ms-transform-origin: bottom left;
-moz-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
-moz-transform-origin: bottom left; -moz-transform-origin: bottom left;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-webkit-transform-origin: bottom left; -webkit-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
abbr {
font-size: 0.8em;
}
}
} }
} }
} }
tbody { tbody {
th { th {
width: 4em; padding: 0 14px 0 0;
font-size: 0.8em;
line-height: 2.2em;
padding-right: 1.2em;
a { a {
color: black; font-size: 0.8em;
text-decoration: none; text-decoration: none;
color: black;
&:hover { &:hover {
color: #666; color: #666;
@ -590,43 +589,47 @@ table.pivot {
} }
td { td {
padding: 0; min-width: 1.5em;
min-height: 1.5em;
padding: 2px;
text-align: center; text-align: center;
border-radius: 0.5em;
a { a {
padding: 20% 50%; width: 1.5em;
} height: 1.5em;
display: block;
border-radius: 0.5em;
&.state_ok { &.state_ok {
background-color: @colorOk; background-color: @colorOk;
}
&.state_pending {
background-color: @colorPending;
}
&.state_warning {
background-color: @colorWarning;
&.handled {
background-color: @colorWarningHandled;
} }
}
&.state_critical { &.state_pending {
background-color: @colorCritical; background-color: @colorPending;
&.handled {
background-color: @colorCriticalHandled;
} }
}
&.state_unknown { &.state_warning {
background-color: @colorUnknown; background-color: @colorWarning;
&.handled { &.handled {
background-color: @colorUnknownHandled; background-color: @colorWarningHandled;
}
}
&.state_critical {
background-color: @colorCritical;
&.handled {
background-color: @colorCriticalHandled;
}
}
&.state_unknown {
background-color: @colorUnknown;
&.handled {
background-color: @colorUnknownHandled;
}
} }
} }
} }