Fabric8-runtime-console NPM

THIS REPO HAS NOW MERGED INTO fabric8-ui

PLEASE GO HERE: https://github.com/fabric8-ui/fabric8-ui/

Fabric8 Runtime Console

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

environments

We provide various sample environments out of the box which make it easier to get started. The environments are provided as bash scripts in environments. To use them run:

source environments/<environment-name>.sh

For example, to connect to devshift:

source environments/devshift-cluster.sh

git clone

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 fabric8-runtime-console

build

# install the dependencies
npm install

# start the server
npm start

Proxying

We also have built in support for proxying your requests to the OpenShift cluster - this is particularly useful if your OpenShift cluster doesn't support CORS. By default the console will access the proxy on the same protocl, host and port as the app is running. You can adjust this using environment variables, and the sample environments provide good examples of doing this.

Open the console in your browser

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

NOTE often openshift clusters don't have valid certs so when you go to the web console in the cluster your browser shows you a warning about the cert not being valid and asks you if you are sure.

If you don't get a login page your browser may be hiding the login page for this reason.

If so try open the console for the cluster you are trying to access. e.g. https://int.rdu2c.fabric8.io:8443/console/ then going through the browser windows to get to the login page so that you accept the cert.

Then try reload your tab on http://0.0.0.0:4200 and you hopefully will get the login page!

If you don't have a kubernetes or openshift cluster

To setup your own local kubernetes or openshift cluster the fabric8 getting started guide

Or you can setup kubectl or oc to point to a known cluster.

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/).