Work in progress: new image view

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

@@ -0,0 +1,48 @@
+/**
+ * An element which displays a single layer representing an image in the image view.
+ */
+angular.module('quay').directive('imageViewLayer', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/image-view-layer.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'image': '=image',
+      'images': '=images'
+    },
+    controller: function($scope, $element) {
+      $scope.getDockerfileCommand = function(command) {
+        if (!command) { return ''; }
+
+        // ["/bin/sh", "-c", "#(nop) RUN foo"]
+        var commandPrefix = '#(nop)'
+
+        if (command.length != 3) { return  ''; }
+        if (command[0] != '/bin/sh' || command[1] != '-c') { return ''; }
+
+        var cmd = command[2];
+
+        if (cmd.substring(0, commandPrefix.length) != commandPrefix) { return ''; }
+
+        return command[2].substr(commandPrefix.length + 1);
+      };
+
+      $scope.getClass = function() {
+        var index = $.inArray($scope.image, $scope.images);
+        if (index  < 0) {
+          return 'first';
+        }
+
+        if (index == $scope.images.length - 1) {
+          return 'last';
+        }
+
+        return '';
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/pages/image-view.js

@@ -3,10 +3,48 @@
    * Page to view the details of a single image.
    */
   angular.module('quayPages').config(['pages', function(pages) {
-    pages.create('image-view', 'image-view.html', ImageViewCtrl);
+    pages.create('image-view', 'image-view.html', ImageViewCtrl, {
+      'newLayout': true,
+      'title': '{{ image.id }}',
+      'description': 'Image {{ image.id }}'
+    }, ['layout'])
+
+    pages.create('image-view', 'old-image-view.html', OldImageViewCtrl, {
+    }, ['old-layout']);
   }]);
 
-  function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService) {
+  function ImageViewCtrl($scope, $routeParams, $rootScope, ApiService, ImageMetadataService) {
+    var namespace = $routeParams.namespace;
+    var name = $routeParams.name;
+    var imageid = $routeParams.image;
+
+    var loadImage = function() {
+      var params = {
+        'repository': namespace + '/' + name,
+        'image_id': imageid
+      };
+
+      $scope.imageResource = ApiService.getImageAsResource(params).get(function(image) {
+        $scope.image = image;
+        $scope.reversedHistory = image.history.reverse();
+      });
+    };
+
+    var loadRepository = function() {
+      var params = {
+        'repository': namespace + '/' + name
+      };
+
+      $scope.repositoryResource = ApiService.getRepoAsResource(params).get(function(repo) {
+        $scope.repository = repo;
+      });
+    };
+
+    loadImage();
+    loadRepository();
+  }
+
+  function OldImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService) {
     var namespace = $routeParams.namespace;
     var name = $routeParams.name;
     var imageid = $routeParams.image;