Replace navigation of the service matrix and rename it to service grid

fixes #6180

application/views/scripts/joystickPagination.phtml

@@ -0,0 +1,99 @@
+<?php
+
+use Icinga\Web\Url;
+
+if ($xAxisPaginator->count() <= 1 && $yAxisPaginator->count() <= 1) {
+    return; // Display this pagination only if there are multiple pages
+}
+
+$fromTo = t('%s: %d to %d of %d');
+$xAxisPages = $xAxisPaginator->getPages('all');
+$yAxisPages = $yAxisPaginator->getPages('all');
+
+$totalYAxisPages = $yAxisPaginator->count();
+$currentYAxisPage = $yAxisPaginator->getCurrentPageNumber();
+$prevYAxisPage = $currentYAxisPage > 1 ? $currentYAxisPage - 1 : null;
+$nextYAxisPage = $currentYAxisPage < $totalYAxisPages ? $currentYAxisPage + 1 : null;
+
+$totalXAxisPages = $xAxisPaginator->count();
+$currentXAxisPage = $xAxisPaginator->getCurrentPageNumber();
+$prevXAxisPage = $currentXAxisPage > 1 ? $currentXAxisPage - 1 : null;
+$nextXAxisPage = $currentXAxisPage < $totalXAxisPages ? $currentXAxisPage + 1 : null;
+
+?>
+
+<table class="joystick-pagination">
+  <tbody>
+    <tr>
+      <td>&nbsp;</td>
+      <td>
+      <?php if ($prevYAxisPage): ?>
+        <a href="<?= Url::fromRequest()->overwriteParams(array(
+          'page' => $currentXAxisPage . ',' . $prevYAxisPage
+        ))->getAbsoluteUrl(); ?>" title="<?= sprintf(
+          $fromTo,
+          t('Hosts'),
+          ($prevYAxisPage - 1) * $yAxisPages->itemCountPerPage + 1,
+          $prevYAxisPage * $yAxisPages->itemCountPerPage,
+          $yAxisPages->totalItemCount
+        ); ?>"><?= $this->icon('up_petrol.png'); ?></a>
+      <?php else: ?>
+        <?= $this->icon('up.png'); ?>
+      <?php endif ?>
+      </td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td>
+      <?php if ($prevXAxisPage): ?>
+        <a href="<?= Url::fromRequest()->overwriteParams(array(
+          'page' => $prevXAxisPage . ',' . $currentYAxisPage
+        ))->getAbsoluteUrl(); ?>" title="<?= sprintf(
+          $fromTo,
+          t('Services'),
+          ($prevXAxisPage - 1) * $xAxisPages->itemCountPerPage + 1,
+          $prevXAxisPage * $xAxisPages->itemCountPerPage,
+          $xAxisPages->totalItemCount
+        ); ?>"><?= $this->icon('prev_petrol.png'); ?></a>
+      <?php else: ?>
+        <?= $this->icon('prev.png'); ?>
+      <?php endif ?>
+      </td>
+      <td>&nbsp;</td>
+      <td>
+      <?php if ($nextXAxisPage): ?>
+        <a href="<?= Url::fromRequest()->overwriteParams(array(
+          'page' => $nextXAxisPage . ',' . $currentYAxisPage
+        ))->getAbsoluteUrl(); ?>" title="<?= sprintf(
+          $fromTo,
+          t('Services'),
+          $currentXAxisPage * $xAxisPages->itemCountPerPage + 1,
+          $nextXAxisPage * $xAxisPages->itemCountPerPage,
+          $xAxisPages->totalItemCount
+        ); ?>"><?= $this->icon('next_petrol.png'); ?></a>
+      <?php else: ?>
+        <?= $this->icon('next.png'); ?>
+      <?php endif ?>
+      </td>
+    </tr>
+    <tr>
+      <td>&nbsp;</td>
+      <td>
+      <?php if ($nextYAxisPage): ?>
+        <a href="<?= Url::fromRequest()->overwriteParams(array(
+          'page' => $currentXAxisPage . ',' . $nextYAxisPage
+        ))->getAbsoluteUrl(); ?>" title="<?= sprintf(
+          $fromTo,
+          t('Hosts'),
+          $currentYAxisPage * $yAxisPages->itemCountPerPage + 1,
+          $nextYAxisPage * $yAxisPages->itemCountPerPage,
+          $yAxisPages->totalItemCount
+        ); ?>"><?= $this->icon('down_petrol.png'); ?></a>
+      <?php else: ?>
+        <?= $this->icon('down.png'); ?>
+      <?php endif ?>
+      </td>
+      <td>&nbsp;</td>
+    </tr>
+  </tbody>
+</table>

