github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'create-containers' into dev

pull/2/head
Michael Crosby 2013-06-19 18:13:37 -09:00
parent 8aa21dcdf9 be9a883800
commit 980bc6612e
20 changed files with 711 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "lib/ace-builds"]
path = lib/ace-builds
url = git@github.com:ajaxorg/ace-builds.git

7
LICENSE Normal file
View File

@ -0,0 +1,7 @@
DockerUI: Copyright (c) 2013 Michael Crosby. crosbymichael.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

2
README.md
View File

@ -22,6 +22,8 @@ DockerUI currently supports the v1.1 Remote API
###Stack
* Angular.js
* Flatstrap ( Flat Twitter Bootstrap )
* Spin.js
* Ace editor
###Todo:

14
css/app.css
View File

@ -94,10 +94,22 @@
}
.footer {
max-height:6px;
max-height:6px;
}
#response {
width: 80%;
margin: 0 auto;
}
#editor {
height: 300px;
width: 100%;
border: 1px solid #DDD;
margin-top: 5px;
}
.messages {
overflow: scroll;
max-height: 50px;
}

5
index.html
View File

@ -29,6 +29,7 @@
<div class="container">
<div ng-include="template" ng-controller="MastheadController"></div>
<div ng-include="template" ng-controller="MessageController"></div>
<div id="view" ng-view></div>
@ -50,12 +51,16 @@
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script src="/lib/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/lib/spin.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>
<script src="js/controllers.js"></script>
<script src="js/viewmodel.js"></script>
</body>
</html>

5
js/app.js
View File

@ -11,6 +11,7 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters'])
$routeProvider.otherwise({redirectTo: '/'});
}])
// This is your docker url that the api will use to make requests
.constant('DOCKER_ENDPOINT', 'http://192.168.1.9:4243\:4243')
.constant('UI_VERSION', 'v0.1')
.constant('DOCKER_ENDPOINT', 'http://192.168.1.9')
.constant('DOCKER_PORT', ':4243')
.constant('UI_VERSION', 'v0.2')
.constant('DOCKER_API_VERSION', 'v1.1');

274
js/controllers.js
View File

