Bug 1322923 - Expose from/to-Change filter parameters in the main UI (#2030) r=camd

ui/css/treeherder-navbar-panels.css

@@ -87,3 +87,10 @@
     border-radius: 0px;
     margin-bottom: 0px;
 }
+
+/*
+ *  Active Filters panel
+ */
+.active-filters-bar {
+    padding: 0px 15px 0px 15px;
+}

ui/index.html

@@ -41,6 +41,7 @@
                 </ng-include>
             </div>
             <ng-include src="'partials/main/thTreeherderUpdateBar.html'"></ng-include>
+            <ng-include src="'partials/main/thActiveFiltersBar.html'"></ng-include>
             <div id="th-global-content" class="th-global-content"
                  ng-click="clearJobOnClick($event)">
                 <span class="th-view-content" ng-cloak>

ui/js/controllers/main.js

@@ -523,6 +523,18 @@ treeherderApp.controller('MainCtrl', [
             );
         };
 
+        $scope.fromChange = function() {
+            return $location.search()["fromchange"];
+        };
+
+        $scope.toChange = function() {
+            return $location.search()["tochange"];
+        };
+
+        $scope.showActiveFiltersBar = function() {
+            return $scope.fromChange() || $scope.toChange();
+        };
+
         $scope.fromChangeValue = function() {
             var url = window.location.href;
             url = url.replace("&fromchange=" + $location.search()["fromchange"], "");
@@ -535,6 +547,12 @@ treeherderApp.controller('MainCtrl', [
             return url;
         };
 
+        $scope.dropLocationSearchParam = function(param) {
+            var url = $location.url();
+            url = url.replace("&" + param + "=" + $location.search()[param], "");
+            $location.url(url);
+        };
+
         $scope.setLocationSearchParam = function(param, value) {
             $location.search(param, value);
         };

ui/partials/main/thActiveFiltersBar.html

@@ -0,0 +1,20 @@
+<!-- Show this certain filters are active in Treeherder -->
+<div class="alert alert-info active-filters-bar" ng-show="showActiveFiltersBar()" ng-cloak>
+  <i class="fa fa-info-circle" aria-hidden="true"></i>
+  <span><b>Active Filters</b></span>
+
+  <span class="btn btn-sm"
+        ng-show="fromChange().length > 0"
+        title="Click to clear the fromchange filter"
+        ng-click="dropLocationSearchParam('fromchange')">
+      fromChange: {{fromChange() | limitTo: 12}}
+      <i class="fa fa-times-circle"/>
+  </span>
+  <span class="btn btn-sm"
+        ng-show="toChange().length > 0"
+        title="Click to clear the tochange filter"
+        ng-click="dropLocationSearchParam('tochange')">
+      toChange: {{toChange() | limitTo: 12}}
+      <i class="fa fa-times-circle"/>
+  </span>
+</div>

ui/partials/main/thWatchedRepoNavPanel.html

@@ -11,6 +11,7 @@
               title="New version of Treeherder has been deployed. Reload to pick up changes.">
           <span class="fa fa-exclamation-circle" />&nbsp;Treeherder update available
         </span>
+
         <!--Unclassified Failures Button-->
         <span class="btn btn-sm"
               title="Loaded failures / Toggle filtering for unclassified failures"