mirror of https://github.com/portainer/portainer
feat(ui): new volume creation view (#36)
Anthony Lapenna
GitHub
parent
2d311518a7
commit
446322dcbe
|
|
@ -72,6 +72,11 @@ 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('docker', {
|
||||
url: '/docker/',
|
||||
templateUrl: 'app/components/docker/docker.html',
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
ViewSpinner.stop();
|
||||
$state.go('volumes', {}, {reload: true});
|
||||
} else {
|
||||
Messages.error('Failure', errorMsgFilter(d));
|
||||
ViewSpinner.stop();
|
||||
Messages.error('Unable to create volume', errorMsgFilter(d));
|
||||
}
|
||||
ViewSpinner.stop();
|
||||
$state.go('volumes', {}, {reload: true});
|
||||
}, 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);
|
||||
};
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
|
||||
<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" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue