diff --git a/app/index.html b/app/index.html
index 71a5c0c718..43cfa28412 100644
--- a/app/index.html
+++ b/app/index.html
@@ -42,6 +42,8 @@
     <!-- Add your site or application content here -->
 
     <toast-notifications></toast-notifications>
+    <notification-drawer-wrapper></notification-drawer-wrapper>
+
     <div ng-view>
       <!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
       <nav class="navbar navbar-pf-alt top-header" role="navigation">
@@ -190,6 +192,7 @@ <h1>JavaScript Required</h1>
 
         <script src="scripts/constants.js"></script>
         <script src="scripts/app.js"></script>
+        <script src="scripts/services/browserStore.js"></script>
         <script src="scripts/services/discovery.js"></script>
         <script src="scripts/services/applicationGenerator.js"></script>
         <script src="scripts/services/navigate.js"></script>
@@ -233,6 +236,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/services/listRowUtils.js"></script>
         <script src="scripts/services/ownerReferences.js"></script>
         <script src="scripts/controllers/landingPage.js"></script>
+        <script src="scripts/services/events.js"></script>
         <script src="scripts/controllers/projects.js"></script>
         <script src="scripts/controllers/pods.js"></script>
         <script src="scripts/controllers/pod.js"></script>
@@ -391,6 +395,8 @@ <h1>JavaScript Required</h1>
         <script src="scripts/directives/affix.js"></script>
         <script src="scripts/directives/editEnvironmentVariables.js"></script>
         <script src="scripts/directives/initContainersSummary.js"></script>
+        <script src="scripts/directives/notifications/notificationCounter.js"></script>
+        <script src="scripts/directives/notifications/notificationDrawerWrapper.js"></script>
         <script src="scripts/filters/date.js"></script>
         <script src="scripts/filters/resources.js"></script>
         <script src="scripts/filters/canI.js"></script>
diff --git a/app/scripts/app.js b/app/scripts/app.js
index ca4513454c..bebbc3a781 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -22,6 +22,7 @@ angular
     'patternfly.charts',
     'patternfly.navigation',
     'patternfly.sort',
+    'patternfly.notification',
     'openshiftConsoleTemplates',
     'ui.ace',
     'extension-registry',
diff --git a/app/scripts/constants.js b/app/scripts/constants.js
index 1dfcc84f35..3691ff1945 100644
--- a/app/scripts/constants.js
+++ b/app/scripts/constants.js
@@ -84,7 +84,8 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
 
   // This blacklist hides certain kinds from the "Other Resources" page because they are unpersisted, disallowed for most end users, or not supported by openshift but exist in kubernetes
   AVAILABLE_KINDS_BLACKLIST: [],
-
+  // Currently disables watch on events used by the drawer
+  DISABLE_GLOBAL_EVENT_WATCH: false,
   ENABLE_TECH_PREVIEW_FEATURE: {
     // Enable the new landing page and service catalog experience
     service_catalog_landing_page: false,
@@ -139,6 +140,59 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
     {resource: 'services', group: ''},
     {resource: 'statefulsets', group: 'apps'}
   ],
+  // TODO:
+  // This map can drive both the drawer & toast messages by
+  // updating it to the following format:
+  // { drawer: true, toast: true  }
+  // or perhaps this, where an event may apply to multiple resources
+  // (though reuse of events is not super common, this could be overkill):
+  // Failed: {
+  //   resources: [{ group: 'apps', resource: 'deployments' }],
+  //   drawer: true,
+  //   toast: true
+  // }
+  // TODO: Also consider an API_OBJECTS_TO_IGNORE
+  // map that can blacklist some, for example, if FailedCreate
+  // applies to many but we don't want to see all.
+   EVENTS_TO_SHOW: {
+    // CRUD events that apply to more than one api object
+    FailedCreate: true,
+    FailedDelete: true,
+    FailedUpdate: true,
+    // Build
+    BuildStarted: true,
+    BuildCompleted: true,
+    BuildFailed: true,
+    BuildCancelled: true,
+    // BuildConfig
+    //
+    // Deployment
+    Failed: true,
+    ScalingReplicaSet: true,
+    DeploymentCancelled: true,
+    // DeploymentConfig
+    DeploymentCreated: true,
+    DeploymentCreationFailed: true,
+    // Pod
+    FailedSync: true,
+    BackOff: true,
+    Unhealthy: true,
+    // Image/Pod
+    Pulling: true,
+    Pulled: true,
+    // SuccessfulDelete: true,
+    // Cron
+    //
+    // PodAutoscaler
+    SuccessfulRescale: true,
+    FailedRescale: true,
+    // Service
+    LoadBalancerUpdateFailed: true,
+    // PVC
+    VolumeDeleted: true,
+    FailedBinding: true,
+    ProvisioningFailed: true
+  },
 
   // href's will be prefixed with /project/{{projectName}} unless they are absolute URLs
   PROJECT_NAVIGATION: [
diff --git a/app/scripts/directives/notifications/notificationCounter.js b/app/scripts/directives/notifications/notificationCounter.js
new file mode 100644
index 0000000000..5d32343579
--- /dev/null
+++ b/app/scripts/directives/notifications/notificationCounter.js
@@ -0,0 +1,109 @@
+'use strict';
+(function() {
+
+  angular
+    .module('openshiftConsole')
+    .component('notificationCounter', {
+      templateUrl: 'views/directives/notifications/notification-counter.html',
+      bindings: {},
+      controller: [
+        '$filter',
+        '$routeParams',
+        '$rootScope',
+        'Constants',
+        NotificationCounter
+      ]
+    });
+
+  function NotificationCounter($filter, $routeParams, $rootScope, Constants) {
+
+      var counter = this;
+      var DISABLE_GLOBAL_EVENT_WATCH = _.get(Constants, 'DISABLE_GLOBAL_EVENT_WATCH');
+      var LIMIT_WATCHES = $filter('isIE')() || $filter('isEdge')();
+
+      counter.hide = true;
+
+      var rootScopeWatches = [];
+      // this one is treated separately from the rootScopeWatches as
+      // it may need to be updated outside of the lifecycle of init/destroy
+      var notificationListeners = [];
+
+      var watchNotificationDrawerCount = function(projectName, cb) {
+        if(!projectName) {
+          return;
+        }
+        notificationListeners.push($rootScope.$on('NotificationDrawerWrapper.count', cb));
+      };
+
+      var deregisterNotificationListeners = function() {
+        _.each(notificationListeners, function(listener) {
+          listener && listener();
+        });
+        notificationListeners = [];
+      };
+
+      var deregisterRootScopeWatches = function() {
+        _.each(rootScopeWatches, function(deregister) {
+          deregister();
+        });
+        rootScopeWatches = [];
+      };
+
+      var hideIfNoProject = function(projectName) {
+        if(!projectName) {
+          counter.hide = true;
+        } else {
+          counter.hide = false;
+        }
+      };
+
+      counter.onClick = function() {
+        $rootScope.$emit('NotificationDrawerWrapper.toggle');
+      };
+
+      var drawerCountCallback = function(event, newCount) {
+        // NOTE: unread !== seen.  We do not automatically mark
+        // notifications unread when the drawer is closed.
+        if(newCount) {
+          counter.showUnreadNotificationsIndicator = true;
+        } else {
+          counter.showUnreadNotificationsIndicator = false;
+        }
+      };
+
+      var projectChanged = function(next, current) {
+        return _.get(next, 'params.project') !== _.get(current, 'params.project');
+      };
+
+      var reset = function() {
+        watchNotificationDrawerCount($routeParams.project, drawerCountCallback);
+        hideIfNoProject($routeParams.project);
+      };
+
+      var initWatches = function() {
+        reset();
+        rootScopeWatches.push($rootScope.$on("$routeChangeSuccess", function (evt, next, current) {
+          if(projectChanged(next, current)) {
+            reset();
+          }
+        }));
+
+        rootScopeWatches.push($rootScope.$on('NotificationDrawerWrapper.onMarkAllRead', function() {
+          counter.showUnreadNotificationsIndicator = false;
+        }));
+      };
+
+      counter.$onInit = function() {
+        if(DISABLE_GLOBAL_EVENT_WATCH || LIMIT_WATCHES) {
+          counter.hide = true;
+          return;
+        }
+        initWatches();
+      };
+
+      counter.$onDestroy = function() {
+        deregisterNotificationListeners();
+        deregisterRootScopeWatches();
+      };
+  }
+})();
diff --git a/app/scripts/directives/notifications/notificationDrawerWrapper.js b/app/scripts/directives/notifications/notificationDrawerWrapper.js
new file mode 100644
index 0000000000..46595b124b
--- /dev/null
+++ b/app/scripts/directives/notifications/notificationDrawerWrapper.js
@@ -0,0 +1,328 @@
+'use strict';
+
+(function() {
+
+  angular
+    .module('openshiftConsole')
+    // shim for communicationg with pfNotificationDrawer
+    .component('notificationDrawerWrapper', {
+      templateUrl: 'views/directives/notifications/notification-drawer-wrapper.html',
+      controller: [
+        '$filter',
+        '$interval',
+        '$location',
+        '$timeout',
+        '$routeParams',
+        '$rootScope',
+        'Constants',
+        'DataService',
+        'NotificationsService',
+        'EventsService',
+        NotificationDrawerWrapper
+      ]
+    });
+
+  function NotificationDrawerWrapper(
+      $filter,
+      $interval,
+      $location,
+      $timeout,
+      $routeParams,
+      $rootScope,
+      Constants,
+      DataService,
+      NotificationsService,
+      EventsService) {
+
+      // kill switch if watching events is too expensive
+      var DISABLE_GLOBAL_EVENT_WATCH = _.get(Constants, 'DISABLE_GLOBAL_EVENT_WATCH');
+      var LIMIT_WATCHES = $filter('isIE')() || $filter('isEdge')();
+
+      var drawer = this;
+
+      // global event watches
+      var rootScopeWatches = [];
+      // this one is treated separately from the rootScopeWatches as
+      // it may need to be updated outside of the lifecycle of init/destroy
+      var notificationListener;
+      // our internal notifications
+      // var clientGeneratedNotifications = [];
+
+      var eventsWatcher;
+      var eventsByNameData = {};
+      var eventsMap = {};
+
+      // TODO:
+      // include both Notifications & Events,
+      // rather than destroying the map each time maintain it & add new items
+
+      // final Processed set of notification groups for UI
+      // IF POSSIBLE, avoid having to convert back to an array.
+      // var notificationGroupsMap = {};
+      var notificationGroups = [];
+
+
+      var projects = {};
+
+      var getProject = function(projectName) {
+        return DataService
+                .get('projects', projectName, {}, {errorNotification: false})
+                .then(function(project) {
+                  projects[project.metadata.name] = project;
+                  return project;
+                });
+      };
+
+      var ensureProjectGroupExists = function(groups, projectName) {
+        if(projectName && !groups[projectName]) {
+          groups[projectName] = {
+            heading: $filter('displayName')(projects[projectName]) || projectName,
+            project: projects[projectName],
+            notifications: []
+          };
+        }
+      };
+
+      var deregisterEventsWatch = function() {
+        if(eventsWatcher) {
+          DataService.unwatch(eventsWatcher);
+        }
+      };
+
+      var watchEvents = function(projectName, cb) {
+        deregisterEventsWatch();
+        if(projectName) {
+          eventsWatcher = DataService.watch('events', {namespace: projectName}, _.debounce(cb, 400), { skipDigest: true });
+        }
+      };
+
+      // NotificationService notifications are minimal, they do no necessarily contain projectName info.
+      // ATM tacking this on via watching the current project.
+      // var watchNotifications = function(projectName, cb) {
+      //   deregisterNotificationListener();
+      //   if(!projectName) {
+      //     return;
+      //   }
+      //   notificationListener = $rootScope.$on('NotificationsService.onNotificationAdded', cb);
+      // };
+
+      var deregisterNotificationListener = function() {
+        notificationListener && notificationListener();
+        notificationListener = null;
+      };
+
+      var unread = function(notifications) {
+        return _.filter(notifications, 'unread');
+      };
+
+      // returns a count for each type of notification, example:
+      // {Normal: 1, Warning: 5}
+      // TODO: eliminate this $rootScope.$applyAsync,
+      // there is a quirk here where the values are not picked up the
+      // first time the function runs, despite the same $applyAsync
+      // in the render() function
+      var countUnreadNotificationsForGroup = function(group) {
+        $rootScope.$applyAsync(function() {
+          group.totalUnread = unread(group.notifications).length;
+          group.hasUnread = !!group.totalUnread;
+          $rootScope.$emit('NotificationDrawerWrapper.count', group.totalUnread);
+        });
+      };
+
+      // currently we only show 1 at a time anyway
+      var countUnreadNotificationsForAllGroups = function() {
+        _.each(notificationGroups, countUnreadNotificationsForGroup);
+      };
+
+      var sortNotifications = function(notifications) {
+        return _.orderBy(notifications, ['event.lastTimestamp', 'event.firstTimestamp'], ['desc', 'desc']);
+      };
+
+      var sortNotificationGroups = function(groupsMap) {
+        // convert the map into a sorted array
+        var sortedGroups = _.sortBy(groupsMap, function(group) {
+          return group.heading;
+        });
+        // and sort the notifications under each one
+        _.each(sortedGroups, function(group) {
+          group.notifications = sortNotifications(group.notifications);
+          group.counts = countUnreadNotificationsForGroup(group);
+        });
+        return sortedGroups;
+      };
+
+      var formatAndFilterEvents = function(eventMap) {
+        var filtered = {};
+        ensureProjectGroupExists(filtered, $routeParams.project);
+        _.each(eventMap, function(event) {
+          if(EventsService.isImportantEvent(event) && !EventsService.isCleared(event)) {
+            ensureProjectGroupExists(filtered, event.metadata.namespace);
+            filtered[event.metadata.namespace].notifications.push({
+              unread:  !EventsService.isRead(event),
+              event: event,
+              actions: null
+            });
+          }
+        });
+        return filtered;
+      };
+
+      var deregisterRootScopeWatches = function() {
+        _.each(rootScopeWatches, function(deregister) {
+          deregister();
+        });
+        rootScopeWatches = [];
+      };
+
+      var hideIfNoProject = function(projectName) {
+        if(!projectName) {
+          drawer.drawerHidden = true;
+        }
+      };
+
+      var render = function() {
+        $rootScope.$evalAsync(function () {
+          countUnreadNotificationsForAllGroups();
+          // NOTE: we are currently only showing one project in the drawer at a
+          // time. If we go back to multiple projects, we can eliminate the filter here
+          // and just pass the whole array as notificationGroups.
+          // if we do, we will have to handle group.open to keep track of what the
+          // user is viewing at the time & indicate to the user that the non-active
+          // project is "asleep"/not being watched.
+          drawer.notificationGroups = _.filter(notificationGroups, function(group) {
+            return group.project.metadata.name === $routeParams.project;
+          });
+        });
+      };
+
+      // TODO: follow-on PR to decide which of these events to toast,
+      // via config in constants.js
+      var eventWatchCallback = function(eventData) {
+        eventsByNameData = eventData.by('metadata.name');
+        eventsMap = formatAndFilterEvents(eventsByNameData);
+        // TODO: Update to an intermediate map, so that we can then combine both
+        // events + notifications into the final notificationGroups output
+        notificationGroups = sortNotificationGroups(eventsMap);
+        render();
+      };
+
+      // TODO: Follow-on PR to update & add the internal notifications to the
+      // var notificationWatchCallback = function(event, notification) {
+      //   // will need to add .event = {} and immitate structure
+      //   if(!notification.lastTimestamp) {
+      //     // creates a timestamp that matches event format: 2017-08-09T19:55:35Z
+      //     notification.lastTimestamp = moment.parseZone(new Date()).utc().format();
+      //   }
+      //   clientGeneratedNotifications.push(notification);
+      // };
+
+      var iconClassByEventSeverity = {
+        Normal: 'pficon pficon-info',
+        Warning: 'pficon pficon-warning-triangle-o'
+      };
+
+      angular.extend(drawer, {
+        drawerHidden: true,
+        allowExpand: true,
+        drawerExpanded: false,
+        drawerTitle: 'Notifications',
+        hasUnread: false,
+        showClearAll: true,
+        showMarkAllRead: true,
+        onClose: function() {
+          drawer.drawerHidden = true;
+        },
+        onMarkAllRead: function(group) {
+          _.each(group.notifications, function(notification) {
+            notification.unread = false;
+            EventsService.markRead(notification.event);
+          });
+          render();
+          $rootScope.$emit('NotificationDrawerWrapper.onMarkAllRead');
+        },
+        onClearAll: function(group) {
+          _.each(group.notifications, function(notification) {
+            EventsService.markRead(notification.event);
+            EventsService.markCleared(notification.event);
+          });
+          group.notifications = [];
+          render();
+          $rootScope.$emit('NotificationDrawerWrapper.onMarkAllRead');
+        },
+        notificationGroups: notificationGroups,
+        headingInclude: 'views/directives/notifications/header.html',
+        notificationBodyInclude: 'views/directives/notifications/notification-body.html',
+        customScope: {
+          clear: function(notification, index, group) {
+            EventsService.markCleared(notification.event);
+            group.notifications.splice(index, 1);
+            countUnreadNotificationsForAllGroups();
+          },
+          markRead: function(notification) {
+            notification.unread = false;
+            EventsService.markRead(notification.event);
+            countUnreadNotificationsForAllGroups();
+          },
+          getNotficationStatusIconClass: function(event) {
+            return iconClassByEventSeverity[event.type] || iconClassByEventSeverity.info;
+          },
+          getStatusForCount:  function(countKey) {
+            return iconClassByEventSeverity[countKey] || iconClassByEventSeverity.info;
+          },
+          close: function() {
+            drawer.drawerHidden = true;
+          }
+        }
+      });
+
+      var projectChanged = function(next, current) {
+        return _.get(next, 'params.project') !== _.get(current, 'params.project');
+      };
+
+      var reset = function() {
+        getProject($routeParams.project).then(function() {
+          watchEvents($routeParams.project, eventWatchCallback);
+          //watchNotifications($routeParams.project, notificationWatchCallback);
+          hideIfNoProject($routeParams.project);
+          render();
+        });
+      };
+
+      var initWatches = function() {
+        if($routeParams.project) {
+          reset();
+        }
+        // $routeChangeSuccess seems more reliable than $locationChangeSuccess:
+        // - it fires once on initial load. $locationChangeSuccess does not.
+        // - it waits for more object resolution (not a huge deal in this use case)
+        // - tracks route data instead of urls (args to callback fn, also not
+        //   necessary for the current use case)
+        rootScopeWatches.push($rootScope.$on("$routeChangeSuccess", function (evt, next, current) {
+          if(projectChanged(next, current)) {
+            drawer.customScope.projectName = $routeParams.project;
+            reset();
+          }
+        }));
+
+        // event from the counter to signal the drawer to open/close
+        rootScopeWatches.push($rootScope.$on('NotificationDrawerWrapper.toggle', function() {
+          drawer.drawerHidden = !drawer.drawerHidden;
+        }));
+      };
+
+      drawer.$onInit = function() {
+        if(DISABLE_GLOBAL_EVENT_WATCH || LIMIT_WATCHES) {
+          return;
+        }
+        initWatches();
+      };
+
+      drawer.$onDestroy = function() {
+        deregisterNotificationListener();
+        deregisterEventsWatch();
+        deregisterRootScopeWatches();
+      };
+
+  }
+
+})();
diff --git a/app/scripts/filters/util.js b/app/scripts/filters/util.js
index 122db3944a..ea843b6ea2 100644
--- a/app/scripts/filters/util.js
+++ b/app/scripts/filters/util.js
@@ -356,6 +356,16 @@ angular.module('openshiftConsole')
       return Navigate.resourceURL(resource, kind, namespace, null, {apiVersion: apiVersion});
     };
   })
