Show loading spinner on first page view (#870)

Fixes #827

Author: bryk

src/app/frontend/chrome/chrome.html

@@ -16,7 +16,7 @@
 
 <md-toolbar class="kd-toolbar">
   <div class="md-toolbar-tools kd-toolbar-tools">
-    <a ng-href="{{ctrl.getLogoHref()}}" tabindex="-1">
+    <a ng-href="{{$ctrl.getLogoHref()}}" tabindex="-1">
       <md-icon md-svg-icon="assets/images/kubernetes-logo.svg" class="kd-toolbar-logo"></md-icon>
     </a>
     <h2>
@@ -27,10 +27,10 @@ <h2>
   </div>
 </md-toolbar>
 
-<kd-actionbar ng-if="ctrl.isActionbarVisible()"></kd-actionbar>
+<kd-actionbar ng-if="$ctrl.isActionbarVisible()"></kd-actionbar>
 
 <md-content flex="auto" class="kd-app-content">
-  <div ng-switch="ctrl.showLoadingSpinner" flex="auto" >
+  <div ng-switch="$ctrl.showLoadingSpinner" flex="auto" >
     <div ng-switch-when="true" class="kd-center-fixed">
       <md-progress-circular md-mode="indeterminate" md-diameter="96">
       </md-progress-circular>

src/app/frontend/chrome/chrome_controller.js renamed to src/app/frontend/chrome/chrome_component.js

@@ -21,7 +21,7 @@ import {actionbarViewName} from './chrome_state';
  *
  * @final
  */
-export default class ChromeController {
+export class ChromeController {
   /**
    * @param {!ui.router.$state} $state
    * @param {!angular.Scope} $scope
@@ -37,9 +37,13 @@ export default class ChromeController {
     /** @private {!ui.router.$state} */
     this.state_ = $state;
 
-    this.registerStateChangeListeners($scope);
+    /** @private {!angular.Scope} */
+    this.scope_ = $scope;
   }
 
+  /** @export */
+  $onInit() { this.registerStateChangeListeners(this.scope_); }
+
   /**
    * @return {string}
    * @export
@@ -70,3 +74,11 @@ export default class ChromeController {
    */
   hideSpinner_() { this.showLoadingSpinner = false; }
 }
+
+/**
+ * @type {!angular.Component}
+ */
+export const chromeComponent = {
+  controller: ChromeController,
+  templateUrl: 'chrome/chrome.html',
+};

src/app/frontend/chrome/chrome_module.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import stateConfig from './chrome_stateconfig';
+import {chromeComponent} from './chrome_component';
 import componentsModule from 'common/components/components_module';
 import namespaceModule from 'common/namespace/namespace_module';
 
@@ -28,4 +29,5 @@ export default angular
           componentsModule.name,
           namespaceModule.name,
         ])
-    .config(stateConfig);
+    .config(stateConfig)
+    .component('kdChrome', chromeComponent);

src/app/frontend/chrome/chrome_stateconfig.js

@@ -12,8 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import ChromeController from './chrome_controller';
-import {stateName, namespaceParam} from './chrome_state';
+import {actionbarViewName, namespaceParam, stateName, toolbarViewName} from './chrome_state';
 
 /**
  * Namespace is an abstract state with no path, but with one parameter ?namespace= that
@@ -28,9 +27,17 @@ export default function stateConfig($stateProvider) {
   $stateProvider.state(stateName, {
     url: `?${namespaceParam}`,
     abstract: true,
-    templateUrl: 'chrome/chrome.html',
-    controller: ChromeController,
-    controllerAs: 'ctrl',
+    views: {
+      '': {
+        template: '<div ui-view></div>',
+      },
+      [toolbarViewName]: {
+        template: `<div ui-view="${toolbarViewName}"></div>`,
+      },
+      [actionbarViewName]: {
+        template: `<div ui-view="${actionbarViewName}"></div>`,
+      },
+    },
   });
   $stateProvider.decorator('parent', requireParentState);
 }

src/app/frontend/deploymentdetail/deploymentinfo_component.js

@@ -27,7 +27,7 @@ export default class DeploymentInfoController {
 /**
  * Definition object for the component that displays replica set info.
  *
- * @return {!angular.Directive}
+ * @type {!angular.Component}
  */
 export const deploymentInfoComponent = {
   controller: DeploymentInfoController,

src/app/frontend/index.html

@@ -44,7 +44,7 @@
       experience.</p>
     <![endif]-->
 
-    <div ui-view layout="column" layout-fill> <!-- Application content is inserted here. --> </div>
+    <kd-chrome layout="column" layout-fill> <!-- Application content is inserted here. --> </kd-chrome>
     <!-- build:js static/vendor.js -->
     <!-- bower:js -->
     <!-- Bower JS dependencies are populated here (dev build) and compiled

src/test/frontend/chrome/chrome_controller_test.js renamed to src/test/frontend/chrome/chrome_component_test.js

@@ -12,7 +12,6 @@
 // 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';
 import {actionbarViewName} from 'chrome/chrome_state';
 
@@ -26,8 +25,9 @@ describe('Chrome controller', () => {
 
   beforeEach(() => {
     angular.mock.module(chromeModule.name);
-    angular.mock.inject(($controller, $rootScope, $state) => {
-      ctrl = $controller(ChromeController, {$scope: $rootScope});
+    angular.mock.inject(($componentController, $rootScope, $state) => {
+      ctrl = $componentController('kdChrome', {$scope: $rootScope});
+      ctrl.$onInit();
       scope = $rootScope;
       state = $state;
     });