@ -4,7 +4,21 @@ function MastheadController($scope) {
}
function DashboardController($scope, Container) {
}
function MessageController($scope, Messages) {
$scope.template = 'partials/messages.html';
$scope.messages = [];
$scope.$watch('messages.length', function(o, n) {
$('#message-display').show();
});
$scope.$on(Messages.event, function(e, msg) {
$scope.messages.push(msg);
setTimeout(function() {
$('#message-display').hide('slow');
}, 10000);
});
}
function StatusBarController($scope, Settings) {
@ -20,201 +34,249 @@ function SideBarController($scope, Container, Settings) {
$scope.endpoint = Settings.endpoint;
Container.query({all: 0}, function(d) {
$scope.containers = d;
});
$scope.containers = d;
});
}
function SettingsController($scope, Auth, System, Docker, Settings) {
function SettingsController($scope, Auth, System, Docker, Settings, Messages) {
$scope.auth = {};
$scope.info = {};
$scope.docker = {};
$scope.endpoint = Settings.endpoint;
$scope.apiVersion = Settings.version;
$('#response').hide();
$scope.alertClass = 'block';
$scope.updateAuthInfo = function() {
if ($scope.auth.password != $scope.auth.cpassword) {
setSuccessfulResponse($scope, 'Your passwords do not match.', '#response');
alert('Your passwords do not match.');
return;
}
Auth.update(
{username: $scope.auth.username, email: $scope.auth.email, password: $scope.auth.password}, function(d) {
console.log(d);
setSuccessfulResponse($scope, 'Auth information updated.', '#response');
Auth.update({
username: $scope.auth.username,
email: $scope.auth.email,
password: $scope.auth.password
}, function(d) {
Messages.send({class: 'text-success', data: 'Auth information updated.'});
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
});
};
Messages.send({class: 'text-error', data: e.data});
});
};
Auth.get({}, function(d) {
$scope.auth = d;
});
Docker.get({}, function(d) {
$scope.docker = d;
});
System.get({}, function(d) {
$scope.info = d;
});
Auth.get({}, function(d) { $scope.auth = d; });
Docker.get({}, function(d) { $scope.docker = d; });
System.get({}, function(d) { $scope.info = d; });
}
// Controls the page that displays a single container and actions on that container.
function ContainerController($scope, $routeParams, $location, Container) {
$('#response').hide();
$scope.alertClass = 'block';
function ContainerController($scope, $routeParams, $location, Container, Messages) {
$scope.changes = [];
$scope.start = function(){
Container.start({id: $routeParams.id}, function(d) {
console.log(d);
setSuccessfulResponse($scope, 'Container started.', '#response');
Messages.send({class: 'text-success', data: 'Container started.'});
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
});
failedRequestHandler(e, Messages);
});
};
$scope.stop = function() {
Container.stop({id: $routeParams.id}, function(d) {
console.log(d);
setSuccessfulResponse($scope, 'Container stopped.', '#response');
Messages.send({class: 'text-success', data: 'Container stopped.'});
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
failedRequestHandler(e, Messages);
});
};
$scope.kill = function() {
Container.kill({id: $routeParams.id}, function(d) {
console.log(d);
setSuccessfulResponse($scope, 'Container killed.', '#response');
Messages.send({class: 'text-success', data: 'Container killed.'});
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
failedRequestHandler(e, Messages);
});
};
$scope.remove = function() {
if (confirm("Are you sure you want to remove the container?")) {
Container.remove({id: $routeParams.id}, function(d) {
console.log(d);
setSuccessfulResponse($scope, 'Container removed.', '#response');
Messages.send({class: 'text-success', data: 'Container removed.'});
}, function(e){
console.log(e);
setFailedResponse($scope, e.data, '#response');
failedRequestHandler(e, Messages);
});
}
};
$scope.changes = [];
$scope.hasContent = function(data) {
return data !== null && data !== undefined && data.length > 1;
};
$scope.getChanges = function() {
Container.changes({id: $routeParams.id}, function(d) {
$scope.changes = d;
$scope.changes = d;
});
};
Container.get({id: $routeParams.id}, function(d) {
$scope.container = d;
$scope.container = d;
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
failedRequestHandler(e, Messages);
if (e.status === 404) {
$('.detail').hide();
}
});
});
$scope.getChanges();
}
// Controller for the list of containers
function ContainersController($scope, Container, Settings) {
function ContainersController($scope, Container, Settings, Messages, ViewSpinner) {
$scope.displayAll = Settings.displayAll;
$scope.predicate = '-Created';
$scope.toggle = false;
var update = function(data) {
ViewSpinner.spin();
Container.query(data, function(d) {
$scope.containers = d;
});
$scope.containers = d.map(function(item) { return new ContainerViewModel(item); });
ViewSpinner.stop();
});
};
var batch = function(items, action) {
angular.forEach(items, function(c) {
if (c.Checked) {
action({id: c.Id}, function(d) {
Messages.send({class: 'text-success', data: d});
}, function(e) {
failedRequestHandler(e, Messages);
});
}
});
};
$scope.toggleSelectAll = function() {
angular.forEach($scope.containers, function(i) {
i.Checked = $scope.toggle;
});
};
$scope.toggleGetAll = function() {
Settings.displayAll = $scope.displayAll;
var u = update;
var data = {all: 0};
if ($scope.displayAll) {
data.all = 1;
}
u(data);
update(data);
};
update({all: $scope.displayAll ? 1 : 0});
$scope.startAction = function() {
batch($scope.containers, Container.start);
};
$scope.stopAction = function() {
batch($scope.containers, Container.stop);
};
$scope.killAction = function() {
batch($scope.containers, Container.kill);
};
$scope.removeAction = function() {
batch($scope.containers, Container.remove);
};
update({all: $scope.displayAll ? 1 : 0});
}
// Controller for the list of images
function ImagesController($scope, Image) {
$scope.predicate = '-Created';
$('#response').hide();
$scope.alertClass = 'block';
function ImagesController($scope, Image, ViewSpinner, Messages) {
$scope.toggle = false;
$scope.showBuilder = function() {
$('#build-modal').modal('show');
};
$scope.removeAction = function() {
ViewSpinner.spin();
var counter = 0;
var complete = function() {
counter = counter - 1;
if (counter === 0) {
ViewSpinner.stop();
}
};
angular.forEach($scope.images, function(i) {
if (i.Checked) {
counter = counter + 1;
Image.remove({id: i.Id}, function(d) {
angular.forEach(d, function(resource) {
Messages.send({class: 'text-success', data: 'Deleted: ' + resource.Deleted});
});
//Remove the image from the list
var index = $scope.images.indexOf(i);
$scope.images.splice(index, 1);
complete();
}, function(e) {
Messages.send({class: 'text-error', data: e.data});
complete();
});
}
});
};
$scope.toggleSelectAll = function() {
angular.forEach($scope.images, function(i) {
i.Checked = $scope.toggle;
});
};
ViewSpinner.spin();
Image.query({}, function(d) {
$scope.images = d;
$scope.images = d.map(function(item) { return new ImageViewModel(item); });
ViewSpinner.stop();
}, function (e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
});
failedRequestHandler(e, Messages);
ViewSpinner.stop();
});
}
// Controller for a single image and actions on that image
function ImageController($scope, $routeParams, $location, Image) {
function ImageController($scope, $routeParams, $location, Image, Messages) {
$scope.history = [];
$scope.tag = {repo: '', force: false};
$('#response').hide();
$scope.alertClass = 'block';
$scope.remove = function() {
if (confirm("Are you sure you want to delete this image?")) {
Image.remove({id: $routeParams.id}, function(d) {
console.log(d);
setSuccessfulResponse($scope, 'Image removed.', '#response');
Messages.send({class: 'text-success', data: 'Image removed.'});
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
failedRequestHandler(e, Messages);
});
}
};
$scope.getHistory = function() {
Image.history({id: $routeParams.id}, function(d) {
$scope.history = d;
});
$scope.history = d;
});
};
$scope.updateTag = function() {
var tag = $scope.tag;
Image.tag({id: $routeParams.id, repo: tag.repo, force: tag.force ? 1 : 0}, function(d) {
console.log(d);
setSuccessfulResponse($scope, 'Tag added.', '#response');
Messages.send({class: 'text-success', data: 'Tag added.'});
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
failedRequestHandler(e, Messages);
});
};
$scope.create = function() {
$('#create-modal').modal('show');
};
Image.get({id: $routeParams.id}, function(d) {
$scope.image = d;
}, function(e) {
console.log(e);
setFailedResponse($scope, e.data, '#response');
failedRequestHandler(e, Messages);
if (e.status === 404) {
$('.detail').hide();
}
@ -223,7 +285,7 @@ function ImageController($scope, $routeParams, $location, Image) {
$scope.getHistory();
}
function StartContainerController($scope, $routeParams, $location, Container) {
function StartContainerController($scope, $routeParams, $location, Container, Messages) {
$scope.template = 'partials/startcontainer.html';
$scope.config = {
memory: 0,
@ -234,9 +296,7 @@ function StartContainerController($scope, $routeParams, $location, Container) {
};
$scope.commandPlaceholder = '["/bin/echo", "Hello world"]';
$scope.launchContainer = function() {
$scope.response = '';
$scope.create = function() {
var cmds = null;
if ($scope.config.commands !== '') {
cmds = angular.fromJson($scope.config.commands);
@ -253,32 +313,34 @@ function StartContainerController($scope, $routeParams, $location, Container) {
Cmd: cmds,
VolumesFrom: $scope.config.volumesFrom
}, function(d) {
console.log(d);
if (d.Id) {
ctor.start({id: d.Id}, function(cd) {
console.log(cd);
$('#create-modal').modal('hide');
loc.path('/containers/' + d.Id + '/');
}, function(e) {
console.log(e);
s.resonse = e.data;
failedRequestHandler(e, Messages);
});
}
}, function(e) {
console.log(e);
$scope.response = e.data;
failedRequestHandler(e, Messages);
});
};
}
function setSuccessfulResponse($scope, msg, msgId) {
$scope.alertClass = 'success';
$scope.response = msg;
$(msgId).show();
setTimeout(function() { $(msgId).hide();}, 5000);
function BuilderController($scope, Dockerfile, Messages) {
$scope.template = '/partials/builder.html';
ace.config.set('basePath', '/lib/ace-builds/src-noconflict/');
$scope.build = function() {
Dockerfile.build(editor.getValue(), function(d) {
Messages.send({class:'text-info', data: d});
}, function(e) {
Messages.send({class:'text-error', data: e});
});
};
}
function setFailedResponse($scope, msg, msgId) {
$scope.alertClass = 'error';
$scope.response = msg;
$(msgId).show();
function failedRequestHandler(e, Messages) {
Messages.send({class: 'text-error', data: e.data});
}

12
js/filters.js
View File

@ -53,10 +53,20 @@ angular.module('dockerui.filters', [])
return '';
};
})
.filter('humansize', function() {
return function(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) {
return 'n/a';
}
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[[i]];
};
})
.filter('getdate', function() {
return function(data) {
//Multiply by 1000 for the unix format
var date = new Date(data * 1000);
return date.toDateString();
};
};
});

47
js/services.js
View File

@ -28,7 +28,7 @@ angular.module('dockerui.services', ['ngResource'])
insert :{method: 'POST', params: {id: '@id', action:'insert'}},
push :{method: 'POST', params: {id: '@id', action:'push'}},
tag :{method: 'POST', params: {id: '@id', action:'tag', force: 0, repo: '@repo'}},
delete :{id: '@id', method: 'DELETE'}
remove :{method: 'DELETE', params: {id: '@id'}, isArray: true}
});
})
.factory('Docker', function($resource, Settings) {
@ -53,12 +53,49 @@ angular.module('dockerui.services', ['ngResource'])
get: {method: 'GET'}
});
})
.factory('Settings', function(DOCKER_ENDPOINT, DOCKER_API_VERSION, UI_VERSION) {
.factory('Settings', function(DOCKER_ENDPOINT, DOCKER_PORT, DOCKER_API_VERSION, UI_VERSION) {
var url = DOCKER_ENDPOINT;
if (DOCKER_PORT) {
url = url + DOCKER_PORT + '\\' + DOCKER_PORT;
}
return {
displayAll: false,
endpoint: DOCKER_ENDPOINT,
version: DOCKER_API_VERSION,
url: DOCKER_ENDPOINT + '/' + DOCKER_API_VERSION,
uiVersion: UI_VERSION
};
rawUrl: DOCKER_ENDPOINT + DOCKER_PORT + '/' + DOCKER_API_VERSION,
uiVersion: UI_VERSION,
url: url
};
})
.factory('ViewSpinner', function() {
var spinner = new Spinner();
var target = document.getElementById('view');
return {
spin: function() { spinner.spin(target); },
stop: function() { spinner.stop(); }
};
})
.factory('Messages', function($rootScope) {
return {
event: 'messageSend',
send: function(msg) {
$rootScope.$broadcast('messageSend', msg);
}
};
})
.factory('Dockerfile', function(Settings) {
var url = Settings.rawUrl + '/build';
return {
build: function(file, callback) {
var data = new FormData();
var dockerfile = new Blob([file], { type: 'text/text' });
data.append('Dockerfile', dockerfile);
var request = new XMLHttpRequest();
request.onload = callback;
request.open('POST', url);
request.send(data);
}
};
});

18
js/viewmodel.js Normal file
View File

@ -0,0 +1,18 @@
function ImageViewModel(data) {
this.Id = data.Id;
this.Tag = data.Tag;
this.Repository = data.Repository;
this.Created = data.Created;
this.Checked = false;
}
function ContainerViewModel(data) {
this.Id = data.Id;
this.Image = data.Image;
this.Command = data.Command;
this.Created = data.Created;
this.SizeRw = data.SizeRw;
this.Status = data.Status;
this.Checked = false;
}

349
lib/spin.js Normal file
View File

@ -0,0 +1,349 @@
//fgnass.github.com/spin.js#v1.3
/**
* Copyright (c) 2011-2013 Felix Gnass
* Licensed under the MIT license
*/
(function(root, factory) {
/* CommonJS */
if (typeof exports == 'object') module.exports = factory()
/* AMD module */
else if (typeof define == 'function' && define.amd) define(factory)
/* Browser global */
else root.Spinner = factory()
}
(this, function() {
"use strict";
var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
, animations = {} /* Animation rules keyed by their name */
, useCssAnimations /* Whether to use CSS animations or setTimeout */
/**
* Utility function to create elements. If no tag name is given,
* a DIV is created. Optionally properties can be passed.
*/
function createEl(tag, prop) {
var el = document.createElement(tag || 'div')
, n
for(n in prop) el[n] = prop[n]
return el
}
/**
* Appends children and returns the parent.
*/
function ins(parent /* child1, child2, ...*/) {
for (var i=1, n=arguments.length; i<n; i++)
parent.appendChild(arguments[i])
return parent
}
/**
* Insert a new stylesheet to hold the @keyframe or VML rules.
*/
var sheet = (function() {
var el = createEl('style', {type : 'text/css'})
ins(document.getElementsByTagName('head')[0], el)
return el.sheet || el.styleSheet
}())
/**
* Creates an opacity keyframe animation rule and returns its name.
* Since most mobile Webkits have timing issues with animation-delay,
* we create separate rules for each line/segment.
*/
function addAnimation(alpha, trail, i, lines) {
var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-')
, start = 0.01 + i/lines * 100
, z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
, prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
, pre = prefix && '-' + prefix + '-' || ''
if (!animations[name]) {
sheet.insertRule(
'@' + pre + 'keyframes ' + name + '{' +
'0%{opacity:' + z + '}' +
start + '%{opacity:' + alpha + '}' +
(start+0.01) + '%{opacity:1}' +
(start+trail) % 100 + '%{opacity:' + alpha + '}' +
'100%{opacity:' + z + '}' +
'}', sheet.cssRules.length)
animations[name] = 1
}
return name
}
/**
* Tries various vendor prefixes and returns the first supported property.
*/
function vendor(el, prop) {
var s = el.style
, pp
, i
if(s[prop] !== undefined) return prop
prop = prop.charAt(0).toUpperCase() + prop.slice(1)
for(i=0; i<prefixes.length; i++) {
pp = prefixes[i]+prop
if(s[pp] !== undefined) return pp
}
}
/**
* Sets multiple style properties at once.
*/
function css(el, prop) {
for (var n in prop)
el.style[vendor(el, n)||n] = prop[n]
return el
}
/**
* Fills in default values.
*/
function merge(obj) {
for (var i=1; i < arguments.length; i++) {
var def = arguments[i]
for (var n in def)
if (obj[n] === undefined) obj[n] = def[n]
}
return obj
}
/**
* Returns the absolute page-offset of the given element.
*/
function pos(el) {
var o = { x:el.offsetLeft, y:el.offsetTop }
while((el = el.offsetParent))
o.x+=el.offsetLeft, o.y+=el.offsetTop
return o
}
// Built-in defaults
var defaults = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
rotate: 0, // Rotation offset
corners: 1, // Roundness (0..1)
color: '#000', // #rgb or #rrggbb
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 100, // Afterglow percentage
opacity: 1/4, // Opacity of the lines
fps: 20, // Frames per second when using setTimeout()
zIndex: 2e9, // Use a high z-index by default
className: 'spinner', // CSS class to assign to the element
top: 'auto', // center vertically
left: 'auto', // center horizontally
position: 'relative' // element position
}
/** The constructor */
function Spinner(o) {
if (typeof this == 'undefined') return new Spinner(o)
this.opts = merge(o || {}, Spinner.defaults, defaults)
}
// Global defaults that override the built-ins:
Spinner.defaults = {}
merge(Spinner.prototype, {
/**
* Adds the spinner to the given target element. If this instance is already
* spinning, it is automatically removed from its previous target b calling
* stop() internally.
*/
spin: function(target) {
this.stop()
var self = this
, o = self.opts
, el = self.el = css(createEl(0, {className: o.className}), {position: o.position, width: 0, zIndex: o.zIndex})
, mid = o.radius+o.length+o.width
, ep // element position
, tp // target position
if (target) {
target.insertBefore(el, target.firstChild||null)
tp = pos(target)
ep = pos(el)
css(el, {
left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + 'px',
top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px'
})
}
el.setAttribute('role', 'progressbar')
self.lines(el, self.opts)
if (!useCssAnimations) {
// No CSS animation support, use setTimeout() instead
var i = 0
, start = (o.lines - 1) * (1 - o.direction) / 2
, alpha
, fps = o.fps
, f = fps/o.speed
, ostep = (1-o.opacity) / (f*o.trail / 100)
, astep = f/o.lines
;(function anim() {
i++;
for (var j = 0; j < o.lines; j++) {
alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity)
self.opacity(el, j * o.direction + start, alpha, o)
}
self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
})()
}
return self
},
/**
* Stops and removes the Spinner.
*/
stop: function() {
var el = this.el
if (el) {
clearTimeout(this.timeout)
if (el.parentNode) el.parentNode.removeChild(el)
this.el = undefined
}
return this
},
/**
* Internal method that draws the individual lines. Will be overwritten
* in VML fallback mode below.
*/
lines: function(el, o) {
var i = 0
, start = (o.lines - 1) * (1 - o.direction) / 2
, seg
function fill(color, shadow) {
return css(createEl(), {
position: 'absolute',
width: (o.length+o.width) + 'px',
height: o.width + 'px',
background: color,
boxShadow: shadow,
transformOrigin: 'left',
transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)',
borderRadius: (o.corners * o.width>>1) + 'px'
})
}
for (; i < o.lines; i++) {
seg = css(createEl(), {
position: 'absolute',
top: 1+~(o.width/2) + 'px',
transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
opacity: o.opacity,
animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite'
})
if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}))
ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')))
}
return el
},
/**
* Internal method that adjusts the opacity of a single line.
* Will be overwritten in VML fallback mode below.
*/
opacity: function(el, i, val) {
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
}
})
function initVML() {
/* Utility function to create a VML tag */
function vml(tag, attr) {
return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
}
// No CSS transforms but VML support, add a CSS rule for VML elements:
sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
Spinner.prototype.lines = function(el, o) {
var r = o.length+o.width
, s = 2*r
function grp() {
return css(
vml('group', {
coordsize: s + ' ' + s,
coordorigin: -r + ' ' + -r
}),
{ width: s, height: s }
)
}
var margin = -(o.width+o.length)*2 + 'px'
, g = css(grp(), {position: 'absolute', top: margin, left: margin})
, i
function seg(i, dx, filter) {
ins(g,
ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
ins(css(vml('roundrect', {arcsize: o.corners}), {
width: r,
height: o.width,
left: o.radius,
top: -o.width>>1,
filter: filter
}),
vml('fill', {color: o.color, opacity: o.opacity}),
vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
)
)
)
}
if (o.shadow)
for (i = 1; i <= o.lines; i++)
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
for (i = 1; i <= o.lines; i++) seg(i)
return ins(el, g)
}
Spinner.prototype.opacity = function(el, i, val, o) {
var c = el.firstChild
o = o.shadow && o.lines || 0
if (c && i+o < c.childNodes.length) {
c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
if (c) c.opacity = val
}
}
}
var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
if (!vendor(probe, 'transform') && probe.adj) initVML()
else useCssAnimations = vendor(probe, 'animation')
return Spinner
}));

