Initial code for the catalog UI components (#1)

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.editorconfig

@@ -0,0 +1,24 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js}]
+charset = utf-8
+
+# Indentation override for all JS under lib directory
+[src/**.js]
+indent_style = space
+indent_size = 2
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+
+  "env": {
+    "es6": true,
+    "node": true
+  },
+
+  "plugins": [
+    "standard",
+    "promise"
+  ],
+
+  "globals": {
+    "document": false,
+    "navigator": false,
+    "window": false
+  },
+
+  "rules": {
+
+  }
+}

.gitignore

@@ -0,0 +1,14 @@
+node_modules
+.idea
+bower_components
+coverage
+npm-debug.log
+dist/catalogs-app*
+dist/*.wof*
+dist/*.eot
+dist/*.ttf
+dist/*.svg
+dist/*.gif
+dist/*.jpg
+dist/*.png
+

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js:
+  - "4"
+cache:
+  directories:
+  - node_modules
+  - bower_components
+before_script:
+  - make build
+script:
+  - hack/test-headless.sh test
+  - hack/verify-dist.sh
+

Makefile

@@ -0,0 +1,36 @@
+.DEFAULT_GOAL := build
+
+# Pull in dependencies
+#
+# Examples:
+#   make install
+install:
+	hack/install-deps.sh
+.PHONY: install
+
+# Clean up all dependencies
+#
+#
+# Example:
+#   make clean
+#   make test
+clean:
+	hack/clean-deps.sh
+.PHONY: clean
+
+# Run `npm run build`
+#
+# Examples:
+#   make build
+build: install
+	npm run build
+.PHONY: build
+
+# Run all tests
+#
+# Examples:
+#   make test
+test: build
+	hack/verify-dist.sh
+	hack/test-headless.sh test
+.PHONY: test

README.md

@@ -1 +1,37 @@
-# origin-web-catalog
+OpenShift Catalog Conaole Library
+=========================
+A component libary created for the cataloging components for [The OpenShift Web Console](https://github.com/openshift/origin-web-console).
+
+[![Build Status](https://travis-ci.org/openshift/origin-web-catalog.svg?branch=master)](https://travis-ci.org/openshift/origin-web-catalog)
+
+## Quick start
+
+```
+# install the dependencies with npm and bower
+$ npm install
+$ bower install
+
+# start the server
+$ npm run server
+```
+
+Go to [http://localhost:8080](http://localhost:8080) in your browser.
+
+>Warning: Make sure you're using the latest version of Node.js and NPM
+
+Contributing
+------------
+
+#### Getting started
+1. Install [Nodejs](http://nodejs.org/) and [npm](https://www.npmjs.org/)
+2. Install [grunt-cli](http://gruntjs.com/installing-grunt) and [bower](http://bower.io/) by running `npm install -g grunt-cli bower` (may need to be run with sudo)
+3. Build the library with 'npm run build'
+4. Run the test server with 'npm run server'
+5. Launch a browser at http://localhost:8080/ this will watch for asset changes.
+
+## Testing (NYI)
+
+### 1. Unit Tests
+
+* single run: `npm test`
+* live mode (TDD style): `npm run test-watch`

app/app.less

@@ -0,0 +1,21 @@
+@import (css) "~font-awesome/css/font-awesome.css";
+@import (css) "~bootstrap/dist/css/bootstrap.css";
+@import (css) "~patternfly/dist/css/patternfly.css";
+@import (css) "~patternfly/dist/css/patternfly-additions.css";
+@import (css) "~angular-patternfly/dist/styles/angular-patternfly.css";
+
+@import '~patternfly/dist/less/color-variables.less';
+@import '~patternfly/dist/less/variables.less';
+
+@font-path: "./fonts";
+
+@import "./styles/_openshift-logos-icon.less";
+@import "./styles/homePage.less";
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  position: relative;
+  margin: 0 20px;
+}

app/app.ts

@@ -0,0 +1,58 @@
+/// <reference path="../node_modules/@types/angular-ui-router/index.d.ts" />
+
+import * as angular from 'angular';
+
+require('patternfly/dist/js/patternfly');
+require('angular-patternfly/dist/angular-patternfly');
+require('angular-ui-bootstrap/ui-bootstrap');
+require('angular-ui-bootstrap/ui-bootstrap-tpls');
+require('angular-sanitize/angular-sanitize');
+require('angular-drag-and-drop-lists/angular-drag-and-drop-lists.min.js');
+require('angular-animate/angular-animate.min.js');
+
+require('jquery/dist/jquery.min.js');
+require('lodash/index.js');
+
+require('imports-loader?define=>false!js-logger/src/logger');
+let hawtioPluginLoader = require('hawtio-core/dist/hawtio-core');
+require('uri.js/src/URI');
+require('angular-utf8-base64');
+require('./config.local.js');
+
+import {oauth} from './components/oauth/oauth.component';
+import {homePage} from './pages/home/homePage';
+import {servicesPage} from './pages/services/servicesPage';
+import {projectsPage} from './pages/projects/projectsPage';
+import {MockDataService} from './services/mockData.service';
+import {navigation} from './components/navigation/navigation.component';
+import {MockServicesModule} from './mockServices/mockServices.module';
+
+import 'angular-ui-router';
+import routesConfig from './routes';
+
+import './app.less';
+import '../src/index';
+
+export const catalogApp: string = 'catalogApp';
+
+let commonServices = '';
+let mockServicesModule = new MockServicesModule(window);
+
+if (mockServicesModule.useMockServices() !== true) {
+  require('origin-web-common/dist/origin-web-common.js');
+  commonServices = 'openshiftCommon';
+} else {
+  commonServices = mockServicesModule.moduleName;
+}
+
+angular
+  .module(catalogApp, ['webCatalog', commonServices, 'ui.router', 'patternfly'])
+  .config(routesConfig)
+  .service('MockDataService', MockDataService)
+  .component('oauth', oauth)
+  .component('homepage', homePage)
+  .component('servicespage', servicesPage)
+  .component('projectspage', projectsPage)
+  .component('navigation', navigation);
+
+hawtioPluginLoader.addModule(catalogApp);

app/components/navigation/navigation.component.ts

@@ -0,0 +1,6 @@
+import {NavigationController} from './navigation.controller';
+
+export const navigation: angular.IComponentOptions = {
+  controller: NavigationController,
+  template: require('./navigation.html')
+};

app/components/navigation/navigation.controller.ts

@@ -0,0 +1,62 @@
+import * as angular from 'angular';
+
+export class NavigationController implements angular.IController {
+  static $inject = ['$transitions', '$rootScope'];
+
+  public ctrl: any = this;
+  public navigationItems: any;
+  public applicationName: string;
+  private $transitions: any;
+  private $rootScope: any;
+
+
+  constructor($transitions: any, $rootScope: any) {
+    this.$transitions = $transitions;
+    this.$rootScope = $rootScope;
+  };
+
+  public $onInit() {
+    this.ctrl.applicationName = 'OPENSHIFT WEB CATALOGS';
+    this.ctrl.navigationItems = [
+      {
+        title: 'Home',
+        iconClass: 'pficon pficon-home',
+        uiSref: 'home'
+      },
+      {
+        title: 'Services',
+        iconClass: 'pficon pficon-service',
+        uiSref: 'services'
+      },
+      {
+        title: 'Projects',
+        iconClass: 'pficon pficon-project',
+        uiSref: 'projects'
+      }
+    ];
+
+    var _ctrl: any = this.ctrl;
+    this.$transitions.onSuccess({to: true}, function(state: any) {
+      var toState: any = state.$to();
+      var stateName: string = toState.name;
+
+      angular.forEach(_ctrl.navigationItems, function(navItem: any) {
+        navItem.isActive = stateName.indexOf(navItem.uiSref) === 0;
+      });
+    });
+
+    this.ctrl.user = this.$rootScope.user;
+
+    this.$rootScope.$watch('user', function(newValue: any) {
+      _ctrl.user = newValue;
+    });
+  };
+
+  public $onChanges(onChangesObj: angular.IOnChangesObject) {
+    // console.log('$onChanges' + JSON.stringify(onChangesObj));
+  }
+
+  public $doCheck() {
+    // console.log('$doCheck');
+  }
+}

app/components/navigation/navigation.html

@@ -0,0 +1,30 @@
+<div pf-vertical-navigation items="$ctrl.navigationItems" brand-alt="{{$ctrl.applicationName}}">
+    <div>
+        <ul class="nav navbar-nav navbar-right navbar-iconic">
+            <li uib-dropdown>
+                <a uib-dropdown-toggle class="nav-item-iconic" id="help-dropdown" href="">
+                    <span title="Help" class="fa pficon-help" aria-hidden="true"></span>
+                    <span class="sr-only">Help</span>
+                    <span class="caret" aria-hidden="true"></span>
+                </a>
+                <ul class="uib-dropdown-menu" aria-labelledby="help-dropdown"
+                    extension-point
+                    extension-name="nav-help-dropdown"
+                    extension-types="dom html"><!-- extension points generated here -->
+                </ul>
+            </li>
+            <li uib-dropdown ng-cloak ng-if="$ctrl.user">
+                <a href="" uib-dropdown-toggle id="user-dropdown" class="nav-item-iconic">
+                    <span class="pf-icon pficon-user" aria-hidden="true"></span>
+                    <span class="username truncate">{{$ctrl.user.fullName || $ctrl.user.metadata.name}}</span> <span class="caret" aria-hidden="true"></span>
+                </a>
+                <ul class="uib-dropdown-menu"
+                    aria-labelledby="user-dropdown"
+                    extension-point
+                    extension-name="nav-user-dropdown"
+                    extension-types="dom html"><!-- extension points generated here -->
+                </ul>
+            </li>
+        </ul>
+    </div>
+</div>

app/components/oauth/oauth.component.ts

@@ -0,0 +1,6 @@
+import {OAuthController} from './oauth.controller';
+
+export const oauth: angular.IComponentOptions = {
+  controller: OAuthController,
+  template: require('./oauth.html')
+};