From c3377073e3ef0e5432106804da30127827f1070a Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Sun, 16 Jun 2013 13:55:18 -0900 Subject: [PATCH 01/18] Remove masthead active links --- js/controllers.js | 30 ------------------------------ partials/masthead.html | 8 ++++---- partials/statusbar.html | 2 +- 3 files changed, 5 insertions(+), 35 deletions(-) diff --git a/js/controllers.js b/js/controllers.js index 7e91f0bed..793e48cda 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -1,36 +1,6 @@ function MastheadController($scope) { $scope.template = 'partials/masthead.html'; - - $scope.hclass = 'active'; - $scope.cclass = ''; - $scope.iclass = ''; - $scope.sclass = ''; - - $scope.linkChange = function(link) { - $scope.hclass = ''; - $scope.cclass = ''; - $scope.iclass = ''; - $scope.sclass = ''; - - //This is shitty, I need help with this crap. - switch(link) { - case 'home': - $scope.hclass = 'active'; - break; - case 'containers': - $scope.cclass = 'active'; - break; - case 'images': - $scope.iclass = 'active'; - break; - case 'settings': - $scope.sclass = 'active'; - break; - default: - console.log('Not supported:' + link); - } - }; } function DashboardController($scope, Container) { diff --git a/partials/masthead.html b/partials/masthead.html index 7835148d5..a63e6df63 100644 --- a/partials/masthead.html +++ b/partials/masthead.html @@ -4,10 +4,10 @@
diff --git a/partials/statusbar.html b/partials/statusbar.html index d4abfe6ff..24feef1a9 100644 --- a/partials/statusbar.html +++ b/partials/statusbar.html @@ -1,3 +1,3 @@
-

Docker API Version: {{ apiVersion }} UI Version: {{ uiVersion }} Created by: crosbymichael

+

Docker API Version: {{ apiVersion }} UI Version: {{ uiVersion }} crosbymichael

From c4b0a2257fe098e07515ba5687fde8a92014145a Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Tue, 18 Jun 2013 14:28:22 -0900 Subject: [PATCH 02/18] Use modal for creating a new container --- LICENSE | 7 +++++ js/controllers.js | 18 ++++++++---- partials/image.html | 15 ++++++---- partials/startcontainer.html | 55 ++++++++++++++++++++---------------- partials/statusbar.html | 2 +- 5 files changed, 62 insertions(+), 35 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..c3bd6ebc8 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/js/controllers.js b/js/controllers.js index 793e48cda..15abcd983 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -195,8 +195,8 @@ function ImageController($scope, $routeParams, $location, Image) { $scope.getHistory = function() { Image.history({id: $routeParams.id}, function(d) { - $scope.history = d; - }); + $scope.history = d; + }); }; $scope.updateTag = function() { @@ -209,7 +209,11 @@ function ImageController($scope, $routeParams, $location, Image) { setFailedResponse($scope, e.data, '#response'); }); }; - + + $scope.create = function() { + $('#create-modal').modal('show'); + }; + Image.get({id: $routeParams.id}, function(d) { $scope.image = d; }, function(e) { @@ -234,9 +238,12 @@ function StartContainerController($scope, $routeParams, $location, Container) { }; $scope.commandPlaceholder = '["/bin/echo", "Hello world"]'; - $scope.launchContainer = function() { + $scope.close = function() { + $('#create-modal').modal('hide'); + }; + + $scope.create = function() { $scope.response = ''; - var cmds = null; if ($scope.config.commands !== '') { cmds = angular.fromJson($scope.config.commands); @@ -257,6 +264,7 @@ function StartContainerController($scope, $routeParams, $location, Container) { 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); diff --git a/partials/image.html b/partials/image.html index 5692d5235..4ff58ac92 100644 --- a/partials/image.html +++ b/partials/image.html @@ -1,11 +1,19 @@
- {{ response }} + {{ response }}
+ +
+
- +

Image: {{ image.id }}

+
+ +
+ + @@ -79,9 +87,6 @@
-
- -
diff --git a/partials/startcontainer.html b/partials/startcontainer.html index 0cef79c27..c4e74f502 100644 --- a/partials/startcontainer.html +++ b/partials/startcontainer.html @@ -1,26 +1,33 @@ -
- {{ response }} + - - -
-
- Start container from Image - - - - Input commands as an array - - - - - - - - - -
- -
- diff --git a/partials/statusbar.html b/partials/statusbar.html index 24feef1a9..3c54059b5 100644 --- a/partials/statusbar.html +++ b/partials/statusbar.html @@ -1,3 +1,3 @@
-

Docker API Version: {{ apiVersion }} UI Version: {{ uiVersion }} crosbymichael

+

Docker API Version: {{ apiVersion }} UI Version: {{ uiVersion }} crosbymichael

From fc01c93c276cecb946f877ae252041cf3f8651ed Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Tue, 18 Jun 2013 15:10:13 -0900 Subject: [PATCH 03/18] Add builder partial --- css/app.css | 9 +++++++++ js/app.js | 1 + js/controllers.js | 4 ++++ partials/builder.html | 17 +++++++++++++++++ partials/images.html | 4 ++-- 5 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 partials/builder.html diff --git a/css/app.css b/css/app.css index d7833aac6..a7311bf20 100644 --- a/css/app.css +++ b/css/app.css @@ -101,3 +101,12 @@ width: 80%; margin: 0 auto; } + +#editor { + height: 300px; + width: 475px; + border: 1px solid #DDD; + border-radius: 4px; + border-bottom-right-radius: 0px; + margin-top: 5px; +} diff --git a/js/app.js b/js/app.js index 386179a67..94a2a0885 100644 --- a/js/app.js +++ b/js/app.js @@ -8,6 +8,7 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters']) $routeProvider.when('/images/', {templateUrl: 'partials/images.html', controller: 'ImagesController'}); $routeProvider.when('/images/:id/', {templateUrl: 'partials/image.html', controller: 'ImageController'}); $routeProvider.when('/settings', {templateUrl: 'partials/settings.html', controller: 'SettingsController'}); + $routeProvider.when('/build', {templateUrl: 'partials/builder.html', controller: 'BuilderController'}); $routeProvider.otherwise({redirectTo: '/'}); }]) // This is your docker url that the api will use to make requests diff --git a/js/controllers.js b/js/controllers.js index 15abcd983..7053e2a5a 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -278,6 +278,10 @@ function StartContainerController($scope, $routeParams, $location, Container) { }; } +function BuilderController($scope, Image) { + $('#response').hide(); +} + function setSuccessfulResponse($scope, msg, msgId) { $scope.alertClass = 'success'; $scope.response = msg; diff --git a/partials/builder.html b/partials/builder.html new file mode 100644 index 000000000..30c373141 --- /dev/null +++ b/partials/builder.html @@ -0,0 +1,17 @@ + + +

Builder:

+ +
+ {{ response }} +
+ +
+ +
+ + diff --git a/partials/images.html b/partials/images.html index e6549e9a1..161ce2d16 100644 --- a/partials/images.html +++ b/partials/images.html @@ -2,9 +2,9 @@

Images:

- {{ response }} + {{ response }}
- +Build Image
From a7e92093c2d3eb01467cd6f0d9be391d7643b101 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Tue, 18 Jun 2013 15:36:02 -0900 Subject: [PATCH 04/18] Add Ace editor --- .gitmodules | 3 +++ lib/ace-builds | 1 + partials/builder.html | 31 +++++++++++++++++-------------- 3 files changed, 21 insertions(+), 14 deletions(-) create mode 100644 .gitmodules create mode 160000 lib/ace-builds diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 000000000..4cb9d9a95 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "lib/ace-builds"] + path = lib/ace-builds + url = git@github.com:ajaxorg/ace-builds.git diff --git a/lib/ace-builds b/lib/ace-builds new file mode 160000 index 000000000..cf536740d --- /dev/null +++ b/lib/ace-builds @@ -0,0 +1 @@ +Subproject commit cf536740d866276b65cfd351610001c2a841e751 diff --git a/partials/builder.html b/partials/builder.html index 30c373141..2ef65e04b 100644 --- a/partials/builder.html +++ b/partials/builder.html @@ -1,17 +1,20 @@ - + +

Build image:

-

Builder:

+
+
+ {{ response }} +
-
- {{ response }} +
+ +
+ +
- -
- -
- - From 7b7bb468440bfcf3c2a784d2ee90df7cf9820537 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Tue, 18 Jun 2013 16:21:27 -0900 Subject: [PATCH 05/18] Add Dockerfile view builder --- css/app.css | 4 +--- index.html | 2 ++ js/app.js | 1 - js/controllers.js | 17 +++++++++++------ partials/builder.html | 36 +++++++++++++++++++----------------- partials/images.html | 11 +++++++---- partials/startcontainer.html | 2 -- 7 files changed, 40 insertions(+), 33 deletions(-) diff --git a/css/app.css b/css/app.css index a7311bf20..183e4b127 100644 --- a/css/app.css +++ b/css/app.css @@ -104,9 +104,7 @@ #editor { height: 300px; - width: 475px; + width: 100%; border: 1px solid #DDD; - border-radius: 4px; - border-bottom-right-radius: 0px; margin-top: 5px; } diff --git a/index.html b/index.html index e8da9503b..6f8537ccb 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,8 @@ + + diff --git a/js/app.js b/js/app.js index 94a2a0885..386179a67 100644 --- a/js/app.js +++ b/js/app.js @@ -8,7 +8,6 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters']) $routeProvider.when('/images/', {templateUrl: 'partials/images.html', controller: 'ImagesController'}); $routeProvider.when('/images/:id/', {templateUrl: 'partials/image.html', controller: 'ImageController'}); $routeProvider.when('/settings', {templateUrl: 'partials/settings.html', controller: 'SettingsController'}); - $routeProvider.when('/build', {templateUrl: 'partials/builder.html', controller: 'BuilderController'}); $routeProvider.otherwise({redirectTo: '/'}); }]) // This is your docker url that the api will use to make requests diff --git a/js/controllers.js b/js/controllers.js index 7053e2a5a..57c2ff222 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -165,12 +165,16 @@ function ImagesController($scope, Image) { $('#response').hide(); $scope.alertClass = 'block'; + $scope.showBuilder = function() { + $('#build-modal').modal('show'); + }; + Image.query({}, function(d) { $scope.images = d; }, function (e) { console.log(e); setFailedResponse($scope, e.data, '#response'); - }); + }); } // Controller for a single image and actions on that image @@ -238,10 +242,6 @@ function StartContainerController($scope, $routeParams, $location, Container) { }; $scope.commandPlaceholder = '["/bin/echo", "Hello world"]'; - $scope.close = function() { - $('#create-modal').modal('hide'); - }; - $scope.create = function() { $scope.response = ''; var cmds = null; @@ -279,7 +279,12 @@ function StartContainerController($scope, $routeParams, $location, Container) { } function BuilderController($scope, Image) { - $('#response').hide(); + $scope.template = '/partials/builder.html'; + + ace.config.set('basePath', '/lib/ace-builds/src-noconflict/'); + + $scope.build = function() { + }; } function setSuccessfulResponse($scope, msg, msgId) { diff --git a/partials/builder.html b/partials/builder.html index 2ef65e04b..a572322c3 100644 --- a/partials/builder.html +++ b/partials/builder.html @@ -1,20 +1,22 @@ - -

Build image:

- -
-
+ + diff --git a/partials/images.html b/partials/images.html index 161ce2d16..7dafb8a4a 100644 --- a/partials/images.html +++ b/partials/images.html @@ -1,10 +1,13 @@ +
+

Images:

-
- {{ response }} -
-Build Image +
+ {{ response }} +
+ +Build Image
diff --git a/partials/startcontainer.html b/partials/startcontainer.html index c4e74f502..41293a952 100644 --- a/partials/startcontainer.html +++ b/partials/startcontainer.html @@ -1,4 +1,3 @@ - From 0f8da44165bc8b79ac11b2c4a19d414f7ea1e20a Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Tue, 18 Jun 2013 16:50:35 -0900 Subject: [PATCH 06/18] Add build support for http request --- js/app.js | 5 +++-- js/controllers.js | 5 ++++- js/services.js | 28 ++++++++++++++++++++++++---- 3 files changed, 31 insertions(+), 7 deletions(-) diff --git a/js/app.js b/js/app.js index 386179a67..cb85fd625 100644 --- a/js/app.js +++ b/js/app.js @@ -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'); diff --git a/js/controllers.js b/js/controllers.js index 57c2ff222..63fc8d319 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -278,12 +278,15 @@ function StartContainerController($scope, $routeParams, $location, Container) { }; } -function BuilderController($scope, Image) { +function BuilderController($scope, Dockerfile) { $scope.template = '/partials/builder.html'; ace.config.set('basePath', '/lib/ace-builds/src-noconflict/'); $scope.build = function() { + Dockerfile.build(editor.getValue(), function(e) { + console.log(e); + }); }; } diff --git a/js/services.js b/js/services.js index 72aa79f4e..d14af9e78 100644 --- a/js/services.js +++ b/js/services.js @@ -53,12 +53,32 @@ 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_API_VERSION, + uiVersion: UI_VERSION, + url: url + }; + }) + .factory('Dockerfile', function(Settings) { + return { + settings: Settings, + 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', 'http://192.168.1.9:4243/v1.1/build'); + request.send(data); + } + }; }); From 86d7c4db5d2c00acb50799cd5da722bc1cc4a2b1 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Tue, 18 Jun 2013 18:01:22 -0900 Subject: [PATCH 07/18] Add spinner for loading times --- index.html | 1 + js/controllers.js | 34 +++-- js/services.js | 15 +- lib/spin.js | 349 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 381 insertions(+), 18 deletions(-) create mode 100644 lib/spin.js diff --git a/index.html b/index.html index 6f8537ccb..6945c1bf9 100644 --- a/index.html +++ b/index.html @@ -51,6 +51,7 @@ + diff --git a/js/controllers.js b/js/controllers.js index 63fc8d319..335597cf5 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -4,7 +4,6 @@ function MastheadController($scope) { } function DashboardController($scope, Container) { - } function StatusBarController($scope, Settings) { @@ -20,7 +19,7 @@ function SideBarController($scope, Container, Settings) { $scope.endpoint = Settings.endpoint; Container.query({all: 0}, function(d) { - $scope.containers = d; + $scope.containers = d; }); } @@ -46,11 +45,11 @@ function SettingsController($scope, Auth, System, Docker, Settings) { }, function(e) { console.log(e); setFailedResponse($scope, e.data, '#response'); - }); - }; + }); + }; Auth.get({}, function(d) { - $scope.auth = d; + $scope.auth = d; }); Docker.get({}, function(d) { @@ -117,34 +116,36 @@ function ContainerController($scope, $routeParams, $location, Container) { $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'); if (e.status === 404) { $('.detail').hide(); } - }); + }); $scope.getChanges(); } // Controller for the list of containers -function ContainersController($scope, Container, Settings) { +function ContainersController($scope, Container, Settings, ViewSpinner) { $scope.displayAll = Settings.displayAll; $scope.predicate = '-Created'; var update = function(data) { + ViewSpinner.spin(); Container.query(data, function(d) { - $scope.containers = d; - }); + $scope.containers = d; + ViewSpinner.stop(); + }); }; - + $scope.toggleGetAll = function() { Settings.displayAll = $scope.displayAll; var u = update; @@ -156,11 +157,11 @@ function ContainersController($scope, Container, Settings) { u(data); }; - update({all: $scope.displayAll ? 1 : 0}); + update({all: $scope.displayAll ? 1 : 0}); } // Controller for the list of images -function ImagesController($scope, Image) { +function ImagesController($scope, Image, ViewSpinner) { $scope.predicate = '-Created'; $('#response').hide(); $scope.alertClass = 'block'; @@ -169,11 +170,14 @@ function ImagesController($scope, Image) { $('#build-modal').modal('show'); }; + ViewSpinner.spin(); Image.query({}, function(d) { $scope.images = d; + ViewSpinner.stop(); }, function (e) { console.log(e); setFailedResponse($scope, e.data, '#response'); + ViewSpinner.stop(); }); } @@ -285,7 +289,7 @@ function BuilderController($scope, Dockerfile) { $scope.build = function() { Dockerfile.build(editor.getValue(), function(e) { - console.log(e); + console.log(e); }); }; } diff --git a/js/services.js b/js/services.js index d14af9e78..cddac3f98 100644 --- a/js/services.js +++ b/js/services.js @@ -62,14 +62,23 @@ angular.module('dockerui.services', ['ngResource']) displayAll: false, endpoint: DOCKER_ENDPOINT, version: DOCKER_API_VERSION, - rawUrl: DOCKER_ENDPOINT + '/' + DOCKER_API_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('Dockerfile', function(Settings) { + var url = Settings.rawUrl + '/build'; return { - settings: Settings, build: function(file, callback) { var data = new FormData(); var dockerfile = new Blob([file], { type: 'text/text' }); @@ -77,7 +86,7 @@ angular.module('dockerui.services', ['ngResource']) var request = new XMLHttpRequest(); request.onload = callback; - request.open('POST', 'http://192.168.1.9:4243/v1.1/build'); + request.open('POST', url); request.send(data); } }; diff --git a/lib/spin.js b/lib/spin.js new file mode 100644 index 000000000..c66c607a7 --- /dev/null +++ b/lib/spin.js @@ -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> 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 + +})); From b069616da2d6c1a7c073b788d1e0babd967e71fa Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Tue, 18 Jun 2013 19:08:17 -0900 Subject: [PATCH 08/18] Add batch ops to images --- index.html | 1 + js/controllers.js | 21 +++++++++++++++++++-- js/services.js | 2 +- js/viewmodel.js | 8 ++++++++ partials/images.html | 14 ++++++++++++-- 5 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 js/viewmodel.js diff --git a/index.html b/index.html index 6945c1bf9..78ba4134d 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,7 @@ + diff --git a/js/controllers.js b/js/controllers.js index 335597cf5..7943a97ea 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -165,14 +165,31 @@ function ImagesController($scope, Image, ViewSpinner) { $scope.predicate = '-Created'; $('#response').hide(); $scope.alertClass = 'block'; + $scope.toggle = false; $scope.showBuilder = function() { $('#build-modal').modal('show'); }; + $scope.removeAction = function() { + angular.forEach($scope.images, function(i) { + if (i.Checked) { + Image.remove({id: i.Id}, function(d) { + console.log(d); + }); + } + }); + }; + + $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); @@ -188,7 +205,7 @@ function ImageController($scope, $routeParams, $location, Image) { $('#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) { diff --git a/js/services.js b/js/services.js index cddac3f98..6aee21839 100644 --- a/js/services.js +++ b/js/services.js @@ -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) { diff --git a/js/viewmodel.js b/js/viewmodel.js new file mode 100644 index 000000000..11560ab2d --- /dev/null +++ b/js/viewmodel.js @@ -0,0 +1,8 @@ + +function ImageViewModel(data) { + this.Id = data.Id; + this.Tag = data.Tag; + this.Repository = data.Repository; + this.Created = data.Created; + this.Checked = false; +} diff --git a/partials/images.html b/partials/images.html index 7dafb8a4a..6aea8a2bd 100644 --- a/partials/images.html +++ b/partials/images.html @@ -7,10 +7,19 @@ {{ response }} -Build Image +
+ @@ -19,7 +28,8 @@ - + + From 2d199eec5d01ba7d20f5eee7dcfe615be90c207f Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Wed, 19 Jun 2013 12:18:54 -0900 Subject: [PATCH 09/18] Add container size --- README.md | 2 ++ js/filters.js | 12 +++++++++++- partials/containers.html | 2 ++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4f69b1753..20f7b1ffb 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,8 @@ DockerUI currently supports the v1.1 Remote API ###Stack * Angular.js * Flatstrap ( Flat Twitter Bootstrap ) +* Spin.js +* Ace editor ###Todo: diff --git a/js/filters.js b/js/filters.js index bac632e30..35969e815 100644 --- a/js/filters.js +++ b/js/filters.js @@ -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(); - }; + }; }); diff --git a/partials/containers.html b/partials/containers.html index aaf8aaf4c..3af32b232 100644 --- a/partials/containers.html +++ b/partials/containers.html @@ -11,6 +11,7 @@ + @@ -20,6 +21,7 @@ + From dd8c4ce6726a068200ed95470a0f6400f5e39c7e Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Wed, 19 Jun 2013 12:39:33 -0900 Subject: [PATCH 10/18] Add size and actions to container view --- js/controllers.js | 38 +++++++++++++++++++++++++++++++++++--- js/viewmodel.js | 10 ++++++++++ partials/containers.html | 20 ++++++++++++++++++-- 3 files changed, 63 insertions(+), 5 deletions(-) diff --git a/js/controllers.js b/js/controllers.js index 7943a97ea..af8817d50 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -68,8 +68,7 @@ function ContainerController($scope, $routeParams, $location, Container) { $scope.start = function(){ Container.start({id: $routeParams.id}, function(d) { - console.log(d); - setSuccessfulResponse($scope, 'Container started.', '#response'); + console.log(d); setSuccessfulResponse($scope, 'Container started.', '#response'); }, function(e) { console.log(e); setFailedResponse($scope, e.data, '#response'); @@ -137,14 +136,31 @@ function ContainerController($scope, $routeParams, $location, Container) { function ContainersController($scope, Container, Settings, 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) { + console.log(d); + }); + } + }); + }; + + $scope.toggleSelectAll = function() { + angular.forEach($scope.containers, function(i) { + i.Checked = $scope.toggle; + }); + }; $scope.toggleGetAll = function() { Settings.displayAll = $scope.displayAll; @@ -157,6 +173,22 @@ function ContainersController($scope, Container, Settings, ViewSpinner) { u(data); }; + $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}); } diff --git a/js/viewmodel.js b/js/viewmodel.js index 11560ab2d..20763a255 100644 --- a/js/viewmodel.js +++ b/js/viewmodel.js @@ -6,3 +6,13 @@ function ImageViewModel(data) { 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; +} diff --git a/partials/containers.html b/partials/containers.html index 3af32b232..77f42be62 100644 --- a/partials/containers.html +++ b/partials/containers.html @@ -1,12 +1,27 @@

Containers:

-
- Display All +
+ + +
+ Display All +
Action Id Tag Repository
{{ image.Id|truncate:10}}{{ image.Id|truncate:20}} {{ image.Tag }} {{ image.Repository }} {{ image.Created|getdate }}Image Command CreatedSize Status
{{ container.Image }} {{ container.Command|truncate:40 }} {{ container.Created|getdate }}{{ container.SizeRw|humansize }} {{ container.Status }}
+ @@ -17,6 +32,7 @@ + From 37ea44a4dc4370a98b4fce0460ecaa87fe2e659c Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Wed, 19 Jun 2013 17:40:58 -0900 Subject: [PATCH 11/18] Add message view and controller --- css/app.css | 7 +++++- index.html | 1 + js/controllers.js | 49 ++++++++++++++++++++++++++++++++++++------ js/services.js | 8 +++++++ partials/images.html | 4 ---- partials/messages.html | 3 +++ 6 files changed, 61 insertions(+), 11 deletions(-) create mode 100644 partials/messages.html diff --git a/css/app.css b/css/app.css index 183e4b127..dc0d0731e 100644 --- a/css/app.css +++ b/css/app.css @@ -94,7 +94,7 @@ } .footer { - max-height:6px; + max-height:6px; } #response { @@ -108,3 +108,8 @@ border: 1px solid #DDD; margin-top: 5px; } + +.messages { + overflow: scroll; + max-height: 50px; +} diff --git a/index.html b/index.html index 78ba4134d..02b1f4ea0 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@
+
diff --git a/js/controllers.js b/js/controllers.js index af8817d50..f942f12e4 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -6,6 +6,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) { $scope.template = 'partials/statusbar.html'; @@ -20,7 +35,7 @@ function SideBarController($scope, Container, Settings) { Container.query({all: 0}, function(d) { $scope.containers = d; - }); + }); } function SettingsController($scope, Auth, System, Docker, Settings) { @@ -193,21 +208,41 @@ function ContainersController($scope, Container, Settings, ViewSpinner) { } // Controller for the list of images -function ImagesController($scope, Image, ViewSpinner) { +function ImagesController($scope, Image, ViewSpinner, Messages) { $scope.predicate = '-Created'; $('#response').hide(); $scope.alertClass = 'block'; $scope.toggle = false; + $scope.respones = []; $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) { console.log(d); + angular.forEach(d, function(resource) { + Messages.send({class: 'text-success', data: 'Deleted: ' + resource.Deleted}); + }); + var index = $scope.images.indexOf(i); + $scope.images.splice(index, 1); + complete(); + }, function(e) { + console.log(e); + Messages.send({class: 'text-error', data: e.data}); + complete(); }); } }); @@ -225,7 +260,7 @@ function ImagesController($scope, Image, ViewSpinner) { ViewSpinner.stop(); }, function (e) { console.log(e); - setFailedResponse($scope, e.data, '#response'); + setFailedResponses($scope, e.data, '#response'); ViewSpinner.stop(); }); } @@ -331,14 +366,16 @@ function StartContainerController($scope, $routeParams, $location, Container) { }; } -function BuilderController($scope, Dockerfile) { +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(e) { - console.log(e); + Dockerfile.build(editor.getValue(), function(d) { + Messages.send({class:'text-info', data: d}); + }, function(e) { + Messages.send({class:'text-error', data: e}); }); }; } diff --git a/js/services.js b/js/services.js index 6aee21839..a59da988c 100644 --- a/js/services.js +++ b/js/services.js @@ -76,6 +76,14 @@ angular.module('dockerui.services', ['ngResource']) 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 { diff --git a/partials/images.html b/partials/images.html index 6aea8a2bd..eb15b6504 100644 --- a/partials/images.html +++ b/partials/images.html @@ -3,10 +3,6 @@

Images:

-
- {{ response }} -
-
  • Build Image
  • diff --git a/partials/messages.html b/partials/messages.html new file mode 100644 index 000000000..6857750eb --- /dev/null +++ b/partials/messages.html @@ -0,0 +1,3 @@ + From 2e67fca78039940cbf4a0f7df15804d586193b58 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Wed, 19 Jun 2013 18:10:08 -0900 Subject: [PATCH 12/18] Add global message display --- js/controllers.js | 132 +++++++++++------------------------ partials/builder.html | 3 - partials/container.html | 4 -- partials/containers.html | 2 +- partials/image.html | 5 -- partials/images.html | 2 +- partials/settings.html | 4 -- partials/startcontainer.html | 3 - 8 files changed, 44 insertions(+), 111 deletions(-) diff --git a/js/controllers.js b/js/controllers.js index f942f12e4..0d7068b68 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -38,92 +38,72 @@ function SideBarController($scope, Container, Settings) { }); } -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; }; @@ -137,8 +117,7 @@ function ContainerController($scope, $routeParams, $location, Container) { Container.get({id: $routeParams.id}, function(d) { $scope.container = d; }, function(e) { - console.log(e); - setFailedResponse($scope, e.data, '#response'); + failedRequestHandler(e, Messages); if (e.status === 404) { $('.detail').hide(); } @@ -148,7 +127,7 @@ function ContainerController($scope, $routeParams, $location, Container) { } // Controller for the list of containers -function ContainersController($scope, Container, Settings, ViewSpinner) { +function ContainersController($scope, Container, Settings, Messages, ViewSpinner) { $scope.displayAll = Settings.displayAll; $scope.predicate = '-Created'; $scope.toggle = false; @@ -165,7 +144,9 @@ function ContainersController($scope, Container, Settings, ViewSpinner) { angular.forEach(items, function(c) { if (c.Checked) { action({id: c.Id}, function(d) { - console.log(d); + Messages.send({class: 'text-success', data: d}); + }, function(e) { + failedRequestHandler(e, Messages); }); } }); @@ -179,13 +160,12 @@ function ContainersController($scope, Container, Settings, ViewSpinner) { $scope.toggleGetAll = function() { Settings.displayAll = $scope.displayAll; - var u = update; var data = {all: 0}; if ($scope.displayAll) { data.all = 1; } - u(data); + update(data); }; $scope.startAction = function() { @@ -209,11 +189,7 @@ function ContainersController($scope, Container, Settings, ViewSpinner) { // Controller for the list of images function ImagesController($scope, Image, ViewSpinner, Messages) { - $scope.predicate = '-Created'; - $('#response').hide(); - $scope.alertClass = 'block'; $scope.toggle = false; - $scope.respones = []; $scope.showBuilder = function() { $('#build-modal').modal('show'); @@ -232,15 +208,14 @@ function ImagesController($scope, Image, ViewSpinner, Messages) { if (i.Checked) { counter = counter + 1; Image.remove({id: i.Id}, function(d) { - console.log(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) { - console.log(e); Messages.send({class: 'text-error', data: e.data}); complete(); }); @@ -259,28 +234,22 @@ function ImagesController($scope, Image, ViewSpinner, Messages) { $scope.images = d.map(function(item) { return new ImageViewModel(item); }); ViewSpinner.stop(); }, function (e) { - console.log(e); - setFailedResponses($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); }); } }; @@ -294,11 +263,9 @@ function ImageController($scope, $routeParams, $location, Image) { $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); }); }; @@ -309,8 +276,7 @@ function ImageController($scope, $routeParams, $location, Image) { 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(); } @@ -319,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, @@ -331,7 +297,6 @@ function StartContainerController($scope, $routeParams, $location, Container) { $scope.commandPlaceholder = '["/bin/echo", "Hello world"]'; $scope.create = function() { - $scope.response = ''; var cmds = null; if ($scope.config.commands !== '') { cmds = angular.fromJson($scope.config.commands); @@ -348,20 +313,16 @@ 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); }); }; } @@ -380,15 +341,6 @@ function BuilderController($scope, Dockerfile, Messages) { }; } -function setSuccessfulResponse($scope, msg, msgId) { - $scope.alertClass = 'success'; - $scope.response = msg; - $(msgId).show(); - setTimeout(function() { $(msgId).hide();}, 5000); -} - -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}); } diff --git a/partials/builder.html b/partials/builder.html index a572322c3..ea2192aaa 100644 --- a/partials/builder.html +++ b/partials/builder.html @@ -4,9 +4,6 @@

    Build Image

-
- {{ response }} -
diff --git a/partials/container.html b/partials/container.html index ec230cbc4..81f36863f 100644 --- a/partials/container.html +++ b/partials/container.html @@ -1,7 +1,3 @@ -
- {{ response }} -
-

Container: {{ container.Id }}

diff --git a/partials/containers.html b/partials/containers.html index 77f42be62..1d3973274 100644 --- a/partials/containers.html +++ b/partials/containers.html @@ -21,7 +21,7 @@
Action Id Image Command
{{ container.Id|truncate:10}} {{ container.Image }} {{ container.Command|truncate:40 }}
- + diff --git a/partials/image.html b/partials/image.html index 4ff58ac92..ef48d6bda 100644 --- a/partials/image.html +++ b/partials/image.html @@ -1,8 +1,3 @@ -
- {{ response }} -
- -
diff --git a/partials/images.html b/partials/images.html index eb15b6504..df661da55 100644 --- a/partials/images.html +++ b/partials/images.html @@ -15,7 +15,7 @@
Action Action Id Image Command
- + diff --git a/partials/settings.html b/partials/settings.html index 122ee5855..93430a08d 100644 --- a/partials/settings.html +++ b/partials/settings.html @@ -1,8 +1,4 @@
-
- {{ response }} -
-

Docker Information

diff --git a/partials/startcontainer.html b/partials/startcontainer.html index 41293a952..24081af8f 100644 --- a/partials/startcontainer.html +++ b/partials/startcontainer.html @@ -4,9 +4,6 @@

Create Container

-
- {{ response }} -
Start container from Image From 8aa21dcdf9c2403286d24555d5b3d98253ef7112 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Wed, 19 Jun 2013 18:13:23 -0900 Subject: [PATCH 13/18] Add ace builds --- lib/ace-builds | 1 + 1 file changed, 1 insertion(+) create mode 160000 lib/ace-builds diff --git a/lib/ace-builds b/lib/ace-builds new file mode 160000 index 000000000..cf536740d --- /dev/null +++ b/lib/ace-builds @@ -0,0 +1 @@ +Subproject commit cf536740d866276b65cfd351610001c2a841e751 From 38f859f52d8cb79719971c823a8f3463cf2ce466 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Sat, 22 Jun 2013 09:23:25 -0900 Subject: [PATCH 14/18] Update build and msg paritals --- css/app.css | 5 +- js/app.js | 2 +- js/controllers.js | 107 +++++++++++++++++++++++------------------ js/services.js | 6 +-- partials/builder.html | 1 + partials/image.html | 11 ++++- partials/settings.html | 16 ------ 7 files changed, 77 insertions(+), 71 deletions(-) diff --git a/css/app.css b/css/app.css index dc0d0731e..d9738bf2f 100644 --- a/css/app.css +++ b/css/app.css @@ -102,7 +102,7 @@ margin: 0 auto; } -#editor { +#editor { height: 300px; width: 100%; border: 1px solid #DDD; @@ -110,6 +110,7 @@ } .messages { - overflow: scroll; max-height: 50px; + overflow-y: scroll; + overflow-x: hidden; } diff --git a/js/app.js b/js/app.js index cb85fd625..1da29030d 100644 --- a/js/app.js +++ b/js/app.js @@ -14,4 +14,4 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters']) .constant('DOCKER_ENDPOINT', 'http://192.168.1.9') .constant('DOCKER_PORT', ':4243') .constant('UI_VERSION', 'v0.2') - .constant('DOCKER_API_VERSION', 'v1.1'); + .constant('DOCKER_API_VERSION', 'v1.2'); diff --git a/js/controllers.js b/js/controllers.js index 0d7068b68..530657a69 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -10,14 +10,14 @@ function MessageController($scope, Messages) { $scope.template = 'partials/messages.html'; $scope.messages = []; $scope.$watch('messages.length', function(o, n) { - $('#message-display').show(); + $('#message-display').show(); }); $scope.$on(Messages.event, function(e, msg) { $scope.messages.push(msg); setTimeout(function() { - $('#message-display').hide('slow'); - }, 10000); + $('#message-display').hide('slow'); + }, 30000); }); } @@ -38,70 +38,62 @@ function SideBarController($scope, Container, Settings) { }); } -function SettingsController($scope, Auth, System, Docker, Settings, Messages) { - $scope.auth = {}; +function SettingsController($scope, System, Docker, Settings, Messages) { $scope.info = {}; $scope.docker = {}; $scope.endpoint = Settings.endpoint; $scope.apiVersion = Settings.version; - $scope.updateAuthInfo = function() { - if ($scope.auth.password != $scope.auth.cpassword) { - alert('Your passwords do not match.'); - return; - } - 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) { - 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; }); } // Controls the page that displays a single container and actions on that container. -function ContainerController($scope, $routeParams, $location, Container, Messages) { +function ContainerController($scope, $routeParams, $location, Container, Messages, ViewSpinner) { $scope.changes = []; $scope.start = function(){ + ViewSpinner.spin(); Container.start({id: $routeParams.id}, function(d) { Messages.send({class: 'text-success', data: 'Container started.'}); + ViewSpinner.stop(); }, function(e) { failedRequestHandler(e, Messages); + ViewSpinner.stop(); }); }; $scope.stop = function() { + ViewSpinner.spin(); Container.stop({id: $routeParams.id}, function(d) { Messages.send({class: 'text-success', data: 'Container stopped.'}); + ViewSpinner.stop(); }, function(e) { failedRequestHandler(e, Messages); + ViewSpinner.stop(); }); }; $scope.kill = function() { + ViewSpinner.spin(); Container.kill({id: $routeParams.id}, function(d) { Messages.send({class: 'text-success', data: 'Container killed.'}); + ViewSpinner.stop(); }, function(e) { failedRequestHandler(e, Messages); + ViewSpinner.stop(); }); }; $scope.remove = function() { - if (confirm("Are you sure you want to remove the container?")) { - Container.remove({id: $routeParams.id}, function(d) { - Messages.send({class: 'text-success', data: 'Container removed.'}); - }, function(e){ - failedRequestHandler(e, Messages); - }); - } + ViewSpinner.spin(); + Container.remove({id: $routeParams.id}, function(d) { + Messages.send({class: 'text-success', data: 'Container removed.'}); + ViewSpinner.stop(); + }, function(e){ + failedRequestHandler(e, Messages); + ViewSpinner.stop(); + }); }; $scope.hasContent = function(data) { @@ -141,12 +133,25 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner }; var batch = function(items, action) { + ViewSpinner.spin(); + var counter = 0; + var complete = function() { + counter = counter -1; + if (counter === 0) { + ViewSpinner.stop(); + } + }; angular.forEach(items, function(c) { if (c.Checked) { + counter = counter + 1; action({id: c.Id}, function(d) { - Messages.send({class: 'text-success', data: d}); + Messages.send({class: 'text-success', data: 'Container ' + c.Id + ' Removed.'}); + var index = $scope.containers.indexOf(c); + $scope.containers.splice(index, 1); + complete(); }, function(e) { failedRequestHandler(e, Messages); + complete(); }); } }); @@ -157,7 +162,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner i.Checked = $scope.toggle; }); }; - + $scope.toggleGetAll = function() { Settings.displayAll = $scope.displayAll; var data = {all: 0}; @@ -190,6 +195,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner // Controller for the list of images function ImagesController($scope, Image, ViewSpinner, Messages) { $scope.toggle = false; + $scope.predicate = '-Created'; $scope.showBuilder = function() { $('#build-modal').modal('show'); @@ -204,7 +210,7 @@ function ImagesController($scope, Image, ViewSpinner, Messages) { ViewSpinner.stop(); } }; - angular.forEach($scope.images, function(i) { + angular.forEach($scope.images, function(i) { if (i.Checked) { counter = counter + 1; Image.remove({id: i.Id}, function(d) { @@ -222,7 +228,7 @@ function ImagesController($scope, Image, ViewSpinner, Messages) { } }); }; - + $scope.toggleSelectAll = function() { angular.forEach($scope.images, function(i) { i.Checked = $scope.toggle; @@ -243,15 +249,13 @@ function ImagesController($scope, Image, ViewSpinner, Messages) { function ImageController($scope, $routeParams, $location, Image, Messages) { $scope.history = []; $scope.tag = {repo: '', force: false}; - + $scope.remove = function() { - if (confirm("Are you sure you want to delete this image?")) { - Image.remove({id: $routeParams.id}, function(d) { - Messages.send({class: 'text-success', data: 'Image removed.'}); - }, function(e) { - failedRequestHandler(e, Messages); - }); - } + Image.remove({id: $routeParams.id}, function(d) { + Messages.send({class: 'text-success', data: 'Image removed.'}); + }, function(e) { + failedRequestHandler(e, Messages); + }); }; $scope.getHistory = function() { @@ -307,10 +311,10 @@ function StartContainerController($scope, $routeParams, $location, Container, Me var s = $scope; Container.create({ - Image: id, - Memory: $scope.config.memory, - MemorySwap: $scope.config.memorySwap, - Cmd: cmds, + Image: id, + Memory: $scope.config.memory, + MemorySwap: $scope.config.memorySwap, + Cmd: cmds, VolumesFrom: $scope.config.volumesFrom }, function(d) { if (d.Id) { @@ -331,12 +335,19 @@ function BuilderController($scope, Dockerfile, Messages) { $scope.template = '/partials/builder.html'; ace.config.set('basePath', '/lib/ace-builds/src-noconflict/'); + var spinner = new Spinner(); $scope.build = function() { + spinner.spin(document.getElementById('build-modal')); Dockerfile.build(editor.getValue(), function(d) { - Messages.send({class:'text-info', data: d}); + console.log(d.currentTarget.response); + $scope.messages = d.currentTarget.response; + $scope.$apply(); + spinner.stop(); }, function(e) { - Messages.send({class:'text-error', data: e}); + $scope.messages = e; + $scope.$apply(); + spinner.stop(); }); }; } diff --git a/js/services.js b/js/services.js index a59da988c..f15570ac2 100644 --- a/js/services.js +++ b/js/services.js @@ -80,12 +80,12 @@ angular.module('dockerui.services', ['ngResource']) return { event: 'messageSend', send: function(msg) { - $rootScope.$broadcast('messageSend', msg); - } + $rootScope.$broadcast('messageSend', msg); + } }; }) .factory('Dockerfile', function(Settings) { - var url = Settings.rawUrl + '/build'; + var url = Settings.rawUrl + '/build'; return { build: function(file, callback) { var data = new FormData(); diff --git a/partials/builder.html b/partials/builder.html index ea2192aaa..8cc96d336 100644 --- a/partials/builder.html +++ b/partials/builder.html @@ -5,6 +5,7 @@
+

{{ messages }}

Build diff --git a/partials/image.html b/partials/image.html index ef48d6bda..654400c4e 100644 --- a/partials/image.html +++ b/partials/image.html @@ -23,6 +23,11 @@
+ + + + + @@ -43,10 +48,14 @@ + + + +
Action Action Id Tag RepositoryContainer: {{ image.container }}
Size:{{ image.Size|humansize }}
Hostname: {{ image.container_config.Hostname }}Volumes from: {{ image.container_config.VolumesFrom }}
Comment:{{ image.comment }}
- +
History: diff --git a/partials/settings.html b/partials/settings.html index 93430a08d..6d85d3020 100644 --- a/partials/settings.html +++ b/partials/settings.html @@ -46,20 +46,4 @@ - - -
- Auth Information - - - - - - - - -
- -
-
From 877effc6adedb115b8f08184a9fccfd8bc9ce507 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Sat, 22 Jun 2013 10:10:22 -0900 Subject: [PATCH 15/18] Add dockerui server files and Dockerfile --- .gitignore | 1 + Dockerfile | 14 ++++++++++ dockerui.go | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++ js/app.js | 5 ++-- 4 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 dockerui.go diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..35f9ef908 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +dockerui diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..70877a542 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,14 @@ +# Dockerfile for DockerUI + +FROM ubuntu + +MAINTAINER Michael Crosby http://crosbymichael.com + +RUN echo "deb http://archive.ubuntu.com/ubuntu precise main universe" > /etc/apt/sources.list +RUN apt-get update +RUN apt-get upgrade + +ADD . /dockerui + +EXPOSE 9000:9000 + diff --git a/dockerui.go b/dockerui.go new file mode 100644 index 000000000..23bde6a7d --- /dev/null +++ b/dockerui.go @@ -0,0 +1,77 @@ +package main + +import ( + "flag" + "fmt" + "github.com/elazarl/goproxy" + "log" + "net/http" + "os" + "strings" +) + +var ( + endpoint = flag.String("e", "", "Docker d endpoint.") + verbose = flag.Bool("v", false, "Verbose logging.") + port = flag.String("p", "9000", "Port to serve dockerui.") +) + +type multiHandler struct { + base http.Handler + proxy *goproxy.ProxyHttpServer + verbose bool +} + +func (h *multiHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) { + if h.verbose { + log.Printf("%s: %s\n", r.Method, r.URL.String()) + } + if isDockerRequest(r.URL.String()) { + h.proxy.ServeHTTP(w, r) + } else { + h.base.ServeHTTP(w, r) + } +} + +func isDockerRequest(url string) bool { + return strings.Contains(url, "dockerapi/") +} + +func createHandler(dir string) http.Handler { + fileHandler := http.FileServer(http.Dir(dir)) + proxy := goproxy.NewProxyHttpServer() + proxy.Verbose = *verbose + + proxy.OnRequest().DoFunc(func(r *http.Request, ctx *goproxy.ProxyCtx) (*http.Request, *http.Response) { + c := http.Client{} + path := strings.Replace(r.URL.RequestURI(), "dockerapi/", "", -1) + n, err := http.NewRequest(r.Method, *endpoint+path, r.Body) + n.Header = r.Header + + if err != nil { + log.Fatal(err) + } + resp, err := c.Do(n) + if err != nil { + log.Fatal(err) + } + return r, resp + + }) + return &multiHandler{base: fileHandler, proxy: proxy, verbose: *verbose} +} + +func main() { + flag.Parse() + + path := fmt.Sprintf(":%s", *port) + + cwd, err := os.Getwd() + if err != nil { + log.Fatal(err) + } + + handler := createHandler(cwd) + + log.Fatal(http.ListenAndServe(path, handler)) +} diff --git a/js/app.js b/js/app.js index 1da29030d..c71dc83d0 100644 --- a/js/app.js +++ b/js/app.js @@ -11,7 +11,8 @@ 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') - .constant('DOCKER_PORT', ':4243') + // You need to set this to the api endpoint without the port i.e. http://192.168.1.9 + .constant('DOCKER_ENDPOINT', '/dockerapi') + .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred. i.e. 4243 .constant('UI_VERSION', 'v0.2') .constant('DOCKER_API_VERSION', 'v1.2'); From 40435f898f09c634932b8913d8d589e3dbe503d5 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Sun, 23 Jun 2013 08:38:48 -0900 Subject: [PATCH 16/18] Update dockerfile and server for app dir --- Dockerfile | 3 ++- dockerui.go | 8 +------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/Dockerfile b/Dockerfile index 70877a542..3ee4c68dc 100644 --- a/Dockerfile +++ b/Dockerfile @@ -8,7 +8,8 @@ RUN echo "deb http://archive.ubuntu.com/ubuntu precise main universe" > /etc/apt RUN apt-get update RUN apt-get upgrade -ADD . /dockerui +ADD . /app/ +ADD dockerui dockerui EXPOSE 9000:9000 diff --git a/dockerui.go b/dockerui.go index 23bde6a7d..25d812668 100644 --- a/dockerui.go +++ b/dockerui.go @@ -6,7 +6,6 @@ import ( "github.com/elazarl/goproxy" "log" "net/http" - "os" "strings" ) @@ -66,12 +65,7 @@ func main() { path := fmt.Sprintf(":%s", *port) - cwd, err := os.Getwd() - if err != nil { - log.Fatal(err) - } - - handler := createHandler(cwd) + handler := createHandler("/app") log.Fatal(http.ListenAndServe(path, handler)) } From 2e1918a3307cf2c79542e3af8dc0b741faaa296f Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Sun, 23 Jun 2013 09:17:52 -0900 Subject: [PATCH 17/18] Update readme for v02 --- README.md | 40 +++++++++++++++++++++++++++++++--------- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 20f7b1ffb..3fedb3cec 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,45 @@ ##DockerUI ![Containers](/containers.png) -DockerUI is a web interface to interact with the Remote API. The goal is to provide a pure client side implementation so it is effortless to connect to docker. This project is not complete and is under heavy development. +DockerUI is a web interface to interact with the Remote API. The goal is to provide a pure client side implementation so it is effortless to connect and manage docker. This project is not complete and is still under heavy development. ![Container](/container.png) ###Goals -* Little to no dependencies - I really want to keep this project a pure html/js app. You can drop the docker binary on your server run so I want to be able to drop these html files on your server and go. -* Consistency - The web UI should be consistent with the commands found on the CLI. +* Little to no dependencies - I really want to keep this project a pure html/js app. I know this will have to change so that I can introduce authentication and authorization along with managing multiple docker endpoints. +* Consistency - The web UI should be consistent with the commands found on the docker CLI. -###Installation -Open js/app.js and change the DOCKER_ENDPOINT constant to your docker ip and port. Then host the site like any other html/js application. +###DockerUI Container +[Container](https://index.docker.io/u/crosbymichael/dockerui/) - .constant('DOCKER_ENDPOINT', 'http://192.168.1.9:4243\:4243'); + docker pull crosbymichael/dockerui + +This is the easiest way to run DockerUI. To run the container make sure you have dockerd running with the -H option so that the remote api can be accessed via ip and not bound to localhost. After you pull the container you need to run it with your dockerd ip as an argument to the dockerui command. + + + docker run -d crosbymichael/dockerui /dockerui -e="http://192.168.1.9:4243" + +This tells dockerui to use http://192.168.1.9:4243 to communicate to dockerd's Remote API. + +###Setup +1. Make sure that you are running dockerd ( docker -d ) with the -H and [-api-enable-cors](http://docs.docker.io/en/latest/api/docker_remote_api_v1.2/#cors-requests) so that the UI can make requests to the Remote API. + + + docker -d -H="192.168.1.9:4243" -api-enable-cors + + +2. Open js/app.js. This is where you need to configure DockerUI so that it knows what ip and port your dockerd Remote API is listening on. There are two constants in the file that you will need to set, dockerd endpoint and dockerd port. If you have the Remote API running on port 80 then there is no need to set the port, just leave it as an empty string. The docker_endpoint needs to be set to the url that the Remote API can be accessed on. Please include the scheme as part of the url. + + + .constant('DOCKER_ENDPOINT', 'http://192.168.1.9') + .constant('DOCKER_PORT', '4243') // Docker port, leave as an empty string if no port is requred. i.e. 4243 + + +3. Use nginx or your favorite server to serve the DockerUI files. There are not backend dependencies, DockerUI is a pure HTML JS app and can be hosted via any static file server. +4. Everything should be good to go, if you experience any issues please report them on this repository. -###Remote API Version -DockerUI currently supports the v1.1 Remote API ###Stack * Angular.js @@ -30,9 +52,9 @@ DockerUI currently supports the v1.1 Remote API * Multiple endpoints * Full repository support * Search -* Create images via Dockerfile * Push files to a container * Unit tests +* Authentication and Authorization ###License - MIT From 9672a33d637b14afc134dcbe1bdfd48506994d4a Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Sun, 23 Jun 2013 09:30:43 -0900 Subject: [PATCH 18/18] Update readme with submodule msg --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3fedb3cec..f9d6f41b7 100644 --- a/README.md +++ b/README.md @@ -37,8 +37,9 @@ This tells dockerui to use http://192.168.1.9:4243 to communicate to dockerd's R .constant('DOCKER_PORT', '4243') // Docker port, leave as an empty string if no port is requred. i.e. 4243 -3. Use nginx or your favorite server to serve the DockerUI files. There are not backend dependencies, DockerUI is a pure HTML JS app and can be hosted via any static file server. -4. Everything should be good to go, if you experience any issues please report them on this repository. +3. Make sure you run git submodule update --init to pull down any dependencies ( ace editor ). +4. Use nginx or your favorite server to serve the DockerUI files. There are not backend dependencies, DockerUI is a pure HTML JS app and can be hosted via any static file server. +5. Everything should be good to go, if you experience any issues please report them on this repository. ###Stack