Label Filter for Kubernetes Deployment History Tab

Implementation of label filter for Kubernetes deployment
history tab

Author: cdcabrera

app/scripts/controllers/deployment.js

@@ -21,11 +21,15 @@ angular.module('openshiftConsole')
                         OwnerReferencesService,
                         Logger,
                         ProjectsService,
-                        StorageService) {
+                        StorageService,
+                        LabelFilter) {
     var imageStreamImageRefByDockerReference = {}; // lets us determine if a particular container's docker image reference belongs to an imageStream
 
     $scope.projectName = $routeParams.project;
     $scope.name = $routeParams.deployment;
+    $scope.replicaSetsForDeployment = {};
+    $scope.unfilteredReplicaSetsForDeployment  = {};
+    $scope.emptyMessage = "Loading...";
     $scope.forms = {};
     $scope.alerts = {};
     $scope.imagesByDockerReference = {};
@@ -185,10 +189,15 @@ angular.module('openshiftConsole')
               group: 'extensions',
               resource: 'replicasets'
             }, context, function(replicaSetData) {
+              $scope.emptyMessage = "No deployments to show";
+
               var replicaSets = replicaSetData.by('metadata.name');
               replicaSets = OwnerReferencesService.filterForController(replicaSets, deployment);
               $scope.inProgressDeployment = _.chain(replicaSets).filter('status.replicas').size() > 1;
-              $scope.replicaSetsForDeployment = DeploymentsService.sortByRevision(replicaSets);
+
+              $scope.unfilteredReplicaSetsForDeployment = DeploymentsService.sortByRevision(replicaSets);
+              $scope.replicaSetsForDeployment = LabelFilter.getLabelSelector().select($scope.unfilteredReplicaSetsForDeployment);
+              $scope.orderedReplicaSetsForDeployment = $scope.replicaSetsForDeployment;
             }));
           },
           // failure
@@ -260,6 +269,28 @@ angular.module('openshiftConsole')
           Logger.log("builds (subscribe)", $scope.builds);
         }));
 
+        function updateFilterWarning() {
+          if (!LabelFilter.getLabelSelector().isEmpty() && $.isArray($scope.replicaSetsForDeployment) && !$scope.replicaSetsForDeployment.length && !$.isEmptyObject($scope.unfilteredReplicaSetsForDeployment)) {
+            $scope.alerts["deployments"] = {
+              type: "warning",
+              details: "The active filters are hiding all deployments."
+            };
+          }
+          else {
+            delete $scope.alerts["deployments"];
+          }
+        }
+
+        LabelFilter.onActiveFiltersChanged(function(labelSelector) {
+          // trigger a digest loop
+          $scope.$apply(function() {
+            $scope.replicaSetsForDeployment = labelSelector.select($scope.unfilteredReplicaSetsForDeployment);
+            $scope.orderedReplicaSetsForDeployment = $scope.replicaSetsForDeployment;
+
+            updateFilterWarning();
+          });
+        });
+
         $scope.scale = function(replicas) {
           var showScalingError = function(result) {
             $scope.alerts = $scope.alerts || {};

app/views/browse/deployment.html

@@ -92,7 +92,9 @@ <h1 class="contains-actions">
               <uib-tabset>
                 <uib-tab active="selectedTab.history">
                   <uib-tab-heading>History</uib-tab-heading>
-                  <div ng-if="replicaSetsForDeployment | hashSize">
+                    <div class="table-filter-wrapper">
+                      <project-filter></project-filter>
+                    </div>
                     <table class="table table-bordered table-hover table-mobile table-layout-fixed">
                       <colgroup>
                         <col class="col-sm-2">
@@ -108,8 +110,11 @@ <h1 class="contains-actions">
                           <th>Created</th>
                         </tr>
                       </thead>
-                      <tbody>
-                        <tr ng-repeat="replicaSet in replicaSetsForDeployment">
+                      <tbody ng-if="(replicaSetsForDeployment | hashSize) == 0">
+                        <tr><td colspan="4"><em>{{emptyMessage}}</em></td></tr>
+                      </tbody>
+                      <tbody ng-if="(replicaSetsForDeployment | hashSize) > 0">
+                        <tr ng-repeat="replicaSet in orderedReplicaSetsForDeployment">
                           <td data-title="Version">
                             #{{replicaSet | annotation : 'deployment.kubernetes.io/revision'}}
                           </td>
@@ -125,7 +130,6 @@ <h1 class="contains-actions">
                         </tr>
                       </tbody>
                     </table>
-                  </div>
                 </uib-tab>
                 <uib-tab active="selectedTab.configuration">
                   <uib-tab-heading>Configuration</uib-tab-heading>

dist/scripts/scripts.js

@@ -5355,19 +5355,19 @@ a.deploymentConfigs = b.select(a.unfilteredDeploymentConfigs), a.replicationCont
 d.unwatchAll(n);
 });
 }));
