github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #210 from cloud-inovasi/feat195-quick-network-creation-form 

feat(networks): add a quick network creation form
pull/211/head
Anthony Lapenna 2016-09-14 16:31:02 +12:00 committed by GitHub
parent 48e1fe769e 2eb1c9e857
commit c20069fce0
2 changed files with 159 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
app/components/networks/networks.html
View File

@ -7,93 +7,134 @@
<rd-header-content>Networks</rd-header-content> <rd-header-content>Networks</rd-header-content>
</rd-header> </rd-header>
<div class="col-lg-12"> <div class="row">
<rd-widget> <div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget-header icon="fa-sitemap" title="Networks"> <rd-widget>
<div class="pull-right"> <rd-widget-header icon="fa-plus" title="Add a network">
<i id="loadNetworksSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i> </rd-widget-header>
</div> <rd-widget-body>
</rd-widget-header> <form class="form-horizontal">
<rd-widget-taskbar classes="col-lg-12"> <!-- name-input -->
<div class="pull-left"> <div class="form-group">
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button> <label for="network_name" class="col-sm-1 control-label text-left">Name</label>
<a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a> <div class="col-sm-11">
</div> <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork">
<div class="pull-right"> </div>
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" /> </div>
</div> <!-- !name-input -->
</rd-widget-taskbar> <!-- tag-note -->
<rd-widget-body classes="no-padding"> <div class="form-group" ng-if="swarm">
<div class="table-responsive"> <div class="col-sm-12">
<table class="table table-hover"> <span class="small text-muted">Note: The network will be created using the overlay driver and will allow containers to communicate across the hosts of your cluster.</span>
<thead> </div>
<tr> </div>
<th></th> <div class="form-group" ng-if="!swarm">
<th> <div class="col-sm-12">
<a ui-sref="networks" ng-click="order('Name')"> <span class="small text-muted">Note: The network will be created using the bridge driver.</span>
Name </div>
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> </div>
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <!-- !tag-note -->
</a> <div class="form-group">
</th> <div class="col-sm-12">
<th> <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Name" ng-click="createNetwork()">Create</button>
<a ui-sref="networks" ng-click="order('Id')"> <button type="button" class="btn btn-default btn-sm" ui-sref="actions.create.network">Advanced settings...</button>
Id <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
<span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> </div>
<span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> </div>
</a> </form>
</th> </rd-widget-body>
<th> </rd-widget>
<a ui-sref="networks" ng-click="order('Scope')"> </div>
Scope </div>
<span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <div class="row">
</a> <div class="col-lg-12 col-md-12 col-xs-12">
</th> <rd-widget>
<th> <rd-widget-header icon="fa-sitemap" title="Networks">
<a ui-sref="networks" ng-click="order('Driver')"> <div class="pull-right">
Driver <i id="loadNetworksSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
<span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> </div>
<span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> </rd-widget-header>
</a> <rd-widget-taskbar classes="col-lg-12">
</th> <div class="pull-left">
<th> <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
<a ui-sref="networks" ng-click="order('IPAM.Driver')"> </div>
IPAM Driver <div class="pull-right">
<span ng-show="sortType == 'IPAM.Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
<span ng-show="sortType == 'IPAM.Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> </div>
</a> </rd-widget-taskbar>
</th> <rd-widget-body classes="no-padding">
<th> <div class="table-responsive">
<a ui-sref="networks" ng-click="order('IPAM.Config[0].Subnet')"> <table class="table table-hover">
IPAM Subnet <thead>
<span ng-show="sortType == 'IPAM.Config[0].Subnet' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> <tr>
<span ng-show="sortType == 'IPAM.Config[0].Subnet' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> <th></th>
</a> <th>
</th> <a ui-sref="networks" ng-click="order('Name')">
<th> Name
<a ui-sref="networks" ng-click="order('IPAM.Config[0].Gateway')"> <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
IPAM Gateway <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
<span ng-show="sortType == 'IPAM.Config[0].Gateway' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span> </a>
<span ng-show="sortType == 'IPAM.Config[0].Gateway' && sortReverse" class="glyphicon glyphicon-chevron-up"></span> </th>
</a> <th>
</th> <a ui-sref="networks" ng-click="order('Id')">
</tr> Id
</thead> <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<tbody> <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
<tr ng-repeat="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse))"> </a>
<td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td> </th>
<td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:40}}</a></td> <th>
<td>{{ network.Id }}</td> <a ui-sref="networks" ng-click="order('Scope')">
<td>{{ network.Scope }}</td> Scope
<td>{{ network.Driver }}</td> <span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<td>{{ network.IPAM.Driver }}</td> <span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
<td>{{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }}</td> </a>
<td>{{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }}</td> </th>
</tr> <th>
</tbody> <a ui-sref="networks" ng-click="order('Driver')">
</table> Driver
</div> <span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
</rd-widget-body> <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
<rd-widget> </a>
</th>
<th>
<a ui-sref="networks" ng-click="order('IPAM.Driver')">
IPAM Driver
<span ng-show="sortType == 'IPAM.Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'IPAM.Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a>
</th>
<th>
<a ui-sref="networks" ng-click="order('IPAM.Config[0].Subnet')">
IPAM Subnet
<span ng-show="sortType == 'IPAM.Config[0].Subnet' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'IPAM.Config[0].Subnet' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a>
</th>
<th>
<a ui-sref="networks" ng-click="order('IPAM.Config[0].Gateway')">
IPAM Gateway
<span ng-show="sortType == 'IPAM.Config[0].Gateway' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortType == 'IPAM.Config[0].Gateway' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse))">
<td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td>
<td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:40}}</a></td>
<td>{{ network.Id }}</td>
<td>{{ network.Scope }}</td>
<td>{{ network.Driver }}</td>
<td>{{ network.IPAM.Driver }}</td>
<td>{{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }}</td>
<td>{{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }}</td>
</tr>
</tbody>
</table>
</div>
</rd-widget-body>
<rd-widget>
</div>
</div> </div>

37
app/components/networks/networksController.js
View File

@ -7,16 +7,34 @@ function ($scope, $state, Network, Config, Messages) {
$scope.sortType = 'Name'; $scope.sortType = 'Name';
$scope.sortReverse = false; $scope.sortReverse = false;
$scope.formValues = {
Subnet: '',
Gateway: ''
};
$scope.config = { $scope.config = {
Name: '', Name: '',
IPAM: { };
Config: []
function prepareNetworkConfiguration() {
var config = angular.copy($scope.config);
if ($scope.swarm) {
config.Driver = 'overlay';
} }
return config;
}
$scope.createNetwork = function() {
$('#createNetworkSpinner').show();
var config = prepareNetworkConfiguration();
Network.create(config, function (d) {
if (d.message) {
$('#createNetworkSpinner').hide();
Messages.error('Unable to create network', {}, d.message);
} else {
Messages.send("Network created", d.Id);
$('#createNetworkSpinner').hide();
$state.go('networks', {}, {reload: true});
}
}, function (e) {
$('#createNetworkSpinner').hide();
Messages.error("Failure", e, 'Unable to create network');
});
}; };
$scope.order = function(sortType) { $scope.order = function(sortType) {
@ -72,5 +90,8 @@ function ($scope, $state, Network, Config, Messages) {
}); });
} }
fetchNetworks(); Config.$promise.then(function (c) {
$scope.swarm = c.swarm;
fetchNetworks();
});
}]); }]);