Bug 1679110 - [RFE] change Admin Portal toast notifications location
Summary: [RFE] change Admin Portal toast notifications location
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: Red Hat Enterprise Virtualization Manager
Classification: Red Hat
Component: ovirt-engine
Version: 4.3.0
Hardware: Unspecified
OS: Unspecified
medium
medium
Target Milestone: ovirt-4.4.0
: ---
Assignee: rszwajko
QA Contact: Pavel Novotny
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2019-02-20 11:17 UTC by Greg Sheremeta
Modified: 2020-08-04 13:19 UTC (History)
7 users (show)

Fixed In Version: rhv-4.4.0-29
Doc Type: Enhancement
Doc Text:
This enhancement moves the pop-up ("toast") notifications from the upper right corner to the lower right corner, so they no longer cover the action buttons. Now, the notifications rise from the bottom right corner to within 400 px of the top.
Clone Of:
Environment:
Last Closed: 2020-08-04 13:16:55 UTC
oVirt Team: UX
Target Upstream Version:
Embargoed:


Attachments (Terms of Use)
current notifications demo (2.78 MB, application/x-matroska)
2019-02-20 11:17 UTC, Greg Sheremeta
no flags Details
resizing details with notifications moved 375px from top (4.43 MB, video/webm)
2020-03-12 13:07 UTC, rszwajko
no flags Details
resizing vm screen with notifications moved 375px from top (654.58 KB, video/webm)
2020-03-12 13:08 UTC, rszwajko
no flags Details
list of notifications growing bottom-up from bottom right corner up to 400px from top (196.18 KB, video/webm)
2020-03-17 17:32 UTC, rszwajko
no flags Details
plugin for triggering notifications (1.31 KB, application/zip)
2020-03-17 17:35 UTC, rszwajko
no flags Details
resizing details with notifications reaching max 400px from top (3.79 MB, video/webm)
2020-03-23 10:59 UTC, rszwajko
no flags Details
list of notifications growing bottom-up from bottom right corner up to 400px from top (buttons below notifications) (365.56 KB, video/webm)
2020-03-23 11:01 UTC, rszwajko
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Red Hat Product Errata RHSA-2020:3247 0 None None None 2020-08-04 13:19:06 UTC
oVirt gerrit 107710 0 master MERGED webadmin: show notifications in bottom right corner 2020-08-06 11:41:47 UTC

Description Greg Sheremeta 2019-02-20 11:17:03 UTC
Created attachment 1536649 [details]
current notifications demo

Description of problem:
[RFE] enhance Admin Portal toast notifications to allow type filtering and location change

In BZ 1637015 – [RFE] add option to disable toast notifications per user
we added dismiss and snooze functionality. Add functionality to allow users to further control what notifications they see.

Most of this should probably live in a settings dialog / page.

