From 528565afc8d047253f61a36e984788e0082e1c82 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Mon, 10 Jun 2013 03:59:57 -0900 Subject: [PATCH 1/5] Update settings with endpoint --- README.md | 4 ++++ js/app.js | 1 + js/services.js | 5 +++-- partials/settings.html | 1 + 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 05e7aa42f..6de96d5be 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,10 @@ DockerUI is a web interface to interact with the Remote API. The goal is to pro ![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. + ###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. diff --git a/js/app.js b/js/app.js index b5ea70d84..f0d03aa45 100644 --- a/js/app.js +++ b/js/app.js @@ -10,4 +10,5 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters']) $routeProvider.when('/settings', {templateUrl: 'partials/settings.html', controller: 'SettingsController'}); $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'); diff --git a/js/services.js b/js/services.js index 21a15056a..27b0bfa5e 100644 --- a/js/services.js +++ b/js/services.js @@ -53,8 +53,9 @@ angular.module('dockerui.services', ['ngResource']) get: {method: 'GET'} }); }) - .factory('Settings', function() { + .factory('Settings', function(DOCKER_ENDPOINT) { return { - displayAll: false + displayAll: false, + endpoint: DOCKER_ENDPOINT }; }); diff --git a/partials/settings.html b/partials/settings.html index 24bb92a37..a1121db7e 100644 --- a/partials/settings.html +++ b/partials/settings.html @@ -6,6 +6,7 @@

Docker Information

+ Endpoint{{ endpoint }}
Version{{ docker.Version }}
GitCommit{{ docker.GitCommit }}
GoVersion{{ docker.GoVersion }}
From 1a11d7bb3a4aa72a261ecbf7c62c0208f9e0d198 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Mon, 10 Jun 2013 15:10:43 -0900 Subject: [PATCH 2/5] Add api version --- js/app.js | 3 ++- js/controllers.js | 2 ++ js/services.js | 26 ++++++++++++++------------ partials/settings.html | 9 +++++---- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/js/app.js b/js/app.js index f0d03aa45..dd4a786e8 100644 --- a/js/app.js +++ b/js/app.js @@ -11,4 +11,5 @@ 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('DOCKER_ENDPOINT', 'http://192.168.1.9:4243\:4243') + .constant('DOCKER_API_VERSION', '/v1.1'); diff --git a/js/controllers.js b/js/controllers.js index 362d097b0..06a57e5a1 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -42,6 +42,8 @@ function SettingsController($scope, Auth, System, Docker, Settings) { $scope.auth = {}; $scope.info = {}; $scope.docker = {}; + $scope.endpoint = Settings.endpoint; + $scope.apiVersion = Settings.version; $('#response').hide(); $scope.alertClass = 'block'; diff --git a/js/services.js b/js/services.js index 27b0bfa5e..3b44cfdb4 100644 --- a/js/services.js +++ b/js/services.js @@ -1,10 +1,10 @@ 'use strict'; angular.module('dockerui.services', ['ngResource']) - .factory('Container', function($resource, DOCKER_ENDPOINT) { + .factory('Container', function($resource, Settings) { // Resource for interacting with the docker containers // http://docs.docker.io/en/latest/api/docker_remote_api.html#containers - return $resource(DOCKER_ENDPOINT + '/containers/:id/:action', {}, { + return $resource(Settings.url + '/containers/:id/:action', {}, { query: {method: 'GET', params:{ all: 0, action: 'json'}, isArray: true}, get :{method: 'GET', params: { action:'json'}}, start: {method: 'POST', params: {id: '@id', action: 'start'}}, @@ -16,10 +16,10 @@ angular.module('dockerui.services', ['ngResource']) remove :{method: 'DELETE', params: {id: '@id', v:0}} }); }) - .factory('Image', function($resource, DOCKER_ENDPOINT) { + .factory('Image', function($resource, Settings) { // Resource for docker images // http://docs.docker.io/en/latest/api/docker_remote_api.html#images - return $resource(DOCKER_ENDPOINT + '/images/:id/:action', {}, { + return $resource(Settings.url + '/images/:id/:action', {}, { query: {method: 'GET', params:{ all: 0, action: 'json'}, isArray: true}, get :{method: 'GET', params: { action:'json'}}, search :{method: 'GET', params: { action:'search'}}, @@ -31,31 +31,33 @@ angular.module('dockerui.services', ['ngResource']) delete :{id: '@id', method: 'DELETE'} }); }) - .factory('Docker', function($resource, DOCKER_ENDPOINT) { + .factory('Docker', function($resource, Settings) { // Information for docker // http://docs.docker.io/en/latest/api/docker_remote_api.html#display-system-wide-information - return $resource(DOCKER_ENDPOINT + '/version', {}, { + return $resource(Settings.url + '/version', {}, { get: {method: 'GET'} }); }) - .factory('Auth', function($resource, DOCKER_ENDPOINT) { + .factory('Auth', function($resource, Settings) { // Auto Information for docker // http://docs.docker.io/en/latest/api/docker_remote_api.html#set-auth-configuration - return $resource(DOCKER_ENDPOINT + '/auth', {}, { + return $resource(Settings.url + '/auth', {}, { get: {method: 'GET'}, update: {method: 'POST'} }); }) - .factory('System', function($resource, DOCKER_ENDPOINT) { + .factory('System', function($resource, Settings) { // System for docker // http://docs.docker.io/en/latest/api/docker_remote_api.html#display-system-wide-information - return $resource(DOCKER_ENDPOINT + '/info', {}, { + return $resource(Settings.url + '/info', {}, { get: {method: 'GET'} }); }) - .factory('Settings', function(DOCKER_ENDPOINT) { + .factory('Settings', function(DOCKER_ENDPOINT, DOCKER_API_VERSION) { return { displayAll: false, - endpoint: DOCKER_ENDPOINT + endpoint: DOCKER_ENDPOINT, + version: DOCKER_API_VERSION, + url: DOCKER_ENDPOINT + DOCKER_API_VERSION }; }); diff --git a/partials/settings.html b/partials/settings.html index a1121db7e..122ee5855 100644 --- a/partials/settings.html +++ b/partials/settings.html @@ -6,10 +6,11 @@

Docker Information

- Endpoint{{ endpoint }}
- Version{{ docker.Version }}
- GitCommit{{ docker.GitCommit }}
- GoVersion{{ docker.GoVersion }}
+ Endpoint: {{ endpoint }}
+ Api Version: {{ apiVersion }}
+ Version: {{ docker.Version }}
+ Git Commit: {{ docker.GitCommit }}
+ Go Version: {{ docker.GoVersion }}

From e7ef1aee3a7906cc189e8f3cd05b4d7f2aaea1a8 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Mon, 10 Jun 2013 15:16:28 -0900 Subject: [PATCH 3/5] Update README with todo --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 6de96d5be..4f197cf88 100644 --- a/README.md +++ b/README.md @@ -15,13 +15,30 @@ Open js/app.js and change the DOCKER_ENDPOINT constant to your docker ip and por .constant('DOCKER_ENDPOINT', 'http://192.168.1.9:4243\:4243'); +###Remote API Version +DockerUI currently supports the v1.1 Remote API ###Stack * Angular.js * Flatstrap ( Flat Twitter Bootstrap ) +###Todo: +I work fast so it will not be long before these changes are impelmented. + +* Multiple endpoints +* Full repository support +* Search +* Create images via Dockerfile +* Push files to a container +* Unit tests + + ###License - MIT +The DockerUI code is licensed under the MIT license. Flatstrap(bootstrap) is licensed under the Apache License v2.0 and Angular.js is licensed under MIT. + + +**DockerUI:** Copyright (c) 2013 Michael Crosby. crosbymichael.com Permission is hereby granted, free of charge, to any person From 85a97e708045a252a3ff20334f831c75aa1e33ee Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Mon, 10 Jun 2013 15:42:34 -0900 Subject: [PATCH 4/5] Controller cleanup --- js/app.js | 2 +- js/controllers.js | 98 ++++++++------------------ partials/{home.html => dashboard.html} | 0 3 files changed, 31 insertions(+), 69 deletions(-) rename partials/{home.html => dashboard.html} (100%) diff --git a/js/app.js b/js/app.js index dd4a786e8..758716650 100644 --- a/js/app.js +++ b/js/app.js @@ -2,7 +2,7 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters']) .config(['$routeProvider', function ($routeProvider) { - $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'HomeController'}); + $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'DashboardController'}); $routeProvider.when('/containers/', {templateUrl: 'partials/containers.html', controller: 'ContainersController'}); $routeProvider.when('/containers/:id/', {templateUrl: 'partials/container.html', controller: 'ContainerController'}); $routeProvider.when('/images/', {templateUrl: 'partials/images.html', controller: 'ImagesController'}); diff --git a/js/controllers.js b/js/controllers.js index 06a57e5a1..c2ff40c05 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -1,5 +1,4 @@ -// Controller for the top masthead function MastheadController($scope) { $scope.template = 'partials/masthead.html'; @@ -34,7 +33,7 @@ function MastheadController($scope) { }; } -function HomeController() { +function DashboardController($scope, Container) { } @@ -48,30 +47,18 @@ function SettingsController($scope, Auth, System, Docker, Settings) { $('#response').hide(); $scope.alertClass = 'block'; - var showAndHide = function(hide) { - $('#response').show(); - if (hide) { - setTimeout(function() { $('#response').hide();}, 5000); - } - }; - $scope.updateAuthInfo = function() { if ($scope.auth.password != $scope.auth.cpassword) { - $scope.response = 'Your passwords do not match.'; - showAndHide(true); + 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); - $scope.alertClass = 'success'; - $scope.response = 'Auth information updated.'; - showAndHide(true); + setSuccessfulResponse($scope, 'Auto information updated.', '#response'); }, function(e) { console.log(e); - $scope.alertClass = 'error'; - $scope.response = e.data; - showAndHide(false); + setFailedResponse($scope, e.data, '#response'); }); }; @@ -93,52 +80,33 @@ function ContainerController($scope, $routeParams, $location, Container) { $('#response').hide(); $scope.alertClass = 'block'; - var showAndHide = function(hide) { - $('#response').show(); - if (hide) { - setTimeout(function() { $('#response').hide();}, 5000); - } - }; - $scope.start = function(){ Container.start({id: $routeParams.id}, function(d) { console.log(d); - $scope.alertClass = 'success'; - $scope.response = 'Container started.'; - showAndHide(true); + setSuccessfulResponse($scope, 'Container started.', '#response'); }, function(e) { console.log(e); - $scope.alertClass = 'error'; - $scope.response = e.data; - showAndHide(false); + setFailedResponse($scope, e.data, '#response'); }); }; $scope.stop = function() { Container.stop({id: $routeParams.id}, function(d) { console.log(d); - $scope.alertClass = 'success'; - $scope.response = 'Container stopped.'; - showAndHide(true); + setSuccessfulResponse($scope, 'Container stopped.', '#response'); }, function(e) { console.log(e); - $scope.alertClass = 'error'; - $scope.response = e.data; - showAndHide(false); + setFailedResponse($scope, e.data, '#response'); }); }; $scope.kill = function() { Container.kill({id: $routeParams.id}, function(d) { console.log(d); - $scope.alertClass = 'success'; - $scope.response = 'Container killed.'; - showAndHide(true); + setSuccessfulResponse($scope, 'Container killed.', '#response'); }, function(e) { console.log(e); - $scope.alertClass = 'error'; - $scope.response = e.data; - showAndHide(false); + setFailedResponse($scope, e.data, '#response'); }); }; @@ -146,14 +114,10 @@ function ContainerController($scope, $routeParams, $location, Container) { if (confirm("Are you sure you want to remove the container?")) { Container.remove({id: $routeParams.id}, function(d) { console.log(d); - $scope.alertClass = 'success'; - $scope.response = 'Container removed.'; - showAndHide(true); + setSuccessfulResponse($scope, 'Container removed.', '#response'); }, function(e){ console.log(e); - $scope.alertClass = 'error'; - $scope.response = e.data; - showAndHide(false); + setFailedResponse($scope, e.data, '#response'); }); } }; @@ -217,26 +181,15 @@ function ImageController($scope, $routeParams, $location, Image) { $('#response').hide(); $scope.alertClass = 'block'; - - var showAndHide = function(hide) { - $('#response').show(); - if (hide) { - setTimeout(function() { $('#response').hide();}, 5000); - } - }; - + $scope.remove = function() { if (confirm("Are you sure you want to delete this image?")) { Image.remove({id: $routeParams.id}, function(d) { console.log(d); - $scope.alertClass = 'success'; - $scope.response = 'Image removed.'; - showAndHide(true); + setSuccessfulResponse($scope, 'Image removed.', '#response'); }, function(e) { console.log(e); - $scope.alertClass = 'error'; - $scope.response = e.data; - showAndHide(false); + setFailedResponse($scope, e.data, '#response'); }); } }; @@ -251,14 +204,10 @@ function ImageController($scope, $routeParams, $location, Image) { var tag = $scope.tag; Image.tag({id: $routeParams.id, repo: tag.repo, force: tag.force ? 1 : 0}, function(d) { console.log(d); - $scope.alertClass = 'success'; - $scope.response = 'Tag added.'; - showAndHide(true); + setSuccessfulResponse($scope, 'Tag added.', '#response'); }, function(e) { console.log(e); - $scope.alertClass = 'error'; - $scope.response = e.data; - showAndHide(false); + setFailedResponse($scope, e.data, '#response'); }); }; @@ -314,3 +263,16 @@ function StartContainerController($scope, $routeParams, $location, Container) { }); }; } + +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(); +} diff --git a/partials/home.html b/partials/dashboard.html similarity index 100% rename from partials/home.html rename to partials/dashboard.html From 5ff3e2872c5ef0633be7a3d84741a9edab554427 Mon Sep 17 00:00:00 2001 From: Michael Crosby Date: Mon, 10 Jun 2013 16:56:14 -0900 Subject: [PATCH 5/5] Update home page with dashboard partials --- css/app.css | 9 +++++++++ index.html | 11 ++++++----- js/app.js | 2 +- js/controllers.js | 10 ++++++++++ partials/dashboard.html | 20 +++++++++++++------- partials/masthead.html | 4 ++-- partials/sidebar.html | 11 +++++++++++ 7 files changed, 52 insertions(+), 15 deletions(-) create mode 100644 partials/sidebar.html diff --git a/css/app.css b/css/app.css index 62c986b38..af14914a9 100644 --- a/css/app.css +++ b/css/app.css @@ -75,6 +75,11 @@ margin: 0 auto; } + .center { + width: 80%; + margin: 0 auto; + } + .btn-remove { margin: 0 auto; max-width: 70%; @@ -83,3 +88,7 @@ .actions { margin: 0 auto; } + + .container-bottom { + height: 50px; + } diff --git a/index.html b/index.html index 8b90de659..1c0f4b445 100644 --- a/index.html +++ b/index.html @@ -29,15 +29,16 @@
-
-
+
+
-
-

Created by:Michael Crosby

+
+
+

Created by: crosbymichael

-
+
diff --git a/js/app.js b/js/app.js index 758716650..3d58e29f6 100644 --- a/js/app.js +++ b/js/app.js @@ -2,7 +2,7 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters']) .config(['$routeProvider', function ($routeProvider) { - $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'DashboardController'}); + $routeProvider.when('/', {templateUrl: 'partials/dashboard.html', controller: 'DashboardController'}); $routeProvider.when('/containers/', {templateUrl: 'partials/containers.html', controller: 'ContainersController'}); $routeProvider.when('/containers/:id/', {templateUrl: 'partials/container.html', controller: 'ContainerController'}); $routeProvider.when('/images/', {templateUrl: 'partials/images.html', controller: 'ImagesController'}); diff --git a/js/controllers.js b/js/controllers.js index c2ff40c05..b391b748e 100644 --- a/js/controllers.js +++ b/js/controllers.js @@ -37,6 +37,16 @@ function DashboardController($scope, Container) { } +function SideBarController($scope, Container, Settings) { + $scope.template = 'partials/sidebar.html'; + $scope.containers = []; + $scope.endpoint = Settings.endpoint; + + Container.query({all: 0}, function(d) { + $scope.containers = d; + }); +} + function SettingsController($scope, Auth, System, Docker, Settings) { $scope.auth = {}; $scope.info = {}; diff --git a/partials/dashboard.html b/partials/dashboard.html index 2afb6f24e..637460e30 100644 --- a/partials/dashboard.html +++ b/partials/dashboard.html @@ -1,7 +1,13 @@ -
-

DockerUI

-

The Linux container engine

- Learn more. -
- -
+ +
+ +
+
+

DockerUI

+

The Linux container engine

+ Learn more. +
+
+
diff --git a/partials/masthead.html b/partials/masthead.html index 39946d641..7835148d5 100644 --- a/partials/masthead.html +++ b/partials/masthead.html @@ -4,12 +4,12 @@
-
+
diff --git a/partials/sidebar.html b/partials/sidebar.html new file mode 100644 index 000000000..1e4d3de0e --- /dev/null +++ b/partials/sidebar.html @@ -0,0 +1,11 @@ +
+ Running containers: +
+ Endpoint: {{ endpoint }} + +