19
partials/builder.html Normal file
View File

@ -0,0 +1,19 @@
<div id="build-modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Build Image</h3>
</div>
<div class="modal-body">
<div id="editor"></div>
</div>
<div class="modal-footer">
<a href="" class="btn btn-primary" ng-click="build()">Build</a>
</div>
</div>
<script type="text/javascript">
var editor = ace.edit("editor");
editor.setValue('');
editor.setTheme("ace/theme/clouds");
editor.getSession().setMode("ace/mode/batchfile");
</script>

4
partials/container.html
View File

@ -1,7 +1,3 @@
<div id="response" class="alert alert-{{ alertClass }}">
{{ response }}
</div>
<div class="detail">
<h4>Container: {{ container.Id }}</h4>

22
partials/containers.html
View File

@ -1,25 +1,43 @@
<h2>Containers:</h2>
<div style="float:right;">
<input type="checkbox" ng-model="displayAll" ng-click="toggleGetAll()"/> Display All
<div>
<ul class="nav nav-pills pull-left">
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Actions <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
<li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
<li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
<li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
</ul>
</li>
</ul>
<div class="pull-right">
<input type="checkbox" ng-model="displayAll" ng-click="toggleGetAll()"/> Display All
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
<th>Id</th>
<th>Image</th>
<th>Command</th>
<th>Created</th>
<th>Size</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="container in containers|orderBy:predicate">
<td><input type="checkbox" ng-model="container.Checked" /></td>
<td><a href="/#/containers/{{ container.Id }}/">{{ container.Id|truncate:10}}</a></td>
<td><a href="/#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
<td>{{ container.Command|truncate:40 }}</td>
<td>{{ container.Created|getdate }}</td>
<td>{{ container.SizeRw|humansize }}</td>
<td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
</tr>
</tbody>

