From 4c0fa5513b1c0e9584dee17129f3040413298d1b Mon Sep 17 00:00:00 2001
From: David Taylor <dtaylor113@gmail.com>
Date: Mon, 18 Sep 2017 14:02:28 -0400
Subject: [PATCH] Quota Notifications

---
 app/scripts/constants.js                      |   7 +-
 app/scripts/controllers/overview.js           |  13 +-
 .../notificationDrawerWrapper.js              |  28 +-
 app/scripts/services/quota.js                 | 104 +++++++-
 app/scripts/services/resourceAlerts.js        |  40 +--
 .../notifications/notification-body.html      |   6 +-
 dist/scripts/scripts.js                       | 245 ++++++++++--------
 dist/scripts/templates.js                     |   7 +-
 8 files changed, 300 insertions(+), 150 deletions(-)

diff --git a/app/scripts/constants.js b/app/scripts/constants.js
index b980fcebd1..fcc7435e88 100644
--- a/app/scripts/constants.js
+++ b/app/scripts/constants.js
@@ -534,5 +534,10 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
     //   href: 'http://example.com/',
     //   tooltip: 'Open Dashboard'
     // }
-  ]
+  ],
+  QUOTA_NOTIFICATION_MESSAGE: {
+    // Example quota messages to show in notification drawer
+    // "pods": "Upgrade to <a href='http://www.openshift.com'>OpenShift Pro</a> if you need additional resources.",
+    // "limits.memory": "Upgrade to <a href='http://www.openshift.com'>OpenShift Online Pro</a> if you need additional resources."
+  }
 });
diff --git a/app/scripts/controllers/overview.js b/app/scripts/controllers/overview.js
index d8a886dd36..076aad7c07 100644
--- a/app/scripts/controllers/overview.js
+++ b/app/scripts/controllers/overview.js
@@ -1040,11 +1040,10 @@ function OverviewController($scope,
     groupRecentBuildsByDeploymentConfig();
   };
 
-  var updateQuotaWarnings = function() {
-    ResourceAlertsService.setGenericQuotaWarning(state.quotas,
-                                                 state.clusterQuotas,
-                                                 $routeParams.project,
-                                                 state.alerts);
+  var setQuotaNotifications = function() {
+    ResourceAlertsService.setQuotaNotifications(state.quotas,
+                                                state.clusterQuotas,
+                                                $routeParams.project);
   };
 
   overview.clearFilter = function() {
@@ -1304,12 +1303,12 @@ function OverviewController($scope,
     // Always poll quotas instead of watching, its not worth the overhead of maintaining websocket connections
     watches.push(DataService.watch('resourcequotas', context, function(quotaData) {
       state.quotas = quotaData.by("metadata.name");
-      updateQuotaWarnings();
+      setQuotaNotifications();
     }, {poll: true, pollInterval: DEFAULT_POLL_INTERVAL}));
 
     watches.push(DataService.watch('appliedclusterresourcequotas', context, function(clusterQuotaData) {
       state.clusterQuotas = clusterQuotaData.by("metadata.name");
-      updateQuotaWarnings();
+      setQuotaNotifications();
     }, {poll: true, pollInterval: DEFAULT_POLL_INTERVAL}));
 
     var canI = $filter('canI');
diff --git a/app/scripts/directives/notifications/notificationDrawerWrapper.js b/app/scripts/directives/notifications/notificationDrawerWrapper.js
index df75e02dbd..b092a26b95 100644
--- a/app/scripts/directives/notifications/notificationDrawerWrapper.js
+++ b/app/scripts/directives/notifications/notificationDrawerWrapper.js
@@ -17,6 +17,7 @@
         'Constants',
         'DataService',
         'EventsService',
+        'NotificationsService',
         NotificationDrawerWrapper
       ]
     });
@@ -94,6 +95,14 @@
         });
       };
 
