Don't requests projects on every page load

Author: spadgett

app/scripts/constants.js

@@ -87,7 +87,7 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
 
   ENABLE_TECH_PREVIEW_FEATURE: {
     // Enable the new landing page and service catalog experience
-    service_catalog_landing_page: false,
+    service_catalog_landing_page: true,
     // Set to `true` when the template service broker is enabled for the cluster in master-config.yaml
     template_service_broker: false,
     pod_presets: false

app/scripts/controllers/createFromURL.js

@@ -156,8 +156,7 @@ angular.module('openshiftConsole')
     $scope.projects = {};
     $scope.canCreateProject = undefined;
 
-    DataService
-      .list("projects", $scope)
+    ProjectsService.list()
       .then(function(items) {
         $scope.loaded = true;
         $scope.projects = $filter('orderByDisplayName')(items.by("metadata.name"));

app/scripts/controllers/membership.js

@@ -243,8 +243,7 @@ angular
           $scope.user = resp;
         });
 
-      DataService
-        .list('projects', {})
+      ProjectsService.list()
         .then(function(resp) {
           var projects = _.keys(resp.by('metadata.name')).sort();
           angular.extend($scope, {

app/scripts/controllers/projects.js

@@ -16,11 +16,15 @@ angular.module('openshiftConsole')
                                               AuthService,
                                               DataService,
                                               KeywordService,
+                                              Navigate,
                                               Logger,
                                               ProjectsService) {
+    var MAX_PROJETS_TO_WATCH = 500;
+
     var projects, sortedProjects;
     var watches = [];
     var filterKeywords = [];
+    var watchingProjects = false;
 
     $scope.alerts = $scope.alerts || {};
     $scope.loading = true;
@@ -62,19 +66,19 @@ angular.module('openshiftConsole')
         // Sort by display name. Use `metadata.name` as a secondary sort when
         // projects have the same display name.
         sortedProjects = _.orderBy(projects,
-                                       [ displayNameLower, 'metadata.name' ],
-                                       [ primarySortOrder ]);
+                                   [ displayNameLower, 'metadata.name' ],
+                                   [ primarySortOrder ]);
         break;
       case 'metadata.annotations["openshift.io/requester"]':
         // Sort by requester, then display name. Secondary sort is always ascending.
         sortedProjects = _.orderBy(projects,
-                                       [ sortID, displayNameLower ],
-                                       [ primarySortOrder, 'asc' ]);
+                                   [ sortID, displayNameLower ],
+                                   [ primarySortOrder, 'asc' ]);
         break;
       default:
         sortedProjects = _.orderBy(projects,
-                                       [ sortID ],
-                                       [ primarySortOrder ]);
+                                   [ sortID ],
+                                   [ primarySortOrder ]);
       }
 
       // Remember the previous sort ID.
@@ -109,6 +113,21 @@ angular.module('openshiftConsole')
       onSortChange: update
     };
 
