Merge pull request #4492 from skateman/notification-links

Add support for links to a details page in the notification drawer

app/assets/javascripts/controllers/notifications/notifications_drawer_controller.js

@@ -116,6 +116,10 @@ function NotificationsDrawerCtrl($scope, eventNotifications, $timeout) {
     eventNotifications.markRead(notification, group);
   };
 
+  vm.customScope.viewSubjectDetails = function(notification) {
+    eventNotifications.viewDetails(notification);
+  }
+
   vm.customScope.clearNotification = function(notification, group) {
     eventNotifications.clear(notification, group);
   };

app/assets/javascripts/services/event_notifications_service.js

@@ -1,9 +1,9 @@
 angular.module('miq.notifications')
   .service('eventNotifications', eventNotifications);
 
-eventNotifications.$inject = ['$timeout', 'API'];
+eventNotifications.$inject = ['$timeout', '$window', '$httpParamSerializerJQLike', 'API'];
 
-function eventNotifications($timeout, API) {
+function eventNotifications($timeout, $window, $httpParamSerializerJQLike, API) {
   if (! ManageIQ.angular.eventNotificationsData) {
     ManageIQ.angular.eventNotificationsData = {
       state: {
@@ -88,7 +88,7 @@ function eventNotifications($timeout, API) {
             type: resource.details.level,
             message: msg,
             data: {
-              message: msg,
+              link: _.get(resource.details, 'bindings.link'),
             },
             href: resource.href,
             timeStamp: resource.details.created_at,
@@ -129,6 +129,8 @@ function eventNotifications($timeout, API) {
       type: levelToType(type),
       message: message,
       data: notificationData,
+      actionTitle: notificationData.link ? __('View details') : undefined,
+      actionCallback: notificationData.link ? this.viewDetails : undefined,
       href: id ? window.location.origin + '/api/notifications/' + id : undefined,
       timeStamp: (new Date()).getTime(),
     };
@@ -202,6 +204,10 @@ function eventNotifications($timeout, API) {
     notifyObservers();
   };
 
+  this.viewDetails = function(notification) {
+    $window.location.href = '/restful_redirect?' + $httpParamSerializerJQLike(notification.data.link);
+  };
+
   this.markUnread = function(notification, group) {
     if (notification) {
       notification.unread = true;
@@ -327,7 +333,7 @@ function eventNotifications($timeout, API) {
   listenToRx(function(data) {
     if (data.notification) {
       var msg = miqFormatNotification(data.notification.text, data.notification.bindings);
-      _this.add('event', data.notification.level, msg, {message: msg}, data.notification.id);
+      _this.add('event', data.notification.level, msg, {link: _.get(data.notification, 'bindings.link')}, data.notification.id);
     }
   });
 }

app/controllers/restful_redirect_controller.rb

@@ -1,4 +1,6 @@
 class RestfulRedirectController < ApplicationController
+  before_action :check_privileges
+
   def index
     case params[:model]
     when 'MiqRequest'
@@ -12,8 +14,8 @@ def index
                    end
       redirect_to :controller => controller, :action => 'show', :id => params[:id]
     else
-      flash_to_session(_("Could not find %{model}[id=%{id}]") % {:model => params[:model], :id => params[:id]})
-      redirect_to(:controller => 'dashboard')
+      flash_to_session(_("Could not find the given \"%{model}\" record.") % {:model => ui_lookup(:model => params[:model])}, :error)
+      redirect_to(:controller => 'dashboard', :action => 'show')
     end
   end
 end

app/views/static/notification_drawer/notification-body.html.haml

@@ -1,63 +1,32 @@
-%div{"ng-if"    => "!drawerExpanded",
-     "ng-click" => "customScope.markNotificationRead(notification, notificationGroup)"}
-  %div.dropdown.pull-right.dropdown-kebab-pf
-    %button.btn.btn-link.dropdown-toggle{:type      => "button",
-                                         "ng-click" => "customScope.clearNotification(notification, notificationGroup)"}
-      %span.pficon.pficon-close
-  %span.pull-left{"ng-class" => "customScope.getNotficationStatusIconClass(notification)"}
-  %span.drawer-pf-notification-message.notification-message{"tooltip-popup-delay" => "500",
-                                                            "tooltip-placement"   => "bottom",
-                                                            "uib-tooltip"         => "{{notification.data.message}}"}
-    {{notification.data.message}}
-  .drawer-pf-notification-info{"ng-if" => "!notification.data.inProgress"}
-    %span.date
-      {{notification.timeStamp | date:'MM/dd/yyyy'}}
-    %span.time
-      {{notification.timeStamp | date:'h:mm:ss a'}}
-  .mini-progress.clearfix{"ng-if" => "notification.data.inProgress"}
-    %span.time
-      {{notification.timeStamp | date:'h:mm:ss a'}}
-    .mini-progress-area
-      .progress
-        %span.progress-bar.progress-bar-info{"ng-style"    => "{ width: notification.data.percentComplete + '%' }",
-                                             "uib-tooltip" => "{{notification.data.percentComplete}} #{_("% Complete")}"}
-
-.container-fluid.expanded-notification{"ng-if"    => "drawerExpanded",
-                                       "ng-click" => "customScope.markNotificationRead(notification, notificationGroup)"}
-  .row
-    .col-sm-6{"ng-class" => "{ 'col-md-4': notificationGroup.notificationType == 'task' }"}
-      %span.pull-left{"ng-class" => "customScope.getNotficationStatusIconClass(notification)"}
-      %span.drawer-pf-notification-message.notification-message{"tooltip-append-to-body" => "true",
-                                                                "tooltip-popup-delay"    => "500",
-                                                                "tooltip-placement"      => "bottom",
-                                                                "uib-tooltip"            => "{{notification.data.message}}"}
-        {{notification.data.message}}
-    .col-md-4.col-sm-3{"ng-if" => "notificationGroup.notificationType == 'task'"}
-      .drawer-pf-notification-info.expanded-info
-        %span.info-title
-          = _("Started:")
-        %span.date
-          {{notification.data.startTime | date:'MM/dd/yyyy'}}
-        %span.time
-          {{notification.data.startTime | date:'h:mm:ss a'}}
-      .progress{"ng-if" => "notification.data.inProgress"}
-        .progress-bar.progress-bar-info{"ng-style"    => "{ width: notification.data.percentComplete + '%' }",
-                                        "uib-tooltip" => "{{notification.data.percentComplete}} #{_("% Complete")}"}
-    .col-md-4.col-sm-3{"ng-if" => "notificationGroup.notificationType == 'task'"}
-      .drawer-pf-notification-info
-        %span.info-title
-          = _("Completed:")
-        %span.date
-          {{notification.data.endTime | date:'MM/dd/yyyy'}}
-        %span.time
-          {{notification.data.endTime | date:'h:mm:ss a'}}
-    .col-sm-6{"ng-if" => "notificationGroup.notificationType == 'event'"}
-      .drawer-pf-notification-info
-        %span.date
-          {{notification.data.timeStamp | date:'MM/dd/yyyy'}}
-        %span.time
-          {{notification.data.timeStamp | date:'h:mm:ss a'}}
-      .pull-right.dropdown-kebab-pf
-        %button.btn.btn-link.dropdown-toggle{:type      => "button",
-                                             "ng-click" => "customScope.clearNotification(notification, notificationGroup)"}
-          %span.pficon.pficon-close
+%div{"ng-if" => "!drawerExpanded"}
+  .dropdown.pull-right.dropdown-kebab-pf{'uib-dropdown' => ''}
+    %button.btn.btn-link.dropdown-toggle{'uib-dropdown-toggle' => '',
+                                         :type                 => 'button',
+                                         :id                   => 'dropdownKebabRight-{{ notification.id }}',
+                                         'aria-haspopup'       => 'true',
+                                         'aria-expanded'       => 'false'}
+      %span.fa.fa-ellipsis-v
+    %ul.dropdown-menu.dropdown-menu-right{'aria-labelledby' => 'dropdownKebabRight-{{ notification.id }}'}
+      %li{:role => 'menuitem', 'ng-class' => "{'disabled': !notification.data.link}"}
+        %a.secondary-action{:title => _('View details'), 'ng-click' => 'customScope.viewSubjectDetails(notification)'}
+          = _('View details')
+      %li.divider{:role => 'separator'}
+      %li{:role => 'menuitem', 'ng-class' => "{'disabled': !notification.unread}"}
+        %a.secondary-action{:title => _('Mark as read'), 'ng-click' => 'customScope.markNotificationRead(notification, notificationGroup)'}
+          = _('Mark as read')
+      %li{:role => 'menuitem'}
+        %a.secondary-action{:title => _('Remove'), 'ng-click' => 'customScope.clearNotification(notification, notificationGroup)'}
+          = _('Remove')
+  %span.pull-left{'ng-class' => 'customScope.getNotficationStatusIconClass(notification)',
+                  'ng-click' => 'customScope.markNotificationRead(notification, notificationGroup)'}
+  .drawer-pf-notification-content{'ng-click' => 'customScope.markNotificationRead(notification, notificationGroup)'}
+    %span.drawer-pf-notification-message{'uib-tooltip-append'      => true,
+                                         'uib-tooltip-popup-delay' => 500,
+                                         'uib-tooltip-placement'   => 'bottom',
+                                         'uib-tooltip'             => '{{ notification.message }}'}
+      {{ notification.message }}
+    .drawer-pf-notification-info{'ng-click' => 'customScope.markNotificationRead(notification, notificationGroup)'}
+      %span.date
+        {{ notification.timeStamp | date:'MM/dd/yyyy' }}
+      %span.time
+        {{ notification.timeStamp | date:'h:mm:ss a' }}