Replace ruby generated toolbar with angular's #9753

karelhala · 2016-07-12T15:01:51Z

As we were talking @martinpovolny here is approach of angular's toolbar.

No need to change anything in current ui or ruby backend. Every toolbar generation in app/views/lauouts/_content.html.haml contains generating of toolbar via javascript.
Settings is generated in render phase to JSON (this way we don't have to add any context variables when fetching toolbar object). However we should switch to AJAX later down the line so we can have dynamic toolbars (will be needed once we will move to ui-router since rendering of htmls will no longer be part of ruby).

Removed jquery click function, because it did not bound to toolbar properly every time (.click function does not check if any new elements are added), but rather used on-click in angular world and call miqToolbarOnClick(event) of miq_application.js from angular.

We had to use custom generated toolbars from hawkular-ui-components because we have need for custom html passed along side with selectboxes and buttons. So any changes to look and feel should be done in ui-components (leader of this package is @mtho11 so contact him if new version is needed).

add tests
make a way of how to bind js function to buttons

karelhala · 2016-07-12T15:02:50Z

@miq-bot add_label wip ui

miq-bot · 2016-07-12T15:03:19Z

@karelhala Cannot apply the following label because they are not recognized: wip ui

karelhala · 2016-07-12T15:03:53Z

@miq-bot add_label wip, ui

miq-bot · 2016-07-14T11:13:09Z

@karelhala Cannot apply the following label because they are not recognized: wip ui

martinpovolny · 2016-07-14T14:11:57Z

The general goal here is to use observables and observers to communicate between toolbars, GTL lists and other components.

One example of that communication is the enabling/disabling of buttons based on selection in the GTL lists.

Another example is the changing of the layout of the GTL component in reaction on clicking the view toolbar buttons.

Sure, there are more to come.

The toolbars will be downloaded in JSON by the client or send as part of JSON messages throught the ExplorerPresenter and similar and processed by ManageIQ.explorer or simillar.

miq-bot · 2016-07-15T20:26:51Z

<pr_mergeability_checker />This pull request is not mergeable. Please rebase and repush.

martinpovolny · 2016-07-19T07:59:23Z

app/controllers/providers_settings.rb

collect returns a list, no need to do push

martinpovolny · 2016-07-19T15:36:16Z

app/controllers/providers_settings.rb

miq-bot · 2016-07-20T16:06:50Z

<pr_mergeability_checker />This pull request is not mergeable. Please rebase and repush.

karelhala · 2016-07-25T16:54:14Z

@martinpovolny I dug deeply and found that it's not possible to have multiple ng-app elements on page, but we don't have to rely only on default angular's bootstrap mechanism as described in docs ngApp we can use angular.bootstrap. However there is warning that angular team does not test this and we should pay attention when using manual bootstrapping Things to keep in mind. But I tried it and clicked trough couple of pages in MiQ and it worked good (even with ng-app element on page).

So I think it's good to go, we can test it and see if anything gets broken. I believe I have changed all toolbars to use = render :partial => "layouts/angular/toolbar" so we can give it a try and see if anything got broken. If not we can merge it.

himdel · 2016-07-26T09:00:50Z

@karelhala Kinda expected that ng-app thing, I'm thinking maybe we should replace all those ng-app with angular.bootstrap and reserve ng-app only for that eventual whole-page app (adding to my list :)).

abonas · 2016-07-26T12:35:37Z

is it safe to take the direction which is declared as untested by Angular dev team?

himdel · 2016-07-26T13:34:02Z

@abonas Not much choice, the alternative would involve even less tested approaches, until we can get rid of RJS. (Would probably need to pass every replace_partial through $compile, ..)

karelhala · 2016-07-27T10:59:18Z

Okay clicked trough couple of pages (topology, dashboard, normal gtl pages, detail pages, etc.) and it seems good to go. However it would be nice if someone else tried it (I don't know MiQ that well and that deep as you guys).

So removing WIP and you can review the code.

karelhala · 2016-07-27T10:59:39Z

@miq-bot remove_label wip

when explorer got refreshed toolbar didn't reacted properly to this. We have to send JSON object instead of HTML string and update toolbar based on this object. When in compare mode, we want to see two state buttons, similiar behaving as buttons.

dashboard toolbar is secified in custom html file, so we have to use render partial and this html string insert to JSON response so we can use angular's toolbars

…toolbars

when switching views in explorer ajax call instead of pure redirect needs to be called. Images in toolbar lists are fetched from ruby and inserted to JSON object Remove nested toolbar-pf-actions from dashboard Add missing property to test case for toolbar builder

use different image_path to determine image_url

karelhala · 2016-08-22T18:35:37Z

Updated bower.json to use newest version of ui-components. If no-one has any other complaints it's good to go from my side.

miq-bot · 2016-08-22T18:36:43Z

Checked commits karelhala/manageiq@e416daa~...e448d6e with ruby 2.2.5, rubocop 0.37.2, and haml-lint 0.16.1
9 files checked, 0 offenses detected
Everything looks good. ⭐

epwinchell · 2016-08-22T19:11:02Z

@dclarizio Tested. Looks good.

we keep the toolbar wrapping margin fix, and remove the resulting double margin by forcing toolbar-pf-actions' bottom margin to 0 .. and remove duplicate css introduced in ManageIQ#9753

miq-bot added wip ui labels Jul 12, 2016

martinpovolny added the enhancement label Jul 14, 2016

martinpovolny assigned martinpovolny and himdel Jul 14, 2016

dclarizio mentioned this pull request Jul 14, 2016

UI: Upgrade DynaTree to Bootstrap Trees #1030

Closed

martinpovolny reviewed Jul 19, 2016
View reviewed changes

app/controllers/providers_settings.rb Outdated

Copy link

Member

martinpovolny Jul 19, 2016

Choose a reason for hiding this comment

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

collect returns a list, no need to do push

karelhala force-pushed the toolbarAngular branch from a25ca75 to caff549 Compare July 19, 2016 14:04

martinpovolny reviewed Jul 19, 2016
View reviewed changes

app/controllers/providers_settings.rb Outdated

Copy link

Member

martinpovolny Jul 19, 2016

Choose a reason for hiding this comment

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

gtl

karelhala force-pushed the toolbarAngular branch 3 times, most recently from c681a5b to 38fb6c2 Compare July 25, 2016 16:32

karelhala force-pushed the toolbarAngular branch 2 times, most recently from 63d9703 to 947817c Compare July 27, 2016 10:58

karelhala changed the title ~~[WIP] Replace ruby generated toolbar with angular's~~ Replace ruby generated toolbar with angular's Jul 27, 2016

miq-bot removed the wip label Jul 27, 2016

karelhala added 13 commits August 22, 2016 20:32

Fix problem with string in middleware toolbar

8afada6

Remove %div in angular toolbar, since div is implicit

4b05549

Escape html toolbar properly with html_escape and j_str

b2f7f90

Switch from hawkular-ui-components to ui-components

d2224b4

Rename ui-components to manageiq-ui-components

2cf7e2c

Use tr insted of gsub in escaping quotes in custom html toolbar

9f838cf

Update toolbar to work with explorer

8c7710f

when explorer got refreshed toolbar didn't reacted properly to this. We have to send JSON object instead of HTML string and update toolbar based on this object. When in compare mode, we want to see two state buttons, similiar behaving as buttons.

Enable rendering toolbar from dashboard

6808225

dashboard toolbar is secified in custom html file, so we have to use render partial and this html string insert to JSON response so we can use angular's toolbars

Fi problems with unused variable in explorer presenter when building …

86d6fd1

…toolbars

Stop removing new lines in custom html files

5d42823

use different image_path to determine image_url

Add Eric's changes to css files

0d3c8a0

Update version of ui-components

e448d6e

karelhala force-pushed the toolbarAngular branch from 851b259 to e448d6e Compare August 22, 2016 18:32

dclarizio merged commit 17f79d0 into ManageIQ:master Aug 22, 2016

dclarizio added this to the Sprint 45 Ending Aug 22, 2016 milestone Aug 22, 2016

mzazrivec mentioned this pull request Aug 25, 2016

Restore internationalization functionality in toolbars #10787

Merged

himdel mentioned this pull request Aug 29, 2016

Remove unused toolbar methods #10838

Merged

himdel mentioned this pull request Oct 7, 2016

[WIP] Remove dead miqSetButtons & miqButtonOnWhen #11760

Closed

Replace ruby generated toolbar with angular's #9753

Replace ruby generated toolbar with angular's #9753

Uh oh!

Conversation

karelhala commented Jul 12, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

karelhala commented Jul 12, 2016

Uh oh!

miq-bot commented Jul 12, 2016

Uh oh!

karelhala commented Jul 12, 2016

Uh oh!

miq-bot commented Jul 14, 2016

Uh oh!

martinpovolny commented Jul 14, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

miq-bot commented Jul 15, 2016

Uh oh!

martinpovolny Jul 19, 2016

Choose a reason for hiding this comment

Uh oh!

martinpovolny Jul 19, 2016

Choose a reason for hiding this comment

Uh oh!

miq-bot commented Jul 20, 2016

Uh oh!

karelhala commented Jul 25, 2016

Uh oh!

himdel commented Jul 26, 2016

Uh oh!

abonas commented Jul 26, 2016

Uh oh!

himdel commented Jul 26, 2016

Uh oh!

karelhala commented Jul 27, 2016

Uh oh!

karelhala commented Jul 27, 2016

Uh oh!

karelhala commented Aug 22, 2016

Uh oh!

miq-bot commented Aug 22, 2016

Uh oh!

epwinchell commented Aug 22, 2016

Uh oh!

Uh oh!

karelhala commented Jul 12, 2016 •

edited

Loading

martinpovolny commented Jul 14, 2016 •

edited

Loading