Patternfly vertical navigation and project bar

Update navigation to use the standard Patternfly vertical navigation. Add a project bar to the masthead when in the context of a project.
openshift · Sep 1, 2017 · bc13e0e · bc13e0e
1 parent 4be3793
commit bc13e0e
Show file tree

Hide file tree

Showing 128 changed files with 10,342 additions and 11,637 deletions.
diff --git a/app/images/logo-origin-thin.svg b/app/images/logo-origin-thin.svg
diff --git a/app/index.html b/app/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="no-js layout-pf-alt layout-pf-alt-fixed">
+<html class="no-js layout-pf layout-pf-fixed">
   <head>
     <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
     <meta charset="utf-8">
@@ -35,29 +35,18 @@
     <link rel="stylesheet" type="text/css" href="styles/extensions.css">
     <style type="text/css">
 
-
     </style>
   </head>
-<body class="console-os">
+  <body class="console-os" ng-class="{ 'has-project-bar': view.hasProject }">
     <!-- Add your site or application content here -->
-
+    <p ng-if="globalTechPreviewIndicator" ng-cloak class="tech-preview-banner">Technology preview is enabled</p>
+    <osc-header></osc-header>
     <toast-notifications></toast-notifications>
     <notification-drawer-wrapper></notification-drawer-wrapper>
-
-    <div ng-view>
-      <!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
-      <nav class="navbar navbar-pf-alt top-header" role="navigation">
-        <div row>
-          <div class="navbar-header">
-            <a class="navbar-brand" id="openshift-logo" href="./">
-              <div id="header-logo"></div>
-            </a>
-          </div>
-        </div>
-      </nav>
-      <div class="wrap no-sidebar">
-        <div class="middle surface-shaded">
-          <div class="middle-section">
+    <div class="container-pf-nav-pf-vertical" ng-class="{ 'collapsed-nav': nav.collapsed }">
+      <div ng-view class="view">
+        <div class="middle">
+          <div class="middle-content">
             <div class="empty-state-message">
               <h2 class="text-center" id="temporary-loading-message" style="display: none;">Loading...</h2>
               <!-- So that we don't get the Loading... message AND the noscript message -->

diff --git a/app/scripts/constants.js b/app/scripts/constants.js
@@ -216,10 +216,16 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
               label: "Deployments",
               href: "/browse/deployments",
               prefixes: [
+                "/add-config-volume",
+                "/attach-pvc",
                 "/browse/deployment/",
                 "/browse/dc/",
                 "/browse/rs/",
-                "/browse/rc/"
+                "/browse/rc/",
+                "/edit/autoscaler",
+                "/edit/dc/",
+                "/edit/health-checks",
+                "/set-limits"
               ]
             },
             {
@@ -247,7 +253,9 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
               label: "Routes",
               href: "/browse/routes",
               prefixes: [
-                "/browse/routes/"
+                "/browse/routes/",
+                "/create-route",
+                "/edit/routes/"
               ]
             }
           ]
@@ -265,14 +273,16 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
               href: "/browse/builds",
               prefixes: [
                 "/browse/builds/",
-                "/browse/builds-noconfig/"
+                "/browse/builds-noconfig/",
+                "/edit/builds/"
               ]
             },
             {
               label: "Pipelines",
               href: "/browse/pipelines",
               prefixes: [
-                "/browse/pipelines/"
+                "/browse/pipelines/",
+                "/edit/pipelines/"
               ]
             },
             {
@@ -309,14 +319,17 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
               label: "Config Maps",
               href: "/browse/config-maps",
               prefixes: [
-                "/browse/config-maps/"
+                "/browse/config-maps/",
+                "/create-config-map",
+                "/edit/config-maps/"
               ]
             },
             {
               label: "Secrets",
               href: "/browse/secrets",
               prefixes: [
-                "/browse/secrets/"
+                "/browse/secrets/",
+                "/create-secret"
               ],
               canI: {
                 resource: 'secrets',
@@ -336,7 +349,8 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
       iconClass: "pficon pficon-container-node",
       href: "/browse/storage",
       prefixes: [
-        "/browse/storage/"
+        "/browse/storage/",
+        "/create-pvc"
       ]
     },
     {

diff --git a/app/scripts/controllers/addConfigVolume.js b/app/scripts/controllers/addConfigVolume.js
@@ -59,8 +59,7 @@ angular.module('openshiftConsole')
       name: $routeParams.name,
       kind: $routeParams.kind,
       namespace: $routeParams.project,
-      subpage: 'Add Config Files',
-      includeProject: true
+      subpage: 'Add Config Files'
     });
 
     var humanizeKind = $filter('humanizeKind');