14
partials/image.html
View File

@ -1,11 +1,14 @@
<div id="response" class="alert alert-{{ alertClass }}">
{{ response }}
</div>
<div ng-include="template" ng-controller="StartContainerController"></div>
<div class="detail">
<h4>Image: {{ image.id }}</h4>
<div class="btn-group detail">
<button class="btn btn-success" ng-click="create()">Create</button>
</div>
<table class="table table-striped">
<tbody>
<tr>
@ -79,9 +82,6 @@
<hr />
<div ng-include="template" ng-controller="StartContainerController"></div>
<hr />
<div class="btn-remove">
<button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Image</button>

19
partials/images.html
View File

@ -1,13 +1,21 @@
<div ng-include="template" ng-controller="BuilderController"></div>
<h2>Images:</h2>
<div id="response" class="alert alert-{{ alertClass }}">
{{ response }}
</div>
<ul class="nav nav-pills">
<li class="active"><a href="" ng-click="showBuilder()">Build Image</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Actions <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
</ul>
</li>
</ul>
<table class="table table-striped">
<thead>
<tr>
<th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
<th>Id</th>
<th>Tag</th>
<th>Repository</th>
@ -16,7 +24,8 @@
</thead>
<tbody>
<tr ng-repeat="image in images | orderBy:predicate">
<td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:10}}</a></td>
<td><input type="checkbox" ng-model="image.Checked" /></td>
<td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:20}}</a></td>
<td>{{ image.Tag }}</td>
<td>{{ image.Repository }}</td>
<td>{{ image.Created|getdate }}</td>

