Bug 1081074 - Store and display watched repos in the nav panel (#2105)

ui/js/directives/treeherder/top_nav_bar.js

@@ -14,8 +14,8 @@ treeherder.directive('thFilterCheckbox', [
     }]);
 
 treeherder.directive('thWatchedRepo', [
-    'ThLog',
-    function (ThLog) {
+    'ThLog', 'ThRepositoryModel',
+    function (ThLog, ThRepositoryModel) {
 
         var $log = new ThLog("thWatchedRepo");
 
@@ -57,6 +57,8 @@ treeherder.directive('thWatchedRepo', [
             restrict: "E",
             link: function(scope) {
 
+                scope.repoData = ThRepositoryModel.repos[scope.watchedRepo];
+
                 scope.updateTitleText = function() {
                     if (scope.repoData.treeStatus) {
                         scope.titleText = scope.repoData.treeStatus.status;

ui/js/models/repository.js

@@ -10,8 +10,9 @@ treeherder.factory('ThRepositoryModel', [
         var $log = new ThLog("ThRepositoryModel");
 
         var repos = {};
-        var watchedRepos = {};
+        var watchedRepos = [];
         var orderedRepoGroups = {};
+        var maxWatchedRepos = 3;
 
         // get the repositories (aka trees)
         // sample: 'resources/menu.json'
@@ -53,22 +54,33 @@ treeherder.factory('ThRepositoryModel', [
          * We want to add this repo as watched, but we also
          * want to get the treestatus for it
          */
-        var watchRepo = function(repoName) {
-            _.extend(repos[repoName], {
+        var watchRepo = function(name) {
+            // Safeguard: Don't allow duplicates in the watch list
+            // Also, only add items for which we have data for
+            if (_.contains(watchedRepos, name) || !repos[name]) {
+                return;
+            }
+            _.extend(repos[name], {
                 treeStatus: {status: "not retrieved yet", message_of_the_day: ""},
                 unclassifiedFailureCount: 0,
-                groupName: repos[repoName].groupName
+                groupName: repos[name].groupName
             });
-            watchedRepos[repoName] = repos[repoName];
-            updateTreeStatus(repoName);
+            watchedRepos.unshift(name);
+            updateTreeStatus(name);
+            // Limit to maxiumum saved repos at a time
+            if (watchedRepos.length > maxWatchedRepos) {
+                watchedRepos.length = maxWatchedRepos;
+            }
             saveWatchedRepos();
-
-            $log.debug("watchedRepo", repoName, repos[repoName]);
+            $log.debug("watchedRepo", name, repos[name]);
         };
 
         var unwatchRepo = function(name) {
             $log.debug("unwatchRepo", name, watchedRepos);
-            delete watchedRepos[name];
+            var pos = watchedRepos.indexOf(name);
+            if (pos > -1) {
+                watchedRepos.splice(pos, 1);
+            }
             saveWatchedRepos();
         };
 
@@ -141,13 +153,31 @@ treeherder.factory('ThRepositoryModel', [
                         });
 
                         _.each(data, addRepoAsUnwatched);
+
+                        // This needs to be done before `setCurrent` because
+                        // `setCurrent` overwrites the entire listing
+                        // with only the default repo
+                        if (options.watchRepos) {
+                            var storedWatched = loadWatchedRepos();
+                        }
+
                         if (options.name) {
                             setCurrent(options.name);
                         }
                         if (options.watchRepos) {
-                            var storedWatched = loadWatchedRepos();
-                            if (_.isArray(storedWatched) &&
-                                _.contains(storedWatched, options.name)) {
+                            if (_.isArray(storedWatched)) {
+
+                                // To get the current repo to display first, we must
+                                // ensure it's added to the array last, as per normal user interaction
+                                if (_.contains(storedWatched, options.name)) {
+                                    storedWatched = _.without(storedWatched, _.findWhere(storedWatched, options.name));
+                                }
+                                unwatchRepo(options.name);
+
+                                // Add the repos in reverse order, like the user would (oldest to newest)
+                                storedWatched.reverse();
+                                storedWatched.push(options.name);
+
                                 _.each(storedWatched, function (repo) {
                                     watchRepo(repo);
                                 });
@@ -204,18 +234,18 @@ treeherder.factory('ThRepositoryModel', [
 
         var loadWatchedRepos = function() {
             try {
-                return JSON.parse(sessionStorage.getItem("thWatchedRepos"));
+                return JSON.parse(localStorage.getItem("thWatchedRepos"));
             } catch (e) {
-                // sessionStorage is disabled/not supported.
-                return {};
+                // localStorage is disabled/not supported.
+                return [];
             }
         };
 
         var saveWatchedRepos = function() {
             try {
-                sessionStorage.setItem("thWatchedRepos", JSON.stringify(_.keys(watchedRepos)));
+                localStorage.setItem("thWatchedRepos", JSON.stringify(watchedRepos));
             } catch (e) {
-                // sessionStorage is disabled/not supported.
+                // localStorage is disabled/not supported.
             }
         };
 
@@ -266,12 +296,12 @@ treeherder.factory('ThRepositoryModel', [
             // The $interval will pass in the number of times it was called,
             // rather than a ``repoName``.  So repoName would equal 1, 2, 3.  So
             // if repoName isn't a valid watched repo, we update all.
-            var repoNames = watchedRepos[repoName]? [repoName]: _.keys(watchedRepos);
+            var repoNames = _.contains(watchedRepos, repoName) ? [repoName] : watchedRepos;
 
             // filter out non-watched and unsupported repos to prevent repeatedly
             // hitting an endpoint we know will never work.
             repoNames = _.filter(repoNames, function(repo) {
-                if (watchedRepos[repo] && watchedRepos[repo].treeStatus.status !== 'unsupported') {
+                if (_.contains(watchedRepos, repo) && repos[repo].treeStatus.status !== 'unsupported') {
                     return repo;
                 }
             });
@@ -302,7 +332,7 @@ treeherder.factory('ThRepositoryModel', [
                     _.defer(function() {
                         _.each(newStatuses, function(status) {
                             $log.debug("updateTreeStatus", "updateStatusesIfDone", status.tree, status.status);
-                            watchedRepos[treeStatus.getRepoName(status.tree)].treeStatus = status;
+                            repos[treeStatus.getRepoName(status.tree)].treeStatus = status;
                         });
                     });
                 }

ui/partials/main/thWatchedRepo.html

@@ -1,28 +1,28 @@
 <span class="btn-group">
   <button class="watched-repo-main-btn btn btn-sm {{btnClass}}"
-          ng-class="{'active': name===repoName}"
-          ng-click="changeRepo(name)"
+          ng-class="{'active': watchedRepo===repoName}"
+          ng-click="changeRepo(watchedRepo)"
           type="button"
           title="{{titleText|stripHtml}}">
-    <i class="fa {{statusIcon}} {{statusIconClass}} {{statusColor}}"></i> {{::name}}
+    <i class="fa {{statusIcon}} {{statusIconClass}} {{statusColor}}"></i> {{::watchedRepo}}
   </button>
   <button class="watched-repo-info-btn btn btn-sm {{btnClass}} dropdown-toggle"
-          ng-class="{'active': name===repoName}"
+          ng-class="{'active': watchedRepo===repoName}"
           ng-click="setDropDownPull($event)"
           type="button"
-          title="{{::name}} info"
+          title="{{::watchedRepo}} info"
           data-toggle="dropdown">
     <span class="fa fa-info-circle"></span>
   </button>
   <button class="watched-repo-unwatch-btn btn btn-sm {{btnClass}}"
-          ng-class="{'active': name===repoName}"
-          ng-click="repoModel.unwatchRepo(name)"
-          ng-hide="name===repoName"
-          title="unwatch {{::name}}">
+          ng-class="{'active': watchedRepo===repoName}"
+          ng-click="repoModel.unwatchRepo(watchedRepo)"
+          ng-hide="watchedRepo===repoName"
+          title="unwatch {{::watchedRepo}}">
     <span class="fa fa-times"></span>
   </button>
-  <th-watched-repo-info-drop-down name="{{::name}}"
-                                  reason="{{repoData.treeStatus.reason}}"
-                                  message_of_the_day="{{repoData.treeStatus.message_of_the_day}}">
+  <th-watched-repo-info-drop-down name="{{::watchedRepo}}"
+                                  reason="{{repos[watchedRepo].treeStatus.reason}}"
+                                  message_of_the_day="{{repos[watchedRepo].treeStatus.message_of_the_day}}">
   </th-watched-repo-info-drop-down>
 </span>

ui/partials/main/thWatchedRepoNavPanel.html

@@ -1,10 +1,12 @@
 <div id="watched-repo-navbar" class="th-context-navbar watched-repo-navbar clearfix">
-  <th-watched-repo ng-repeat="(name, repoData) in repoModel.watchedRepos"></th-watched-repo>
+
+  <th-watched-repo ng-repeat="watchedRepo in repoModel.watchedRepos"></th-watched-repo>
+
   <div class="navbar-right">
     <span>
       <form role="search" class="form-inline">
 
-        <span class="btn btn-sm btn-view-nav nav-menu-btn" 
+        <span class="btn btn-sm btn-view-nav nav-menu-btn"
               ng-show="serverChanged" ng-cloak
               ng-click="updateButtonClick()"
               id="revisionChangedLabel"
@@ -72,7 +74,7 @@
 
         <!-- Toggle Duplicate Jobs -->
         <span class="btn btn-view-nav btn-sm btn-toggle-duplicate-jobs"
-              tabindex="1" role="button" 
+              tabindex="1" role="button"
               title="{{ showDuplicateJobs ? 'Hide Duplicate Jobs' : 'Show Duplicate Jobs' }}"
               ng-click="groupState !== 'expanded' && toggleShowDuplicateJobs()"
               ng-disabled="groupState === 'expanded'"