@@ -130,8 +129,7 @@ angular.module('openshiftConsole')
             $scope.breadcrumbs = BreadcrumbsService.getBreadcrumbs({
               object: object,
               project: project,
-              subpage: 'Add Config Files',
-              includeProject: true
+              subpage: 'Add Config Files'
             });
           },
           function(e) {

diff --git a/app/scripts/controllers/attachPVC.js b/app/scripts/controllers/attachPVC.js
@@ -64,18 +64,14 @@ angular.module('openshiftConsole')
       name: $routeParams.name,
       kind: $routeParams.kind,
       namespace: $routeParams.project,
-      subpage: 'Add Storage',
-      includeProject: true
+      subpage: 'Add Storage'
     });
 
     ProjectsService
       .get($routeParams.project)
       .then(_.spread(function(project, context) {
         $scope.project = project;
 
-        // Update project breadcrumb with display name.
-        $scope.breadcrumbs[0].title = $filter('displayName')(project);
-
         if (!AuthorizationService.canI(resourceGroupVersion, 'update', $routeParams.project)) {
           Navigate.toErrorPage('You do not have authority to update ' +
                                humanizeKind($routeParams.kind) + ' ' + $routeParams.name + '.', 'access_denied');
@@ -126,8 +122,7 @@ angular.module('openshiftConsole')
               $scope.breadcrumbs = BreadcrumbsService.getBreadcrumbs({
                 object: resource,
                 project: project,
-                subpage: 'Add Storage',
-                includeProject: true
+                subpage: 'Add Storage'
               });
               var podTemplate = _.get(resource, 'spec.template');
               $scope.existingVolumeNames = StorageService.getVolumeNames(podTemplate);

diff --git a/app/scripts/controllers/create.js b/app/scripts/controllers/create.js
@@ -27,10 +27,6 @@ angular.module('openshiftConsole')
     $scope.alerts = $scope.alerts || {};
 
     $scope.breadcrumbs = [
-      {
-        title: $scope.projectName,
-        link: "project/" + $scope.projectName
-      },
       {
         title: "Add to Project"
       }
@@ -41,8 +37,6 @@ angular.module('openshiftConsole')
       .then(_.spread(function(project, context) {
         $scope.project = project;
         $scope.context = context;
-        // Update project breadcrumb with display name.
-        $scope.breadcrumbs[0].title = $filter('displayName')(project);
 
         // List image streams and templates in the both the shared `openshift`
         // namespace and the project namespace.

diff --git a/app/scripts/controllers/create/browseCategory.js b/app/scripts/controllers/create/browseCategory.js
@@ -60,10 +60,6 @@ angular.module('openshiftConsole')
     $scope.alerts = $scope.alerts || {};
 
     $scope.breadcrumbs = [
-      {
-        title: $scope.projectName,
-        link: "project/" + $scope.projectName
-      },
       {
         title: "Add to Project",
         link: "project/" + $scope.projectName + "/create"
@@ -90,8 +86,6 @@ angular.module('openshiftConsole')
       .then(_.spread(function(project, context) {
         $scope.project = project;
         $scope.context = context;
-        // Update project breadcrumb with display name.
-        $scope.breadcrumbs[0].title = $filter('displayName')(project);
 
         // List image streams and templates in the both the shared `openshift`
         // namespace and the project namespace.