+    var updateProjects = function(projectData) {
+      projects = _.toArray(projectData.by("metadata.name"));
+      $scope.loading = false;
+      $scope.showGetStarted = _.isEmpty(projects) && !$scope.isProjectListIncomplete;
+      update();
+    };
+
+    // On create / edit / delete, manually update the project list if not
+    // watching. This uses cached project data, so is not expensive.
+    var onChanges = function() {
+      if (!watchingProjects) {
+        ProjectsService.list().then(updateProjects);
+      }
+    };
+
     $scope.newProjectPanelShown = false;
 
     $scope.createProject = function() {
@@ -121,6 +140,7 @@ angular.module('openshiftConsole')
 
     $scope.onNewProject = function() {
       $scope.newProjectPanelShown = false;
+      onChanges();
     };
 
     $scope.editProjectPanelShown = false;
@@ -136,6 +156,13 @@ angular.module('openshiftConsole')
 
     $scope.onEditProject = function() {
       $scope.editProjectPanelShown = false;
+      onChanges();
+    };
+
+    $scope.onDeleteProject = onChanges;
+
+    $scope.goToProject = function(projectName) {
+      Navigate.toProjectOverview(projectName);
     };
 
     $scope.$watch('search.text', _.debounce(function(searchText) {
@@ -144,16 +171,25 @@ angular.module('openshiftConsole')
     }, 50, { maxWait: 250 }));
 
     AuthService.withUser().then(function() {
-      watches.push(DataService.watch("projects", $scope, function(projectData) {
-        projects = _.toArray(projectData.by("metadata.name"));
+      ProjectsService.list().then(function(projectData) {
+        $scope.isProjectListIncomplete = ProjectsService.isProjectListIncomplete();
+        updateProjects(projectData);
+        if (_.size(projects) <= MAX_PROJETS_TO_WATCH) {
+          watches.push(ProjectsService.watch($scope, updateProjects));
+          watchingProjects = true;
+        }
+        // DEBUG
+        $scope.isProjectListIncomplete = true;
+      }, function() {
+        $scope.isProjectListIncomplete = true;
         $scope.loading = false;
-        $scope.showGetStarted = _.isEmpty(projects);
+        projects = [];
         update();
-      }));
+      });
     });
 
-    // Test if the user can submit project requests. Handle error notifications
-    // ourselves because 403 responses are expected.
+  // Test if the user can submit project requests. Handle error notifications
+  // ourselves because 403 responses are expected.
   ProjectsService
     .canCreate()
     .then(function() {

app/scripts/directives/istagSelect.js

@@ -19,7 +19,7 @@ angular.module("openshiftConsole")
    * selectDisabled:
    *   An expression that will disable the form (default: false)
    */
-  .directive("istagSelect", function(DataService) {
+  .directive("istagSelect", function(DataService, ProjectsService) {
     return {
       require: '^form',
       restrict: 'E',
@@ -81,7 +81,7 @@ angular.module("openshiftConsole")
           });
         };
 
-        DataService.list("projects", {}, function(projectData) {
+        ProjectsService.list().then(function(projectData) {
           $scope.namespaces = _.keys(projectData.by('metadata.name'));
 
           if ($scope.includeSharedNamespace) {

app/scripts/directives/nav.js

@@ -58,16 +58,21 @@ angular.module('openshiftConsole')
       }
     };
   })
-  .directive('projectHeader', function($timeout, $location, $filter, DataService, projectOverviewURLFilter, Constants) {
+  .directive('projectHeader', function($timeout, $location, $filter, ProjectsService, projectOverviewURLFilter, Constants) {
 
     // cache these to eliminate flicker
     var projects = {};
     var sortedProjects = [];
 
+    var displayName = $filter('displayName');
+    var uniqueDisplayName = $filter('uniqueDisplayName');
+
     return {
       restrict: 'EA',
       templateUrl: 'views/directives/header/project-header.html',
       link: function($scope, $elem) {
+        var MAX_PROJETS_TO_DISPLAY = 100;
+
         $scope.closeOrderingPanel = function() {
           _.set($scope, 'ordering.panelName', "");
         };
@@ -108,23 +113,40 @@ angular.module('openshiftConsole')
             projects[name] = project;
           }
 
-          sortedProjects = $filter('orderByDisplayName')(projects);
-          options = _.map(sortedProjects, function(item) {
-            return $('<option>')
-                      .attr("value", item.metadata.name)
-                      .attr("selected", item.metadata.name === name)
-                      .text($filter("uniqueDisplayName")(item, sortedProjects));
-          });
+          var makeOption = function(project, skipUniqueCheck) {
+            var option = $('<option>').attr("value", project.metadata.name).attr("selected", project.metadata.name === name);
+            if (skipUniqueCheck) {
+              option.text(displayName(project));
+            } else {
+              // FIXME: This is pretty inefficient, but probably OK if
+              // MAX_PROJETS_TO_DISPLAY is not too large.
+              option.text(uniqueDisplayName(project, sortedProjects));
+            }
+
+            return option;
+          };
+
+          // Only show all projects in the dropdown if less than a max number.
+          // Otherwise it's not usable and might impact performance.
+          if (_.size(projects) <= MAX_PROJETS_TO_DISPLAY) {
+            sortedProjects = $filter('orderByDisplayName')(projects);
+            options = _.map(sortedProjects, function(project) {
+              return makeOption(project, false);
+            });
+          } else {
+            // Show the current project and a "View all Projects" link.
+            options = [ makeOption(projects[name], true) ];
+          }
 
           select.empty();
           select.append(options);
           select.append($('<option data-divider="true"></option>'));
-          select.append($('<option value="">View all projects</option>'));
+          select.append($('<option value="">View all Projects</option>'));
           select.selectpicker('refresh');
         };
 
 
-        DataService.list("projects", $scope, function(items) {
+        ProjectsService.list().then(function(items) {
           projects = items.by("metadata.name");
           updateOptions();
         });

app/views/projects.html

@@ -64,12 +64,46 @@ <h1>My Projects</h1>
                         </div>
                       </div>
                     </div>
-                    <div ng-if="!projects.length" class="h3">
+                    <p ng-if="isProjectListIncomplete">
+                      <div class="alert alert-warning">
+                        <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
+                        <span class="sr-only">Warning:</span>
+                        The complete list of your projects could not be loaded.
+                        Type a project name to go to that project.
+                      </div>
+                      <form>
+                        <div class="form-group">
+                          <label for="typed-project-name">Project Name</label>
+                          <div class="input-group">
+                            <input
+                              class="form-control"
+                              type="text"
+                              id="typed-project-name"
+                              required
+                              minlength="2"
+                              ng-model="input.typedProjectName"
+                              autocorrect="off"
+                              autocapitalize="none"
+                              spellcheck="false">
+                            <span class="input-group-btn">
+                              <button class="btn btn-default"
+                                      type="submit"
+                                      ng-disabled="!input.typedProjectName"
+                                      ng-click="goToProject(input.typedProjectName)">
+                                <i class="fa fa-arrow-right" aria-hidden="true"></i>
+                                <span class="sr-only">Go to Project</span>
+                              </button>
+                            </span>
+                          </div>
+                        </div>
+                      </form>
+                    </p>
+                    <div ng-if="!projects.length && !isProjectListIncomplete" class="h3">
                       The current filter is hiding all projects.
                       <a href="" ng-click="search.text = ''" role="button">Clear Filter</a>
                     </div>
                     <div class="list-group list-view-pf projects-list">
-                      <div ng-repeat="project in projects" class="list-group-item project-info tile-click">
+                      <div ng-repeat="project in projects | limitTo: 500 track by (project | uid)" class="list-group-item project-info tile-click">
                         <div class="list-view-pf-main-info">
                           <div class="list-view-pf-description project-names">
                             <div class="list-group-item-heading project-name-item">
@@ -110,16 +144,14 @@ <h2 class="h1">
                                 </a>
                               </li>
                               <li role="menuitem">
-                                <delete-link
-                                  kind="Project"
+                                <delete-project
                                   label="Delete Project"
-                                  resource-name="{{project.metadata.name}}"
-                                  project-name="{{project.metadata.name}}"
-                                  display-name="{{(project | displayName)}}"
+                                  project="project"
                                   type-name-to-confirm="true"
                                   stay-on-current-page="true"
-                                  alerts="alerts">
-                                </delete-link>
+                                  alerts="alerts"
+                                  success="onDeleteProject">
+                                </delete-project>
                               </li>
                             </ul>
                           </div>
@@ -131,6 +163,9 @@ <h2 class="h1">
                         </origin-modal-popup>
                       </div>
                     </div>
+                    <p ng-if="projects.length > 500">
+                      Only the first 500 projects are displayed.
+                    </p>
                     <p class="projects-instructions" ng-if="canCreate === false" ng-include="'views/_cannot-create-project.html'"></p>
                   </div>
                 </div>