x/compass-web
Code Issues Proposed changes

Fixed Inline Editing for Security Step

Browse Source 
Change-Id: Ia44094d8321e61710fbbbdee2253a0073079677a
This commit is contained in:
Shuai Zhu 2014-07-24 10:58:11 -07:00
parent 6416a2c98d
commit 12b140323a
6 changed files with 200 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
v2/assets/css/style.css
View File

@ -313,3 +313,6 @@ div.center-align {
.margin-right-5 {
margin-right: 10px;
}
.rounded-button {
border-radius: 4px !important;
}

7
v2/index.html
View File

@ -16,9 +16,10 @@
<script type="text/javascript" src="vendor/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular-mocks.js"></script>
<script type="text/javascript" src="vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular-mocks.js"></script>
<!--<script type="text/javascript" src="../vendor/angular/angular-resource.min.js"></script>-->
<script type="text/javascript" src="vendor/angular-ui-router/angular-ui-router.min.js"></script>
<script type="text/javascript" src="vendor/angular-bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>

54
v2/src/app/appDev.js
View File

@ -104,9 +104,9 @@ compassAppDev.run(function($httpBackend, settings, $http) {
var servers = [{
"machine_id": 10,
"mac": "28.e5.ee.47.14.92",
"switch_ip": "172.29.8.1",
"vlan": "1",
"port": "1",
"switch_ip": "172.29.8.400",
"vlan": 1,
"port": 1,
"name": "sv-1",
"clusters": [{
"id": 1,
@ -123,9 +123,9 @@ compassAppDev.run(function($httpBackend, settings, $http) {
}, {
"machine_id": 11,
"mac": "28.e5.ee.47.a2.93",
"switch_ip": "172.29.8.11",
"vlan": "2",
"port": "2",
"switch_ip": "172.1.20.100",
"vlan": 2,
"port": 2,
"name": "sv-2",
"clusters": [],
"os": "CentOS",
@ -136,9 +136,9 @@ compassAppDev.run(function($httpBackend, settings, $http) {
}, {
"machine_id": 12,
"mac": "28.e5.ee.47.ee.32",
"switch_ip": "172.29.8.10",
"vlan": "2",
"port": "3",
"switch_ip": "172.9.20.8",
"vlan": 2,
"port": 3,
"name": "sv-3",
"clusters": [{
"id": 1,
@ -152,9 +152,9 @@ compassAppDev.run(function($httpBackend, settings, $http) {
}, {
"machine_id": 13,
"mac": "28.e5.ee.47.33.66",
"switch_ip": "172.29.8.2",
"vlan": "2",
"port": "4",
"switch_ip": "172.29.8.40",
"vlan": 2,
"port": 4,
"name": "sv-4",
"clusters": [{
"id": 1,
@ -168,9 +168,9 @@ compassAppDev.run(function($httpBackend, settings, $http) {
}, {
"machine_id": 14,
"mac": "28.e5.ee.47.2c.22",
"switch_ip": "172.29.8.3",
"vlan": "2",
"port": "5",
"switch_ip": "172.29.8.40",
"vlan": 2,
"port": 5,
"name": "sv-5",
"clusters": [{
"id": 1,
@ -184,9 +184,9 @@ compassAppDev.run(function($httpBackend, settings, $http) {
}, {
"machine_id": 15,
"mac": "28.e5.ee.47.55.19",
"switch_ip": "172.4.8.40",
"vlan": "2",
"port": "6",
"switch_ip": "172.29.8.40",
"vlan": 2,
"port": 6,
"name": "sv-6",
"clusters": [{
"id": 1,
@ -200,9 +200,9 @@ compassAppDev.run(function($httpBackend, settings, $http) {
}, {
"machine_id": 16,
"mac": "28.e5.ee.47.41.b2",
"switch_ip": "172.29.8.20",
"vlan": "2",
"port": "7",
"switch_ip": "172.29.7.41",
"vlan": 2,
"port": 7,
"name": "sv-7",
"clusters": [{
"id": 1,
@ -217,8 +217,8 @@ compassAppDev.run(function($httpBackend, settings, $http) {
"machine_id": 17,
"mac": "28.e5.ee.47.25.33",
"switch_ip": "172.29.8.41",
"vlan": "8",
"port": "8",
"vlan": 8,
"port": 8,
"name": "sv-8",
"clusters": [{
"id": 1,
@ -233,8 +233,8 @@ compassAppDev.run(function($httpBackend, settings, $http) {
"machine_id": 18,
"mac": "28.e5.ee.47.5a.60",
"switch_ip": "172.29.8.41",
"vlan": "9",
"port": "9",
"vlan": 9,
"port": 9,
"name": "sv-9",
"clusters": [],
"os": "CentOS",
@ -246,8 +246,8 @@ compassAppDev.run(function($httpBackend, settings, $http) {
"machine_id": 19,
"mac": "28.e5.ee.47.c1.82",
"switch_ip": "172.29.8.41",
"vlan": "10",
"port": "10",
"vlan": 10,
"port": 10,
"name": "sv-10",
"clusters": [],
"os": "CentOS",

1
v2/src/app/cluster/cluster-list.tpl.html
View File

@ -1,5 +1,4 @@
<div class="page-header cluster-inline">
<div class="row header-margins">
<div class="col-xs-4">
<h1 class="blue-header">

134
v2/src/app/wizard/security.tpl.html
View File

@ -34,9 +34,10 @@
</div>
</accordion-group>
<accordion-group is-open="status2.open">
<accordion-group is-open="serverAccordion.open">
<accordion-heading>
<i class="ace-icon fa fa-angle-right" ng-class="{'fa-angle-down': status2.open, 'fa-angle-right': !status2.open}"></i> OpenStack Database & Queue Credentials
<i class="ace-icon fa fa-angle-right" ng-class="{'fa-angle-down': status2.open, 'fa-angle-right': !status2.open}"></i> OpenStack Database &amp; Queue Credentials
</accordion-heading>
<div class="row">
<div class="col-lg-1">
@ -52,49 +53,54 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="(service, credential) in service_credentials" inlineEdit>
<td>
<span>{{service}}</span>
</td>
<td>
<span ng-hide="editServiceMode">{{credential.username}}</span>
<input ng-show="editServiceMode" ng-model="credential.username" placeholder="Username" type="text" ng-required />
</td>
<td>
<span ng-hide="editServiceMode">{{credential.password}}</span>
<input ng-show="editServiceMode" ng-model="credential.password" placeholder="Password" type="password" ng-required />
<input ng-show="editServiceMode" placeholder="Confirm Password" type="password" ng-required />
</td>
<td>
<!--edit button-->
<button ng-hide="editServiceMode" ng-click="editServiceMode = true; edit()" class="btn btn-xs btn-success">
<i class="ace-icon fa fa-pencil bigger-120"></i>
</button>
<!--save button-->
<button ng-show="editServiceMode" ng-click="editServiceMode = false; save()" class="btn btn-xs btn-primary">
<i class="ace-icon fa fa-check bigger-120"></i>
</button>
<!--cancel button-->
<button ng-show="editServiceMode" ng-click="editServiceMode = false; cancel()" class="btn btn-xs btn-default">
<i class="ace-icon fa fa-times bigger-120"></i>
</button>
</td>
</tr>
<form name="serviceCredForm">
<a href="#">
<tr ng-repeat="(service, credential) in service_credentials">
<td>
<span>{{service}}</span>
</td>
<td>
<span ng-hide="editServiceMode[$index]">{{credential.username}}</span>
<input ng-show="editServiceMode[$index]" ng-model="credential.username" placeholder="Username" type="text" ng-required />
</td>
<td>
<span ng-hide="editServiceMode[$index]">{{credential.password}}</span>
<input ng-show="editServiceMode[$index]" ng-model="credential.password" placeholder="Password" type="password" ng-required />
<input ng-show="editServiceMode[$index]" placeholder="Confirm Password" type="password" ng-required />
</td>
<td>
<!--edit button-->
<button ng-hide="editServiceMode[$index]" ng-click="editServiceMode[$index] = true; sEdit($index)" class="btn btn-xs btn-success rounded-button">
<i class="ace-icon fa fa-pencil bigger-120"></i>
</button>
<!--save button -->
<button ng-show="editServiceMode[$index]" ng-click="editServiceMode[$index] = false; sSave()" class="btn btn-xs btn-primary rounded-button">
<i class="ace-icon fa fa-check bigger-120"></i>
</button>
<!--cancel button -->
<button ng-show="editServiceMode[$index]" ng-click="editServiceMode[$index] = false; sReset()" class="btn btn-xs btn-danger rounded-button">
<i class="ace-icon fa fa-times bigger-120"></i>
</button>
</td>
</tr>
</a>
</form>
</tbody>
</table>
</div>
<div class="col-lg-1">
</div>
</div>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-group is-open="mgmtAccordion.open">
<accordion-heading>
<i class="ace-icon fa fa-angle-right" ng-class="{'fa-angle-down': status.open, 'fa-angle-right': !status.open}"></i> OpenStack Keystone User Credentials
</accordion-heading>
<div class="row">
<div class="col-lg-1">
</div>
</div>
<div class="col-lg-10">
<table class="table table-hover nowrap">
<thead>
@ -106,45 +112,49 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="(service, credential) in management_credentials" inlineEdit>
<td>
<span ng-hide="editMgntMode">{{service}}</span>
<input ng-show="editMgntMode" ng-model="service" placeholder="Service" type="text" ng-required />
</td>
<td>
<span ng-hide="editMgntMode">{{credential.username}}</span>
<input ng-show="editMgntMode" ng-model="credential.username" placeholder="Username" type="text" ng-required />
</td>
<td>
<span ng-hide="editMgntMode">{{credential.password}}</span>
<input ng-show="editMgntMode" ng-model="credential.password" placeholder="Password" type="password" ng-required />
<input ng-show="editMgntMode" placeholder="Confirm Password" type="password" ng-required />
</td>
<td>
<!--edit button-->
<button ng-hide="editMgntMode" ng-click="editMgntMode = true; edit()" class="btn btn-xs btn-success">
<i class="ace-icon fa fa-pencil bigger-120"></i>
</button>
<!--save button-->
<button ng-show="editMgntMode" ng-click="editMgntMode = false; save()" class="btn btn-xs btn-primary">
<i class="ace-icon fa fa-check bigger-120"></i>
</button>
<!--cancel button-->
<button ng-show="editMgntMode" ng-click="editMgntMode = false; cancel()" class="btn btn-xs btn-default">
<i class="ace-icon fa fa-times bigger-120"></i>
</button>
</td>
</tr>
<form name="managementCredForm">
<tr ng-repeat="(service, credential) in management_credentials">
<td>
<span ng-hide="editMgntMode[$index]">{{service}}</span>
<input ng-show="editMgntMode[$index]" ng-model="service" placeholder="Service" type="text" ng-required />
</td>
<td>
<span ng-hide="editMgntMode[$index]">{{credential.username}}</span>
<input ng-show="editMgntMode[$index]" ng-model="credential.username" placeholder="Username" type="text" ng-required />
</td>
<td>
<span ng-hide="editMgntMode[$index]">{{credential.password}}</span>
<input ng-show="editMgntMode[$index]" ng-model="credential.password" placeholder="Password" type="password" ng-required />
<input ng-show="editMgntMode[$index]" placeholder="Confirm Password" type="password" ng-required />
</td>
<td>
<!--edit button-->
<button ng-hide="editMgntMode[$index]" ng-click="mEdit($index)" class="btn btn-xs btn-success rounded-button">
<i class="ace-icon fa fa-pencil bigger-120"></i>
</button>
<!--save button-->
<button ng-show="editMgntMode[$index]" ng-click="editMgntMode[$index] = false; mSave()" class="btn btn-xs btn-primary rounded-button">
<i class="ace-icon fa fa-check bigger-120"></i>
</button>
<!--cancel button-->
<button ng-show="editMgntMode[$index]" ng-click="editMgntMode[$index] = false; mReset()" class="btn btn-xs btn-default btn-danger rounded-button">
<i class="ace-icon fa fa-times bigger-120"></i>
</button>
</td>
</tr>
</form>
</tbody>
</table>
</div>
<div class="col-lg-1">
</div>
</div>
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
</div>

96
v2/src/app/wizard/wizard.js
View File

@ -3,7 +3,7 @@ angular.module('compass.wizard', [
'ui.bootstrap',
'ngTable',
'compass.charts',
'ngDragDrop'
'ngDragDrop',
])
.config(function config($stateProvider) {
@ -691,12 +691,31 @@ angular.module('compass.wizard', [
};
})
.controller('securityCtrl', function($scope, wizardFactory, dataService) {
.controller('securityCtrl', function($scope, $window, wizardFactory, dataService) {
var cluster = wizardFactory.getClusterInfo();
$scope.server_credentials = wizardFactory.getServerCredentials();
$scope.service_credentials = wizardFactory.getServiceCredentials();
$scope.management_credentials = wizardFactory.getManagementCredentials();
$scope.mSave = function() {
$scope.originalMangementData = angular.copy($scope.management_credentials);
}
$scope.sSave = function() {
$scope.originalServiceData = angular.copy($scope.service_credentials);
}
$scope.mSave();
$scope.sSave();
var keyLength_service_credentials = Object.keys($scope.service_credentials).length;
$scope.editServiceMode = [];
$scope.editServiceMode.length = keyLength_service_credentials;
var keyLength_management_credentials = Object.keys($scope.management_credentials).length;
$scope.editMgntMode = [];
$scope.editMgntMode.length = keyLength_management_credentials;
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
@ -707,6 +726,77 @@ angular.module('compass.wizard', [
}
});
$scope.mgmtAccordion = {};
$scope.$watch('mgmtAccordion', function(val) {
if ($scope.mgmtAccordion.open == true) {
$scope.mSave();
} else if ($scope.mgmtAccordion.open == false) {
$scope.mReset();
$scope.mcloseAll();
}
}, true)
$scope.mcloseAll = function() {
for (var i = 0; i < $scope.editMgntMode.length; i++) {
if ($scope.editMgntMode[i] == true) {
$scope.editMgntMode[i] = false;
} else {}
}
}
$scope.mEdit = function(index) {
for (var i = 0; i < $scope.editMgntMode.length; i++) {
if (i != index) {
$scope.editMgntMode[i] = false;
} else {
$scope.editMgntMode[i] = true;
}
}
$scope.mReset();
}
$scope.mReset = function() {
$scope.management_credentials = angular.copy($scope.originalMangementData);
}
// Service Credentials
$scope.serverAccordion = {};
$scope.$watch('serverAccordion', function(val) {
console.info($scope.serverAccordion);
if ($scope.serverAccordion.open == true) {
$scope.sSave();
} else if ($scope.serverAccordion.open == false) {
$scope.sReset();
$scope.scloseAll();
}
}, true)
$scope.scloseAll = function() {
for (var i = 0; i < $scope.editServiceMode.length; i++) {
if ($scope.editServiceMode[i] == true) {
$scope.editServiceMode[i] = false;
} else {}
}
}
$scope.sEdit = function(index) {
for (var i = 0; i < $scope.editServiceMode.length; i++) {
if (i != index) {
$scope.editServiceMode[i] = false;
} else {
$scope.editServiceMode[i] = true;
}
}
$scope.sReset();
}
$scope.sReset = function() {
$scope.service_credentials = angular.copy($scope.originalServiceData);
}
$scope.commit = function() {
var securityData = {
"os_config": {
@ -1086,5 +1176,7 @@ angular.module('compass.wizard', [
}).error(function(data) {
console.warn("Review hosts error: ", data);
})
//TODO: error handling
};
})