+      var removeNotificationFromGroup = function(notification) {
+        _.each(drawer.notificationGroups, function(group) {
+          _.remove(group.notifications, function(grpNotification) {
+            return grpNotification.uid === notification.uid && grpNotification.namespace === notification.namespace;
+          });
+        });
+      };
+
       var formatAPIEvents = function(apiEvents) {
         return _.map(apiEvents, function(event) {
           return {
@@ -171,7 +180,7 @@
         var id = notification.id || _.uniqueId('notification_') + Date.now();
         notificationsMap[project] = notificationsMap[project] || {};
         notificationsMap[project][id] = {
-          actions: null,
+          actions: notification.actions,
           unread: !EventsService.isRead(id),
           // using uid to match API events and have one filed to pass
           // to EventsService for read/cleared, etc
@@ -181,6 +190,7 @@
           // but we sort based on lastTimestamp first.
           lastTimestamp: notification.timestamp,
           message: notification.message,
+          isHTML: notification.isHTML,
           details: notification.details,
           namespace: project,
           links: notification.links
@@ -217,6 +227,7 @@
         hasUnread: false,
         showClearAll: true,
         showMarkAllRead: true,
+        removeNotificationFromGroup: removeNotificationFromGroup,
         onClose: function() {
           drawer.drawerHidden = true;
         },
@@ -259,7 +270,8 @@
           onLinkClick: function(link) {
             link.onClick();
             drawer.drawerHidden = true;
-          }
+          },
+          countUnreadNotifications: countUnreadNotifications
         }
       });
 
@@ -284,6 +296,18 @@
         rootScopeWatches.push($rootScope.$on('NotificationDrawerWrapper.toggle', function() {
           drawer.drawerHidden = !drawer.drawerHidden;
         }));
+
+        // event to signal the drawer to close
+        rootScopeWatches.push($rootScope.$on('NotificationDrawerWrapper.hide', function() {
+          drawer.drawerHidden = true;
+        }));
+
+        // event to signal the drawer to clear a notification
+        rootScopeWatches.push($rootScope.$on('NotificationDrawerWrapper.clear', function(event, notification) {
+          EventsService.markCleared(notification.uid);
+          drawer.removeNotificationFromGroup(notification);
+          drawer.countUnreadNotifications();
+        }));
       };
 
       drawer.$onInit = function() {
diff --git a/app/scripts/services/quota.js b/app/scripts/services/quota.js
index 0e24fbeca8..bc75e22ed2 100644
--- a/app/scripts/services/quota.js
+++ b/app/scripts/services/quota.js
@@ -3,12 +3,21 @@
 angular.module("openshiftConsole")
   .factory("QuotaService", function(APIService,
                                     $filter,
+                                    $location,
+                                    $rootScope,
+                                    $routeParams,
                                     $q,
+                                    Constants,
                                     DataService,
-                                    Logger) {
+                                    EventsService,
+                                    Logger,
+                                    NotificationsService) {
 
     var isNil = $filter('isNil');
     var usageValue = $filter('usageValue');
+    var usageWithUnits = $filter('usageWithUnits');
+    var percent = $filter('percent');
+
     var isBestEffortPod = function(pod) {
       // To be best effort a pod must not have any containers that have non-zero requests or limits
       // Break out as soon as we find any pod with a non-zero request or limit
@@ -254,6 +263,96 @@ angular.module("openshiftConsole")
       });
     };
 
+    var COMPUTE_RESOURCE_QUOTAS = [
+      "cpu",
+      "requests.cpu",
+      "memory",
+      "requests.memory",
+      "limits.cpu",
+      "limits.memory"
+    ];
+
+    var getNotificaitonMessage = function(used, usedValue, hard, hardValue, quotaKey) {
+      var msgPrefix = "Your project is " + (hardValue < usedValue ? 'over' : 'at') + " quota. ";
+      var msg;
+      if (_.includes(COMPUTE_RESOURCE_QUOTAS, quotaKey)) {
+        msg = msgPrefix + "It is using " + percent((usedValue/hardValue), 0) + " of " + usageWithUnits(hard, quotaKey) + " " + humanizeQuotaResource(quotaKey, true) + ".";
+      } else {
+        msg = msgPrefix + "It is using " + usedValue + " of " + hardValue + " " + humanizeQuotaResource(quotaKey, true) + ".";
+      }
+
+      msg = _.escape(msg);
+
+      if (Constants.QUOTA_NOTIFICATION_MESSAGE && Constants.QUOTA_NOTIFICATION_MESSAGE[quotaKey]) {
+        msg += " " + Constants.QUOTA_NOTIFICATION_MESSAGE[quotaKey];
+      }
+
+      return msg;
+    };
+
+    // Return notifications if you are at quota or over any quota for any resource. Do *not*
+    // warn about quota for 'resourcequotas' or resources whose hard limit is
+    // 0, however.
+    var getQuotaNotifications = function(quotas, clusterQuotas, projectName) {
+      var notifications = [];
+
+      var notificationsForQuota = function(quota) {
+        var q = quota.status.total || quota.status;
+        _.each(q.hard, function(hard, quotaKey) {
+          var hardValue = usageValue(hard);
+          var used = _.get(q, ['used', quotaKey]);
+          var usedValue = usageValue(used);
+
+          // We always ignore quota warnings about being out of
+          // resourcequotas since end users cant do anything about it
+          if (quotaKey === 'resourcequotas' || !hardValue || !usedValue) {
+            return;
+          }
+
+          if(hardValue <= usedValue) {
+            notifications.push({
+              id: "quota-limit-reached-" + quotaKey,
+              namespace: projectName,
+              type: (hardValue < usedValue ? 'warning' : 'info'),
+              message: getNotificaitonMessage(used, usedValue, hard, hardValue, quotaKey),
+              isHTML: true,
+              skipToast: true,
+              showInDrawer: true,
+              actions: [
+                {
+                  name: 'View Quotas',
+                  title: 'View project quotas',
+                  onClick: function() {
+                    $location.url("/project/" + $routeParams.project + "/quota");
+                    $rootScope.$emit('NotificationDrawerWrapper.hide');
+                  }
+                },
+                {
+                  name: "Don't Show Me Again",
+                  title: 'Permenantly hide this notificaiton until quota limit changes',
+                  onClick: function(notification) {
+                    NotificationsService.permanentlyHideNotification(notification.uid, notification.namespace);
+                    $rootScope.$emit('NotificationDrawerWrapper.clear', notification);
+                  }
+                },
+                {
+                  name: "Clear",
+                  title: 'Clear this notificaiton',
+                  onClick: function(notification) {
+                    $rootScope.$emit('NotificationDrawerWrapper.clear', notification);
+                  }
+                }
+              ]
+            });
+          }
+        });
+      };
+      _.each(quotas, notificationsForQuota);
+      _.each(clusterQuotas, notificationsForQuota);
+
+      return notifications;
+    };
+
     // Warn if you are at quota or over any quota for any resource. Do *not*
     // warn about quota for 'resourcequotas' or resources whose hard limit is
     // 0, however.
@@ -324,6 +423,7 @@ angular.module("openshiftConsole")
       getLatestQuotaAlerts: getLatestQuotaAlerts,
       isAnyQuotaExceeded: isAnyQuotaExceeded,
       isAnyStorageQuotaExceeded: isAnyStorageQuotaExceeded,
-      willRequestExceedQuota: willRequestExceedQuota
+      willRequestExceedQuota: willRequestExceedQuota,
+      getQuotaNotifications: getQuotaNotifications
     };
   });
