Restore WebUI breadcrumbs

- Update paths to svg images - Restore sections concept - Tested with local cluster
nikhiljindal · May 16, 2015 · 75d062b · 75d062b
1 parent 9674956
commit 75d062b
Show file tree

Hide file tree

Showing 23 changed files with 1,013 additions and 334 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,6 +53,6 @@ network_closure.sh
 
 # Web UI
 www/master/node_modules/
-
+www/master/npm-debug.log
 # Karma output
 www/test_out
diff --git a/pkg/ui/datafile.go b/pkg/ui/datafile.go
diff --git a/www/app/assets/css/app.css b/www/app/assets/css/app.css
@@ -7,7 +7,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;
@@ -219,7 +219,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;

diff --git a/www/app/assets/img/ic_arrow_drop_down_24px.svg b/www/app/assets/img/ic_arrow_drop_down_24px.svg
diff --git a/www/app/assets/img/ic_arrow_drop_up_24px.svg b/www/app/assets/img/ic_arrow_drop_up_24px.svg
diff --git a/www/app/assets/img/ic_keyboard_arrow_left_24px.svg b/www/app/assets/img/ic_keyboard_arrow_left_24px.svg
diff --git a/www/app/assets/img/ic_keyboard_arrow_right_24px.svg b/www/app/assets/img/ic_keyboard_arrow_right_24px.svg
diff --git a/www/app/assets/js/app.js b/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',
+  function($location, $rootScope, sections) {
+
+    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) {
+        page && page.url && $location.path(page.url);
+        self.currentSection = section;
+        self.currentPage = page;
+      },
+      isPageSelected: function(page) { return self.currentPage === page; }
+    };
+
+    function onLocationChange() {
+      var path = $location.path();
+
+      var matchPage = function(section, page) {
+        if (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/minions","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":"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/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"}]);
 
 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
@@ -2111,8 +2284,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);
@@ -2127,7 +2302,7 @@ app.controller('ServiceCtrl', [
                        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/minions', id: 'minionsView'},
                      {
                        category: 'dashboard',
                        name: 'Replication Controllers',

diff --git a/www/app/components/README.md b/www/app/components/README.md
@@ -125,4 +125,4 @@ 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)]()
+[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/components/README.md?pixel)]()
diff --git a/www/app/components/dashboard/README.md b/www/app/components/dashboard/README.md
@@ -1,4 +1,4 @@
 Dashboard Component for Kubernetes WebUI
 
 
-[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/app/components/dashboard/README.md?pixel)]()
+[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/components/dashboard/README.md?pixel)]()
diff --git a/www/app/components/dashboard/manifest.json b/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,7 +32,7 @@
       "templateUrl": "components/dashboard/views/listEvents.html"
     },
     {
-      "description": "Minions",
+      "description": "Nodes",
       "url": "/minions",
       "templateUrl": "components/dashboard/views/listMinions.html"
     },

diff --git a/www/app/components/dashboard/pages/header.html b/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">

diff --git a/www/app/components/dashboard/test/controllers/header.spec.js b/www/app/components/dashboard/test/controllers/header.spec.js
diff --git a/www/app/index.html b/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;"

diff --git a/www/app/views/partials/md-table.tmpl.html b/www/app/views/partials/md-table.tmpl.html
@@ -2,7 +2,7 @@
   <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>
@@ -31,15 +31,15 @@
   <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)">
         <span ng-class="{ 'md-table-active-page': currentPage==$index}">{{$index+1}}</span>
       </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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -125,4 +125,4 @@ 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)]()
		[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/components/README.md?pixel)]()