x/compass-web
Code Issues Proposed changes

Added Server List, minor changes to Wizard CSS

Browse Source 
Change-Id: I61704dd7237c02db096b98e7f7f8048f63f9631e
This commit is contained in:
Shuai Zhu 2014-07-21 17:00:23 -07:00
parent cf01911249
commit dd49da4663
9 changed files with 384 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,34 +132,39 @@ button.btn-clte:hover, button.btn-clstre:active {
} }
th { th {
background-color: #FFFFFF !important; background-color: #FFFFFF !important;
color: #000000 !important; color: #000000;
} }
a.darkfont:link: { a.darkfont:link: {
font color: #000000 !important; font color: #000000 !important;
} }
/* visited link */
h1.cluster {
float: left !important;
line-height: 1.4 !important;
}
.header-margins{
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 15px !important;
}
a.darkfont:visited { a.darkfont:visited {
color: #000000 !important; color: #000000 !important;
} }
/* visited link */
h1.blue-header {
float: left !important;
line-height: 1.4 !important;
color: #2679b5;
font-size: 24px;
font-weight: lighter;
padding: 0;
}
.header-margins {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 15px !important;
}
a:active { a:active {
color: #0000FF; color: #0000FF;
} }
.page-header { .page-header {
padding-left: 20px; padding-left: 15px;
padding-right: 20px; padding-right: 15px;
} }
.label { .label {
border-radius: 0.25em !important; border-radius: 0.25em !important;
line-height: 80% !important; line-height: 80% !important;
text-transform: lowercase !important; text-transform: lowercase !important;
font-size: 100% !important; font-size: 100% !important;
padding: 0.2em 0 0 0 !important; padding: 0.2em 0 0 0 !important;
@ -171,14 +176,13 @@ a:active {
position: relative !important; position: relative !important;
float: right !important; float: right !important;
} }
.btn-cltd { .btn-cltd {
padding: 1px 3px 1px 4px !important; padding: 1px 3px 1px 4px !important;
} }
.btn-create { .btn-create {
line-height: 1.1 !important; line-height: 1.1 !important;
} }
.input-icon{ .input-icon {
margin-top: 5px !important; margin-top: 5px !important;
} }
.ng-table th.sortable { .ng-table th.sortable {
@ -197,7 +201,7 @@ a:active {
right: 8px; right: 8px;
top: 50%; top: 50%;
position: absolute; position: absolute;
/* opacity: .3; */ opacity: .3;
margin-top: -4px margin-top: -4px
} }
.ng-table th.sortable div:before { .ng-table th.sortable div:before {
@ -208,7 +212,7 @@ a:active {
border-top: 4px solid #000 border-top: 4px solid #000
} }
.ng-table th.sortable div:hover:after, .ng-table th.sortable div:hover:before { .ng-table th.sortable div:hover:after, .ng-table th.sortable div:hover:before {
opacity: 1; opacity: 0.8;
visibility: visible visibility: visible
} }
.ng-table th.sortable.sort-desc, .ng-table th.sortable.sort-asc { .ng-table th.sortable.sort-desc, .ng-table th.sortable.sort-asc {
@ -242,3 +246,67 @@ a:active {
-moz-opacity: .6; -moz-opacity: .6;
/* opacity: .6 */ /* opacity: .6 */
} }
.ng-table-pager {
display: none;
}
.btn-previous {
background-color: #abbac3 !important;
border-color: #abbac3 !important;
}
.first-prev {
cursor: not-allowed !important;
/* padding: 10px !important; */
}
.btn-light {
cursor: not-allowed !important;
}
.btn-prev-spacing {
margin-right: 10px;
}
.networkDeleteView {
border-bottom-color: #f3cdc6 !important;
background-color: #f5f5f5 !important;
}
.networkDeleteButton {
color: #dd5a43 !important;
}
.th-inhert {
vertical-align: auto;
}
.eth-width {
width: 13%;
}
.max-width-150 {
max-width: 150px !important;
}
.margin-bottom-8 {
margin-bottom: 0px;
}
td.center-align {
vertical-align: inherit !important;
}
.side-padding-30 {
padding-left: 30px !important;
padding-right: 30px !important;
padding-top: 10px;
}
.side-padding-40 {
padding-left: 40px !important;
padding-right: 40px !important;
}
.side-padding-10 {
padding-left: 10px !important;
padding-right: 10px !important;
}
.top-margin-14 {
margin-top: 14px;
}
table {
margin-bottom: 0px !important;
}
div.center-align {
vertical-align: center !important;
}
.margin-right-5 {
margin-right: 10px;
}

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

@ -2,7 +2,7 @@
<div class="row header-margins"> <div class="row header-margins">
<div class="col-xs-4"> <div class="col-xs-4">
<h1 class="cluster"> <h1 class="blue-header">
My Clusters My Clusters
</h1> </h1>
</div> </div>
@ -94,4 +94,3 @@
</tbody> </tbody>
</table> </table>
</div> </div>

164
v2/src/app/server/server-list.tpl.html
View File

@ -1 +1,163 @@
server list <div class="side-padding-30">
<div class="row side-padding-10">
<div class="pull-left">
<h1 class="blue-header">Discovered Servers</h1>
</div>
<div class="pull-right top-margin-14 center-align">
<!--Search Input-->
<span class="input-icon margin-right-5">
<input type="text" placeholder="Search" ng-model="search.$">
<i class="ace-icon fa fa-search blue"></i>
</span>
<!-- Column Show / Hide button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-white btn-default dropdown-toggle">
Column Show / Hide
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="column in server_columns" ng-click="column.visible=!column.visible">
<a class="action">
<span ng-class="{'opacity-zero': !column.visible}">
<i class="ace-icon fa fa-check blue"></i>
</span>
{{column.title}}
</a>
</li>
</ul>
</div>
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info btn-default dropdown-toggle">
Actions
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-click="column.visible=!column.visible">
<a class="action">
<span ng-class="{'opacity-zero': !column.visible}">
<i class="ace-icon fa fa-check blue"></i>
</span>
Additional Actions
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info btn-default" ng-click="addInterfacePanel.isCollapsed = !addInterfacePanel.isCollapsed" ng-init="addInterfacePanel.isCollapsed = true;">
Expand
</button>
</div>
</div>
</div>
<div class="row">
<div collapse="addInterfacePanel.isCollapsed">
<div class="widget-box">
<div class="widget-body">
<div class="widget-main">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<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 class="col-lg-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row side-padding-40">
<div class="table-responsive">
<table ng-table="tableParams" class="table table-hover table-striped">
<thead>
<tr>
<th>
<label>
<input ng-model="selectall" ng-change="selectAllServers(selectall)" type="checkbox" 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')">
{{column.title}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="server in $data | filter:search">
<td>
<label>
<input ng-model="server.selected" type="checkbox" class="ace">
<span class="lbl"></span>
</label>
</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']">
<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-if="column.field!='os_installed'">
{{server[column.field]}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

99
v2/src/app/server/server.js
View File

@ -1,12 +1,107 @@
angular.module('compass.server', [ angular.module('compass.server', [
'ui.router', 'ui.router',
'ui.bootstrap' 'ui.bootstrap',
'compass.charts',
'ngTable',
]) ])
.config(function config($stateProvider) { .config(function config($stateProvider) {
$stateProvider $stateProvider
.state('serverList', { .state('serverList', {
url: '/serverlist', url: '/serverlist',
controller: 'serverCtrl',
templateUrl: 'src/app/server/server-list.tpl.html' templateUrl: 'src/app/server/server-list.tpl.html'
}); });
}) })
.controller('serverCtrl', function($scope, ngTableParams, wizardFactory, dataService, $filter, ngTableParams) {
$scope.hideunselected = '';
$scope.search = {};
dataService.getAllMachineHosts().success(function(data) {
$scope.allservers = data;
//wizardFactory.setAllMachinesHost(data);
$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.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;
})
}
};
//servers = []
dataService.getServerColumns().success(function(data) {
//clusters = data;
$scope.server_columns = data.showall;
});
$scope.hideUnselected = function() {
if ($scope.hideunselected) {
$scope.search.selected = true;
} else {
delete $scope.search.selected;
}
};
$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);
}
};
})

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

@ -153,32 +153,31 @@
<thead> <thead>
<tr> <tr>
<th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{ <th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{
'sort-asc': tableParams.isSortBy(column.field, 'asc'), 'sort-asc': tableParams.isSortBy(column.field, 'asc'),
'sort-desc': tableParams.isSortBy(column.field, 'desc') 'sort-desc': tableParams.isSortBy(column.field, 'desc')
}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')"> }" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
{{column.title}} <div>{{column.title}}</div>
</th> </th>
<th ng-repeat="(name, value) in interfaces" ng-mouseover="deleteView=true" ng-mouseleave="deleteView=false"> <th class="networkDeleteView" ng-repeat="(name, value) in interfaces" ng-mouseover="deleteView=true" ng-mouseleave="deleteView=false">
{{name}} {{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 ng-click="deleteInterface(name)" class="action">
<i ng-class="{'networkDeleteButton': deleteView}" class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
</span> </span>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="server in $data | filter: search" ng-init="serverIndex = $index"> <tr ng-repeat="server in $data | filter: search" ng-init="serverIndex = $index">
<td ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field"> <td class="center-align" ng-repeat="column in server_columns" ng-show="column.visible" sortable="column.field">
<span ng-if="column.field=='name'"> <span ng-if="column.field=='name'">
<input ng-model="server[column.field]" placeholder="Hostname" class="form-control margin-bottom-10 max-width-200" type="text"> <input ng-model="server[column.field]" placeholder="Hostname" class="form-control max-width-150 margin-bottom-0" type="text">
</span> </span>
<span ng-if="column.field!='name'"> <span ng-if="column.field!='name'">
{{server[column.field]}} {{server[column.field]}}
</span> </span>
</td> </td>
<td ng-repeat="(name, value) in interfaces" ng-init="server.network[name] = server.network[name] === undefinded? {} : server.network[name]"> <td class="eth-width" 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"> <input ng-model="server.network[name].ip" placeholder="IP Address" class="form-control max-width-150 margin-bottom-0" type="text">
</td> </td>
<!-- Set IP, subnet and mgmt by each server. Keep this part for future use--> <!-- Set IP, subnet and mgmt by each server. Keep this part for future use-->

36
v2/src/app/wizard/review.tpl.html
View File

@ -22,7 +22,7 @@
<tr> <tr>
<th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{'sort-asc': tableParams.isSortBy(column.field, 'asc'), <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')"> 'sort-desc': tableParams.isSortBy(column.field, 'desc')}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
{{column.title}} <div>{{column.title}}</div>
</th> </th>
<th ng-repeat="(key, value) in interfaces"> <th ng-repeat="(key, value) in interfaces">
{{key}} {{key}}
@ -65,7 +65,7 @@
<a class="action" ng-click="isMappingCollapsed = !isMappingCollapsed"> <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> <i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isMappingCollapsed, 'fa-chevron-down': isMappingCollapsed}"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="widget-body"> <div class="widget-body">
<div class="widget-body-inner" style="display: block;"> <div class="widget-body-inner" style="display: block;">
@ -140,7 +140,7 @@
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">
<a href>{{tab.title}}</a> <a href>{{tab.title}}</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="widget-body"> <div class="widget-body">
@ -148,30 +148,30 @@
<div class="widget-main no-padding"> <div class="widget-main no-padding">
<div ng-include="currentTab"></div> <div ng-include="currentTab"></div>
<script type="text/ng-template" id="service.tpl.html"> <script type="text/ng-template" id="service.tpl.html">
<table class="table table-striped"> <table class = "table table-striped">
<thead> <thead>
<tr> <tr>
<th>Service</th> <th> Service </th>
<th>Username</th> <th>Username</th >
<th>Password</th> <th> Password </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="(key, value) in service_credentials"> <tr ng-repeat="(key, value) in service_credentials">
<td>{{key}}</td> <td>{{key}}</td>
<td>{{value.username}}</td> <td> {{value.username}}</td>
<td>{{value.password}}</td> <td>{{value.password}}</td >
</tr> </tr>
</tbody> </tbody >
</table> </table>
</script> </script>
<script type="text/ng-template" id="console.tpl.html"> <script type="text/ng-template" id="console.tpl.html">
<table class="table table-striped"> <table class = "table table-striped" >
<thead> <thead>
<tr> <tr>
<th>Service</th> <th> Service </th>
<th>Username</th> <th>Username</th >
<th>Password</th> <th> Password </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -180,16 +180,16 @@
<td>{{value.username}}</td> <td>{{value.username}}</td>
<td>{{value.password}}</td> <td>{{value.password}}</td>
</tr> </tr>
</tbody> </tbody >
</table> </table>
</script> </script>
<script type="text/ng-template" id="server.tpl.html"> <script type="text/ng-template" id="server.tpl.html">
<h6> <h6>
<strong>Username:</strong> <strong> Username: </strong>
{{server_credentials.username}} {{server_credentials.username}}
</h6> </h6>
<h6> <h6>
<strong>Password:</strong> <strong> Password: </strong>
{{server_credentials.password}} {{server_credentials.password}}
</h6> </h6>
</script> </script>

2
v2/src/app/wizard/role_assignment.tpl.html
View File

@ -85,7 +85,7 @@
</th> </th>
<th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{'sort-asc': tableParams.isSortBy(column.field, 'asc'), <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')"> 'sort-desc': tableParams.isSortBy(column.field, 'desc')}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
{{column.title}} <div>{{column.title}}</div>
</th> </th>
<th>Roles</th> <th>Roles</th>
</tr> </tr>

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

@ -47,7 +47,7 @@
</th> </th>
<th ng-repeat="column in server_columns" ng-show="column.visible" class="sortable" ng-class="{'sort-asc': tableParams.isSortBy(column.field, 'asc'), <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')"> 'sort-desc': tableParams.isSortBy(column.field, 'desc')}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
{{column.title}} <div>{{column.title}}</div>
</th> </th>
</tr> </tr>
</thead> </thead>

10
v2/src/app/wizard/wizard.tpl.html
View File

@ -30,10 +30,12 @@
</div> </div>
<div class="wizard-actions"> <div class="wizard-actions">
<button ng-click="stepBackward()" ng-disabled="currentStep==1" class="btn btn-prev"> <div class="inline" ng-class="{'first-prev' : currentStep == 1}">
<i class="ace-icon fa fa-arrow-left"></i> <button ng-click="stepBackward()" ng-disabled="currentStep==1" class="btn btn-grey btn-prev-spacing" ng-class="{'btn-light' : currentStep == 1}">
Prev <i class="ace-icon fa fa-arrow-left"></i>
</button> Prev
</button>
</div>
<button ng-click="stepForward()" class="btn btn-success btn-next"> <button ng-click="stepForward()" class="btn btn-success btn-next">
<span ng-if="currentStep<steps.length"> <span ng-if="currentStep<steps.length">
Next Next