diff --git a/application/views/scripts/pivottablePagination.phtml b/application/views/scripts/pivottablePagination.phtml new file mode 100644 index 000000000..832cba0ef --- /dev/null +++ b/application/views/scripts/pivottablePagination.phtml @@ -0,0 +1,33 @@ +count() <= 1 && $yAxisPaginator->count() <= 1) { + return; // Display this pagination only if there are multiple pages +} + +$xAxisPages = $xAxisPaginator->getPages('all'); +$yAxisPages = $yAxisPaginator->getPages('all'); + +?> + +
+ translate('Navigation'); ?> + + +pagesInRange as $yAxisPage): ?> + +pagesInRange as $xAxisPage): ?> + current && $yAxisPage === $yAxisPages->current ? ' class="active"' : ''; ?>> +current || $yAxisPage !== $yAxisPages->current): ?> + + + + + + + +
+
diff --git a/modules/monitoring/application/views/scripts/list/servicematrix.phtml b/modules/monitoring/application/views/scripts/list/servicematrix.phtml index 211afff9f..d48b0cf69 100644 --- a/modules/monitoring/application/views/scripts/list/servicematrix.phtml +++ b/modules/monitoring/application/views/scripts/list/servicematrix.phtml @@ -4,6 +4,14 @@
Sort by sortControl->render($this); ?>
+ partial( + 'pivottablePagination.phtml', + 'default', + array( + 'xAxisPaginator' => $this->horizontalPaginator, + 'yAxisPaginator' => $this->verticalPaginator + ) + ); ?>
diff --git a/public/css/icinga/monitoring-colors.less b/public/css/icinga/monitoring-colors.less index c61e4a368..6ab287ae7 100644 --- a/public/css/icinga/monitoring-colors.less +++ b/public/css/icinga/monitoring-colors.less @@ -503,6 +503,34 @@ div.box.contactgroup div.box.entry p { /* Monitoring pivot table styles */ +div.pivot-pagination { + margin: 1em; + + table { + width: 1px; // Ensures that its cells are really of fixed width + table-layout: fixed; + border-spacing: 0.2em; + border-collapse: separate; + border: 1px solid LightGrey; + border-radius: 0.3em; + + td { + padding: 0; + width: 1.7em; + height: 1.7em; + background-color: #fbfbfb; + + &:hover, &.active { + background-color: #e5e5e5; + } + + a { + padding: 10% 50%; + } + } + } +} + table.pivot { width: 1px; // Ensures that its cells are really of fixed width table-layout: fixed;