diff --git a/app/scripts/services/resourceAlerts.js b/app/scripts/services/resourceAlerts.js
index 4f9313ac8c..5d95c8f1bc 100644
--- a/app/scripts/services/resourceAlerts.js
+++ b/app/scripts/services/resourceAlerts.js
@@ -6,6 +6,7 @@ angular.module("openshiftConsole")
                     AlertMessageService,
                     DeploymentsService,
                     Navigate,
+                    NotificationsService,
                     QuotaService) {
     var annotation = $filter('annotation');
     var humanizeKind = $filter('humanizeKind');
@@ -70,36 +71,13 @@ angular.module("openshiftConsole")
       return alerts;
     };
 
-    var setGenericQuotaWarning = function(quotas, clusterQuotas, projectName, alerts) {
-      var isHidden = AlertMessageService.isAlertPermanentlyHidden("overview-quota-limit-reached", projectName);
-      if (!isHidden && QuotaService.isAnyQuotaExceeded(quotas, clusterQuotas)) {
-        if (alerts['quotaExceeded']) {
-          // Don't recreate the alert or it will reset the temporary hidden state
-          return;
+    var setQuotaNotifications = function(quotas, clusterQuotas, projectName) {
+      var notifications = QuotaService.getQuotaNotifications(quotas, clusterQuotas, projectName);
+      _.each(notifications, function(notification) {
+        if(!NotificationsService.isNotificationPermanentlyHidden(notification)) {
+          NotificationsService.addNotification(notification);
         }
-
-        alerts['quotaExceeded'] = {
-          type: 'warning',
-          message: 'Quota limit has been reached.',
-          links: [{
-            href: Navigate.quotaURL(projectName),
-            label: "View Quota"
-          },{
-            href: "",
-            label: "Don't Show Me Again",
-            onClick: function() {
-              // Hide the alert on future page loads.
-              AlertMessageService.permanentlyHideAlert("overview-quota-limit-reached", projectName);
-
-              // Return true close the existing alert.
-              return true;
-            }
-          }]
-        };
-      }
-      else {
-        delete alerts['quotaExceeded'];
-      }
+      });
     };
 
     // deploymentConfig, k8s deployment
@@ -207,9 +185,9 @@ angular.module("openshiftConsole")
 
     return {
       getPodAlerts: getPodAlerts,
-      setGenericQuotaWarning: setGenericQuotaWarning,
       getDeploymentStatusAlerts: getDeploymentStatusAlerts,
       getPausedDeploymentAlerts: getPausedDeploymentAlerts,
-      getServiceInstanceAlerts: getServiceInstanceAlerts
+      getServiceInstanceAlerts: getServiceInstanceAlerts,
+      setQuotaNotifications: setQuotaNotifications
     };
   });
diff --git a/app/views/directives/notifications/notification-body.html b/app/views/directives/notifications/notification-body.html
index 8f6e30ab79..1b8f0a186c 100644
--- a/app/views/directives/notifications/notification-body.html
+++ b/app/views/directives/notifications/notification-body.html
@@ -4,6 +4,7 @@
   ng-click="$ctrl.customScope.markRead(notification)">
   <a
     class="pull-right"
+    ng-if="!notification.actions.length"
     tabindex="0"
     ng-click="$ctrl.customScope.clear(notification, $index, notificationGroup)">
     <span class="sr-only">Clear notification</span>
@@ -35,7 +36,7 @@
           href=""
           class="secondary-action"
           title="{{action.title}}"
-          ng-click="$ctrl.customScope.handleAction(notification, action)">
+          ng-click="action.onClick(notification)">
           {{action.name}}
         </a>
       </li>
@@ -71,7 +72,8 @@
         </span>
 
         <span ng-if="!(notification.event.involvedObject)">
