Merge pull request #29 from jpkrohling/JPK-AccountsUI

Hawkular Accounts plugin
hawkular · Mar 10, 2015 · fdb8f08 · fdb8f08
2 parents 15b810c + eac3f7f
commit fdb8f08
Show file tree

Hide file tree

Showing 16 changed files with 660 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ pids
 .bower/
 libs/
 node_modules/
+bower_components/
 
 ._*
 .DS_Store

diff --git a/.travis.force.build b/.travis.force.build
@@ -0,0 +1 @@
+Change this file to force Travis to perform a rebuild and redeploy to repo
diff --git a/bower.json b/bower.json
@@ -8,6 +8,7 @@
     "hawkular-ui"
   ],
   "main": [
+    "dist/hawkular-ui-components-accounts.js",
     "dist/hawkular-ui-components-metrics.js",
     "dist/hawkular-ui-components-metrics.css",
     "dist/hawkular-ui-components-alerts.js",
@@ -33,7 +34,9 @@
     "hawtio-utilities": "2.0.16",
     "lodash": "2.4.1",
     "moment": "2.9.0",
-    "toastr": "2.1.0"
+    "toastr": "2.1.0",
+    "keycloak": "~1.1.0",
+    "angular-resource": "~1.3.12"
   },
   "devDependencies": {
     "bootstrap": "3.3.2",

diff --git a/build/gulpfile.js b/build/gulpfile.js
@@ -180,7 +180,14 @@ module.exports = function(gulp, config, pluginName){
       .pipe(gulp.dest('.tmp/gulp-connect-server/'));
   });
 
