Skip to content

Commit 52a0764

Browse files
benjaminapetersenbenjaminapetersen
committed
Add notification-drawer to show curated list of events to user
- Show events that pass the white list in OPENSHIFT_CONSTANTS.EVENTS_TO_SHOW - Internal Notifications coming in next iteration - Add patternfly.notifications - add notification counter to top bar - add notification event service - add drawer-wrapper as a proxy to pf-notification-drawer - need our own controller for filtering, etc - Update event system to use $rootScope.$emit rather than a custom service - add sessionStorage cache to keep track of read/unread state - Debounce watch in notification service based on work recently done in DataService to support - Update web-common to 0.0.43, includes DataService.watch() flag - Add FEATURE_FLAG.global_event_watch_for_notification_drawer - kill switch in case watching events is too expensive - would still allow internal notifications to appear in drawer - Add link to events page, update index.html - Migrate EVENTS_TO_SHOW map out of EventsService into Constants
1 parent 3130e60 commit 52a0764

15 files changed

+647
-7
lines changed

Diff for: ‎app/index.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@
4040
<body class="console-os">
4141
<!-- Add your site or application content here -->
4242

43-
<toast-notifications></toast-notifications>
43+
<toast-notifications></toast-notifications>
44+
<notification-drawer-wrapper></notification-drawer-wrapper>
45+
4446
<div ng-view>
4547
<!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
4648
<nav class="navbar navbar-pf-alt top-header" role="navigation">
@@ -232,6 +234,7 @@ <h1>JavaScript Required</h1>
232234
<script src="scripts/services/listRowUtils.js"></script>
233235
<script src="scripts/services/ownerReferences.js"></script>
234236
<script src="scripts/controllers/landingPage.js"></script>
237+
<script src="scripts/services/events.js"></script>
235238
<script src="scripts/controllers/projects.js"></script>
236239
<script src="scripts/controllers/pods.js"></script>
237240
<script src="scripts/controllers/pod.js"></script>
@@ -389,6 +392,8 @@ <h1>JavaScript Required</h1>
389392
<script src="scripts/directives/affix.js"></script>
390393
<script src="scripts/directives/editEnvironmentVariables.js"></script>
391394
<script src="scripts/directives/initContainersSummary.js"></script>
395+
<script src="scripts/directives/notifications/notificationCounter.js"></script>
396+
<script src="scripts/directives/notifications/notificationDrawerWrapper.js"></script>
392397
<script src="scripts/filters/date.js"></script>
393398
<script src="scripts/filters/resources.js"></script>
394399
<script src="scripts/filters/canI.js"></script>

Diff for: ‎app/scripts/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ angular
2222
'patternfly.charts',
2323
'patternfly.navigation',
2424
'patternfly.sort',
25+
'patternfly.notification',
2526
'openshiftConsoleTemplates',
2627
'ui.ace',
2728
'extension-registry',

Diff for: ‎app/scripts/constants.js

+46-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,11 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
8484

8585
// 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
8686
AVAILABLE_KINDS_BLACKLIST: [],
87-
87+
// Kill switches for features that are not in tech-preview
88+
FEATURE_FLAGS: {
89+
// The long running watch on events may be extremely expensive.
90+
global_event_watch_for_notification_drawer: true
91+
},
8892
ENABLE_TECH_PREVIEW_FEATURE: {
8993
// Enable the new landing page and service catalog experience
9094
service_catalog_landing_page: false,
@@ -139,6 +143,47 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
139143
{resource: 'services', group: ''},
140144
{resource: 'statefulsets', group: 'apps'}
141145
],
146+
// TODO:
147+
// This map can drive both the drawer & toast messages by
148+
// updating it to the following format:
149+
// { drawer: true, toast: true }
150+
// TODO: Also consider an API_OBJECTS_TO_IGNORE
151+
// map that can blacklist some, for example, if FailedCreate
152+
// applies to many but we don't want to see all.
153+
EVENTS_TO_SHOW: {
154+
// CRUD events that apply to more than one api object
155+
FailedCreate: true,
156+
FailedDelete: true,
157+
FailedUpdate: true,
158+
// Build
159+
BuildStarted: true,
160+
BuildCompleted: true,
161+
BuildFailed: true,
162+
BuildCancelled: true,
163+
// BuildConfig
164+
//
165+
// Deployment
166+
Failed: true,
167+
ScalingReplicaSet: true,
168+
DeploymentCancelled: true,
169+
// DeploymentConfig
170+
DeploymentCreated: true,
171+
DeploymentCreationFailed: true,
172+
// Pod
173+
FailedSync: true,
174+
// SuccessfulDelete: true,
175+
// Cron
176+
//
177+
// PodAutoscaler
178+
SuccessfulRescale: true,
179+
FailedRescale: true,
180+
// Service
181+
LoadBalancerUpdateFailed: true,
182+
// PVC
183+
VolumeDeleted: true,
184+
FailedBinding: true,
185+
ProvisioningFailed: true
186+
},
142187