-          {{notification.message}}
+          <span ng-if="notification.isHTML" ng-bind-html="notification.message"></span>
+          <span ng-if="!notification.isHTML">{{notification.message}}</span>
           <span ng-repeat="link in notification.links">
             <a
               ng-if="!link.href"
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
index 522288e991..725b5bd8d0 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -53,10 +53,10 @@ return _.get(e, "metadata.name");
 return _.get(e, "metadata.uid");
 }, 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);
-}, K = function() {
-return _.size(P.filteredDeploymentConfigs) + _.size(P.filteredReplicationControllers) + _.size(P.filteredDeployments) + _.size(P.filteredReplicaSets) + _.size(P.filteredStatefulSets) + _.size(P.filteredMonopods) + _.size(P.filteredServiceInstances);
 }, G = function() {
-P.size = W(), P.filteredSize = K();
+return _.size(P.filteredDeploymentConfigs) + _.size(P.filteredReplicationControllers) + _.size(P.filteredDeployments) + _.size(P.filteredReplicaSets) + _.size(P.filteredStatefulSets) + _.size(P.filteredMonopods) + _.size(P.filteredServiceInstances);
+}, 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(), G();
+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;
@@ -315,7 +315,7 @@ _.isEmpty(o) || (t = t.concat(o));
 qe(), ze();
 }, We = function() {
 _.each(P.deploymentConfigs, Me);
-}, Ke = function() {
+}, Ge = function() {
 if (V.builds && P.buildConfigs) {
 P.recentPipelinesByBuildConfig = {}, V.recentBuildsByBuildConfig = {}, V.recentPipelinesByDeploymentConfig = {};
 var e = {};
@@ -330,8 +330,8 @@ return i.sortBuilds(e, !0);
 return i.sortBuilds(e, !0);
 }), We();
 }
-}, Ge = function() {
-k.setGenericQuotaWarning(V.quotas, V.clusterQuotas, n.project, V.alerts);
+}, Ke = function() {
+k.setQuotaNotifications(V.quotas, V.clusterQuotas, n.project);
 };
 P.clearFilter = function() {
 g.clear(), P.filterText = "";
@@ -395,7 +395,7 @@ resource: "deployments"
 }, a, function(e) {
 T = e.by("metadata.uid"), P.deployments = _.sortBy(T, "metadata.name"), Ne(), $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"), Ke(), h.log("builds (subscribe)", V.builds);
+V.builds = e.by("metadata.name"), Ge(), h.log("builds (subscribe)", V.builds);
 })), Ye.push(l.watch({
 group: "apps",
 resource: "statefulsets"
@@ -415,7 +415,7 @@ P.routes = e.by("metadata.name"), Be(), h.log("routes (subscribe)", P.routes);
 poll: R,
 pollInterval: 6e4
 })), Ye.push(l.watch("buildConfigs", a, function(e) {
-P.buildConfigs = e.by("metadata.name"), Fe(), He(), Ke(), ie(), h.log("buildconfigs (subscribe)", P.buildConfigs);
+P.buildConfigs = e.by("metadata.name"), Fe(), He(), Ge(), ie(), h.log("buildconfigs (subscribe)", P.buildConfigs);
 }, {
 poll: R,
 pollInterval: 6e4
@@ -434,12 +434,12 @@ E = e.by("metadata.name"), p.buildDockerRefMapForImageStreams(E, V.imageStreamIm
 poll: R,
 pollInterval: 6e4
 })), Ye.push(l.watch("resourcequotas", a, function(e) {
-V.quotas = e.by("metadata.name"), Ge();
+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"), Ge();
+V.clusterQuotas = e.by("metadata.name"), Ke();
 }, {
 poll: !0,
 pollInterval: 6e4
@@ -941,7 +941,8 @@ description: ""
 } ]
 } ],
 SAAS_OFFERINGS: [],
-APP_LAUNCHER_NAVIGATION: []
+APP_LAUNCHER_NAVIGATION: [],
+QUOTA_NOTIFICATION_MESSAGE: {}
 }), 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",
@@ -3406,20 +3407,20 @@ getBreadcrumbs: function(e) {
 return (e = e || {}).object ? c(e.object, e) : e.kind && e.name && e.namespace ? i(e.name, e.kind, e.namespace, e) : [];
 }
 };
