ZEPPELIN-269 : Adding Notifications Service for Zeppelin

[Madhuka]

Adding Notifications Service for Zeppelin

• Notifications feature added
  • UI-Notifications component added
  • Zeppelin notifications can be configured
  • Different level of notification
  • ngToast.danger('message')
  • ngToast.warning('message')
  • ngToast.info('message')
  • ngToast.success('message')

Screen shots

[felixcheung]

looks good... what is the guideline on when to show this notification?

[Madhuka]

zeppelin Notifications are designed to inform users about status of zeppelin.
(All Notifications messages should give informative feedback.)

1. Error Notifications will inform system issues.
   eg: Network issue, File loading issue, System failtures
2. Warning Notifications are based on incorrect user interactions such as wrong data types/ queries/ wrong data model for chart types.
3. Primary notifications inform basic informations to the users. There are few other notification levels as well.

Default message will be shown for 10000 ms (time is configurable) and after that the message starts fading out. If user noticed the notification, user can remove it by clicking on it.

[corneadoug]

Just tested it out a bit.
I'm not a big fan of the hover effect on the error (it gets a bit transparent)

I also think the message time should be reduced to something like 6000ms, currently its too long.
I'm not getting the console.log anymore when the error is showing.
(Need to check it out, because we can't have those errors not showing in console)

I think it could also be nice not to include any error call in this PR (just the service) and add error calls in another PR.
Because in current Zeppelin state, there is a lot of problems making the error spam a lot, for example:

• I get the angular error everytime I hide/show the editor code.
• I get the angular error 3 times when running the paragraph (because bind is called 3 times)

[Madhuka]

@corneadoug Thanks for the feedback I will update PR

[djoelz]

also what if I want to copy the error? If I click it disappears. Maybe a close X or something and the text is selectable?

[corneadoug]

@djoelz this could be useful.
But I guess this type of error is only as a visual signal that something went wrong and message would be pretty short, you would usually find a stack in the console.

[djoelz]

@corneadoug think of a case where the user does not have access to the console. Think Zeppelin hosted as a website. Then users might run into issues that they want who ever is hosting the site to investigate. How would they send these errors? That's why I think being able to copy the text would be useful.

[corneadoug]

console = web browser dev tools console.
What I mean is that those message are visual feedback, they wouldn't be enough for debug.
But copy pasting it could be a plus.

[Madhuka]

@djoelz Current Zeppelin doesn't have facility to show error messages or system failures for the users on web user interface. So the notification service will enable this. Zeppelin developers could use this notification service for error handling. The answers corneadoug have given are correct.
If any more uncleared issues please let us know.

Thanks.

[Madhuka]

@corneadoug
Hover is fixed for less transparent and Error Notifications have removed so PR only contain notification services.

Default message time is 6000ms.If notification message is needed to show for more duration than default time. It can be done as below.

  // Message with custom duration 
  Notification.error({message: 'Error notification', delay: 1000});

[Madhuka]

@Leemoonsoo : Ready for Merge
@bzz, @corneadoug This contain notification service

[corneadoug]

I have more feedbacks/changes, especially to match @djoelz comments.
So I will do a PR on your branch :)

[corneadoug]

@Madhuka Can you update the PR description with new screenshot from my PR?

[Madhuka]

@corneadoug Thanks
I will share it

[Madhuka]

Moved to 'ngToast Directive' from 'angular-ui-notification'. It include below features

• Button to close the notification
• Auto close at 6000ms
• No close event on notification click
• Changed the original ngToast style
• Error message can be copied

Notifications can be used by including ngToast service in the controller. It support four different level of notification:

• ngToast.danger('message')
• ngToast.warning('message')
• ngToast.info('message')
• ngToast.success('message')

[corneadoug]

Looks good to me (obviously) :)
Merge +1

[djoelz]

That looks great! Good job guys!

[Madhuka]

It is good to go for Merge.
+1

[Leemoonsoo]

I wanted to mention that there were similar effort before. #224.

Can someone tell me how i can use this feature?

[Madhuka]

@Leemoonsoo
Yes, #224 also had same feature but in here we some improvements you can see it UI.

You can used notification service by calling.

//passing danger notification for user
ngToast.danger('message')

//passing warning for user
ngToast.warning('message')

//passing some information for user
ngToast.info('message')

//giving success notification for user
ngToast.success('message')

[Leemoonsoo]

Thanks for usage. tested and working well.
LGTM!

[corneadoug]

#224 was closed, and I'm not sure why.

You can find most of the differences in this PR thread, main ones being:

• Copy paste of message allowed (no more close notification when clicked)
• Closing button on the notification

This PR only brings the Notification Service, so that we separate adding the notifications in the zeppelin code from adding the Notification Service.

On top of what @Madhuka said, you will also have to inject the service in your controller, for example:

angular.module('zeppelinWebApp')
  .controller('ParagraphCtrl', function($scope, $rootScope, $route, $window, $element, $routeParams, $location, $timeout, $compile, websocketMsgSrv, ngToast) {