From d1922c6fd2f96f38a72dbcaa908e4a633eaa525d Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 17 Feb 2014 18:31:45 -0500 Subject: [PATCH] Have the docker file view in the build pack tab use a nice formatter --- static/css/quay.css | 89 +++++++++++++++++----- static/directives/build-log-command.html | 7 +- static/directives/dockerfile-command.html | 6 ++ static/directives/dockerfile-view.html | 15 ++++ static/js/app.js | 91 +++++++++++++++++------ static/partials/build-package.html | 6 +- 6 files changed, 163 insertions(+), 51 deletions(-) create mode 100644 static/directives/dockerfile-command.html create mode 100644 static/directives/dockerfile-view.html diff --git a/static/css/quay.css b/static/css/quay.css index 73a0121e7..29620b87c 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -9,6 +9,47 @@ } } +.dockerfile-view { + margin: 20px; + padding: 20px; + background: #F7F6F6; + border: 1px solid #ddd; +} + +.dockerfile-view .entry { + font-family: Consolas, "Lucida Console", Monaco, monospace; +} + +.dockerfile-view .entry.comment { + color: rgb(82, 172, 82); +} + +.dockerfile-command { + position: relative; +} + +.dockerfile-command .command-title { + font-family: Consolas, "Lucida Console", Monaco, monospace; + padding-left: 90px; +} + +.dockerfile-command .label { + color: white; + + padding-top: 4px; + text-align: right; + margin-right: 4px; + width: 86px; + display: inline-block; + + border-right: 4px solid #aaa; + background-color: #333; + + position: absolute; + top: 0px; + left: -4px; +} + .codetooltipcontainer .tooltip-inner { white-space:pre; max-width:none; @@ -1819,6 +1860,14 @@ p.editable:hover i { left: 24px; } +.repo-build .build-pane .build-logs .dockerfile-command { + position: inherit; +} + +.repo-build .build-pane .build-logs .dockerfile-command .command-title { + padding-left: 0px; +} + .repo-build .build-pane .build-logs .container-header .container-content { display: block; padding-left: 20px; @@ -1828,26 +1877,6 @@ p.editable:hover i { padding-left: 120px; } -.label.FROM { - border-color: #5bc0de !important; -} - -.label.CMD, .label.EXPOSE, .label.ENTRYPOINT { - border-color: #428bca !important; -} - -.label.RUN, .label.ADD { - border-color: #5cb85c !important; -} - -.label.ENV, .label.VOLUME, .label.USER, .label.WORKDIR { - border-color: #f0ad4e !important; -} - -.label.MAINTAINER { - border-color: #aaa !important; -} - .repo-build .build-pane .build-logs .log-entry { position: relative; } @@ -3191,4 +3220,24 @@ pre.command:before { .file-drop { padding: 10px; margin: 10px; +} + +.label.FROM { + border-color: #5bc0de !important; +} + +.label.CMD, .label.EXPOSE, .label.ENTRYPOINT { + border-color: #428bca !important; +} + +.label.RUN, .label.ADD { + border-color: #5cb85c !important; +} + +.label.ENV, .label.VOLUME, .label.USER, .label.WORKDIR { + border-color: #f0ad4e !important; +} + +.label.MAINTAINER { + border-color: #aaa !important; } \ No newline at end of file diff --git a/static/directives/build-log-command.html b/static/directives/build-log-command.html index 211667ee4..40d1c8880 100644 --- a/static/directives/build-log-command.html +++ b/static/directives/build-log-command.html @@ -1,6 +1 @@ - - - - - + diff --git a/static/directives/dockerfile-command.html b/static/directives/dockerfile-command.html new file mode 100644 index 000000000..0e0c7bc5e --- /dev/null +++ b/static/directives/dockerfile-command.html @@ -0,0 +1,6 @@ + + + + + diff --git a/static/directives/dockerfile-view.html b/static/directives/dockerfile-view.html new file mode 100644 index 000000000..d1cb834d6 --- /dev/null +++ b/static/directives/dockerfile-view.html @@ -0,0 +1,15 @@ +
+
+
+
+
+
+
+ {{ line.text || ' ' }} +
+
+ {{ line.text || ' ' }} +
+
+
+
diff --git a/static/js/app.js b/static/js/app.js index 359212e95..cdb939745 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -2537,17 +2537,42 @@ quayApp.directive('buildLogCommand', function () { scope: { 'command': '=command' }, + controller: function($scope, $element) { + $scope.getWithoutStep = function(fullTitle) { + var colon = fullTitle.indexOf(':'); + if (colon <= 0) { + return ''; + } + + return $.trim(fullTitle.substring(colon + 1)); + }; + } + }; + return directiveDefinitionObject; +}); + + +quayApp.directive('dockerfileCommand', function () { + var directiveDefinitionObject = { + priority: 0, + templateUrl: '/static/directives/dockerfile-command.html', + replace: false, + transclude: false, + restrict: 'C', + scope: { + 'command': '=command' + }, controller: function($scope, $element, $sanitize) { var registryHandlers = { 'quay.io': function(pieces) { var rnamespace = pieces[pieces.length - 2]; - var rname = pieces[pieces.length - 1]; + var rname = pieces[pieces.length - 1].split(':')[0]; return '/repository/' + rnamespace + '/' + rname + '/'; }, '': function(pieces) { var rnamespace = pieces.length == 1 ? '_' : pieces[0]; - var rname = pieces[pieces.length - 1]; + var rname = pieces[pieces.length - 1].split(':')[0]; return 'https://index.docker.io/u/' + rnamespace + '/' + rname + '/'; } }; @@ -2564,25 +2589,18 @@ quayApp.directive('buildLogCommand', function () { } }; - $scope.getCommandKind = function(fullTitle) { - var colon = fullTitle.indexOf(':'); - var title = getTitleWithoutStep(fullTitle); - if (!title) { - return null; - } - + $scope.getCommandKind = function(title) { var space = title.indexOf(' '); return title.substring(0, space); }; - $scope.getCommandTitleHtml = function(fullTitle) { - var title = getTitleWithoutStep(fullTitle) || fullTitle; + $scope.getCommandTitleHtml = function(title) { var space = title.indexOf(' '); if (space <= 0) { return $sanitize(title); } - var kind = $scope.getCommandKind(fullTitle); + var kind = $scope.getCommandKind(title); var sanitized = $sanitize(title.substring(space + 1)); var handler = kindHandlers[kind || '']; @@ -2591,21 +2609,50 @@ quayApp.directive('buildLogCommand', function () { } else { return sanitized; } - }; - - var getTitleWithoutStep = function(fullTitle) { - var colon = fullTitle.indexOf(':'); - if (colon <= 0) { - return null; - } - - return $.trim(fullTitle.substring(colon + 1)); - }; + }; } }; return directiveDefinitionObject; }); + +quayApp.directive('dockerfileView', function () { + var directiveDefinitionObject = { + priority: 0, + templateUrl: '/static/directives/dockerfile-view.html', + replace: false, + transclude: false, + restrict: 'C', + scope: { + 'contents': '=contents' + }, + controller: function($scope, $element, $sanitize) { + $scope.$watch('contents', function(contents) { + $scope.lines = []; + + var lines = contents ? contents.split('\n') : []; + for (var i = 0; i < lines.length; ++i) { + var line = $.trim(lines[i]); + var kind = 'text'; + if (line && line[0] == '#') { + kind = 'comment'; + } else if (line.match(/^([A-Z]+\s)/)) { + kind = 'command'; + } + + var lineInfo = { + 'text': $sanitize(line), + 'kind': kind + }; + $scope.lines.push(lineInfo); + } + }); + } + }; + return directiveDefinitionObject; +}); + + quayApp.directive('buildStatus', function () { var directiveDefinitionObject = { priority: 0, diff --git a/static/partials/build-package.html b/static/partials/build-package.html index 6222ee2ef..182fd9c58 100644 --- a/static/partials/build-package.html +++ b/static/partials/build-package.html @@ -10,8 +10,8 @@
- - + +
@@ -37,7 +37,7 @@
- 
{{ dockerFileContents }}
+
No Dockerfile found in the build pack