Merge pull request #3449 from Icinga/feature/flippable-service-grid-axes-2640

Flippable service grid axes

application/views/scripts/joystickPagination.phtml

@@ -2,14 +2,23 @@
 
 use Icinga\Web\Url;
 
-if ($xAxisPaginator->count() <= 1 && $yAxisPaginator->count() <= 1) {
-    return; // Display this pagination only if there are multiple pages
-}
-
 $showText = $this->translate('%s: Show %s %u to %u out of %u', 'pagination.joystick');
 $xAxisPages = $xAxisPaginator->getPages('all');
 $yAxisPages = $yAxisPaginator->getPages('all');
 
+$flipUrl = Url::fromRequest();
+if ($flipUrl->getParam('flipped')) {
+    $flipUrl->remove('flipped');
+} else {
+    $flipUrl->setParam('flipped');
+}
+if ($flipUrl->hasParam('page')) {
+    $flipUrl->setParam('page', implode(',', array_reverse(explode(',', $flipUrl->getParam('page')))));
+}
+if ($flipUrl->hasParam('limit')) {
+    $flipUrl->setParam('limit', implode(',', array_reverse(explode(',', $flipUrl->getParam('limit')))));
+}
+
 $totalYAxisPages = $yAxisPaginator->count();
 $currentYAxisPage = $yAxisPaginator->getCurrentPageNumber();
 $prevYAxisPage = $currentYAxisPage > 1 ? $currentYAxisPage - 1 : null;
@@ -79,7 +88,20 @@ $nextXAxisPage = $currentXAxisPage < $totalXAxisPages ? $currentXAxisPage + 1 :
         <?= $this->icon('left-open'); ?>
       <?php endif ?>
       </td>
+      <?php if ($this->flippable): ?>
+      <td><?= $this->qlink(
+        '',
+        $flipUrl,
+        null,
+        array(
+          'icon'                => 'arrows-cw',
+          'data-base-target'    => '_self',
+          'title'               => $this->translate('Flip grid axes')
+        )
+      ) ?></td>
+      <?php else: ?>
       <td>&nbsp;</td>
