Fabric8 Runtime Client

This is the new angular 2 based console for building and running applications on kubernetes and openshift

Included in this stack are the following technologies:

• Language: TypeScript (JavaScript with @Types)
• Framework: Angular 2
• Module Bundler: Angular CLI
• Design Patterns: PatternFly
• Data Visualization: C3
• Testing: Jasmine (BDD Unit Test Framework), Karma (Unit Test Runner), Protractor (E2E Framework), Istanbul (Code Coverage)
• Linting: TsLint (Linting for TypeScript)
• Logging: js-Logger (JavaScript Logger)
• Code Analysis: Codelyzer (TsLint rules for static code analysis of Angular 2 TypeScript projects)

Quick Start

Make sure you have node version >= 6.x.x and Yarn version >= 0.18.1

Clone/download the repo start editing app.component.ts inside /src/app/

# clone our repo
git clone https://github.com/fabric8-ui/fabric8-runtime-console.git
cd abric8-runtime-console

# install the dependencies
yarn

# start the server
npm start

Go to http://0.0.0.0:4200 or http://localhost:4200 in your browser.

Using the Kubernetes back end

To be able to use the kubernetes / openshift back end for builds and runtime resources you will need to run

kubectl proxy

Table of Contents

• File Structure
• Getting Started
  • Dependencies
  • Installing
  • Running
  • Testing
  • Configuring
• Contributing
• Resources

File Structure

We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app, usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class.

ipaas-client/
 │
 ├──docs/                         * our documentation
 |   ├──commands.md               * additional cli commands available to us
 |   ├──contributing.md           * contribution guidelines
 |   ├──entities.md               * entities/models and their relationships for reference
 │   ├──faq.md                    * frequently asked questions about using ipaas
 │   ├──overview.md               * a technical overview for understanding the project
 │   └──typescript.md             * some typescript tips and resources
 │
 ├──src/                          * our source files that will be compiled to javascript
 │   │
 │   ├──app/                      * our Angular 2 application
 │   │   │
 │   │   ├──user/                 * an example 'user' component, based on an entity/model. can be nested further.
 │   │   │   ├──user.component.ts * the primary Angular component file; essentially a controller + directive combined
 │   │   │   ├──user.e2e.ts       * our e2e test for the user component
 │   │   │   ├──user.html         * our HTML user template for the user component
 │   │   │   └──user.spec.ts      * our unit test for the user component
 │   │   │
 │   │   ├──app.component.ts      * a simple version of our App component components
 │   │   ├──app.e2e.ts            * a simple end-to-end test for /
 │   │   └──app.spec.ts           * a simple test of components in app.ts
 │   │
 │   ├──assets/                   * static assets are served here
 │   │   ├──robots.txt            * for search engines to crawl your website
 │   │   └──service-worker.js     * ignore this. Web App service worker that's not complete yet
 │   │
 │   ├──polyfills.ts      * our polyfills file
 │   └--index.html                * our primary layout that contains subviews
 │
 ├──.gitignore                    * let git know which files to ignore and not stage for commit
 ├──karma.conf.js                 * karma, our test runner, config file
 ├──LICENSE                       * iPaaS is available for use under the Apache 2.0 license
 ├──npm-shrinkwrap.json           * npm's way of allowing us to control exact versions of dependencies
 ├──package.json                  * what npm uses to manage it's dependencies
 ├──protractor.conf.js            * protractor, our e2e testing framework, config file
 ├──README.md                     * this exact file :)
 ├──tsconfig.json                 * typescript compiler config
 ├──tslint.json                   * typescript lint config

Getting Started

Dependencies

What you need to run this app:

• node (brew install node for OS X users)
• yarn (see https://yarnpkg.com/en/docs/install)
• Ensure you're running the latest versions Node v6.x.x+ and Yarn

Installing

• fork the ipaas repo
• clone your fork
• yarn to install all dependencies
• npm start to start the dev server

Running

After you have installed all dependencies you can now run the app. Run ng serve to start a local server which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://0.0.0.0:4200 (or if you prefer IPv6, then it's http://[::1]:4200/).

Development

in one shell to expose your kubernetes cluster:

kubectl proxy

npm start

Production

ng serve --prod -aot

For a list of common commands, see here.

Testing

Watch and Run Tests

ng test

Run Tests

ng test --watch=false

For a list of common commands, see here.

Configuring

Configuration files live in /config. Configuration files are currently available for Webpack, Karma, and Protractor.

Contributing

Pull requests are always welcome. Please read through our Contribution guidelines in the /docs directory.