modules/monitoring/application/controllers/ListController.php

@@ -572,12 +572,12 @@ class Monitoring_ListController extends Controller
         $this->view->history = $query->paginate();
     }
 
-    public function servicematrixAction()
+    public function servicegridAction()
     {
         if ($url = $this->hasBetterUrl()) {
             return $this->redirectNow($url);
         }
-        $this->addTitleTab('servicematrix');
+        $this->addTitleTab('servicegrid', $this->translate('Service Grid'));
         $this->setAutorefreshInterval(15);
         $query = $this->backend->select()->from('serviceStatus', array(
             'host_name',

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

@@ -0,0 +1,77 @@
+<?php if (!$this->compact): ?>
+<div class="controls">
+  <?= $this->tabs; ?>
+  <div style="margin: 1em;" class="dontprint">
+    <?= $this->translate('Sort by'); ?> <?= $this->sortControl; ?>
+  </div>
+</div>
+<?php endif ?>
+<div class="content" data-base-target="_next">
+  <table class="pivot servicestates">
+<?php
+$hasHeader = false;
+$pivotData = $this->pivot->toArray();
+$hostFilter = '(' . implode('|', array_keys($pivotData)) . ')';
+?>
+
+<?php if (count($pivotData) === 0): ?>
+    <?= $this->translate('No Services matching the filter'); ?>
+<?php endif ?>
+
+<?php foreach ($pivotData as $host_name => $serviceStates): ?>
+<?php if (!$hasHeader): ?>
+    <thead>
+      <tr>
+        <th><?= $this->partial(
+          'joystickPagination.phtml',
+          'default',
+          array(
+            'xAxisPaginator' => $horizontalPaginator,
+            'yAxisPaginator' => $verticalPaginator
+          )
+        ); ?></th>
+        <th colspan="<?= count($serviceStates); ?>">
+          <div>
+<?php foreach (array_keys($serviceStates) as $service_description): ?>
+            <span>
+              <a href="<?= $this->href(
+                'monitoring/list/services',
+                array(
+                  'service_description'   => $service_description,
+                  'host_name'             => $hostFilter
+                )
+              ); ?>">
+                <abbr title="<?= $service_description; ?>">
+                  <?= strlen($service_description) > 18 ? substr($service_description, 0, 18) . '...' : $service_description; ?>
+                </abbr>
+              </a>
+            </span>
+<?php endforeach ?>
+          </div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+<?php $hasHeader = true; ?>
+<?php endif ?>
+      <tr>
+        <th>
+          <a href="<?= $this->href('monitoring/show/services', array('host' => $host_name)); ?>"><?= $host_name; ?></a>
+        </th>
+<?php foreach (array_values($serviceStates) as $service): ?>
+<?php if ($service !== null): ?>
+        <td>
+          <a href="<?= $this->href('monitoring/show/service', array(
+            'host'      => $service->host_name,
+            'service'   => $service->service_description
+          )); ?>" title="<?= $this->escape($service->service_output); ?>" class="state_<?= $this->monitoringState($service, 'service'); ?> <?= $service->service_handled ? 'handled' : ''; ?>"></a>
+        </td>
+<?php else: ?>
+        <td>&middot;</td>
+<?php endif ?>
+<?php endforeach ?>
+      </tr>
+<?php endforeach ?>
+    </tbody>
+  </table>
+</div>

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

