x/compass-web
Code Issues Proposed changes

add report function

Browse Source 
Change-Id: I1060a7a30aeeaca034e8f793a0461b6ea7ac1c71
This commit is contained in:
CongLu 2015-03-16 11:20:49 -07:00
parent e6955cea89
commit 989b1f2ba5
16 changed files with 368 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
v2.5/src/app/app.coffee
View File

@ -8,6 +8,7 @@ define(['angular'
'app/factory/all'
'app/directives/all'
# 'app/server/appDev'
'app/filters/all'
],
(ng)->
'use strict'
@ -20,6 +21,7 @@ define(['angular'
'compass.factories'
'compass.directives'
# 'compassAppDev'
'compass.filters'
]
.config ['$stateProvider','$urlRouterProvider', '$httpProvider', ($stateProvider, $urlRouterProvider, $httpProvider) ->
$stateProvider
@ -122,6 +124,11 @@ define(['angular'
url: '/roles'
templateUrl: 'src/app/partials/cluster-roles.tpl.html'
requireAuthenticated: true
.state 'cluster.report',
url: '/report',
controller: "clusterReportCtrl",
templateUrl: 'src/app/partials/cluster-report.tpl.html',
requireAuthenticated: true
.state 'serverList',
url: '/serverlist'
controller: 'serverCtrl'

41
v2.5/src/app/controllers/clusterController.coffee
View File

@ -76,6 +76,14 @@ define(['./baseController'], ()->
clusterService.clusterProgressInit($scope, clusterhostsData, $stateParams)
clusterService.displayDataInTable($scope, $scope.hosts)
$scope.clusterId = $stateParams.id
request =
"check_health": null
$scope.startChecking = ->
clusterService.startHealthCheck($scope.clusterId, request, $scope)
$scope.selectAllServers = (flag) ->
if flag
sv.selected = true for sv in $scope.hosts
@ -89,6 +97,35 @@ define(['./baseController'], ()->
# clusterService.getClusterConfig(clusterId).success (data) ->
# console.log(data)
]
.controller 'clusterReportCtrl', ['$scope', '$state', 'clusterService', '$stateParams', '$timeout', '$modal',
($scope, $state, clusterService, $stateParams, $timeout, $modal) ->
clusterService.getReports($scope, $stateParams.id)
$scope.openModal = (key, reportname) ->
# console.log(key)
# console.log(reportname)
# console.log($scope.details[reportname][key])
modalInstance = $modal.open(
templateUrl: 'src/app/partials/ErrorInfo.html'
controller: 'reportErrorCtrl'
resolve:
detail: ->
return $scope.details[reportname][key]
)
]
.controller 'navCtrl', ['$scope', 'clusterService', '$stateParams'
($scope, clusterService, $stateParams)->
clusterService.getHealthReportsCheck($scope, $stateParams.id)
]
# .filter 'FilterByCategory', ->
# return (items, categoryName) ->
# filtered = []
# for i in items
# item = i
# if item.category == categoryName
# filtered.push(item)
# return filtered
# .filter 'nl2br', ['$sce', ($sce)->
# return (text)->
# return text = if text then $sce.trustAsHtml(text.replace(/\n/g, '<br/>')) else ''
# ]
)

6
v2.5/src/app/controllers/modalControllers.coffee
View File

@ -64,4 +64,10 @@ define(['./baseController'], ()->
$scope.cancel = ->
$modalInstance.dismiss('cancel')
]
.controller 'reportErrorCtrl', ['$scope', '$modalInstance', 'detail', ($scope, $modalInstance, detail)->
$scope.detail = detail
$scope.cancel = ->
$modalInstance.dismiss('cancel')
console.log($scope.detail)
]
);

15
v2.5/src/app/controllers/wizardController.coffee
View File

@ -144,19 +144,6 @@ define(['./baseController'], ()->
wizardService.displayDataInTable($scope, $scope.servers)
]
.directive 'ngKeypress', [->
return (scope, element, attrs) ->
element.bind "keydown keypress", (event)->
if event.which is 9
current = attrs.position
result = current.split('_')
next = result[0]+"_"+(parseInt(result[1])+1)
if $("input[data-position=" + next + "]").length
$("input[data-position=" + next + "]").focus()
else
$(".btn-next").focus()
event.preventDefault();
]
.controller 'partitionCtrl', ['$scope', 'wizardService',
($scope, wizardService) ->
@ -300,7 +287,7 @@ define(['./baseController'], ()->
element.fadeIn(500, done)
return ->
element.stop()
leave: (element,done) ->
leave: (element, done) ->
element.fadeOut(500,done)
return ->
element.stop()

3
v2.5/src/app/directives/all.coffee
View File

@ -4,4 +4,5 @@ define([
'./pieChartDirective'
'./enterDirective'
'./hostprogressbarDirective'
], ()-> )
'./wizardDirective'
], ()-> )

1
v2.5/src/app/directives/clusterNavDirective.coffee
View File

@ -7,6 +7,7 @@ define(['./baseDirective'], ->
return {
restrict: 'EAC'
templateUrl: "src/app/partials/cluster-nav.tpl.html"
controller: 'navCtrl'
# link: (scope, element, attrs) ->
# console.log("inside")
# $timeout( ->

17
v2.5/src/app/directives/wizardDirective.coffee Normal file
View File

@ -0,0 +1,17 @@
define ['./baseDirective'], ->
'use strict';
angular.module('compass.directives')
.directive 'ngKeypress', [->
return (scope, element, attrs) ->
element.bind "keydown keypress", (event)->
if event.which is 9
current = attrs.position
result = current.split('_')
next = result[0]+"_"+(parseInt(result[1])+1)
if $("input[data-position=" + next + "]").length
$("input[data-position=" + next + "]").focus()
else
$(".btn-next").focus()
event.preventDefault();
]

3
v2.5/src/app/filters/all.coffee Normal file
View File

@ -0,0 +1,3 @@
define([
'./healthReportFilter'
])

5
v2.5/src/app/filters/baseFilter.coffee Normal file
View File

@ -0,0 +1,5 @@
define(['angular'
], (ng)->
'use strict';
ng.module('compass.filters', []);
);

17
v2.5/src/app/filters/healthReportFilter.coffee Normal file
View File

@ -0,0 +1,17 @@
define(['./baseFilter'], ->
'use strict';
angular.module('compass.filters')
.filter 'FilterByCategory', ->
return (items, categoryName) ->
filtered = []
for i in items
item = i
if item.category == categoryName
filtered.push(item)
return filtered
.filter 'nl2br', ['$sce', ($sce)->
return (text)->
return text = if text then $sce.trustAsHtml(text.replace(/\n/g, '<br/>')) else ''
]
);

31
v2.5/src/app/partials/ErrorInfo.html Normal file
View File

@ -0,0 +1,31 @@
<div class="modal-header ng-scope" style="background:#B74635">
<button type="button" class="close" ng-click="cancel()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h3 class="modal-title">Error Details</h3>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>
<strong>Exception Type</strong>
</td>
<td>{{detail.duration.summary.errors.details[0][0]}}</td>
</tr>
<tr>
<td>
<strong>Exception Message</strong>
</td>
<td>{{detail.duration.summary.errors.details[0][1]}}</td>
</tr>
<tr>
<td></td>
<td>
<p style="font-size:12px" ng-bind-html="detail.duration.summary.errors.details[0][2] | nl2br"></p>
</td>
</tr>
</table>
</div>
<div class="modal-footer" style="background:#F2DEDE">
<button class="btn btn-default" ng-click="cancel()">Close</button>
</div>

24
v2.5/src/app/partials/cluster-nav.tpl.html
View File

@ -53,26 +53,22 @@
<ul class="submenu" ng-show="isConfigNavOpen" style="display: block">
<li ng-class="{active:state.includes('cluster.config.security')}">
<a ui-sref="cluster.config.security">
<i class="menu-icon fa fa-caret-right"></i>
Security
<i class="menu-icon fa fa-caret-right"></i> Security
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.network')}">
<a ui-sref="cluster.config.network">
<i class="menu-icon fa fa-caret-right"></i>
Network
<i class="menu-icon fa fa-caret-right"></i> Network
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.partition')}">
<a ui-sref="cluster.config.partition">
<i class="menu-icon fa fa-caret-right"></i>
Partition
<i class="menu-icon fa fa-caret-right"></i> Partition
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.roles')}">
<a ui-sref="cluster.config.roles">
<i class="menu-icon fa fa-caret-right"></i>
Roles
<i class="menu-icon fa fa-caret-right"></i> Roles
</a>
</li>
</ul>
@ -83,9 +79,19 @@
<span class="menu-text">Log</span>
</a>
</li>
<li ng-class="{active:state.includes('cluster.report')}">
<a ng-if="activeReport" ui-sref="cluster.report">
<i class="menu-icon glyphicon glyphicon-list-alt glyphicon-list-alt"></i>
<span class="menu-text">Report</span>
</a>
<a ng-if="!activeReport">
<i class="menu-icon glyphicon glyphicon-list-alt glyphicon-list-alt"></i>
<span class="menu-text">Report</span>
</a>
</li>
</ul>
<div class="sidebar-toggle sidebar-collapse" ng-click="sidebarCollapse = !sidebarCollapse">
<i class="ace-icon fa fa-angle-double-left" ng-class="{'fa-angle-double-right': sidebarCollapse}"></i>
</div>
</div>

20
v2.5/src/app/partials/cluster-overview.tpl.html
View File

@ -73,14 +73,16 @@
<a class="action">
<span ng-class="{'opacity-zero': !column.visible}">
<i class="ace-icon fa fa-check blue"></i>
</span>
{{column.title}}
</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
@ -146,13 +148,13 @@
<span ng-repeat="cluster in host.clusters">
{{cluster.name}}&nbsp;
</span>
</span>
<span ng-switch-when="roles">
</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>
</span>
<span ng-switch-default>
{{host[column.field]}}
</span>
</span>
@ -171,12 +173,12 @@
</table>
<script type="text/ng-template" id="deleteHostConfirm.html">
<div class="modal-header ng-scope">
<h3 class="modal-title">Create Cluster</h3>
<h3 class="modal-title">Create Cluster</h3>
</div>
<div class="modal-body" style="padding-top: 30px; padding-bottom: 20px;" >
<div class="modal-body" style="padding-top: 30px; padding-bottom: 20px;">
Are you sure to delete
<strong>{{host.hostname}}</strong>?
</div>
</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>

110
v2.5/src/app/partials/cluster-report.tpl.html Normal file
View File

@ -0,0 +1,110 @@
<div ng-if="!showData && !isTimeout" class="centerLoading">
<i class="ace-icon fa fa-spinner fa-spin bigger-300 orange"></i>
<span>loading...</span>
</div>
<div ng-if="isTimeout" class="centerLoading">
<i class="ce-icon fa fa-times bigger-300 red"></i>
<span>Timeout Error</span>
</div>
<div ng-if="showData && !isTimeout" class="widget-box transparent" style="border-radius: 7px;" ng-repeat="categoryName in categories">
<div class="widget-header">
<h4 class="widget-title">{{categoryName}}</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<span ng-if="showData && !isTimeout">
<div class="panel panel-default" ng-repeat="report in reports | FilterByCategory:categoryName">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<span>{{report.name}}</span>
<span ng-if="reportStates[report.name] =='success'">
<i class="ace-icon fa fa fa-check bigger-160 green"></i>
</span>
<span ng-if="reportStates[report.name] =='finished'">
<i class="ace-icon fa fa-exclamation bigger-160 yellow"></i>
</span>
<span ng-if="reportStates[report.name] =='verifying'">
<i class="ace-icon fa fa-spinner fa-spin bigger-160 orange"></i>
</span>
<span ng-if="reportStates[report.name] =='error'">
<i class="ace-icon fa fa-times bigger-160 red tooltip-error" data-toggle="tooltip" data-placement="right" title="{{errorMessage[report.name]}}"></i>
</span>
<button class="pull-right btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#{{report.name}}" aria-expanded="true" aria-controls="{{report.name}}" ng-disabled="reportStates[report.name] == 'verifying'" ng-style="{color: notFinished ? 'white' : 'grey'}">
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
</h4>
</div>
<div id="{{report.name}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<table class="table" style="font-size:13px">
<thead>
<tr class="info">
<th>Actions</th>
<th>Avg(sec)</th>
<th>Max(sec)</th>
<th>Min(sec)</th>
<th>Errors</th>
<th>Success</th>
<th>Total</th>
</tr>
</thead>
<tr ng-repeat="(key,detail) in details[report.name]">
<td>{{key}}</td>
<td>{{detail.duration.summary["avg (sec)"]}}</td>
<td>{{detail.duration.summary["max (sec)"]}}</td>
<td>{{detail.duration.summary["min (sec)"]}}</td>
<td>
<span ng-if="detail.duration.summary.errors.count == 0">{{detail.duration.summary.errors.count}}</span>
<span ng-if="detail.duration.summary.errors.count!= 0">
<button popover="{{detail.duration.summary.errors.details[0][1]}}" popover-title="{{detail.duration.summary.errors.details[0][0]}}" class="btn btn-xs btn-danger popover-hide" popover-placement="right" popover-trigger="mouseenter" ng-click="openModal(key, report.name)">
{{detail.duration.summary.errors.count}}
</button>
</span>
</td>
<td>{{detail.duration.summary["success"]}}</td>
<td>{{detail.duration.summary["total"]}}</td>
</tr>
</table>
<!--<script type="text/ng-template" id="ErrorInfo.html">
// <div class="modal-header ng-scope" style="background:#B74635">
// <button type="button" class="close" ng-click="cancel()" aria-label="Close">
// <span aria-hidden="true">&times;</span>
// </button>
// <h3 class="modal-title">Error Details</h3>
// </div>
// <div class="modal-body">
// <table class="table">
// <tr>
// <td>
// <strong>Exception Type</strong>
// </td>
// <td>{{detail.duration.summary.errors.details[0][0]}}</td>
// </tr>
// <tr>
// <td>
// <strong>Exception Message</strong>
// </td>
// <td>{{detail.duration.summary.errors.details[0][1]}}</td>
// </tr>
// <tr>
// <td></td>
// <td>
// <p style="font-size:12px" ng-bind-html="detail.duration.summary.errors.details[0][2] | nl2br"></p>
// </td>
// </tr>
// </table>
// </div>
// <div class="modal-footer" style="background:#F2DEDE">
// <button class="btn btn-default" ng-click="cancel()">Close</button>
// </div>
</script>-->
</div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>

91
v2.5/src/app/services/clusterService.coffee
View File

@ -3,6 +3,12 @@ define ['./baseService'], ->
class Cluster
constructor: (@dataService, @$state, @wizardFactory, @$timeout, @ngTableParams, @$filter, @$rootScope) ->
isEmpty = (obj)->
for prop of obj
if obj.hasOwnProperty(prop)
return false
return true
getClusters: ->
@dataService.getClusters().success((data) ->
).error((response) ->
@ -16,6 +22,91 @@ define ['./baseService'], ->
cluster.progress = data.status
cluster.state = data.state
startHealthCheck: (id, request, $scope) ->
$state = @$state
@dataService.startHealthCheck(id, request).success (data)->
$state.go("cluster.report",data)
$scope.$emit('activateReportTag', true);
getHealthReportsCheck: ($scope, id) ->
$scope.activeReport = false
@dataService.getHealthReports(id).success (reportsData) ->
if !isEmpty(reportsData)
$scope.activeReport = true
else
$scope.activeReport = false
$scope.$on('activateReportTag', (event, data)->
$scope.activeReport = true
)
# console.log($scope.activeReport)
getReports: ($scope, id)->
$scope.reports = ""
progressTimer = ""
dataService = @dataService
dtLength = -1
$timeout = @$timeout
$scope.isTimeout = false
$scope.showData = false
$scope.categories = {}
$scope.details = {}
$scope.modalId = {}
$scope.errorMessage = {}
$scope.reportStates = {}
$scope.promise = $timeout(()->
$scope.isTimeout = true
, 1200000)
getIndividualReports = ()->
finishedNumbers = 0
for individualdt in $scope.reports
if ($scope.reportStates[individualdt.name] is "verifying") or isEmpty($scope.reportStates[individualdt.name])
getIndividualDetails(individualdt)
else
finishedNumbers = finishedNumbers+1
if finishedNumbers!=$scope.reports.length
progressTimer = $timeout(getIndividualReports, 3000)
else
$timeout.cancel(progressTimer)
getIndividualDetails = (individualdt) ->
(getIndi = () ->
dataService.getIndividualReports(individualdt.cluster_id, individualdt.name).success (indiDetail)->
if !isEmpty(indiDetail.report)
$scope.details[individualdt.name] = indiDetail.report.results.actions
for i in indiDetail.report.results.actions
str = i + individualdt.name
$scope.modalId[i + individualdt.name] = str.replace(".", "-")
$scope.createModalId = (action, name) ->
return $scope.modalId[action + name]
$scope.reportStates[individualdt.name] = indiDetail.state
else
$scope.reportStates[individualdt.name] = indiDetail.state
$scope.showDetails = false
$timeout(getIndi, 2000)
if indiDetail.state is "error"
$scope.errorMessage[individualdt.name] = indiDetail.error_message
)()
getAllReports = () ->
if !$scope.isTimeout
dataService.getHealthReports(id).success (data) ->
$scope.$emit('activateReportTag', true)
if !isEmpty(data)
if data.length != dtLength
dtLength = data.length
$timeout(getAllReports, 3000)
else
$scope.reports = data
$scope.showData = true
$timeout.cancel($scope.promise)
for reportdt in $scope.reports
$scope.categories[reportdt.category] = reportdt.category
getIndividualReports()
else
$timeout(getAllReports, 2000)
$scope.showData = false
getAllReports()
goToCluster: (id, status)->
if status=="UNINITIALIZED" then @goToWizardByClusterId(id) else @goToClusterById(id)

12
v2.5/src/app/services/dataService.coffee
View File

@ -104,5 +104,17 @@ define(['./baseService'], () ->
getUserLog: ->
return @$http.get(@settings.apiUrlBase + '/users/logs')
getHealthReports: (id) ->
return @$http.get(@settings.apiUrlBase + '/clusters/' + id + '/healthreports')
getIndividualReports: (id, name) ->
return @$http.get(@settings.apiUrlBase + '/clusters/' + id + '/healthreports/' + name)
postHealthCheck: (id, checkHealth) ->
return @$http.post(@settings.apiUrlBase + '/clusters/' + id + '/action', angular.toJason(checkHealth))
startHealthCheck: (id, request) ->
return @$http.post(@settings.apiUrlBase + '/clusters/' + id + '/action',angular.toJson(request))
angular.module('compass.services').service('dataService', ['$http', 'settings', ($http,settings) -> new DS($http,settings)])
)