mgr/dashboard: new generic HTTP error page component

[aaSharma14]

NFS/501-

PAGE NOT FOUND-

Added a generic Error component for Errors such as Not Found, Forbidden etc

Fixes:https://tracker.ceph.com/issues/39128
Signed-off-by: Aashish Sharma aasharma@redhat.com

Checklist

• References tracker ticket
• Updates documentation if necessary
• Includes tests for new functionality or reproducer for bug

---

Show available Jenkins commands

• jenkins retest this please
• jenkins test classic perf
• jenkins test crimson perf
• jenkins test signed
• jenkins test make check
• jenkins test make check arm64
• jenkins test submodules
• jenkins test dashboard
• jenkins test api
• jenkins test docs
• jenkins render docs
• jenkins test ceph-volume all
• jenkins test ceph-volume tox

[epuertat]

Nice work, @aaSharma14 ! However, I don't fully agree with some implementation details, as it brings some issues on abstraction and encapsulation (e.g.: for reporting new error messages you have to modify the error component, because input arguments are inferred from the URL/error code, instead of simply passing them).

Other comment, just for the case you're willing to improve a bit further the error management in our front-end, is the clean-up the current error component invocation:

• Now a component basically detects an error condition and explicitly launches a router.navigate([403]) redirect, and then Angular redirects the browser to the 403 Forbidden...
• However, the error page is just an abstraction. Components shouldn't take care about whether an error results in a page redirect, a console trace or an speaker beeping. So my suggestion would be to replace those navigate and navigateByUrl([403]) with something like throw new ForbiddenError() (this requires a new custom Javascript Error subclass). By using the Angular ErrorHandler() we can simply catch Error (or exceptions) and redirect them to this generic ErrorComponent, without the need of an explicit redirect.

[aaSharma14]

jenkins test dashboard

[Devp00l]

Looks like a nice improvement, but I think there is something wrong with the translations.

[aaSharma14]

jenkins test dashboard

[epuertat]

Huge improvement so far, @aaSharma14 !

Things that I'd improve further:

• Single minimal URL for all errors: /error without no explicit error code or error message in the URL.
• Redirection is a behaviour, a side-effect of the error handling (we could, for example, switch to a pop-up or modal showing the error message). As you have fully decoupled that from components, you no longer need to test for redirection in the unit tests of every component, just in the ErrorComponent ones.
• HTTP error codes in the front-end is just a habit inherited from the times of static websites. Now we have pure front-end code with its own errors and nuances, so let's get rid of HTTP error codes when no back-end HTTP error code is forwarded.
• Let's use instead our set of DashboardError classes: DashboardNotFoundError, DashboardNotAllowedError. If we still insist on mapping them internally to HTTP error codes, we can store the 40x/50x ones. These classes could (perhaps) also work as data param for Routes?

[epuertat]

Almost forgot it: for other devels to become aware of this, it'd be great if you could add a brief Error Handling section to https://github.com/ceph/ceph/blob/master/src/pybind/mgr/dashboard/HACKING.rst#frontend-development

[aaSharma14]

jenkins test dashboard

[epuertat]

@aaSharma14 found the Patternfly one: it's called empty state! It seems that they're moving away from big blank error pages to inline notification/pop-ups/modals/etc.

Design:

Different examples:

[aaSharma14]

jenkins test make check

[avanthakkar]

jenkins test dashboard

[avanthakkar]

jenkins test make check

[epuertat]

@alfonsomthd could you please re-review this PR? Thanks!

[aaSharma14]

jenkins test dashboard

[aaSharma14]

jenkins test api

[alfonsomthd]

Good work!

[epuertat]

Great job, @aaSharma14 ! This has been a tough one 😅 !

[aaSharma14]

Great job, @aaSharma14 ! This has been a tough one sweat_smile !

Thanks @epuertat :)