-  gulp.task('connect-' + pluginName, ['connect-prepare-libs-' + pluginName, 'connect-prepare-dist-' + pluginName, 'bower-' + pluginName, 'watch-' + pluginName], function() {
+  gulp.task('assets-' + pluginName, function () {
+    var assets = path.resolve(__dirname, '../plugins/' + pluginName + '/*.json');
+
+    gulp.src(assets)
+      .pipe(gulp.dest('.tmp/gulp-connect-server/'));
+  });
+
+  gulp.task('connect-' + pluginName, ['connect-prepare-libs-' + pluginName, 'connect-prepare-dist-' + pluginName, 'bower-' + pluginName, 'assets-' + pluginName, 'watch-' + pluginName], function() {
     var staticPath = path.resolve(__dirname, '../.tmp/gulp-connect-server/');
 
     plugins.connect.server({

diff --git a/dist/hawkular-ui-components-accounts.js b/dist/hawkular-ui-components-accounts.js
diff --git a/plugins/accounts/index.html b/plugins/accounts/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>hawkular-accounts</title>
+    <base href='/'>
+    <meta charset="UTF8">
+
+    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.css" />
+    <link rel="stylesheet" href="libs/patternfly/dist/css/patternfly.css" />
+
+    <!-- bower:css -->
+    <!-- endbower -->
+
+    <!-- ES6/ES6 shim -->
+    <!--[if IE 8]>
+    <script src="libs/es5-dom-shim/__COMIPLE/a.ie8.js"></script>
+    <![endif]-->
+    <script src="libs/es5-dom-shim/__COMPILE/a.js"></script>
+
+    <!-- bower:js -->
+    <!-- endbower -->
+
+    <script src="libs/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="libs/patternfly/dist/js/patternfly.js"></script>
+
+</head>
+
+<body>
+<nav class="navbar navbar-default navbar-pf" role="navigation">
+    <ul class="nav navbar-nav navbar-primary" hawtio-main-nav></ul>
+    <ul class="nav navbar-nav" hawtio-sub-tabs></ul>
+</nav>
+
+<div id="main" class="container-fluid ng-cloak" ng-controller="HawtioNav.ViewController">
+    <div ng-include src="viewPartial"></div>
+</div>
+
+<!-- add any scripts under dist/ here -->
+<script src="dist/hawkular-ui-components-accounts.js"></script>
+
+<script type="text/javascript">
+  window.keycloakReady = false;
+  window.keycloak = Keycloak("/keycloak.json");
+
+  window.keycloak.onAuthLogout = function() {
+    location.reload();
+  };
+
+  window.keycloak.onReady = function(authenticated) {
+    window.keycloakReady = true;
+  };
+
+  window.keycloak.init({ onLoad: 'login-required' }).error(function () {
+    alert("Couldn't log you in. Sorry.");
+    window.location.reload();
+  });
+</script>
+
+</body>
+</html>
diff --git a/plugins/accounts/keycloak.json b/plugins/accounts/keycloak.json
@@ -0,0 +1,7 @@
+{
+  "realm": "hawkular",
+  "auth-server-url": "http://localhost:8080/auth",
+  "ssl-required": "none",
+  "resource": "hawkular-ui",
+  "public-client": true
+}
diff --git a/plugins/accounts/plugins/accounts/html/accounts.html b/plugins/accounts/plugins/accounts/html/accounts.html
@@ -0,0 +1,6 @@
+<div class="row">
+    <div class="col-md-12">
+        <h1>Accounts</h1>
+        Your account can be managed directly at <a href="http://localhost:8080/auth/realms/hawkular/account">Keycloak</a>.
+    </div>
+</div>
diff --git a/plugins/accounts/plugins/accounts/html/organization_new.html b/plugins/accounts/plugins/accounts/html/organization_new.html
@@ -0,0 +1,37 @@
+<div class="row">
+    <div class="col-md-12" data-ng-controller="HawkularAccounts.OrganizationNewController">
+        <ol class="breadcrumb">
+            <li><a data-ng-href="/">Hawkular</a></li>
+            <li><a data-ng-href="/">Accounts</a></li>
+            <li><a data-ng-href="/accounts/organizations">Organizations</a></li>
+        </ol>
+        <h1>
+            Add Organization
+        </h1>
+
+        <form role="form" class="form-horizontal">
+            <div class="form-group">
+                <label for="name" class="col-md-2 control-label">Name <span class="required">*</span> </label>
+                <div class="col-md-6">
+                    <input type="text" class="form-control" id="name" placeholder="Name"
+                           data-ng-model="organizationNew.name">
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="description" class="col-md-2 control-label">Description</label>
+                <div class="col-md-6">
+                    <input type="text" class="form-control" id="description" placeholder="Description"
+                           data-ng-model="organizationNew.description">
+                </div>
+            </div>
+            <div class="col-md-8">
+                <div class="pull-right">
+                    <a data-ng-href="/accounts/organizations" class="btn btn-default btn-lg">Cancel</a>
+                    <button data-ng-click="persist()" type="submit" class="btn btn-primary btn-lg">Save</button>
+                </div>
+            </div>
+
+        </form>
+    </div><!-- /col -->
+</div><!-- /row -->
diff --git a/plugins/accounts/plugins/accounts/html/organizations.html b/plugins/accounts/plugins/accounts/html/organizations.html
@@ -0,0 +1,47 @@
+<div class="row">
+    <div class="col-md-12" data-ng-controller="HawkularAccounts.OrganizationsController">
+        <ol class="breadcrumb">
+            <li><a data-ng-href="/">Hawkular</a></li>
+            <li><a data-ng-href="/">Accounts</a></li>
+            <li><a data-ng-href="/accounts/organizations">Organizations</a></li>
+        </ol>
+        <div class="pull-right">
+            <button class="btn btn-primary" type="button" role="button" data-ng-click="showCreateForm()">Create</button>
+        </div>
+
+        <h1>Organizations</h1>
+        <div class="progress-description" data-ng-show="loading">
+            <div class="spinner spinner-xs spinner-inline"></div> <strong>Loading:</strong> Organizations
+        </div>
+        <div class="row" data-ng-show="!organizations.length && !loading">
+            <div class="col-sm-6">
+                No organizations yet. How about creating one?
+            </div>
+        </div>
+
+        <div data-ng-show="organizations.length && !loading">
+            <table class="table table-striped table-bordered">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>&nbsp;</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr data-ng-repeat="organization in organizations">
+                        <td>{{organization.name}}</td>
+                        <td>{{organization.description}}</td>
+                        <td>
+                            <button type="button" class="btn btn-default" aria-label="Remove" data-ng-click="remove(organization)">
+                                <span class="pficon pficon-delete" aria-hidden="true"></span>
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div><!-- /col -->
+
+</div>
+</div>
diff --git a/plugins/accounts/plugins/accounts/ts/accountsGlobals.ts b/plugins/accounts/plugins/accounts/ts/accountsGlobals.ts
@@ -0,0 +1,21 @@
+/// Copyright 2014-2015 Red Hat, Inc. and/or its affiliates
+/// and other contributors as indicated by the @author tags.
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///   http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+
+/// <reference path="../../includes.ts"/>
+module HawkularAccounts {
+    export var pluginName = "hawkular-accounts";
+    export var log:Logging.Logger = Logger.get(pluginName);
+    export var templatePath = "plugins/accounts/html";
+}
diff --git a/plugins/accounts/plugins/accounts/ts/accountsPlugin.ts b/plugins/accounts/plugins/accounts/ts/accountsPlugin.ts
@@ -0,0 +1,41 @@
+/// Copyright 2014-2015 Red Hat, Inc. and/or its affiliates
+/// and other contributors as indicated by the @author tags.
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///   http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+
+/// <reference path="../../includes.ts"/>
+/// <reference path="accountsGlobals.ts"/>
+module HawkularAccounts {
+    export var _module = angular.module(HawkularAccounts.pluginName, []);
+    var accountsTab:any = undefined;
+
+    _module.config(['$locationProvider', '$routeProvider', 'HawtioNavBuilderProvider', ($locationProvider, $routeProvider:ng.route.IRouteProvider, builder:HawtioMainNav.BuilderFactory) => {
+        accountsTab = builder.create()
+            .id(HawkularAccounts.pluginName)
+            .title(() => "Accounts")
+            .href(() => "/accounts")
+            .subPath("My account", "accounts", builder.join(HawkularAccounts.templatePath, 'accounts.html'))
+            .subPath("Organizations", "organizations", builder.join(HawkularAccounts.templatePath, 'organizations.html'))
+            .build();
+        builder.configureRouting($routeProvider, accountsTab);
+
+        $routeProvider.when('/accounts/organizations/new', {templateUrl: builder.join(HawkularAccounts.templatePath, 'organization_new.html')});
+        $locationProvider.html5Mode(true);
+    }]);
+
+    _module.run(['HawtioNav', (HawtioNav:HawtioMainNav.Registry) => {
+        HawtioNav.add(accountsTab);
+    }]);
+
+    hawtioPluginLoader.addModule(HawkularAccounts.pluginName);
+}
diff --git a/plugins/accounts/plugins/accounts/ts/auth.ts b/plugins/accounts/plugins/accounts/ts/auth.ts
@@ -0,0 +1,64 @@
+/// Copyright 2014-2015 Red Hat, Inc. and/or its affiliates
+/// and other contributors as indicated by the @author tags.
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///   http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+
+/// <reference path="accountsPlugin.ts"/>
+/**
+ * Attention: this class will probably be replaced by the proper hawt.io Keycloak integration.
+ * While it's not done, we are doing the integration by ourselves.
+ */
+module HawkularAccounts {
+
+    export class AuthService {
+        public static $inject = ['$rootScope', '$window'];
+        constructor(private $rootScope:ng.IRootScopeService, private $window:ng.IWindowService) {
+          this.onReady(() => {
+            this.$rootScope['username'] = this.keycloak().idTokenParsed.name;
+          });
+        }
+
+        private keycloak():any {
+            return this.$window['keycloak'];
+        }
+
+        onReady(callback):any {
+            if (this.$window['keycloakReady'] === true) {
+                callback();
+            } else {
+              this.keycloak().onReady = () => {
+                this.$window['keycloakReady'] = true;
+                callback();
+              };
+            }
+        }
+
+        logout():void {
+            return this.keycloak().logout();
+        }
+
+        updateToken(periodicity:number):any {
+            return this.keycloak().updateToken(periodicity);
+        }
+
+        token():string {
+            return this.keycloak().token;
+        }
+
+        isAuthenticated():boolean {
+            return this.keycloak() && this.keycloak().authenticated;
+        }
+    }
+
+    _module.service('Auth', AuthService);
+}