-} ]), angular.module("openshiftConsole").controller("DeploymentController", [ "$scope", "$filter", "$routeParams", "DataService", "DeploymentsService", "EnvironmentService", "HPAService", "ImageStreamResolver", "ModalsService", "Navigate", "OwnerReferencesService", "Logger", "ProjectsService", "StorageService", function(a, b, c, d, e, f, g, h, i, j, k, l, m, n) {
-var o = {};
-a.projectName = c.project, a.name = c.deployment, a.forms = {}, a.alerts = {}, a.imagesByDockerReference = {}, a.breadcrumbs = [ {
+} ]), angular.module("openshiftConsole").controller("DeploymentController", [ "$scope", "$filter", "$routeParams", "DataService", "DeploymentsService", "EnvironmentService", "HPAService", "ImageStreamResolver", "ModalsService", "Navigate", "OwnerReferencesService", "Logger", "ProjectsService", "StorageService", "LabelFilter", function(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) {
+var p = {};
+a.projectName = c.project, a.name = c.deployment, a.replicaSetsForDeployment = {}, a.unfilteredReplicaSetsForDeployment = {}, a.emptyMessage = "Loading...", a.forms = {}, a.alerts = {}, a.imagesByDockerReference = {}, a.breadcrumbs = [ {
 title:"Deployments",
 link:"project/" + c.project + "/browse/deployments"
 }, {
 title:c.deployment
 } ], a.healthCheckURL = j.healthCheckURL(c.project, "Deployment", c.deployment, "extensions");
-var p = !1, q = function(b, c) {
-if (!p) {
+var q = !1, r = function(b, c) {
+if (!q) {
 if (!a.forms.deploymentEnvVars || a.forms.deploymentEnvVars.$pristine) return void (a.updatedDeployment = f.copyAndNormalize(b));
 if (f.isEnvironmentEqual(b, c)) return void (a.updatedDeployment = f.mergeEdits(a.updatedDeployment, b));
-p = !0, a.alerts["env-conflict"] = {
+q = !0, a.alerts["env-conflict"] = {
 type:"warning",
 message:"The environment variables for the deployment have been updated in the background. Saving your changes may create a conflict or cause loss of data.",
 links:[ {
@@ -5378,17 +5378,23 @@ return a.clearEnvVarUpdates(), !0;
 } ]
 };
 }
-}, r = b("orderByDisplayName"), s = b("getErrorDetails"), t = function(b, c) {
+}, s = b("orderByDisplayName"), t = b("getErrorDetails"), u = function(b, c) {
 a.alerts["from-value-objects"] = {
 type:"error",
 message:b,
 details:c
 };
-}, u = [];
+}, v = [];
 m.get(c.project).then(_.spread(function(j, m) {
+function w() {
+o.getLabelSelector().isEmpty() || !$.isArray(a.replicaSetsForDeployment) || a.replicaSetsForDeployment.length || $.isEmptyObject(a.unfilteredReplicaSetsForDeployment) ? delete a.alerts.deployments :a.alerts.deployments = {
+type:"warning",
+details:"The active filters are hiding all deployments."
+};
+}
 a.project = j, a.projectContext = m;
-var v, w = {}, x = function() {
-g.getHPAWarnings(a.deployment, a.autoscalers, w, j).then(function(b) {
+var x, y = {}, z = function() {
+g.getHPAWarnings(a.deployment, a.autoscalers, y, j).then(function(b) {
 a.hpaWarnings = b;
 });
 };
@@ -5398,11 +5404,11 @@ resource:"deployments"
 }, c.deployment, m, {
 errorNotification:!1
 }).then(function(g) {
-a.loaded = !0, a.deployment = g, x(), a.saveEnvVars = function() {
-f.compact(a.updatedDeployment), v = d.update({
+a.loaded = !0, a.deployment = g, z(), a.saveEnvVars = function() {
+f.compact(a.updatedDeployment), x = d.update({
 group:"extensions",
 resource:"deployments"
-}, c.deployment, a.updatedDeployment, m), v.then(function() {
+}, c.deployment, a.updatedDeployment, m), x.then(function() {
 a.alerts.saveEnvSuccess = {
 type:"success",
 message:c.deployment + " was updated."
@@ -5414,11 +5420,11 @@ message:c.deployment + " was not updated.",
 details:b("getErrorDetails")(d)
 };
 })["finally"](function() {
-v = null;
+x = null;
 });
 }, a.clearEnvVarUpdates = function() {
-a.updatedDeployment = f.copyAndNormalize(a.deployment), a.forms.deploymentEnvVars.$setPristine(), p = !1;
-}, u.push(d.watchObject({
+a.updatedDeployment = f.copyAndNormalize(a.deployment), a.forms.deploymentEnvVars.$setPristine(), q = !1;
+}, v.push(d.watchObject({
 group:"extensions",
 resource:"deployments"
 }, c.deployment, m, function(b, c) {
@@ -5427,15 +5433,16 @@ type:"warning",
 message:"This deployment has been deleted."
 });
 var d = a.deployment;
-a.deployment = b, a.updatingPausedState = !1, x(), q(b, d), v ? v["finally"](function() {
-q(b, d);
-}) :q(b, d), h.fetchReferencedImageStreamImages([ b.spec.template ], a.imagesByDockerReference, o, m);
-})), u.push(d.watch({
+a.deployment = b, a.updatingPausedState = !1, z(), r(b, d), x ? x["finally"](function() {
+r(b, d);
+}) :r(b, d), h.fetchReferencedImageStreamImages([ b.spec.template ], a.imagesByDockerReference, p, m);
+})), v.push(d.watch({
 group:"extensions",
 resource:"replicasets"
 }, m, function(b) {
+a.emptyMessage = "No deployments to show";
 var c = b.by("metadata.name");
-c = k.filterForController(c, g), a.inProgressDeployment = _.chain(c).filter("status.replicas").size() > 1, a.replicaSetsForDeployment = e.sortByRevision(c);
+c = k.filterForController(c, g), a.inProgressDeployment = _.chain(c).filter("status.replicas").size() > 1, a.unfilteredReplicaSetsForDeployment = e.sortByRevision(c), a.replicaSetsForDeployment = o.getLabelSelector().select(a.unfilteredReplicaSetsForDeployment), a.orderedReplicaSetsForDeployment = a.replicaSetsForDeployment;
 }));
 }, function(c) {
 a.loaded = !0, a.alerts.load = {
@@ -5444,33 +5451,37 @@ message:404 === c.status ? "This deployment can not be found, it may have been d
 details:b("getErrorDetails")(c)
 };
 }), d.list("limitranges", m).then(function(a) {
-w = a.by("metadata.name"), x();
+y = a.by("metadata.name"), z();
 });
-var y = [], z = [];
+var A = [], B = [];
 a.valueFromObjects = [], d.list("configmaps", m, null, {
 errorNotification:!1
 }).then(function(b) {
-y = r(b.by("metadata.name")), a.valueFromObjects = y.concat(z);
+A = s(b.by("metadata.name")), a.valueFromObjects = A.concat(B);
 }, function(a) {
-403 !== a.code && t("Could not load config maps", s(a));
+403 !== a.code && u("Could not load config maps", t(a));
 }), d.list("secrets", m, null, {
 errorNotification:!1
 }).then(function(b) {
-z = r(b.by("metadata.name")), a.valueFromObjects = z.concat(y);
+B = s(b.by("metadata.name")), a.valueFromObjects = B.concat(A);
 }, function(a) {
-403 !== a.code && t("Could not load secrets", s(a));
-}), u.push(d.watch("imagestreams", m, function(b) {
+403 !== a.code && u("Could not load secrets", t(a));
+}), v.push(d.watch("imagestreams", m, function(b) {
 var c = b.by("metadata.name");
-h.buildDockerRefMapForImageStreams(c, o), a.deployment && h.fetchReferencedImageStreamImages([ a.deployment.spec.template ], a.imagesByDockerReference, o, m), l.log("imagestreams (subscribe)", a.imageStreams);
-})), u.push(d.watch({
+h.buildDockerRefMapForImageStreams(c, p), a.deployment && h.fetchReferencedImageStreamImages([ a.deployment.spec.template ], a.imagesByDockerReference, p, m), l.log("imagestreams (subscribe)", a.imageStreams);
+})), v.push(d.watch({
 group:"autoscaling",
 resource:"horizontalpodautoscalers",
 version:"v1"
 }, m, function(b) {
-a.autoscalers = g.filterHPA(b.by("metadata.name"), "Deployment", c.deployment), x();
-})), u.push(d.watch("builds", m, function(b) {
+a.autoscalers = g.filterHPA(b.by("metadata.name"), "Deployment", c.deployment), z();
+})), v.push(d.watch("builds", m, function(b) {
 a.builds = b.by("metadata.name"), l.log("builds (subscribe)", a.builds);
-})), a.scale = function(c) {
+})), o.onActiveFiltersChanged(function(b) {
+a.$apply(function() {
+a.replicaSetsForDeployment = b.select(a.unfilteredReplicaSetsForDeployment), a.orderedReplicaSetsForDeployment = a.replicaSetsForDeployment, w();
+});
+}), a.scale = function(c) {
 var d = function(c) {
 a.alerts = a.alerts || {}, a.alerts.scale = {
 type:"error",
@@ -5501,7 +5512,7 @@ n.removeVolume(a.deployment, b, m);
 };
 d.then(e);
 }, a.$on("$destroy", function() {
-d.unwatchAll(u);
+d.unwatchAll(v);
 });
 }));
 } ]), angular.module("openshiftConsole").controller("DeploymentConfigController", [ "$scope", "$filter", "$routeParams", "BreadcrumbsService", "DataService", "DeploymentsService", "EnvironmentService", "HPAService", "ImageStreamResolver", "ModalsService", "Navigate", "NotificationsService", "Logger", "ProjectsService", "StorageService", "LabelFilter", "labelNameFilter", function(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q) {

dist/scripts/templates.js

@@ -2711,7 +2711,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<uib-tabset>\n" +
     "<uib-tab active=\"selectedTab.history\">\n" +
     "<uib-tab-heading>History</uib-tab-heading>\n" +
-    "<div ng-if=\"replicaSetsForDeployment | hashSize\">\n" +
+    "<div class=\"table-filter-wrapper\">\n" +
+    "<project-filter></project-filter>\n" +
+    "</div>\n" +
     "<table class=\"table table-bordered table-hover table-mobile table-layout-fixed\">\n" +
     "<colgroup>\n" +
     "<col class=\"col-sm-2\">\n" +
@@ -2727,8 +2729,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<th>Created</th>\n" +
     "</tr>\n" +
     "</thead>\n" +
-    "<tbody>\n" +
-    "<tr ng-repeat=\"replicaSet in replicaSetsForDeployment\">\n" +
+    "<tbody ng-if=\"(replicaSetsForDeployment | hashSize) == 0\">\n" +
+    "<tr><td colspan=\"4\"><em>{{emptyMessage}}</em></td></tr>\n" +
+    "</tbody>\n" +
+    "<tbody ng-if=\"(replicaSetsForDeployment | hashSize) > 0\">\n" +
+    "<tr ng-repeat=\"replicaSet in orderedReplicaSetsForDeployment\">\n" +
     "<td data-title=\"Version\">\n" +
     "#{{replicaSet | annotation : 'deployment.kubernetes.io/revision'}}\n" +
     "</td>\n" +
@@ -2744,7 +2749,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</tr>\n" +
     "</tbody>\n" +
     "</table>\n" +
-    "</div>\n" +
     "</uib-tab>\n" +
     "<uib-tab active=\"selectedTab.configuration\">\n" +
     "<uib-tab-heading>Configuration</uib-tab-heading>\n" +