143188
// href's will be prefixed with /project/{{projectName}} unless they are absolute URLs
144189
PROJECT_NAVIGATION: [

Diff for: ‎app/scripts/directives/notifications/notificationCounter.js

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
'use strict';
2+
3+
angular
4+
.module('openshiftConsole')
5+
.component('notificationCounter', {
6+
templateUrl: 'views/directives/notifications/notification-counter.html',
7+
bindings: {},
8+
controller: [
9+
'$routeParams',
10+
'$rootScope',
11+
'Constants',
12+
'DataService',
13+
function($routeParams, $rootScope, Constants, DataService) {
14+
var ENABLE_EVENT_WATCH = _.get(Constants, 'FEATURE_FLAGS.global_event_watch_for_notification_drawer');
15+
var counter = this;
16+
var drawerHidden = true;
17+
18+
var rootScopeWatches = [];
19+
// this one is treated separately from the rootScopeWatches as
20+
// it may need to be updated outside of the lifecycle of init/destroy
21+
var notificationListener;
22+
23+
var eventsWatcher;
24+
25+
var deregisterEventsWatch = function() {
26+
if(eventsWatcher) {
27+
DataService.unwatch(eventsWatcher);
28+
}
29+
};
30+
31+
var watchEvents = function(projectName, cb) {
32+
if(projectName && ENABLE_EVENT_WATCH) {
33+
eventsWatcher = DataService.watch('events', {namespace: projectName}, _.debounce(cb, 50), { skipDigest: true });
34+
}
35+
};
36+
37+
var watchNotifications = function(projectName, cb) {
38+
if(!projectName) {
39+
return;
40+
}
41+
notificationListener = $rootScope.$on('NotificationsService.onNotificationAdded', cb);
42+
};
43+
44+
var deregisterNotificationListener = function() {
45+
notificationListener && notificationListener();
46+
};
47+
48+
var deregisterRootScopeWatches = function() {
49+
_.each(rootScopeWatches, function(deregister) {
50+
deregister();
51+
});
52+
};
53+
54+
// TODO: since the current IMPL of the drawer doesn't support a "global"
55+
// empty state, need to hide the bell icon entirely if there are no messages
56+
// for a project. Otherwise, you open to get a blank panel. Thats not ideal.
57+
var toggleVisibility = function(projectName) {
58+
if(!projectName) {
59+
counter.hide = true;
60+
}
61+
counter.showNewNotificationIndicator = true;
62+
};
63+
64+
counter.onClick = function() {
65+
drawerHidden = !drawerHidden;
66+
counter.showNewNotificationIndicator = false;
67+
$rootScope.$emit('notification-drawer:show', {
68+
drawerHidden: drawerHidden
69+
});
70+
};
71+
72+
var genericEventCallback = function() {
73+
counter.showNewNotificationIndicator = true;
74+
};
75+
76+
var reset = function() {
77+
deregisterEventsWatch();
78+
deregisterNotificationListener();
79+
watchEvents($routeParams.project, genericEventCallback);
80+
watchNotifications($routeParams.project, genericEventCallback);
81+
toggleVisibility($routeParams.project);
82+
};
83+
84+
counter.$onInit = function() {
85+
reset();
86+
rootScopeWatches.push($rootScope.$on("$routeChangeSuccess", function () {
87+
reset();
88+
}));
89+
};
90+
91+
counter.$onDestroy = function() {
92+
deregisterEventsWatch();
93+
deregisterNotificationListener();
94+
deregisterRootScopeWatches();
95+
};
96+
}
97+
]
98+
});

0 commit comments

Comments
 (0)