- Finished new image view

- Add the CoreOS icon font

external_libraries.py

@@ -21,12 +21,17 @@ EXTERNAL_CSS = [
   'netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css',
   'netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css',
   'fonts.googleapis.com/css?family=Source+Sans+Pro:400,700',
+  'cdn.core-os.net/icons/core-icons.css'
 ]
 
 EXTERNAL_FONTS = [
   'netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0',
   'netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0',
   'netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0',
+
+  'cdn.core-os.net/icons/core-icons.woff',
+  'cdn.core-os.net/icons/core-icons.ttf',
+  'cdn.core-os.net/icons/core-icons.svg',
 ]
 
 

static/css/directives/ui/image-view-layer.css

@@ -26,6 +26,10 @@
   color: black;
 }
 
+.image-view-layer-element .image-comment {
+  margin-bottom: 10px;
+}
+
 .image-view-layer-element .nondocker-command {
   font-family: monospace;
   padding: 2px;
@@ -54,7 +58,7 @@
 }
 
 .image-view-layer-element.last .image-layer-line {
-  bottom: 20px;
+  height: 16px;
 }
 
 .image-view-layer-element .image-layer-dot {
@@ -70,7 +74,6 @@
   z-index: 2;
 }
 
-
 .image-view-layer-element.first .image-layer-dot {
   background: #428bca;
 }

static/css/pages/image-view.css

@@ -13,4 +13,13 @@
   padding: 4px;
   display: inline-block;
   margin-right: 20px;
-}
+}
+
+.image-view .co-tab-content {
+  padding: 20px;
+  padding-top: 10px;
+}
+
+.image-view .co-tab-content h3 {
+  margin-bottom: 20px;
+}

static/css/quay.css

@@ -277,6 +277,7 @@ nav.navbar-default .navbar-nav>li>a.active {
 .dockerfile-command .command-title {
   font-family: Consolas, "Lucida Console", Monaco, monospace;
   padding-left: 90px;
+  display: inline-block;
 }
 
 .dockerfile-command .label {

static/js/directives/ui/image-view-layer.js

@@ -24,8 +24,9 @@ angular.module('quay').directive('imageViewLayer', function () {
         if (command[0] != '/bin/sh' || command[1] != '-c') { return ''; }
 
         var cmd = command[2];
-
-        if (cmd.substring(0, commandPrefix.length) != commandPrefix) { return ''; }
+        if (cmd.substring(0, commandPrefix.length) != commandPrefix) {
+          return 'RUN ' + cmd;
+        }
 
         return command[2].substr(commandPrefix.length + 1);
       };

static/js/pages/image-view.js

@@ -13,7 +13,7 @@
     }, ['old-layout']);
   }]);
 
-  function ImageViewCtrl($scope, $routeParams, $rootScope, ApiService, ImageMetadataService) {
+  function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService) {
     var namespace = $routeParams.namespace;
     var name = $routeParams.name;
     var imageid = $routeParams.image;
@@ -42,6 +42,44 @@
 
     loadImage();
     loadRepository();
+
+    $scope.downloadChanges = function() {
+      if ($scope.changesResource) { return; }
+
+      var params = {
+        'repository': namespace + '/' + name,
+        'image_id': imageid
+      };
+
+      $scope.changesResource = ApiService.getImageChangesAsResource(params).get(function(changes) {
+        var combinedChanges = [];
+        var addCombinedChanges = function(c, kind) {
+          for (var i = 0;  i < c.length; ++i) {
+            combinedChanges.push({
+              'kind': kind,
+              'file': c[i]
+            });
+          }
+        };
+
+        addCombinedChanges(changes.added, 'added');
+        addCombinedChanges(changes.removed, 'removed');
+        addCombinedChanges(changes.changed, 'changed');
+
+        $scope.combinedChanges = combinedChanges;
+        $scope.imageChanges = changes;
+        $scope.initializeTree();
+      });
+    };
+
+    $scope.initializeTree = function() {
+      if ($scope.tree) { return; }
+
+      $scope.tree = new ImageFileChangeTree($scope.image, $scope.combinedChanges);
+      $timeout(function() {
+        $scope.tree.draw('changes-tree-container');
+      }, 100);
+    };
   }
 
   function OldImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService) {

static/partials/image-view.html

@@ -10,20 +10,41 @@
         </a>
       </span>
       <span class="cor-title-content">
-        <i class="fa fa-database fa-lg" style="margin-right: 10px"></i>
+        <i class="fa fa-archive fa-lg" style="margin-right: 10px"></i>
         {{ image.id.substr(0, 12) }}
       </span>
     </div>
 
-    <div class="co-main-content-panel">
-      <div class="image-view-header">
-        <div class="image-id section"><i class="fa fa-code section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i> {{ image.id }}</div>
-        <div class="created section"><i class="fa fa-calendar section-icon" bs-tooltip="tooltip.title" data-title="Full Image ID"></i> {{ image.created | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</div>
-      </div>
 
-      <div class="image-view-layer" repository="repository" image="image" images="image.history"></div>
-      <div class="image-view-layer" repository="repository" image="parent" images="image.history"
-           ng-repeat="parent in reversedHistory"></div>
+    <div class="cor-tab-panel">
+      <div class="cor-tabs">
+        <span class="cor-tab" tab-active="true" tab-title="Layers" tab-target="#layers">
+          <i class="fa ci-layers"></i>
+        </span>
+        <span class="cor-tab" tab-title="Changes" tab-target="#changes"
+              tab-init="downloadChanges()">
+          <i class="fa fa-code-fork"></i>
+        </span>
+      </div> <!-- /cor-tabs -->
+
+      <div class="cor-tab-content">
+        <!-- Layers -->
+        <div id="layers" class="tab-pane active">
+          <h3>Image Layers</h3>
+          <div class="image-view-layer" repository="repository" image="image" images="image.history"></div>
+          <div class="image-view-layer" repository="repository" image="parent" images="image.history"
+               ng-repeat="parent in reversedHistory"></div>
+        </div>
+
+        <!-- Changes -->
+        <div id="changes" class="tab-pane">
+          <div class="resource-view" resource="changesResource" error-message="'Could not load image changes'">
+            <h3>Image File Changes</h3>
+            <div id="changes-tree-container" class="changes-container"
+                 onresize="tree && tree.notifyResized()"></div>
+          </div>
+        </div>
+     </div>
     </div>
   </div>
 </div>