+  .filter('navigateEventInvolvedObjectURL', function(Navigate) {
+    return function(event) {
+      return Navigate.resourceURL(
+        event.involvedObject.name,
+        event.involvedObject.kind,
+        event.involvedObject.namespace,
+        null,
+        {apiVersion: event.involvedObject.apiVersion});
+    };
+  })
   // Resource must be the resource object itself, it can NOT be a name.
   .filter('navigateToTabURL', function (Navigate) {
     return function(resource, tab) {
diff --git a/app/scripts/services/browserStore.js b/app/scripts/services/browserStore.js
new file mode 100644
index 0000000000..1ed089fa51
--- /dev/null
+++ b/app/scripts/services/browserStore.js
@@ -0,0 +1,25 @@
+'use strict';
+
+angular.module('openshiftConsole')
+  .factory('BrowserStore', [
+    function() {
+      var prefix = 'openshift/';
+      // NOTE: we could impl `memory` & `cookie` as well, if useful.
+      var stores = {
+        local: window.localStorage,
+        session: window.sessionStorage
+      };
+
+      // USAGE:
+      // BrowserStore.saveJSON('session', 'my-key', someData);
+      // BrowserStore.loadJSON('session', 'my-key');
+      return {
+        saveJSON: function(storeType, storeKey, data) {
+          return stores[storeType].setItem(prefix + storeKey, JSON.stringify(data));
+        },
+        loadJSON: function(storeType, storeKey) {
+          return JSON.parse(stores[storeType].getItem(prefix + storeKey) || '{}');
+        }
+      };
+    }
+  ]);
diff --git a/app/scripts/services/events.js b/app/scripts/services/events.js
new file mode 100644
index 0000000000..a892cba59e
--- /dev/null
+++ b/app/scripts/services/events.js
@@ -0,0 +1,48 @@
+'use strict';
+
+angular.module('openshiftConsole')
+  .factory('EventsService', [
+    'BrowserStore',
+    function(BrowserStore) {
+
+      var READ = 'read';
+      var CLEARED = 'cleared';
+
+      var cachedEvents = BrowserStore.loadJSON('session','events') || {};
+
+      var EVENTS_TO_SHOW_BY_REASON = _.get(window, 'OPENSHIFT_CONSTANTS.EVENTS_TO_SHOW');
+
+      var isImportantEvent = function(event) {
+        var reason = event.reason;
+        return EVENTS_TO_SHOW_BY_REASON[reason];
+      };
+
+      var markRead = function(event) {
+        _.set(cachedEvents, [event.metadata.uid, READ], true);
+        BrowserStore.saveJSON('session','events', cachedEvents);
+      };
+
+      var markCleared = function(event) {
+        _.set(cachedEvents, [event.metadata.uid, CLEARED], true);
+        BrowserStore.saveJSON('session','events', cachedEvents);
+      };
+
+      var isRead = function(event) {
+        return _.get(cachedEvents, [event.metadata.uid, READ]);
+      };
+
+      var isCleared = function(event) {
+        return _.get(cachedEvents, [event.metadata.uid, CLEARED]);
+      };
+
+      return {
+        isImportantEvent: isImportantEvent,
+        // read removes the event bold effect
+        markRead: markRead,
+        isRead: isRead,
+        // cleared removes event from the list
+        markCleared: markCleared,
+        isCleared: isCleared
+      };
+    }
+  ]);
diff --git a/app/styles/_notifications.less b/app/styles/_notifications.less
new file mode 100644
index 0000000000..872df6aff4
--- /dev/null
+++ b/app/styles/_notifications.less
@@ -0,0 +1,67 @@
+// fixes positioning that doesn't quite work w/core patternfly styles
+.navbar-pf-alt .nav .nav-item-iconic .badge {
+  font-size: 9px;
+  margin: -15px 0 0 -12px;
+  min-width: 10px;
+  min-height: 10px;
+}
+
+notification-drawer-wrapper {
+  .drawer-pf {
+    height: calc(~"100vh - 80px"); //to create a 20px offset bottom
+    top: @navbar-os-header-height-desktop - 10;
+    z-index: @zindex-navbar-fixed + 1; // was 1050
+    .tech-preview & {
+      top: @navbar-os-header-height-desktop + @tech-preview-banner-height - 10;
+    }
+  }
+  // the whole block is clickable, need to set pointer on all of these
+  // for the correct visual
+  .drawer-pf-notification,
+  .drawer-pf-notification-info,
+  .drawer-pf-notification-message {
+    cursor: pointer;
+  }
+  .drawer-pf-notification {
+    padding: 0px;
+  }
+  .drawer-pf-notification.ng-leave {
+    transition:0.25s linear all;
+    opacity:1;
+  }
+  .drawer-pf-notification.ng-leave.ng-leave-active {
+    opacity:0;
+  }
+  .drawer-pf-notification-inner {
+    padding:15px;
+    .pficon-close {
+      color: #000;
+    }
+  }
+  .expanded-notification {
+    .drawer-pf-notification-message {
+      max-width: 35%; // keeps flex in check in case of a really long message
+    }
+  }
+}
+
+.panel-heading {
+  .panel-title {
+    // TODO: hack to eliminate side-to-side wobble
+    // There is a hard-coded <h4> that wraps the header:
+    //   - https://github.com/patternfly/angular-patternfly/issues/539
+    // I'm putting quite a bit of markup inside the header,
+    // need to tinker to eliminate this rule.
+    overflow:hidden;
+    .container-fluid {
+      margin-left: 0;
+      margin-right: 0;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  .small {
+    .small();
+    color: #000000;
+  }
+}
diff --git a/app/styles/main.less b/app/styles/main.less
index ce15a0b5d0..e53c940fdb 100644
--- a/app/styles/main.less
+++ b/app/styles/main.less
@@ -56,6 +56,7 @@
 @import "_container-terminal.less";
 @import "_kve.less";
 @import "_membership.less";
+@import "_notifications.less";
 @import "_action-chip.less";
 @import "_application-launcher";
 @import "_wizard.less";
diff --git a/app/views/directives/events-sidebar.html b/app/views/directives/events-sidebar.html
index 20eecf8a36..8bf33cc341 100644
--- a/app/views/directives/events-sidebar.html
+++ b/app/views/directives/events-sidebar.html
@@ -1,8 +1,8 @@
 <div class="right-container events-sidebar" ng-hide="sidebarCollapsed">
   <div class="sidebar-header right-header">
-    <div>      
+    <div>
       <h2>
-        <span class="events-sidebar-collapse"><a href="" class="fa fa-arrow-circle-o-right" title="Collapse event sidebar" ng-click="collapseSidebar()"><span class="sr-only">Collapse event sidebar</span></a></span>        
+        <span class="events-sidebar-collapse"><a href="" class="fa fa-arrow-circle-o-right" title="Collapse event sidebar" ng-click="collapseSidebar()"><span class="sr-only">Collapse event sidebar</span></a></span>
         Events
         <small ng-if="warningCount" class="warning-count">
           <span class="pficon pficon-warning-triangle-o"></span>
@@ -37,8 +37,16 @@ <h2>
             <div class="event-reason">
               {{event.reason | sentenceCase}}
             </div>
-            <div class="event-object">
-              {{event.involvedObject.kind | kindToResource | abbreviateResource}}/{{event.involvedObject.name}}
+            <div
+              class="event-object"
+              ng-init="resourceURL = (event | navigateEventInvolvedObjectURL)">
+              <a
+                ng-if="resourceURL"
+                ng-attr-title="Navigate to {{event.involvedObject.name}}"
+                href="{{resourceURL}}">
+                {{event.involvedObject.kind | kindToResource | abbreviateResource}}/{{event.involvedObject.name}}
+              </a>
+              <span ng-if="!(resourceURL)">{{event.involvedObject.kind | kindToResource | abbreviateResource}}/{{event.involvedObject.name}}</span>
             </div>
           </div>
           <div class="detail-group">
diff --git a/app/views/directives/events.html b/app/views/directives/events.html
index 2ee31718c3..c94eda650f 100644
--- a/app/views/directives/events.html
+++ b/app/views/directives/events.html
@@ -76,7 +76,7 @@
           <div class="hidden-xs-block visible-sm-block visible-md-block hidden-lg-block">
             <span ng-bind-html="event.involvedObject.kind | humanizeKind : true | highlightKeywords : filterExpressions"></span>
           </div>
-          <span ng-init="resourceURL = (event.involvedObject.name | navigateResourceURL : event.involvedObject.kind : event.metadata.namespace : event.involvedObject.apiVersion)">
+          <span ng-init="resourceURL = (event | navigateEventInvolvedObjectURL)">
             <a
               ng-href="{{resourceURL}}"
               ng-if="resourceURL"><span ng-bind-html="event.involvedObject.name | highlightKeywords : filterExpressions"></span></a>
diff --git a/app/views/directives/header/_navbar-utility.html b/app/views/directives/header/_navbar-utility.html
index 497bfed8e5..a93336a716 100644
--- a/app/views/directives/header/_navbar-utility.html
+++ b/app/views/directives/header/_navbar-utility.html
@@ -1,4 +1,7 @@
 <ul class="nav navbar-nav navbar-right navbar-iconic">
+  <li>
+    <notification-counter></notification-counter>
+  </li>
   <li
     extension-point
     extension-name="nav-system-status"
@@ -20,7 +23,6 @@
       extension-name="nav-help-dropdown"
       extension-types="dom html"><!-- extension points generated here --></ul>
   </li>
-
   <li uib-dropdown ng-cloak ng-if="user">
     <a href="" uib-dropdown-toggle id="user-dropdown" class="nav-item-iconic">
       <span class="pf-icon pficon-user" aria-hidden="true"></span>
diff --git a/app/views/directives/notifications/header.html b/app/views/directives/notifications/header.html
new file mode 100644
index 0000000000..c4d3f3ec85
--- /dev/null
+++ b/app/views/directives/notifications/header.html
@@ -0,0 +1,20 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-6">
+      <strong>{{notificationGroup.heading}}</strong>
+    </div>
+    <div class="col-xs-6 text-right small">
+      <a
+        title="All Events"
+        ng-href="project/{{$ctrl.customScope.projectName}}/browse/events"
+        ng-click="$ctrl.customScope.close()">
+        View All Events
+      </a>
+    </div>
+  </div>
+  <div class="row mar-top-md">
+    <div class="col-xs-12">
+      <em>{{notificationGroup.totalUnread}} Unread</em>
+    </div>
+  </div>
+</div>
diff --git a/app/views/directives/notifications/notification-body.html b/app/views/directives/notifications/notification-body.html
new file mode 100644
index 0000000000..dd0c4227f8
--- /dev/null
+++ b/app/views/directives/notifications/notification-body.html
@@ -0,0 +1,89 @@
+<div
+  class="drawer-pf-notification-inner"
+  tabindex="0"
+  ng-click="$ctrl.customScope.markRead(notification)">
+  <a
+    class="pull-right"
+    tabindex="0"
+    ng-click="$ctrl.customScope.clear(notification, $index, notificationGroup)">
+    <span class="sr-only">Clear notification</span>
+    <span
+      ng-if="notification.event"
+      aria-hidden="true"
+      class="pull-left pficon pficon-close"></span>
+  </a>
+  <div
+    uib-dropdown
+    class="dropdown pull-right dropdown-kebab-pf"
+    ng-if="notification.actions.length">
+    <button
+      uib-dropdown-toggle
+      class="btn btn-link dropdown-toggle"
+      type="button"
+      id="dropdownKebabRight-{{$id}}"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="true">
+      <span class="fa fa-ellipsis-v"></span>
+    </button>
+    <ul
+      class="dropdown-menu dropdown-menu-right"
+      aria-labelledby="dropdownKebabRight">
+      <li
+        ng-repeat="action in notification.actions"
+        role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
+        ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
+        <a
+          ng-if="!action.isSeparator"
+          href=""
+          class="secondary-action"
+          title="{{action.title}}"
+          ng-click="$ctrl.customScope.handleAction(notification, action)">
+          {{action.name}}
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <span
+    ng-if="notification.event"
+    aria-hidden="true"
+    class="pull-left"
+    ng-class="$ctrl.customScope.getNotficationStatusIconClass(notification.event)"></span>
+  <span class="sr-only">{{notification.event.type}}</span>
+  <div class="drawer-pf-notification-content">
+    <div
+      class="drawer-pf-notification-message"
+      ng-attr-title="{{notification.event.message}}">
+      <div>
+        <span>
+          {{notification.event.reason | humanize}} &mdash; {{notification.event.involvedObject.kind | humanize}}
+        </span>
+        <span ng-init="eventObjUrl = (notification.event | navigateEventInvolvedObjectURL)">
+          <a
+            ng-if="eventObjUrl"
+            ng-attr-title="Navigate to {{notification.event.involvedObject.name}}"
+            href="{{eventObjUrl}}"
+            ng-click="$ctrl.customScope.close()">
+            {{notification.event.involvedObject.name}}
+          </a>
+          <span ng-if="!(eventObjUrl)">{{notification.event.involvedObject.name}}</span>
+        </span>
+      </div>
+      <div
+        ng-if="notification.event.count > 1"
+        class="text-muted small">
+        {{notification.event.count}} times in the last
+        <duration-until-now timestamp="notification.event.firstTimestamp" omit-single="true" precision="1"></duration-until-now>
+      </div>
+    </div>
+
+    <span ng-if="$ctrl.drawerExpanded" class="drawer-pf-notification-message text-muted small word-break">
+      {{notification.event.message}}
+    </span>
+    <div class="drawer-pf-notification-info">
+      <span class="date">{{notification.event.lastTimestamp | date:'shortDate'}}</span>
+      <span class="time">{{notification.event.lastTimestamp | date:'mediumTime'}}</span>
+    </div>
+  </div>
+</div>
diff --git a/app/views/directives/notifications/notification-counter.html b/app/views/directives/notifications/notification-counter.html
new file mode 100644
index 0000000000..4170e9a096
--- /dev/null
+++ b/app/views/directives/notifications/notification-counter.html
@@ -0,0 +1,7 @@
+<li class="drawer-pf-trigger" ng-if="!$ctrl.hide">
+  <a href="" class="nav-item-iconic" ng-click="$ctrl.onClick()">
+    <span class="fa fa-bell" title="Notifications" aria-hidden="true"></span>
+    <span ng-if="$ctrl.showUnreadNotificationsIndicator" class="badge"> </span>
+    <span class="sr-only">Notifications</span>
+  </a>
+</li>
diff --git a/app/views/directives/notifications/notification-drawer-wrapper.html b/app/views/directives/notifications/notification-drawer-wrapper.html
new file mode 100644
index 0000000000..3f33f05ae7
--- /dev/null
+++ b/app/views/directives/notifications/notification-drawer-wrapper.html
@@ -0,0 +1,14 @@
+<pf-notification-drawer
+  drawer-hidden="$ctrl.drawerHidden"
+  allow-expand="$ctrl.allowExpand"
+  drawer-expanded="$ctrl.drawerExpanded"
+  drawer-title="{{$ctrl.drawerTitle}}"
+  show-clear-all="$ctrl.showClearAll"
+  show-mark-all-read="$ctrl.showMarkAllRead"
+  notification-groups="$ctrl.notificationGroups"
+  heading-include="{{$ctrl.headingInclude}}"
+  notification-body-include="{{$ctrl.notificationBodyInclude}}"
+  on-close="$ctrl.onClose"
+  on-mark-all-read="$ctrl.onMarkAllRead"
+  on-clear-all="$ctrl.onClearAll"
+  custom-scope="$ctrl.customScope"></pf-notification-drawer>
diff --git a/dist/index.html b/dist/index.html
index b4554afc7c..69d416abc9 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -21,6 +21,7 @@
 </head>
 <body class="console-os">
 <toast-notifications></toast-notifications>
+<notification-drawer-wrapper></notification-drawer-wrapper>
 <div ng-view>
 <nav class="navbar navbar-pf-alt top-header" role="navigation">
 <div row>
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
index badb5c1aa8..582bcf0475 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -3,7 +3,7 @@
 function OverviewController(e, t, n, a, r, o, i, s, c, l, u, d, m, p, g, f, h, v, y, b, C, S, w, k, j) {
 var P = this, R = t("isIE")() || t("isEdge")();
 e.projectName = n.project;
-var E, T, I = t("annotation"), N = t("buildConfigForBuild"), D = t("deploymentIsInProgress"), A = t("imageObjectRef"), B = t("isJenkinsPipelineStrategy"), L = t("isNewerResource"), U = t("label"), O = t("podTemplate"), x = {}, F = {}, M = {}, V = P.state = {
+var E, T, N = t("annotation"), I = t("buildConfigForBuild"), D = t("deploymentIsInProgress"), A = t("imageObjectRef"), B = t("isJenkinsPipelineStrategy"), L = t("isNewerResource"), U = t("label"), O = t("podTemplate"), x = {}, F = {}, M = {}, V = P.state = {
 alerts: {},
 builds: {},
 clusterQuotas: {},
@@ -51,12 +51,12 @@ var z = function(e) {
 return _.get(e, "metadata.name");
 }, H = function(e) {
 return _.get(e, "metadata.uid");
-}, K = function() {
+}, W = function() {
 return _.size(P.deploymentConfigs) + _.size(P.vanillaReplicationControllers) + _.size(P.deployments) + _.size(P.vanillaReplicaSets) + _.size(P.statefulSets) + _.size(P.monopods) + _.size(P.state.serviceInstances);
 }, G = function() {
 return _.size(P.filteredDeploymentConfigs) + _.size(P.filteredReplicationControllers) + _.size(P.filteredDeployments) + _.size(P.filteredReplicaSets) + _.size(P.filteredStatefulSets) + _.size(P.filteredMonopods) + _.size(P.filteredServiceInstances);
-}, W = function() {
-P.size = K(), P.filteredSize = G();
+}, K = function() {
+P.size = W(), P.filteredSize = G();
 var e = 0 === P.size, t = P.deploymentConfigs && P.replicationControllers && P.deployments && P.replicaSets && P.statefulSets && P.pods && P.state.serviceInstances;
 V.expandAll = t && 1 === P.size, P.showGetStarted = t && e, P.showLoading = !t && e, P.everythingFiltered = !e && !P.filteredSize, P.hidePipelineOtherResources = "pipeline" === P.viewBy && (P.filterActive || _.isEmpty(P.pipelineBuildConfigs));
 }, Q = function(e) {
@@ -119,7 +119,7 @@ case "name":
 return !_.isEmpty(V.filterKeywords);
 }
 }, ie = function() {
-P.filteredDeploymentConfigs = re(P.deploymentConfigs), P.filteredReplicationControllers = re(P.vanillaReplicationControllers), P.filteredDeployments = re(P.deployments), P.filteredReplicaSets = re(P.vanillaReplicaSets), P.filteredStatefulSets = re(P.statefulSets), P.filteredMonopods = re(P.monopods), P.filteredPipelineBuildConfigs = re(P.pipelineBuildConfigs), P.filteredServiceInstances = re(V.orderedServiceInstances), P.filterActive = oe(), Z(), W();
+P.filteredDeploymentConfigs = re(P.deploymentConfigs), P.filteredReplicationControllers = re(P.vanillaReplicationControllers), P.filteredDeployments = re(P.deployments), P.filteredReplicaSets = re(P.vanillaReplicaSets), P.filteredStatefulSets = re(P.statefulSets), P.filteredMonopods = re(P.monopods), P.filteredPipelineBuildConfigs = re(P.pipelineBuildConfigs), P.filteredServiceInstances = re(V.orderedServiceInstances), P.filterActive = oe(), Z(), K();
 }, se = n.project + "/overview/view-by";
 P.viewBy = localStorage.getItem(se) || "app", e.$watch(function() {
 return P.viewBy;
@@ -205,13 +205,13 @@ _.isEmpty(e) || (f.addLabelSuggestionsFromResources(e, x), "pipeline" !== P.view
 }, ke = function(e) {
 _.isEmpty(e) || (f.addLabelSuggestionsFromResources(e, F), "pipeline" === P.viewBy && f.setLabelSuggestions(F));
 }, je = function(e) {
-return "Succeeded" !== e.status.phase && "Failed" !== e.status.phase && (!U(e, "openshift.io/deployer-pod-for.name") && (!I(e, "openshift.io/build.name") && "slave" !== U(e, "jenkins")));
+return "Succeeded" !== e.status.phase && "Failed" !== e.status.phase && (!U(e, "openshift.io/deployer-pod-for.name") && (!N(e, "openshift.io/build.name") && "slave" !== U(e, "jenkins")));
 }, Pe = function() {
 V.podsByOwnerUID = C.groupByOwnerUID(P.pods), P.monopods = _.filter(V.podsByOwnerUID[""], je);
 }, Re = function(e) {
-return !!_.get(e, "status.replicas") || (!I(e, "deploymentConfig") || D(e));
+return !!_.get(e, "status.replicas") || (!N(e, "deploymentConfig") || D(e));
 }, Ee = function(e) {
-return I(e, "deploymentConfig");
+return N(e, "deploymentConfig");
 }, Te = function() {
 if (P.deploymentConfigs && P.replicationControllers) {
 var e = [];
@@ -223,7 +223,7 @@ var r = Ee(a) || "";
 var o = M[r];
 o && !L(a, o) || (M[r] = a);
 var i;
-"Complete" === I(a, "deploymentStatus") && ((i = t[r]) && !L(a, i) || (t[r] = a)), Re(a) && _.set(n, [ r, a.metadata.name ], a);
+"Complete" === N(a, "deploymentStatus") && ((i = t[r]) && !L(a, i) || (t[r] = a)), Re(a) && _.set(n, [ r, a.metadata.name ], a);
 }), _.each(t, function(e, t) {
 _.set(n, [ t, e.metadata.name ], e);
 }), _.each(n, function(e, t) {
@@ -231,15 +231,15 @@ var n = u.sortByDeploymentVersion(e, !0);
 P.replicationControllersByDeploymentConfig[t] = n, P.currentByDeploymentConfig[t] = _.head(n);
 }), P.vanillaReplicationControllers = _.sortBy(e, "metadata.name"), ve();
 }
-}, Ie = function(e, t) {
+}, Ne = function(e, t) {
 if (_.get(e, "status.replicas")) return !0;
 var n = u.getRevision(e);
 return !n || !!t && u.getRevision(t) === n;
-}, Ne = function() {
+}, Ie = function() {
 P.replicaSets && E && (P.replicaSetsByDeploymentUID = b.groupByControllerUID(P.replicaSets), P.currentByDeploymentUID = {}, _.each(P.replicaSetsByDeploymentUID, function(e, t) {
 if (t) {
 var n = E[t], a = _.filter(e, function(e) {
-return Ie(e, n);
+return Ne(e, n);
 }), r = u.sortByRevision(a);
 P.replicaSetsByDeploymentUID[t] = r, P.currentByDeploymentUID[t] = _.head(r);
 }
@@ -265,7 +265,7 @@ V.routesByService = _.mapValues(e, j.sortRoutesByScore), Y();
 }, Le = function() {
 V.hpaByResource = d.groupHPAs(P.horizontalPodAutoscalers);
 }, Ue = function(e) {
-var t = N(e), n = P.buildConfigs[t];
+var t = I(e), n = P.buildConfigs[t];
 if (n) {
 P.recentPipelinesByBuildConfig[t] = P.recentPipelinesByBuildConfig[t] || [], P.recentPipelinesByBuildConfig[t].push(e);
 var a = i.usesDeploymentConfigs(n);
@@ -313,14 +313,14 @@ _.isEmpty(o) || (t = t.concat(o));
 });
 }, He = function() {
 qe(), ze();
-}, Ke = function() {
+}, We = function() {
 _.each(P.deploymentConfigs, Me);
 }, Ge = function() {
 if (V.builds && P.buildConfigs) {
 P.recentPipelinesByBuildConfig = {}, V.recentBuildsByBuildConfig = {}, V.recentPipelinesByDeploymentConfig = {};
 var e = {};
 _.each(i.interestingBuilds(V.builds), function(t) {
-var n = N(t);
+var n = I(t);
 B(t) ? Ue(t) : (e[n] = e[n] || [], e[n].push(t));
 }), P.recentPipelinesByBuildConfig = _.mapValues(P.recentPipelinesByBuildConfig, function(e) {
 return i.sortBuilds(e, !0);
@@ -328,9 +328,9 @@ return i.sortBuilds(e, !0);
 return i.sortBuilds(e, !0);
 }), V.recentBuildsByBuildConfig = _.mapValues(e, function(e) {
 return i.sortBuilds(e, !0);
-}), Ke();
+}), We();
 }
-}, We = function() {
+}, Ke = function() {
 k.setGenericQuotaWarning(V.quotas, V.clusterQuotas, n.project, V.alerts);
 };
 P.clearFilter = function() {
@@ -383,17 +383,17 @@ P.pods = e.by("metadata.name"), Pe(), r(), _e(), $e(P.monopods), pe(P.monopods),
 })), Ye.push(l.watch("replicationcontrollers", a, function(e) {
 P.replicationControllers = e.by("metadata.name"), Te(), $e(P.vanillaReplicationControllers), $e(P.monopods), pe(P.vanillaReplicationControllers), we(P.vanillaReplicationControllers), Qe(), ie(), h.log("replicationcontrollers (subscribe)", P.replicationControllers);
 })), Ye.push(l.watch("deploymentconfigs", a, function(e) {
-P.deploymentConfigs = e.by("metadata.name"), Te(), $e(P.deploymentConfigs), $e(P.vanillaReplicationControllers), we(P.deploymentConfigs), Ce(), He(), Ke(), Qe(), ie(), h.log("deploymentconfigs (subscribe)", P.deploymentConfigs);
+P.deploymentConfigs = e.by("metadata.name"), Te(), $e(P.deploymentConfigs), $e(P.vanillaReplicationControllers), we(P.deploymentConfigs), Ce(), He(), We(), Qe(), ie(), h.log("deploymentconfigs (subscribe)", P.deploymentConfigs);
 })), Ye.push(l.watch({
 group: "extensions",
 resource: "replicasets"
 }, a, function(e) {
-P.replicaSets = e.by("metadata.name"), Ne(), $e(P.vanillaReplicaSets), $e(P.monopods), pe(P.vanillaReplicaSets), we(P.vanillaReplicaSets), Qe(), ie(), h.log("replicasets (subscribe)", P.replicaSets);
+P.replicaSets = e.by("metadata.name"), Ie(), $e(P.vanillaReplicaSets), $e(P.monopods), pe(P.vanillaReplicaSets), we(P.vanillaReplicaSets), Qe(), ie(), h.log("replicasets (subscribe)", P.replicaSets);
 })), Ye.push(l.watch({
 group: "apps",
 resource: "deployments"
 }, a, function(e) {
-E = e.by("metadata.uid"), P.deployments = _.sortBy(E, "metadata.name"), Ne(), $e(P.deployments), $e(P.vanillaReplicaSets), we(P.deployments), Qe(), ie(), h.log("deployments (subscribe)", P.deploymentsByUID);
+E = e.by("metadata.uid"), P.deployments = _.sortBy(E, "metadata.name"), Ie(), $e(P.deployments), $e(P.vanillaReplicaSets), we(P.deployments), Qe(), ie(), h.log("deployments (subscribe)", P.deploymentsByUID);
 })), Ye.push(l.watch("builds", a, function(e) {
 V.builds = e.by("metadata.name"), Ge(), h.log("builds (subscribe)", V.builds);
 })), Ye.push(l.watch({
@@ -434,12 +434,12 @@ T = e.by("metadata.name"), p.buildDockerRefMapForImageStreams(T, V.imageStreamIm
 poll: R,
 pollInterval: 6e4
 })), Ye.push(l.watch("resourcequotas", a, function(e) {
-V.quotas = e.by("metadata.name"), We();
+V.quotas = e.by("metadata.name"), Ke();
 }, {
 poll: !0,
 pollInterval: 6e4
 })), Ye.push(l.watch("appliedclusterresourcequotas", a, function(e) {
-V.clusterQuotas = e.by("metadata.name"), We();
+V.clusterQuotas = e.by("metadata.name"), Ke();
 }, {
 poll: !0,
 pollInterval: 6e4
@@ -600,6 +600,7 @@ DISABLE_CUSTOM_METRICS: !1,
 DISABLE_WILDCARD_ROUTES: !0,
 DISABLE_CONFIRM_ON_EXIT: !1,
 AVAILABLE_KINDS_BLACKLIST: [],
+DISABLE_GLOBAL_EVENT_WATCH: !1,
 ENABLE_TECH_PREVIEW_FEATURE: {
 service_catalog_landing_page: !1,
 template_service_broker: !1,
@@ -710,6 +711,31 @@ group: ""
 resource: "statefulsets",
 group: "apps"
 } ],
+EVENTS_TO_SHOW: {
+FailedCreate: !0,
+FailedDelete: !0,
+FailedUpdate: !0,
+BuildStarted: !0,
+BuildCompleted: !0,
+BuildFailed: !0,
+BuildCancelled: !0,
+Failed: !0,
+ScalingReplicaSet: !0,
+DeploymentCancelled: !0,
+DeploymentCreated: !0,
+DeploymentCreationFailed: !0,
+FailedSync: !0,
+BackOff: !0,
+Unhealthy: !0,
+Pulling: !0,
+Pulled: !0,
+SuccessfulRescale: !0,
+FailedRescale: !0,
+LoadBalancerUpdateFailed: !0,
+VolumeDeleted: !0,
+FailedBinding: !0,
+ProvisioningFailed: !0
+},
 PROJECT_NAVIGATION: [ {
 label: "Overview",
 iconClass: "fa fa-dashboard",
@@ -909,7 +935,7 @@ description: ""
 } ],
 SAAS_OFFERINGS: [],
 APP_LAUNCHER_NAVIGATION: []
-}), angular.module("openshiftConsole", [ "ngAnimate", "ngCookies", "ngResource", "ngRoute", "ngSanitize", "kubernetesUI", "registryUI.images", "ui.bootstrap", "patternfly.charts", "patternfly.navigation", "patternfly.sort", "openshiftConsoleTemplates", "ui.ace", "extension-registry", "as.sortable", "ui.select", "angular-inview", "angularMoment", "ab-base64", "openshiftCommonServices", "openshiftCommonUI", "webCatalog" ]).config([ "$routeProvider", function(e) {
+}), angular.module("openshiftConsole", [ "ngAnimate", "ngCookies", "ngResource", "ngRoute", "ngSanitize", "kubernetesUI", "registryUI.images", "ui.bootstrap", "patternfly.charts", "patternfly.navigation", "patternfly.sort", "patternfly.notification", "openshiftConsoleTemplates", "ui.ace", "extension-registry", "as.sortable", "ui.select", "angular-inview", "angularMoment", "ab-base64", "openshiftCommonServices", "openshiftCommonUI", "webCatalog" ]).config([ "$routeProvider", function(e) {
 var t, n = {
 templateUrl: "views/projects.html",
 controller: "ProjectsController"
@@ -1226,7 +1252,20 @@ return $(this).data("time-only") ? t(r, null) || a : e(r, null, o, i) || a;
 e && $("body").addClass("ios");
 } ]).run([ "$rootScope", function(e) {
 _.get(window, "OPENSHIFT_CONSTANTS.ENABLE_TECH_PREVIEW_FEATURE.service_catalog_landing_page") && (e.globalTechPreviewIndicator = !0, $("body").addClass("tech-preview"));
-} ]), hawtioPluginLoader.addModule("openshiftConsole"), angular.module("openshiftConsole").factory("APIDiscovery", [ "LOGGING_URL", "METRICS_URL", "$q", function(e, t, n) {
+} ]), hawtioPluginLoader.addModule("openshiftConsole"), angular.module("openshiftConsole").factory("BrowserStore", [ function() {
+var e = {
+local: window.localStorage,
+session: window.sessionStorage
+};
+return {
+saveJSON: function(t, n, a) {
+return e[t].setItem("openshift/" + n, JSON.stringify(a));
+},
+loadJSON: function(t, n) {
+return JSON.parse(e[t].getItem("openshift/" + n) || "{}");
+}
+};
+} ]), angular.module("openshiftConsole").factory("APIDiscovery", [ "LOGGING_URL", "METRICS_URL", "$q", function(e, t, n) {
 return {
 getLoggingURL: function() {
 return n.when(e);
@@ -4231,6 +4270,26 @@ y();
 }), v && e.$on("$locationChangeStart", function(t) {
 g.search().startTour && (e.startGuidedTour(), t.preventDefault());
 });
+} ]), angular.module("openshiftConsole").factory("EventsService", [ "BrowserStore", function(e) {
+var t = e.loadJSON("session", "events") || {}, n = _.get(window, "OPENSHIFT_CONSTANTS.EVENTS_TO_SHOW");
+return {
+isImportantEvent: function(e) {
+var t = e.reason;
+return n[t];
+},
+markRead: function(n) {
+_.set(t, [ n.metadata.uid, "read" ], !0), e.saveJSON("session", "events", t);
+},
+isRead: function(e) {
+return _.get(t, [ e.metadata.uid, "read" ]);
+},
+markCleared: function(n) {
+_.set(t, [ n.metadata.uid, "cleared" ], !0), e.saveJSON("session", "events", t);
+},
+isCleared: function(e) {
+return _.get(t, [ e.metadata.uid, "cleared" ]);
+}
+};
 } ]), angular.module("openshiftConsole").controller("ProjectsController", [ "$scope", "$filter", "$location", "$route", "$timeout", "AuthService", "DataService", "KeywordService", "Navigate", "Logger", "ProjectsService", function(e, t, n, a, r, o, i, s, c, l, u) {
 var d, m, p = [], g = [], f = !1;
 e.alerts = e.alerts || {}, e.loading = !0, e.showGetStarted = !1, e.canCreate = void 0, e.search = {
@@ -4649,12 +4708,12 @@ n.filteredStatefulSets = s.filterForKeywords(_.values(n.statefulSets), S, w);
 b = _.filter(n.pods, function(e) {
 return !n.filters.hideOlderResources || "Succeeded" !== e.status.phase && "Failed" !== e.status.phase;
 }), n.filteredPods = s.filterForKeywords(b, S, w);
-}, I = a("isIncompleteBuild"), N = a("buildConfigForBuild"), D = a("isRecentBuild"), A = function() {
+}, N = a("isIncompleteBuild"), I = a("buildConfigForBuild"), D = a("isRecentBuild"), A = function() {
 moment().subtract(5, "m");
 h = _.filter(n.builds, function(e) {
 if (!n.filters.hideOlderResources) return !0;
-if (I(e)) return !0;
-var t = N(e);
+if (N(e)) return !0;
+var t = I(e);
 return t ? n.latestBuildByConfig[t].metadata.name === e.metadata.name : D(e);
 }), n.filteredBuilds = s.filterForKeywords(h, S, w);
 }, B = a("deploymentStatus"), L = a("deploymentIsInProgress"), U = function() {
@@ -4866,7 +4925,7 @@ return e ? a + (v(e, "description") || "") : "";
 }
 }
 });
-var I = function(e, t, n, r) {
+var N = function(e, t, n, r) {
 var o = {
 alerts: {},
 detailsMarkup: C.remove.areYouSure.html.subject({
@@ -4912,7 +4971,7 @@ project: n,
 subjectKinds: T,
 canUpdateRolebindings: y("rolebindings", "update", f),
 confirmRemove: function(n, r, i) {
-var c = null, l = I(n, r, i, a.user.metadata.name);
+var c = null, l = N(n, r, i, a.user.metadata.name);
 _.isEqual(n, a.user.metadata.name) && u.isLastRole(a.user.metadata.name, a.roleBindings) && (c = !0), o.open({
 animation: !0,
 templateUrl: "views/modals/confirm.html",
@@ -5679,14 +5738,14 @@ e.autoscalers = e.hpaForRS.concat(t);
 var a = s.filterHPA(v, "Deployment", e.deployment.metadata.name);
 e.autoscalers = e.hpaForRS.concat(a);
 } else e.autoscalers = e.hpaForRS;
-}, I = function() {
+}, N = function() {
 j.push(o.watch(e.resource, f, function(t) {
 var n, a = [];
 angular.forEach(t.by("metadata.name"), function(t) {
 (C(t, "deploymentConfig") || "") === e.deploymentConfigName && a.push(t);
 }), n = i.getActiveDeployment(a), e.isActive = n && n.metadata.uid === e.replicaSet.metadata.uid, T();
 }));
-}, N = function() {
+}, I = function() {
 s.getHPAWarnings(e.replicaSet, e.autoscalers, e.limitRanges, u).then(function(t) {
 e.hpaWarnings = t;
 });
@@ -5768,14 +5827,14 @@ break;
 case "ReplicaSet":
 L();
 }
-N(), e.breadcrumbs = r.getBreadcrumbs({
+I(), e.breadcrumbs = r.getBreadcrumbs({
 object: t
 }), j.push(o.watchObject(e.resource, n.replicaSet, f, function(t, n) {
 "DELETED" === n && (e.alerts.deleted = {
 type: "warning",
 message: "This " + S + " has been deleted."
-}), e.replicaSet = t, R(t), N(), U(), e.deployment && $();
-})), e.deploymentConfigName && I(), j.push(o.watch("pods", f, function(t) {
+}), e.replicaSet = t, R(t), I(), U(), e.deployment && $();
+})), e.deploymentConfigName && N(), j.push(o.watch("pods", f, function(t) {
 var n = t.by("metadata.name");
 e.podsForDeployment = g.filterForOwner(n, e.replicaSet);
 }));
@@ -5805,12 +5864,12 @@ group: "autoscaling",
 resource: "horizontalpodautoscalers",
 version: "v1"
 }, f, function(e) {
-v = e.by("metadata.name"), T(), N();
+v = e.by("metadata.name"), T(), I();
 }, {
 poll: E,
 pollInterval: 6e4
 })), o.list("limitranges", f).then(function(t) {
-e.limitRanges = t.by("metadata.name"), N();
+e.limitRanges = t.by("metadata.name"), I();
 });
 j.push(o.watch("resourcequotas", f, function(t) {
 e.quotas = t.by("metadata.name");
@@ -7507,8 +7566,8 @@ title: R
 var E = {
 name: "app",
 value: ""
-}, T = t("orderByDisplayName"), I = t("getErrorDetails"), N = {}, D = function() {
-f.hideNotification("create-builder-list-config-maps-error"), f.hideNotification("create-builder-list-secrets-error"), _.each(N, function(e) {
+}, T = t("orderByDisplayName"), N = t("getErrorDetails"), I = {}, D = function() {
+f.hideNotification("create-builder-list-config-maps-error"), f.hideNotification("create-builder-list-secrets-error"), _.each(I, function(e) {
 !e.id || "error" !== e.type && "warning" !== e.type || f.hideNotification(e.id);
 });
 };
@@ -7578,7 +7637,7 @@ a = T(t.by("metadata.name")), e.valueFromObjects = a.concat(o);
 id: "create-builder-list-config-maps-error",
 type: "error",
 message: "Could not load config maps.",
-details: I(e)
+details: N(e)
 });
 }), c.list("secrets", i, null, {
 errorNotification: !1
@@ -7595,7 +7654,7 @@ e.unshift("");
 id: "create-builder-list-secrets-error",
 type: "error",
 message: "Could not load secrets.",
-details: I(e)
+details: N(e)
 });
 }), c.get("imagestreams", t.imageName, {
 namespace: t.namespace || r.project
@@ -7672,11 +7731,11 @@ cancelButtonText: "Cancel"
 }
 }).result.then(B);
 }, U = function(t) {
-D(), N = t.quotaAlerts || [], e.nameTaken || _.some(N, {
+D(), I = t.quotaAlerts || [], e.nameTaken || _.some(I, {
 type: "error"
-}) ? (e.disableInputs = !1, _.each(N, function(e) {
+}) ? (e.disableInputs = !1, _.each(I, function(e) {
 e.id = _.uniqueId("create-builder-alert-"), f.addNotification(e);
-})) : _.isEmpty(N) ? B() : (L(N), e.disableInputs = !1);
+})) : _.isEmpty(I) ? B() : (L(I), e.disableInputs = !1);
 };
 e.projectDisplayName = function() {
 return k(this.project) || this.projectName;
@@ -9048,7 +9107,7 @@ scope: p
 }).result.then(function() {
 l.getLatestQuotaAlerts(p.createResources, {
 namespace: p.input.selectedProject.metadata.name
-}).then(N);
+}).then(I);
 });
 }
 function y() {
@@ -9060,7 +9119,7 @@ t > 0 && a.push(k()), e > 0 && a.push(w()), n.all(a).then(b);
 }
 function b() {
 var e, n;
-I(), "Template" === p.resourceKind && p.templateOptions.process && !p.errorOccurred ? p.isDialog ? p.$emit("fileImportedFromYAMLOrJSON", {
+N(), "Template" === p.resourceKind && p.templateOptions.process && !p.errorOccurred ? p.isDialog ? p.$emit("fileImportedFromYAMLOrJSON", {
 project: p.input.selectedProject,
 template: p.resource
 }) : (n = p.templateOptions.add || p.updateResources.length > 0 ? p.input.selectedProject.metadata.name : "", e = s.createFromTemplateURL(p.resource, p.input.selectedProject.metadata.name, {
@@ -9226,12 +9285,12 @@ cancelButtonText: "Cancel"
 }
 }
 }).result.then(y);
-}, T = {}, I = function() {
+}, T = {}, N = function() {
 c.hideNotification("from-file-error"), _.each(T, function(e) {
 !e.id || "error" !== e.type && "warning" !== e.type || c.hideNotification(e.id);
 });
-}, N = function(e) {
-I(), T = u.getSecurityAlerts(p.createResources, p.input.selectedProject.metadata.name);
+}, I = function(e) {
+N(), T = u.getSecurityAlerts(p.createResources, p.input.selectedProject.metadata.name);
 var t = e.quotaAlerts || [];
 T = T.concat(t), _.filter(T, {
 type: "error"
@@ -9257,7 +9316,7 @@ e.push(C(t));
 p.input.selectedProject = t, n.all(e).then(function() {
 p.errorOccurred || (1 === p.createResources.length && "Template" === p.resourceList[0].kind ? h() : _.isEmpty(p.updateResources) ? l.getLatestQuotaAlerts(p.createResources, {
 namespace: p.input.selectedProject.metadata.name
-}).then(N) : (p.updateTemplate = 1 === p.updateResources.length && "Template" === p.updateResources[0].kind, p.updateTemplate ? h() : v()));
+}).then(I) : (p.updateTemplate = 1 === p.updateResources.length && "Template" === p.updateResources[0].kind, p.updateTemplate ? h() : v()));
 });
 }, function(e) {
 c.addNotification({
@@ -9269,10 +9328,10 @@ details: R(e)
 });
 }
 }, p.cancel = function() {
-I(), s.toProjectOverview(p.input.selectedProject.metadata.name);
+N(), s.toProjectOverview(p.input.selectedProject.metadata.name);
 };
 var $ = e("displayName");
-p.$on("importFileFromYAMLOrJSON", p.create), p.$on("$destroy", I);
+p.$on("importFileFromYAMLOrJSON", p.create), p.$on("$destroy", N);
 } ]
 };
 } ]), angular.module("openshiftConsole").directive("oscFileInput", [ "Logger", function(e) {
@@ -10697,12 +10756,12 @@ if (!m.pod) return null;
 var t = m.options.selectedContainer;
 switch (e) {
 case "memory/usage":
-var n = I(t);
+var n = N(t);
 if (n) return s.bytesToMiB(d(n));
 break;
 
 case "cpu/usage_rate":
-var a = N(t);
+var a = I(t);
 if (a) return d(a);
 }
 return null;
@@ -10823,7 +10882,7 @@ m.loaded = !0;
 }
 }
 m.includedMetrics = m.includedMetrics || [ "cpu", "memory", "network" ];
-var R, E = {}, T = {}, I = n("resources.limits.memory"), N = n("resources.limits.cpu"), D = 30, $ = !1;
+var R, E = {}, T = {}, N = n("resources.limits.memory"), I = n("resources.limits.cpu"), D = 30, $ = !1;
 m.uniqueID = c.uniqueID(), m.metrics = [], _.includes(m.includedMetrics, "memory") && m.metrics.push({
 label: "Memory",
 units: "MiB",
@@ -10987,9 +11046,9 @@ return e[0];
 }), i);
 }
 function u(e) {
-k || (N = 0, t.showAverage = _.size(t.pods) > 5 || w, _.each(t.metrics, function(n) {
+k || (I = 0, t.showAverage = _.size(t.pods) > 5 || w, _.each(t.metrics, function(n) {
 var a, r = o(e, n), i = n.descriptor;
-w && n.compactCombineWith && (i = n.compactCombineWith, n.lastValue && (I[i].lastValue = (I[i].lastValue || 0) + n.lastValue)), C[i] ? (C[i].load(r), t.showAverage ? C[i].legend.hide() : C[i].legend.show()) : ((a = D(n)).data = r, C[i] = c3.generate(a));
+w && n.compactCombineWith && (i = n.compactCombineWith, n.lastValue && (N[i].lastValue = (N[i].lastValue || 0) + n.lastValue)), C[i] ? (C[i].load(r), t.showAverage ? C[i].legend.hide() : C[i].legend.show()) : ((a = D(n)).data = r, C[i] = c3.generate(a));
 }));
 }
 function d() {
@@ -11013,10 +11072,10 @@ return w || (n.containerName = t.options.selectedContainer.name), n.start = j ||
 }
 }
 function f(e) {
-if (!k) if (N++, t.noData) t.metricsError = {
+if (!k) if (I++, t.noData) t.metricsError = {
 status: _.get(e, "status", 0),
 details: _.get(e, "data.errorMsg") || _.get(e, "statusText") || "Status code " + _.get(e, "status", 0)
-}; else if (!(N < 2) && t.alerts) {
+}; else if (!(I < 2) && t.alerts) {
 var n = "metrics-failed-" + t.uniqueID;
 t.alerts[n] = {
 type: "error",
@@ -11025,14 +11084,14 @@ links: [ {
 href: "",
 label: "Retry",
 onClick: function() {
-delete t.alerts[n], N = 1, y();
+delete t.alerts[n], I = 1, y();
 }
 } ]
 };
 }
 }
 function h() {
-return _.isEmpty(t.pods) ? (t.loaded = !0, !1) : !t.metricsError && N < 2;
+return _.isEmpty(t.pods) ? (t.loaded = !0, !1) : !t.metricsError && I < 2;
 }
 function v(e, n, a) {
 t.noData = !1;
@@ -11109,11 +11168,11 @@ compactDatasetLabel: "Received",
 compactType: "spline",
 chartID: "network-rx-" + t.uniqueID
 } ];
-var I = _.keyBy(t.metrics, "descriptor");
+var N = _.keyBy(t.metrics, "descriptor");
 t.loaded = !1, t.noData = !0, t.showComputeUnitsHelp = function() {
 l.showComputeUnitsHelp();
 };
-var N = 0;
+var I = 0;
 c.getMetricsURL().then(function(e) {
 t.metricsURL = e;
 }), t.options = {
@@ -11193,7 +11252,7 @@ top: t.followAffixTop || 0
 }));
 }, T = function() {
 return $("#" + t.logViewerID + " .log-view-output");
-}, I = function(e) {
+}, N = function(e) {
 var n = T(), a = n.offset().top;
 if (!(a < 0)) {
 var r = $(".ellipsis-pulser").outerHeight(!0), o = t.fixedHeight ? t.fixedHeight : Math.floor($(window).height() - a - r);
@@ -11201,7 +11260,7 @@ t.chromeless || t.fixedHeight || (o -= 40), e ? n.animate({
 "min-height": o + "px"
 }, "fast") : n.css("min-height", o + "px"), t.fixedHeight && n.css("max-height", o);
 }
-}, N = function() {
+}, I = function() {
 if (!S) {
 var e = function() {
 clearInterval(S), S = null, t.$evalAsync(function() {
@@ -11209,11 +11268,11 @@ t.sized = !0;
 });
 }, n = 0;
 S = setInterval(function() {
-n > 10 ? e() : (n++, T().is(":visible") && (I(), e()));
+n > 10 ? e() : (n++, T().is(":visible") && (N(), e()));
 }, 100);
 }
 }, D = _.debounce(function() {
-I(!0), w(), R(), k(), E(), P();
+N(!0), w(), R(), k(), E(), P();
 }, 100);
 p.on("resize", D);
 var A, B = function() {
@@ -11248,7 +11307,7 @@ n++, L.appendChild(f(n, e)), U();
 };
 (A = c.createStream(b, C, t.context, e)).onMessage(function(r, o, i) {
 t.$evalAsync(function() {
-t.empty = !1, "logs" !== t.state && (t.state = "logs", N());
+t.empty = !1, "logs" !== t.state && (t.state = "logs", I());
 }), r && (e.limitBytes && i >= e.limitBytes && (t.$evalAsync(function() {
 t.limitReached = !0, t.loading = !1;
 }), O(!0)), a(r), !t.largeLog && n >= e.tailLines && t.$evalAsync(function() {
@@ -13737,7 +13796,182 @@ t.tab = "details";
 }
 };
 } ]
-}), angular.module("openshiftConsole").filter("duration", function() {
+}), function() {
+angular.module("openshiftConsole").component("notificationCounter", {
+templateUrl: "views/directives/notifications/notification-counter.html",
+bindings: {},
+controller: [ "$filter", "$routeParams", "$rootScope", "Constants", function(e, t, n, a) {
+var r = this, o = _.get(a, "DISABLE_GLOBAL_EVENT_WATCH"), i = e("isIE")() || e("isEdge")();
+r.hide = !0;
+var s = [], c = [], l = function(e, t) {
+e && c.push(n.$on("NotificationDrawerWrapper.count", t));
+}, u = function() {
+_.each(c, function(e) {
+e && e();
+}), c = [];
+}, d = function() {
+_.each(s, function(e) {
+e();
+}), s = [];
+}, m = function(e) {
+r.hide = !e;
+};
+r.onClick = function() {
+n.$emit("NotificationDrawerWrapper.toggle");
+};
+var p = function(e, t) {
+r.showUnreadNotificationsIndicator = !!t;
+}, g = function(e, t) {
+return _.get(e, "params.project") !== _.get(t, "params.project");
+}, f = function() {
+l(t.project, p), m(t.project);
+}, h = function() {
+f(), s.push(n.$on("$routeChangeSuccess", function(e, t, n) {
+g(t, n) && f();
+})), s.push(n.$on("NotificationDrawerWrapper.onMarkAllRead", function() {
+r.showUnreadNotificationsIndicator = !1;
+}));
+};
+r.$onInit = function() {
+o || i ? r.hide = !0 : h();
+}, r.$onDestroy = function() {
+u(), d();
+};
+} ]
+});
+}(), function() {
+angular.module("openshiftConsole").component("notificationDrawerWrapper", {
+templateUrl: "views/directives/notifications/notification-drawer-wrapper.html",
+controller: [ "$filter", "$interval", "$location", "$timeout", "$routeParams", "$rootScope", "Constants", "DataService", "NotificationsService", "EventsService", function(e, t, n, a, r, o, i, s, c, l) {
+var u, d, m = _.get(i, "DISABLE_GLOBAL_EVENT_WATCH"), p = e("isIE")() || e("isEdge")(), g = this, f = [], h = {}, v = {}, y = [], b = {}, C = function(e) {
+return s.get("projects", e, {}, {
+errorNotification: !1
+}).then(function(e) {
+return b[e.metadata.name] = e, e;
+});
+}, S = function(t, n) {
+n && !t[n] && (t[n] = {
+heading: e("displayName")(b[n]) || n,
+project: b[n],
+notifications: []
+});
+}, w = function() {
+d && s.unwatch(d);
+}, k = function(e, t) {
+w(), e && (d = s.watch("events", {
+namespace: e
+}, _.debounce(t, 400), {
+skipDigest: !0
+}));
+}, j = function() {
+u && u(), u = null;
+}, P = function(e) {
+return _.filter(e, "unread");
+}, R = function(e) {
+o.$applyAsync(function() {
+e.totalUnread = P(e.notifications).length, e.hasUnread = !!e.totalUnread, o.$emit("NotificationDrawerWrapper.count", e.totalUnread);
+});
+}, E = function() {
+_.each(y, R);
+}, T = function(e) {
+return _.orderBy(e, [ "event.lastTimestamp", "event.firstTimestamp" ], [ "desc", "desc" ]);
+}, N = function(e) {
+var t = _.sortBy(e, function(e) {
+return e.heading;
+});
+return _.each(t, function(e) {
+e.notifications = T(e.notifications), e.counts = R(e);
+}), t;
+}, I = function(e) {
+var t = {};
+return S(t, r.project), _.each(e, function(e) {
+l.isImportantEvent(e) && !l.isCleared(e) && (S(t, e.metadata.namespace), t[e.metadata.namespace].notifications.push({
+unread: !l.isRead(e),
+event: e,
+actions: null
+}));
+}), t;
+}, D = function() {
+_.each(f, function(e) {
+e();
+}), f = [];
+}, $ = function(e) {
+e || (g.drawerHidden = !0);
+}, A = function() {
+o.$evalAsync(function() {
+E(), g.notificationGroups = _.filter(y, function(e) {
+return e.project.metadata.name === r.project;
+});
+});
+}, B = function(e) {
+h = e.by("metadata.name"), v = I(h), y = N(v), A();
+}, L = {
+Normal: "pficon pficon-info",
+Warning: "pficon pficon-warning-triangle-o"
+};
+angular.extend(g, {
+drawerHidden: !0,
+allowExpand: !0,
+drawerExpanded: !1,
+drawerTitle: "Notifications",
+hasUnread: !1,
+showClearAll: !0,
+showMarkAllRead: !0,
+onClose: function() {
+g.drawerHidden = !0;
+},
+onMarkAllRead: function(e) {
+_.each(e.notifications, function(e) {
+e.unread = !1, l.markRead(e.event);
+}), A(), o.$emit("NotificationDrawerWrapper.onMarkAllRead");
+},
+onClearAll: function(e) {
+_.each(e.notifications, function(e) {
+l.markRead(e.event), l.markCleared(e.event);
+}), e.notifications = [], A(), o.$emit("NotificationDrawerWrapper.onMarkAllRead");
+},
+notificationGroups: y,
+headingInclude: "views/directives/notifications/header.html",
+notificationBodyInclude: "views/directives/notifications/notification-body.html",
+customScope: {
+clear: function(e, t, n) {
+l.markCleared(e.event), n.notifications.splice(t, 1), E();
+},
+markRead: function(e) {
+e.unread = !1, l.markRead(e.event), E();
+},
+getNotficationStatusIconClass: function(e) {
+return L[e.type] || L.info;
+},
+getStatusForCount: function(e) {
+return L[e] || L.info;
+},
+close: function() {
+g.drawerHidden = !0;
+}
+}
+});
+var U = function(e, t) {
+return _.get(e, "params.project") !== _.get(t, "params.project");
+}, O = function() {
+C(r.project).then(function() {
+k(r.project, B), $(r.project), A();
+});
+}, x = function() {
+r.project && O(), f.push(o.$on("$routeChangeSuccess", function(e, t, n) {
+U(t, n) && (g.customScope.projectName = r.project, O());
+})), f.push(o.$on("NotificationDrawerWrapper.toggle", function() {
+g.drawerHidden = !g.drawerHidden;
+}));
+};
+g.$onInit = function() {
+m || p || x();
+}, g.$onDestroy = function() {
+j(), w(), D();
+};
+} ]
+});
+}(), angular.module("openshiftConsole").filter("duration", function() {
 return function(e, t, n, a) {
 function r(e, t, a) {
 0 !== e && (1 !== e ? s.push(e + " " + a) : n ? s.push(t) : s.push("1 " + t));
@@ -14792,6 +15026,12 @@ return e.resourceURL(t, n, a, null, {
 apiVersion: r
 });
 };
+} ]).filter("navigateEventInvolvedObjectURL", [ "Navigate", function(e) {
+return function(t) {
+return e.resourceURL(t.involvedObject.name, t.involvedObject.kind, t.involvedObject.namespace, null, {
+apiVersion: t.involvedObject.apiVersion
+});
+};
 } ]).filter("navigateToTabURL", [ "Navigate", function(e) {
 return function(t, n) {
 return e.resourceURL(t, null, null, null, {
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index c94bf771cc..0d9939cf15 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -6853,8 +6853,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"event-reason\">\n" +
     "{{event.reason | sentenceCase}}\n" +
     "</div>\n" +
-    "<div class=\"event-object\">\n" +
+    "<div class=\"event-object\" ng-init=\"resourceURL = (event | navigateEventInvolvedObjectURL)\">\n" +
+    "<a ng-if=\"resourceURL\" ng-attr-title=\"Navigate to {{event.involvedObject.name}}\" href=\"{{resourceURL}}\">\n" +
     "{{event.involvedObject.kind | kindToResource | abbreviateResource}}/{{event.involvedObject.name}}\n" +
+    "</a>\n" +
+    "<span ng-if=\"!(resourceURL)\">{{event.involvedObject.kind | kindToResource | abbreviateResource}}/{{event.involvedObject.name}}</span>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div class=\"detail-group\">\n" +
@@ -6946,7 +6949,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"hidden-xs-block visible-sm-block visible-md-block hidden-lg-block\">\n" +
     "<span ng-bind-html=\"event.involvedObject.kind | humanizeKind : true | highlightKeywords : filterExpressions\"></span>\n" +
     "</div>\n" +
-    "<span ng-init=\"resourceURL = (event.involvedObject.name | navigateResourceURL : event.involvedObject.kind : event.metadata.namespace : event.involvedObject.apiVersion)\">\n" +
+    "<span ng-init=\"resourceURL = (event | navigateEventInvolvedObjectURL)\">\n" +
     "<a ng-href=\"{{resourceURL}}\" ng-if=\"resourceURL\"><span ng-bind-html=\"event.involvedObject.name | highlightKeywords : filterExpressions\"></span></a>\n" +
     "<span ng-if=\"!resourceURL\" ng-bind-html=\"event.involvedObject.name | highlightKeywords : filterExpressions\"></span>\n" +
     "</span>\n" +
@@ -7075,6 +7078,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $templateCache.put('views/directives/header/_navbar-utility.html',
     "<ul class=\"nav navbar-nav navbar-right navbar-iconic\">\n" +
+    "<li>\n" +
+    "<notification-counter></notification-counter>\n" +
+    "</li>\n" +
     "<li extension-point extension-name=\"nav-system-status\" extension-types=\"dom\"></li>\n" +
     "<li ng-if=\"launcherApps.length > 0\">\n" +
     "<pf-application-launcher items=\"launcherApps\" is-list=\"true\"></pf-application-launcher>\n" +
@@ -7709,6 +7715,93 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   );
 
 
+  $templateCache.put('views/directives/notifications/header.html',
+    "<div class=\"container-fluid\">\n" +
+    "<div class=\"row\">\n" +
+    "<div class=\"col-xs-6\">\n" +
+    "<strong>{{notificationGroup.heading}}</strong>\n" +
+    "</div>\n" +
+    "<div class=\"col-xs-6 text-right small\">\n" +
+    "<a title=\"All Events\" ng-href=\"project/{{$ctrl.customScope.projectName}}/browse/events\" ng-click=\"$ctrl.customScope.close()\">\n" +
+    "View All Events\n" +
+    "</a>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<div class=\"row mar-top-md\">\n" +
+    "<div class=\"col-xs-12\">\n" +
+    "<em>{{notificationGroup.totalUnread}} Unread</em>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "</div>"
+  );
+
+
+  $templateCache.put('views/directives/notifications/notification-body.html',
+    "<div class=\"drawer-pf-notification-inner\" tabindex=\"0\" ng-click=\"$ctrl.customScope.markRead(notification)\">\n" +
+    "<a class=\"pull-right\" tabindex=\"0\" ng-click=\"$ctrl.customScope.clear(notification, $index, notificationGroup)\">\n" +
+    "<span class=\"sr-only\">Clear notification</span>\n" +
+    "<span ng-if=\"notification.event\" aria-hidden=\"true\" class=\"pull-left pficon pficon-close\"></span>\n" +
+    "</a>\n" +
+    "<div uib-dropdown class=\"dropdown pull-right dropdown-kebab-pf\" ng-if=\"notification.actions.length\">\n" +
+    "<button uib-dropdown-toggle class=\"btn btn-link dropdown-toggle\" type=\"button\" id=\"dropdownKebabRight-{{$id}}\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\">\n" +
+    "<span class=\"fa fa-ellipsis-v\"></span>\n" +
+    "</button>\n" +
+    "<ul class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownKebabRight\">\n" +
+    "<li ng-repeat=\"action in notification.actions\" role=\"{{action.isSeparator === true ? 'separator' : 'menuitem'}}\" ng-class=\"{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}\">\n" +
+    "<a ng-if=\"!action.isSeparator\" href=\"\" class=\"secondary-action\" title=\"{{action.title}}\" ng-click=\"$ctrl.customScope.handleAction(notification, action)\">\n" +
+    "{{action.name}}\n" +
+    "</a>\n" +
+    "</li>\n" +
+    "</ul>\n" +
+    "</div>\n" +
+    "<span ng-if=\"notification.event\" aria-hidden=\"true\" class=\"pull-left\" ng-class=\"$ctrl.customScope.getNotficationStatusIconClass(notification.event)\"></span>\n" +
+    "<span class=\"sr-only\">{{notification.event.type}}</span>\n" +
+    "<div class=\"drawer-pf-notification-content\">\n" +
+    "<div class=\"drawer-pf-notification-message\" ng-attr-title=\"{{notification.event.message}}\">\n" +
+    "<div>\n" +
+    "<span>\n" +
+    "{{notification.event.reason | humanize}} &mdash; {{notification.event.involvedObject.kind | humanize}}\n" +
+    "</span>\n" +
+    "<span ng-init=\"eventObjUrl = (notification.event | navigateEventInvolvedObjectURL)\">\n" +
+    "<a ng-if=\"eventObjUrl\" ng-attr-title=\"Navigate to {{notification.event.involvedObject.name}}\" href=\"{{eventObjUrl}}\" ng-click=\"$ctrl.customScope.close()\">\n" +
+    "{{notification.event.involvedObject.name}}\n" +
+    "</a>\n" +
+    "<span ng-if=\"!(eventObjUrl)\">{{notification.event.involvedObject.name}}</span>\n" +
+    "</span>\n" +
+    "</div>\n" +
+    "<div ng-if=\"notification.event.count > 1\" class=\"text-muted small\">\n" +
+    "{{notification.event.count}} times in the last\n" +
+    "<duration-until-now timestamp=\"notification.event.firstTimestamp\" omit-single=\"true\" precision=\"1\"></duration-until-now>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<span ng-if=\"$ctrl.drawerExpanded\" class=\"drawer-pf-notification-message text-muted small word-break\">\n" +
+    "{{notification.event.message}}\n" +
+    "</span>\n" +
+    "<div class=\"drawer-pf-notification-info\">\n" +
+    "<span class=\"date\">{{notification.event.lastTimestamp | date:'shortDate'}}</span>\n" +
+    "<span class=\"time\">{{notification.event.lastTimestamp | date:'mediumTime'}}</span>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "</div>"
+  );
+
+
+  $templateCache.put('views/directives/notifications/notification-counter.html',
+    "<li class=\"drawer-pf-trigger\" ng-if=\"!$ctrl.hide\">\n" +
+    "<a href=\"\" class=\"nav-item-iconic\" ng-click=\"$ctrl.onClick()\">\n" +
+    "<span class=\"fa fa-bell\" title=\"Notifications\" aria-hidden=\"true\"></span>\n" +
+    "<span ng-if=\"$ctrl.showUnreadNotificationsIndicator\" class=\"badge\"> </span>\n" +
+    "<span class=\"sr-only\">Notifications</span>\n" +
+    "</a>\n" +
+    "</li>"
+  );
+
+
+  $templateCache.put('views/directives/notifications/notification-drawer-wrapper.html',
+    "<pf-notification-drawer drawer-hidden=\"$ctrl.drawerHidden\" allow-expand=\"$ctrl.allowExpand\" drawer-expanded=\"$ctrl.drawerExpanded\" drawer-title=\"{{$ctrl.drawerTitle}}\" show-clear-all=\"$ctrl.showClearAll\" show-mark-all-read=\"$ctrl.showMarkAllRead\" notification-groups=\"$ctrl.notificationGroups\" heading-include=\"{{$ctrl.headingInclude}}\" notification-body-include=\"{{$ctrl.notificationBodyInclude}}\" on-close=\"$ctrl.onClose\" on-mark-all-read=\"$ctrl.onMarkAllRead\" on-clear-all=\"$ctrl.onClearAll\" custom-scope=\"$ctrl.customScope\"></pf-notification-drawer>"
+  );
+
+
   $templateCache.put('views/directives/osc-autoscaling.html',
     "<ng-form name=\"form\">\n" +
     "<div class=\"autoscaling-form\">\n" +
diff --git a/dist/styles/main.css b/dist/styles/main.css
index b17608bc8a..f64548b9d0 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -3308,7 +3308,7 @@ a.disabled{color:#8b8d8f;cursor:not-allowed;text-decoration:none}
 .navbar-pf-alt .nav .nav-item-iconic{padding:21px 12px;position:relative}
 .navbar-pf-alt .nav .nav-item-iconic:focus,.navbar-pf-alt .nav .nav-item-iconic:hover{background-color:transparent}
 .navbar-pf-alt .nav .nav-item-iconic:focus .caret,.navbar-pf-alt .nav .nav-item-iconic:focus .fa,.navbar-pf-alt .nav .nav-item-iconic:focus .glyphicon,.navbar-pf-alt .nav .nav-item-iconic:focus .pficon,.navbar-pf-alt .nav .nav-item-iconic:hover .caret,.navbar-pf-alt .nav .nav-item-iconic:hover .fa,.navbar-pf-alt .nav .nav-item-iconic:hover .glyphicon,.navbar-pf-alt .nav .nav-item-iconic:hover .pficon{color:#fff}
-.navbar-pf-alt .nav .nav-item-iconic .badge{background-color:#0088ce;border-radius:20px;color:#fff;cursor:pointer;font-size:10px;font-weight:700;margin:0 0 -11px -12px;min-width:0;padding:2px 4px}
+.navbar-pf-alt .nav .nav-item-iconic .badge{background-color:#0088ce;border-radius:20px;color:#fff;cursor:pointer;font-weight:700;padding:2px 4px}
 .navbar-pf-alt .nav .nav-item-iconic .caret,.navbar-pf-alt .nav .nav-item-iconic .fa,.navbar-pf-alt .nav .nav-item-iconic .pficon{color:#d1d1d1;font-size:17px}
 .navbar-pf-alt .nav .open>.nav-item-iconic,.navbar-pf-alt .nav .open>.nav-item-iconic:focus,.navbar-pf-alt .nav .open>.nav-item-iconic:hover{background:0 0}
 .navbar-pf-alt .nav .open>.nav-item-iconic .caret,.navbar-pf-alt .nav .open>.nav-item-iconic .fa,.navbar-pf-alt .nav .open>.nav-item-iconic .pficon,.navbar-pf-alt .nav .open>.nav-item-iconic:focus .caret,.navbar-pf-alt .nav .open>.nav-item-iconic:focus .fa,.navbar-pf-alt .nav .open>.nav-item-iconic:focus .pficon,.navbar-pf-alt .nav .open>.nav-item-iconic:hover .caret,.navbar-pf-alt .nav .open>.nav-item-iconic:hover .fa,.navbar-pf-alt .nav .open>.nav-item-iconic:hover .pficon{color:#fff}
@@ -5879,6 +5879,19 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px}
 .membership .content-pane .col-name input{max-width:175px}
 .membership .content-pane .select-role{width:150px}
 }
+.navbar-pf-alt .nav .nav-item-iconic .badge{font-size:9px;margin:-15px 0 0 -12px;min-width:10px;min-height:10px}
+notification-drawer-wrapper .drawer-pf{height:calc(100vh - 80px);top:50px;z-index:1031}
+.tech-preview notification-drawer-wrapper .drawer-pf{top:70px}
+notification-drawer-wrapper .drawer-pf-notification,notification-drawer-wrapper .drawer-pf-notification-info,notification-drawer-wrapper .drawer-pf-notification-message{cursor:pointer}
+notification-drawer-wrapper .drawer-pf-notification{padding:0px}
+notification-drawer-wrapper .drawer-pf-notification.ng-leave{transition:.25s linear all;opacity:1}
+notification-drawer-wrapper .drawer-pf-notification.ng-leave.ng-leave-active{opacity:0}
+notification-drawer-wrapper .drawer-pf-notification-inner{padding:15px}
+notification-drawer-wrapper .drawer-pf-notification-inner .pficon-close{color:#000}
+notification-drawer-wrapper .expanded-notification .drawer-pf-notification-message{max-width:35%}
+.panel-heading .panel-title{overflow:hidden}
+.panel-heading .panel-title .container-fluid{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
+.panel-heading .small{font-size:84%;color:#000}
 .action-chip{margin:0 5px 2px 0;font-size:12px;display:flex;flex-direction:row}
 .action-chip .item{padding:.2em .6em .3em}
 .action-chip .item:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}
diff --git a/test/integration/features/user_creates_project.spec.js b/test/integration/features/user_creates_project.spec.js
index 10605032de..0798595d50 100644
--- a/test/integration/features/user_creates_project.spec.js
+++ b/test/integration/features/user_creates_project.spec.js
@@ -7,15 +7,15 @@ const projectHelpers = require('../helpers/project.js');
 let goToAddToProjectPage = (projectName) => {
   let uri = 'project/' + projectName + '/create';
   h.goToPage(uri);
-  expect(element(by.cssContainingText('h1', "Create Using Your Code")).isPresent()).toBe(true);
-  expect(element(by.cssContainingText('h1', "Create Using a Template")).isPresent()).toBe(true);
+  expect(element(by.cssContainingText('.middle-container h1', "Create Using Your Code")).isPresent()).toBe(true);
+  expect(element(by.cssContainingText('.middle-container h1', "Create Using a Template")).isPresent()).toBe(true);
   expect(element(by.model('from_source_url')).isPresent()).toBe(true);
   expect(element(by.cssContainingText('.catalog h3 > a', "ruby-helloworld-sample")).isPresent()).toBe(true);
 };
 
 let goToCreateProjectPage = () => {
   h.goToPage('create-project');
-  expect(element(by.cssContainingText('h1', "Create Project")).isPresent()).toBe(true);
+  expect(element(by.cssContainingText('.middle-container h1', "Create Project")).isPresent()).toBe(true);
   expect(element(by.model('name')).isPresent()).toBe(true);
   expect(element(by.model('displayName')).isPresent()).toBe(true);
   expect(element(by.model('description')).isPresent()).toBe(true);
@@ -41,7 +41,7 @@ let requestCreateFromTemplate = (projectName, templateName) => {
 let attachBuilderImageToSource = (projectName, builderImageName) => {
   let uri = 'project/' + projectName + '/catalog/images';
   h.waitForUri(uri);
-  expect(element(by.cssContainingText('h1', "Select a builder image")).isPresent()).toBe(true);
+  expect(element(by.cssContainingText('.middle-container h1', "Select a builder image")).isPresent()).toBe(true);
   let builderImageLink = element(by.cssContainingText('h3 > a', builderImageName));
   expect(builderImageLink.isPresent()).toBe(true);
   builderImageLink.click();
@@ -50,7 +50,7 @@ let attachBuilderImageToSource = (projectName, builderImageName) => {
 let createFromSource = (projectName, builderImageName, appName) => {
   let uri = 'project/' + projectName + '/create/fromimage';
   h.waitForUri(uri);
-  expect(element(by.css('.osc-form h1')).getText()).toEqual(builderImageName);
+  expect(element(by.css('.middle-container .osc-form h1')).getText()).toEqual(builderImageName);
   expect(element(by.cssContainingText('h2', "Name")).isPresent()).toBe(true);
   expect(element(by.cssContainingText('h2', "Routing")).isPresent()).toBe(true);
   expect(element(by.cssContainingText('h2', "Deployment Configuration")).isPresent()).toBe(true);
@@ -66,7 +66,7 @@ let createFromSource = (projectName, builderImageName, appName) => {
 let createFromTemplate = (projectName, templateName, parameterNames, labelNames) => {
   let uri = 'project/' + projectName + '/create/fromtemplate';
   h.waitForUri(uri);
-  expect(element(by.css('.osc-form h1')).getText()).toEqual(templateName);
+  expect(element(by.css('.middle-container .osc-form h1')).getText()).toEqual(templateName);
   expect(element(by.cssContainingText('h2', "Images")).isPresent()).toBe(true);
   expect(element(by.cssContainingText('h2', "Parameters")).isPresent()).toBe(true);
   expect(element(by.cssContainingText('h2', "Labels")).isPresent()).toBe(true);
@@ -93,7 +93,7 @@ let checkServiceCreated = (projectName, serviceName) => {
 let checkProjectSettings = (projectName, displayName, description) => {
   let uri = 'project/' + projectName + '/edit';
   h.goToPage(uri);
-  expect(element(by.css('h1')).getText()).toEqual("Edit Project " + projectName);
+  expect(element(by.css('.middle-container h1')).getText()).toEqual("Edit Project " + projectName);
   expect(element(by.css('#displayName')).getAttribute('value')).toEqual(displayName);
   expect(element(by.css('#description')).getAttribute('value')).toEqual(description);
 };
@@ -133,37 +133,37 @@ describe('', () => {
 
         it('should browse builds', () => {
           h.goToPage('project/' + project['name'] + '/browse/builds');
-          h.waitForPresence('h1', 'Builds');
+          h.waitForPresence('.middle-container h1', 'Builds');
           // TODO: validate presented strategies, images, repos
         });
 
         it('should browse deployments', () => {
           h.goToPage('project/' + project['name'] + '/browse/deployments');
-          h.waitForPresence("h1", "Deployments");
+          h.waitForPresence(".middle-container h1", "Deployments");
           // TODO: validate presented deployments
         });
 
         it('should browse events', () => {
           h.goToPage('project/' + project['name'] + '/browse/events');
-          h.waitForPresence("h1", "Events");
+          h.waitForPresence(".middle-container h1", "Events");
           // TODO: validate presented events
         });
 
         it('should browse image streams', () => {
           h.goToPage('project/' + project['name'] + '/browse/images');
-          h.waitForPresence("h1", "Image Streams");
+          h.waitForPresence(".middle-container h1", "Image Streams");
           // TODO: validate presented images
         });
 
         it('should browse pods', () => {
           h.goToPage('project/' + project['name'] + '/browse/pods');
-          h.waitForPresence("h1", "Pods");
+          h.waitForPresence(".middle-container h1", "Pods");
           // TODO: validate presented pods, containers, correlated images, builds, source
         });
 
         it('should browse services', () => {
           h.goToPage('project/' + project['name'] + '/browse/services');
-          h.waitForPresence("h1", "Services");
+          h.waitForPresence(".middle-container h1", "Services");
           // TODO: validate presented ports, routes, selectors
         });
 
diff --git a/test/integration/helpers/matchers.js b/test/integration/helpers/matchers.js
index 175cc93e85..c4175c1adc 100644
--- a/test/integration/helpers/matchers.js
+++ b/test/integration/helpers/matchers.js
@@ -5,11 +5,11 @@ exports.expectAlert = (msg) => {
 };
 
 exports.expectHeading = (text, level) => {
-  expect(element(by.css(level || 'h1')).getText()).toEqual(text);
+  expect(element(by.css(level || '.middle-container h1')).getText()).toEqual(text);
 };
 
 exports.expectPartialHeading = (partialText, level, caseSensitive) => {
-  element(by.css(level || 'h1')).getText().then((text) => {
+  element(by.css(level || '.middle-container h1')).getText().then((text) => {
     text = caseSensitive ? text : text.toLowerCase();
     expect(text).toContain(partialText);
   });