review page updated

Change-Id: I7a42610ca4ace1088a24d353705b5f8ab5ecb86a
This commit is contained in:
sharonlucong 2015-01-20 17:30:59 -08:00
parent 0d41c806be
commit 56cc825ef4
3 changed files with 334 additions and 219 deletions

View File

@ -1039,6 +1039,7 @@ div.toc ul li a {
vertical-align: baseline;
white-space: nowrap;
margin-right: 2px;
width: 120px;
}
.autofill-success {
margin-top: 20px;
@ -1056,3 +1057,43 @@ h4.widget-title:hover {
.loadingMask .mask{
opacity: 0.5;
}
.tab-panel {
z-index: 10;
margin-left: 30px;
}
.tab-panel.stick {
position: fixed;
z-index: 10000;
top: 10px;
}
.review-padding{
padding-left: 60px;
padding-right: 60px;
}
.review-network-badge{
width:130px;
}
.review-targetconfig{
background:#7E6EB0;
}
.review-host{
background:#307ECC;
}
.review-osconfig{
background:#69AA46;
}
.table-border-green{
border-bottom: 1px solid #69AA46;
}
.table-border-blue{
border-bottom: 1px solid #307ECC;
}
.table-border-purple{
border-bottom: 1px solid #7E6EB0;
}
.table-border-grey{
border-bottom: 1px solid #DDD;
}
.table-review-padding{
padding-left:20px;
}

View File

@ -1,131 +1,77 @@
<div ng-controller="reviewCtrl">
<div class="row">
<div class="col-sm-12">
<div class="widget-box transparent margin-top-minus10">
<div class="widget-header widget-header-flat">
<h4 class="widget-title lighter" ng-click="returnStep('role_assign')">
<i class="ace-icon fa fa-list"></i>
Hosts
</h4>
<div class="widget-toolbar">
<a class="action" ng-click="isHostsCollapsed = !isHostsCollapsed">
<i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isHostsCollapsed, 'fa-chevron-down': isHostsCollapsed}"></i>
</a>
</div>
</div>
<div ng-controller="reviewCtrl" data-spy="scroll" data-target="#side-nav">
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div class="widget-main no-padding" collapse="isHostsCollapsed">
<table ng-table="tableParams" class="table table-hover table-striped">
<thead>
<tr>
<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>
<th ng-repeat="(key, value) in interfaces">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="server in $data | filter: search">
<td ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field">
<span ng-switch on="column.field">
<span ng-switch-when="os_installed">
<span ng-if="server['os']">
<label>
<input ng-model="server.reinstallos" type="checkbox" class="ace">
<span class="lbl"></span>
</label>
</span>
<span ng-if="!server['os']">
-
</span>
</span>
<span ng-switch-when="clusters">
<span ng-repeat="cluster in server.clusters">
{{cluster.name}}&nbsp;
</span>
</span>
<span ng-switch-when="roles">
<span ng-repeat="role in server['roles']" class="role-badge" ng-style="{'background-color': role.color}">
{{role.display_name}}
</span>
</span>
<span ng-switch-default>
{{server[column.field]}}
</span>
</span>
</td>
<td ng-repeat="(key, value) in interfaces">
{{server.networks[key].ip}}
</td>
</tr>
</tbody>
<div id="side-nav">
<ul class="nav nav-list affix" id="myTab">
<li>
<a ng-click="scrollTo('osconfig')">
<i class="green ace-icon fa fa-globe bigger-110"></i> OS Config
</a>
</li>
</table>
</div>
</div>
</div>
</div>
</div>
<li>
<a ng-click="scrollTo('hosts')">
<i class="blue ace-icon fa fa-list bigger-110"></i> Host
</a>
</li>
<li>
<a ng-click="scrollTo('targetconfig')">
<i class="purple ace-icon fa fa-lock"></i> Target Config
</a>
</li>
</ul>
</div>
<div class="space-16"></div>
<div class="row">
<div class="col-sm-6">
<div class="widget-box transparent margin-top-minus10">
<div style="margin-left: 180px;">
<div id="osconfig">
<div class="widget-box transparent margin-top-minus10" style="border-color:#CCC">
<div class="widget-header widget-header-flat">
<h4 class="widget-title lighter" ng-click="returnStep('network_mapping')">
<i class="ace-icon fa fa-sun-o"></i>
Network Mapping
<h4 class="widget-title lighter green">
OS Config
</h4>
<div class="widget-toolbar">
<a class="action" ng-click="isMappingCollapsed = !isMappingCollapsed">
<i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isMappingCollapsed, 'fa-chevron-down': isMappingCollapsed}"></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div class="widget-main no-padding" collapse="isMappingCollapsed">
<table class="table table-striped">
<thead>
<tr>
<th>Network</th>
<th>Interface</th>
</tr>
</thead>
<div class="widget-main review-padding">
<div class="widget-header widget-header-flat review-osconfig">
<h5 class="widget-title white" ng-click="returnStep('os_global')">
OS Global Configurations
</h5>
</div>
<table class="table table-striped table-border-grey">
<tbody>
<tr ng-repeat="(key, value) in network_mapping">
<td class="capitalize">{{key}}</td>
<tr ng-repeat="(key, value) in global_config">
<td class="table-review-padding"><strong>{{key}}</strong>
</td>
<td>{{value}}</td>
</tr>
<tr>
<td class="table-review-padding"><strong>Server Credentials</strong>
</td>
<td></td>
</tr>
<tr>
<td class="table-review-padding"><strong>Username</strong>
</td>
<td>{{server_credentials.username}}</td>
</tr>
<tr>
<td class="table-review-padding"><strong>Password</strong>
</td>
<td>{{server_credentials.password}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="widget-box transparent margin-top-minus10">
<div class="widget-header widget-header-flat">
<h4 class="widget-title lighter" ng-click="returnStep('partition')">
<i class="ace-icon fa fa-hdd-o"></i>
Partition
</h4>
<div class="widget-toolbar">
<a class="action" ng-click="isPartitionCollapsed = !isPartitionCollapsed">
<i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isPartitionCollapsed, 'fa-chevron-down': isPartitionCollapsed}"></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div class="widget-main no-padding" collapse="isPartitionCollapsed">
<table class="table table-striped">
<br>
<br>
<div class="widget-header widget-header-flat review-osconfig">
<h5 class="widget-title white" ng-click="returnStep('partition')">
Partition
</h5>
</div>
<table class="table table-striped table-border-grey">
<thead>
<tr>
<th>Mount Point</th>
@ -135,7 +81,7 @@
</thead>
<tbody>
<tr ng-repeat="(key, value) in partition">
<td>{{key}}</td>
<td class="table-review-padding">{{key}}</td>
<td>{{value.percentage}}</td>
<td>{{value.max_size}}</td>
</tr>
@ -146,126 +92,221 @@
</div>
</div>
</div>
</div>
<div class="space-16"></div>
<div class="row">
<div class="col-sm-6">
<div class="widget-box transparent margin-top-minus10">
<br>
<div id="hosts">
<div class="widget-box transparent margin-top-minus10" style="border-color:#CCC">
<div class="widget-header widget-header-flat">
<h4 class="widget-title lighter" ng-click="returnStep('os_global')">
<i class="ace-icon fa fa-globe"></i>
OS Global Configurations
<h4 class="widget-title lighter blue">
Host
</h4>
<div class="widget-toolbar">
<a class="action" ng-click="isConfigCollapsed = !isConfigCollapsed">
<i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isConfigCollapsed, 'fa-chevron-down': isConfigCollapsed}"></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div class="widget-main no-padding" collapse="isConfigCollapsed">
<table class="table table-striped">
<tbody>
<tr ng-repeat="(key, value) in global_config">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
<tr>
<td>Server Credentials</td>
<td></td>
</tr>
<tr>
<td>Username</td>
<td>{{server_credentials.username}}</td>
</tr>
<tr>
<td>Password</td>
<td>{{server_credentials.password}}</td>
</tr>
</tbody>
</table>
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div class="widget-main review-padding">
<div class="widget-header widget-header-flat review-host">
<h5 class="widget-title white" ng-click="returnStep('role_assign')">
Hosts
</h5>
</div>
<table ng-table="tableParams" class="table table-striped table-border-grey">
<thead>
<tr>
<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')" ng-if="column.title!='Roles'">
<div>{{column.title}}</div>
</th>
<th ng-repeat="(key, value) in interfaces">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="server in $data | filter: search">
<td ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field">
<span ng-switch on="column.field">
<span ng-switch-when="os_installed">
<span ng-if="server['os']">
<label>
<input ng-model="server.reinstallos" type="checkbox" class="ace">
<span class="lbl"></span>
</label>
</span>
<span ng-if="!server['os']">
-
</span>
</span>
<span ng-switch-when="clusters">
<span ng-repeat="cluster in server.clusters">
{{cluster.name}}&nbsp;
</span>
</span>
<!-- <span ng-switch-when="roles">
<span ng-repeat="role in server['roles']" class="role-badge" ng-style="{'background-color': role.color}">
{{role.display_name}}
</span>
</span> -->
<span ng-switch-default ng-if="column.field!='roles'">
{{server[column.field]}}
</span>
</span>
</td>
<td ng-repeat="(key, value) in interfaces">
{{server.networks[key].ip}}
</td>
</tr>
</tbody>
</table>
<br>
<br>
<div class="widget-header widget-header-flat review-host">
<h5 class="widget-title white" ng-click="returnStep('role_assign')">
Roles
</h5>
</div>
<table class="table table-striped table-border-grey">
<thead>
<tr>
<th>Hostname</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="server in servers">
<td>
{{server.hostname}}
</td>
<td>
<span ng-repeat="role in server['roles']" class="role-badge" ng-style="{'background-color': role.color}">
{{role.display_name}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="widget-box transparent margin-top-minus10">
<br>
<div id="targetconfig">
<div class="widget-box transparent margin-top-minus10" style="border-color:#CCC">
<div class="widget-header widget-header-flat">
<h4 class="widget-title lighter" ng-click="returnStep('security')">
<i class="ace-icon fa fa-lock"></i>
Target System Configurations
</h4>
<div class="widget-toolbar no-border">
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">
<a href>{{tab.title}}</a>
</li>
<a class="action margin-right-5" ng-click="isCredCollapsed = !isCredCollapsed">
<i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isCredCollapsed, 'fa-chevron-down': isCredCollapsed}"></i>
</a>
</ul>
</div>
<h4 class="widget-title lighter purple" ng-click="returnStep('network_mapping')">
Target Config
</h4>
</div>
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div collapse="isCredCollapsed" class="widget-main no-padding">
<div ng-include="currentTab"></div>
<script type="text/ng-template" id="service.tpl.html">
<table class="table table-striped">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div class="widget-main review-padding" collapse="isMappingCollapsed">
<div class="widget-header widget-header-flat review-targetconfig">
<h5 class="widget-title white" ng-click="returnStep('network_mapping')">
Network Mapping
</h5>
</div>
<table class="table table-striped table-border-grey">
<thead>
<tr>
<th>Network</th>
<th>Interface</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in network_mapping">
<td class="capitalize">
<div class="label review-network-badge" ng-class="{'label-pink': key == 'management', 'label-success': key == 'tenant', 'label-purple': key == 'external', 'label-warning': key == 'storage', 'label-info': key == 'public_network', 'label-red': key == 'cluster_network'}">
{{key}}
</div>
</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
<br>
<br>
<div class="widget-header widget-header-flat review-targetconfig">
<h5 class="widget-title white" ng-click="returnStep('security')">
Target System Configurations - cephConfig
</h5>
</div>
<table class="table table-striped table-border-grey">
<tbody>
<tr ng-repeat="(key, value) in cephConfig.global_config">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
<tr ng-repeat="(key, value) in cephConfig.osd_config">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
<br>
<br>
<div class="widget-header widget-header-flat review-targetconfig">
<h5 class="widget-title white" ng-click="returnStep('security')">
Target System Configurations - console_credentials
</h5>
</div>
<table class="table table-striped table-border-grey">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in console_credentials">
<td>{{key}}</td>
<td>{{value.username}}</td>
<td>{{value.password}}</td>
</tr>
</tbody>
</table>
<br>
<br>
<div class="widget-header widget-header-flat review-targetconfig">
<h5 class="widget-title white" ng-click="returnStep('security')">
Target System Configurations - service_credentials
</h5>
</div>
<table class="table table-striped table-border-grey">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in service_credentials">
<td>{{key}}</td>
<td>{{value.username}}</td>
<td>{{value.password}}</td >
<td>{{value.password}}</td>
</tr>
</tbody>
</table>
</script>
<script type="text/ng-template" id="console.tpl.html">
<table class="table table-striped">
<thead>
<tr>
<th>Service</th>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in console_credentials">
<td>{{key}}</td >
<td>{{value.username}}</td>
<td>{{value.password}}</td>
</tr>
</tbody>
</table>
</script>
<script type="text/ng-template" id="ceph.tpl.html">
<table class="table table-striped">
<tbody>
<tr ng-repeat="(key, value) in cephConfig.global_config">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
<tr ng-repeat="(key, value) in cephConfig.osd_config">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
</script>
</div>
</div>
</div>
<div class="widget-body">
<div class="widget-body-inner" style="display: block;">
<div class="widget-main review-padding">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -406,6 +406,7 @@ define(['uiRouter', 'angularTable', 'angularDragDrop', 'angularTouch', 'ngSpinne
dataService.getServerColumns().success(function(data) {
$scope.server_columns = data.showall;
//console.log($scope.server_columns);
});
$scope.hideUnselected = function() {
@ -674,6 +675,7 @@ define(['uiRouter', 'angularTable', 'angularDragDrop', 'angularTouch', 'ngSpinne
var cluster = wizardFactory.getClusterInfo();
$scope.subnetworks = wizardFactory.getSubnetworks();
$scope.interfaces = wizardFactory.getInterfaces();
//console.log($scope.interfaces);
$scope.autoFill = false;
$scope.autoFillButtonDisplay = "Enable Autofill";
//$scope.servers = wizardFactory.getServers();
@ -692,7 +694,7 @@ define(['uiRouter', 'angularTable', 'angularDragDrop', 'angularTouch', 'ngSpinne
dataService.getClusterHosts(cluster.id).success(function(data) {
$scope.servers = data;
//console.log($scope.servers);
// Assume all hosts in the same cluster have same interface settings
if ($scope.servers[0].networks) {
if (Object.keys($scope.servers[0].networks).length != 0) {
@ -1271,9 +1273,9 @@ define(['uiRouter', 'angularTable', 'angularDragDrop', 'angularTouch', 'ngSpinne
targetSysConfigData["package_config"]["ceph_config"] = $scope.cephConfig;
}
if ($scope.currentAdapterName == "ceph_firefly") {
targetSysConfigData["package_config"]={};
targetSysConfigData["package_config"]["ceph_config"] = $scope.cephConfig;
}
targetSysConfigData["package_config"] = {};
targetSysConfigData["package_config"]["ceph_config"] = $scope.cephConfig;
}
dataService.updateClusterConfig(cluster.id, targetSysConfigData).success(function(data) {
var commitState = {
"name": "package_config",
@ -1645,7 +1647,7 @@ define(['uiRouter', 'angularTable', 'angularDragDrop', 'angularTouch', 'ngSpinne
};
});
wizardModule.controller('reviewCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams, sortingService) {
wizardModule.controller('reviewCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams, sortingService, $anchorScroll, $location) {
var cluster = wizardFactory.getClusterInfo();
$scope.servers = wizardFactory.getServers();
$scope.interfaces = wizardFactory.getInterfaces();
@ -1659,8 +1661,38 @@ define(['uiRouter', 'angularTable', 'angularDragDrop', 'angularTouch', 'ngSpinne
dataService.getServerColumns().success(function(data) {
$scope.server_columns = data.review;
for (var i = 0; i < data.review.length; i++) {
if (data.review[i].title == "Hostname") {
var temp = $scope.server_columns[0];
$scope.server_columns[0] = data.review[i];
$scope.server_columns[i] = temp;
}
if (data.review[i].title == "Host MAC Addr") {
var temp = $scope.server_columns[1];
$scope.server_columns[1] = data.review[i];
$scope.server_columns[i] = temp;
}
if (data.review[i].title == "Switch IP") {
var temp = $scope.server_columns[2];
$scope.server_columns[2] = data.review[i];
$scope.server_columns[i] = temp;
}
if (data.review[i].title == "Port") {
var temp = $scope.server_columns[3];
$scope.server_columns[3] = data.review[i];
$scope.server_columns[i] = temp;
}
}
});
$scope.scrollTo = function(id) {
var old = $location.hash();
$location.hash(id);
$anchorScroll();
$location.hash(old);
};
$scope.tabs = [{
"title": "Database & Queue",
"url": "service.tpl.html"
@ -1792,6 +1824,7 @@ define(['uiRouter', 'angularTable', 'angularDragDrop', 'angularTouch', 'ngSpinne
};
});
//Used for roles panel on Role Assignment page
wizardModule.directive("rolepanelscroll", function($window) {
return function(scope, element, attrs) {