diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..35f9ef908 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +dockerui 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/Dockerfile b/Dockerfile new file mode 100644 index 000000000..3ee4c68dc --- /dev/null +++ b/Dockerfile @@ -0,0 +1,15 @@ +# 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 . /app/ +ADD dockerui dockerui + +EXPOSE 9000:9000 + 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/README.md b/README.md index 4f69b1753..f9d6f41b7 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,61 @@ ##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. 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. -###Remote API Version -DockerUI currently supports the v1.1 Remote API ###Stack * Angular.js * Flatstrap ( Flat Twitter Bootstrap ) +* Spin.js +* Ace editor ###Todo: * Multiple endpoints * Full repository support * Search -* Create images via Dockerfile * Push files to a container * Unit tests +* Authentication and Authorization ###License - MIT diff --git a/css/app.css b/css/app.css index 590c5d1d7..f967526d2 100644 --- a/css/app.css +++ b/css/app.css @@ -89,10 +89,23 @@ } .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 { + max-height: 50px; + overflow-y: scroll; + overflow-x: hidden; +} diff --git a/dockerui.go b/dockerui.go new file mode 100644 index 000000000..25d812668 --- /dev/null +++ b/dockerui.go @@ -0,0 +1,71 @@ +package main + +import ( + "flag" + "fmt" + "github.com/elazarl/goproxy" + "log" + "net/http" + "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) + + handler := createHandler("/app") + + log.Fatal(http.ListenAndServe(path, handler)) +} diff --git a/index.html b/index.html index 21aa7214c..10bb01c9c 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@
+
@@ -50,6 +51,9 @@ + + + @@ -57,6 +61,7 @@ + diff --git a/js/app.js b/js/app.js index 386179a67..c71dc83d0 100644 --- a/js/app.js +++ b/js/app.js @@ -11,6 +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:4243\:4243') - .constant('UI_VERSION', 'v0.1') - .constant('DOCKER_API_VERSION', 'v1.1'); + // 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'); diff --git a/js/controllers.js b/js/controllers.js index 2f8e427df..530657a69 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -1,40 +1,24 @@ 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) { - +} + +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'); + }, 30000); + }); } function StatusBarController($scope, Settings) { @@ -50,197 +34,253 @@ 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) { - $scope.auth = {}; +function SettingsController($scope, System, Docker, Settings, Messages) { $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'); - 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'); - }, function(e) { - console.log(e); - setFailedResponse($scope, e.data, '#response'); - }); - }; - - Auth.get({}, function(d) { - $scope.auth = d; - }); - - Docker.get({}, function(d) { - $scope.docker = d; - }); - - System.get({}, function(d) { - $scope.info = d; - }); + Docker.get({}, function(d) { $scope.docker = d; }); + System.get({}, function(d) { $scope.info = d; }); } -function ContainerController($scope, $routeParams, $location, Container) { - $('#response').hide(); - $scope.alertClass = 'block'; +// Controls the page that displays a single container and actions on that container. +function ContainerController($scope, $routeParams, $location, Container, Messages, ViewSpinner) { + $scope.changes = []; $scope.start = function(){ + ViewSpinner.spin(); Container.start({id: $routeParams.id}, function(d) { - console.log(d); - setSuccessfulResponse($scope, 'Container started.', '#response'); + Messages.send({class: 'text-success', data: 'Container started.'}); + ViewSpinner.stop(); }, function(e) { - console.log(e); - setFailedResponse($scope, e.data, '#response'); - }); + failedRequestHandler(e, Messages); + ViewSpinner.stop(); + }); }; $scope.stop = function() { + ViewSpinner.spin(); Container.stop({id: $routeParams.id}, function(d) { - console.log(d); - setSuccessfulResponse($scope, 'Container stopped.', '#response'); + Messages.send({class: 'text-success', data: 'Container stopped.'}); + ViewSpinner.stop(); }, function(e) { - console.log(e); - setFailedResponse($scope, e.data, '#response'); + failedRequestHandler(e, Messages); + ViewSpinner.stop(); }); }; $scope.kill = function() { + ViewSpinner.spin(); Container.kill({id: $routeParams.id}, function(d) { - console.log(d); - setSuccessfulResponse($scope, 'Container killed.', '#response'); + Messages.send({class: 'text-success', data: 'Container killed.'}); + ViewSpinner.stop(); }, function(e) { - console.log(e); - setFailedResponse($scope, e.data, '#response'); + 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) { - console.log(d); - setSuccessfulResponse($scope, 'Container removed.', '#response'); - }, function(e){ - console.log(e); - setFailedResponse($scope, e.data, '#response'); - }); - } + 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.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(); } -function ContainersController($scope, Container, Settings) { +// Controller for the list of containers +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) { + 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: 'Container ' + c.Id + ' Removed.'}); + var index = $scope.containers.indexOf(c); + $scope.containers.splice(index, 1); + complete(); + }, function(e) { + failedRequestHandler(e, Messages); + complete(); + }); + } + }); + }; + + $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}); } -function ImagesController($scope, Image) { +// Controller for the list of images +function ImagesController($scope, Image, ViewSpinner, Messages) { + $scope.toggle = false; $scope.predicate = '-Created'; - $('#response').hide(); - $scope.alertClass = 'block'; + $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(); + }); } -function ImageController($scope, $routeParams, $location, Image) { +// Controller for a single image and actions on that 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'); - }, function(e) { - console.log(e); - setFailedResponse($scope, e.data, '#response'); - }); - } + Image.remove({id: $routeParams.id}, function(d) { + Messages.send({class: 'text-success', data: 'Image removed.'}); + }, function(e) { + 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(); } @@ -249,7 +289,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, @@ -260,9 +300,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); @@ -273,38 +311,47 @@ function StartContainerController($scope, $routeParams, $location, Container) { 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) { - 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/'); + var spinner = new Spinner(); + + $scope.build = function() { + spinner.spin(document.getElementById('build-modal')); + Dockerfile.build(editor.getValue(), function(d) { + console.log(d.currentTarget.response); + $scope.messages = d.currentTarget.response; + $scope.$apply(); + spinner.stop(); + }, function(e) { + $scope.messages = e; + $scope.$apply(); + spinner.stop(); + }); + }; } -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/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/js/services.js b/js/services.js index 72aa79f4e..f15570ac2 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) { @@ -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); + } + }; }); diff --git a/js/viewmodel.js b/js/viewmodel.js new file mode 100644 index 000000000..20763a255 --- /dev/null +++ b/js/viewmodel.js @@ -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; +} 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/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 + +})); diff --git a/partials/builder.html b/partials/builder.html new file mode 100644 index 000000000..8cc96d336 --- /dev/null +++ b/partials/builder.html @@ -0,0 +1,20 @@ + + 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 aaf8aaf4c..1d3973274 100644 --- a/partials/containers.html +++ b/partials/containers.html @@ -1,25 +1,43 @@

Containers:

-
- Display All +
+ + +
+ Display All +
+ + + + diff --git a/partials/image.html b/partials/image.html index 5692d5235..654400c4e 100644 --- a/partials/image.html +++ b/partials/image.html @@ -1,11 +1,14 @@ -
- {{ response }} -
+
- +

Image: {{ image.id }}

+
+ +
+ +
Action Id Image Command CreatedSize Status
{{ container.Id|truncate:10}} {{ container.Image }} {{ container.Command|truncate:40 }} {{ container.Created|getdate }}{{ container.SizeRw|humansize }} {{ container.Status }}
@@ -20,6 +23,11 @@ + + + + + @@ -40,10 +48,14 @@ + + + +
Container: {{ image.container }}
Size:{{ image.Size|humansize }}
Hostname: {{ image.container_config.Hostname }}Volumes from: {{ image.container_config.VolumesFrom }}
Comment:{{ image.comment }}
- +
History: @@ -79,9 +91,6 @@
-
- -
diff --git a/partials/images.html b/partials/images.html index e6549e9a1..df661da55 100644 --- a/partials/images.html +++ b/partials/images.html @@ -1,13 +1,21 @@ +
+

Images:

-
- {{ response }} -
- + + @@ -16,7 +24,8 @@ - + + 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/messages.html b/partials/messages.html new file mode 100644 index 000000000..6857750eb --- /dev/null +++ b/partials/messages.html @@ -0,0 +1,3 @@ + diff --git a/partials/settings.html b/partials/settings.html index 122ee5855..6d85d3020 100644 --- a/partials/settings.html +++ b/partials/settings.html @@ -1,8 +1,4 @@
-
- {{ response }} -
-

Docker Information

@@ -50,20 +46,4 @@

Action Id Tag Repository
{{ image.Id|truncate:10}}{{ image.Id|truncate:20}} {{ image.Tag }} {{ image.Repository }} {{ image.Created|getdate }}
- -
-
- Auth Information - - - - - - - - -
- -
-
diff --git a/partials/startcontainer.html b/partials/startcontainer.html index 0cef79c27..24081af8f 100644 --- a/partials/startcontainer.html +++ b/partials/startcontainer.html @@ -1,26 +1,28 @@ + - - -
-
- Start container from Image - - - - Input commands as an array - - - - - - - - - -
- -
-
diff --git a/partials/statusbar.html b/partials/statusbar.html index d4abfe6ff..3c54059b5 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