Merge pull request #30 from kubernetes/simple-chrome

Implement simple chrome operating on ui.router

bower.json

@@ -10,8 +10,8 @@
     "angular-aria": "~1.4.2",
     "angular-material": "~0.10.1",
     "angular-messages": "~1.4.2",
+    "angular-ui-router": "~0.2.15",
     "angular-resource": "~1.4.2",
-    "angular-route": "~1.4.2",
     "angular-sanitize": "~1.4.2"
   },
   "devDependencies": {

build/script.js

@@ -93,6 +93,8 @@ gulp.task('scripts', ['create-serve-folders'], function() {
               'google-closure-compiler/contrib/externs/angular-1.4-http-promise_templated.js'),
           path.join(conf.paths.nodeModules,
               'google-closure-compiler/contrib/externs/angular-1.4-q_templated.js'),
+          path.join(conf.paths.nodeModules,
+              'google-closure-compiler/contrib/externs/angular_ui_router.js'),
           path.join(conf.paths.externs, '**/*.js'),
         ],
         // Enable all compiler checks by default and make them errors.

src/app/frontend/chrome/chrome.controller.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// 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.
+
+
+/**
+ * Controller for the chrome directive.
+ *
+ * @final
+ */
+export default class ChromeController {
+  constructor() {
+    // TODO(bryk): This is for tests only, change to something meaningful later.
+    /** @export {string} */
+    this.clusterName = 'ClusterName';
+  }
+}

src/app/frontend/chrome/chrome.directive.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// 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.
+
+import ChromeController from './chrome.controller';
+
+
+/**
+ * Returns directive definition object for the chrome directive.
+ *
+ * @return {!angular.Directive}
+ */
+export default function chromeDirective() {
+  return {
+    bindToController: true,
+    controller: ChromeController,
+    controllerAs: 'ctrl',
+    templateUrl: 'chrome/chrome.html',
+    transclude: true,
+  };
+}

src/app/frontend/chrome/chrome.html

+<div>
+  <md-content>
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <md-button class="md-icon-button" aria-label="Settings">
+          <md-icon md-font-library="material-icons">menu</md-icon>
+        </md-button>
+        <h2>
+          <span>Kubernetes cluster: {{ctrl.clusterName}}</span>
+        </h2>
+        <span flex></span>
+        <md-button class="md-icon-button" aria-label="Favorite">
+          <md-icon md-font-library="material-icons">more_vert</md-icon>
+        </md-button>
+      </div>
+    </md-toolbar>
+
+    <div ng-transclude></div>
+  </md-content>
+</div>

src/app/frontend/main/main.scss → src/app/frontend/chrome/chrome.module.js

-// Copyright 2015 Google Inc.
+// Copyright 2015 Google Inc. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,8 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import chromeDirective from './chrome.directive';
 
-body {
-  background-color: gray;
-}
 
+/**
+ * Angular module containing navigation chrome for the application.
+ */
+export default angular.module(
+    'kubernetesConsole.chrome',
+    [
+      'ngMaterial',
+    ])
+    .directive('chrome', chromeDirective);

src/app/frontend/index.html

@@ -26,8 +26,9 @@
       experience.</p>
     <![endif]-->
 
-    <div ng-view> <!-- Application content is inserted here. --> </div>
-
+    <chrome>
+      <div ui-view> <!-- Application content is inserted here. --> </div>
+    </chrome>
     <!-- build:js console/vendor.js -->
     <!-- bower:js -->
     <!-- Bower JS dependencies are populated here (dev build) and compiled

src/app/frontend/index.module.js

@@ -16,8 +16,9 @@
  * @fileoverview Entry point module to the application. Loads and configures other modules needed
  * to bootstrap the application.
  */
-import routeConfig from './index.route';
+import chromeModule from './chrome/chrome.module';
 import mainModule from './main/main.module';
+import routeConfig from './index.route';
 
 export default angular.module(
     'kubernetesConsole',
@@ -27,8 +28,9 @@ export default angular.module(
       'ngMaterial',
       'ngMessages',
       'ngResource',
-      'ngRoute',
       'ngSanitize',
+      'ui.router',
+      chromeModule.name,
       mainModule.name,
     ])
     .config(routeConfig);

src/app/frontend/index.route.js

@@ -14,9 +14,12 @@
 
 
 /**
- * @param {!angular.$routeProvider} $routeProvider
+ * Global route configuration for the application.
+ *
+ * @param {!ui.router.$urlRouterProvider} $urlRouterProvider
  * @ngInject
  */
-export default function routeConfig($routeProvider) {
-  // TODO(bryk): Configure 'otherwise' route here.
+export default function routeConfig($urlRouterProvider) {
+  // When no state is matched by an URL, redirect to default one.
+  $urlRouterProvider.otherwise('');
 }

src/app/frontend/index.scss

@@ -12,8 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// Robo Slab font.
+@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
 
-body {
- border: 1px solid red;
-}
+// Angular Material icon font. It allows to use the icons as fonts.
+@import url(//fonts.googleapis.com/icon?family=Material+Icons);
 
+html {
+  font-family: 'Roboto Slab', serif;
+}

src/app/frontend/main/main.controller.js

-// Copyright 2015 Google Inc.
+// Copyright 2015 Google Inc. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.

src/app/frontend/main/main.html

 <div layout="vertical" layout-fill>
-  <md-content>
-    <header>
-      Hello world! {{ctrl.testValue}}
-    </header>
+  <header>
+    Hello world! {{ctrl.testValue}}
+  </header>
 
-    <section class="jumbotron">
-      <h1>'Allo, 'Allo!</h1>
-      <p class="lead">
-        <img src="assets/images/yeoman.png" alt="I'm Yeoman"><br>
-      </p>
-    </section>
-  </md-content>
+  <section class="jumbotron">
+    <h1>'Allo, 'Allo!</h1>
+    <p class="lead">
+      <img src="assets/images/yeoman.png" alt="I'm Yeoman"><br>
+    </p>
+  </section>
 </div>

src/app/frontend/main/main.module.js

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import routeConfig from './main.route';
+import stateConfig from './main.state';
 
 
 export default angular.module('kubernetesConsole.main', [])
-    .config(routeConfig);
+    .config(stateConfig);

src/app/frontend/main/main.route.js → src/app/frontend/main/main.state.js

@@ -16,11 +16,12 @@ import MainController from './main.controller';
 
 
 /**
- * @param {!angular.$routeProvider} $routeProvider
+ * @param {!ui.router.$stateProvider} $stateProvider
  * @ngInject
  */
-export default function routeConfig($routeProvider) {
-  $routeProvider.when('/', {
+export default function stateConfig($stateProvider) {
+  $stateProvider.state('main', {
+    url: '',
     templateUrl: 'main/main.html',
     controller: MainController,
     controllerAs: 'ctrl',