@@ -1,84 +0,0 @@
-<?php if (!$this->compact): ?>
-<div class="controls">
-    <?= $this->tabs; ?>
-    <div style="margin: 1em;" class="dontprint">
-        <?= $this->translate('Sort by') ?> <?= $this->sortControl ?>
-    </div>
-    <?= $this->partial(
-        'pivottablePagination.phtml',
-        'default',
-        array(
-            'xAxisPaginator' => $this->horizontalPaginator,
-            'yAxisPaginator' => $this->verticalPaginator
-        )
-    ); ?>
-</div>
-<?php endif ?>
-<div class="content" data-base-target="_next">
-  <table class="pivot servicestates">
-<?php
-$hasHeader = false;
-$pivotData = $this->pivot->toArray();
-$hostFilter = '(' . implode('|', array_keys($pivotData)) . ')';
-?>
-
-<?php if (count($pivotData) === 0): ?>
-    <?= $this->translate('No Services matching the filter'); ?>
-<?php endif ?>
-
-<?php foreach ($pivotData as $host_name => $serviceStates): ?>
-<?php if (!$hasHeader): ?>
-    <thead>
-      <tr>
-        <th>&nbsp;</th>
-        <th colspan="<?= count($serviceStates); ?>">
-          <div>
-<?php foreach (array_keys($serviceStates) as $service_description): ?>
-            <span>
-              <a href="<?= $this->href(
-                    'monitoring/list/services',
-                    array(
-                        'service_description'   => $service_description,
-                        'host_name'             => $hostFilter
-                    )
-                ); ?>">
-              <abbr title="<?= $service_description; ?>"><?=
-                  strlen($service_description) > 18 ?
-                    substr($service_description, 0, 18) . '...' :
-                    $service_description
-              ?></abbr>
-              </a>
-            </span>
-<?php endforeach ?>
-          </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-<?php $hasHeader = true; ?>
-<?php endif ?>
-      <tr>
-        <th>
-          <a href="<?=
-            $this->href('monitoring/show/services', array('host' => $host_name))
-          ?>"><?= $host_name ?></a>
-        </th>
-<?php foreach (array_values($serviceStates) as $service): ?>
-<?php if ($service !== null): ?>
-        <td>
-          <a href="<?= $this->href('monitoring/show/service', array(
-              'host'      => $service->host_name,
-              'service'   => $service->service_description
-          )) ?>" title="<?= $this->escape($service->service_output)
-          ?>" class="state_<?= $this->monitoringState($service, 'service') ?> <?= $service->service_handled ? 'handled' : '' ?>"></a>
-        </td>
-<?php else: ?>
-        <td>&middot;</td>
-<?php endif ?>
-        
-<?php endforeach ?>
-      </tr>
-<?php endforeach ?>
-    </tbody>
-  </table>
-</div>

modules/monitoring/configuration.php

@@ -74,8 +74,8 @@ $section->add($this->translate('Services'), array(
     'url'      => 'monitoring/list/services',
     'priority' => 50
 ));
-$section->add($this->translate('Servicematrix'), array(
-    'url'      => 'monitoring/list/servicematrix?service_problem=1',
+$section->add($this->translate('Service Grid'), array(
+    'url'      => 'monitoring/list/servicegrid?service_problem=1',
     'priority' => 51
 ));
 $section->add($this->translate('Servicegroups'), array(

public/css/icinga/monitoring-colors.less

@@ -581,6 +581,15 @@ div.pivot-pagination {
   }
 }
 
+table.joystick-pagination {
+  margin-bottom: -1em;
+
+  td {
+    width: 1.25em;
+    height: 1.3em;
+  }
+}
+
 table.pivot {
   a {
     text-decoration: none;
@@ -591,7 +600,7 @@ table.pivot {
     }
   }
 
-  thead {
+  & > thead {
     th {
       height: 6em;
 
@@ -629,7 +638,7 @@ table.pivot {
     }
   }
 
-  tbody {
+  & > tbody {
     th {
       padding: 0 14px 0 0;
       white-space: nowrap;