Merge pull request #8332 from preillyme/fix_breadcrumbs

Restore missing WebUI breadcrumbs after refactor

.gitignore

@@ -53,6 +53,6 @@ network_closure.sh
 
 # Web UI
 www/master/node_modules/
-
+www/master/npm-debug.log
 # Karma output
 www/test_out

www/app/assets/css/app.css

@@ -7,7 +7,6 @@
 .nav-back {
   /* :before */
   /* content: ""; */
-  background: url('assets/img/icons/arrow-back.png');
   background-size: 14px 14px;
   background-repeat: no-repeat;
   display: block;
@@ -219,7 +218,7 @@ md-select-menu {
   text-transform: none;
 }
 .md-button-toggle .md-toggle-icon {
-  background: transparent url(assets/img/icons/list_control_down.png) no-repeat center center;
+  background: transparent url(../img/icons/list_control_down.png) no-repeat center center;
   background-size: 100% auto;
   display: inline-block;
   height: 24px;

www/app/assets/img/ic_arrow_drop_down_24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M7 10l5 5 5-5z"/>
+    <path d="M0 0h24v24h-24z" fill="none"/>
+</svg>

www/app/assets/img/ic_arrow_drop_up_24px.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Header">
+	<g>
+		<rect x="-618" y="-952" fill="none" width="1400" height="3600"/>
+	</g>
+</g>
+<g id="Label">
+</g>
+<g id="Icon">
+	<g>
+		<g>
+			<polygon points="7,14 12,9 17,14 			"/>
+		</g>
+		<rect fill="none" width="24" height="24"/>
+	</g>
+</g>
+<g id="Grid" display="none">
+	<g display="inline">
+	</g>
+</g>
+</svg>

www/app/assets/img/ic_keyboard_arrow_left_24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/></svg>

www/app/assets/img/ic_keyboard_arrow_right_24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>

www/app/assets/js/app.js

@@ -16,6 +16,61 @@ var app = angular.module('kubernetesApp', [
   'angular.filter'
 ].concat(componentNamespaces));
 
+app.factory('menu', [
+  '$location',
+  '$rootScope',
+  'sections',
+  '$route',
+  function($location, $rootScope, sections, $route) {
+
+    var self;
+
+    $rootScope.$on('$locationChangeSuccess', onLocationChange);
+
+    return self = {
+
+      sections: sections,
+
+      setSections: function(_sections) { this.sections = _sections; },
+      selectSection: function(section) { self.openedSection = section; },
+      toggleSelectSection: function(section) {
+        self.openedSection = (self.openedSection === section ? null : section);
+      },
+      isSectionSelected: function(section) { return self.openedSection === section; },
+      selectPage: function(section, page) {
+        self.currentSection = section;
+        self.currentPage = page;
+      },
+      isPageSelected: function(page) { return self.currentPage === page; }
+    };
+
+    function onLocationChange() {
+      var path = $route.current.originalPath;
+
+      var matchPage = function(section, page) {
+        if (path === page.url || path === (page.url + '/')) {
+          self.selectSection(section);
+          self.selectPage(section, page);
+        }
+      };
+
+      sections.forEach(function(section) {
+        if (section.children) {
+          section.children.forEach(function(childSection) {
+            if (childSection.pages) {
+              childSection.pages.forEach(function(page) { matchPage(childSection, page); });
+            }
+          });
+        } else if (section.pages) {
+          section.pages.forEach(function(page) { matchPage(section, page); });
+        } else if (section.type === 'link') {
+          matchPage(section, section);
+        }
+      });
+    }
+  }
+]);
+
 angular.module('kubernetesApp.config', []);
 angular.module('kubernetesApp.services', ['kubernetesApp.config']);
 
@@ -46,6 +101,8 @@ app.config([
       }
     ]);
 
+app.value("sections", [{"name":"Dashboard","url":"/dashboard","type":"link","templateUrl":"/components/dashboard/pages/home.html"},{"name":"Dashboard","type":"heading","children":[{"name":"Dashboard","type":"toggle","url":"/dashboard","templateUrl":"/components/dashboard/pages/home.html","pages":[{"name":"Pods","url":"/dashboard/pods","templateUrl":"/components/dashboard/views/listPods.html","type":"link"},{"name":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"/components/dashboard/views/listPodsVisualizer.html","type":"link"},{"name":"Services","url":"/dashboard/services","templateUrl":"/components/dashboard/views/listServices.html","type":"link"},{"name":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"/components/dashboard/views/listReplicationControllers.html","type":"link"},{"name":"Events","url":"/dashboard/events","templateUrl":"/components/dashboard/views/listEvents.html","type":"link"},{"name":"Nodes","url":"/dashboard/nodes","templateUrl":"/components/dashboard/views/listMinions.html","type":"link"},{"name":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"/components/dashboard/views/replication.html","type":"link"},{"name":"Service","url":"/dashboard/services/:serviceId","templateUrl":"/components/dashboard/views/service.html","type":"link"},{"name": "Node","url": "/dashboard/nodes/:nodeId","templateUrl": "/components/dashboard/views/node.html","type": "link"},{"name":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"/components/dashboard/views/groups.html","type":"link"},{"name":"Pod","url":"/dashboard/pods/:podId","templateUrl":"/components/dashboard/views/pod.html","type":"link"}]}]},{"name":"Graph","url":"/graph","type":"link","templateUrl":"/components/graph/pages/home.html"},{"name":"Graph","url":"/graph/inspect","type":"link","templateUrl":"/components/graph/pages/inspect.html","css":"/components/graph/css/show-details-table.css"},{"name":"Graph","type":"heading","children":[{"name":"Graph","type":"toggle","url":"/graph","templateUrl":"/components/graph/pages/home.html","pages":[{"name":"Test","url":"/graph/test","type":"link","templateUrl":"/components/graph/pages/home.html"}]}]}]);
+
 app.directive('includeReplace',
               function() {
                 'use strict';
@@ -137,7 +194,7 @@ app.service('SidebarService', [
 
 
 app.value("tabs", [{"component":"dashboard","title":"Dashboard"}]);
-app.constant("manifestRoutes", [{"description":"Dashboard visualization.","url":"/dashboard/","templateUrl":"components/dashboard/pages/home.html"},{"description":"Pods","url":"/dashboard/pods","templateUrl":"components/dashboard/views/listPods.html"},{"description":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"components/dashboard/views/listPodsVisualizer.html"},{"description":"Services","url":"/dashboard/services","templateUrl":"components/dashboard/views/listServices.html"},{"description":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"components/dashboard/views/listReplicationControllers.html"},{"description":"Events","url":"/dashboard/events","templateUrl":"components/dashboard/views/listEvents.html"},{"description":"Minions","url":"/dashboard/minions","templateUrl":"components/dashboard/views/listMinions.html"},{"description":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"components/dashboard/views/replication.html"},{"description":"Service","url":"/dashboard/services/:serviceId","templateUrl":"components/dashboard/views/service.html"},{"description":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"components/dashboard/views/groups.html"},{"description":"Pod","url":"/dashboard/pods/:podId","templateUrl":"components/dashboard/views/pod.html"}]);
+app.constant("manifestRoutes", [{"description":"Dashboard visualization.","url":"/dashboard/","templateUrl":"components/dashboard/pages/home.html"},{"description":"Pods","url":"/dashboard/pods","templateUrl":"components/dashboard/views/listPods.html"},{"description":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"components/dashboard/views/listPodsVisualizer.html"},{"description":"Services","url":"/dashboard/services","templateUrl":"components/dashboard/views/listServices.html"},{"description":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"components/dashboard/views/listReplicationControllers.html"},{"description":"Events","url":"/dashboard/events","templateUrl":"components/dashboard/views/listEvents.html"},{"description":"Nodes","url":"/dashboard/nodes","templateUrl":"components/dashboard/views/listMinions.html"},{"description":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"components/dashboard/views/replication.html"},{"description":"Service","url":"/dashboard/services/:serviceId","templateUrl":"components/dashboard/views/service.html"},{"description":"Node","url":"/dashboard/nodes/:nodeId","templateUrl":"components/dashboard/views/node.html"},{"description":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"components/dashboard/views/groups.html"},{"description":"Pod","url":"/dashboard/pods/:podId","templateUrl":"components/dashboard/views/pod.html"}]);
 
 angular.module("kubernetesApp.config", [])
 
@@ -165,6 +222,122 @@ angular.module("kubernetesApp.config", [])
  * Module: constants.js
  * Define constants to inject across the application
  =========================================================*/
+/**=========================================================
+ * Module: home-page.js
+ * Page Controller
+ =========================================================*/
+
+app.controller('PageCtrl', [
+  '$scope',
+  '$timeout',
+  '$mdSidenav',
+  'menu',
+  '$rootScope',
+  function($scope, $timeout, $mdSidenav, menu, $rootScope) {
+  $scope.menu = menu;
+
+  $scope.path = path;
+  $scope.goHome = goHome;
+  $scope.openMenu = openMenu;
+  $rootScope.openMenu = openMenu;
+  $scope.closeMenu = closeMenu;
+  $scope.isSectionSelected = isSectionSelected;
+
+  $rootScope.$on('$locationChangeSuccess', openPage);
+
+  // Methods used by menuLink and menuToggle directives
+  this.isOpen = isOpen;
+  this.isSelected = isSelected;
+  this.toggleOpen = toggleOpen;
+  this.shouldLockOpen = shouldLockOpen;
+  $scope.toggleKubernetesUiMenu = toggleKubernetesUiMenu;
+
+  var mainContentArea = document.querySelector("[role='main']");
+  var kubernetesUiMenu = document.querySelector("[role='kubernetes-ui-menu']");
+
+  // *********************
+  // Internal methods
+  // *********************
+
+  var _t = false;
+
+  $scope.showKubernetesUiMenu = false;
+
+  function shouldLockOpen() {
+    return _t;
+  }
+
+  function toggleKubernetesUiMenu() {
+    $scope.showKubernetesUiMenu = !$scope.showKubernetesUiMenu;
+  }
+
+  function closeMenu() {
+    $timeout(function() {
+      $mdSidenav('left').close();
+    });
+  }
+
+  function openMenu() {
+    $timeout(function() {
+      _t = !$mdSidenav('left').isOpen();
+      $mdSidenav('left').toggle();
+    });
+  }
+
+  function path() {
+    return $location.path();
+  }
+
+  function goHome($event) {
+    menu.selectPage(null, null);
+    $location.path( '/' );
+  }
+
+  function openPage() {
+    $scope.closeMenu();
+    mainContentArea.focus();
+  }
+
+  function isSelected(page) {
+    return menu.isPageSelected(page);
+  }
+
+  function isSectionSelected(section) {
+    var selected = false;
+    var openedSection = menu.openedSection;
+    if(openedSection === section){
+      selected = true;
+    }
+    else if(section.children) {
+      section.children.forEach(function(childSection) {
+        if(childSection === openedSection){
+          selected = true;
+        }
+      });
+    }
+    return selected;
+  }
+
+  function isOpen(section) {
+    return menu.isSectionSelected(section);
+  }
+
+  function toggleOpen(section) {
+    menu.toggleSelectSection(section);
+  }
+
+  }
+]).filter('humanizeDoc', function() {
+  return function(doc) {
+    if (!doc) return;
+    if (doc.type === 'directive') {
+      return doc.name.replace(/([A-Z])/g, function($1) {
+        return '-'+$1.toLowerCase();
+      });
+    }
+    return doc.label || doc.name;
+  }; });
+
 /**=========================================================
  * Module: main.js
  * Main Application Controller
@@ -418,7 +591,9 @@ app.provider('k8sApi',
 
                  api.getPods = function(query) { return _get($http, urlBase + '/pods', query); };
 
-                 api.getMinions = function(query) { return _get($http, urlBase + '/minions', query); };
+                 api.getMinions = function(query) { return _get($http, urlBase + '/nodes', query); };
+
+                 api.getNodes = api.getMinions;
 
                  api.getServices = function(query) { return _get($http, urlBase + '/services', query); };
 
@@ -1118,7 +1293,7 @@ angular.module('kubernetesApp.components.dashboard', [])
         $scope.subPages = [
           {category: 'dashboard', name: 'Explore', value: '/dashboard/groups/type/selector/'},
           {category: 'dashboard', name: 'Pods', value: '/dashboard/pods'},
-          {category: 'dashboard', name: 'Minions', value: '/dashboard/minions'},
+          {category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes'},
           {category: 'dashboard', name: 'Replication Controllers', value: '/dashboard/replicationcontrollers'},
           {category: 'dashboard', name: 'Services', value: '/dashboard/services'},
           {category: 'dashboard', name: 'Events', value: '/dashboard/events'}
@@ -1167,11 +1342,6 @@ app.controller('ListEventsCtrl', [
 
     $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
 
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
-
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
       $scope.loading = false;
@@ -1179,7 +1349,7 @@ app.controller('ListEventsCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getEvents().success(function(data) {
         $scope.loading = false;
@@ -1207,7 +1377,7 @@ app.controller('ListEventsCtrl', [
       }).error($scope.handleError);
     }
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);
@@ -1242,12 +1412,7 @@ app.controller('ListMinionsCtrl', [
     $scope.thumbs = 'thumb';
     $scope.count = 10;
 
-    $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
-
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
+    $scope.go = function(data) { $location.path('/dashboard/nodes/' + data.name); };
 
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
@@ -1256,7 +1421,7 @@ app.controller('ListMinionsCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getMinions().success(function(data) {
         $scope.loading = false;
@@ -1284,7 +1449,7 @@ app.controller('ListMinionsCtrl', [
       }).error($scope.handleError);
     }
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);
@@ -1328,12 +1493,7 @@ app.controller('ListPodsCtrl', [
     $scope.sortable = ['pod', 'ip', 'status'];
     $scope.count = 10;
 
-    $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
-
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
+    $scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
 
     var orderedPodNames = [];
 
@@ -1346,7 +1506,7 @@ app.controller('ListPodsCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getPods().success(angular.bind(this, function(data) {
         $scope.loading = false;
@@ -1421,7 +1581,7 @@ app.controller('ListPodsCtrl', [
       return _.indexOf(orderedPodNames, name) + 1;
     };
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);
@@ -1464,12 +1624,7 @@ app.controller('ListReplicationControllersCtrl', [
     $scope.thumbs = 'thumb';
     $scope.count = 10;
 
-    $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
-
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
+    $scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };
 
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
@@ -1478,7 +1633,7 @@ app.controller('ListReplicationControllersCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getReplicationControllers().success(function(data) {
         $scope.loading = false;
@@ -1523,7 +1678,7 @@ app.controller('ListReplicationControllersCtrl', [
       }).error($scope.handleError);
     }
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);
@@ -1539,7 +1694,8 @@ app.controller('ListServicesCtrl', [
   '$routeParams',
   'k8sApi',
   '$rootScope',
-  function($scope, $interval, $routeParams, k8sApi, $rootScope) {
+  '$location',
+  function($scope, $interval, $routeParams, k8sApi, $rootScope, $location) {
     'use strict';
     $scope.doTheBack = function() { window.history.back(); };
 
@@ -1561,6 +1717,8 @@ app.controller('ListServicesCtrl', [
     $scope.sortable = ['name', 'ip', 'port'];
     $scope.count = 10;
 
+    $scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
+
     $scope.content = [];
 
     $rootScope.doTheBack = $scope.doTheBack;
@@ -1570,9 +1728,9 @@ app.controller('ListServicesCtrl', [
       $scope_.loading = false;
     };
 
-    $scope.getData = function(dataId) {
+    $scope.getData = function() {
       $scope.loading = true;
-      k8sApi.getServices(dataId).success(angular.bind(this, function(data) {
+      k8sApi.getServices().success(angular.bind(this, function(data) {
         $scope.services = data;
         $scope.loading = false;
 
@@ -1635,7 +1793,41 @@ app.controller('ListServicesCtrl', [
       })).error($scope.handleError);
     };
 
-    $scope.getData($routeParams.serviceId);
+    $scope.getData();
+  }
+]);
+
+/**=========================================================
+ * Module: Nodes
+ * Visualizer for nodes
+ =========================================================*/
+
+app.controller('NodeCtrl', [
+  '$scope',
+  '$interval',
+  '$routeParams',
+  'k8sApi',
+  '$rootScope',
+  function($scope, $interval, $routeParams, k8sApi, $rootScope) {
+    'use strict';
+    $scope.doTheBack = function() { window.history.back(); };
+
+    $rootScope.doTheBack = $scope.doTheBack;
+
+    $scope.handleError = function(data, status, headers, config) {
+      console.log("Error (" + status + "): " + data);
+      $scope_.loading = false;
+    };
+
+    $scope.handleNode = function(nodeId) {
+      $scope.loading = true;
+      k8sApi.getNodes(nodeId).success(angular.bind(this, function(data) {
+        $scope.node = data;
+        $scope.loading = false;
+      })).error($scope.handleError);
+    };
+
+    $scope.handleNode($routeParams.nodeId);
   }
 ]);
 
@@ -1703,6 +1895,9 @@ app.controller('ReplicationControllerCtrl', [
     $scope.controller.k8sApi = k8sApi;
     $scope.controller.scope = $scope;
     $scope.controller.getData($routeParams.replicationControllerId);
+
+    $scope.doTheBack = function() { window.history.back(); };
+
   }
 ]);
 
@@ -1738,12 +1933,8 @@ app.controller('ServiceCtrl', [
     $scope.controller.scope = $scope;
     $scope.controller.getData($routeParams.serviceId);
 
-    $scope.go = function(d) { $location.path('/dashboard/services/' + d.id); }
+    $scope.doTheBack = function() { window.history.back(); };
 
-                $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/services/' + d.id);
-      e.stopPropagation();
-    }
   }
 ]);
 
@@ -2111,8 +2302,10 @@ app.controller('ServiceCtrl', [
                  '$scope',
                  '$filter',
                  '$location',
+                 'menu',
                  '$rootScope',
-                 function($scope, $filter, $location, $rootScope) {
+                 function($scope, $filter, $location, menu, $rootScope) {
+                  $scope.menu = menu;
                    $scope.$watch('page', function(newValue, oldValue) {
                      if (typeof newValue !== 'undefined') {
                        $location.path(newValue);
@@ -2122,12 +2315,12 @@ app.controller('ServiceCtrl', [
                    $scope.subpages = [
                      {
                        category: 'dashboard',
-                       name: 'Groups',
+                       name: 'Explore',
                        value: '/dashboard/groups/type/selector/',
                        id: 'groupsView'
                      },
                      {category: 'dashboard', name: 'Pods', value: '/dashboard/pods', id: 'podsView'},
-                     {category: 'dashboard', name: 'Minions', value: '/dashboard/minions', id: 'minionsView'},
+                     {category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes', id: 'minionsView'},
                      {
                        category: 'dashboard',
                        name: 'Replication Controllers',
@@ -2162,8 +2355,10 @@ app.controller('ServiceCtrl', [
             filters: '=',
             customClass: '=customClass',
             thumbs: '=',
-            count: '='
+            count: '=',
+            doSelect: '&onSelect'
           },
+          transclude: true,
           controller: ["$scope", "$filter", "$window", "$location", function($scope, $filter, $window, $location) {
             var orderBy = $filter('orderBy');
             $scope.currentPage = 0;
@@ -2175,13 +2370,6 @@ app.controller('ServiceCtrl', [
                 return false;
               }
             };
-            $scope.go = function(d) {
-              if (d.pod) {
-                $location.path('/dashboard/pods/' + d.pod);
-              } else if (d.name) {
-                $location.path('/dashboard/services/' + d.name);
-              }
-            };
             $scope.order = function(predicate, reverse) {
               $scope.content = orderBy($scope.content, predicate, reverse);
               $scope.predicate = predicate;
@@ -2189,6 +2377,7 @@ app.controller('ServiceCtrl', [
             $scope.order($scope.sortable[0], false);
             $scope.getNumber = function(num) { return new Array(num); };
             $scope.goToPage = function(page) { $scope.currentPage = page; };
+            $scope.showMore = function() { return angular.isDefined($scope.moreClick);}
           }],
           templateUrl: 'views/partials/md-table.tmpl.html'
         };

www/app/components/README.md

@@ -1,128 +0,0 @@
-Components
-==========
-
-A tab in the Kubernetes UI with its set of visualizations is referred to as a *component*. Components are separated from the UI chrome and base data providers to simplify the development of new visualizations. This document provides reference for creation and modification of components.
-
-Each component has its own directory, which contains a manifest file, HTML views, Angular providers, CSS, Less and other assets. Below is the recommended directory structure for a component.
-```
-foo_component
-├── config
-├── css
-├── img
-├── js
-│   └── modules
-│       ├── controllers
-│       ├── directives
-│       └── services
-├── less
-├── pages
-├── views
-│   └── partials
-└── manifest.json
-```
-
-###Manifest file
-
-The JSON-formatted manifest file, named ```manifest.json```, is located at the root of a component. Based on the component directory name and the contents of the manifest, the Kubernetes UI automatically adds a tab to the chrome, a dependency on the component's AngularJS module to main AngularJS app and Angular routes for the component.
-
-For example, consider a manifest file at ```master/components/foo_component/manifest.json```:
-```
-{
-  "routes": [
-    {
-      "url": "/",
-      "templateUrl": "/components/foo_component/pages/home.html"
-    },
-    {
-      "url": "/kittens",
-      "templateUrl": "/components/foo_component/pages/kittens.html",
-      "css": "/components/foo_component/css/kittens.css"
-    }
-  ]
-}
-```
-
-From the name of the component directory, the Kubernetes UI
-* creates a tab called "Foo Component",
-* adds Angular module ```kubernetesApp.components.fooComponent``` to the dependencies of ```kubernetesApp```, and
-* defines Angular routes ```/foo_component/``` and ```/foo_component/kittens```.
-
-Every tab links to ```/``` relative to its component, so it is important to always define a ```/``` route.
-
-###Source files
-In general, all files located in ```master/components/<component>``` are copied to ```app/components/<component>/``` on each gulp build. This includes (but is not limited to) HTML views, CSS and images. Exceptions to this copy are the ```config``` and ```less``` directories as well as all ```.js``` files.
-
-The sections below describe how the exceptions are built into the UI.
-
-####JavaScript
-All JavaScript files located in the ```master/components/<component>/js``` are uglified and concatenated together with the rest of the UI's JavaScript. Once aggregated, the JavaScript file is minified and written to ```app/assets/js/app.js```.
-
-####Configuration
-
-Similar to the [UI-wide configuration](../../README.md#configuration), components can define different configuration for each environment. The gulp task creates the constant ```ENV``` under the ```kubernetesApp.config``` module for configuration, which is an object with a property for the root UI and each component.
-
-For example, a configuration for the ```development``` environment specific to ```foo_component``` would be located at ```master/components/foo_component/config/development.json```. Such a component would access its ```development.json``` configuration verbatim at ```ENV.foo_component```:
-```
-angular.module('kubernetesApp.components.fooComponent', ['kubernetesApp.config'])
-    .provider('foo', ...)
-    .config(['fooProvider', 'ENV', function(fooProvider, ENV) {
-      // Configure fooProvider using ENV['foo_component'].
-    });
-```
-
-####Less
-
-Like JavaScript, the component's Less files are built into one monolithic CSS file. All top-level Less files located at ```master/components/<component>/less/*.less``` are imported into the main UI's Less file. The result is then minified and copied to ```app/assets/css/app.css```.
-
-Sub-directories of this path are watched for changes, but not directly imported. This is useful for defining common colors, mixins and other functions or variables used by the top-level Less files.
-
-###Appendix
-
-####Manifest schema
-
-```
-{
-  "$schema": "http://json-schema.org/draft-04/schema#",
-  "type": "object",
-  "properties": {
-    "description": {
-      "type": "string",
-      "description": "Very brief summary of the component. Use a README.md file for detailed descriptions."
-    },
-    "routes": {
-      "type": "array",
-      "description": "Angular routes for the component.",
-      "items": {
-        "type": "object",
-        "properties": {
-          "description": {
-            "type": "string",
-            "description": "Short description of the route."
-          },
-          "url": {
-            "type": "string",
-            "description": "Route location relative to '/<component>'."
-          },
-          "templateUrl": {
-            "type": "string",
-            "description": "Absolute location of the HTML template."
-          },
-          "css": {
-            "type": "string",
-            "description": "Absolute location of CSS to use with this route."
-          }
-        },
-        "required": ["url", "templateUrl"]
-      },
-      "minItems": 1
-    }
-  },
-  "required": ["routes"]
-}
-```
-
-Content available under the [CC-By 3.0
-license](http://creativecommons.org/licenses/by/3.0/)
-
-
-[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/app/components/README.md?pixel)]()

www/app/components/dashboard/README.md

@@ -1,4 +0,0 @@
-Dashboard Component for Kubernetes WebUI
-
-
-[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/app/components/dashboard/README.md?pixel)]()

www/app/components/dashboard/manifest.json

@@ -1,5 +1,5 @@
 {
-  "description": "The basic kubernetes ui dashboard... ",
+  "description": "The basic Kubernetes UI dashboard... ",
   "routes": [
     {
       "description": "Dashboard visualization.",
@@ -32,8 +32,8 @@
       "templateUrl": "components/dashboard/views/listEvents.html"
     },
     {
-      "description": "Minions",
-      "url": "/minions",
+      "description": "Nodes",
+      "url": "/nodes",
       "templateUrl": "components/dashboard/views/listMinions.html"
     },
     {
@@ -46,6 +46,11 @@
       "url": "/services/:serviceId",
       "templateUrl": "components/dashboard/views/service.html"
     },
+    {
+      "description": "Node",
+      "url": "/nodes/:nodeId",
+      "templateUrl": "components/dashboard/views/node.html"
+    },
     {
       "description": "Explore",
       "url": "/groups/:grouping*?/selector/:selector*?",

www/app/components/dashboard/pages/header.html

@@ -3,7 +3,13 @@
    <div class="md-toolbar-tools">
       <div layout="row" flex class="fill-height">
          <div class="md-toolbar-item md-breadcrumb"></div>
-         <span style="display: inline-block;">Kubernetes</span>
+         <span ng-if="menu.currentPage.name !== menu.currentSection.name">
+         <span hide-sm hide-md><a href="#{{menu.currentSection.url}}">{{menu.currentSection.name}}</a></span>
+         <span class="menu-separator-icon" style="padding: 0 10px;" hide-sm hide-md>
+         <img style="height: 12px;" src="assets/img/docArrow.png" alt="" aria-hidden="true">
+         </span>
+         </span>
+         <span style="display: inline-block;">{{(menu.currentPage | humanizeDoc) || 'Kubernetes' }}</span>
          <span flex></span>
          <div class="md-toolbar-item md-tools" layout="row">
             <div layout="column" class="selectSubPages">

www/app/components/dashboard/test/controllers/header.spec.js

@@ -0,0 +1 @@
+"use strict";describe("header controller",function(){beforeEach(module("kubernetesApp.components.dashboard")),beforeEach(inject(function(e,t,o){this.rootScope=e,this.scope=e.$new(),this.location=t,spyOn(this.location,"path"),this.controller=o,this.ctrl=this.controller("HeaderCtrl",{$scope:this.scope}),this.scope.$apply()})),describe("subPages",function(){it("is defined",function(){expect(this.scope.subPages).not.toBeUndefined()}),it("is an array",function(){expect(Array.isArray(this.scope.subPages)).toBeTruthy()}),it("is not empty",function(){expect(this.scope.subPages.length).toBeGreaterThan(0)}),describe("each subPage",function(){it("has a category",function(){this.scope.subPages.forEach(function(e){expect(e.category).toBeTruthy()})}),it("has a name",function(){this.scope.subPages.forEach(function(e){expect(e.name).toBeTruthy()})}),it("has a value",function(){this.scope.subPages.forEach(function(e){expect(e.value).toBeTruthy()})})})}),describe("Pages",function(){it("does not change location on first detected change",function(){expect(this.location.path).not.toHaveBeenCalled()}),it("changes location on second detected change",function(){var e=this;this.scope.$apply(function(){e.scope.Pages="test_Pages"}),expect(this.location.path).toHaveBeenCalledWith("test_Pages")})})});

www/app/components/dashboard/views/listMinions.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListMinionsCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/app/components/dashboard/views/listPods.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListPodsCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/app/components/dashboard/views/listReplicationControllers.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListReplicationControllersCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/app/components/dashboard/views/listServices.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListServicesCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/app/components/dashboard/views/node.html

@@ -0,0 +1,61 @@
+<div dashboard-header></div>
+<div class="dashboard">
+  <div ng-controller="NodeCtrl" layout="column" class="body-wrapper node">
+    <div class="detail">
+
+      <div class="back">
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
+      </div>
+
+
+      <div class="heading">
+        <span class="label">Name:</span>
+        <span>{{node.id}}</span>
+      </div>
+
+
+      <table>
+        <tbody>
+          <tr>
+            <td class="name">Labels</td>
+            <td class="value">
+              <div ng-repeat="(label, value) in node.labels">
+                {{label}}: {{value}}
+              </div>
+            </td>
+          </tr>
+
+          <tr>
+            <td class="name">Created</td>
+            <td class="value">
+              {{node.creationTimestamp | date:'medium'}}
+            </td>
+          </tr>
+
+          <tr>
+            <td class="name">Host IP</td>
+            <td class="value">
+              {{node.hostIP}}
+            </td>
+          </tr>
+
+          <tr>
+            <td class="name">System Info</td>
+            <td class="value">
+              <div ng-repeat="(label, value) in node.status.nodeInfo">
+                {{label}}: {{value}}
+              </div>
+            </td>
+          </tr>
+
+
+        </tbody>
+      </table>
+
+
+
+    </div>
+  </div>
+</div>
+<div dashboard-footer></div>
+

www/app/components/dashboard/views/pod.html

@@ -4,10 +4,7 @@
     <div class="detail">
 
       <div class="back">
-        <div class="nav-back">
-          <a ng-click="doTheBack()">BACK</a>
-        </div>
-        <!-- <md-button class="md-default-theme" ng-click="doTheBack">BACK</md-button> -->
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
       </div>
 
       <div class="heading">

www/app/components/dashboard/views/replication.html

@@ -5,7 +5,7 @@
   <div class="detail">
 
       <div class="back">
-        <md-button class="md-default-theme" ng-href="#/dashboard/replicationcontrollers">‹ BACK</md-button>
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
       </div>
 
       <div class="heading">

www/app/components/dashboard/views/service.html

@@ -5,7 +5,7 @@
     <div class="detail">
 
       <div class="back">
-        <md-button class="md-default-theme" ng-href="#/dashboard/services">‹ BACK</md-button>
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
       </div>
 
       <div class="heading">

www/app/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="assets/css/app.css" >
   <link rel="shortcut icon" href="assets/img/icons/favicon.png" type="image/vnd.microsoft.icon" />
 </head>
-<body layout="row">
+<body layout="row" ng-controller="PageCtrl">
   <md-sidenav layout="column"
               md-is-locked-open="shouldLockOpen()"
               style="overflow: hidden; display: flex;"

www/app/views/partials/md-table.tmpl.html

@@ -2,10 +2,10 @@
   <thead>
     <tr class="md-table-headers-row">
       <th class="md-table-header" ng-repeat="h in headers">
-        <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="https://google.github.io/material-design-icons/navigation/svg/ic_arrow_drop_up_24px.svg"></span><span  class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="https://google.github.io/material-design-icons/navigation/svg/ic_arrow_drop_down_24px.svg"></span></a>
+        <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span><span  class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span></a>
         <span ng-if="!handleSort(h.field)">{{h.name}}</span>
       </th>
-      <th class="md-table-header"></th>
+      <th class="md-table-header" ng-show="showMore()"></th>
     </tr>
   </thead>
   <tbody>
@@ -13,11 +13,11 @@
       <td ng-repeat="h in headers" ng-if="h.field == thumbs" class="md-table-thumbs">
         <div ng-if="h.field == thumbs" style="background-image:url({{c.thumb}})"></div>
       </td>
-      <td class="md-table-content" ng-click="go(c)" ng-repeat="h in headers" ng-class="customClass[h.field]" ng-if="h.field != thumbs">
+      <td class="md-table-content" ng-click="doSelect({data:c})" ng-repeat="h in headers" ng-class="customClass[h.field]" ng-if="h.field != thumbs">
         {{c[h.field]}}
       </td>
-      <td class="md-table-td-more">
-        <md-button aria-label="More">
+      <td class="md-table-td-more" ng-show="showMore()">
+        <md-button aria-label="More" ng-click="moreClick(c, $event)">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
           </svg>
@@ -31,7 +31,7 @@
   <span flex></span>
   <span ng-show="nbOfPages() > 1">
     <md-button aria-label="Back" class="md-table-footer-item" ng-disabled="currentPage==0" ng-click="currentPage=currentPage-1">
-      <img src="//google.github.io/material-design-icons/hardware/svg/ic_keyboard_arrow_left_24px.svg">
+      <img src="assets/img/ic_keyboard_arrow_left_24px.svg">
     </md-button>
     <a href ng-repeat="i in getNumber(nbOfPages()) track by $index" >
       <md-button aria-label="Next" class="md-primary md-table-footer-item" ng-click="goToPage($index)">
@@ -39,7 +39,7 @@
       </md-button>
     </a>
     <md-button aria-label="Jump" class="md-table-footer-item" ng-disabled="currentPage==nbOfPages()-1" ng-click="currentPage=currentPage+1">
-      <img src="//google.github.io/material-design-icons/hardware/svg/ic_keyboard_arrow_right_24px.svg">
+      <img src="assets/img/ic_keyboard_arrow_right_24px.svg">
     </md-button>
   </span>
 </div>

www/master/components/dashboard/js/modules/controllers/header.js

@@ -18,7 +18,7 @@ angular.module('kubernetesApp.components.dashboard', [])
         $scope.subPages = [
           {category: 'dashboard', name: 'Explore', value: '/dashboard/groups/type/selector/'},
           {category: 'dashboard', name: 'Pods', value: '/dashboard/pods'},
-          {category: 'dashboard', name: 'Minions', value: '/dashboard/minions'},
+          {category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes'},
           {category: 'dashboard', name: 'Replication Controllers', value: '/dashboard/replicationcontrollers'},
           {category: 'dashboard', name: 'Services', value: '/dashboard/services'},
           {category: 'dashboard', name: 'Events', value: '/dashboard/events'}

www/master/components/dashboard/js/modules/controllers/listEventsController.js

@@ -39,11 +39,6 @@ app.controller('ListEventsCtrl', [
 
     $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
 
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
-
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
       $scope.loading = false;
@@ -51,7 +46,7 @@ app.controller('ListEventsCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getEvents().success(function(data) {
         $scope.loading = false;
@@ -79,7 +74,7 @@ app.controller('ListEventsCtrl', [
       }).error($scope.handleError);
     }
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);

www/master/components/dashboard/js/modules/controllers/listMinionsController.js

@@ -28,12 +28,7 @@ app.controller('ListMinionsCtrl', [
     $scope.thumbs = 'thumb';
     $scope.count = 10;
 
-    $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
-
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
+    $scope.go = function(data) { $location.path('/dashboard/nodes/' + data.name); };
 
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
@@ -42,7 +37,7 @@ app.controller('ListMinionsCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getMinions().success(function(data) {
         $scope.loading = false;
@@ -70,7 +65,7 @@ app.controller('ListMinionsCtrl', [
       }).error($scope.handleError);
     }
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);

www/master/components/dashboard/js/modules/controllers/listPodsController.js

@@ -37,12 +37,7 @@ app.controller('ListPodsCtrl', [
     $scope.sortable = ['pod', 'ip', 'status'];
     $scope.count = 10;
 
-    $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
-
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
+    $scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
 
     var orderedPodNames = [];
 
@@ -55,7 +50,7 @@ app.controller('ListPodsCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getPods().success(angular.bind(this, function(data) {
         $scope.loading = false;
@@ -130,7 +125,7 @@ app.controller('ListPodsCtrl', [
       return _.indexOf(orderedPodNames, name) + 1;
     };
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);

www/master/components/dashboard/js/modules/controllers/listReplicationControllersController.js

@@ -36,12 +36,7 @@ app.controller('ListReplicationControllersCtrl', [
     $scope.thumbs = 'thumb';
     $scope.count = 10;
 
-    $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
-
-    $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/pods/' + d.id);
-      e.stopPropagation();
-    };
+    $scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };
 
     function handleError(data, status, headers, config) {
       console.log("Error (" + status + "): " + data);
@@ -50,7 +45,7 @@ app.controller('ListReplicationControllersCtrl', [
 
     $scope.content = [];
 
-    function getData(dataId) {
+    function getData() {
       $scope.loading = true;
       k8sApi.getReplicationControllers().success(function(data) {
         $scope.loading = false;
@@ -95,7 +90,7 @@ app.controller('ListReplicationControllersCtrl', [
       }).error($scope.handleError);
     }
 
-    getData($routeParams.serviceId);
+    getData();
 
   }
 ]);

www/master/components/dashboard/js/modules/controllers/listServicesController.js

@@ -9,7 +9,8 @@ app.controller('ListServicesCtrl', [
   '$routeParams',
   'k8sApi',
   '$rootScope',
-  function($scope, $interval, $routeParams, k8sApi, $rootScope) {
+  '$location',
+  function($scope, $interval, $routeParams, k8sApi, $rootScope, $location) {
     'use strict';
     $scope.doTheBack = function() { window.history.back(); };
 
@@ -31,6 +32,8 @@ app.controller('ListServicesCtrl', [
     $scope.sortable = ['name', 'ip', 'port'];
     $scope.count = 10;
 
+    $scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
+
     $scope.content = [];
 
     $rootScope.doTheBack = $scope.doTheBack;
@@ -40,9 +43,9 @@ app.controller('ListServicesCtrl', [
       $scope_.loading = false;
     };
 
-    $scope.getData = function(dataId) {
+    $scope.getData = function() {
       $scope.loading = true;
-      k8sApi.getServices(dataId).success(angular.bind(this, function(data) {
+      k8sApi.getServices().success(angular.bind(this, function(data) {
         $scope.services = data;
         $scope.loading = false;
 
@@ -105,6 +108,6 @@ app.controller('ListServicesCtrl', [
       })).error($scope.handleError);
     };
 
-    $scope.getData($routeParams.serviceId);
+    $scope.getData();
   }
 ]);

www/master/components/dashboard/js/modules/controllers/nodeController.js

@@ -0,0 +1,33 @@
+/**=========================================================
+ * Module: Nodes
+ * Visualizer for nodes
+ =========================================================*/
+
+app.controller('NodeCtrl', [
+  '$scope',
+  '$interval',
+  '$routeParams',
+  'k8sApi',
+  '$rootScope',
+  function($scope, $interval, $routeParams, k8sApi, $rootScope) {
+    'use strict';
+    $scope.doTheBack = function() { window.history.back(); };
+
+    $rootScope.doTheBack = $scope.doTheBack;
+
+    $scope.handleError = function(data, status, headers, config) {
+      console.log("Error (" + status + "): " + data);
+      $scope_.loading = false;
+    };
+
+    $scope.handleNode = function(nodeId) {
+      $scope.loading = true;
+      k8sApi.getNodes(nodeId).success(angular.bind(this, function(data) {
+        $scope.node = data;
+        $scope.loading = false;
+      })).error($scope.handleError);
+    };
+
+    $scope.handleNode($routeParams.nodeId);
+  }
+]);

www/master/components/dashboard/js/modules/controllers/replicationController.js

@@ -28,5 +28,8 @@ app.controller('ReplicationControllerCtrl', [
     $scope.controller.k8sApi = k8sApi;
     $scope.controller.scope = $scope;
     $scope.controller.getData($routeParams.replicationControllerId);
+
+    $scope.doTheBack = function() { window.history.back(); };
+
   }
 ]);

www/master/components/dashboard/js/modules/controllers/serviceController.js

@@ -30,11 +30,7 @@ app.controller('ServiceCtrl', [
     $scope.controller.scope = $scope;
     $scope.controller.getData($routeParams.serviceId);
 
-    $scope.go = function(d) { $location.path('/dashboard/services/' + d.id); }
+    $scope.doTheBack = function() { window.history.back(); };
 
-                $scope.moreClick = function(d, e) {
-      $location.path('/dashboard/services/' + d.id);
-      e.stopPropagation();
-    }
   }
 ]);

www/master/components/dashboard/js/modules/directives/dashboard.js

@@ -15,8 +15,10 @@
                  '$scope',
                  '$filter',
                  '$location',
+                 'menu',
                  '$rootScope',
-                 function($scope, $filter, $location, $rootScope) {
+                 function($scope, $filter, $location, menu, $rootScope) {
+                  $scope.menu = menu;
                    $scope.$watch('page', function(newValue, oldValue) {
                      if (typeof newValue !== 'undefined') {
                        $location.path(newValue);
@@ -26,12 +28,12 @@
                    $scope.subpages = [
                      {
                        category: 'dashboard',
-                       name: 'Groups',
+                       name: 'Explore',
                        value: '/dashboard/groups/type/selector/',
                        id: 'groupsView'
                      },
                      {category: 'dashboard', name: 'Pods', value: '/dashboard/pods', id: 'podsView'},
-                     {category: 'dashboard', name: 'Minions', value: '/dashboard/minions', id: 'minionsView'},
+                     {category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes', id: 'minionsView'},
                      {
                        category: 'dashboard',
                        name: 'Replication Controllers',
@@ -66,8 +68,10 @@
             filters: '=',
             customClass: '=customClass',
             thumbs: '=',
-            count: '='
+            count: '=',
+            doSelect: '&onSelect'
           },
+          transclude: true,
           controller: function($scope, $filter, $window, $location) {
             var orderBy = $filter('orderBy');
             $scope.currentPage = 0;
@@ -79,13 +83,6 @@
                 return false;
               }
             };
-            $scope.go = function(d) {
-              if (d.pod) {
-                $location.path('/dashboard/pods/' + d.pod);
-              } else if (d.name) {
-                $location.path('/dashboard/services/' + d.name);
-              }
-            };
             $scope.order = function(predicate, reverse) {
               $scope.content = orderBy($scope.content, predicate, reverse);
               $scope.predicate = predicate;
@@ -93,6 +90,7 @@
             $scope.order($scope.sortable[0], false);
             $scope.getNumber = function(num) { return new Array(num); };
             $scope.goToPage = function(page) { $scope.currentPage = page; };
+            $scope.showMore = function() { return angular.isDefined($scope.moreClick);}
           },
           templateUrl: 'views/partials/md-table.tmpl.html'
         };

www/master/components/dashboard/manifest.json

@@ -1,5 +1,5 @@
 {
-  "description": "The basic kubernetes ui dashboard... ",
+  "description": "The basic Kubernetes UI dashboard... ",
   "routes": [
     {
       "description": "Dashboard visualization.",
@@ -32,8 +32,8 @@
       "templateUrl": "components/dashboard/views/listEvents.html"
     },
     {
-      "description": "Minions",
-      "url": "/minions",
+      "description": "Nodes",
+      "url": "/nodes",
       "templateUrl": "components/dashboard/views/listMinions.html"
     },
     {
@@ -46,6 +46,11 @@
       "url": "/services/:serviceId",
       "templateUrl": "components/dashboard/views/service.html"
     },
+    {
+      "description": "Node",
+      "url": "/nodes/:nodeId",
+      "templateUrl": "components/dashboard/views/node.html"
+    },
     {
       "description": "Explore",
       "url": "/groups/:grouping*?/selector/:selector*?",

www/master/components/dashboard/pages/header.html

@@ -3,7 +3,13 @@
    <div class="md-toolbar-tools">
       <div layout="row" flex class="fill-height">
          <div class="md-toolbar-item md-breadcrumb"></div>
-         <span style="display: inline-block;">Kubernetes</span>
+         <span ng-if="menu.currentPage.name !== menu.currentSection.name">
+         <span hide-sm hide-md><a href="#{{menu.currentSection.url}}">{{menu.currentSection.name}}</a></span>
+         <span class="menu-separator-icon" style="padding: 0 10px;" hide-sm hide-md>
+         <img style="height: 12px;" src="assets/img/docArrow.png" alt="" aria-hidden="true">
+         </span>
+         </span>
+         <span style="display: inline-block;">{{(menu.currentPage | humanizeDoc) || 'Kubernetes' }}</span>
          <span flex></span>
          <div class="md-toolbar-item md-tools" layout="row">
             <div layout="column" class="selectSubPages">

www/master/components/dashboard/views/listMinions.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListMinionsCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/master/components/dashboard/views/listPods.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListPodsCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/master/components/dashboard/views/listReplicationControllers.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListReplicationControllersCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/master/components/dashboard/views/listServices.html

@@ -1,7 +1,7 @@
 <div dashboard-header></div>
 <div class="dashboard">
   <div ng-controller="ListServicesCtrl" style="padding:25px;" class="list-pods">
-  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table>
+  <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
   </div>
 </div>
 <div dashboard-footer></div>

www/master/components/dashboard/views/node.html

@@ -0,0 +1,61 @@
+<div dashboard-header></div>
+<div class="dashboard">
+  <div ng-controller="NodeCtrl" layout="column" class="body-wrapper node">
+    <div class="detail">
+
+      <div class="back">
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
+      </div>
+
+
+      <div class="heading">
+        <span class="label">Name:</span>
+        <span>{{node.id}}</span>
+      </div>
+
+
+      <table>
+        <tbody>
+          <tr>
+            <td class="name">Labels</td>
+            <td class="value">
+              <div ng-repeat="(label, value) in node.labels">
+                {{label}}: {{value}}
+              </div>
+            </td>
+          </tr>
+
+          <tr>
+            <td class="name">Created</td>
+            <td class="value">
+              {{node.creationTimestamp | date:'medium'}}
+            </td>
+          </tr>
+
+          <tr>
+            <td class="name">Host IP</td>
+            <td class="value">
+              {{node.hostIP}}
+            </td>
+          </tr>
+
+          <tr>
+            <td class="name">System Info</td>
+            <td class="value">
+              <div ng-repeat="(label, value) in node.status.nodeInfo">
+                {{label}}: {{value}}
+              </div>
+            </td>
+          </tr>
+
+
+        </tbody>
+      </table>
+
+
+
+    </div>
+  </div>
+</div>
+<div dashboard-footer></div>
+

www/master/components/dashboard/views/pod.html

@@ -4,10 +4,7 @@
     <div class="detail">
 
       <div class="back">
-        <div class="nav-back">
-          <a ng-click="doTheBack()">BACK</a>
-        </div>
-        <!-- <md-button class="md-default-theme" ng-click="doTheBack">BACK</md-button> -->
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
       </div>
 
       <div class="heading">

www/master/components/dashboard/views/replication.html

@@ -5,7 +5,7 @@
   <div class="detail">
 
       <div class="back">
-        <md-button class="md-default-theme" ng-href="#/dashboard/replicationcontrollers">‹ BACK</md-button>
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
       </div>
 
       <div class="heading">

www/master/components/dashboard/views/service.html

@@ -5,7 +5,7 @@
     <div class="detail">
 
       <div class="back">
-        <md-button class="md-default-theme" ng-href="#/dashboard/services">‹ BACK</md-button>
+        <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
       </div>
 
       <div class="heading">

www/master/gulpfile.js

@@ -105,7 +105,8 @@ var source = {
       '!components/**/config/*.*',
       '!master/shared/js/modules/config.js',
       '!components/*/less/*.*',
-      '!components/**/less/**/*.*'
+      '!components/**/less/**/*.*',
+      '!components/**/README.md'
     ],
     dest: 'components',
     watch: [

www/master/js/app.config.js

@@ -27,3 +27,5 @@ app.config([
         });
       }
     ]);
+
+app.value("sections", [{"name":"Dashboard","url":"/dashboard","type":"link","templateUrl":"/components/dashboard/pages/home.html"},{"name":"Dashboard","type":"heading","children":[{"name":"Dashboard","type":"toggle","url":"/dashboard","templateUrl":"/components/dashboard/pages/home.html","pages":[{"name":"Pods","url":"/dashboard/pods","templateUrl":"/components/dashboard/views/listPods.html","type":"link"},{"name":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"/components/dashboard/views/listPodsVisualizer.html","type":"link"},{"name":"Services","url":"/dashboard/services","templateUrl":"/components/dashboard/views/listServices.html","type":"link"},{"name":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"/components/dashboard/views/listReplicationControllers.html","type":"link"},{"name":"Events","url":"/dashboard/events","templateUrl":"/components/dashboard/views/listEvents.html","type":"link"},{"name":"Nodes","url":"/dashboard/nodes","templateUrl":"/components/dashboard/views/listMinions.html","type":"link"},{"name":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"/components/dashboard/views/replication.html","type":"link"},{"name":"Service","url":"/dashboard/services/:serviceId","templateUrl":"/components/dashboard/views/service.html","type":"link"},{"name": "Node","url": "/dashboard/nodes/:nodeId","templateUrl": "/components/dashboard/views/node.html","type": "link"},{"name":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"/components/dashboard/views/groups.html","type":"link"},{"name":"Pod","url":"/dashboard/pods/:podId","templateUrl":"/components/dashboard/views/pod.html","type":"link"}]}]},{"name":"Graph","url":"/graph","type":"link","templateUrl":"/components/graph/pages/home.html"},{"name":"Graph","url":"/graph/inspect","type":"link","templateUrl":"/components/graph/pages/inspect.html","css":"/components/graph/css/show-details-table.css"},{"name":"Graph","type":"heading","children":[{"name":"Graph","type":"toggle","url":"/graph","templateUrl":"/components/graph/pages/home.html","pages":[{"name":"Test","url":"/graph/test","type":"link","templateUrl":"/components/graph/pages/home.html"}]}]}]);

www/master/js/app.init.js

@@ -14,3 +14,58 @@ var app = angular.module('kubernetesApp', [
   'kubernetesApp.services',
   'angular.filter'
 ].concat(componentNamespaces));
+
+app.factory('menu', [
+  '$location',
+  '$rootScope',
+  'sections',
+  '$route',
+  function($location, $rootScope, sections, $route) {
+
+    var self;
+
+    $rootScope.$on('$locationChangeSuccess', onLocationChange);
+
+    return self = {
+
+      sections: sections,
+
+      setSections: function(_sections) { this.sections = _sections; },
+      selectSection: function(section) { self.openedSection = section; },
+      toggleSelectSection: function(section) {
+        self.openedSection = (self.openedSection === section ? null : section);
+      },
+      isSectionSelected: function(section) { return self.openedSection === section; },
+      selectPage: function(section, page) {
+        self.currentSection = section;
+        self.currentPage = page;
+      },
+      isPageSelected: function(page) { return self.currentPage === page; }
+    };
+
+    function onLocationChange() {
+      var path = $route.current.originalPath;
+
+      var matchPage = function(section, page) {
+        if (path === page.url || path === (page.url + '/')) {
+          self.selectSection(section);
+          self.selectPage(section, page);
+        }
+      };
+
+      sections.forEach(function(section) {
+        if (section.children) {
+          section.children.forEach(function(childSection) {
+            if (childSection.pages) {
+              childSection.pages.forEach(function(page) { matchPage(childSection, page); });
+            }
+          });
+        } else if (section.pages) {
+          section.pages.forEach(function(page) { matchPage(section, page); });
+        } else if (section.type === 'link') {
+          matchPage(section, section);
+        }
+      });
+    }
+  }
+]);

www/master/js/sections.js

@@ -1 +1 @@
-app.constant("manifestRoutes", [{"description":"Dashboard visualization.","url":"/dashboard/","templateUrl":"components/dashboard/pages/home.html"},{"description":"Pods","url":"/dashboard/pods","templateUrl":"components/dashboard/views/listPods.html"},{"description":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"components/dashboard/views/listPodsVisualizer.html"},{"description":"Services","url":"/dashboard/services","templateUrl":"components/dashboard/views/listServices.html"},{"description":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"components/dashboard/views/listReplicationControllers.html"},{"description":"Events","url":"/dashboard/events","templateUrl":"components/dashboard/views/listEvents.html"},{"description":"Minions","url":"/dashboard/minions","templateUrl":"components/dashboard/views/listMinions.html"},{"description":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"components/dashboard/views/replication.html"},{"description":"Service","url":"/dashboard/services/:serviceId","templateUrl":"components/dashboard/views/service.html"},{"description":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"components/dashboard/views/groups.html"},{"description":"Pod","url":"/dashboard/pods/:podId","templateUrl":"components/dashboard/views/pod.html"}]);
+app.constant("manifestRoutes", [{"description":"Dashboard visualization.","url":"/dashboard/","templateUrl":"components/dashboard/pages/home.html"},{"description":"Pods","url":"/dashboard/pods","templateUrl":"components/dashboard/views/listPods.html"},{"description":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"components/dashboard/views/listPodsVisualizer.html"},{"description":"Services","url":"/dashboard/services","templateUrl":"components/dashboard/views/listServices.html"},{"description":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"components/dashboard/views/listReplicationControllers.html"},{"description":"Events","url":"/dashboard/events","templateUrl":"components/dashboard/views/listEvents.html"},{"description":"Nodes","url":"/dashboard/nodes","templateUrl":"components/dashboard/views/listMinions.html"},{"description":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"components/dashboard/views/replication.html"},{"description":"Service","url":"/dashboard/services/:serviceId","templateUrl":"components/dashboard/views/service.html"},{"description":"Node","url":"/dashboard/nodes/:nodeId","templateUrl":"components/dashboard/views/node.html"},{"description":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"components/dashboard/views/groups.html"},{"description":"Pod","url":"/dashboard/pods/:podId","templateUrl":"components/dashboard/views/pod.html"}]);

www/master/less/app/base.less

@@ -8,7 +8,7 @@
 .nav-back {
   /* :before */
   /* content: ""; */
-  background: url('assets/img/icons/arrow-back.png');
+  // background: url('../img/arrow-back.png');
   background-size: 14px 14px;
   background-repeat: no-repeat;
   display: block;
@@ -251,7 +251,7 @@ md-select-menu {
   text-transform: none;
 }
 .md-button-toggle .md-toggle-icon {
-  background: transparent url(assets/img/icons/list_control_down.png) no-repeat center center;
+  background: transparent url(../img/icons/list_control_down.png) no-repeat center center;
   background-size: 100% auto;
   display: inline-block;
   height: 24px;

www/master/shared/js/modules/controllers/home-page.js

@@ -0,0 +1,115 @@
+/**=========================================================
+ * Module: home-page.js
+ * Page Controller
+ =========================================================*/
+
+app.controller('PageCtrl', [
+  '$scope',
+  '$timeout',
+  '$mdSidenav',
+  'menu',
+  '$rootScope',
+  function($scope, $timeout, $mdSidenav, menu, $rootScope) {
+  $scope.menu = menu;
+
+  $scope.path = path;
+  $scope.goHome = goHome;
+  $scope.openMenu = openMenu;
+  $rootScope.openMenu = openMenu;
+  $scope.closeMenu = closeMenu;
+  $scope.isSectionSelected = isSectionSelected;
+
+  $rootScope.$on('$locationChangeSuccess', openPage);
+
+  // Methods used by menuLink and menuToggle directives
+  this.isOpen = isOpen;
+  this.isSelected = isSelected;
+  this.toggleOpen = toggleOpen;
+  this.shouldLockOpen = shouldLockOpen;
+  $scope.toggleKubernetesUiMenu = toggleKubernetesUiMenu;
+
+  var mainContentArea = document.querySelector("[role='main']");
+  var kubernetesUiMenu = document.querySelector("[role='kubernetes-ui-menu']");
+
+  // *********************
+  // Internal methods
+  // *********************
+
+  var _t = false;
+
+  $scope.showKubernetesUiMenu = false;
+
+  function shouldLockOpen() {
+    return _t;
+  }
+
+  function toggleKubernetesUiMenu() {
+    $scope.showKubernetesUiMenu = !$scope.showKubernetesUiMenu;
+  }
+
+  function closeMenu() {
+    $timeout(function() {
+      $mdSidenav('left').close();
+    });
+  }
+
+  function openMenu() {
+    $timeout(function() {
+      _t = !$mdSidenav('left').isOpen();
+      $mdSidenav('left').toggle();
+    });
+  }
+
+  function path() {
+    return $location.path();
+  }
+
+  function goHome($event) {
+    menu.selectPage(null, null);
+    $location.path( '/' );
+  }
+
+  function openPage() {
+    $scope.closeMenu();
+    mainContentArea.focus();
+  }
+
+  function isSelected(page) {
+    return menu.isPageSelected(page);
+  }
+
+  function isSectionSelected(section) {
+    var selected = false;
+    var openedSection = menu.openedSection;
+    if(openedSection === section){
+      selected = true;
+    }
+    else if(section.children) {
+      section.children.forEach(function(childSection) {
+        if(childSection === openedSection){
+          selected = true;
+        }
+      });
+    }
+    return selected;
+  }
+
+  function isOpen(section) {
+    return menu.isSectionSelected(section);
+  }
+
+  function toggleOpen(section) {
+    menu.toggleSelectSection(section);
+  }
+
+  }
+]).filter('humanizeDoc', function() {
+  return function(doc) {
+    if (!doc) return;
+    if (doc.type === 'directive') {
+      return doc.name.replace(/([A-Z])/g, function($1) {
+        return '-'+$1.toLowerCase();
+      });
+    }
+    return doc.label || doc.name;
+  }; });

www/master/shared/js/modules/services/k8sApiService.js

@@ -21,7 +21,9 @@ app.provider('k8sApi',
 
                  api.getPods = function(query) { return _get($http, urlBase + '/pods', query); };
 
-                 api.getMinions = function(query) { return _get($http, urlBase + '/minions', query); };
+                 api.getMinions = function(query) { return _get($http, urlBase + '/nodes', query); };
+
+                 api.getNodes = api.getMinions;
 
                  api.getServices = function(query) { return _get($http, urlBase + '/services', query); };