1. Show all notifications vs. only mine
2. Toggle certain kinds of notifications (e.g. don't show VM start, but do show VM migrations ...)
3. Control the location of the toast notifications. The default top right location covers all the action buttons and is quite intrusive.

Version-Release number of selected component (if applicable):
4.3

Comment 1 Michal Skrivanek 2019-02-21 05:37:02 UTC
We don’t have a settings page, or you mean the one we use for console keys?

Comment 2 Greg Sheremeta 2019-02-23 11:41:36 UTC
(In reply to Michal Skrivanek from comment #1)
> We don’t have a settings page, or you mean the one we use for console keys?

I'm referring to
https://bugzilla.redhat.com/show_bug.cgi?id=1171924

Comment 3 Laura Wright 2019-03-05 13:43:46 UTC
With regards to toast notifications settings there have been some updates to the PF4 notification drawer and it now features settings which is exciting so we can take a closer look to see if that component fits our needs.

Comment 4 RHEL Program Management 2019-12-12 10:00:08 UTC
The documentation text flag should only be set after 'doc text' field is provided. Please provide the documentation text and set the flag to '?' again.

Comment 5 Laura Wright 2019-12-12 13:16:38 UTC
Here are some wireframes for a short term solution for the placement of the toast notifications: https://marvelapp.com/50f0bee When we start to transition the notification drawer over to PF4 we should revisit this again.

Comment 6 rszwajko 2020-03-12 13:07:18 UTC
Created attachment 1669649 [details]
resizing details with notifications moved 375px from top

Comment 7 rszwajko 2020-03-12 13:08:36 UTC
Created attachment 1669651 [details]
resizing vm screen with notifications moved 375px from top

Comment 8 rszwajko 2020-03-12 13:17:21 UTC
Check the screen recordings above - this is a proof of concept implementation of following design -> https://marvelapp.com/50f0bee/screen/64413543

Comment 9 Laura Wright 2020-03-12 14:59:05 UTC
The behavior looks good to me for the most part. My one comment regards the placement of it, I would lower it a bit more on the page so it does not cover the main page content as much. Kind of hard to gauge however depending on if there's a super long table view or other similar situations.

Comment 10 rszwajko 2020-03-17 17:32:18 UTC
Created attachment 1670896 [details]
list of notifications growing bottom-up from  bottom right corner up to 400px from top

Comment 11 rszwajko 2020-03-17 17:35:33 UTC
Created attachment 1670897 [details]
plugin for triggering notifications

To trigger notification
1.  go to Compute -> Virtual Machines
2. click TEST button

To reset the counter click RESET.

Comment 12 Laura Wright 2020-03-18 12:57:08 UTC
It looks great to me! Nice work on it!

Comment 13 Scott Dickerson 2020-03-19 19:39:13 UTC
New toasts show up under the dismiss buttons, and the dismiss buttons track up.  Plus enough toasts and you need to scroll the entire page to see them all.  How does that work with an iframe plugin (like dashboard)?  That seems a bit awkward to me.

What about keeping the dismiss buttons at the bottom of the page, show the newest toast directly above it and letting older toasts track up the page?  That way:
  1. Newest toasts would always appear in the same place
  2. The dismiss / do not disturb buttons are in a static location
  3. The toast "notif" area can set overflow to hidden (or scroll in the y) so old toasts go away as new toasts come in (or the user needs to scroll up to see them)

Comment 14 rszwajko 2020-03-20 17:18:12 UTC
> New toasts show up under the dismiss buttons, and the dismiss buttons track up.
Perhaps we can just drop the buttons altogether?
The "dismiss all" buttons feels like a workaround to cope with bursts of notifications - with the new approach it should not be a problem any more.
"Do not disturb" button functionality could be part of user config.

> enough toasts and you need to scroll the entire page to see them all
Hopefully overflow will be a rare exceptional case - it is there to cope with bursts of notifications.
User is still free to review all notifications - we don't discard them silently(however the usual time out still applies)

> How does that work with an iframe plugin (like dashboard)?
When overflow occurs the page grows as other pages - below the dashboard white space appears (different colour then dashboard background)

> What about keeping the dismiss buttons at the bottom of the page
This is the preferred solution, however we need a better way of handling overflow.
Hiding blocks access to some information. Scrolling only the notification container may cause usability issues on smaller screens (double scrollbars etc).

>  Newest toasts would always appear in the same place
IMHO more natural approach is to display newest on top. Ideally this should be part of user configuration.

Comment 15 rszwajko 2020-03-20 17:21:42 UTC
Triggering constant flow of notifications:
0. assumption - attached 'test' plug-in is present(will work with any other plug-in too)
1. open console in dev tools
2. paste: 
var globalCounter=0; setInterval(function() {window.top.pluginApi('test').showToast("success", "Test no " + (++globalCounter))}, 500);

Comment 16 rszwajko 2020-03-23 10:59:43 UTC
Created attachment 1672612 [details]
resizing details with notifications reaching max 400px from top

Comment 17 rszwajko 2020-03-23 11:01:34 UTC
Created attachment 1672613 [details]
list of notifications growing bottom-up from  bottom right corner up to 400px from top (buttons below notifications)

Comment 18 Michal Skrivanek 2020-03-24 10:51:30 UTC
we're only going to move notifications to bottom right corner at this point

Comment 19 Sandro Bonazzola 2020-03-30 13:47:14 UTC
This bug is in modified state and targeted to 4.4.1. Can we re-target to 4.4.0 and move to QE?

Comment 20 Sharon Gratch 2020-03-31 10:09:31 UTC
(In reply to Sandro Bonazzola from comment #19)
> This bug is in modified state and targeted to 4.4.1. Can we re-target to
> 4.4.0 and move to QE?

Sure, done

Comment 23 Pavel Novotny 2020-04-08 22:34:04 UTC
Verified in 
ovirt-engine-4.4.0-0.31.master.el8ev.noarch
ovirt-engine-webadmin-portal-4.4.0-0.31.master.el8ev.noarch

Verified behavior (as demostrated in attachment 1672613 [details] and attachment 1672612 [details]):
- notifications are now shown in the bottom right corner
- multiple notifications grow bottom-up (the latest one is always on top of the list)
- with a larger number of notifications potentially reaching less than 400px from the top of the page,
  they overflow below the visible area (the page will grow) and horizontal scrollbar appears;
  Dismiss All & DnD button panel stays in place in this situation

Comment 29 errata-xmlrpc 2020-08-04 13:16:55 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory (Important: RHV Manager (ovirt-engine) 4.4 security, bug fix, and enhancement update), and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHSA-2020:3247


Note You need to log in before you can comment on or make changes to this bug.