3
partials/messages.html Normal file
View File

@ -0,0 +1,3 @@
<div id="message-display" class="center well messages" style="display:none;">
<p ng-repeat="message in messages"><span class="{{ message.class }}">{{ message.data }}</span></p>
</div>

4
partials/settings.html
View File

@ -1,8 +1,4 @@
<div class="detail">
<div id="response" class="alert alert-{{ alertClass }}">
{{ response }}
</div>
<h3>Docker Information</h3>
<div>
<p class="lead">

50
partials/startcontainer.html
View File

@ -1,26 +1,28 @@
<div id="create-modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Create Container</h3>
</div>
<div class="modal-body">
<form>
<fieldset>
<legend>Start container from Image</legend>
<div>
{{ response }}
<label>Cmd:</label>
<input type="text" placeholder="{{ commandPlaceholder }}" ng-model="config.commands"/>
<small>Input commands as an array</small>
<label>Memory:</label>
<input type="number" ng-model="config.memory"/>
<label>Memory Swap:</label>
<input type="number" ng-model="config.memorySwap"/>
<label>Volumes From:</label>
<input type="text" ng-model="config.volumesFrom"/>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a href="" class="btn btn-primary" ng-click="create()">Create</a>
</div>
</div>
<form>
<fieldset>
<legend>Start container from Image</legend>
<label>Cmd:</label>
<input type="text" placeholder="{{ commandPlaceholder }}" ng-model="config.commands"/>
<small>Input commands as an array</small>
<label>Memory:</label>
<input type="number" ng-model="config.memory"/>
<label>Memory Swap:</label>
<input type="number" ng-model="config.memorySwap"/>
<label>Volumes From:</label>
<input type="text" ng-model="config.volumesFrom"/>
<br />
<input type="button" ng-click="launchContainer()" value="Launch" />
</fieldset>
</form>

2
partials/statusbar.html
View File

@ -1,3 +1,3 @@
<div class="footer center well">
<p><small>Docker API Version: <strong>{{ apiVersion }}</strong> UI Version: <strong>{{ uiVersion }}</strong> <a href="http://crosbymichael.com">crosbymichael</a></small></p>
<p><small>Docker API Version: <strong>{{ apiVersion }}</strong> UI Version: <strong>{{ uiVersion }}</strong> <a style="float:right" href="http://crosbymichael.com">crosbymichael</a></small></p>
</div>