vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add the command view to the tooltips in the tree, the image side bar and the image view page

Browse source
This commit is contained in:
Joseph Schorr 2014-01-14 15:19:47 -05:00
parent c72cae954b
commit 6ae9485038
7 changed files with 93 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
static/css/quay.css
View file

@ -9,6 +9,16 @@
}
}
.codetooltipcontainer .tooltip-inner {
white-space:pre;
max-width:none;
}
.codetooltip {
font-family: Consolas, "Lucida Console", Monaco, monospace;
display: block;
}
.resource-view-element {
position: relative;
}
@ -1655,6 +1665,18 @@ p.editable:hover i {
padding-top: 4px;
}
.repo .formatted-command {
margin-top: 4px;
padding: 4px;
font-size: 12px;
}
.repo .formatted-command.trimmed {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.repo .changes-count-container {
text-align: center;
}
@ -2499,16 +2521,37 @@ p.editable:hover i {
display: block;
}
.d3-tip .created {
.d3-tip .command {
font-size: 12px;
color: white;
display: block;
margin-bottom: 6px;
font-family: Consolas, "Lucida Console", Monaco, monospace;
}
.d3-tip .info-line {
display: block;
margin-top: 6px;
padding-top: 6px;
}
.d3-tip .info-line i {
margin-right: 10px;
font-size: 14px;
color: #888;
}
.d3-tip .comment {
display: block;
font-size: 14px;
padding-bottom: 4px;
margin-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
.d3-tip .created {
font-size: 12px;
color: white;
display: block;
margin-bottom: 6px;
}

2
static/js/app.js
View file

@ -103,7 +103,7 @@ function getMarkedDown(string) {
}
// Start the application code itself.
quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'restangular', 'angularMoment', 'angulartics', /*'angulartics.google.analytics',*/ 'angulartics.mixpanel', '$strap.directives', 'ngCookies'], function($provide, cfpLoadingBarProvider) {
quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'restangular', 'angularMoment', 'angulartics', /*'angulartics.google.analytics',*/ 'angulartics.mixpanel', '$strap.directives', 'ngCookies', 'ngSanitize'], function($provide, cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = false;
$provide.factory('ApiService', ['Restangular', function(Restangular) {

25
static/js/controllers.js
View file

@ -1,3 +1,14 @@
function getFormattedCommand(command) {
if (!command || !command.length) { return ''; }
// Handle /bin/sh commands specially.
if (command.length > 2 && command[0] == '/bin/sh' && command[1] == '-c') {
return command[2];
}
return command.join(' ');
}
$.fn.clipboardCopy = function() {
var clip = new ZeroClipboard($(this), { 'moviePath': 'static/lib/ZeroClipboard.swf' });
@ -157,7 +168,7 @@ function LandingCtrl($scope, UserService, ApiService) {
browserchrome.update();
}
function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $location, $timeout) {
function RepoCtrl($scope, $sanitize, Restangular, ApiService, $routeParams, $rootScope, $location, $timeout) {
var namespace = $routeParams.namespace;
var name = $routeParams.name;
@ -192,6 +203,14 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
// Start scope methods //////////////////////////////////////////
$scope.getFormattedCommand = getFormattedCommand;
$scope.getTooltipCommand = function(command) {
var formatted = getFormattedCommand(command);
var sanitized = $sanitize(formatted);
return '<span class=\'codetooltip\'>' + sanitized + '</span>';
};
$scope.updateForDescription = function(content) {
$scope.repo.description = content;
$scope.repo.put();
@ -563,7 +582,7 @@ function RepoCtrl($scope, Restangular, ApiService, $routeParams, $rootScope, $lo
// Create the new tree.
$scope.tree = new ImageHistoryTree(namespace, name, resp.images,
getFirstTextLine, $scope.getTimeSince);
getFirstTextLine, $scope.getTimeSince, $scope.getFormattedCommand);
$scope.tree.draw('image-history-container');
@ -979,6 +998,8 @@ function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService) {
var name = $routeParams.name;
var imageid = $routeParams.image;
$scope.getFormattedCommand = getFormattedCommand;
$scope.parseDate = function(dateString) {
return Date.parse(dateString);
};

15
static/js/graphing.js
View file

@ -31,7 +31,7 @@ var DEPTH_WIDTH = 132;
/**
* Based off of http://mbostock.github.io/d3/talk/20111018/tree.html by Mike Bostock (@mbostock)
*/
function ImageHistoryTree(namespace, name, images, formatComment, formatTime) {
function ImageHistoryTree(namespace, name, images, formatComment, formatTime, formatCommand) {
/**
* The namespace of the repo.
*/
@ -57,6 +57,11 @@ function ImageHistoryTree(namespace, name, images, formatComment, formatTime) {
*/
this.formatTime_ = formatTime;
/**
* Method to invoke to format the command for an image.
*/
this.formatCommand_ = formatCommand;
/**
* The current tag (if any).
*/
@ -187,6 +192,8 @@ ImageHistoryTree.prototype.draw = function(container) {
var formatComment = this.formatComment_;
var formatTime = this.formatTime_;
var formatCommand = this.formatCommand_;
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-1, 24])
@ -212,8 +219,10 @@ ImageHistoryTree.prototype.draw = function(container) {
if (d.image.comment) {
html += '<span class="comment">' + formatComment(d.image.comment) + '</span>';
}
html += '<span class="created">' + formatTime(d.image.created) + '</span>';
html += '<span class="full-id">' + d.image.id + '</span>';
if (d.image.command && d.image.command.length) {
html += '<span class="command info-line"><i class="fa fa-terminal"></i>' + formatCommand(d.image.command) + '</span>';
}
html += '<span class="created info-line"><i class="fa fa-calendar"></i>' + formatTime(d.image.created) + '</span>';
return html;
})

5
static/partials/image-view.html
View file

@ -43,6 +43,11 @@
title="The amount of data sent between Docker and Quay.io when pushing/pulling"
bs-tooltip="tooltip.title" data-container="body">{{ image.value.size | bytes }}</span>
</dd>
<dt ng-show="image.value.command && image.value.command.length">Command</dt>
<dd ng-show="image.value.command && image.value.command.length">
<pre class="formatted-command">{{ getFormattedCommand(image.value.command) }}</pre>
</dd>
</dl>
<!-- Changes tabs -->

6
static/partials/view-repo.html
View file

@ -167,6 +167,12 @@ sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}</pre>
title="The amount of data sent between Docker and Quay.io when pushing/pulling"
bs-tooltip="tooltip.title" data-container="body">{{ currentImage.size | bytes }}</span>
</dd>
<dt ng-show="currentImage.command && currentImage.command.length">Command</dt>
<dd ng-show="currentImage.command && currentImage.command.length" class="codetooltipcontainer">
<pre class="formatted-command trimmed"
bs-tooltip="getTooltipCommand(currentImage.command)"
data-placement="top">{{ getFormattedCommand(currentImage.command) }}</pre>
</dd>
</dl>
<!-- Image changes loading -->

1
templates/base.html
View file

@ -42,6 +42,7 @@
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
<script src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
<script src="//cdn.jsdelivr.net/restangular/1.2.0/restangular.min.js"></script>