Frontend for namespace selection

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_module.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_state.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_stateconfig.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);
+}

src/app/frontend/common/components/breadcrumbs/breadcrumbs_service.js

@@ -41,20 +41,22 @@ export class BreadcrumbsService {
   }
 
   /**
-   * Returns parent state of the given state based on defined state parent name or if it is not
-   * defined then based on direct parent state.
+   * Returns parent state of the given state based on defined breadcrumbs config state parent name.
    *
    * @param {!ui.router.$state} state
-   * @return {!ui.router.$state}
+   * @return {ui.router.$state}
    */
   getParentState(state) {
     let conf = this.getBreadcrumbConfig(state);
-    let result = state['parent'];
+    let result = null;
 
     if (conf && conf.parent) {
-      result = this.state_.get(conf.parent);
+      if (typeof conf.parent === 'string') {
+        result = this.state_.get(conf.parent);
+      } else {
+        result = conf.parent;
+      }
     }
-
     return result;
   }
 

src/app/frontend/common/namespace/namespace_module.js

@@ -0,0 +1,28 @@
+
+// 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 {namespaceSelectComponent} from './namespaceselect_component';
+
+/**
+ * Angular module global namespace selection components.
+ */
+export default angular
+    .module(
+        'kubernetesDashboard.common.namespace',
+        [
+          'ngMaterial',
+          'ngResource',
+        ])
+    .component('kdNamespaceSelect', namespaceSelectComponent);

src/app/frontend/common/namespace/namespaceselect.html

@@ -0,0 +1,9 @@
+<md-input-container>
+  <md-select ng-model="$ctrl.selectedNamespace" md-on-open="$ctrl.loadNamespacesIfNeeded()"
+      md-on-close="$ctrl.changeNamespace()"
+      aria-label="{{::$ctrl.i18n.MSG_NAMESPACE_SELECT_ARIA_LABEL}}">
+    <md-option ng-value="namespace" ng-repeat="namespace in $ctrl.namespaces">
+      {{$ctrl.formatNamespace(namespace)}}
+    </md-option>
+  </md-select>
+</md-input-container>