Hawkular Middleware Components for ManageIQ

This Repository has been Transferred

Please see ManageIQ UI Components instead

Proposed Angular 1.5.x Components for ManageIQ

Please refer to Hawkular UI Development Docs for further UI development details.

Architectural Goals

• Separate git repository from ManageIQ

• Components communicate via REST with ManageIQ API

• Maintain routing inside ManageIQ(routes.rb)

Architecture Proposal

Angular 1.5 Components

We are recommending Angular 1.5 Components instead of Angular Directives for better compatibility with Angular 2.0.

The Angular 2 Component Router has been backported to Angular 1.5.x so even component routing can be done now with Angular 1.x. [TODO: Angular 1.x Component Router should be considered instead of UI Router (since it will not be needed with Angular 2.x) ]

For a great overview of using Angular 1.5.x Components please see: NG-Conf 2016:Components, Components, Components!…​and Angular 1.5 - Pete Bacon Darwin

TODO

• i18n (should this be done in Angular or Rails?)

• Angular Events (currently angular events can only notify via the section of the DOM that the app is occupying. Right now a functional tab (i.e., Middleware is ~= app; this could change]

Development Environment

You need to have installed Node.js >= 5 and npm >= 3 on your system.

Install these node packages globally in the system

npm install -g typings bower webpack wiredep-cli typescript typescript-formatter

Install local node dependencies

npm install

To run:

npm start

Before sumbitting code: tsmft -r This formats the code according to the tslint rules.

Next up Angular 2.x components running alongside Angular 1.x via ngUpgrade. Ideally, a switch directly to Angular 2 would be most desirable. However, since there are some Angular 1 dependencies (such as Angular Patternfly) that make it difficult to migrate directly to Angular 2, at first. So a good intermediate compromise is to use http://blog.rangle .io/upgrade-your-application-to-angular-2-with-ng-upgrade[Angular ngUpgrade] which allows Angular2 to run alongside Angular 1. Angular 2 components can use Angular 1 stuff and vice versa. This makes it easy to create real Angular 2 Components that can be downgraded to Angular 1 directives (and used in Angular 1). So the team gets experience writing Angular 2 working in the Angular 1 runtime.