Link from the host and service group lists to their grids and vice versa

refs #1017

modules/monitoring/application/views/scripts/list/hostgroup-grid.phtml

@@ -3,6 +3,11 @@
     <?= $this->tabs ?>
     <div class="sort-controls-container">
         <?= $this->sortBox ?>
+        <a href="<?= $this->href('monitoring/list/hostgroups') ?>" class="grid-toggle-link"
+           title="<?= $this->translate('Toogle grid view mode') ?>">
+            <?= $this->icon('th-list', null, ['class' => '-inactive']) ?>
+            <?= $this->icon('th-thumb-empty', null, ['class' => '-active']) ?>
+        </a>
     </div>
     <?= $this->filterEditor ?>
 </div>

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

@@ -8,6 +8,11 @@ if (! $this->compact): ?>
     <div class="sort-controls-container">
         <?= $this->limiter ?>
         <?= $this->sortBox ?>
+        <a href="<?= $this->href('monitoring/list/hostgroup-grid') ?>" class="grid-toggle-link"
+           title="<?= $this->translate('Toogle grid view mode') ?>">
+            <?= $this->icon('th-list', null, ['class' => '-active']) ?>
+            <?= $this->icon('th-thumb-empty', null, ['class' => '-inactive']) ?>
+        </a>
     </div>
     <?= $this->filterEditor ?>
 </div>

modules/monitoring/application/views/scripts/list/servicegroup-grid.phtml

@@ -3,6 +3,11 @@
     <?= $this->tabs ?>
     <div class="sort-controls-container">
         <?= $this->sortBox ?>
+        <a href="<?= $this->href('monitoring/list/servicegroups') ?>" class="grid-toggle-link"
+           title="<?= $this->translate('Toogle grid view mode') ?>">
+            <?= $this->icon('th-list', null, ['class' => '-inactive']) ?>
+            <?= $this->icon('th-thumb-empty', null, ['class' => '-active']) ?>
+        </a>
     </div>
     <?= $this->filterEditor ?>
 </div>
@@ -209,4 +214,4 @@ if (! $serviceGroups->hasResult()): ?>
     </div>
 <?php endforeach ?>
 </div>
-</div>
+</div>

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

@@ -7,6 +7,11 @@ if (! $this->compact): ?>
     <div class="sort-controls-container">
         <?= $this->limiter ?>
         <?= $this->sortBox ?>
+        <a href="<?= $this->href('monitoring/list/servicegroup-grid') ?>" class="grid-toggle-link"
+           title="<?= $this->translate('Toogle grid view mode') ?>">
+            <?= $this->icon('th-list', null, ['class' => '-active']) ?>
+            <?= $this->icon('th-thumb-empty', null, ['class' => '-inactive']) ?>
+        </a>
     </div>
     <?= $this->filterEditor ?>
 </div>

modules/monitoring/public/css/module.less

@@ -42,6 +42,26 @@
 }
 
 // Hostgroup- and servicegroup-grid styles
+
+.grid-toggle-link {
+  display: inline-block;
+  margin-left: 1em;
+  text-decoration: none;
+  vertical-align: middle;
+
+  > i {
+    font-size: 1.25em;
+
+    &.-active {
+      color: @icinga-blue;
+    }
+
+    &.-inactive {
+      color: @gray-light;
+    }
+  }
+}
+
 .group-grid {
   display: grid;
   grid-gap: 1em 3em;