compass-web/v2.5/src/app/partials/cluster-overview.tpl.html

192 lines
10 KiB
HTML
Executable File

<div class="page-header">
<h1>
{{clusterInfo.name}}
<small>
<span class="badge" ng-class="{'badge-info':clusterProgress.state==='INITIALIZED',
'badge-warning':clusterProgress.state==='INSTALLING',
'badge-danger':clusterProgress.state==='ERROR',
'badge-success':clusterProgress.state==='SUCCESSFUL'}">
{{clusterProgress.state}}
</span>
</small>
</h1>
<!--<i class="ace-icon fa fa-angle-double-right"></i>&nbsp;
<a href="">OpenStack Dashboard Link</a>-->
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="pull-right align-right">
<div class="cluster-progress">
<table>
<tr>
<td class="pull-right">
Total Hosts
</td>
<td class="padding-left-15">
<span class="badge badge-info">{{clusterProgress.status.total_hosts}}</span>
</td>
</tr>
<tr>
<td class="pull-right">
Installing Hosts
</td>
<td class="padding-left-15">
<span class="badge badge-warning">{{clusterProgress.status.installing_hosts}}</span>
</td>
</tr>
<tr>
<td class="pull-right">
Completed Hosts
</td>
<td class="padding-left-15">
<span class="badge badge-success">{{clusterProgress.status.completed_hosts}}</span>
</td>
</tr>
<tr>
<td class="pull-right">
Failed Hosts
</td>
<td class="padding-left-15">
<span class="badge badge-danger">{{clusterProgress.status.failed_hosts}}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div>
<div class="pull-left">
<span class="input-icon">
<input type="text" placeholder="Search" ng-model="search">
<i class="ace-icon fa fa-search blue"></i>
</span>
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Column Show / Hide
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
</button>
<ul class="dropdown-menu" role="menu" dropdown>
<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>
<div class="pull-right">
<button type="button" class="btn btn-info" ng-click="startChecking()" ng-disabled="clusterProgress.state == 'INSTALLING'" style="margin-right: 5px;">
Report
</button>
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info dropdown-toggle" ng-disabled="clusterProgress.state == 'INSTALLING'" dropdown-toggle>
Actions
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
</button>
<ul class="dropdown-menu dropdown-info dropdown-menu-right" role="menu" dropdown>
<li>
<a class="action">
Add Hosts
</a>
</li>
<li class="divider"></li>
<li>
<a class="action" ng-click="assignRole(role)">
IPMI Power on
</a>
</li>
<li>
<a class="action" ng-click="assignRole(role)">
IPMI Power off
</a>
</li>
<li>
<a class="action" ng-click="assignRole(role)">
IPMI Reset
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="space-6"></div>
<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>
<th>Progress</th>
<th class="align-right"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="host in $data | filter:search" ng-class="{'hightlight': host.selected}">
<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="clusters">
<span ng-repeat="cluster in host.clusters">
{{cluster.name}}&nbsp;
</span>
</span>
<span ng-switch-when="roles">
<span ng-repeat="role in host['roles']" class="badge">
{{role.display_name}}&nbsp;
</span>
</span>
<span ng-switch-default>
{{host[column.field]}}
</span>
</span>
</td>
<td>
<hostprogressbar hostid="host.host_id" clusterid="clusterId" clusterstate="clusterProgress.state" progressdata="">
</hostprogressbar>
</td>
<td class="align-right">
<button class="btn border-radius-4 btn-xs" ng-click="openDeleteHostModal($index)" ng-disabled="clusterProgress.state == 'INSTALLING'">
<i class="ace-icon fa fa-trash-o bigger-120"></i>
</button>
</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="deleteHostConfirm.html">
<div class="modal-header ng-scope">
<h3 class="modal-title">Create Cluster</h3>
</div>
<div class="modal-body" style="padding-top: 30px; padding-bottom: 20px;">
Are you sure to delete
<strong>{{host.hostname}}</strong>?
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
</script>
</div>
</div>
</div>
</div>
</div>