--- /dev/null
+define([
+ 'app/gbp/epg/epg.service'
+], function () {
+ 'use strict';
+
+ angular.module('app.gbp').controller('AddEpgController', AddEpgController);
+
+ AddEpgController.$inject = ['$mdDialog', '$scope', 'EpgService', 'epg'];
+ /* @ngInject */
+ function AddEpgController($mdDialog, $scope, EpgService, epg) {
+ /* properties */
+ $scope.epg = epg ? epg : EpgService.createObject();
+
+ /* methods */
+ $scope.closeDialog = closeDialog;
+ $scope.save = save;
+
+ /* Implementations */
+
+ function closeDialog(){
+ $mdDialog.cancel();
+ $scope.getEpgList();
+ }
+
+ function save() {
+ $scope.epg.put($scope.rootTenant, function(data) {
+ $scope.closeDialog();
+ }, function(err) {
+ } );
+ }
+ }
+});
--- /dev/null
+<md-dialog ng-cloak class="gbpDialogWrapper">
+ <form name="epgForm">
+ <md-toolbar>
+ <div class="md-toolbar-tools">
+ <h2>EPG</h2>
+ <span flex></span>
+ <md-button ng-click="closeDialog()" class="md-button">Close dialog</md-button>
+ </div>
+ </md-toolbar>
+ <md-dialog-content style="width:350px;">
+ <div layout="column" class="layout-padding-lr15">
+ <div layout="row">
+ <md-input-container flex>
+ <label>Id</label>
+ <input name="id" ng-model="epg.data.id" ng-required="true">
+ <div ng-messages="epgForm.id.$error" md-auto-hide="false">
+ <div ng-message="required">Required field</div>
+ </div>
+ </md-input-container>
+ <md-input-container flex>
+ <label>Name</label>
+ <input name="name" ng-model="epg.data.name" ng-required="true" ng-pattern="/^[a-zA-Z]([a-zA-Z0-9\\-_.])*$/">
+ <div ng-messages="epgForm.name.$error" md-auto-hide="false">
+ <div ng-message="required">Required field</div>
+ <div ng-message="pattern">
+ Invalid pattern.
+ <md-tooltip md-direction="right" style="padding-left: 10px;">Value must matches: ^[a-zA-Z]([a-zA-Z0-9\\-_.])*$</md-tooltip>
+ </div>
+ </div>
+ </md-input-container>
+ </div>
+ <div layout="row">
+ <md-input-container flex>
+ <label>Description</label>
+ <input name="description" ng-model="epg.data.description">
+ </md-input-container>
+ </div>
+ <div layout="row">
+ <md-input-container flex>
+ <label>intra-group-policy</label>
+ <md-select name="intraGroupPolicy" ng-model="epg.data['intra-group-policy']">
+ <md-option ng-repeat="igp in ['', 'allow', 'require-contract']" ng-value="igp">{{igp}}</md-option>
+ </md-select>
+ </md-input-container>
+ </div>
+ <div layout="row">
+ <md-input-container flex>
+ <label>network-domain</label>
+ <input name="networkDomain" ng-model="epg.data['network-domain']">
+ </md-input-container>
+ <md-input-container flex>
+ <label>parent</label>
+ <input name="parent" ng-model="epg.data.parent">
+ </md-input-container>
+ </div>
+ </div>
+ </md-dialog-content>
+ <md-dialog-actions layout="row">
+ <span flex></span>
+ <md-button ng-click="closeDialog()" class="md-primary">
+ Close
+ </md-button>
+ <md-button ng-click="save()" style="margin-right:20px;" ng-disabled="epgForm.$invalid" class="md-primary">
+ Save
+ </md-button>
+ </md-dialog-actions>
+ </form>
+</md-dialog>
angular.module('app.gbp').controller('EpgController', EpgController);
- EpgController.$inject = ['$scope', 'EpgService', 'EpgListService'];
+ EpgController.$inject = ['$scope', '$stateParams', '$mdDialog', 'EpgService', 'EpgListService'];
- function EpgController($scope, EpgService, EpgListService) {
- $scope.epg = EpgService.createObject();
- $scope.epg.get('epg_test', 'tenant_test');
- console.log('Epg', $scope.epg);
+ function EpgController($scope, $stateParams, $mdDialog, EpgService, EpgListService) {
+ $scope.epgsTableQuery = {};
+
+ // $scope.epg = EpgService.createObject();
+ // $scope.epg.get($stateParams.epgId, $stateParams.tenantId);
$scope.epgs = EpgListService.createList();
- $scope.epgs.get('config', 'tenant2');
- console.log('Epgs', $scope.epgs);
+ /* methods */
+ $scope.getEpgList = getEpgList;
+ $scope.openEpgDialog = openEpgDialog;
+ $scope.deleteEpgDialog = deleteEpgDialog;
+
+ init();
+
+ /* Implementations */
+
+ /**
+ * fills $scope.epgs array with data from data store
+ */
+ function getEpgList() {
+ if($stateParams.tenantId) {
+ $scope.epgs = EpgListService.createList();
+ $scope.epgs.get('config', $stateParams.tenantId);
+ }
+ else {
+ $scope.epgs = EpgListService.createList();
+ $scope.epgs.get('config', $scope.rootTenant);
+ }
+ }
+
+ /**
+ * Initializing function
+ */
+ function init() {
+ $scope.epgsTableQuery = {
+ order: 'data.id',
+ limit: 25,
+ page: 1,
+ options: [25, 50, 100],
+ filter: ''
+ };
+
+ getEpgList();
+ }
+
+ function openEpgDialog(epgData) {
+ $mdDialog.show({
+ clickOutsideToClose: true,
+ controller: 'AddEpgController',
+ preserveScope: true,
+ templateUrl: 'src/app/gbp/epg/dialog-add-epg.tpl.html',
+ parent: angular.element(document.body),
+ scope: $scope,
+ locals: {
+ epg: epgData
+ }
+ });
+ }
+
+ function deleteEpgDialog(epgData) {
+ var confirm = $mdDialog.confirm()
+ .title('Delete EPG')
+ .textContent('Do you want to delete EPG ' + epgData.data.name + '?')
+ .ok('Delete')
+ .cancel('Cancel');
+
+ $mdDialog.show(confirm).then(function() {
+ epgData.deleteEpg($scope.rootTenant,
+ function() {
+ $scope.getEpgList();
+ }
+ );
+ }, function() {
+
+ });
+ }
}
});
\ No newline at end of file
/* methods */
this.setData = setData;
this.get = get;
+ this.put = put;
+ this.deleteEpg = deleteEpg;
/* Implementation */
/**
this.data.id = data.id;
this.data.name = data.name;
this.data.description = data.description;
- this.data.intraGroupPolicy = data['intra-group-policy'];
+ this.data['intra-group-policy'] = data['intra-group-policy'];
- this.data.consumerNamedSelector = data['consumer-named-selector'];
- this.data.providerNamedSelector = data['provider-named-selector'];
- this.data.consumerTargetSelector = data['consumer-target-selector'];
- this.data.providerTargerSelector = data['provider-target-selector'];
+ this.data['consumer-named-selector'] = data['consumer-named-selector'];
+ this.data['provider-named-selector'] = data['provider-named-selector'];
+ this.data['consumer-target-selector'] = data['consumer-target-selector'];
+ this.data['provider-target-selector'] = data['provider-target-selector'];
- this.data.networkDomain = data['network-domain'];
+ this.data['network-domain'] = data['network-domain'];
this.data.parent = data.parent;
this.data.requirement = data.requirement;
self.setData(data['endpoint-group'][0]);
});
}
+
+ function put(idTenant, successCallback) {
+ var self = this;
+
+ var restObj = Restangular.one('restconf').one('config').one('policy:tenants').one('tenant')
+ .one(idTenant).one('policy').one('endpoint-group').one(self.data.id),
+ dataObj = {'endpoint-group': [self.data]};
+
+ return restObj.customPUT(dataObj).then(function(data) {
+ successCallback(data);
+ }, function(res) {
+
+ });
+ }
+
+ function deleteEpg(idTenant, successCallback) {
+ var self = this;
+
+ var restObj = Restangular.one('restconf').one('config').one('policy:tenants').one('tenant')
+ .one(idTenant).one('policy').one('endpoint-group').one(self.data.id);
+
+ return restObj.remove().then(function(data) {
+ successCallback(data);
+ }, function(res) {
+
+ });
+ }
}
/**
-EPG<br/>
-id: {{epg.data.id}}<br/>
-name: {{epg.data.name}}<br/>
-description: {{epg.data.description}}<br/>
-intra-group-policy: {{epg.data.intraGroupPolicy}}<br/>
+<section flex layout="column">
+ <div flex layout="row">
+ <md-button ng-click="openEpgDialog()" class="md-primary">Add</md-button>
+ <md-button ng-click="getEpgList()" class="md-primary">Reload</md-button>
+ </div>
+ <md-table-container ng-if="epgs.data.length">
+ <table md-table>
+ <thead md-head md-order="epgsTableQuery.order">
+ <tr md-row>
+ <th md-column md-order-by="data.id"><span>Id</span></th>
+ <th md-column md-order-by="data.name"><span>Name</span></th>
+ <th md-column md-order-by="data.description"><span>Description</span></th>
+ <th md-column md-order-by="data['intra-group-policy']"><span>intra-group-policy</span></th>
+ <th md-column md-order-by="data['network-domain']"><span>network-domain</span></th>
+ <th md-column md-order-by="data.parent"><span>Parent</span></th>
+ </tr>
+ </thead>
+ <tbody md-body>
+ <tr md-row ng-repeat="epg in epgs.data | filter: epgsTableQuery.filter | orderBy : epgsTableQuery.order | limitTo: epgsTableQuery.limit : (epgsTableQuery.page -1) * epgsTableQuery.limit">
+ <td md-cell>{{epg.data.id}}</td>
+ <td md-cell>{{epg.data.name}}</td>
+ <td md-cell>{{epg.data.description}}</td>
+ <td md-cell>{{epg.data['intra-group-policy']}}</td>
+ <td md-cell>{{epg.data['network-domain']}}</td>
+ <td md-cell>{{epg.data.parent}}</td>
+ <td md-cell>
+ <md-button class="md-icon-button" ng-click="openEpgDialog(epg)">
+ <md-icon>edit</md-icon>
+ </md-button>
+ <md-button class="md-icon-button" ng-click="deleteEpgDialog(epg)">
+ <md-icon>delete</md-icon>
+ </md-button>
+ </td>
+ </tr>
-<div ng-repeat="epgElement in epgs.data">
- {{epgElement.data.id}}, {{epgElement.data.name}}, {{epgElement.data.description}}, {{epgElement.data.intraGroupPolicy}}, {{epgElement.data.networkDomain}}<br/>
-</div>
+ </tbody>
+ </table>
+ <md-table-pagination md-limit="epgsTableQuery.limit"
+ md-page="epgsTableQuery.page"
+ md-options="epgsTableQuery.options"
+ md-total="{{epgs.data.length}}"
+ md-page-select="options.pageSelect">
+ </md-table-pagination>
+ </md-table-container>
+</section>
\ No newline at end of file