+      <?php endif ?>
       <td>
       <?php if ($nextXAxisPage): ?>
         <?= $this->qlink(

modules/monitoring/application/controllers/ListController.php

@@ -589,15 +589,27 @@ class ListController extends Controller
         $this->applyRestriction('monitoring/filter/objects', $query);
         $this->filterQuery($query);
         $filter = (bool) $this->params->shift('problems', false) ? Filter::where('service_problem', 1) : null;
-        $pivot = $query
-            ->pivot(
-                'service_description',
-                'host_name',
-                $filter,
-                $filter ? clone $filter : null
-            )
-            ->setXAxisHeader('service_display_name')
-            ->setYAxisHeader('host_display_name');
+        if ($this->params->get('flipped', false)) {
+            $pivot = $query
+                ->pivot(
+                    'host_name',
+                    'service_description',
+                    $filter,
+                    $filter ? clone $filter : null
+                )
+                ->setYAxisHeader('service_display_name')
+                ->setXAxisHeader('host_display_name');
+        } else {
+            $pivot = $query
+                ->pivot(
+                    'service_description',
+                    'host_name',
+                    $filter,
+                    $filter ? clone $filter : null
+                )
+                ->setXAxisHeader('service_display_name')
+                ->setYAxisHeader('host_display_name');
+        }
         $this->setupSortControl(array(
             'host_display_name'     => $this->translate('Hostname'),
             'service_display_name'  => $this->translate('Service Name')
@@ -607,6 +619,9 @@ class ListController extends Controller
         list($pivotData, $pivotHeader) = $pivot->toArray();
         $this->view->pivotData = $pivotData;
         $this->view->pivotHeader = $pivotHeader;
+        if ($this->params->get('flipped', false)) {
+            $this->render('servicegrid-flipped');
+        }
     }
 
     /**
@@ -622,7 +637,8 @@ class ListController extends Controller
             'format', // handleFormatRequest()
             'stateType', // hostsAction() and servicesAction()
             'addColumns', // addColumns()
-            'problems' // servicegridAction()
+            'problems', // servicegridAction()
+            'flipped' // servicegridAction()
         ));
         $this->handleFormatRequest($dataView);
         return $dataView;

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

@@ -0,0 +1,143 @@
+<?php
+use Icinga\Data\Filter\Filter;
+use Icinga\Module\Monitoring\Object\Service;
+use Icinga\Web\Url;
+
+if (! $this->compact): ?>
+<div class="controls">
+    <?= $this->tabs ?>
+    <div class="sort-controls-container">
+        <?= $this->sortBox ?>
+    </div>
+    <?= $this->filterEditor ?>
+</div>
+<?php endif ?>
+<div class="content" data-base-target="_next">
+    <?php if (empty($pivotData)): ?>
+    <p><?= $this->translate('No services found matching the filter.') ?></p>
+</div>
+<?php return; endif;
+$serviceFilter = Filter::matchAny();
+foreach ($pivotData as $serviceDescription => $_) {
+    $serviceFilter->orFilter(Filter::where('service_description', $serviceDescription));
+}
+?>
+<table class="service-grid-table">
+    <thead>
+        <tr>
+            <th><?= $this->partial(
+                'joystickPagination.phtml',
+                'default',
+                array(
+                    'flippable'      => true,
+                    'xAxisPaginator' => $horizontalPaginator,
+                    'yAxisPaginator' => $verticalPaginator
+                )
+            ) ?></th>
+            <?php foreach ($pivotHeader['cols'] as $hostName => $hostAlias): ?>
+            <th class="rotate-45"><div><span><?= $this->qlink(
+                $this->ellipsis($hostAlias, 24),
+                Url::fromPath('monitoring/list/services')->addFilter(
+                    Filter::matchAll($serviceFilter, Filter::where('host_name', $hostName))
+                ),
+                null,
+                array('title' => sprintf($this->translate('List all reported services on host %s'), $hostAlias)),
+                false
+            ) ?></span></div></th>
+            <?php endforeach ?>
+        </tr>
+    </thead>
+    <tbody>
+
+    <?php $i = 0 ?>
+    <?php foreach ($pivotHeader['rows'] as $serviceDescription => $serviceDisplayName): ?>
+        <tr>
+            <th><?php
+                $hostFilter = Filter::matchAny();
+                foreach ($pivotData[$serviceDescription] as $hostName => $_) {
+                    $hostFilter->orFilter(Filter::where('host_name', $hostName));
+                }
+                echo $this->qlink(
+                    $serviceDisplayName,
+                    Url::fromPath('monitoring/list/services')->addFilter(
+                        Filter::matchAll($hostFilter, Filter::where('service_description', $serviceDescription))
+                    ),
+                    null,
+                    array('title' => sprintf(
+                        $this->translate('List all services with the name "%s" on all reported hosts'),
+                        $serviceDisplayName
+                    ))
+                );
+            ?></th>
+        <?php foreach (array_keys($pivotHeader['cols']) as $hostName): ?>
+            <td><?php
+            $service = $pivotData[$serviceDescription][$hostName];
+            if ($service === null): ?>
+                <span aria-hidden="true">&middot;</span>
+                <?php continue; endif ?>
+            <?php $ariaDescribedById = $this->protectId($service->host_name . '_' . $service->service_description . '_desc') ?>
+                <span class="sr-only" id="<?= $ariaDescribedById ?>">
+                    <?= $this->escape($service->service_output) ?>
+                </span>
+                <?= $this->qlink(
+                    '',
+                    'monitoring/service/show',
+                    array(
+                        'host'    => $hostName,
+                        'service' => $serviceDescription
+                    ),
+                    array(
+                        'aria-describedby'    => $ariaDescribedById,
+                        'aria-label'          => sprintf(
+                            $this->translate('Show detailed information for service %s on host %s'),
+                            $service->service_display_name,
+                            $service->host_display_name
+                        ),
+                        'class'               => 'service-grid-link state-' . Service::getStateText($service->service_state) . ($service->service_handled ? ' handled' : ''),
+                        'title'               => $service->service_output
+                    )
+                ) ?>
+            </td>
+        <?php endforeach ?>
+        <?php if (! $this->compact && $this->horizontalPaginator->getPages()->pageCount > 1): ?>
+            <td>
+                <?php $expandLink = $this->qlink(
+                    $this->translate('Load more'),
+                    Url::fromRequest(),
+                    array(
+                        'limit' => ($this->horizontalPaginator->getItemCountPerPage() + 20)
+                            . ','
+                            .  $this->verticalPaginator->getItemCountPerPage()
+                    ),
+                    array(
+                        'class'             => 'action-link',
+                        'data-base-target'  => '_self'
+                    )
+                ) ?>
+                <?= ++$i === (int) (count($pivotHeader['rows']) / 2) ? $expandLink : '' ?>
+            </td>
+        <?php endif ?>
+        </tr>
+    <?php endforeach ?>
+    <?php if (! $this->compact && $this->verticalPaginator->getPages()->pageCount > 1): ?>
+        <tr>
+            <td colspan="<?= count($pivotHeader['cols']) + 1?>" class="service-grid-table-more">
+                <?php echo $this->qlink(
+                    $this->translate('Load more'),
+                    Url::fromRequest(),
+                    array(
+                        'limit' => $this->horizontalPaginator->getItemCountPerPage()
+                            . ','
+                            . ($this->verticalPaginator->getItemCountPerPage() + 20)
+                    ),
+                    array(
+                        'class'             => 'action-link',
+                        'data-base-target'  => '_self'
+                    )
+                ) ?>
+            </td>
+        </tr>
+    <?php endif ?>
+    </tbody>
+</table>
+</div>

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

@@ -6,7 +6,9 @@ use Icinga\Web\Url;
 if (! $this->compact): ?>
 <div class="controls">
     <?= $this->tabs ?>
-    <?= $this->sortBox ?>
+    <div class="sort-controls-container">
+        <?= $this->sortBox ?>
+    </div>
     <?= $this->filterEditor ?>
 </div>
 <?php endif ?>
@@ -27,13 +29,14 @@ foreach ($pivotData as $hostName => $_) {
                 'joystickPagination.phtml',
                 'default',
                 array(
+                    'flippable'      => true,
                     'xAxisPaginator' => $horizontalPaginator,
                     'yAxisPaginator' => $verticalPaginator
                 )
             ) ?></th>
         <?php foreach ($pivotHeader['cols'] as $serviceDescription => $serviceDisplayName): ?>
             <th class="rotate-45"><div><span><?= $this->qlink(
-                $this->ellipsis($serviceDisplayName, 18),
+                $this->ellipsis($serviceDisplayName, 24),
                 Url::fromPath('monitoring/list/services')->addFilter(
                     Filter::matchAll($hostFilter, Filter::where('service_description', $serviceDescription))
                 ),

modules/monitoring/public/css/service-grid.less

@@ -12,10 +12,10 @@
   }
 
   .rotate-45 {
-    height: 6em;
+    height: 8em;
 
     div {
-      .transform(translate(0.4em, 2.1em) rotate(315deg));
+      .transform(translate(0.4em, 2.8em) rotate(315deg));
       width: 1.5em;
     }
   }
@@ -30,6 +30,7 @@
 
 .joystick-pagination {
   margin: 0 auto;
+  font-size: 130%;
 
   a {
     color: @text-color;