Merge branch 'master' into cpu-mem-requirements

src/app/frontend/chrome/chrome.html

@@ -26,7 +26,11 @@ limitations under the License.
       <div flex ui-view="toolbar"></div>
     </div>
   </md-toolbar>
-  <div class="kd-app-content-wrapper">
-    <div ng-transclude class="kd-app-content"></div>
+  <div class="kd-app-content-wrapper" ng-switch="ctrl.showLoadingSpinner">
+    <div ng-switch-when="true" class="kd-chrome-loading-container">
+      <md-progress-circular md-mode="indeterminate" md-diameter="96">
+      </md-progress-circular>
+    </div>
+    <div ng-switch-when="false" ng-transclude class="kd-app-content"></div>
   </div>
 </md-content>

src/app/frontend/chrome/chrome.scss

@@ -41,3 +41,15 @@ a {
 .kd-app-content {
   position: relative;
 }
+
+.kd-chrome-loading-container {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}

src/app/frontend/chrome/chrome_controller.js

@@ -18,9 +18,29 @@
  * @final
  */
 export default class ChromeController {
+  /**
+   * @ngInject
+   */
   constructor() {
-    // TODO(bryk): This is for tests only, change to something meaningful later.
-    /** @export {string} */
-    this.clusterName = 'ClusterName';
+    /**
+     * By default this is true to show loading for the first page.
+     * @export {boolean}
+     */
+    this.showLoadingSpinner = true;
   }
+
+  /**
+   * @param {!angular.Scope} scope
+   */
+  registerStateChangeListeners(scope) {
+    scope.$on('$stateChangeStart', () => { this.showLoadingSpinner = true; });
+
+    scope.$on('$stateChangeError', this.hideSpinner_.bind(this));
+    scope.$on('$stateChangeSuccess', this.hideSpinner_.bind(this));
+  }
+
+  /**
+   * @private
+   */
+  hideSpinner_() { this.showLoadingSpinner = false; }
 }

src/app/frontend/chrome/chrome_directive.js

@@ -22,10 +22,17 @@ import ChromeController from './chrome_controller';
 export default function chromeDirective() {
   return {
     scope: {},
-    bindToController: true,
+    bindToController: {},
     controller: ChromeController,
     controllerAs: 'ctrl',
     templateUrl: 'chrome/chrome.html',
     transclude: true,
+    /**
+     * @param {!angular.Scope} scope
+     * @param {!angular.JQLite} elem
+     * @param {!angular.Attributes} attrs
+     * @param {!ChromeController} ctrl
+     */
+    link: function(scope, elem, attrs, ctrl) { ctrl.registerStateChangeListeners(scope); },
   };
 }

src/app/frontend/replicasetlist/replicasetcardmenu.html

@@ -15,7 +15,8 @@ limitations under the License.
 -->
 
 <md-menu>
-  <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)" class="md-icon-button kd-replicaset-card-menu-button">
+  <md-button ng-click="ctrl.openMenu($mdOpenMenu, $event)"
+      class="md-icon-button kd-replicaset-card-menu-button">
     <md-icon md-font-library="material-icons">more_vert</md-icon>
   </md-button>
   <md-menu-content width="3">

src/app/frontend/replicasetlist/replicasetcardmenu.scss

+// 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 '../variables';
+
+.md-button {
+  &.kd-replicaset-card-menu-button {
+    margin: 0;
+    position: relative;
+    right: -$baseline-grid;
+  }
+}

src/test/frontend/chrome/chrome_controller_test.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/chrome_controller';
+import chromeModule from 'chrome/chrome_module';
+
+describe('Chrome controller', () => {
+  /** @type {ChromeController} */
+  let ctrl;
+  /** @type {!angular.Scope} */
+  let scope;
+
+  beforeEach(() => {
+    angular.mock.module(chromeModule.name);
+    angular.mock.inject(($controller, $rootScope) => {
+      ctrl = $controller(ChromeController);
+      scope = $rootScope;
+    });
+  });
+
+  it('should show and hide spinner on change events', () => {
+    // initial state assert
+    expect(ctrl.showLoadingSpinner).toBe(true);
+
+    // when
+    scope.$broadcast('$stateChangeSuccess');
+    scope.$apply();
+
+    // Then nothing happens when scope is not registered.
+    expect(ctrl.showLoadingSpinner).toBe(true);
+
+    // when
+    ctrl.registerStateChangeListeners(scope);
+    scope.$broadcast('$stateChangeSuccess');
+    scope.$apply();
+
+    // then
+    expect(ctrl.showLoadingSpinner).toBe(false);
+
+    // when
+    scope.$broadcast('$stateChangeStart');
+    scope.$apply();
+
+    // then
+    expect(ctrl.showLoadingSpinner).toBe(true);
+
+    // when
+    scope.$broadcast('$stateChangeError');
+    scope.$apply();
+
+    // then
+    expect(ctrl.showLoadingSpinner).toBe(false);
+  });
+});

src/test/frontend/chrome/chrome_directive_test.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 chromeModule from 'chrome/chrome_module';
+
+describe('Chrome directive', () => {
+  /** @type {!angular.Scope} */
+  let scope;
+  /** @type {function(!angular.Scope):!angular.JQLite} */
+  let compileFn;
+
+  beforeEach(() => {
+    angular.mock.module(chromeModule.name);
+    angular.mock.inject(($compile, $rootScope, $httpBackend) => {
+      scope = $rootScope.$new();
+      compileFn = $compile('<chrome></chrome>');
+      $httpBackend.when('GET', 'assets/images/kubernetes-logo.svg').respond(404);
+    });
+  });
+
+  it('should register current scope on controller', () => {
+    // given
+    let elem = compileFn(scope);
+
+    // when
+    scope.$apply();
+
+    // then
+    expect(elem.find('md-progress-circular')[0]).not.toBeUndefined();
+
+    // given
+    scope.$broadcast('$stateChangeSuccess');
+
+    // when
+    scope.$apply();
+
+    // then
+    expect(elem.find('md-progress-circular')[0]).toBeUndefined();
+  });
+});

src/test/frontend/deploy/deploylabel_controller_test.js

@@ -23,13 +23,13 @@ describe('DeployLabel controller', () => {
     ctrl = new DeployLabelController();
 
     angular.mock.inject(($rootScope, $compile) => {
-      let $scope = $rootScope.$new();
+      let scope = $rootScope.$new();
       let template = angular.element(
           '<ng-form name="labelForm"><input name="key"' +
           ' ng-model="label"></ng-form>');
 
-      $compile(template)($scope);
-      labelForm = $scope.labelForm;
+      $compile(template)(scope);
+      labelForm = scope.labelForm;
     });
   });
 

src/test/integration/zerostate/zerostate_po.js

@@ -13,5 +13,8 @@
 // limitations under the License.
 
 export default class ZeroStatePageObject {
-  constructor() { this.deployButton = element(by.css('.kd-zerostate-deploy-bt')); }
+  constructor() {
+    this.deployButtonQuery = by.css('.kd-zerostate-deploy-bt');
+    this.deployButton = element(this.deployButtonQuery);
+  }
 }