Add pagination control to the servicematrix

refs #4180

application/views/scripts/pivottablePagination.phtml

@@ -0,0 +1,33 @@
+<?php
+
+use Icinga\Web\Url;
+
+if ($xAxisPaginator->count() <= 1 && $yAxisPaginator->count() <= 1) {
+    return; // Display this pagination only if there are multiple pages
+}
+
+$xAxisPages = $xAxisPaginator->getPages('all');
+$yAxisPages = $yAxisPaginator->getPages('all');
+
+?>
+
+<div class="pivot-pagination">
+    <span><?= $this->translate('Navigation'); ?></span>
+    <table>
+        <tbody>
+<?php foreach ($yAxisPages->pagesInRange as $yAxisPage): ?>
+            <tr>
+<?php foreach ($xAxisPages->pagesInRange as $xAxisPage): ?>
+                <td<?= $xAxisPage === $xAxisPages->current && $yAxisPage === $yAxisPages->current ? ' class="active"' : ''; ?>>
+<?php if ($xAxisPage !== $xAxisPages->current || $yAxisPage !== $yAxisPages->current): ?>
+                    <a href="<?= Url::fromRequest()->overwriteParams(
+                        array('page' => $xAxisPage . ',' . $yAxisPage)
+                    )->getAbsoluteUrl(); ?>" title="<?= $xAxisPage . ',' . $yAxisPage; ?>"></a>
+<?php endif ?>
+                </td>
+<?php endforeach ?>
+            </tr>
+<?php endforeach ?>
+        </tbody>
+    </table>
+</div>

modules/monitoring/application/views/scripts/list/servicematrix.phtml

@@ -4,6 +4,14 @@
     <div style="margin: 1em;" class="dontprint">
         <!--<?= $this->filterBox; ?>-->Sort by <?= $this->sortControl->render($this); ?>
     </div>
+    <?= $this->partial(
+        'pivottablePagination.phtml',
+        'default',
+        array(
+            'xAxisPaginator' => $this->horizontalPaginator,
+            'yAxisPaginator' => $this->verticalPaginator
+        )
+    ); ?>
 </div>
 <?php endif ?>
 <div class="content" data-base-target="_next">

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;