Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mgr/dashboard: unify button/URL actions naming #26572

Merged
merged 2 commits into from
Apr 3, 2019

Conversation

epuertat
Copy link
Member

@epuertat epuertat commented Feb 21, 2019

The screenshots below show an example of the changes performed. They've been applied to the top 8 components (Pools, RBD images, iSCSI, mirroring, RGW users, RGW buckets, Users and Roles).

Before:
before

After:
after

Detailed changes:

  • Mappings (actually an Enum) created for actions (buttons and other UI elements) and URLs: ActionLabels and URLVerbs.
    • Probably a generic store for translatable strings would be better.
    • An alternative would be to fix/improve the current i18n-polyfill, which only works with literal strings (not even with 'const enums' which become literals after Typescript transpiling).
    • Additionally having a predefined file with some strings to translate (actions, verbs, etc) could improve on the 1st of the 2-stage i18n process (as extraction tool has a lot of limitations).
  • A corresponding ActionLabelsI18n service with translated labels (it's a service as I haven't found the way to either translate no-const strings (ngx-translate/AST parser failure) or get a static translator).
    • This services could/should be extended to cover all strings that are defined in static/globally scoped objects before any I18n provider has been initialized.
  • Breadcrumbs are not translated (neither were they before this change). This part remains untackled: using 'proxy' static objects and performing live translation could deal with the issue.
  • New URLBuilder service created (following a established pattern in the Java/.NET world) . This should avoid the need of messing with literal URLs and string composition/parsing, and while the front-end is not meant to be consumed by anyone, Angular does not provide any other way for the app to navigate between components, so the URLs are a de-facto interface contract. Unlike this approach is not flawless, it's easier to enforce, while issues coming from free-from strings are really hard to catch.
    • This could be further improved by using a router registry/dynamic routing. Most of the routes are trivial.
  • This PR initially included some code to remove leading/trailing whitespace/newlines from i18n elements in XLIFF file, but it turned out it didn't work correctly as long as the extractor tool will still calculate different IDs for equal strings with varying whitespacing.
  • As a side effect of these changes, routing module has been refactored and some routes moved to their specific modules (pool, rbd, rgw), via loadChildren and routes.forChild() magic. Now the above mentioned components are lazy-loaded/pre-loaded (it means right after the main code is loaded). This should also decrease the loading time (though probably this is not biggest time eater here).
    • As now modules can be loaded multiple times, not only from App module by means of lazy loading, but also from other ones (as PoolModule loads BlockModule to get QoS widgets in Pool windows), now lazy loaded modules include 2 NgModules (one with imports: RouterModule.forChild(routes), meant for lazy-loading, and another without routes).
  • Some parts might not be (fully) translated (NFS, iSCSI, mirroring), as there's been ongoing work on them and it's hard to keep up with the new code.
  • These changes will be a waste of time if the new code does not take benefit from/adheres to it, so I'm still figuring out how to spread this (nothing really fancy to demo). Maybe adding some checks/harnessing to enforce the new naming convention (ideas greatly welcome here).

Fixes: http://tracker.ceph.com/issues/37337
Signed-off-by: Ernesto Puerta epuertat@redhat.com

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

