From ac8f84773e4efbd3f912bc86b3ecb3aa2dc996b5 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Wed, 12 Jun 2013 19:36:10 -0900 Subject: [PATCH 1/6] Small readme update --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 4f197cf88..4f69b1753 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ DockerUI is a web interface to interact with the Remote API. The goal is to pro ###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. ###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. @@ -24,8 +25,6 @@ DockerUI currently supports the v1.1 Remote API ###Todo: -I work fast so it will not be long before these changes are impelmented. - * Multiple endpoints * Full repository support * Search From 20f67f9f4a822b713b7d02ca1ed487c1b4ef8e86 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Fri, 14 Jun 2013 15:20:22 -0900 Subject: [PATCH 2/6] Add bottom status bar with version information --- css/app.css | 4 ++++ index.html | 12 ++++-------- js/app.js | 3 ++- js/controllers.js | 9 ++++++++- js/services.js | 5 +++-- partials/statusbar.html | 3 +++ 6 files changed, 24 insertions(+), 12 deletions(-) create mode 100644 partials/statusbar.html diff --git a/css/app.css b/css/app.css index af14914a9..a70a0982e 100644 --- a/css/app.css +++ b/css/app.css @@ -92,3 +92,7 @@ .container-bottom { height: 50px; } + + .footer { + max-height:6px; + } diff --git a/index.html b/index.html index 1c0f4b445..e8da9503b 100644 --- a/index.html +++ b/index.html @@ -28,16 +28,12 @@
+
-
-
- -
-
-
-

Created by: crosbymichael

-
+
+
+
diff --git a/js/app.js b/js/app.js index 3d58e29f6..386179a67 100644 --- a/js/app.js +++ b/js/app.js @@ -12,4 +12,5 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters']) }]) // This is your docker url that the api will use to make requests .constant('DOCKER_ENDPOINT', 'http://192.168.1.9:4243\:4243') - .constant('DOCKER_API_VERSION', '/v1.1'); + .constant('UI_VERSION', 'v0.1') + .constant('DOCKER_API_VERSION', 'v1.1'); diff --git a/js/controllers.js b/js/controllers.js index b391b748e..580b7ebb5 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -37,6 +37,13 @@ function DashboardController($scope, Container) { } +function StatusBarController($scope, Settings) { + $scope.template = 'partials/statusbar.html'; + + $scope.uiVersion = Settings.uiVersion; + $scope.apiVersion = Settings.version; +} + function SideBarController($scope, Container, Settings) { $scope.template = 'partials/sidebar.html'; $scope.containers = []; @@ -65,7 +72,7 @@ function SettingsController($scope, Auth, System, Docker, Settings) { Auth.update( {username: $scope.auth.username, email: $scope.auth.email, password: $scope.auth.password}, function(d) { console.log(d); - setSuccessfulResponse($scope, 'Auto information updated.', '#response'); + setSuccessfulResponse($scope, 'Auth information updated.', '#response'); }, function(e) { console.log(e); setFailedResponse($scope, e.data, '#response'); diff --git a/js/services.js b/js/services.js index 3b44cfdb4..f42e2a332 100644 --- a/js/services.js +++ b/js/services.js @@ -53,11 +53,12 @@ angular.module('dockerui.services', ['ngResource']) get: {method: 'GET'} }); }) - .factory('Settings', function(DOCKER_ENDPOINT, DOCKER_API_VERSION) { + .factory('Settings', function(DOCKER_ENDPOINT, DOCKER_API_VERSION, UI_VERSION) { return { displayAll: false, endpoint: DOCKER_ENDPOINT, version: DOCKER_API_VERSION, - url: DOCKER_ENDPOINT + DOCKER_API_VERSION + url: DOCKER_ENDPOINT + '/' + DOCKER_API_VERSION, + uiVersion: UI_VERSION }; }); diff --git a/partials/statusbar.html b/partials/statusbar.html new file mode 100644 index 000000000..d4abfe6ff --- /dev/null +++ b/partials/statusbar.html @@ -0,0 +1,3 @@ +
+

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

+
From 3985e608c20d7f93c910cee929d13bb3d627e517 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Fri, 14 Jun 2013 15:37:00 -0900 Subject: [PATCH 3/6] Add err message when image or container not found --- css/app.css | 5 +++++ js/controllers.js | 15 +++++++++++++-- partials/container.html | 7 ++++--- partials/image.html | 8 ++++---- partials/images.html | 4 ++++ 5 files changed, 30 insertions(+), 9 deletions(-) diff --git a/css/app.css b/css/app.css index a70a0982e..d7833aac6 100644 --- a/css/app.css +++ b/css/app.css @@ -96,3 +96,8 @@ .footer { max-height:6px; } + + #response { + width: 80%; + margin: 0 auto; + } diff --git a/js/controllers.js b/js/controllers.js index 580b7ebb5..46a2628f2 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -151,7 +151,10 @@ function ContainerController($scope, $routeParams, $location, Container) { $scope.container = d; }, function(e) { console.log(e); - $location.path('/containers/'); + setFailedResponse($scope, e.data, '#response'); + if (e.status === 404) { + $('.detail').hide(); + } }); $scope.getChanges(); @@ -185,9 +188,14 @@ function ContainersController($scope, Container, Settings) { // Controller for the list of images function ImagesController($scope, Image) { $scope.predicate = '-Created'; + $('#response').hide(); + $scope.alertClass = 'block'; Image.query({}, function(d) { $scope.images = d; + }, function (e) { + console.log(e); + setFailedResponse($scope, e.data, '#response'); }); } @@ -232,7 +240,10 @@ function ImageController($scope, $routeParams, $location, Image) { $scope.image = d; }, function(e) { console.log(e); - $location.path('/images/'); + setFailedResponse($scope, e.data, '#response'); + if (e.status === 404) { + $('.detail').hide(); + } }); $scope.getHistory(); diff --git a/partials/container.html b/partials/container.html index df0d0e84d..ddbed3b87 100644 --- a/partials/container.html +++ b/partials/container.html @@ -1,8 +1,9 @@ -
-
+
{{ response }} -
+
+
+

Container: {{ container.Id }}

diff --git a/partials/image.html b/partials/image.html index 05f7b021a..595efde42 100644 --- a/partials/image.html +++ b/partials/image.html @@ -1,9 +1,9 @@ -
- -
+
{{ response }} -
+
+
+

Image: {{ image.id }}

diff --git a/partials/images.html b/partials/images.html index 0840f3938..e6549e9a1 100644 --- a/partials/images.html +++ b/partials/images.html @@ -1,6 +1,10 @@

Images:

+
+ {{ response }} +
+
From b516fcdd0e29dc54a517bd577a38bf83229395e2 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Fri, 14 Jun 2013 16:02:22 -0900 Subject: [PATCH 4/6] Change tag url params --- js/services.js | 2 +- partials/image.html | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/js/services.js b/js/services.js index f42e2a332..72aa79f4e 100644 --- a/js/services.js +++ b/js/services.js @@ -27,7 +27,7 @@ angular.module('dockerui.services', ['ngResource']) create :{method: 'POST', params: {action:'create'}}, insert :{method: 'POST', params: {id: '@id', action:'insert'}}, push :{method: 'POST', params: {id: '@id', action:'push'}}, - tag :{method: 'POST', params: {id: '@id', action:'tag'}}, + tag :{method: 'POST', params: {id: '@id', action:'tag', force: 0, repo: '@repo'}}, delete :{id: '@id', method: 'DELETE'} }); }) diff --git a/partials/image.html b/partials/image.html index 595efde42..1b1924d77 100644 --- a/partials/image.html +++ b/partials/image.html @@ -64,15 +64,15 @@
-
+
- Tag to Repo - - + Tag image + + - +
From fde898aa1f8f05a672ca523a887cc6d8217ca737 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Fri, 14 Jun 2013 16:15:14 -0900 Subject: [PATCH 5/6] Do not display empty changes --- js/controllers.js | 4 ++++ partials/container.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/js/controllers.js b/js/controllers.js index 46a2628f2..8b6db4ef3 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -141,6 +141,10 @@ function ContainerController($scope, $routeParams, $location, Container) { $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; diff --git a/partials/container.html b/partials/container.html index ddbed3b87..ec230cbc4 100644 --- a/partials/container.html +++ b/partials/container.html @@ -52,7 +52,7 @@
    -
  • +
  • {{ change.Path }} {{ change.Kind }}
From a2a8c4863f01b62bc8f203075b80045172b397f5 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Fri, 14 Jun 2013 16:46:41 -0900 Subject: [PATCH 6/6] Fix start container form model --- js/controllers.js | 26 +++++++++++++++----------- partials/image.html | 2 +- partials/startcontainer.html | 11 +++++------ 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/js/controllers.js b/js/controllers.js index 8b6db4ef3..7e91f0bed 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -255,17 +255,21 @@ function ImageController($scope, $routeParams, $location, Image) { function StartContainerController($scope, $routeParams, $location, Container) { $scope.template = 'partials/startcontainer.html'; - $scope.memory = 0; - $scope.memorySwap = 0; - $scope.env = ''; - $scope.dns = ''; - $scope.volumesFrom = ''; - $scope.commands = ''; + $scope.config = { + memory: 0, + memorySwap: 0, + env: '', + commands: '', + volumesFrom: '' + }; + $scope.commandPlaceholder = '["/bin/echo", "Hello world"]'; $scope.launchContainer = function() { + $scope.response = ''; + var cmds = null; - if ($scope.commands !== '') { - cmds = $scope.commands.split('\n'); + if ($scope.config.commands !== '') { + cmds = angular.fromJson($scope.config.commands); } var id = $routeParams.id; var ctor = Container; @@ -274,10 +278,10 @@ function StartContainerController($scope, $routeParams, $location, Container) { Container.create({ Image: id, - Memory: $scope.memory, - MemorySwap: $scope.memorySwap, + Memory: $scope.config.memory, + MemorySwap: $scope.config.memorySwap, Cmd: cmds, - VolumesFrom: $scope.volumesFrom + VolumesFrom: $scope.config.volumesFrom }, function(d) { console.log(d); if (d.Id) { diff --git a/partials/image.html b/partials/image.html index 1b1924d77..5692d5235 100644 --- a/partials/image.html +++ b/partials/image.html @@ -68,7 +68,7 @@
Tag image - + diff --git a/partials/startcontainer.html b/partials/startcontainer.html index 98a81f608..0cef79c27 100644 --- a/partials/startcontainer.html +++ b/partials/startcontainer.html @@ -9,17 +9,16 @@ Start container from Image - - Place each command on a new line - + + Input commands as an array - + - + - +