Add a history view to the tags page. Next step will add the ability to revert back in time

static/js/directives/repo-view/repo-panel-tags.js

@@ -25,6 +25,7 @@ angular.module('quay').directive('repoPanelTags', function () {
 
       $scope.iterationState = {};
       $scope.tagActionHandler = null;
+      $scope.showingHistory = false;
 
       var setTagState = function() {
         if (!$scope.repository || !$scope.selectedTags) { return; }
@@ -118,8 +119,142 @@ angular.module('quay').directive('repoPanelTags', function () {
 
         // Process each of the tags.
         setTagState();
+
+        if ($scope.showingHistory) {
+          loadTimeline();
+        }
       });
 
+      var loadTimeline = function() {
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        ApiService.listRepoTags(null, params).then(function(resp) {
+          var tagData = [];
+          var currentTags = {};
+
+          resp.tags.forEach(function(tag) {
+            var tagName = tag.name;
+            var imageId = tag.docker_image_id;
+            var oldImageId = null;
+
+            if (tag.end_ts) {
+              var action = 'delete';
+
+              // If the end time matches the existing start time for this tag, then this is a move
+              // instead of a delete.
+              var currentTime = tag.end_ts * 1000;
+              if (currentTags[tagName] && currentTags[tagName].start_ts == tag.end_ts) {
+                action = 'move';
+
+                // Remove the create.
+                var index = tagData.indexOf(currentTags[tagName]);
+                var createEntry = tagData.splice(index, 1)[0];
+
+                imageId = createEntry.docker_image_id;
+                oldImageId = tag.docker_image_id;
+              }
+
+              // Add the delete/move.
+              tagData.push({
+                'tag_name': tagName,
+                'action': action,
+                'start_ts': tag.start_ts,
+                'end_ts': tag.end_ts,
+                'time': currentTime,
+                'docker_image_id': imageId,
+                'old_docker_image_id': oldImageId
+              })
+            }
+
+            if (tag.start_ts) {
+              var currentTime = tag.start_ts * 1000;
+              var create = {
+                'tag_name': tagName,
+                'action': 'create',
+                'start_ts': tag.start_ts,
+                'end_ts': tag.end_ts,
+                'time': currentTime,
+                'docker_image_id': tag.docker_image_id,
+                'old_docker_image_id': ''
+              };
+
+              tagData.push(create);
+              currentTags[tagName] = create;
+            }
+          });
+
+          tagData.sort(function(a, b) {
+            return b.time - a.time;
+          });
+
+          for (var i = tagData.length - 1; i >= 1; --i) {
+            var current = tagData[i];
+            var next = tagData[i - 1];
+
+            if (new Date(current.time).getDate() != new Date(next.time).getDate()) {
+              tagData.splice(i - 1, 0, {
+                'date_break': true,
+                'date': new Date(current.time)
+              });
+              i--;
+            }
+          }
+
+          if (tagData.length > 0) {
+            tagData.splice(0, 0, {
+              'date_break': true,
+              'date': new Date(tagData[0].time)
+            });
+          }
+
+          $scope.tagHistoryData = tagData;
+        });
+      };
+
+      $scope.getEntryClasses = function(entry, historyFilter) {
+        var classes = entry.action + ' ';
+        if (!historyFilter || !entry.action) {
+          return classes;
+        }
+
+        var parts = (historyFilter || '').split(',');
+        var isMatch = parts.some(function(part) {
+          if (part && entry.tag_name) {
+            isMatch = entry.tag_name.indexOf(part) >= 0;
+            isMatch = isMatch || entry.docker_image_id.indexOf(part) >= 0;
+            isMatch = isMatch || entry.old_docker_image_id.indexOf(part) >= 0;
+            return isMatch;
+          }
+        });
+
+        classes += isMatch ? 'filtered-match' : 'filtered-mismatch';
+        return classes;
+      };
+
+      $scope.showHistory = function(value, opt_tagname) {
+        if (opt_tagname) {
+          $scope.options.historyFilter = opt_tagname;
+        } else {
+          $scope.options.historyFilter = '';
+        }
+
+        if ($scope.showingHistory == value) {
+          return;
+        }
+
+        $scope.showingHistory = value;
+
+        if ($scope.showingHistory) {
+          loadTimeline();
+        }
+      };
+
+      $scope.toggleHistory = function() {
+        $scope.showHistory(!$scope.showingHistory);
+      };
+
       $scope.trackLineClass = function(index, track_info) {
         var startIndex = $.inArray(track_info.tags[0], $scope.tags);
         var endIndex = $.inArray(track_info.tags[track_info.tags.length - 1], $scope.tags);
@@ -206,6 +341,22 @@ angular.module('quay').directive('repoPanelTags', function () {
           return $scope.imageIDFilter(it.image_id, tag);
         });
       };
+
+      $scope.getTagNames = function(checked) {
+        var names = checked.map(function(tag) {
+          return tag.name;
+        });
+
+        return names.join(',');
+      };
+
+      $scope.isChecked = function(tagName, checked) {
+        return checked.some(function(tag) {
+          if (tag.name == tagName) {
+            return true;
+          }
+        });
+      };
     }
   };
   return directiveDefinitionObject;

static/js/directives/ui/image-link.js

@@ -0,0 +1,19 @@
+/**
+ * An element which displays a link to a repository image.
+ */
+angular.module('quay').directive('imageLink', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/image-link.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'imageId': '=imageId'
+    },
+    controller: function($scope, $element) {
+    }
+  };
+  return directiveDefinitionObject;
+});