@epuertat epuertat self-assigned this Feb 21, 2019
@@ -14,7 +14,7 @@ describe('PoolDetailsComponent', () => {

configureTestBed({
imports: [TabsModule.forRoot(), AppModule],
decalarations: [PoolDetailsComponent],
declarations: [PoolDetailsComponent],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙊

@votdev
Copy link
Member

votdev commented Mar 6, 2019

Could you please rebase this PR, otherwise there is a merge odyssey when you pull this PR into master.

@epuertat
Copy link
Member Author

epuertat commented Mar 6, 2019

Could you please rebase this PR, otherwise there is a merge odyssey when you pull this PR into master.

Sure. Tried late yesterday but the amount of changes was... awful.

@votdev
Copy link
Member

votdev commented Mar 7, 2019

Could you please rebase this PR, otherwise there is a merge odyssey when you pull this PR into master.

Sure. Tried late yesterday but the amount of changes was... awful.

Still have merge conflicts.

$ git fetch upstream
$ git rebase upstream/master
$ git checkout -b testing
$ git pull upstream pull/26572/head
...
Applying: qa/workunits/rbd: add parent migration case
Applying: objclass: fix cls_get_snapset_seq for cache tier case
Applying: common: define BOOST_COROUTINES_NO_DEPRECATION_WARNING if not yet
Applying: mgr: Ignore __pycache__ and wheelhouse dirs
Applying: CLI: ability to change file ownership
Applying: mgr/dashboard: Add support for managing RBD QoS
Using index info to reconstruct a base tree...
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
M	src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
.git/rebase-apply/patch:1245: new blank line at EOF.
+
warning: 1 line adds whitespace errors.
Falling back to patching base and 3-way merge...
Auto-merging src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
error: Failed to merge in the changes.
Patch failed at 0183 mgr/dashboard: Add support for managing RBD QoS
Use 'git am --show-current-patch' to see the failed patch

@epuertat
Copy link
Member Author

epuertat commented Mar 7, 2019

Could you please rebase this PR, otherwise there is a merge odyssey when you pull this PR into master.

Sure. Tried late yesterday but the amount of changes was... awful.

Still have merge conflicts.

$ git fetch upstream
$ git rebase upstream/master
$ git checkout -b testing
$ git pull upstream pull/26572/head
...
Applying: qa/workunits/rbd: add parent migration case
Applying: objclass: fix cls_get_snapset_seq for cache tier case
Applying: common: define BOOST_COROUTINES_NO_DEPRECATION_WARNING if not yet
Applying: mgr: Ignore __pycache__ and wheelhouse dirs
Applying: CLI: ability to change file ownership
Applying: mgr/dashboard: Add support for managing RBD QoS
Using index info to reconstruct a base tree...
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
M	src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
M	src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
.git/rebase-apply/patch:1245: new blank line at EOF.
+
warning: 1 line adds whitespace errors.
Falling back to patching base and 3-way merge...
Auto-merging src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
Auto-merging src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
CONFLICT (content): Merge conflict in src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
error: Failed to merge in the changes.
Patch failed at 0183 mgr/dashboard: Add support for managing RBD QoS
Use 'git am --show-current-patch' to see the failed patch

Yeah, sorry, I just posted the rebased PR. That one you tried was unrelated to that.

@epuertat epuertat force-pushed the wip-37337-master branch 4 times, most recently from 27caf9a to 1576862 Compare March 8, 2019 14:06
@epuertat epuertat marked this pull request as ready for review March 8, 2019 15:15
@epuertat epuertat requested a review from a2batic March 8, 2019 17:09
@Devp00l
Copy link

Devp00l commented Apr 2, 2019

I'm not sure but I guess the modals in the RGW user form doesn't follow the new wording style. It should also be "Remove" on the tooltip that currently says "Delete".

2019-04-02_10-54-11

2019-04-02_10-58-10

Copy link
Contributor

@ricardoasmarques ricardoasmarques left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@epuertat
Copy link
Member Author

epuertat commented Apr 2, 2019

@Devp00l if you wan't to skip the whole review, these are just the changes you requested. Thanks for the review!

@Devp00l
Copy link

Devp00l commented Apr 2, 2019

Sorry @epuertat, you seem to have forgotten "Capabilities".

@epuertat
Copy link
Member Author

epuertat commented Apr 2, 2019

Sorry @epuertat, you seem to have forgotten "Capabilities".

@Devp00l Hehe, that was an intentional omission (but anyway subject to further discussion): my assumption here is that 'Capabilities' fall into the category of items that can be 'added' to another object rather than 'created' from scratch, as they basically consist of existing elements (read/write permissions, and types).

For example, when you 'create' an S3 Key, you're actually defining and storing a new instance of that, but when you 'create' a capability you are rather re-arranging things that already existed.

Copy link

@Devp00l Devp00l left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)

- Mappings (actually an Enum) created for actions (buttons and other UI elements) and URLs: ActionLabels and URLVerbs.
  - An alternative would be to fix/improve the current i18n-polyfill, which only works with literal strings (not even with 'const enums' which become literals after Typescript transpiling).
  - Additionally having a predefined file with some strings to translate (actions, verbs, etc) could improve on the 1st of the 2-stage i18n process (as extraction tool has a lot of limitations).
- A corresponding ActionLabelsI18n service with translated labels (it's a service as I haven't found the way to either translate no-const strings (ngx-translate/AST parser failure) or get a static translator).
  - This services could/should be extended to cover all strings that are defined in static/globally scoped objects before any I18n provider has been initialized.
- Breadcrumbs are not translated (neither were they before this change). This part remains untackled: using 'proxy' static objects and performing live translation could deal with the issue.
- New URLBuilder service created (following a established pattern in the Java/.NET world) . This should avoid the need of messing with literal URLs and string composition/parsing, and while the front-end is not meant to be consumed by anyone, Angular does not provide any other way for the app to navigate between components, so the URLs are a de-facto interface contract. Unlike this approach is not flawless, it's easier to enforce, while issues coming from free-from strings are really hard to catch.
  - This could be further improved by using a router registry/dynamic routing. Most of the routes are trivial.
- As a side effect of these changes, routing module has been refactored and some routes moved to their specific modules (pool, rbd, rgw), via loadChildren and routes.forChild() magic. Now the above mentioned components are lazy-loaded/pre-loaded (it means right after the main code is loaded). This should also decrease the loading time (though probably this is not biggest time eater here).
  - As now modules can be loaded multiple times, not only from App module by means of lazy loading, but also from other ones (as PoolModule loads BlockModule to get QoS widgets in Pool windows), now lazy loaded modules include 2 NgModules (one with imports: RouterModule.forChild(routes), meant for lazy-loading, and another without routes).
- Caveat: Some parts might not be (fully) translated (NFS, iSCSI, mirroring), as there's been ongoing work on them and it's hard to keep up with the new code.
These changes will be a waste of time if the new code does not take benefit from/adheres to it, so I'm still figuring out how to spread this (nothing really fancy to demo). Maybe adding some checks/harnessing to enforce the new naming convention (ideas greatly welcome here).

Fixes: http://tracker.ceph.com/issues/37337
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
Fixes: http://tracker.ceph.com/issues/37337
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
@ricardoasmarques ricardoasmarques merged commit 7f15002 into ceph:master Apr 3, 2019
@epuertat epuertat deleted the wip-37337-master branch April 4, 2019 09:40
epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 5, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
@epuertat
Copy link
Member Author

epuertat commented Apr 8, 2019

⚠️ Fix #27406 is needed to backport with this one.

epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 8, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 8, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 8, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 9, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 9, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 9, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
epuertat added a commit to rhcs-dashboard/ceph that referenced this pull request Apr 10, 2019
After PR ceph#26572, when RGW is not
  configured, accessing /rgw drop-down (daemons, users or buckets)
  results in nothing apparently happening (not even an error).

  Under the curtains, what is happening is that the ModuleStatusGuard
  has redirected the route to the rgw/501, but as this route is now
  under parent rgw route handler, which sets CanActivateChild guards,
  this results in a new ModuleStatusGuard invokation, a subsequent
  failure and a new redirection to rgw/501.

  Several approaches could be taken here:
  - Remove error pages from lazy-loaded modules. Probably it does not
  make sense to have a 501 page per component.
  - Add some whitelist to avoid this kind of loop (e.g.: 501, or any
      error page).
  - Set a max number of redirections (cautionary measure).

Fixes: https://tracker.ceph.com/issues/39125
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
(cherry picked from commit c64b815)
Signed-off-by: Ernesto Puerta <epuertat@redhat.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants