Add cluster configuration pages
Change-Id: I3b7dda6a13c7f7a648843f3d0c9c845f60060989
This commit is contained in:
jiahuay
parent
a20eb678b8
commit
453ed0ef8b
@ -141,6 +141,10 @@ select {
|
||||
overflow-y: scroll;
|
||||
max-height:400px
|
||||
}
|
||||
.padding-top-30 {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.btn-clstr {
|
||||
border: none !important;
|
||||
background-color: inherit!important;
|
||||
|
||||
@ -208,5 +208,26 @@
|
||||
"title": "Date Updated",
|
||||
"field": "updated_at",
|
||||
"visible": true
|
||||
}],
|
||||
"roles": [{
|
||||
"title": "MAC Addr",
|
||||
"field": "mac",
|
||||
"visible": false
|
||||
}, {
|
||||
"title": "Switch IP",
|
||||
"field": "switch_ip",
|
||||
"visible": true
|
||||
}, {
|
||||
"title": "Port",
|
||||
"field": "port",
|
||||
"visible": true
|
||||
}, {
|
||||
"title": "Hostname",
|
||||
"field": "hostname",
|
||||
"visible": true
|
||||
}, {
|
||||
"title": "Roles",
|
||||
"field": "roles",
|
||||
"visible": true
|
||||
}]
|
||||
}
|
||||
|
||||
@ -524,6 +524,126 @@ compassAppDev.run(function($httpBackend, settings, $http) {
|
||||
return [200, cluster, {}];
|
||||
});
|
||||
|
||||
$httpBackend.whenGET(/\.*\/clusters\/([0-9]|[1-9][0-9])*\/config/).respond(function(method, url, data) {
|
||||
console.log(method, url, data);
|
||||
var config = {
|
||||
"os_config": {
|
||||
"server_credentials": {
|
||||
"username": "admin",
|
||||
"password": "admin"
|
||||
},
|
||||
"partition": {
|
||||
"/swap": {
|
||||
"percentage": 10
|
||||
},
|
||||
"/boot": {
|
||||
"percentage": 10
|
||||
},
|
||||
"/var": {
|
||||
"percentage": 30
|
||||
},
|
||||
"/home": {
|
||||
"percentage": 30
|
||||
},
|
||||
"/spare": {
|
||||
"percentage": 20
|
||||
}
|
||||
}
|
||||
},
|
||||
"package_config": {
|
||||
"security": {
|
||||
"service_credentials": {
|
||||
"rabbitmq": {
|
||||
"username": "guest",
|
||||
"password": "guest"
|
||||
},
|
||||
"compute": {
|
||||
"username": "nova",
|
||||
"password": "nova"
|
||||
},
|
||||
"dashboard": {
|
||||
"username": "dashboard",
|
||||
"password": "dashboard"
|
||||
},
|
||||
"identity": {
|
||||
"username": "keystone",
|
||||
"password": "keystone"
|
||||
},
|
||||
"image": {
|
||||
"username": "glance",
|
||||
"password": "glance"
|
||||
},
|
||||
"metering": {
|
||||
"username": "ceilometer",
|
||||
"password": "ceilometer"
|
||||
},
|
||||
"mysql": {
|
||||
"username": "root",
|
||||
"password": "root"
|
||||
},
|
||||
"volume": {
|
||||
"username": "cinder",
|
||||
"password": "cinder"
|
||||
}
|
||||
},
|
||||
"management_credentials": {
|
||||
"admin": {
|
||||
"username": "admin",
|
||||
"password": "admin"
|
||||
},
|
||||
"compute": {
|
||||
"username": "nova",
|
||||
"password": "nova"
|
||||
},
|
||||
"dashboard": {
|
||||
"username": "dashboard",
|
||||
"password": "dashboard"
|
||||
},
|
||||
"image": {
|
||||
"username": "glance",
|
||||
"password": "glance"
|
||||
},
|
||||
"metering": {
|
||||
"username": "ceilometer",
|
||||
"password": "ceilometer"
|
||||
},
|
||||
"network": {
|
||||
"username": "quantum",
|
||||
"password": "quantum"
|
||||
},
|
||||
"object-store": {
|
||||
"username": "swift",
|
||||
"password": "swift"
|
||||
},
|
||||
"volume": {
|
||||
"username": "cinder",
|
||||
"password": "cinder"
|
||||
}
|
||||
}
|
||||
},
|
||||
"network_mapping": {
|
||||
"management": {
|
||||
"display": "Management Network",
|
||||
"mapping_interface": "eth1"
|
||||
},
|
||||
"tenant": {
|
||||
"display": "Tenant Network",
|
||||
"mapping_interface": "eth1"
|
||||
},
|
||||
"storage": {
|
||||
"display": "Storage Network",
|
||||
"mapping_interface": "eth1"
|
||||
},
|
||||
"public": {
|
||||
"display": "Public Network",
|
||||
"mapping_interface": "eth2"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
return [200, config, {}];
|
||||
});
|
||||
|
||||
$httpBackend.whenPUT(/\.*\/clusters\/[1-9][0-9]*\/config/).respond(function(method, url, data) {
|
||||
console.log(method, url, data);
|
||||
var config = JSON.parse(data);
|
||||
|
||||
@ -1 +1,23 @@
|
||||
network
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Network
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row side-padding-10 padding-top-30">
|
||||
<div class="col-xs-12">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Network</th>
|
||||
<th>Interface</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="(key, value) in configuration.package_config.network_mapping">
|
||||
<td>{{value.display}}</td>
|
||||
<td>{{value.mapping_interface}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1,39 @@
|
||||
partition
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Partition
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="row side-padding-10 padding-top-30">
|
||||
<div class="col-xs-12">
|
||||
|
||||
<div class="col-lg-8">
|
||||
<table class="table table-hover table-striped nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mount Point</th>
|
||||
<th>Size Percentage (%)</th>
|
||||
<th>Max Size (G)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="(key, data) in configuration.os_config.partition">
|
||||
<td>
|
||||
<span>{{key}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{data.percentage}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{data.max_size}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center partition-chart">
|
||||
<piechart piedata="partitionarray"></piechart>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1,50 @@
|
||||
roles
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Roles
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="row side-padding-10 padding-top-30">
|
||||
<div class="col-xs-12">
|
||||
<div class="table-responsive">
|
||||
<table ng-table="tableParams" class="table table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<!--th>
|
||||
<label>
|
||||
<input type="checkbox" ng-model="selectall" ng-change="selectAllServers(selectall)" class="ace">
|
||||
<span class="lbl"></span>
|
||||
</label>
|
||||
</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')">
|
||||
<div>{{column.title}}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="host in $data | filter:search">
|
||||
<!--td>
|
||||
<label>
|
||||
<input type="checkbox" ng-model="host.selected" class="ace">
|
||||
<span class="lbl"></span>
|
||||
</label>
|
||||
</td-->
|
||||
<td ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field">
|
||||
<span ng-switch on="column.field">
|
||||
<span ng-switch-when="roles">
|
||||
<span ng-repeat="role in host['roles']" class="badge">
|
||||
{{role.display_name}}
|
||||
</span>
|
||||
</span>
|
||||
<span ng-switch-default>
|
||||
{{host[column.field]}}
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1,114 @@
|
||||
security page
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Security
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row side-padding-10 padding-top-30">
|
||||
<div class="col-xs-12">
|
||||
|
||||
<div class="widget-box transparent margin-top-minus10">
|
||||
<div class="widget-header widget-header-flat">
|
||||
<h4 class="widget-title lighter">
|
||||
OpenStack Database & Queue Credentials
|
||||
</h4>
|
||||
<div class="widget-toolbar">
|
||||
<a ng-click="isServiceCollapsed = !isServiceCollapsed" class="action">
|
||||
<i ng-class="{'fa-chevron-up': !isServiceCollapsed, 'fa-chevron-down': isServiceCollapsed}" class="ace-icon fa fa-chevron-up"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-body">
|
||||
<div style="display: block;" class="widget-body-inner">
|
||||
<div collapse="isServiceCollapsed" class="widget-main no-padding collapse in" style="height: auto;">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Service</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<form name="serviceCredForm">
|
||||
<a href="#">
|
||||
<tr ng-repeat="(service, credential) in configuration.package_config.security.service_credentials">
|
||||
<td>
|
||||
<span>
|
||||
{{service}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{credential.username}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{credential.password}}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</a>
|
||||
</form>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-30"></div>
|
||||
|
||||
<div class="widget-box transparent margin-top-minus10">
|
||||
<div class="widget-header widget-header-flat">
|
||||
<h4 class="widget-title lighter">
|
||||
OpenStack Keystone User Credentials
|
||||
</h4>
|
||||
<div class="widget-toolbar">
|
||||
<a ng-click="isConsoleCollapsed = !isConsoleCollapsed" class="action">
|
||||
<i ng-class="{'fa-chevron-up': !isConsoleCollapsed, 'fa-chevron-down': isConsoleCollapsed}" class="ace-icon fa fa-chevron-up"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-body">
|
||||
<div style="display: block;" class="widget-body-inner">
|
||||
<div collapse="isConsoleCollapsed" class="widget-main no-padding collapse in" style="height: auto;">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Service</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<form name="serviceCredForm">
|
||||
<a href="#">
|
||||
<tr ng-repeat="(service, credential) in configuration.package_config.security.management_credentials">
|
||||
<td>
|
||||
<span>
|
||||
{{service}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{credential.username}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
{{credential.password}}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</a>
|
||||
</form>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-30"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
angular.module('compass.cluster', [
|
||||
'ui.router',
|
||||
'ui.bootstrap',
|
||||
'compass.charts',
|
||||
'ngAnimate',
|
||||
'ngTable',
|
||||
'angular-rickshaw'
|
||||
@ -22,6 +23,7 @@ angular.module('compass.cluster', [
|
||||
})
|
||||
.state('cluster.config', {
|
||||
url: '/config',
|
||||
controller: 'configurationCtrl',
|
||||
templateUrl: 'src/app/cluster/cluster-config.tpl.html',
|
||||
authenticate: true
|
||||
})
|
||||
@ -315,6 +317,49 @@ angular.module('compass.cluster', [
|
||||
}
|
||||
])
|
||||
|
||||
.controller('configurationCtrl', ['$scope', 'dataService', '$stateParams', '$filter', 'ngTableParams',
|
||||
function($scope, dataService, $stateParams, $filter, ngTableParams) {
|
||||
var clusterId = $stateParams.id;
|
||||
$scope.partitionarray = [];
|
||||
dataService.getClusterConfig(clusterId).success(function(data) {
|
||||
$scope.configuration = data;
|
||||
|
||||
|
||||
angular.forEach($scope.configuration.os_config.partition, function(value, key) {
|
||||
$scope.partitionarray.push({
|
||||
"name": key,
|
||||
"number": value.percentage
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
dataService.getServerColumns().success(function(data) {
|
||||
$scope.server_columns = data.roles;
|
||||
});
|
||||
|
||||
dataService.getClusterHostMachines(clusterId).success(function(data) {
|
||||
$scope.hosts = data;
|
||||
|
||||
$scope.tableParams = new ngTableParams({
|
||||
page: 1, // show first page
|
||||
count: $scope.hosts.length + 1 // count per page
|
||||
}, {
|
||||
counts: [], // hide count-per-page box
|
||||
total: $scope.hosts.length, // length of data
|
||||
getData: function($defer, params) {
|
||||
// use build-in angular filter
|
||||
var orderedData = params.sorting() ?
|
||||
$filter('orderBy')($scope.hosts, params.orderBy()) : $scope.hosts;
|
||||
|
||||
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
])
|
||||
|
||||
var ModalInstanceCtrl = function($scope, $modalInstance, allAdapters, cluster) {
|
||||
$scope.allAdapters = allAdapters;
|
||||
$scope.cluster = cluster;
|
||||
|
||||
@ -69,7 +69,7 @@ angular.module('compass.services', [])
|
||||
this.postSwitchFilters = function(filters) {
|
||||
return $http.post(settings.apiUrlBase + '/switch-filters', angular.toJson(filters));
|
||||
};
|
||||
*/
|
||||
*/
|
||||
this.putSwitchFilters = function(id, filters) {
|
||||
return $http.put(settings.apiUrlBase + '/switch-filters/' + id, angular.toJson(filters));
|
||||
};
|
||||
@ -114,6 +114,10 @@ angular.module('compass.services', [])
|
||||
return $http.get(settings.apiUrlBase + '/clusters/' + id + '/state');
|
||||
};
|
||||
|
||||
this.getClusterConfig = function(id) {
|
||||
return $http.get(settings.apiUrlBase + '/clusters/' + id + '/config');
|
||||
};
|
||||
|
||||
this.updateClusterConfig = function(id, config) {
|
||||
return $http.put(settings.apiUrlBase + '/clusters/' + id + '/config', angular.toJson(config));
|
||||
};
|
||||
@ -363,7 +367,7 @@ angular.module('compass.services', [])
|
||||
|
||||
.service('authService', ['$http', 'dataService',
|
||||
function($http, dataService) {
|
||||
this.isAuthenticated = false;
|
||||
this.isAuthenticated = true;
|
||||
|
||||
this.setLogin = function(isLogin) {
|
||||
this.isAuthenticated = isLogin;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user