mirror of https://github.com/portainer/portainer
Michael Crosby
commit
5dc53c3abe
|
|
@ -0,0 +1 @@
|
|||
dockerui
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "lib/ace-builds"]
|
||||
path = lib/ace-builds
|
||||
url = git@github.com:ajaxorg/ace-builds.git
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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.
|
||||
43
README.md
43
README.md
|
|
@ -1,36 +1,61 @@
|
|||
##DockerUI
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
|
||||
###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
|
||||
|
|
|
|||
15
css/app.css
15
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
|
||||
<div class="container">
|
||||
<div ng-include="template" ng-controller="MastheadController"></div>
|
||||
<div ng-include="template" ng-controller="MessageController"></div>
|
||||
|
||||
<div id="view" ng-view></div>
|
||||
|
||||
|
|
@ -50,6 +51,9 @@
|
|||
<script src="../assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
<script src="/lib/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/lib/spin.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
<script src="lib/angular/angular.js"></script>
|
||||
<script src="lib/angular/angular-resource.js"></script>
|
||||
|
||||
|
|
@ -57,6 +61,7 @@
|
|||
<script src="js/services.js"></script>
|
||||
<script src="js/filters.js"></script>
|
||||
<script src="js/controllers.js"></script>
|
||||
<script src="js/viewmodel.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
Subproject commit cf536740d866276b65cfd351610001c2a841e751
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
//fgnass.github.com/spin.js#v1.3
|
||||
|
||||
/**
|
||||
* Copyright (c) 2011-2013 Felix Gnass
|
||||
* Licensed under the MIT license
|
||||
*/
|
||||
(function(root, factory) {
|
||||
|
||||
/* CommonJS */
|
||||
if (typeof exports == 'object') module.exports = factory()
|
||||
|
||||
/* AMD module */
|
||||
else if (typeof define == 'function' && define.amd) define(factory)
|
||||
|
||||
/* Browser global */
|
||||
else root.Spinner = factory()
|
||||
}
|
||||
(this, function() {
|
||||
"use strict";
|
||||
|
||||
var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
|
||||
, animations = {} /* Animation rules keyed by their name */
|
||||
, useCssAnimations /* Whether to use CSS animations or setTimeout */
|
||||
|
||||
/**
|
||||
* Utility function to create elements. If no tag name is given,
|
||||
* a DIV is created. Optionally properties can be passed.
|
||||
*/
|
||||
function createEl(tag, prop) {
|
||||
var el = document.createElement(tag || 'div')
|
||||
, n
|
||||
|
||||
for(n in prop) el[n] = prop[n]
|
||||
return el
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends children and returns the parent.
|
||||
*/
|
||||
function ins(parent /* child1, child2, ...*/) {
|
||||
for (var i=1, n=arguments.length; i<n; i++)
|
||||
parent.appendChild(arguments[i])
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
/**
|
||||
* Insert a new stylesheet to hold the @keyframe or VML rules.
|
||||
*/
|
||||
var sheet = (function() {
|
||||
var el = createEl('style', {type : 'text/css'})
|
||||
ins(document.getElementsByTagName('head')[0], el)
|
||||
return el.sheet || el.styleSheet
|
||||
}())
|
||||
|
||||
/**
|
||||
* Creates an opacity keyframe animation rule and returns its name.
|
||||
* Since most mobile Webkits have timing issues with animation-delay,
|
||||
* we create separate rules for each line/segment.
|
||||
*/
|
||||
function addAnimation(alpha, trail, i, lines) {
|
||||
var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-')
|
||||
, start = 0.01 + i/lines * 100
|
||||
, z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
|
||||
, prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
|
||||
, pre = prefix && '-' + prefix + '-' || ''
|
||||
|
||||
if (!animations[name]) {
|
||||
sheet.insertRule(
|
||||
'@' + pre + 'keyframes ' + name + '{' +
|
||||
'0%{opacity:' + z + '}' +
|
||||
start + '%{opacity:' + alpha + '}' +
|
||||
(start+0.01) + '%{opacity:1}' +
|
||||
(start+trail) % 100 + '%{opacity:' + alpha + '}' +
|
||||
'100%{opacity:' + z + '}' +
|
||||
'}', sheet.cssRules.length)
|
||||
|
||||
animations[name] = 1
|
||||
}
|
||||
|
||||
return name
|
||||
}
|
||||
|
||||
/**
|
||||
* Tries various vendor prefixes and returns the first supported property.
|
||||
*/
|
||||
function vendor(el, prop) {
|
||||
var s = el.style
|
||||
, pp
|
||||
, i
|
||||
|
||||
if(s[prop] !== undefined) return prop
|
||||
prop = prop.charAt(0).toUpperCase() + prop.slice(1)
|
||||
for(i=0; i<prefixes.length; i++) {
|
||||
pp = prefixes[i]+prop
|
||||
if(s[pp] !== undefined) return pp
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets multiple style properties at once.
|
||||
*/
|
||||
function css(el, prop) {
|
||||
for (var n in prop)
|
||||
el.style[vendor(el, n)||n] = prop[n]
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
/**
|
||||
* Fills in default values.
|
||||
*/
|
||||
function merge(obj) {
|
||||
for (var i=1; i < arguments.length; i++) {
|
||||
var def = arguments[i]
|
||||
for (var n in def)
|
||||
if (obj[n] === undefined) obj[n] = def[n]
|
||||
}
|
||||
return obj
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the absolute page-offset of the given element.
|
||||
*/
|
||||
function pos(el) {
|
||||
var o = { x:el.offsetLeft, y:el.offsetTop }
|
||||
while((el = el.offsetParent))
|
||||
o.x+=el.offsetLeft, o.y+=el.offsetTop
|
||||
|
||||
return o
|
||||
}
|
||||
|
||||
// Built-in defaults
|
||||
|
||||
var defaults = {
|
||||
lines: 12, // The number of lines to draw
|
||||
length: 7, // The length of each line
|
||||
width: 5, // The line thickness
|
||||
radius: 10, // The radius of the inner circle
|
||||
rotate: 0, // Rotation offset
|
||||
corners: 1, // Roundness (0..1)
|
||||
color: '#000', // #rgb or #rrggbb
|
||||
direction: 1, // 1: clockwise, -1: counterclockwise
|
||||
speed: 1, // Rounds per second
|
||||
trail: 100, // Afterglow percentage
|
||||
opacity: 1/4, // Opacity of the lines
|
||||
fps: 20, // Frames per second when using setTimeout()
|
||||
zIndex: 2e9, // Use a high z-index by default
|
||||
className: 'spinner', // CSS class to assign to the element
|
||||
top: 'auto', // center vertically
|
||||
left: 'auto', // center horizontally
|
||||
position: 'relative' // element position
|
||||
}
|
||||
|
||||
/** The constructor */
|
||||
function Spinner(o) {
|
||||
if (typeof this == 'undefined') return new Spinner(o)
|
||||
this.opts = merge(o || {}, Spinner.defaults, defaults)
|
||||
}
|
||||
|
||||
// Global defaults that override the built-ins:
|
||||
Spinner.defaults = {}
|
||||
|
||||
merge(Spinner.prototype, {
|
||||
|
||||
/**
|
||||
* Adds the spinner to the given target element. If this instance is already
|
||||
* spinning, it is automatically removed from its previous target b calling
|
||||
* stop() internally.
|
||||
*/
|
||||
spin: function(target) {
|
||||
this.stop()
|
||||
|
||||
var self = this
|
||||
, o = self.opts
|
||||
, el = self.el = css(createEl(0, {className: o.className}), {position: o.position, width: 0, zIndex: o.zIndex})
|
||||
, mid = o.radius+o.length+o.width
|
||||
, ep // element position
|
||||
, tp // target position
|
||||
|
||||
if (target) {
|
||||
target.insertBefore(el, target.firstChild||null)
|
||||
tp = pos(target)
|
||||
ep = pos(el)
|
||||
css(el, {
|
||||
left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + 'px',
|
||||
top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px'
|
||||
})
|
||||
}
|
||||
|
||||
el.setAttribute('role', 'progressbar')
|
||||
self.lines(el, self.opts)
|
||||
|
||||
if (!useCssAnimations) {
|
||||
// No CSS animation support, use setTimeout() instead
|
||||
var i = 0
|
||||
, start = (o.lines - 1) * (1 - o.direction) / 2
|
||||
, alpha
|
||||
, fps = o.fps
|
||||
, f = fps/o.speed
|
||||
, ostep = (1-o.opacity) / (f*o.trail / 100)
|
||||
, astep = f/o.lines
|
||||
|
||||
;(function anim() {
|
||||
i++;
|
||||
for (var j = 0; j < o.lines; j++) {
|
||||
alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity)
|
||||
|
||||
self.opacity(el, j * o.direction + start, alpha, o)
|
||||
}
|
||||
self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
|
||||
})()
|
||||
}
|
||||
return self
|
||||
},
|
||||
|
||||
/**
|
||||
* Stops and removes the Spinner.
|
||||
*/
|
||||
stop: function() {
|
||||
var el = this.el
|
||||
if (el) {
|
||||
clearTimeout(this.timeout)
|
||||
if (el.parentNode) el.parentNode.removeChild(el)
|
||||
this.el = undefined
|
||||
}
|
||||
return this
|
||||
},
|
||||
|
||||
/**
|
||||
* Internal method that draws the individual lines. Will be overwritten
|
||||
* in VML fallback mode below.
|
||||
*/
|
||||
lines: function(el, o) {
|
||||
var i = 0
|
||||
, start = (o.lines - 1) * (1 - o.direction) / 2
|
||||
, seg
|
||||
|
||||
function fill(color, shadow) {
|
||||
return css(createEl(), {
|
||||
position: 'absolute',
|
||||
width: (o.length+o.width) + 'px',
|
||||
height: o.width + 'px',
|
||||
background: color,
|
||||
boxShadow: shadow,
|
||||
transformOrigin: 'left',
|
||||
transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)',
|
||||
borderRadius: (o.corners * o.width>>1) + 'px'
|
||||
})
|
||||
}
|
||||
|
||||
for (; i < o.lines; i++) {
|
||||
seg = css(createEl(), {
|
||||
position: 'absolute',
|
||||
top: 1+~(o.width/2) + 'px',
|
||||
transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
|
||||
opacity: o.opacity,
|
||||
animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite'
|
||||
})
|
||||
|
||||
if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}))
|
||||
|
||||
ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')))
|
||||
}
|
||||
return el
|
||||
},
|
||||
|
||||
/**
|
||||
* Internal method that adjusts the opacity of a single line.
|
||||
* Will be overwritten in VML fallback mode below.
|
||||
*/
|
||||
opacity: function(el, i, val) {
|
||||
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
function initVML() {
|
||||
|
||||
/* Utility function to create a VML tag */
|
||||
function vml(tag, attr) {
|
||||
return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
|
||||
}
|
||||
|
||||
// No CSS transforms but VML support, add a CSS rule for VML elements:
|
||||
sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
|
||||
|
||||
Spinner.prototype.lines = function(el, o) {
|
||||
var r = o.length+o.width
|
||||
, s = 2*r
|
||||
|
||||
function grp() {
|
||||
return css(
|
||||
vml('group', {
|
||||
coordsize: s + ' ' + s,
|
||||
coordorigin: -r + ' ' + -r
|
||||
}),
|
||||
{ width: s, height: s }
|
||||
)
|
||||
}
|
||||
|
||||
var margin = -(o.width+o.length)*2 + 'px'
|
||||
, g = css(grp(), {position: 'absolute', top: margin, left: margin})
|
||||
, i
|
||||
|
||||
function seg(i, dx, filter) {
|
||||
ins(g,
|
||||
ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
|
||||
ins(css(vml('roundrect', {arcsize: o.corners}), {
|
||||
width: r,
|
||||
height: o.width,
|
||||
left: o.radius,
|
||||
top: -o.width>>1,
|
||||
filter: filter
|
||||
}),
|
||||
vml('fill', {color: o.color, opacity: o.opacity}),
|
||||
vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
if (o.shadow)
|
||||
for (i = 1; i <= o.lines; i++)
|
||||
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
|
||||
|
||||
for (i = 1; i <= o.lines; i++) seg(i)
|
||||
return ins(el, g)
|
||||
}
|
||||
|
||||
Spinner.prototype.opacity = function(el, i, val, o) {
|
||||
var c = el.firstChild
|
||||
o = o.shadow && o.lines || 0
|
||||
if (c && i+o < c.childNodes.length) {
|
||||
c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
|
||||
if (c) c.opacity = val
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
|
||||
|
||||
if (!vendor(probe, 'transform') && probe.adj) initVML()
|
||||
else useCssAnimations = vendor(probe, 'animation')
|
||||
|
||||
return Spinner
|
||||
|
||||
}));
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div id="build-modal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Build Image</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="editor"></div>
|
||||
<p>{{ messages }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="" class="btn btn-primary" ng-click="build()">Build</a>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var editor = ace.edit("editor");
|
||||
|
||||
editor.setValue('');
|
||||
editor.setTheme("ace/theme/clouds");
|
||||
editor.getSession().setMode("ace/mode/batchfile");
|
||||
</script>
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
<div id="response" class="alert alert-{{ alertClass }}">
|
||||
{{ response }}
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
|
||||
<h4>Container: {{ container.Id }}</h4>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,43 @@
|
|||
|
||||
<h2>Containers:</h2>
|
||||
|
||||
<div style="float:right;">
|
||||
<input type="checkbox" ng-model="displayAll" ng-click="toggleGetAll()"/> Display All
|
||||
<div>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Actions <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="pull-right">
|
||||
<input type="checkbox" ng-model="displayAll" ng-click="toggleGetAll()"/> Display All
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
|
||||
<th>Id</th>
|
||||
<th>Image</th>
|
||||
<th>Command</th>
|
||||
<th>Created</th>
|
||||
<th>Size</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="container in containers|orderBy:predicate">
|
||||
<td><input type="checkbox" ng-model="container.Checked" /></td>
|
||||
<td><a href="/#/containers/{{ container.Id }}/">{{ container.Id|truncate:10}}</a></td>
|
||||
<td><a href="/#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
|
||||
<td>{{ container.Command|truncate:40 }}</td>
|
||||
<td>{{ container.Created|getdate }}</td>
|
||||
<td>{{ container.SizeRw|humansize }}</td>
|
||||
<td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<div id="response" class="alert alert-{{ alertClass }}">
|
||||
{{ response }}
|
||||
</div>
|
||||
<div ng-include="template" ng-controller="StartContainerController"></div>
|
||||
|
||||
<div class="detail">
|
||||
|
||||
|
||||
<h4>Image: {{ image.id }}</h4>
|
||||
|
||||
<div class="btn-group detail">
|
||||
<button class="btn btn-success" ng-click="create()">Create</button>
|
||||
</div>
|
||||
|
||||
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -20,6 +23,11 @@
|
|||
<td>Container:</td>
|
||||
<td><a href="/#/containers/{{ image.container }}/">{{ image.container }}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Size:</td>
|
||||
<td>{{ image.Size|humansize }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Hostname:</td>
|
||||
<td>{{ image.container_config.Hostname }}</td>
|
||||
|
|
@ -40,10 +48,14 @@
|
|||
<td>Volumes from:</td>
|
||||
<td>{{ image.container_config.VolumesFrom }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Comment:</td>
|
||||
<td>{{ image.comment }}</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span1">
|
||||
History:
|
||||
|
|
@ -79,9 +91,6 @@
|
|||
|
||||
<hr />
|
||||
|
||||
<div ng-include="template" ng-controller="StartContainerController"></div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="btn-remove">
|
||||
<button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Image</button>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,21 @@
|
|||
|
||||
<div ng-include="template" ng-controller="BuilderController"></div>
|
||||
|
||||
<h2>Images:</h2>
|
||||
|
||||
<div id="response" class="alert alert-{{ alertClass }}">
|
||||
{{ response }}
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="" ng-click="showBuilder()">Build Image</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Actions <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
|
||||
<th>Id</th>
|
||||
<th>Tag</th>
|
||||
<th>Repository</th>
|
||||
|
|
@ -16,7 +24,8 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="image in images | orderBy:predicate">
|
||||
<td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:10}}</a></td>
|
||||
<td><input type="checkbox" ng-model="image.Checked" /></td>
|
||||
<td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:20}}</a></td>
|
||||
<td>{{ image.Tag }}</td>
|
||||
<td>{{ image.Repository }}</td>
|
||||
<td>{{ image.Created|getdate }}</td>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul class="nav">
|
||||
<li class="{{ hclass }}" ng-click="linkChange('home')"><a href="#">Dashboard</a></li>
|
||||
<li class="{{ cclass }}" ng-click="linkChange('containers')"><a href="/#/containers/">Containers</a></li>
|
||||
<li class="{{ iclass }}" ng-click="linkChange('images')"><a href="/#/images/">Images</a></li>
|
||||
<li class="{{ sclass }}" ng-click="linkChange('settings')"><a href="/#/settings/">Settings</a></li>
|
||||
<li><a href="#">Dashboard</a></li>
|
||||
<li><a href="/#/containers/">Containers</a></li>
|
||||
<li><a href="/#/images/">Images</a></li>
|
||||
<li><a href="/#/settings/">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<div id="message-display" class="center well messages" style="display:none;">
|
||||
<p ng-repeat="message in messages"><span class="{{ message.class }}">{{ message.data }}</span></p>
|
||||
</div>
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
<div class="detail">
|
||||
<div id="response" class="alert alert-{{ alertClass }}">
|
||||
{{ response }}
|
||||
</div>
|
||||
|
||||
<h3>Docker Information</h3>
|
||||
<div>
|
||||
<p class="lead">
|
||||
|
|
@ -50,20 +46,4 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Auth Information</legend>
|
||||
<label>Username:</label>
|
||||
<input type="text" ng-model="auth.username" required>
|
||||
<label>Email:</label>
|
||||
<input type="text" ng-model="auth.email" required>
|
||||
<label>Password:</label>
|
||||
<input type="password" ng-model="auth.password" required>
|
||||
<label>Confirm Password:</label>
|
||||
<input type="password" ng-model="auth.cpassword" required>
|
||||
<br />
|
||||
<input type="button" ng-click="updateAuthInfo()" value="Update"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
<div id="create-modal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Create Container</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Start container from Image</legend>
|
||||
|
||||
<div>
|
||||
{{ response }}
|
||||
<label>Cmd:</label>
|
||||
<input type="text" placeholder="{{ commandPlaceholder }}" ng-model="config.commands"/>
|
||||
<small>Input commands as an array</small>
|
||||
<label>Memory:</label>
|
||||
<input type="number" ng-model="config.memory"/>
|
||||
|
||||
<label>Memory Swap:</label>
|
||||
<input type="number" ng-model="config.memorySwap"/>
|
||||
|
||||
<label>Volumes From:</label>
|
||||
<input type="text" ng-model="config.volumesFrom"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="" class="btn btn-primary" ng-click="create()">Create</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Start container from Image</legend>
|
||||
|
||||
<label>Cmd:</label>
|
||||
<input type="text" placeholder="{{ commandPlaceholder }}" ng-model="config.commands"/>
|
||||
<small>Input commands as an array</small>
|
||||
<label>Memory:</label>
|
||||
<input type="number" ng-model="config.memory"/>
|
||||
|
||||
<label>Memory Swap:</label>
|
||||
<input type="number" ng-model="config.memorySwap"/>
|
||||
|
||||
<label>Volumes From:</label>
|
||||
<input type="text" ng-model="config.volumesFrom"/>
|
||||
|
||||
<br />
|
||||
<input type="button" ng-click="launchContainer()" value="Launch" />
|
||||
</fieldset>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="footer center well">
|
||||
<p><small>Docker API Version: <strong>{{ apiVersion }}</strong> UI Version: <strong>{{ uiVersion }}</strong> Created by: <a href="http://crosbymichael.com">crosbymichael</a></small></p>
|
||||
<p><small>Docker API Version: <strong>{{ apiVersion }}</strong> UI Version: <strong>{{ uiVersion }}</strong> <a style="float:right" href="http://crosbymichael.com">crosbymichael</a></small></p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue