x/compass-web
Code Issues Proposed changes

Add network. Update api for network and subnet.

Browse Source 
Change-Id: Ic2a77e3147b63dd06df0358d4646e8786e9f353e
This commit is contained in:
jiahuay 2014-06-30 21:31:10 -07:00
parent e100a863f1
commit 1ff5fb0d57
12 changed files with 1047 additions and 735 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
v2/assets/css/ace.min.css vendored
View File

@ -6972,7 +6972,7 @@ input.ace[type="checkbox"] + .lbl:before, input.ace[type="radio"] + .lbl:before
border-radius: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
color: #32A3CE;
content: " ";
content: "\00A0";
cursor: pointer;
display: inline-block;
font-family: fontAwesome;

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

@ -8,6 +8,7 @@ html {
.nav-list > li.open .submenu {
display: block;
}
/*
.cssSlideUp {
transition: 1s linear all;
height: 300px;
@ -22,7 +23,7 @@ html {
}
.cssFade.ng-hide {
opacity: 0;
}
}*/
.nowrap {
white-space: nowrap;
}

1
v2/index.html
View File

@ -25,6 +25,7 @@
<script type="text/javascript" src="src/app/app.js"></script>
<script type="text/javascript" src="src/app/appDev.js"></script>
<script type="text/javascript" src="src/app/services.js"></script>
<script type="text/javascript" src="src/app/topnav/topnav.js"></script>
<script type="text/javascript" src="src/app/wizard/wizard.js"></script>
<script type="text/javascript" src="src/app/cluster/cluster.js"></script>

190
v2/src/app/app.js
View File

@ -1,4 +1,5 @@
var app = angular.module('compass', [
'compass.services',
'compass.topnav',
'compass.wizard',
'compass.cluster',
@ -19,192 +20,3 @@ app.config(function($stateProvider, $urlRouterProvider) {
app.stateProvider = $stateProvider;
$urlRouterProvider.otherwise('/clusterlist');
});
// stateService is used for dynamically add/edit state
app.service('stateService', ['$state',
function($state) {
this.addStates = function(pendingStates) {
var existingStates = $state.get(); // get all the current existing states
var alreadyExist = false; // flag - if the pending state is already in the states
angular.forEach(pendingStates, function(pst) {
angular.forEach(existingStates, function(est) {
if (pst.name == est.name) {
alreadyExist = true;
}
});
if (!alreadyExist) {
app.stateProvider.state(pst.name, {
url: pst.url,
//controller: pst.controller,
templateUrl: 'src/app/cluster/cluster-' + pst.url.substring(1) + '.tpl.html'
});
}
alreadyExist = false;
});
}
}
]);
app.service('dataService', ['$http', 'settings',
function($http, settings) {
this.getWizardSteps = function() {
return $http.get(settings.metadataUrlBase + '/wizard_steps.json');
};
this.getAdapterConfig = function() {
return $http.get(settings.metadataUrlBase + '/adapter_config');
};
this.getServers = function() {
return $http.get(settings.apiUrlBase + '/servers');
};
this.getServerColumns = function() {
return $http.get(settings.metadataUrlBase + '/machine_host_columns.json');
}
this.getMonitoringNav = function() {
return $http.get(settings.metadataUrlBase + '/monitoring_nav.json');
};
this.getAdapters = function() {
return $http.get(settings.apiUrlBase + '/adapters');
};
this.createCluster = function(cluster) {
return $http.post(settings.apiUrlBase + '/clusters', angular.toJson(cluster));
};
this.getClusters = function() {
return $http.get(settings.apiUrlBase + '/clusters');
};
this.updateClusterConfig = function(id, config) {
return $http.put(settings.apiUrlBase + '/clusters/' + id + '/config', angular.toJson(config));
};
this.getClusterSubnetConfig = function(id) {
return $http.get(settings.apiUrlBase + '/clusters/' + id + '/subnet-config');
};
this.postClusterSubnetConfig = function(id, subnet_config) {
return $http.post(settings.apiUrlBase + '/clusters/' + id + '/subnet-config', angular.toJson(subnet_config));
};
this.postRoutingTable = function(id, routing_table) {
return $http.post(settings.apiUrlBase + '/clusters/' + id + '/routing-table', angular.toJson(routing_table));
};
this.getTimezones = function() {
return $http.get(settings.metadataUrlBase + '/timezone.json');
};
}
]);
app.factory('wizardFactory', [
function() {
var wizard = {};
wizard.reset = function() {
wizard.cluster = {};
wizard.steps = [];
wizard.commit = {};
wizard.servers = [];
wizard.allServers = [];
wizard.adapter = {}; //
wizard.generalConfig = {};
wizard.subnetworks = [];
wizard.routingtable = [];
wizard.generalConfig = {};
wizard.interfaces = [];
};
wizard.reset();
wizard.setClusterInfo = function(cluster) {
wizard.cluster = cluster;
};
wizard.getClusterInfo = function() {
return wizard.cluster;
};
wizard.setSteps = function(steps) {
wizard.steps = steps;
};
wizard.getSteps = function() {
return wizard.steps;
};
wizard.setCommitState = function(commitState) {
wizard.commit = commitState;
//console.info("wizard.setCommit ", wizard.commit);
};
wizard.getCommitState = function() {
//console.info("wizard.getCommit ", wizard.commit);
return wizard.commit;
};
wizard.setAllMachinesHost = function(server) {
wizard.allServers = server;
};
wizard.getAllMachinesHost = function() {
return wizard.allServers;
};
wizard.setServers = function(servers) {
wizard.servers = servers;
};
wizard.getServers = function() {
return wizard.servers;
};
wizard.setAdapter = function(adapter) { ////
wizard.adapter = adapter;
};
wizard.getAdapter = function() { /////
return wizard.adapter;
};
wizard.setGeneralConfig = function(config) {
wizard.generalConfig = config;
};
wizard.getGeneralConfig = function() {
return wizard.generalConfig;
};
wizard.setSubnetworks = function(subnetworks) {
wizard.subnetworks = subnetworks;
};
wizard.getSubnetworks = function() {
return wizard.subnetworks;
};
wizard.setRoutingTable = function(routingTb) {
wizard.routingtable = routingTb;
};
wizard.getRoutingTable = function() {
return wizard.routingtable;
};
wizard.setInterfaces = function(interfaces) {
wizard.interfaces = interfaces;
};
wizard.getInterfaces = function() {
return wizard.interfaces;
};
return wizard;
}
]);

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

@ -58,10 +58,10 @@ compassAppDev.run(function($httpBackend, settings, $http) {
return [200, adapters, {}];
});
$httpBackend.whenGET(settings.apiUrlBase + '/servers').respond(function(method, url, data) {
$httpBackend.whenGET(settings.apiUrlBase + '/machines-hosts').respond(function(method, url, data) {
console.log(method, url);
var servers = [{
"id": 1,
"machine_id": 10,
"mac": "28.e5.ee.47.14.92",
"switch_ip": "172.29.8.40",
"vlan": "1",
@ -86,7 +86,7 @@ compassAppDev.run(function($httpBackend, settings, $http) {
"network": {},
"state": "Installing"
}, {
"id": 2,
"machine_id": 11,
"mac": "28.e5.ee.47.a2.93",
"switch_ip": "172.29.8.40",
"vlan": "2",
@ -171,6 +171,7 @@ compassAppDev.run(function($httpBackend, settings, $http) {
console.log(method, url, data);
var config = JSON.parse(data);
console.log(config);
return [200, config, {}];
});
@ -194,11 +195,16 @@ compassAppDev.run(function($httpBackend, settings, $http) {
console.log(method, url, data);
var subnetConfig = JSON.parse(data);
var i = 1;
angular.forEach(subnetConfig, function(subnet) {
subnet.subnet_id = i;
i++;
});
subnetConfig.subnet_id = Math.floor((Math.random() * 100) + 1);
console.log(subnetConfig);
return [200, subnetConfig, {}];
});
$httpBackend.whenPUT(/\.*\/clusters\/[1-9][0-9]*\/subnet-config\/[1-9][0-9]*/).respond(function(method, url, data) {
console.log(method, url, data);
var subnetConfig = JSON.parse(data);
console.log(subnetConfig);
return [200, subnetConfig, {}];
@ -208,14 +214,39 @@ compassAppDev.run(function($httpBackend, settings, $http) {
console.log(method, url, data);
var routingTable = JSON.parse(data);
var i = 1;
angular.forEach(routingTable, function(rt) {
rt.id = i;
i++;
});
routingTable.id = Math.floor((Math.random() * 100) + 1);
console.log(routingTable);
return [200, routingTable, {}];
})
});
$httpBackend.whenPUT(/\.*\/clusters\/[1-9][0-9]*\/routing-table\/[1-9][0-9]*/).respond(function(method, url, data) {
console.log(method, url, data);
var routingTable = JSON.parse(data);
console.log(routingTable);
return [200, routingTable, {}];
});
$httpBackend.whenPOST(/\.*\/clusters\/[1-9][0-9]*\/action/).respond(function(method, url, data) {
console.log(method, url, data);
var actionResponse = {
"hosts": [{
"id": Math.floor((Math.random() * 100) + 1),
"machine_id": 10
}, {
"id": Math.floor((Math.random() * 100) + 1),
"machine_id": 11
}]
}
return [200, actionResponse, {}];
});
$httpBackend.whenPOST(/\.*\/hosts\/[1-9][0-9]*\/network/).respond(function(method, url, data) {
console.log(method, url, data);
var network = JSON.parse(data);
network.id = Math.floor((Math.random() * 100) + 1);
return [200, network, {}];
});
});

207
v2/src/app/services.js Normal file
View File

@ -0,0 +1,207 @@
angular.module('compass.services', [])
// stateService is used for dynamically add/edit state
.service('stateService', ['$state',
function($state) {
this.addStates = function(pendingStates) {
var existingStates = $state.get(); // get all the current existing states
var alreadyExist = false; // flag - if the pending state is already in the states
angular.forEach(pendingStates, function(pst) {
angular.forEach(existingStates, function(est) {
if (pst.name == est.name) {
alreadyExist = true;
}
});
if (!alreadyExist) {
app.stateProvider.state(pst.name, {
url: pst.url,
//controller: pst.controller,
templateUrl: 'src/app/cluster/cluster-' + pst.url.substring(1) + '.tpl.html'
});
}
alreadyExist = false;
});
}
}
])
// dataService is used for http calls
.service('dataService', ['$http', 'settings',
function($http, settings) {
this.getWizardSteps = function() {
return $http.get(settings.metadataUrlBase + '/wizard_steps.json');
};
this.getAdapterConfig = function() {
return $http.get(settings.metadataUrlBase + '/adapter_config');
};
this.getAllMachineHosts = function() {
return $http.get(settings.apiUrlBase + '/machines-hosts');
};
this.getServerColumns = function() {
return $http.get(settings.metadataUrlBase + '/machine_host_columns.json');
}
this.getMonitoringNav = function() {
return $http.get(settings.metadataUrlBase + '/monitoring_nav.json');
};
this.getAdapters = function() {
return $http.get(settings.apiUrlBase + '/adapters');
};
this.createCluster = function(cluster) {
return $http.post(settings.apiUrlBase + '/clusters', angular.toJson(cluster));
};
this.getClusters = function() {
return $http.get(settings.apiUrlBase + '/clusters');
};
this.updateClusterConfig = function(id, config) {
return $http.put(settings.apiUrlBase + '/clusters/' + id + '/config', angular.toJson(config));
};
this.getClusterSubnetConfig = function(id) {
return $http.get(settings.apiUrlBase + '/clusters/' + id + '/subnet-config');
};
this.postClusterSubnetConfig = function(id, subnet_config) {
return $http.post(settings.apiUrlBase + '/clusters/' + id + '/subnet-config', angular.toJson(subnet_config));
};
this.putClusterSubnetConfig = function(id, subnetId, subnet_config) {
return $http.put(settings.apiUrlBase + '/clusters/' + id + '/subnet-config/' + subnetId, angular.toJson(subnet_config));
};
this.postRoutingTable = function(id, routing_table) {
return $http.post(settings.apiUrlBase + '/clusters/' + id + '/routing-table', angular.toJson(routing_table));
};
this.putRoutingTable = function(id, routingId, routing_table) {
return $http.put(settings.apiUrlBase + '/clusters/' + id + '/routing-table/' + routingId, angular.toJson(routing_table));
};
this.getTimezones = function() {
return $http.get(settings.metadataUrlBase + '/timezone.json');
};
this.postClusterActions = function(id, actions) {
return $http.post(settings.apiUrlBase + '/clusters/' + id + '/action', angular.toJson(actions));
};
this.postHostNetwork = function(id, network) {
return $http.post(settings.apiUrlBase + '/hosts/' + id + '/network', angular.toJson(network));
};
}
])
.factory('wizardFactory', [
function() {
var wizard = {};
wizard.reset = function() {
wizard.cluster = {"id":1};
wizard.steps = [];
wizard.commit = {};
wizard.servers = [];
wizard.allServers = [];
wizard.adapter = {}; //
wizard.generalConfig = {};
wizard.subnetworks = [];
wizard.routingtable = [];
wizard.generalConfig = {};
wizard.interfaces = {};
};
wizard.reset();
wizard.setClusterInfo = function(cluster) {
wizard.cluster = cluster;
};
wizard.getClusterInfo = function() {
return wizard.cluster;
};
wizard.setSteps = function(steps) {
wizard.steps = steps;
};
wizard.getSteps = function() {
return wizard.steps;
};
wizard.setCommitState = function(commitState) {
wizard.commit = commitState;
//console.info("wizard.setCommit ", wizard.commit);
};
wizard.getCommitState = function() {
//console.info("wizard.getCommit ", wizard.commit);
return wizard.commit;
};
wizard.setAllMachinesHost = function(server) {
wizard.allServers = server;
};
wizard.getAllMachinesHost = function() {
return wizard.allServers;
};
wizard.setServers = function(servers) {
wizard.servers = servers;
};
wizard.getServers = function() {
return wizard.servers;
};
wizard.setAdapter = function(adapter) { ////
wizard.adapter = adapter;
};
wizard.getAdapter = function() { /////
return wizard.adapter;
};
wizard.setGeneralConfig = function(config) {
wizard.generalConfig = config;
};
wizard.getGeneralConfig = function() {
return wizard.generalConfig;
};
wizard.setSubnetworks = function(subnetworks) {
wizard.subnetworks = subnetworks;
};
wizard.getSubnetworks = function() {
return wizard.subnetworks;
};
wizard.setRoutingTable = function(routingTb) {
wizard.routingtable = routingTb;
};
wizard.getRoutingTable = function() {
return wizard.routingtable;
};
wizard.setInterfaces = function(interfaces) {
wizard.interfaces = interfaces;
};
wizard.getInterfaces = function() {
return wizard.interfaces;
};
return wizard;
}
]);

5
v2/src/app/wizard/global.tpl.html
View File

@ -3,7 +3,7 @@
<div class="col-xs-12">
<div class="accordion-style1 panel-group accordion-style2" id="accordion">
<accordion close-others="true">
<accordion-group is-open="status1.open">
<accordion-group ng-init="status1.open=true" is-open="status1.open">
<accordion-heading>
<i class="ace-icon fa fa-angle-right" ng-class="{'fa-angle-down': status1.open, 'fa-angle-right': !status1.open}"></i> General
</accordion-heading>
@ -19,6 +19,7 @@
</div>
</div>
</div>-->
<!--TODO: use json to generate inputs-->
<div class="form-group">
<div>
<label class="col-sm-4 control-label no-padding-right">HTTP Proxy</label>
@ -160,7 +161,7 @@
</tbody>
</table>
</div>
<div class="col-sm-2">
<div class="col-lg-2">
</div>
</div>

120
v2/src/app/wizard/network.tpl.html
View File

@ -1,30 +1,11 @@
<div ng-controller="networkCtrl">
<div class="row">
<div class="pull-left">
<form name="addInterfaceForm">
<div class="input-group">
<input ng-model="newInterface" type="text" placeholder="Interface" class="form-control" required>
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-info" ng-disabled="addInterfaceForm.$invalid" ng-click="addInterface(newInterface)">
Add
</button>
</span>
</div>
</form>
</div>
<div class="pull-left">
<!--Search Input-->
<span class="input-icon">
<input type="text" placeholder="Search" ng-model="search.$">
<i class="ace-icon fa fa-search blue"></i>
</span>
</div>
<div class="pull-left">
<button ng-click="autofill()" type="button" class="btn btn-sm btn-primary">
Autofill
</button>
</div>
<div class="pull-right">
<!-- Column Show / Hide button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-white btn-default dropdown-toggle">
@ -43,31 +24,103 @@
</ul>
</div>
</div>
<div class="pull-right">
<button class="btn btn-sm btn-info" ng-init="addInterface.isCollapsed = true;" ng-click="addInterface.isCollapsed = !addInterface.isCollapsed">Add Interface&nbsp;&nbsp;<i class="ace-icon fa fa-plus" ng-class="{'fa-minus': !addInterface.isCollapsed}"></i>
</button>
<button class="btn btn-sm btn-info" ng-init="autoFill.isCollapsed = true;" ng-click="autoFill.isCollapsed = !autoFill.isCollapsed">
Autofill&nbsp;&nbsp;<i class="ace-icon fa fa-plus" ng-class="{'fa-minus': !autoFill.isCollapsed}"></i>
</button>
</div>
</div>
<div class="row">
<div collapse="addInterface.isCollapsed">
<div class="well well-lg">
<div class="row">
<div class="col-xs-12">
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Interface</th>
<th>Subnet</th>
<th>Is Mgmt Network</th>
<th>Action</th>
</tr>
</thead>
<tbody ng-init="network={};">
<tr>
<td>
<input type="text" ng-model="newInterface.name" placeholder="Interface" required />
</td>
<td>
<select ng-model="newInterface.subnet_id" class="max-width-200">
<option ng-repeat="sub in subnetworks" value="{{sub.subnet_id}}">
{{sub.name}}
</option>
</select>
</td>
<td>-</td>
<td>
<button type="button" class="btn btn-sm btn-info" ng-click="addInterface(newInterface)">
Add
</button>
</td>
</tr>
<tr ng-repeat="(name, value) in interfaces">
<td>
{{name}}
</td>
<td>
<span ng-repeat="sub in subnetworks">
<span ng-if="sub.subnet_id == value.subnet_id">{{sub.name}}</span>
</span>
</td>
<td>
<input ng-model="value.is_mgmt" type="checkbox" name="is-mgmt" />
</td>
<td>
<!--Remove Action-->
<button class="btn btn-xs btn-danger" ng-click="deleteInterface(name)"><i class="fa fa-trash-o bigger-120"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div collapse="autoFill.isCollapsed">
<div class="well well-lg">
<div class="row">
<div class="col-xs-12">
Autofill Panel
</div>
</div>
</div>
</div>
</div>
<div class="row">
<table ng-table="tableParams" class="table table-hover table-striped">
<thead>
<thead>
<tr>
<th></th>
<th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{
'sort-asc': tableParams.isSortBy(column.field, 'asc'),
'sort-desc': tableParams.isSortBy(column.field, 'desc')
}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
{{column.title}}
</th>
<th ng-repeat="interface in interfaces" ng-mouseover="deleteView=true" ng-mouseleave="deleteView=false">
{{interface}}
<span ng-class="{'opacity-zero': !deleteView}" ng-click="deleteInterface(interface)" class="action"><i class="ace-icon fa fa-times-circle bigger-120 red"></i> </span>
<th ng-repeat="(name, value) in interfaces" ng-mouseover="deleteView=true" ng-mouseleave="deleteView=false">
{{name}}
<span ng-class="{'opacity-zero': !deleteView}" ng-click="deleteInterface(name)" class="action"><i class="ace-icon fa fa-times-circle bigger-120 red"></i>
</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="server in $data | filter: search" ng-init="serverIndex = $index">
<td>
<input ng-model="server.checked" type="checkbox">
</td>
<td ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field">
<span ng-if="column.field=='hostname'">
<input ng-model="server[column.field]" placeholder="Hostname" class="form-control margin-bottom-10 max-width-200" type="text">
@ -75,9 +128,14 @@
<span ng-if="column.field!='hostname'">
{{server[column.field]}}
</span>
{{server.network}}
</td>
<td ng-repeat="(name, value) in interfaces" ng-init="server.network[name] = server.network[name] === undefinded? {} : server.network[name]">
<input ng-model="server.network[name].ip" placeholder="IP Address" class="form-control margin-bottom-10 max-width-200" type="text">
</td>
<!-- Set IP, subnet and mgmt by each server. Keep this part for future use-->
<!--
<td ng-repeat="interface in interfaces" ng-init="server.network[interface]={};">
<input ng-model="server.network[interface].ip" placeholder="IP Address" class="form-control margin-bottom-10 max-width-200" type="text">
<select ng-model="server.network[interface].subnet_id" class="form-control margin-bottom-10 max-width-200">
@ -86,10 +144,10 @@
</option>
</select>
<span>
<input ng-model="server.network[interface].is_mgmt" name="mgmt-{{serverIndex}}" type="checkbox"> Is Mgmt Network
</span>
</td>
-->
</tr>
</tbody>
</table>

78
v2/src/app/wizard/partition.tpl.html
View File

@ -1,40 +1,42 @@
<div class="row">
<div class="col-lg-8">
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Mount Point</th>
<th>Size Percentage (%)</th>
<th>Max Size (G)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-if="partition.length > 0" ng-repeat="pa in partition track by $index">
<td>
<input ng-model="pa.mount_point" type="text" placeholder="Mount Point" class="input-medium">
</td>
<td>
<input ng-model="pa.size_percentage" type="text" placeholder="Size Percentage" class="input-medium">
</td>
<td>
<input ng-model="pa.max_size" type="text" placeholder="Max Size" class="input-medium">
</td>
<td>
<!--Add Action-->
<span class="action" ng-click="addPartition()">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<!--Remove Action-->
<span ng-show="partition.length > 1" class="action" ng-click="partition.splice($index,1)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4">
<!--TODO: Partition pie chart-->
<div ng-controller="partitionCtrl">
<div class="row">
<div class="col-lg-8">
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Mount Point</th>
<th>Size Percentage (%)</th>
<th>Max Size (G)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-if="partition.length > 0" ng-repeat="pa in partition track by $index">
<td>
<input ng-model="pa.mount_point" type="text" placeholder="Mount Point" class="input-medium">
</td>
<td>
<input ng-model="pa.size_percentage" type="text" placeholder="Size Percentage" class="input-medium">
</td>
<td>
<input ng-model="pa.max_size" type="text" placeholder="Max Size" class="input-medium">
</td>
<td>
<!--Add Action-->
<span class="action" ng-click="addPartition()">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<!--Remove Action-->
<span ng-show="partition.length > 1" class="action" ng-click="partition.splice($index,1)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4">
<!--TODO: Partition pie chart-->
</div>
</div>
</div>

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

@ -1,145 +1,147 @@
<div class="row">
<div class="col-xs-12">
<div class="accordion-style1 panel-group accordion-style2" id="accordion">
<accordion close-others="true">
<div ng-controller="securityCtrl">
<div class="row">
<div class="col-xs-12">
<div class="accordion-style1 panel-group accordion-style2" id="accordion">
<accordion close-others="true">
<accordion-group is-open="status1.open">
<accordion-heading>
<i class="ace-icon fa fa-angle-right" ng-class="{'fa-angle-down': status1.open, 'fa-angle-right': !status1.open}"></i> Server Credentials
</accordion-heading>
<div class="row">
<div class="col-xs-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label no-padding-right">Username</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Username" id="server-username">
<accordion-group is-open="status1.open">
<accordion-heading>
<i class="ace-icon fa fa-angle-right" ng-class="{'fa-angle-down': status1.open, 'fa-angle-right': !status1.open}"></i> Server Credentials
</accordion-heading>
<div class="row">
<div class="col-xs-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label no-padding-right">Username</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Username" id="server-username">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label no-padding-right">Password</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Password" id="server-password">
<div class="form-group">
<label class="col-sm-4 control-label no-padding-right">Password</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Password" id="server-password">
</div>
</div>
</div>
<div class="form-group">
<label for="{{key}}" class="col-sm-4 control-label no-padding-right">Confirm Password</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Confirm Password" id="{{key}}">
<div class="form-group">
<label for="{{key}}" class="col-sm-4 control-label no-padding-right">Confirm Password</label>
<div class="col-sm-8">
<input type="text" class="col-xs-10 col-sm-5" placeholder="Confirm Password" id="{{key}}">
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</accordion-group>
</accordion-group>
<accordion-group is-open="status2.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 Services Credentials
</accordion-heading>
<div class="row">
<div class="col-lg-2">
<accordion-group is-open="status2.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 Services Credentials
</accordion-heading>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(service, credential) in service_credentials" inlineEdit>
<td>
<span ng-hide="editServiceMode">{{service}}</span>
<input ng-show="editServiceMode" ng-model="service" placeholder="Service" type="text" ng-required />
</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>
</tbody>
</table>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="col-lg-8">
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(service, credential) in service_credentials" inlineEdit>
<td>
<span ng-hide="editServiceMode">{{service}}</span>
<input ng-show="editServiceMode" ng-model="service" placeholder="Service" type="text" ng-required />
</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>
</tbody>
</table>
</div>
<div class="col-lg-2">
</div>
</div>
</accordion-group>
</accordion-group>
<accordion-group is-open="status.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 Management Console Credentials
</accordion-heading>
<div class="row">
<div class="col-xs-12">
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</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>
</tbody>
</table>
<accordion-group is-open="status.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 Management Console Credentials
</accordion-heading>
<div class="row">
<div class="col-xs-12">
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</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>
</tbody>
</table>
</div>
</div>
</div>
</accordion-group>
</accordion-group>
</accordion>
</accordion>
</div>
</div>
</div>
</div>

85
v2/src/app/wizard/server_selection.tpl.html
View File

@ -1,20 +1,11 @@
<div ng-controller="svSelectCtrl">
<div class="row">
<div class="pull-left">
<!--Search Input-->
<span class="input-icon">
<input type="text" placeholder="Search" ng-model="search">
<input type="text" placeholder="Search" ng-model="search.$">
<i class="ace-icon fa fa-search blue"></i>
</span>
</div>
<div class="pull-right">
<div class="checkbox">
<label>
<input ng-model="hideunselected" ng-change="hideUnselected()" type="checkbox" class="ace">
<span class="lbl">&nbsp;Hide Unselected Servers</span>
</label>
</div>
</div>
<div class="pull-right">
<!-- Column Show / Hide button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-white btn-default dropdown-toggle">
@ -33,45 +24,55 @@
</ul>
</div>
</div>
<div class="pull-right">
<div class="checkbox">
<label>
<input ng-model="hideunselected" ng-change="hideUnselected()" type="checkbox" class="ace">
<span class="lbl">&nbsp;Hide Unselected Servers</span>
</label>
</div>
</div>
</div>
<div class="row">
<table ng-table="tableParams" class="table table-hover table-striped">
<thead>
<tr>
<th>
<input type="checkbox" ng-model="selectall" ng-change="selectAllServers(selectall)">
</th>
<th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{
<div class="table-responsive">
<table ng-table="tableParams" class="table table-hover">
<thead>
<tr>
<th>
<input type="checkbox" ng-model="selectall" ng-change="selectAllServers(selectall)">
</th>
<th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{
'sort-asc': tableParams.isSortBy(column.field, 'asc'),
'sort-desc': tableParams.isSortBy(column.field, 'desc')
}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
{{column.title}}
</th>
</tr>
</thead>
{{column.title}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="server in $data | filter:search">
<td>
<input ng-model="server.selected" type="checkbox">
</td>
<td ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field">
<span ng-if="column.field=='os_installed'">
<span ng-if="server['os']">
<input type="checkbox" ng-model="server.reinstallos">
<span class="lbl">&nbsp;Reinstall OS</span>
<tbody>
<tr ng-repeat="server in $data | filter:search">
<td>
<input ng-model="server.selected" type="checkbox">
</td>
<td ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field">
<span ng-if="column.field=='os_installed'">
<span ng-if="server['os']">
<input type="checkbox" ng-model="server.reinstallos">
<span class="lbl"></span>
</span>
<span ng-if="!server['os']">
-
</span>
</span>
<span ng-if="!server['os']">
-
<span ng-if="column.field!='os_installed'">
{{server[column.field]}}
</span>
</span>
<span ng-if="column.field!='os_installed'">
{{server[column.field]}}
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

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

@ -83,27 +83,6 @@ angular.module('compass.wizard', [
/*
if ($scope.steps[$scope.currentStep - 1].title == "Partition") {
var partitionData = {};
angular.forEach($scope.partition, function(pa) {
console.log(pa);
if (partitionData[pa.mount_point] !== undefined) {
if (!partitionData[pa.mount_point].push) {
partitionData[pa.mount_point] = [partitionData[pa.mount_point]];
}
partitionData[pa.mount_point].push({
"size_percentage": pa.size_percentage,
"max_size": pa.max_size
} || {});
} else {
partitionData[pa.mount_point] = {
"size_percentage": pa.size_percentage,
"max_size": pa.max_size
} || {};
}
});
dataService.updateClusterConfig(1, partitionData).success(function(data) {
$scope.next();
})
}
*/
};
@ -127,11 +106,454 @@ angular.module('compass.wizard', [
});
dataService.getServers().success(function(data) {
dataService.getAllMachineHosts().success(function(data) {
wizardFactory.setAllMachinesHost(data);
});
})
.controller('svSelectCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams) {
$scope.hideunselected = '';
$scope.search = {};
$scope.allservers = wizardFactory.getAllMachinesHost();
$scope.selectAllServers = function(flag) {
if (flag) {
angular.forEach($scope.allservers, function(sv) {
sv.selected = true;
})
} else {
angular.forEach($scope.allservers, function(sv) {
sv.selected = false;
})
}
};
dataService.getServerColumns().success(function(data) {
$scope.server_columns = data.showall;
});
$scope.hideUnselected = function() {
if ($scope.hideunselected) {
$scope.search.selected = true;
} else {
delete $scope.search.selected;
}
};
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: $scope.allservers.length // count per page
}, {
counts: [], // hide count-per-page box
total: $scope.allservers.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')($scope.allservers, params.orderBy()) : $scope.allservers;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
if (newCommitState !== undefined) {
if (newCommitState.name == "sv_selection" && newCommitState.state == "triggered") {
$scope.commit();
}
}
});
$scope.commit = function() {
var selectedServers = [];
var noSelection = true;
angular.forEach($scope.allservers, function(sv) {
if (sv.selected) {
noSelection = false;
selectedServers.push(sv);
}
})
if (noSelection) {
alert("Please select at least one server");
wizardFactory.setCommitState({});
} else {
wizardFactory.setServers(selectedServers);
wizardFactory.setAllMachinesHost($scope.allservers);
var commitState = {
"name": "sv_selection",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
}
};
})
.controller('globalCtrl', function($scope, wizardFactory, dataService) {
var cluster = wizardFactory.getClusterInfo();
//For General Section
$scope.general = wizardFactory.getGeneralConfig();
//TODO: bug - should not set dns_servers and search_path to empty
$scope.general["dns_servers"] = [""];
$scope.general["search_path"] = [""];
$scope.addDNSServer = function() {
$scope.general['dns_servers'].push("");
};
$scope.addSearchPath = function() {
$scope.general['search_path'].push("");
};
dataService.getTimezones().success(function(data) {
$scope.timezones = data;
});
//For Subnetworks Section
$scope.subnetworks = wizardFactory.getSubnetworks();
$scope.addSubnetwork = function() {
$scope.subnetworks.push({});
console.log($scope.subnetworks);
};
$scope.removeSubnetwork = function(index) {
$scope.subnetworks.splice(index, 1)
};
$scope.$watch('subnetworks', function() {
if ($scope.subnetworks.length == 0) {
$scope.subnetworks.push({});
}
}, true);
//For Routing Table Section
$scope.routingtable = wizardFactory.getRoutingTable();
$scope.addRoute = function() {
$scope.routingtable.push({});
console.log($scope.routingtable);
};
$scope.removeRoute = function(index) {
$scope.routingtable.splice(index, 1)
};
$scope.$watch('routingtable', function() {
if ($scope.routingtable.length == 0) {
$scope.routingtable.push({});
}
}, true);
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
if (newCommitState !== undefined) {
if (newCommitState.name == "os_global" && newCommitState.state == "triggered") {
$scope.commit();
}
}
});
$scope.commit = function() {
$scope.updateClusterConfig();
$scope.updateSubnet();
$scope.updateRoutingTable();
console.info("$$$$ ", wizardFactory.getSubnetworks(), wizardFactory.getRoutingTable(), wizardFactory.getGeneralConfig())
//TODO: should have check here to see if each part is updated successfully
var commitState = {
"name": "os_global",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
};
$scope.updateClusterConfig = function() {
var os_global_general = {
"os_config": {
"general": $scope.general
}
};
// put cluster config
dataService.updateClusterConfig(cluster.id, os_global_general).success(function(configData) {
wizardFactory.setGeneralConfig(configData["os_config"]["general"]);
});
};
$scope.updateSubnet = function() {
var subnetCount = $scope.subnetworks.length;
var subnetworks = [];
var i = 0;
angular.forEach($scope.subnetworks, function(subnet) {
if (subnet.subnet_id === undefined) {
// post cluster subnet-config
dataService.postClusterSubnetConfig(cluster.id, subnet).success(function(subnetData) {
subnetworks.push(subnetData);
i++;
if (i == subnetCount) {
$scope.subnetworks = subnetworks;
wizardFactory.setSubnetworks($scope.subnetworks);
}
})
} else {
// put cluster subnet-config
dataService.putClusterSubnetConfig(cluster.id, subnet.subnet_id, subnet).success(function(subnetData) {
subnetworks.push(subnetData);
i++;
if (i == subnetCount) {
$scope.subnetworks = subnetworks;
wizardFactory.setSubnetworks($scope.subnetworks);
}
})
}
})
};
$scope.updateRoutingTable = function() {
var routingCount = $scope.routingtable.length;
var routingTable = [];
var i = 0;
angular.forEach($scope.routingtable, function(rt) {
if (rt.id === undefined) {
// post routing table
dataService.postRoutingTable(cluster.id, rt).success(function(routingData) {
routingTable.push(routingData);
i++;
if (i == routingCount) {
$scope.routingtable = routingTable;
wizardFactory.setRoutingTable(routingTable);
}
})
} else {
// put routing table
dataService.putRoutingTable(cluster.id, rt.id, rt).success(function(routingData) {
routingTable.push(routingData);
i++;
if (i == routingCount) {
$scope.routingtable = routingTable;
wizardFactory.setRoutingTable(routingTable);
}
})
}
})
};
})
.controller('networkCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams) {
var cluster = wizardFactory.getClusterInfo();
$scope.subnetworks = wizardFactory.getSubnetworks();
$scope.interfaces = wizardFactory.getInterfaces();
$scope.servers = wizardFactory.getServers();
dataService.getServerColumns().success(function(data) {
$scope.server_columns = data.showless;
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: $scope.servers.length + 1 // count per page
}, {
counts: [], // hide count-per-page box
total: $scope.servers.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')($scope.servers, params.orderBy()) : $scope.servers;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
$scope.addInterface = function(newInterface) {
var isExist = false;
angular.forEach($scope.interfaces, function(value, key) {
if (key == newInterface.name) {
isExist = true;
alert("This interface already exists. Please try another one");
}
})
if (!isExist) {
$scope.interfaces[newInterface.name] = {
"subnet_id": newInterface.subnet_id,
"is_mgmt": false,
}
}
$scope.newInterface = {};
};
$scope.deleteInterface = function(delInterface) {
delete $scope.interfaces[delInterface];
angular.forEach($scope.servers, function(sv) {
delete sv.network[delInterface];
})
};
$scope.initHostIpByInterface = function(interfaceName) {
if ($scope.servers.network[interfaceName] === undefinded) {
$scope.servers.network[interfaceName] = {};
}
};
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
console.info("### catch commit change in networkCtrl ###", newCommitState);
if (newCommitState !== undefined) {
if (newCommitState.name == "network" && newCommitState.state == "triggered") {
$scope.commitNetwork();
} else if (newCommitState.name == "network_mapping" && newCommitState.state == "triggered") {
$scope.commitNetworkMapping();
}
}
});
$scope.commitNetwork = function() {
var addHostsAction = {
"add_hosts": {
"machines": []
}
};
angular.forEach($scope.servers, function(server) {
if (server.reinstallos === undefined) {
addHostsAction.add_hosts.machines.push({
"machine_id": server.machine_id
});
} else {
addHostsAction.add_hosts.machines.push({
"machine_id": server.machine_id,
"reinstall_os": server.reinstallos
});
}
});
var interfaceCount = Object.keys($scope.interfaces).length;
if(interfaceCount == 0) {
alert("Please add interface");
} else {
// add hosts
dataService.postClusterActions(cluster.id, addHostsAction).success(function(data) {
var hosts = data.hosts;
for (var i = 0; i < $scope.servers.length; i++) {
for (var j = 0; j < hosts.length; j++) {
if ($scope.servers[i].machine_id == hosts[j].machine_id) {
$scope.servers[i].host_id = hosts[j].id;
break;
}
}
}
wizardFactory.setServers($scope.servers);
$scope.serverCount = $scope.servers.length;
var i = 0;
// post host network
angular.forEach($scope.servers, function(server) {
$scope.networkCount = Object.keys(server.network).length;
angular.forEach(server.network, function(value, key) {
var network = {
"interface": key,
"ip": value.ip,
"subnet_id": $scope.interfaces[key].subnet_id,
"is_mgmt": $scope.interfaces[key].is_mgmt
};
dataService.postHostNetwork(server.host_id, network).success(function(data) {
i++;
if (i == $scope.serverCount * $scope.networkCount) {
wizardFactory.setInterfaces($scope.interfaces);
wizardFactory.setServers($scope.servers);
var commitState = {
"name": "network",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
}
});
})
});
});
}
};
$scope.commitNetworkMapping = function() {
var commitState = {
"name": "network_mapping",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
};
$scope.autofill = function() {
//TODO: add auto fill
alert("Autofill coming soon");
}
})
.controller('partitionCtrl', function($scope, wizardFactory, dataService) {
var cluster = wizardFactory.getClusterInfo();
$scope.partition = [];
$scope.addPartition = function() {
$scope.partition.push({});
console.log($scope.partition);
};
$scope.$watch('partition', function() {
if ($scope.partition.length == 0) {
$scope.partition.push({});
}
}, true);
var partitionData = {};
/*
angular.forEach($scope.partition, function(pa) {
console.log(pa);
if (partitionData[pa.mount_point] !== undefined) {
if (!partitionData[pa.mount_point].push) {
partitionData[pa.mount_point] = [partitionData[pa.mount_point]];
}
partitionData[pa.mount_point].push({
"size_percentage": pa.size_percentage,
"max_size": pa.max_size
} || {});
} else {
partitionData[pa.mount_point] = {
"size_percentage": pa.size_percentage,
"max_size": pa.max_size
} || {};
}
});
*/
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
console.info("### catch commit change in networkCtrl ###", newCommitState);
if (newCommitState !== undefined) {
if (newCommitState.name == "partition" && newCommitState.state == "triggered") {
$scope.commit();
}
}
});
$scope.commit = function() {
dataService.updateClusterConfig(cluster.id, partitionData).success(function(data) {
var commitState = {
"name": "partition",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
});
};
})
.controller('securityCtrl', function($scope, wizardFactory, dataService) {
var cluster = wizardFactory.getClusterInfo();
/*
dataService.getAdapterConfig().success(function(data) {
$scope.os_global_config = data['os_config']['centos']['global'];
//console.log("###", $scope.os_global_config);
@ -145,19 +567,7 @@ angular.module('compass.wizard', [
};
//console.log($scope.security);
});
//For Partition Section
$scope.partition = []
$scope.addPartition = function() {
$scope.partition.push({});
console.log($scope.partition);
};
$scope.$watch('partition', function() {
if ($scope.partition.length == 0) {
$scope.partition.push({});
}
}, true);
*/
//For Service Credentials Section
$scope.service_credentials = {
@ -229,269 +639,34 @@ angular.module('compass.wizard', [
"username": "cinder",
"password": "cinder"
}
}
})
.controller('svSelectCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams) {
$scope.hideunselected = '';
$scope.allservers = wizardFactory.getAllMachinesHost();
$scope.selectAllServers = function(flag) {
if (flag) {
angular.forEach($scope.allservers, function(sv) {
sv.selected = true;
})
} else {
angular.forEach($scope.allservers, function(sv) {
sv.selected = false;
})
}
};
dataService.getServerColumns().success(function(data) {
$scope.server_columns = data.showall;
});
$scope.hideUnselected = function() {
if ($scope.hideunselected) {
$scope.search.selected = true;
} else {
delete $scope.search.selected;
}
};
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: $scope.allservers.length // count per page
}, {
counts: [], // hide count-per-page box
total: $scope.allservers.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')($scope.allservers, params.orderBy()) : $scope.allservers;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
if (newCommitState !== undefined) {
if (newCommitState.name == "sv_selection" && newCommitState.state == "triggered") {
$scope.commit();
}
}
});
$scope.commit = function() {
var selectedServers = [];
var noSelection = true;
angular.forEach($scope.allservers, function(sv) {
if (sv.selected) {
noSelection = false;
selectedServers.push(sv);
}
})
if (noSelection) {
alert("Please select at least one server");
wizardFactory.setCommitState({});
} else {
wizardFactory.setServers(selectedServers);
wizardFactory.setAllMachinesHost($scope.allservers);
console.info("wizardFactory.getServers", wizardFactory.getServers());
console.info("wizardFactory.getAllMachinesHost", wizardFactory.getAllMachinesHost());
var commitState = {
"name": "sv_selection",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
}
};
})
.controller('globalCtrl', function($scope, wizardFactory, dataService) {
var cluster = wizardFactory.getClusterInfo();
//For General Section
$scope.general = {
"dns_servers": [""],
"search_path": [""]
};
$scope.addDNSServer = function() {
$scope.general['dns_servers'].push("");
};
$scope.addSearchPath = function() {
$scope.general['search_path'].push("");
};
dataService.getTimezones().success(function(data) {
$scope.timezones = data;
});
//For Subnetworks Section
$scope.subnetworks = wizardFactory.getSubnetworks();
$scope.addSubnetwork = function() {
$scope.subnetworks.push({});
console.log($scope.subnetworks);
};
$scope.removeSubnetwork = function(index) {
$scope.subnetworks.splice(index, 1)
};
$scope.$watch('subnetworks', function() {
if ($scope.subnetworks.length == 0) {
$scope.subnetworks.push({});
}
}, true);
//For Routing Table Section
$scope.routingtable = wizardFactory.getRoutingTable();
$scope.addRoute = function() {
$scope.routingtable.push({});
console.log($scope.routingtable);
};
$scope.removeRoute = function(index) {
$scope.routingtable.splice(index, 1)
};
$scope.$watch('routingtable', function() {
if ($scope.routingtable.length == 0) {
$scope.routingtable.push({});
}
}, true);
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
if (newCommitState !== undefined) {
if (newCommitState.name == "os_global" && newCommitState.state == "triggered") {
$scope.commit();
}
}
});
$scope.commit = function() {
var os_global_general = {
"os_config": {
"general": $scope.general
}
};
dataService.updateClusterConfig(cluster.id, os_global_general).success(function(configData) {
wizardFactory.setGeneralConfig(configData);
dataService.postClusterSubnetConfig(cluster.id, $scope.subnetworks).success(function(subnetData) {
wizardFactory.setSubnetworks(subnetData);
dataService.postRoutingTable(cluster.id, $scope.routingtable).success(function(routingTbdata) {
wizardFactory.setRoutingTable(routingTbdata);
console.info("$$$$ ", wizardFactory.getSubnetworks(), wizardFactory.getRoutingTable(), wizardFactory.getGeneralConfig())
var commitState = {
"name": "os_global",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
})
})
})
};
})
.controller('networkCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams) {
var cluster = wizardFactory.getClusterInfo();
$scope.servers = wizardFactory.getServers();
dataService.getServerColumns().success(function(data) {
$scope.server_columns = data.showless;
});
$scope.subnetworks = wizardFactory.getSubnetworks();
$scope.interfaces = wizardFactory.getInterfaces();
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: $scope.servers.length + 1 // count per page
}, {
counts: [], // hide count-per-page box
total: $scope.servers.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')($scope.servers, params.orderBy()) : $scope.servers;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
$scope.addInterface = function(newInterface) {
var isExist = false;
angular.forEach($scope.interfaces, function(interface) {
if (interface == newInterface) {
isExist = true;
alert("This interface already exists. Please try another one");
}
})
if (!isExist) {
$scope.interfaces.push(newInterface);
}
$scope.newInterface = "";
};
$scope.deleteInterface = function(delInterface) {
var delIndex = $scope.interfaces.indexOf(delInterface);
$scope.interfaces.splice(delIndex, 1);
angular.forEach($scope.servers, function(sv) {
delete sv.network[delInterface];
})
};
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
console.info("### catch commit change in networkCtrl ###", newCommitState);
if (newCommitState !== undefined) {
if (newCommitState.name == "network" && newCommitState.state == "triggered") {
$scope.commitNetwork();
} else if (newCommitState.name == "network_mapping" && newCommitState.state == "triggered") {
$scope.commitNetworkMapping();
if (newCommitState.name == "security" && newCommitState.state == "triggered") {
$scope.commit();
}
}
});
$scope.commitNetwork = function() {
var commitState = {
"name": "network",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
$scope.commit = function() {
var partitionData = {};
dataService.updateClusterConfig(cluster.id, partitionData).success(function(data) {
var commitState = {
"name": "security",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
});
};
$scope.commitNetworkMapping = function() {
var commitState = {
"name": "network_mapping",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
};
$scope.autofill = function() {
//TODO: add auto fill
alert("Autofill coming soon");
}
})
.controller('roleAssignCtrl', function($scope, wizardFactory) {
.controller('roleAssignCtrl', function($scope, wizardFactory, dataService) {
var cluster = wizardFactory.getClusterInfo();
$scope.servers = wizardFactory.getServers();
$scope.roles = wizardFactory.getAdapter().roles;
@ -520,4 +695,25 @@ angular.module('compass.wizard', [
}
}
};
})
$scope.$watch(function() {
return wizardFactory.getCommitState()
}, function(newCommitState, oldCommitState) {
console.info("### catch commit change in networkCtrl ###", newCommitState);
if (newCommitState !== undefined) {
if (newCommitState.name == "role_assign" && newCommitState.state == "triggered") {
$scope.commit();
}
}
});
$scope.commit = function() {
var commitState = {
"name": "role_assign",
"state": "success",
"message": ""
};
wizardFactory.setCommitState(commitState);
};
})