From 8042f1a9857b8dc39fed673342e543c3c0eed4a5 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 23 Mar 2015 15:22:22 -0400 Subject: [PATCH] - Finished new image view - Add the CoreOS icon font --- external_libraries.py | 5 +++ static/css/directives/ui/image-view-layer.css | 7 +++- static/css/pages/image-view.css | 11 ++++- static/css/quay.css | 1 + static/js/directives/ui/image-view-layer.js | 5 ++- static/js/pages/image-view.js | 40 ++++++++++++++++++- static/partials/image-view.html | 39 +++++++++++++----- 7 files changed, 93 insertions(+), 15 deletions(-) diff --git a/external_libraries.py b/external_libraries.py index 3ab6bfd4a..113295353 100644 --- a/external_libraries.py +++ b/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', ] diff --git a/static/css/directives/ui/image-view-layer.css b/static/css/directives/ui/image-view-layer.css index f0fcd0c82..85fc70d99 100644 --- a/static/css/directives/ui/image-view-layer.css +++ b/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; } diff --git a/static/css/pages/image-view.css b/static/css/pages/image-view.css index de8d4f07b..f91ceacc9 100644 --- a/static/css/pages/image-view.css +++ b/static/css/pages/image-view.css @@ -13,4 +13,13 @@ padding: 4px; display: inline-block; margin-right: 20px; -} \ No newline at end of file +} + +.image-view .co-tab-content { + padding: 20px; + padding-top: 10px; +} + +.image-view .co-tab-content h3 { + margin-bottom: 20px; +} diff --git a/static/css/quay.css b/static/css/quay.css index 333fbd411..9d10c888d 100644 --- a/static/css/quay.css +++ b/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 { diff --git a/static/js/directives/ui/image-view-layer.js b/static/js/directives/ui/image-view-layer.js index fa0c346cb..e5a781172 100644 --- a/static/js/directives/ui/image-view-layer.js +++ b/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); }; diff --git a/static/js/pages/image-view.js b/static/js/pages/image-view.js index 757c030cc..945fdc66e 100644 --- a/static/js/pages/image-view.js +++ b/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) { diff --git a/static/partials/image-view.html b/static/partials/image-view.html index 4de310026..421c685dd 100644 --- a/static/partials/image-view.html +++ b/static/partials/image-view.html @@ -10,20 +10,41 @@ - + {{ image.id.substr(0, 12) }} -
-
-
{{ image.id }}
-
{{ image.created | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}
-
-
-
+
+
+ + + + + + +
+ +
+ +
+

Image Layers

+
+
+
+ + +
+
+

Image File Changes

+
+
+
+
\ No newline at end of file