An open API service indexing awesome lists of open source software.

https://github.com/hawkular/hawkular-ui-components

UI components for the Hawkular console
https://github.com/hawkular/hawkular-ui-components

Last synced: about 1 year ago
JSON representation

UI components for the Hawkular console

Awesome Lists containing this project

README

          

= [line-through]#Hawkular Middleware Components for ManageIQ#

image:https://badges.gitter.im/hawkular/hawkular-ui-components.svg[link="https://gitter.im/hawkular/hawkular-ui-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"]

image::https://www.bithound.io/github/hawkular/hawkular-ui-components/badges/score.svg[link="https://www.bithound.io/github/hawkular/hawkular-ui-components"]
image::https://www.bithound.io/github/hawkular/hawkular-ui-components/badges/dependencies.svg[link="https://www.bithound.io/github/hawkular/hawkular-ui-components/master/dependencies/npm"]

ifdef::env-github[]
[link=https://travis-ci.org/hawkular/hawkular-ui-components]
image:https://travis-ci.org/hawkular/hawkular-ui-components.svg["Build Status",
link="https://travis-ci.org/hawkular/hawkular-ui-components"]
endif::[]

== This Repository has been *Transferred*
== Please see https://github.com/manageiq/ui-components[ManageIQ UI Components] instead

== Proposed Angular 1.5.x Components for ManageIQ

Please refer to http://www.hawkular.org/docs/dev/ui-dev.html[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

image::MiQ-UI-Architecture.jpg[ManageIQ UI Components Architecture Proposal]

== Angular 1.5 Components

We are recommending https://docs.angularjs.org/guide/component[Angular 1.5 Components] instead of Angular Directives
for better compatibility with Angular 2.0.

The https://docs.angularjs.org/guide/component-router[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:
https://www.youtube.com/watch?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&v=AMwjDibFxno&ab_channel=ng-conf[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 https://docs.npmjs.com/getting-started/installing-node[Node.js >= 5 and npm >= 3] on
your system.

Install these node packages globally in the system
[source]
npm install -g typings bower webpack wiredep-cli typescript typescript-formatter

Install local node dependencies
[source]
npm install

To run:
[source]
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
https://github.com/patternfly/angular-patternfly[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. __