monitoring: Fix notification overview markup

refs #5543

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

@@ -2,8 +2,6 @@
 use Icinga\Module\Monitoring\Object\Host;
 use Icinga\Module\Monitoring\Object\Service;
 
-$notifications->peekAhead($this->compact);
-
 if (! $this->compact): ?>
 <div class="controls separated dont-print">
     <?= $tabs ?>
@@ -16,22 +14,32 @@ if (! $this->compact): ?>
 </div>
 <?php endif ?>
 <div class="content">
-    <table data-base-target="_next" class="action action-table">
+<?php if (! $notifications->hasResult()): ?>
+    <p><?= $this->translate('No notifications found matching the filter.') ?></p>
+</div>
+<?php return; endif ?>
+    <table data-base-target="_next" class="action-table">
     <tbody>
-    <?php foreach ($notifications as $notification):
+    <?php foreach ($notifications->peekAhead($this->compact) as $notification):
         if (isset($notification->service_description)) {
             $isService = true;
+            $stateLabel = Service::getStateText($notification->notification_state, true);
             $stateName = Service::getStateText($notification->notification_state);
         } else {
             $isService = false;
+            $stateLabel = Host::getStateText($notification->notification_state, true);
             $stateName = Host::getStateText($notification->notification_state);
         }
     ?>
         <tr>
             <td class="state-col state-<?= $stateName ?>">
+                <div class="state-label"><?= $stateLabel ?></div>
+                <div class="state-meta">
                     <?= $this->timeAgo($notification->notification_start_time, $this->compact) ?>
+                </div>
             </td>
             <td>
+                <div class="state-header">
                 <?php if ($isService): ?>
                     <?= $this->icon('service', $this->translate('Service')); ?>
                     <?= $this->link()->service(
@@ -45,9 +53,8 @@ if (! $this->compact): ?>
                     <?= $this->icon('host', $this->translate('Host')); ?>
                     <?= $this->link()->host($notification->host_name, $notification->host_display_name) ?>
                 <?php endif ?>
-
                 <?php if (! $this->contact): ?>
-                    <span class="pull-right text-small">
+                    <div class="notification-recipient">
                     <?php if ($notification->notification_contact_name): ?>
                         <?= sprintf(
                             $this->translate('Sent to %s'),
@@ -58,11 +65,12 @@ if (! $this->compact): ?>
                             )
                         ) ?>
                     <?php else: ?>
-                            <?= $this->translate('This notification was not sent out to any contact.'); ?>
+                        <?= $this->translate('Sent out to any contact') ?>
                     <?php endif ?>
-                    </span>
+                    </div>
                 <?php endif ?>
-                <p class="plugin-output">
+                </div>
+                <p class="overview-plugin-output">
                     <?= $this->pluginOutput($this->ellipsis($notification->notification_output, 10000), true) ?>
                 </p>
             </td>
@@ -70,17 +78,17 @@ if (! $this->compact): ?>
     <?php endforeach ?>
     </tbody>
     </table>
-<?php if (! $notifications->hasResult()): ?>
+<?php if ($notifications->hasMore()): ?>
-  <?= $this->translate('No notifications found matching the filter'); ?>
+    <div class="text-right">
-<?php elseif ($notifications->hasMore()): ?>
         <?= $this->qlink(
             $this->translate('Show More'),
             $this->url(isset($notificationsUrl) ? $notificationsUrl : null)->without(array('view', 'limit')),
             null,
             array(
-      'data-base-target'    => '_next',
+                'class'             => 'action-link',
-      'class'               => 'pull-right action-link'
+                'data-base-target'  => '_next'
             )
         ); ?>
+    </div>
 <?php endif ?>
 </div>

modules/monitoring/public/css/tables.less

@@ -2,10 +2,50 @@
 
 @border-left-width: 6px;
 
+// Check source reachable information in the host and service detail views
+.check-source-meta {
+  font-size: @font-size-small;
+}
+
+// Column for counts, e.g. host group members
 .count-col {
   width: 4em;
 }
 
+// Host name and IP addresses in the host and service detail view
+.host-meta {
+  color: @text-color-light;
+  font-size: @font-size-small;
+}
+
+// Link to unhandled services in the hosts overview
+.host-services-incidents {
+  color: @color-critical;
+  font-family: @font-family-wide;
+  font-size: @font-size-small;
+}
+
+// Notification recipient in the notifications overview
+.notification-recipient {
+  color: @text-color-light;
+  float: right;
+  font-size: @font-size-small;
+}
+
+// Plugin output in overviews
+.overview-plugin-output {
+  color: @text-color-light;
+  font-family: @font-family-fixed;
+  font-size: @font-size-small;
+}
+
+// Service description if in the service detail view
+.service-meta {
+  color: @text-color-light;
+  font-size: @font-size-small;
+}
+
+// State column for label and duration in overviews
 .state-col {
   &.state-ok,
   &.state-up {
@@ -69,40 +109,24 @@
   width: 8em;
 }
 
-.host-meta, .service-meta {
+// Wraps links, icons and meta in overviews
-  color: @text-color-light;
-  font-size: @font-size-small;
-}
-
-// Link to unhandled services in the hosts overview
-.host-services-incidents {
-  color: @color-critical;
-  font-family: @font-family-wide;
-  font-size: @font-size-small;
-}
-
-// Plugin output in overviews
-.overview-plugin-output {
-  color: @text-color-light;
-  font-family: @font-family-fixed;
-  font-size: @font-size-small;
-}
-
 .state-header {
   .clearfix();
 }
 
+// State icons, e.g. acknowledged in overviews
 .state-icons {
   float: right;
 }
 
+// State label in overviews
 .state-label {
   font-family: @font-family-wide;
   font-size: @font-size-small;
   letter-spacing: 1px;
 }
 
-.check-source-meta,
+// State duration and state type information in overviews
 .state-meta {
   font-size: @font-size-small;
 }