Work in progress: Show the diff information in the UI

static/css/quay.css

@@ -486,6 +486,11 @@ p.editable:hover i {
     margin-left: 80px;
 }
 
+.repo dl.dl-normal dd {
+  padding-left: 14px;
+  margin-bottom: 10px;
+}
+
 .repo .header h3 {
   display: inline-block;
 }
@@ -660,6 +665,68 @@ p.editable:hover i {
   margin: 0px;
 }
 
+.repo .changes-container:before {
+  content: "File Changes: ";
+  display: inline-block;
+  margin-right: 10px;
+  font-weight: bold;
+  float: left;
+  padding-top: 4px;
+}
+
+.repo .changes-count-container {
+  text-align: center;
+}
+
+.repo .change-count {
+  font-size: 18px;
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.repo .changes-container .added i {
+  color: rgb(73, 209, 73);
+}
+
+.repo .change-container .removed i {
+  color: rgb(209, 73, 73);
+}
+
+.repo .changes-container .changed i {
+  color: rgb(73, 100, 209);
+}
+
+.repo .change-count:last-child {
+  margin-right: 0px;
+}
+
+.repo .change-count i {
+  font-size: 20px;
+  vertical-align: middle;
+}
+
+.repo .change i {
+  float: right;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+
+.repo .more-changes {
+  padding: 6px;
+}
+
+.repo #collapseChanges .well {
+  margin-top: 10px;
+  margin-bottom: 0px;
+}
+
+.repo #collapseChanges .change {
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .navbar-nav > li > .user-dropdown {
   padding-top: 9px;
   padding-bottom: 9px;

static/js/controllers.js

@@ -360,8 +360,30 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $tim
     });
   };
 
+  $scope.loadImageChanges = function(image) {
+    $scope.currentImageChanges = null;
+    
+    var changesFetch = Restangular.one('repository/' + namespace + '/' + name + '/image/' + image.id + '/changes');
+    changesFetch.get().then(function(changeInfo) {
+      $scope.currentImageChanges = changeInfo;
+    }, function() {
+      $scope.currentImageChanges = {};
+    });
+  };
+
+  $scope.getMoreCount = function(changes) {
+    if (!changes) { return 0; }
+    var addedDisplayed = Math.min(15, changes.added.length);
+    var removedDisplayed = Math.min(15, changes.removed.length);
+    var changedDisplayed = Math.min(15, changes.changed.length);
+
+    return (changes.added.length + changes.removed.length + changes.changed.length) -
+      addedDisplayed - removedDisplayed - changedDisplayed;
+  };
+
   $scope.setImage = function(image) {
     $scope.currentImage = image;
+    $scope.loadImageChanges(image);
     if ($scope.tree) {
       $scope.tree.setImage($scope.currentImage.id);
     }
@@ -382,6 +404,7 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $tim
     if (proposedTag) {
       $scope.currentTag = proposedTag;
       $scope.currentImage = $scope.currentTag.image;
+      $scope.loadImageChanges($scope.currentImage);
       if ($scope.tree) {
         $scope.tree.setTag($scope.currentTag.name);
       } 

static/partials/view-repo.html

@@ -107,15 +107,58 @@
            
            <div class="panel-body">
              <div id="current-image">
-               <dl class="dl-horizontal">
+               <div ng-show="currentImage.comment">
+                 <blockquote style="margin-top: 10px;" ng-bind-html-unsafe="getMarkedDown(currentImage.comment)">
+                 </blockquote>
+               </div>
+
+	       <dl class="dl-normal">
                  <dt>Created</dt>
-                 <dd am-time-ago="parseDate(currentTag.image.created)"></dd>
+                 <dd am-time-ago="parseDate(currentImage.created)"></dd>
+		 <dt>Image ID</dt>
+		 <dd>{{ currentImage.id }}</dd>
                </dl>
 
-               <div ng-show="currentTag.image.comment">
+	       <!-- Image changes loading -->
-                 <strong>Description:</strong>
+	       <div ng-hide="currentImageChanges">
-                 <blockquote style="margin-top: 10px;" ng-bind-html-unsafe="getMarkedDown(currentTag.image.comment)">
+		 <i class="icon-spinner icon-spin icon-3x"></i>
-                 </blockquote>
+	       </div>
+
+	       <div class="changes-container" ng-show="currentImageChanges.changed">
+		 <div class="changes-count-container accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseChanges">
+		   <span class="change-count added" ng-show="currentImageChanges.added.length > 0" title="Files Added">
+		     <i class="icon-plus-sign-alt"></i>
+		     <b>{{currentImageChanges.added.length}}</b>
+		   </span>
+		   <span class="change-count removed" ng-show="currentImageChanges.removed.length > 0" title="Files Removed">
+		     <i class="icon-minus-sign-alt"></i>
+		     <b>{{currentImageChanges.removed.length}}</b>
+		   </span>
+		   <span class="change-count changed" ng-show="currentImageChanges.changed.length > 0" title="Files Changed">
+		     <i class="icon-edit-sign"></i>
+		     <b>{{currentImageChanges.changed.length}}</b>
+		   </span>
+		 </div>
+
+		 <div id="collapseChanges" class="panel-collapse collapse out">
+		   <div class="well well-sm">		     
+		     <div class="change added" ng-repeat="file in currentImageChanges.added | limitTo:5">
+		       <i class="icon-plus-sign-alt"></i>
+		       <span title="{{file}}">{{file}}</span>
+		     </div>
+		     <div class="change removed" ng-repeat="file in currentImageChanges.removed | limitTo:5">
+		       <i class="icon-minus-sign-alt"></i>
+		       <span title="{{file}}">{{file}}</span>
+		     </div>
+		     <div class="change changed" ng-repeat="file in currentImageChanges.changed | limitTo:5">
+		       <i class="icon-edit-sign"></i>
+		       <span title="{{file}}">{{file}}</span>
+		     </div>
+		   </div>
+		   <div class="more-changes" ng-show="getMoreCount(currentImageChanges) > 0">
+		     <a href="">And {{getMoreCount(currentImageChanges)}} more...</a>
+		   </div>
+		 </div>
                </div>
              </div>
            </div>