-} ]), angular.module("openshiftConsole").factory("QuotaService", [ "APIService", "$filter", "$q", "DataService", "Logger", function(e, t, n, a, r) {
-var o = t("isNil"), i = t("usageValue"), s = function(e) {
+} ]), angular.module("openshiftConsole").factory("QuotaService", [ "APIService", "$filter", "$location", "$rootScope", "$routeParams", "$q", "Constants", "DataService", "EventsService", "Logger", "NotificationsService", function(e, t, n, a, r, o, i, s, c, l, u) {
+var d = t("isNil"), m = t("usageValue"), p = t("usageWithUnits"), f = t("percent"), g = function(e) {
 return _.every(e.spec.containers, function(e) {
 var t = _.some(_.get(e, "resources.requests"), function(e) {
-return !o(e) && 0 !== i(e);
+return !d(e) && 0 !== m(e);
 }), n = _.some(_.get(e, "resources.limits"), function(e) {
-return !o(e) && 0 !== i(e);
+return !d(e) && 0 !== m(e);
 });
 return !t && !n;
 });
-}, c = function(e) {
+}, h = function(e) {
 return _.has(e, "spec.activeDeadlineSeconds");
-}, l = function(e, t) {
-var n = s(e), a = c(e);
+}, v = function(e, t) {
+var n = g(e), a = h(e);
 return _.filter(t, function(e) {
 var t = e.spec.quota ? e.spec.quota.scopes : e.spec.scopes;
 return _.every(t, function(e) {
@@ -3439,13 +3440,13 @@ return !n;
 return !0;
 });
 });
-}, u = function(e, t) {
-return e ? "Pod" === e.kind ? l(e, t) : _.has(e, "spec.template") ? l(e.spec.template, t) : t : t;
-}, d = t("humanizeQuotaResource"), m = t("humanizeKind"), p = function(e, t, n) {
+}, y = function(e, t) {
+return e ? "Pod" === e.kind ? v(e, t) : _.has(e, "spec.template") ? v(e.spec.template, t) : t : t;
+}, b = t("humanizeQuotaResource"), C = t("humanizeKind"), S = function(e, t, n) {
 var a = e.status.total || e.status;
-if (i(a.hard[n]) <= i(a.used[n])) {
+if (m(a.hard[n]) <= m(a.used[n])) {
 var r, o;
-return r = "Pod" === t.kind ? "You will not be able to create the " + m(t.kind) + " '" + t.metadata.name + "'." : "You can still create " + m(t.kind) + " '" + t.metadata.name + "' but no pods will be created until resources are freed.", o = "pods" === n ? "You are at your quota for pods." : "You are at your quota for " + d(n) + " on pods.", {
+return r = "Pod" === t.kind ? "You will not be able to create the " + C(t.kind) + " '" + t.metadata.name + "'." : "You can still create " + C(t.kind) + " '" + t.metadata.name + "' but no pods will be created until resources are freed.", o = "pods" === n ? "You are at your quota for pods." : "You are at your quota for " + b(n) + " on pods.", {
 type: "Pod" === t.kind ? "error" : "warning",
 message: o,
 details: r,
@@ -3457,7 +3458,7 @@ target: "_blank"
 };
 }
 return null;
-}, f = {
+}, w = {
 cpu: "resources.requests.cpu",
 "requests.cpu": "resources.requests.cpu",
 "limits.cpu": "resources.limits.cpu",
@@ -3466,17 +3467,17 @@ memory: "resources.requests.memory",
 "limits.memory": "resources.limits.memory",
 persistentvolumeclaims: "resources.limits.persistentvolumeclaims",
 "requests.storage": "resources.request.storage"
-}, g = function(e, t, n, a) {
-var r = e.status.total || e.status, o = f[a], s = 0;
+}, k = function(e, t, n, a) {
+var r = e.status.total || e.status, o = w[a], i = 0;
 if (_.each(n.spec.containers, function(e) {
 var t = _.get(e, o);
-t && (s += i(t));
-}), i(r.hard[a]) < i(r.used[a]) + s) {
-var c;
-return c = "Pod" === t.kind ? "You may not be able to create the " + m(t.kind) + " '" + t.metadata.name + "'." : "You can still create " + m(t.kind) + " '" + t.metadata.name + "' but you may not have pods created until resources are freed.", {
+t && (i += m(t));
+}), m(r.hard[a]) < m(r.used[a]) + i) {
+var s;
+return s = "Pod" === t.kind ? "You may not be able to create the " + C(t.kind) + " '" + t.metadata.name + "'." : "You can still create " + C(t.kind) + " '" + t.metadata.name + "' but you may not have pods created until resources are freed.", {
 type: "warning",
-message: "You are close to your quota for " + d(a) + " on pods.",
-details: c,
+message: "You are close to your quota for " + b(a) + " on pods.",
+details: s,
 links: [ {
 href: "project/" + e.metadata.namespace + "/quota",
 label: "View Quota",
@@ -3484,49 +3485,52 @@ target: "_blank"
 } ]
 };
 }
-}, h = function(e, t) {
+}, j = function(e, t) {
 var n = [], a = "Pod" === e.kind ? e : _.get(e, "spec.template");
 return a ? (_.each([ "cpu", "memory", "requests.cpu", "requests.memory", "limits.cpu", "limits.memory", "pods" ], function(r) {
-var i = t.status.total || t.status;
-if (("Pod" !== e.kind || "pods" !== r) && !o(i.hard[r])) {
-var s = p(t, e, r);
-if (s) n.push(s); else if ("pods" !== r) {
-var c = g(t, e, a, r);
-c && n.push(c);
+var o = t.status.total || t.status;
+if (("Pod" !== e.kind || "pods" !== r) && !d(o.hard[r])) {
+var i = S(t, e, r);
+if (i) n.push(i); else if ("pods" !== r) {
+var s = k(t, e, a, r);
+s && n.push(s);
 }
 }
 }), n) : n;
-}, v = function(t, n, a) {
+}, P = function(t, n, a) {
 var r = [];
 return t && n ? (_.each(t, function(t) {
-var s = u(t, n), c = u(t, a), l = e.objectToResourceGroupVersion(t);
-if (l) {
-var d = e.kindToResource(t.kind, !0), p = m(t.kind), f = "";
-l.group && (f = l.group + "/"), f += l.resource;
-var g = function(e) {
+var o = y(t, n), i = y(t, a), s = e.objectToResourceGroupVersion(t);
+if (s) {
+var c = e.kindToResource(t.kind, !0), l = C(t.kind), u = "";
+s.group && (u = s.group + "/"), u += s.resource;
+var p = function(e) {
 var n = e.status.total || e.status;
-!o(n.hard[f]) && i(n.hard[f]) <= i(n.used[f]) && r.push({
+!d(n.hard[u]) && m(n.hard[u]) <= m(n.used[u]) && r.push({
 type: "error",
-message: "You are at your quota of " + n.hard[f] + " " + ("1" === n.hard[f] ? p : d) + " in this project.",
-details: "You will not be able to create the " + p + " '" + t.metadata.name + "'.",
+message: "You are at your quota of " + n.hard[u] + " " + ("1" === n.hard[u] ? l : c) + " in this project.",
+details: "You will not be able to create the " + l + " '" + t.metadata.name + "'.",
 links: [ {
 href: "project/" + e.metadata.namespace + "/quota",
 label: "View Quota",
 target: "_blank"
 } ]
-}), r = r.concat(h(t, e));
+}), r = r.concat(j(t, e));
 };
-_.each(s, g), _.each(c, g);
+_.each(o, p), _.each(i, p);
 }
 }), r) : r;
-}, y = function(e, t, n) {
+}, R = [ "cpu", "requests.cpu", "memory", "requests.memory", "limits.cpu", "limits.memory" ], T = function(e, t, n, a, r) {
+var o, s = "Your project is " + (a < t ? "over" : "at") + " quota. ";
+return o = _.includes(R, r) ? s + "It is using " + f(t / a, 0) + " of " + p(n, r) + " " + b(r, !0) + "." : s + "It is using " + t + " of " + a + " " + b(r, !0) + ".", o = _.escape(o), i.QUOTA_NOTIFICATION_MESSAGE && i.QUOTA_NOTIFICATION_MESSAGE[r] && (o += " " + i.QUOTA_NOTIFICATION_MESSAGE[r]), o;
+}, E = function(e, t, n) {
 var a = function(e) {
 var t = e.status.total || e.status;
 return _.some(t.hard, function(e, a) {
 if ("resourcequotas" === a) return !1;
 if (!n || _.includes(n, a)) {
-if (!(e = i(e))) return !1;
-var r = i(_.get(t, [ "used", a ]));
+if (!(e = m(e))) return !1;
+var r = m(_.get(t, [ "used", a ]));
 return !!r && e <= r;
 }
 });
@@ -3534,37 +3538,74 @@ return !!r && e <= r;
 return _.some(e, a) || _.some(t, a);
 };
 return {
-filterQuotasForResource: u,
-isBestEffortPod: s,
-isTerminatingPod: c,
-getResourceLimitAlerts: h,
-getQuotaAlerts: v,
+filterQuotasForResource: y,
+isBestEffortPod: g,
+isTerminatingPod: h,
+getResourceLimitAlerts: j,
+getQuotaAlerts: P,
 getLatestQuotaAlerts: function(e, t) {
-var o, i, s = [];
-return s.push(a.list("resourcequotas", t).then(function(e) {
-o = e.by("metadata.name"), r.log("quotas", o);
-})), s.push(a.list("appliedclusterresourcequotas", t).then(function(e) {
-i = e.by("metadata.name"), r.log("cluster quotas", i);
-})), n.all(s).then(function() {
+var n, a, r = [];
+return r.push(s.list("resourcequotas", t).then(function(e) {
+n = e.by("metadata.name"), l.log("quotas", n);
+})), r.push(s.list("appliedclusterresourcequotas", t).then(function(e) {
+a = e.by("metadata.name"), l.log("cluster quotas", a);
+})), o.all(r).then(function() {
 return {
-quotaAlerts: v(e, o, i)
+quotaAlerts: P(e, n, a)
 };
 });
 },
-isAnyQuotaExceeded: y,
+isAnyQuotaExceeded: E,
 isAnyStorageQuotaExceeded: function(e, t) {
-return y(e, t, [ "requests.storage", "persistentvolumeclaims" ]);
+return E(e, t, [ "requests.storage", "persistentvolumeclaims" ]);
 },
 willRequestExceedQuota: function(e, t, n, a) {
 var r = function(e) {
-var t = e.status.total || e.status, r = i(a);
+var t = e.status.total || e.status, r = m(a);
 if (!n) return !1;
 var o = _.get(t.hard, n);
-if (!(o = i(o))) return !1;
-var s = i(_.get(t, [ "used", n ]));
-return s ? o < s + r : o < r;
+if (!(o = m(o))) return !1;
+var i = m(_.get(t, [ "used", n ]));
+return i ? o < i + r : o < r;
 };
 return _.some(e, r) || _.some(t, r);
+},
+getQuotaNotifications: function(e, t, o) {
+var i = [], s = function(e) {
+var t = e.status.total || e.status;
+_.each(t.hard, function(e, s) {
+var c = m(e), l = _.get(t, [ "used", s ]), d = m(l);
+"resourcequotas" !== s && c && d && c <= d && i.push({
+id: "quota-limit-reached-" + s,
+namespace: o,
+type: c < d ? "warning" : "info",
+message: T(0, d, e, c, s),
+isHTML: !0,
+skipToast: !0,
+showInDrawer: !0,
+actions: [ {
+name: "View Quotas",
+title: "View project quotas",
+onClick: function() {
+n.url("/project/" + r.project + "/quota"), a.$emit("NotificationDrawerWrapper.hide");
+}
+}, {
+name: "Don't Show Me Again",
+title: "Permenantly hide this notificaiton until quota limit changes",
+onClick: function(e) {
+u.permanentlyHideNotification(e.uid, e.namespace), a.$emit("NotificationDrawerWrapper.clear", e);
+}
+}, {
+name: "Clear",
+title: "Clear this notificaiton",
+onClick: function(e) {
+a.$emit("NotificationDrawerWrapper.clear", e);
+}
+} ]
+});
+});
+};
+return _.each(e, s), _.each(t, s), i;
 }
 };
 } ]), angular.module("openshiftConsole").factory("SecurityCheckService", [ "APIService", "$filter", "Constants", function(e, t, n) {
@@ -4038,8 +4079,8 @@ sortAppNames: function(e) {
 e.sort(t);
 }
 };
-}), angular.module("openshiftConsole").factory("ResourceAlertsService", [ "$filter", "AlertMessageService", "DeploymentsService", "Navigate", "QuotaService", function(e, t, n, a, r) {
-var o = e("annotation"), i = e("humanizeKind"), s = e("deploymentStatus"), c = e("groupedPodWarnings"), l = function(e, t, n, a) {
+}), angular.module("openshiftConsole").factory("ResourceAlertsService", [ "$filter", "AlertMessageService", "DeploymentsService", "Navigate", "NotificationsService", "QuotaService", function(e, t, n, a, r, o) {
+var i = e("annotation"), s = e("humanizeKind"), c = e("deploymentStatus"), l = e("groupedPodWarnings"), u = function(e, t, n, a) {
 e[t + "-" + n.reason] = {
 type: a,
 message: n.message
@@ -4048,7 +4089,7 @@ message: n.message
 return {
 getPodAlerts: function(e, n) {
 if (_.isEmpty(e)) return {};
-var r = {}, o = c(e);
+var r = {}, o = l(e);
 return _.each(o, function(e, o) {
 var i = _.head(e);
 if (i) {
@@ -4083,29 +4124,10 @@ r[s] = c;
 }
 }), r;
 },
-setGenericQuotaWarning: function(e, n, o, i) {
-if (!t.isAlertPermanentlyHidden("overview-quota-limit-reached", o) && r.isAnyQuotaExceeded(e, n)) {
-if (i.quotaExceeded) return;
-i.quotaExceeded = {
-type: "warning",
-message: "Quota limit has been reached.",
-links: [ {
-href: a.quotaURL(o),
-label: "View Quota"
-}, {
-href: "",
-label: "Don't Show Me Again",
-onClick: function() {
-return t.permanentlyHideAlert("overview-quota-limit-reached", o), !0;
-}
-} ]
-};
-} else delete i.quotaExceeded;
-},
 getDeploymentStatusAlerts: function(e, t) {
 if (!e || !t) return {};
-var n, r = {}, i = _.get(e, "metadata.name"), c = s(t), l = o(t, "deploymentVersion"), u = l ? i + " #" + l : t.metadata.name, d = a.resourceURL(t);
-switch (c) {
+var n, r = {}, o = _.get(e, "metadata.name"), s = c(t), l = i(t, "deploymentVersion"), u = l ? o + " #" + l : t.metadata.name, d = a.resourceURL(t);
+switch (s) {
 case "Cancelled":
 r[t.metadata.uid + "-cancelled"] = {
 type: "info",
@@ -4123,7 +4145,7 @@ tab: "logs"
 }).toString(), r[t.metadata.uid + "-failed"] = {
 type: "error",
 message: "Deployment " + u + " failed.",
-reason: o(t, "openshift.io/deployment.status-reason"),
+reason: i(t, "openshift.io/deployment.status-reason"),
 links: [ {
 href: n,
 label: "View Log"
@@ -4150,7 +4172,7 @@ namespace: t.metadata.namespace
 }).then(_.noop, function(n) {
 a[t.metadata.uid + "-pause-error"] = {
 type: "error",
-message: "An error occurred resuming the " + i(t.kind) + ".",
+message: "An error occurred resuming the " + s(t.kind) + ".",
 details: e("getErrorDetails")(n)
 };
 });
@@ -4168,7 +4190,13 @@ reason: "ProvisionFailed"
 }), o = _.find(e.status.conditions, {
 reason: "DeprovisioningFailed"
 });
-return a && l(t, n, a, "warning"), r && l(t, n, r, "error"), o && l(t, n, o, "error"), t;
+return a && u(t, n, a, "warning"), r && u(t, n, r, "error"), o && u(t, n, o, "error"), t;
+},
+setQuotaNotifications: function(e, t, n) {
+var a = o.getQuotaNotifications(e, t, n);
+_.each(a, function(e) {
+r.isNotificationPermanentlyHidden(e) || r.addNotification(e);
+});
 }
 };
 } ]), angular.module("openshiftConsole").factory("ListRowUtils", function() {
@@ -14060,7 +14088,7 @@ 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", "EventsService", function(e, t, n, a, r, o, i, s, c) {
+controller: [ "$filter", "$interval", "$location", "$timeout", "$routeParams", "$rootScope", "Constants", "DataService", "EventsService", "NotificationsService", function(e, t, n, a, r, o, i, s, c) {
 var l, u, d = _.get(i, "DISABLE_GLOBAL_EVENT_WATCH"), m = e("isIE")() || e("isEdge")(), p = this, f = [], g = {}, h = {}, v = {}, y = function(e) {
 e || (p.drawerHidden = !0);
 }, b = function(e, t) {
@@ -14122,12 +14150,13 @@ g[r.project] = j(P(e.by("metadata.name"))), E();
 if (t.showInDrawer) {
 var n = t.namespace || r.project, a = t.id || _.uniqueId("notification_") + Date.now();
 h[n] = h[n] || {}, h[n][a] = {
-actions: null,
+actions: t.actions,
 unread: !c.isRead(a),
 uid: a,
 type: t.type,
 lastTimestamp: t.timestamp,
 message: t.message,
+isHTML: t.isHTML,
 details: t.details,
 namespace: n,
 links: t.links
@@ -14154,6 +14183,13 @@ drawerTitle: "Notifications",
 hasUnread: !1,
 showClearAll: !0,
 showMarkAllRead: !0,
+removeNotificationFromGroup: function(e) {
+_.each(p.notificationGroups, function(t) {
+_.remove(t.notifications, function(t) {
+return t.uid === e.uid && t.namespace === e.namespace;
+});
+});
+},
 onClose: function() {
 p.drawerHidden = !0;
 },
@@ -14182,7 +14218,8 @@ p.drawerHidden = !0;
 },
 onLinkClick: function(e) {
 e.onClick(), p.drawerHidden = !0;
-}
+},
+countUnreadNotifications: k
 }
 });
 var O = function() {
@@ -14190,6 +14227,10 @@ r.project && U(), f.push(o.$on("$routeChangeSuccess", function(e, t, n) {
 b(t, n) && (p.customScope.projectName = r.project, U());
 })), f.push(o.$on("NotificationDrawerWrapper.toggle", function() {
 p.drawerHidden = !p.drawerHidden;
+})), f.push(o.$on("NotificationDrawerWrapper.hide", function() {
+p.drawerHidden = !0;
+})), f.push(o.$on("NotificationDrawerWrapper.clear", function(e, t) {
+c.markCleared(t.uid), p.removeNotificationFromGroup(t), p.countUnreadNotifications();
 }));
 };
 p.$onInit = function() {
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index c61f0b1367..f05eb59984 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -7556,7 +7556,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $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" +
+    "<a class=\"pull-right\" ng-if=\"!notification.actions.length\" tabindex=\"0\" ng-click=\"$ctrl.customScope.clear(notification, $index, notificationGroup)\">\n" +
     "<span class=\"sr-only\">Clear notification</span>\n" +
     "<span aria-hidden=\"true\" class=\"pull-left pficon pficon-close\"></span>\n" +
     "</a>\n" +
@@ -7566,7 +7566,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</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" +
+    "<a ng-if=\"!action.isSeparator\" href=\"\" class=\"secondary-action\" title=\"{{action.title}}\" ng-click=\"action.onClick(notification)\">\n" +
     "{{action.name}}\n" +
     "</a>\n" +
     "</li>\n" +
@@ -7587,7 +7587,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-if=\"!(eventObjUrl)\">{{notification.event.involvedObject.name}}</span>\n" +
     "</span>\n" +
     "<span ng-if=\"!(notification.event.involvedObject)\">\n" +
-    "{{notification.message}}\n" +
+    "<span ng-if=\"notification.isHTML\" ng-bind-html=\"notification.message\"></span>\n" +
+    "<span ng-if=\"!notification.isHTML\">{{notification.message}}</span>\n" +
     "<span ng-repeat=\"link in notification.links\">\n" +
     "<a ng-if=\"!link.href\" href=\"\" ng-click=\"$ctrl.customScope.onLinkClick(link)\" role=\"button\">{{link.label}}</a>\n" +
     "<a ng-if=\"link.href\" ng-href=\"{{link.href}}\" ng-click=\"$ctrl.customScope.close()\" ng-attr-target=\"{{link.target}}\">{{link.label}}</a>\n" +