From 2a77bd2c9281eeeb5500a589dc0dd438d141b291 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Wed, 15 Apr 2015 18:39:05 -0400
Subject: [PATCH] - UI improvements in prep for adding undo ability - Move the
 tag history into its own directive and clean up the code

---
 .../directives/repo-view/repo-panel-tags.css  | 127 --------------
 static/css/directives/ui/repo-tag-history.css | 131 +++++++++++++++
 static/directives/repo-tag-history.html       |  45 +++++
 .../directives/repo-view/repo-panel-tags.html |  54 +-----
 .../directives/repo-view/repo-panel-tags.js   | 135 +--------------
 static/js/directives/ui/repo-tag-history.js   | 155 ++++++++++++++++++
 6 files changed, 335 insertions(+), 312 deletions(-)
 create mode 100644 static/css/directives/ui/repo-tag-history.css
 create mode 100644 static/directives/repo-tag-history.html
 create mode 100644 static/js/directives/ui/repo-tag-history.js

diff --git a/static/css/directives/repo-view/repo-panel-tags.css b/static/css/directives/repo-view/repo-panel-tags.css
index 1a81a5604..9df9c2679 100644
--- a/static/css/directives/repo-view/repo-panel-tags.css
+++ b/static/css/directives/repo-view/repo-panel-tags.css
@@ -68,131 +68,4 @@
 .repo-panel-tags-element .options-col .fa-download {
   color: #999;
   cursor: pointer;
-}
-
-.repo-panel-tags-element .history-list {
-  margin: 10px;
-  border-left: 2px solid #eee;
-}
-
-.repo-panel-tags-element .history-entry {
-  position:relative;
-  margin-top:  20px;
-  padding-left: 26px;
-
-  transition: all 350ms ease-in-out;
-}
-
-.repo-panel-tags-element .history-entry .history-text {
-  transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
-  overflow: hidden;
-  height: 40px;
-}
-
-.repo-panel-tags-element .history-entry.filtered-mismatch {
-  margin-top: 10px;
-}
-
-.repo-panel-tags-element .history-entry.filtered-mismatch .history-text {
-  height: 18px;
-  opacity: 0;
-}
-
-.repo-panel-tags-element .history-entry.filtered-mismatch .history-icon {
-  opacity: 0.5;
-  transform: scale(0.5, 0.5);
-}
-
-.repo-panel-tags-element .history-entry .history-date-break {
-  font-size: 16px;
-}
-
-.repo-panel-tags-element .history-entry .history-date-break:before {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  width: 12px;
-  height: 12px;
-  background: #ccc;
-  top: 4px;
-  left: -7px;
-}
-
-.repo-panel-tags-element .history-entry .history-icon {
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  line-height: 33px;
-  text-align: center;
-  font-size: 20px;
-  color: white;
-  background: #ccc;
-
-  position: absolute;
-  left: -17px;
-  top: -4px;
-  display: inline-block;
-
-  transition: all 350ms ease-in-out;
-}
-
-.repo-panel-tags-element .history-entry.move .history-icon:before {
-  content: "\f061";
-  font-family: FontAwesome;
-}
-
-.repo-panel-tags-element .history-entry.create .history-icon:before {
-  content: "\f02b";
-  font-family: FontAwesome;
-}
-
-.repo-panel-tags-element .history-entry.delete .history-icon:before {
-  content: "\f014";
-  font-family: FontAwesome;
-}
-
-.repo-panel-tags-element .history-entry.move .history-icon {
-  background-color: #1f77b4;
-}
-
-.repo-panel-tags-element .history-entry.create .history-icon {
-  background-color: #98df8a;
-}
-
-.repo-panel-tags-element .history-entry.delete .history-icon {
-  background-color: #ff9896;
-}
-
-.repo-panel-tags-element .history-entry .history-icon .fa-tag {
-  margin-right: 0px;
-}
-
-.repo-panel-tags-element .history-entry .tag-span {
-  display: inline-block;
-  border-radius: 4px;
-  padding: 2px;
-  background: #eee;
-  padding-right: 6px;
-  color: black;
-  cursor: pointer;
-}
-
-.repo-panel-tags-element .history-entry .tag-span.checked {
-  background: #F6FCFF;
-}
-
-.repo-panel-tags-element .history-entry .tag-span:before {
-  content: "\f02b";
-  font-family: FontAwesome;
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
-.repo-panel-tags-element .history-entry .history-description {
-  color: #777;
-}
-
-.repo-panel-tags-element .history-entry .history-datetime {
-  font-size: 12px;
-  color: #ccc;
 }
\ No newline at end of file
diff --git a/static/css/directives/ui/repo-tag-history.css b/static/css/directives/ui/repo-tag-history.css
new file mode 100644
index 000000000..7ee39b7bc
--- /dev/null
+++ b/static/css/directives/ui/repo-tag-history.css
@@ -0,0 +1,131 @@
+.repo-tag-history-element .history-list {
+  margin: 10px;
+  border-left: 2px solid #eee;
+  margin-right: 150px;
+}
+
+.repo-tag-history-element .history-entry {
+  position:relative;
+  margin-top:  20px;
+  padding-left: 26px;
+
+  transition: all 350ms ease-in-out;
+}
+
+.repo-tag-history-element .history-entry .history-text {
+  transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
+  overflow: hidden;
+  height: 40px;
+}
+
+.repo-tag-history-element .history-entry.filtered-mismatch {
+  margin-top: 10px;
+}
+
+.repo-tag-history-element .history-entry.filtered-mismatch .history-text {
+  height: 18px;
+  opacity: 0;
+}
+
+.repo-tag-history-element .history-entry.filtered-mismatch .history-icon {
+  opacity: 0.5;
+  transform: scale(0.5, 0.5);
+}
+
+.repo-tag-history-element .history-entry.filtered-mismatch.current .history-icon {
+  background-color: #ccc !important;
+}
+
+.repo-tag-history-element .history-entry .history-date-break {
+  font-size: 16px;
+}
+
+.repo-tag-history-element .history-entry .history-date-break:before {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  background: #ccc;
+  top: 4px;
+  left: -7px;
+}
+
+.repo-tag-history-element .history-entry .history-icon {
+  position: absolute;
+  left: -17px;
+  top: -4px;
+
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  font-size: 20px;
+  color: white;
+  background: #ccc;
+
+  display: inline-block;
+  transition: all 350ms ease-in-out;
+}
+
+.repo-tag-history-element .history-entry.move .history-icon:before {
+  content: "\f061";
+  font-family: FontAwesome;
+}
+
+.repo-tag-history-element .history-entry.create .history-icon:before {
+  content: "\f02b";
+  font-family: FontAwesome;
+}
+
+.repo-tag-history-element .history-entry.delete .history-icon:before {
+  content: "\f014";
+  font-family: FontAwesome;
+}
+
+.repo-tag-history-element .history-entry.current.move .history-icon {
+  background-color: #77BFF0;
+}
+
+.repo-tag-history-element .history-entry.current.create .history-icon {
+  background-color: #98df8a;
+}
+
+.repo-tag-history-element .history-entry.current.delete .history-icon {
+  background-color: #ff9896;
+}
+
+.repo-tag-history-element .history-entry .history-icon .fa-tag {
+  margin-right: 0px;
+}
+
+.repo-tag-history-element .history-entry .tag-span {
+  display: inline-block;
+  border-radius: 4px;
+  padding: 2px;
+  background: #eee;
+  padding-right: 6px;
+  color: black;
+  cursor: pointer;
+}
+
+.repo-tag-history-element .history-entry .tag-span.checked {
+  background: #F6FCFF;
+}
+
+.repo-tag-history-element .history-entry .tag-span:before {
+  content: "\f02b";
+  font-family: FontAwesome;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.repo-tag-history-element .history-entry .history-description {
+  color: #777;
+}
+
+.repo-tag-history-element .history-entry .history-datetime {
+  font-size: 12px;
+  color: #ccc;
+}
\ No newline at end of file
diff --git a/static/directives/repo-tag-history.html b/static/directives/repo-tag-history.html
new file mode 100644
index 000000000..73bd1c6b2
--- /dev/null
+++ b/static/directives/repo-tag-history.html
@@ -0,0 +1,45 @@
+ <div class="repo-tag-history-element">
+   <div class="cor-loader" ng-if="!historyEntries"></div>
+
+   <span class="co-filter-box" style="float:right">
+    <input class="form-control" type="text" ng-model="filter" placeholder="Filter History...">
+   </span>
+
+   <div class="history-list">
+     <div class="empty" ng-if="!historyEntries.length">
+      <div class="empty-primary-msg">This repository is empty.</div>
+      <div class="empty-secondary-msg">Push a tag or initiate a build to populate this repository.</div>
+     </div>
+
+     <div class="history-entry" ng-repeat="entry in historyEntries"
+          ng-class="getEntryClasses(entry, filter)">
+        <div class="history-date-break" ng-if="entry.date_break">
+          {{ entry.date | amDateFormat:'dddd, MMMM Do YYYY' }}
+        </div>
+        <div ng-if="!entry.date_break">
+          <div class="history-icon-container"><div class="history-icon"></div></div>
+          <div class="history-text">
+            <div class="history-description">
+              <span class="tag-span"
+                    ng-click="showHistory(true, entry.tag_name)">{{ entry.tag_name }}</span>
+              <span ng-switch on="entry.action">
+                <span ng-switch-when="create">
+                  was created pointing to image <span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
+                </span>
+                <span ng-switch-when="delete">
+                  was deleted
+                </span>
+                <span ng-switch-when="move">
+                  was moved to image
+                  <span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
+                  from image
+                  <span class="image-link" repository="repository" image-id="entry.old_docker_image_id"></span>
+                </span>
+              </span>
+            </div>
+            <div class="history-datetime">{{ entry.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</div>
+          </div>
+        </div>
+     </div>
+   </div>
+ </div>
\ No newline at end of file
diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html
index 13f82ed80..9454d8f4e 100644
--- a/static/directives/repo-view/repo-panel-tags.html
+++ b/static/directives/repo-view/repo-panel-tags.html
@@ -1,5 +1,5 @@
 <div class="repo-panel-tags-element">
-  <div class="tab-header-controls">
+  <div class="tab-header-controls" ng-show="images">
     <div class="btn-group btn-group-sm" ng-show="repository.can_write">
       <button class="btn" ng-class="!showingHistory ? 'btn-primary active' : 'btn-default'" ng-click="showHistory(false)">
         <i class="fa fa-tags"></i>Current Tags
@@ -13,56 +13,8 @@
  <h3 class="tab-header">Repository Tags</h3>
 
  <!-- History view -->
- <div ng-show="showingHistory">
-   <div ng-show="showingHistory">
-     <div class="cor-loader" ng-if="!tagHistoryData"></div>
-   </div>
-
-   <div style="height: 40px;">
-     <span class="co-filter-box" style="float:right">
-      <input class="form-control" type="text" ng-model="options.historyFilter" placeholder="Filter History...">
-     </span>
-   </div>
-
-   <div class="history-list">
-     <div class="empty" ng-if="!tagHistoryData.length">
-      <div class="empty-primary-msg">This repository is empty.</div>
-      <div class="empty-secondary-msg">Push a tag or initiate a build to populate this repository.</div>
-     </div>
-
-     <div class="history-entry" ng-repeat="entry in tagHistoryData"
-          ng-class="getEntryClasses(entry, options.historyFilter)">
-        <div class="history-date-break" ng-if="entry.date_break">
-          {{ entry.date | amDateFormat:'dddd, MMMM Do YYYY' }}
-        </div>
-        <div ng-if="!entry.date_break">
-          <div class="history-icon"></div>
-          <div class="history-text">
-            <div class="history-description">
-              <span class="tag-span"
-                    ng-class="isChecked(entry.tag_name, checkedTags.checked) ? 'checked' : ''"
-                    ng-click="showHistory(true, entry.tag_name)">{{ entry.tag_name }}</span>
-              <span ng-switch on="entry.action">
-                <span ng-switch-when="create">
-                  was created pointing to image <span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
-                </span>
-                <span ng-switch-when="delete">
-                  was deleted
-                </span>
-                <span ng-switch-when="move">
-                  was moved to image
-                  <span class="image-link" repository="repository" image-id="entry.docker_image_id"></span>
-                  from image
-                  <span class="image-link" repository="repository" image-id="entry.old_docker_image_id"></span>
-                </span>
-              </span>
-            </div>
-            <div class="history-datetime">{{ entry.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</div>
-          </div>
-        </div>
-     </div>
-   </div>
- </div>
+ <div class="repo-tag-history" repository="repository" filter="options.historyFilter"
+      is-enabled="showingHistory" ng-show="showingHistory"></div>
 
  <!-- Normal View -->
  <div class="resource-view" resource="imagesResource" error-message="'Could not load images'"
diff --git a/static/js/directives/repo-view/repo-panel-tags.js b/static/js/directives/repo-view/repo-panel-tags.js
index 74e83847a..3d0604503 100644
--- a/static/js/directives/repo-view/repo-panel-tags.js
+++ b/static/js/directives/repo-view/repo-panel-tags.js
@@ -119,136 +119,11 @@ 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, 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.options.historyFilter = opt_tagname ? opt_tagname : '';
         $scope.showingHistory = value;
-
-        if ($scope.showingHistory) {
-          loadTimeline();
-        }
       };
 
       $scope.toggleHistory = function() {
@@ -349,14 +224,6 @@ angular.module('quay').directive('repoPanelTags', function () {
 
         return names.join(',');
       };
-
-      $scope.isChecked = function(tagName, checked) {
-        return checked.some(function(tag) {
-          if (tag.name == tagName) {
-            return true;
-          }
-        });
-      };
     }
   };
   return directiveDefinitionObject;
diff --git a/static/js/directives/ui/repo-tag-history.js b/static/js/directives/ui/repo-tag-history.js
new file mode 100644
index 000000000..840441c1c
--- /dev/null
+++ b/static/js/directives/ui/repo-tag-history.js
@@ -0,0 +1,155 @@
+/**
+ * An element which displays its contents wrapped in an <a> tag, but only if the href is not null.
+ */
+angular.module('quay').directive('repoTagHistory', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repo-tag-history.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'filter': '=filter',
+      'isEnabled': '=isEnabled'
+    },
+    controller: function($scope, $element, ApiService) {
+      $scope.tagHistoryData = null;
+      $scope.tagHistoryLeaves = {};
+
+      var loadTimeline = function() {
+        if (!$scope.repository || !$scope.isEnabled) { return; }
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        ApiService.listRepoTags(null, params).then(function(resp) {
+          processTags(resp.tags);
+        });
+      };
+
+      $scope.$watch('isEnabled', loadTimeline);
+      $scope.$watch('repository', loadTimeline);
+
+      var processTags = function(tags) {
+        var entries = [];
+        var tagEntries = {};
+
+        // For each tag, turn the tag into create, move, delete, restore, etc entries.
+        tags.forEach(function(tag) {
+          var tagName = tag.name;
+          var dockerImageId = tag.docker_image_id;
+
+          if (!tagEntries[tagName]) {
+            tagEntries[tagName] = [];
+          }
+
+          var removeEntry = function(entry) {
+            entries.splice(entries.indexOf(entry), 1);
+            tagEntries[entry.tag_name].splice(tagEntries[entry.tag_name].indexOf(entry), 1);
+          };
+
+          var addEntry = function(action, time, opt_docker_id, opt_old_docker_id) {
+            var entry = {
+              'tag_name': tagName,
+              'action': action,
+              'start_ts': tag.start_ts,
+              'end_ts': tag.end_ts,
+              'time': time * 1000, // JS expects ms, not s since epoch.
+              'docker_image_id': opt_docker_id || dockerImageId,
+              'old_docker_image_id': opt_old_docker_id || ''
+            };
+
+            tagEntries[tagName].push(entry);
+            entries.push(entry);
+          };
+
+          // If the tag has an end time, it was either deleted or moved.
+          if (tag.end_ts) {
+            // If a future entry exists with a start time equal to the end time for this tag,
+            // then the action was a move, rather than a delete and a create.
+            var currentEntries = tagEntries[tagName];
+            var futureEntry = currentEntries.length > 0 ? currentEntries[currentEntries.length - 1] : {};
+            if (futureEntry.start_ts == tag.end_ts) {
+              removeEntry(futureEntry);
+              addEntry('move', tag.end_ts, futureEntry.docker_image_id, dockerImageId);
+            } else {
+              addEntry('delete', tag.end_ts)
+            }
+          }
+
+          // If the tag has a start time, it was created.
+          if (tag.start_ts) {
+            addEntry('create', tag.start_ts);
+          }
+        });
+
+        // Sort the overall entries by datetime descending.
+        entries.sort(function(a, b) {
+          return b.time - a.time;
+        });
+
+        // Sort the tag entries by datetime descending.
+        Object.keys(tagEntries).forEach(function(name) {
+          var te = tagEntries[name];
+          te.sort(function(a, b) {
+            return b.time - a.time;
+          });
+        });
+
+        // Add date dividers in.
+        for (var i = entries.length - 1; i >= 1; --i) {
+          var current = entries[i];
+          var next = entries[i - 1];
+
+          if (new Date(current.time).getDate() != new Date(next.time).getDate()) {
+            entries.splice(i, 0, {
+              'date_break': true,
+              'date': new Date(current.time)
+            });
+            i--;
+          }
+        }
+
+        // Add the top-level date divider.
+        if (entries.length > 0) {
+          entries.splice(0, 0, {
+            'date_break': true,
+            'date': new Date(entries[0].time)
+          });
+        }
+
+        $scope.historyEntries = entries;
+        $scope.historyEntryMap = tagEntries;
+      };
+
+      $scope.getEntryClasses = function(entry, historyFilter) {
+        if (!entry.action) { return ''; }
+
+        var classes = entry.action + ' ';
+        if ($scope.historyEntryMap[entry.tag_name][0] == entry) {
+          classes += ' current ';
+        }
+
+        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;
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
\ No newline at end of file