Merge branch 'release/1.2.0'

pull/43/head 1.2.0
Anthony Lapenna 2016-07-06 16:41:28 +12:00
commit 56ef453203
18 changed files with 382 additions and 308 deletions

View File

@ -14,7 +14,6 @@ angular.module('uifordocker', [
'docker',
'images',
'image',
'pullImage',
'containerLogs',
'stats',
'swarm',
@ -72,6 +71,16 @@ angular.module('uifordocker', [
templateUrl: 'app/components/createContainer/createcontainer.html',
controller: 'CreateContainerController'
})
.state('actions.create.volume', {
url: "/volume",
templateUrl: 'app/components/createVolume/createvolume.html',
controller: 'CreateVolumeController'
})
.state('actions.create.network', {
url: "/network",
templateUrl: 'app/components/createNetwork/createnetwork.html',
controller: 'CreateNetworkController'
})
.state('docker', {
url: '/docker/',
templateUrl: 'app/components/docker/docker.html',
@ -135,4 +144,4 @@ angular.module('uifordocker', [
.constant('DOCKER_ENDPOINT', 'dockerapi')
.constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred. If you have a port, prefix it with a ':' i.e. :4243
.constant('CONFIG_ENDPOINT', '/config')
.constant('UI_VERSION', 'v1.1.0');
.constant('UI_VERSION', 'v1.2.0');

View File

@ -8,7 +8,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
$scope.formValues = {
Console: 'none',
Volumes: [],
Volumes: []
};
$scope.config = {
@ -201,7 +201,6 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
$scope.create = function () {
var config = prepareConfiguration();
console.log(JSON.stringify(config, null, 4));
if ($scope.state.alwaysPull) {
pullImageAndCreateContainer(config);

View File

@ -1,45 +0,0 @@
<div id="create-network-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
<h3>Create network</h3>
</div>
<div class="modal-body">
<form novalidate role="form" name="createNetworkForm">
<div class="form-group">
<label>Name:</label>
<input type="text" placeholder='my_network'
ng-model="createNetworkConfig.Name" class="form-control"/>
</div>
<div class="form-group">
<label>Driver:</label>
<input type="text" placeholder='bridge'
ng-model="createNetworkConfig.Driver" class="form-control"/>
</div>
<div class="form-group">
<label>Subnet:</label>
<input type="text" placeholder='172.20.0.0/16'
ng-model="createNetworkConfig.IPAM.Config[0].Subnet" class="form-control"/>
</div>
<div class="form-group">
<label>IPRange:</label>
<input type="text" placeholder='172.20.10.0/24'
ng-model="createNetworkConfig.IPAM.Config[0].IPRange" class="form-control"/>
</div>
<div class="form-group">
<label>Gateway:</label>
<input type="text" placeholder='172.20.10.11'
ng-model="createNetworkConfig.IPAM.Config[0].Gateway" class="form-control"/>
</div>
</form>
</div>
<div class="alert alert-error" id="error-message" style="display:none">
{{ error }}
</div>
<div class="modal-footer">
<a href="" class="btn btn-primary" ng-click="createNetwork(createNetworkConfig)">Create</a>
</div>
</div>
</div>
</div>

View File

@ -1,41 +1,57 @@
angular.module('createNetwork', [])
.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
$scope.template = 'app/components/createNetwork/createNetwork.html';
$scope.init = function () {
$scope.createNetworkConfig = {
"Name": '',
"Driver": '',
"IPAM": {
"Config": [{}]
}
};
$scope.formValues = {
DriverOptions: []
};
$scope.init();
$scope.config = {
Driver: 'bridge',
CheckDuplicate: true,
Internal: false
};
$scope.createNetwork = function addNetwork(createNetworkConfig) {
if (_.isEmpty(createNetworkConfig.IPAM.Config[0])) {
delete createNetworkConfig.IPAM;
}
$('#error-message').hide();
$scope.addDriverOption = function() {
$scope.formValues.DriverOptions.push({ name: '', value: '' });
};
$scope.removeDriverOption = function(index) {
$scope.formValues.DriverOptions.splice(index, 1);
};
function createNetwork(config) {
ViewSpinner.spin();
$('#create-network-modal').modal('hide');
Network.create(createNetworkConfig, function (d) {
Network.create(config, function (d) {
if (d.Id) {
Messages.send("Network created", d.Id);
} else {
Messages.error('Failure', errorMsgFilter(d));
}
ViewSpinner.stop();
$scope.init();
$state.go('networks', {}, {reload: true});
} else {
ViewSpinner.stop();
Messages.error('Unable to create network', errorMsgFilter(d));
}
}, function (e) {
ViewSpinner.stop();
$scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
$('#create-network-modal').modal('show');
$('#error-message').show();
Messages.error('Unable to create network', e.data);
});
}
function prepareDriverOptions(config) {
var options = {};
$scope.formValues.DriverOptions.forEach(function (option) {
options[option.name] = option.value;
});
config.Options = options;
}
function prepareConfiguration() {
var config = angular.copy($scope.config);
prepareDriverOptions(config);
return config;
}
$scope.create = function () {
var config = prepareConfiguration();
createNetwork(config);
};
}]);

View File

@ -0,0 +1,80 @@
<rd-header>
<rd-header-title title="Create network"></rd-header-title>
<rd-header-content>
Networks > Add network
</rd-header-content>
</rd-header>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-body>
<form class="form-horizontal">
<!-- name-input -->
<div class="form-group">
<label for="network_name" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-11">
<input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork">
</div>
</div>
<!-- !name-input -->
<!-- driver-input -->
<div class="form-group">
<label for="network_driver" class="col-sm-1 control-label text-left">Driver</label>
<div class="col-sm-11">
<input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName">
</div>
</div>
<!-- !driver-input -->
<!-- driver-options -->
<div class="form-group">
<label for="network_driveropts" class="col-sm-1 control-label text-left">Driver options</label>
<div class="col-sm-11">
<span class="label label-default clickable" ng-click="addDriverOption()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> driver option
</span>
</div>
<!-- driver-options-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
<div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc">
</div>
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeDriverOption($index)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</span>
</div>
</div>
</div>
<!-- !driver-options-input-list -->
</div>
<!-- !driver-options -->
<!-- internal -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="config.Internal"> Restrict external access to the network
</label>
</div>
</div>
</div>
<!-- !internal -->
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
<button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
<a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
</div>
</div>

View File

@ -1,40 +0,0 @@
<div id="create-volume-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
<h3>Create volume</h3>
</div>
<div class="modal-body">
<form novalidate role="form" name="createVolumeForm">
<div class="form-group">
<label>Name:</label>
<input type="text" placeholder='my_volume'
ng-model="createVolumeConfig.Name" class="form-control"/>
</div>
<div class="form-group">
<label>Driver:</label>
<ui-select ng-model="selectedDriver.value" theme="bootstrap">
<ui-select-match>
<span ng-bind="$select.selected"></span>
</ui-select-match>
<ui-select-choices repeat="driver in availableDrivers">
<span ng-bind="driver"></span>
</ui-select-choices>
</ui-select>
</div>
<div class="form-group" ng-show="selectedDriver.value == 'local-persist'">
<label>Mount point:</label>
<input type="text" ng-model="createVolumeConfig.DriverOpts.mountpoint" name="" placeholder="/volume/my_volume" class="form-control">
</div>
</form>
</div>
<div class="alert alert-error" id="error-message" style="display:none">
{{ error }}
</div>
<div class="modal-footer">
<a href="" class="btn btn-primary" ng-click="addVolume(createVolumeConfig)">Create</a>
</div>
</div>
</div>
</div>

View File

@ -1,39 +1,56 @@
angular.module('createVolume', [])
.controller('CreateVolumeController', ['$scope', '$state', 'Messages', 'Volume', 'ViewSpinner', 'errorMsgFilter',
function ($scope, $state, Messages, Volume, ViewSpinner, errorMsgFilter) {
$scope.template = 'app/components/createVolume/createVolume.html';
.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'ViewSpinner', 'errorMsgFilter',
function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
$scope.init = function () {
$scope.createVolumeConfig = {
"Name": "",
"Driver": "",
"DriverOpts": {}
};
$scope.availableDrivers = ['local', 'local-persist'];
$scope.selectedDriver = { value: $scope.availableDrivers[0] };
$scope.formValues = {
DriverOptions: []
};
$scope.init();
$scope.config = {
Driver: 'local'
};
$scope.addVolume = function addVolume(createVolumeConfig) {
$('#error-message').hide();
$scope.addDriverOption = function() {
$scope.formValues.DriverOptions.push({ name: '', value: '' });
};
$scope.removeDriverOption = function(index) {
$scope.formValues.DriverOptions.splice(index, 1);
};
function createVolume(config) {
ViewSpinner.spin();
$('#create-volume-modal').modal('hide');
createVolumeConfig.Driver = $scope.selectedDriver.value;
console.log(JSON.stringify(createVolumeConfig, null, 4));
Volume.create(createVolumeConfig, function (d) {
Volume.create(config, function (d) {
if (d.Name) {
Messages.send("Volume created", d.Name);
} else {
Messages.error('Failure', errorMsgFilter(d));
}
ViewSpinner.stop();
$state.go('volumes', {}, {reload: true});
} else {
ViewSpinner.stop();
Messages.error('Unable to create volume', errorMsgFilter(d));
}
}, function (e) {
ViewSpinner.stop();
$scope.error = "Cannot create volume " + createVolumeConfig.Name + " Reason: " + e.data;
$('#create-volume-modal').modal('show');
$('#error-message').show();
Messages.error('Unable to create volume', e.data);
});
}
function prepareDriverOptions(config) {
var options = {};
$scope.formValues.DriverOptions.forEach(function (option) {
options[option.name] = option.value;
});
config.DriverOpts = options;
}
function prepareConfiguration() {
var config = angular.copy($scope.config);
prepareDriverOptions(config);
return config;
}
$scope.create = function () {
var config = prepareConfiguration();
createVolume(config);
};
}]);

View File

@ -0,0 +1,69 @@
<rd-header>
<rd-header-title title="Create volume"></rd-header-title>
<rd-header-content>
Volumes > Add volume
</rd-header-content>
</rd-header>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-body>
<form class="form-horizontal">
<!-- name-input -->
<div class="form-group">
<label for="volume_name" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-11">
<input type="text" class="form-control" ng-model="config.Name" id="volume_name" placeholder="e.g. myVolume">
</div>
</div>
<!-- !name-input -->
<!-- driver-input -->
<div class="form-group">
<label for="volume_driver" class="col-sm-1 control-label text-left">Driver</label>
<div class="col-sm-11">
<input type="text" class="form-control" ng-model="config.Driver" id="volume_driver" placeholder="e.g. driverName">
</div>
</div>
<!-- !driver-input -->
<!-- driver-options -->
<div class="form-group">
<label for="volume_driveropts" class="col-sm-1 control-label text-left">Driver options</label>
<div class="col-sm-11">
<span class="label label-default clickable" ng-click="addDriverOption()">
<i class="fa fa-plus-circle" aria-hidden="true"></i> driver option
</span>
</div>
<!-- driver-options-input-list -->
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
<div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint">
</div>
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="removeDriverOption($index)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</span>
</div>
</div>
</div>
<!-- !driver-options-input-list -->
</div>
<!-- !driver-options -->
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
<button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
<a type="button" class="btn btn-default btn-lg" ui-sref="volumes">Cancel</a>
</div>
</div>

View File

@ -1,5 +1,3 @@
<div ng-include="template" ng-controller="PullImageController"></div>
<rd-header>
<rd-header-title title="Image list">
<a data-toggle="tooltip" title="Refresh" ui-sref="images" ui-sref-opts="{reload: true}">
@ -10,16 +8,47 @@
<rd-header-content>Images</rd-header-content>
</rd-header>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-download" title="Pull image ">
</rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<!-- name-input -->
<div class="form-group">
<label for="image_name" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-11">
<input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty">
</div>
</div>
<!-- !name-input -->
<!-- tag-note -->
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
</div>
</div>
<!-- !tag-note -->
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
</div>
</div>
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-clone" title="Images">
</rd-widget-header>
<rd-widget-taskbar classes="col-lg-12">
<div class="pull-left">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#pull-modal">Pull new image...</button>
</div>
</div>
<div class="pull-right">
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
@ -74,4 +103,5 @@
</div>
</rd-widget-body>
<rd-widget>
</div>
</div>

View File

@ -1,12 +1,16 @@
angular.module('images', [])
.controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
function ($scope, Image, ViewSpinner, Messages) {
.controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages',
function ($scope, $state, Image, ViewSpinner, Messages) {
$scope.state = {};
$scope.sortType = 'Created';
$scope.sortReverse = true;
$scope.state.toggle = false;
$scope.state.selectedItemCount = 0;
$scope.config = {
Image: ''
};
$scope.order = function(sortType) {
$scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
$scope.sortType = sortType;
@ -31,6 +35,35 @@ function ($scope, Image, ViewSpinner, Messages) {
}
};
function createImageConfig(imageName) {
var imageNameAndTag = imageName.split(':');
var imageConfig = {
fromImage: imageNameAndTag[0],
tag: imageNameAndTag[1] ? imageNameAndTag[1] : 'latest'
};
return imageConfig;
}
$scope.pullImage = function() {
ViewSpinner.spin();
var image = _.toLower($scope.config.Image);
var imageConfig = createImageConfig(image);
Image.create(imageConfig, function (data) {
var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
if (err) {
var detail = data[data.length - 1];
ViewSpinner.stop();
Messages.error('Error', detail.error);
} else {
ViewSpinner.stop();
$state.go('images', {}, {reload: true});
}
}, function (e) {
ViewSpinner.stop();
Messages.error('Error', 'Unable to pull image ' + image);
});
};
$scope.removeAction = function () {
ViewSpinner.spin();
var counter = 0;

View File

@ -16,10 +16,8 @@
</rd-widget-header>
<rd-widget-taskbar classes="col-lg-12">
<div class="pull-left">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-network-modal">Create new network...</button>
</div>
<a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a>
</div>
<div class="pull-right">
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />

View File

@ -1,35 +0,0 @@
<div id="pull-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
<h3>Pull image</h3>
</div>
<div class="modal-body">
<form novalidate role="form" name="pullForm">
<div class="form-group">
<label>Registry:</label>
<input type="text" ng-model="config.registry" class="form-control"
placeholder="Leave empty to user DockerHub"/>
</div>
<div class="form-group">
<label>Image Name:</label>
<input type="text" ng-model="config.fromImage" class="form-control" placeholder="username/image"
required/>
</div>
<div class="form-group">
<label>Tag Name:</label>
<input type="text" ng-model="config.tag" class="form-control"
placeholder="Leave empty to download ALL tags."/>
</div>
</form>
</div>
<div class="alert alert-error" id="error-message" style="display:none">
{{ error }}
</div>
<div class="modal-footer">
<a href="" class="btn btn-primary" ng-click="pull()">Pull</a>
</div>
</div>
</div>
</div>

View File

@ -1,56 +0,0 @@
angular.module('pullImage', [])
.controller('PullImageController', ['$scope', '$state', 'Messages', 'Image', 'ViewSpinner',
function ($scope, $state, Messages, Image, ViewSpinner) {
$scope.template = 'app/components/pullImage/pullImage.html';
$scope.init = function () {
$scope.config = {
registry: '',
fromImage: '',
tag: 'latest'
};
};
$scope.init();
function failedRequestHandler(e, Messages) {
Messages.error('Error', errorMsgFilter(e));
}
$scope.pull = function () {
$('#error-message').hide();
var config = angular.copy($scope.config);
var imageName = (config.registry ? config.registry + '/' : '' ) +
(config.fromImage) +
(config.tag ? ':' + config.tag : '');
ViewSpinner.spin();
$('#pull-modal').modal('hide');
Image.create(config, function (data) {
ViewSpinner.stop();
if (data.constructor === Array) {
var f = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
//check for error
if (f) {
var d = data[data.length - 1];
$scope.error = "Cannot pull image " + imageName + " Reason: " + d.error;
$('#pull-modal').modal('show');
$('#error-message').show();
} else {
Messages.send("Image Added", imageName);
$scope.init();
$state.go('images', {}, {reload: true});
}
} else {
Messages.send("Image Added", imageName);
$scope.init();
$state.go('images', {}, {reload: true});
}
}, function (e) {
ViewSpinner.stop();
$scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
$('#pull-modal').modal('show');
$('#error-message').show();
});
};
}]);

View File

@ -15,10 +15,8 @@
</rd-widget-header>
<rd-widget-taskbar classes="col-lg-12">
<div class="pull-left">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-volume-modal">Create new volume...</button>
</div>
<a class="btn btn-default" type="button" ui-sref="actions.create.volume">Add volume</a>
</div>
<div class="pull-right">
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />

View File

@ -1,6 +1,6 @@
{
"name": "uifordocker",
"version": "1.1.0",
"version": "1.2.0",
"homepage": "https://github.com/kevana/ui-for-docker",
"authors": [
"Michael Crosby <crosbymichael@gmail.com>",

View File

@ -173,7 +173,7 @@ func csrfWrapper(h http.Handler) http.Handler {
}
func main() {
kingpin.Version("1.1.0")
kingpin.Version("1.2.0")
kingpin.Parse()
configuration := Config{

View File

@ -35,6 +35,7 @@ module.exports = function (grunt) {
'recess:min',
'copy'
]);
grunt.registerTask('lint', ['jshint']);
grunt.registerTask('test-watch', ['karma:watch']);
grunt.registerTask('run', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:run']);
grunt.registerTask('run-swarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);

View File

@ -2,7 +2,7 @@
"author": "Michael Crosby & Kevan Ahlquist",
"name": "uifordocker",
"homepage": "https://github.com/kevana/ui-for-docker",
"version": "1.1.0",
"version": "1.2.0",
"repository": {
"type": "git",
"url": "git@github.com:kevana/ui-for-docker.git"