Frontend for namespace selection

1. Sorry for the size, but this PR was all-in or nothing
2. The mechanics for namespace is that user selects it via the dropdown
   and the selection goes through all pages, but has effect on display
   only on list pages.
3. The selector is now ugly. I'll style and improve wording later.

Author: bryk

i18n/messages-en.xtb

@@ -138,4 +138,6 @@
 	<translation id="2586490478144382446" key="MSG_PET_SET_LIST_HEADER_PODS" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set list header: pods.">Pods</translation>
 	<translation id="1017086337822469058" key="MSG_PET_SET_LIST_HEADER_AGE" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set list header: age.">Age</translation>
 	<translation id="5744665687208066898" key="MSG_PET_SET_LIST_HEADER_IMAGES" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set list header: images.">Images</translation>
+	<translation id="2997495891426796243" key="MSG_NAMESPACE_NOT_SELECTED" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Text for dropdown item that indicates that no namespace was selected">namespace not selected</translation>
+	<translation id="5143266087600531180" key="MSG_NAMESPACE_SELECT_ARIA_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Text describing what namespace selector is">Selector for namespaces</translation>
 </translationbundle>

i18n/messages-ja.xtb

@@ -138,4 +138,6 @@
 	<translation id="2586490478144382446" key="MSG_PET_SET_LIST_HEADER_PODS" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set list header: pods.">Pods</translation>
 	<translation id="1017086337822469058" key="MSG_PET_SET_LIST_HEADER_AGE" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set list header: age.">Age</translation>
 	<translation id="5744665687208066898" key="MSG_PET_SET_LIST_HEADER_IMAGES" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set list header: images.">Images</translation>
+	<translation id="2997495891426796243" key="MSG_NAMESPACE_NOT_SELECTED" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Text for dropdown item that indicates that no namespace was selected">namespace not selected</translation>
+	<translation id="5143266087600531180" key="MSG_NAMESPACE_SELECT_ARIA_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Text describing what namespace selector is">Selector for namespaces</translation>
 </translationbundle>

src/app/backend/resource/common/resourcechannels.go

@@ -333,7 +333,7 @@ func GetDaemonSetListChannel(client client.DaemonSetsNamespacer,
 				filteredItems = append(filteredItems, item)
 			}
 		}
-		list.Items = filteredItems;
+		list.Items = filteredItems
 		for i := 0; i < numReads; i++ {
 			channel.List <- list
 			channel.Error <- err
@@ -366,8 +366,7 @@ func GetPetSetListChannel(client client.PetSetNamespacer,
 				filteredItems = append(filteredItems, item)
 			}
 		}
-
-		petSets.Items = filteredItems;
+		petSets.Items = filteredItems
 		for i := 0; i < numReads; i++ {
 			channel.List <- petSets
 			channel.Error <- err

src/app/externs/uirouter.js

@@ -0,0 +1,32 @@
+// 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.
+
+/**
+ * @fileoverview Externs for angular UI router that are missing from official ones.
+ *
+ * @externs
+ */
+
+const kdUiRouter = {};
+
+/**
+ * @constructor
+ */
+kdUiRouter.$stateProvider = function() {};
+
+/**
+ * @param {string} parent
+ * @param {Function} callback
+ */
+kdUiRouter.$stateProvider.prototype.decorator = function(parent, callback) {};

src/app/frontend/chrome/chrome.html

@@ -16,13 +16,14 @@
 
 <md-toolbar class="kd-toolbar">
   <div class="md-toolbar-tools kd-toolbar-tools">
-    <a ui-sref="workload" ui-sref-opts="{ reload: true }" 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>
       <span>kubernetes</span>
     </h2>
     <div flex="auto" ui-view="toolbar"></div>
+    <kd-namespace-select></kd-namespace-select>
   </div>
 </md-toolbar>
 
@@ -34,6 +35,8 @@ <h2>
       <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 ng-switch-when="false" class="kd-app-content">
+      <div ui-view></div>
+    </div>
   </div>
 </md-content>

src/app/frontend/chrome/chrome_controller.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import {actionbarViewName} from './chrome_state';
+import {stateName as workloadState} from 'workloads/workloads_state';
 
 /**
  * Controller for the chrome directive.
@@ -22,9 +23,10 @@ import {actionbarViewName} from './chrome_state';
 export default class ChromeController {
   /**
    * @param {!ui.router.$state} $state
+   * @param {!angular.Scope} $scope
    * @ngInject
    */
-  constructor($state) {
+  constructor($state, $scope) {
     /**
      * By default this is true to show loading for the first page.
      * @export {boolean}
@@ -33,8 +35,16 @@ export default class ChromeController {
 
     /** @private {!ui.router.$state} */
     this.state_ = $state;
+
+    this.registerStateChangeListeners($scope);
   }
 
+  /**
+   * @return {string}
+   * @export
+   */
+  getLogoHref() { return this.state_.href(workloadState); }
+
   /**
    * @return {boolean}
    * @export

src/app/frontend/chrome/chrome_directive.js

@@ -12,8 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import chromeDirective from './chrome_directive';
+import stateConfig from './chrome_stateconfig';
 import componentsModule from 'common/components/components_module';
+import namespaceModule from 'common/namespace/namespace_module';
 
 /**
  * Angular module containing navigation chrome for the application.
@@ -25,5 +26,6 @@ export default angular
           'ngMaterial',
           'ui.router',
           componentsModule.name,
+          namespaceModule.name,
         ])
-    .directive('chrome', chromeDirective);
+    .config(stateConfig);

src/app/frontend/chrome/chrome_module.js

@@ -12,6 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/**
+* Name of the namespace state. This state should be used as a parent state for all root states.
+* It provides gobal namespace option for all URLs.
+*/
+export const stateName = 'chrome';
+
 /** Name of the view. Can be used in state config to define toolbar view */
 export const toolbarViewName = 'toolbar';
 
@@ -20,3 +26,22 @@ export const toolbarViewName = 'toolbar';
  * be used for, e.g., breadcrumbs or view-specific action buttons.
  */
 export const actionbarViewName = 'actionbar';
+
+/**
+ * Parameter name of the namespace selection param. Mostly for internal use.
+ */
+export const namespaceParam = 'namespace';
+
+/**
+ * All properties are @exported and in sync with URL param names.
+ * @final
+ */
+export class StateParams {
+  /**
+   * @param {string|undefined} namespace
+  */
+  constructor(namespace) {
+    /** @export {string|undefined} */
+    this.namespace = namespace;
+  }
+}

src/app/frontend/chrome/chrome_state.js

@@ -0,0 +1,52 @@
+// 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';
+import {stateName, namespaceParam} from './chrome_state';
+
+/**
+ * Namespace is an abstract state with no path, but with one parameter ?namespace= that
+ * is always accepted (since namespace is above all).
+ *
+ * This state must always be the root in a state tree. This is enforced during app startup.
+ *
+ * @param {!ui.router.$stateProvider|kdUiRouter.$stateProvider} $stateProvider
+ * @ngInject
+ */
+export default function stateConfig($stateProvider) {
+  $stateProvider.state(stateName, {
+    url: `?${namespaceParam}`,
+    abstract: true,
+    templateUrl: 'chrome/chrome.html',
+    controller: ChromeController,
+    controllerAs: 'ctrl',
+  });
+  $stateProvider.decorator('parent', requireParentState);
+}
+
+/**
+ * @param {!Object} stateExtend
+ * @param {function(?):!ui.router.$state} parentFn
+ * @return {!ui.router.$state}
+ */
+function requireParentState(stateExtend, parentFn) {
+  /** @type {!ui.router.$state} */
+  let state = stateExtend['self'];
+  if (!state.parent && state.name !== stateName) {
+    throw new Error(
+        `State "${state.name}" requires parent state to be set to ` +
+        `${stateName}. This is likely a programming error.`);
+  }
+  return parentFn(stateExtend);
+}