Code cleanup. Refactors tab rendering HTML in the plugin panel

mozilla · Nov 9, 2015 · f6258bf · f6258bf
1 parent 8a511b7
commit f6258bf
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 55 deletions.
diff --git a/ui/js/filters.js b/ui/js/filters.js
@@ -5,7 +5,7 @@
 treeherder.filter('showOrHide', function() {
     // determine whether this is a label for a job group (like mochitest)
     return function(input, isCollapsed) {
-        if (isCollapsed == true) {
+        if (isCollapsed === true) {
             return "show" + input;
         } else {
             return "hide" + input;

diff --git a/ui/plugins/controller.js b/ui/plugins/controller.js
@@ -41,6 +41,33 @@ treeherder.controller('PluginCtrl', [
             thJobFilters.replaceFilter('searchStr', jobSearchStr || null);
         };
 
+        /**
+         * Set the tab options and selections based on the selected job.
+         * The default selected tab will be based on whether the job was a
+         * success or failure.
+         *
+         * Some tabs will be shown/hidden based on the job (such as Talos)
+         *
+         */
+        var initializeTabs = function(job) {
+            var successTab = "jobDetails";
+            var failTab = "failureSummary";
+
+            // show/hide Talos panel if this is a Talos job and default to
+            // Talos if the job was a ``success``
+            $scope.tabService.tabs.talos.enabled = (job.job_group_name.indexOf('Talos') !== -1);
+            if ($scope.tabService.tabs.talos.enabled) {
+                successTab = "talos";
+            }
+
+            // set the selected tab
+            if (thResultStatus(job) === 'success') {
+                $scope.tabService.selectedTab = successTab;
+            } else {
+                $scope.tabService.selectedTab = failTab;
+            }
+        };
+
         // this promise will void all the ajax requests
         // triggered by selectJob once resolved
         var selectJobPromise = null;
@@ -96,24 +123,8 @@ treeherder.controller('PluginCtrl', [
                     $scope.jobRevision = ThResultSetStore.getSelectedJob($scope.repoName).job.revision;
                     $scope.jobIds = results[4];
 
-                    // we handle which tab gets presented in the job details panel
-                    // and a special set of rules for talos
-                    if ($scope.job.job_group_name.indexOf('Talos') !== -1) {
-                        $scope.tabService.tabs.talos.enabled = true;
-                        if (thResultStatus($scope.job) === 'success') {
-                            $scope.tabService.selectedTab = 'talos';
-                        } else {
-                            $scope.tabService.selectedTab = 'failureSummary';
-                        }
-                    } else {
-                        // tab presentation for any other (non-talos) job
-                        $scope.tabService.tabs.talos.enabled = false;
-                        if (thResultStatus($scope.job) === 'success') {
-                            $scope.tabService.selectedTab = 'jobDetails';
-                        } else {
-                            $scope.tabService.selectedTab = 'failureSummary';
-                        }
-                    }
+                    // set the tab options and selections based on the selected job
+                    initializeTabs($scope.job);
 
                     // the second result come from the buildapi artifact promise
                     var buildapi_artifact = results[1];

diff --git a/ui/plugins/pluginpanel.html b/ui/plugins/pluginpanel.html
@@ -223,45 +223,17 @@
       </div>
     </div>
   </div>
-  <div id="job-tabs-panel"
-       ng-class="{'talos-job-selected': tabService.tabs.talos.enabled}">
+  <div id="job-tabs-panel">
     <div id="job-tabs-navbar">
       <nav class="navbar navbar-dark">
         <ul class="nav navbar-nav tab-headers">
-          <li ng-class="{'active': tabService.selectedTab == 'jobDetails'}">
-            <a title="Show additional job information"
+          <li ng-repeat="tabName in tabService.tabOrder"
+              ng-if="tabService.tabs[tabName].enabled"
+              ng-class="{'active': tabService.selectedTab == tabName}">
+            <a title="Show {{ tabService.tabs[tabName].description }}"
                href="" prevent-default-on-left-click
-               ng-click="tabService.showTab('jobDetails', job.id)">
-              Job details
-            </a>
-          <li ng-class="{'active': tabService.selectedTab == 'failureSummary'}">
-            <a title="Show failure summary"
-               href="" prevent-default-on-left-click
-               ng-click="tabService.showTab('failureSummary', job.id)">
-              Failure summary
-            </a>
-          </li>
-          <li ng-class="{'active': tabService.selectedTab == 'annotations'}">
-            <a title="Show annotations"
-               href="" prevent-default-on-left-click
-               ng-click="tabService.showTab('annotations', job.id)">
-              Annotations
-            </a>
-          </li>
-          </li>
-          <li ng-class="{'active': tabService.selectedTab == 'similarJobs'}">
-            <a title="Show similar jobs"
-               href="" prevent-default-on-left-click
-               ng-click="tabService.showTab('similarJobs', job.id)">
-              Similar jobs
-            </a>
-          </li>
-          <li ng-if="tabService.tabs.talos.enabled"
-              ng-class="{'active': tabService.selectedTab == 'talos'}">
-            <a title="Show Talos job details"
-               href="" prevent-default-on-left-click
-               ng-click="tabService.showTab('talos', job.id)">
-              Talos
+               ng-click="tabService.showTab(tabName, job.id)">
+              {{ tabService.tabs[tabName].title }}
             </a>
           </li>
         </ul>

diff --git a/ui/plugins/tabs.js b/ui/plugins/tabs.js
@@ -6,30 +6,42 @@ treeherder.factory('thTabs', [
             "tabs": {
                 "jobDetails": {
                     title: "Job details",
+                    description: "additional job information",
                     content: "plugins/job_details/main.html",
                     enabled: true
                 },
                 "failureSummary": {
                     title: "Failure summary",
+                    description: "failure summary",
                     content: "plugins/failure_summary/main.html",
                     enabled: true
                 },
                 "annotations": {
                     title: "Annotations",
+                    description: "annotations",
                     content: "plugins/annotations/main.html",
                     enabled: true
                 },
                 "similarJobs": {
                     title: "Similar jobs",
+                    description: "similar jobs",
                     content: "plugins/similar_jobs/main.html",
                     enabled: true
                 },
                 "talos": {
-                    title: "Job Info",
+                    title: "Talos",
+                    description: "Talos job details",
                     content: "plugins/talos/main.html",
                     enabled: false
                 }
             },
+            "tabOrder": [
+                "jobDetails",
+                "failureSummary",
+                "annotations",
+                "similarJobs",
+                "talos"
+            ],
             "selectedTab": "jobDetails",
             "showTab" : function(tab, contentId){
                 thTabs.selectedTab = tab;