Skip to content

Commit e79816d

Browse files
clockflyclockfly
committed
Merge pull request gearpump#492 from stanleyxu2005/fix_422
fix gearpump#422: added cluster page to show master and worker information
2 parents 22c3604 + 0dd6b12 commit e79816d

File tree

10 files changed

+390
-74
lines changed

10 files changed

+390
-74
lines changed

‎project/Build.scala

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,7 @@ object Build extends sbt.Build {
322322
"org.webjars" % "visjs" % "3.10.0",
323323
"org.webjars" % "json3" % "3.3.2",
324324
"org.webjars" % "es5-shim" % "2.1.0",
325+
"org.webjars" % "ng-table" % "0.3.3",
325326
"org.json4s" %% "json4s-jackson" % json4sVersion,
326327
"org.json4s" %% "json4s-native" % json4sVersion,
327328
"org.scalatest" %% "scalatest" % scalaTestVersion % "test"

‎services/dashboard/index.html

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@
3131
<title>Dashboard</title>
3232

3333
<!-- font awesome -->
34-
<link href="/webjars/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
34+
<link href="webjars/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
3535

3636
<!-- build:css css/app.min.css -->
3737
<!-- Bootstrap core CSS -->
38-
<link href="/webjars/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
38+
<link href="webjars/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
3939

4040
<!-- dashboard style -->
4141
<link href="styles/main.css" rel="stylesheet">
@@ -71,79 +71,85 @@
7171
</div>
7272
<div collapse="navCollapsed" class="collapse navbar-collapse">
7373
<ul class="nav navbar-nav">
74-
<li ng-class="navClass('app/01')">
75-
<a href="#/app/01">Master/Workers</a>
74+
<li ng-class="navClass('cluster')">
75+
<a href="#/cluster">Cluster</a>
7676
</li>
77-
<li ng-class="navClass('app/02')">
78-
<a href="#/app/02">Applications</a>
77+
<li ng-class="navClass('apps')">
78+
<a href="#/apps">Applications</a>
7979
</li>
8080
</ul>
8181
</div><!--/.nav-collapse -->
8282
</div>
8383
</div>
8484

8585
<div class="container">
86-
87-
<div ng-view />
88-
86+
<div ng-view></div>
8987
</div>
9088

9189
<!-- build:js js/jquery.min.js -->
92-
<script type="text/javascript" src="/webjars/jquery/2.0.3/jquery.js"></script>
90+
<script src="webjars/jquery/2.0.3/jquery.min.js"></script>
9391
<!-- endbuild -->
9492

9593
<!-- build:js js/jquery.ui.sortable.min.js -->
96-
<script type="text/javascript" src="/webjars/jquery-ui/1.10.3/ui/jquery.ui.core.js"></script>
97-
<script type="text/javascript" src="/webjars/jquery-ui/1.10.3/ui/jquery.ui.widget.js"></script>
98-
<script type="text/javascript" src="/webjars/jquery-ui/1.10.3/ui/jquery.ui.mouse.js"></script>
99-
<script type="text/javascript" src="/webjars/jquery-ui/1.10.3/ui/jquery.ui.sortable.js"></script>
94+
<script src="webjars/jquery-ui/1.10.3/ui/jquery.ui.core.js"></script>
95+
<script src="webjars/jquery-ui/1.10.3/ui/jquery.ui.widget.js"></script>
96+
<script src="webjars/jquery-ui/1.10.3/ui/jquery.ui.mouse.js"></script>
97+
<script src="webjars/jquery-ui/1.10.3/ui/jquery.ui.sortable.js"></script>
10098
<!-- endbuild -->
10199

102100
<!-- build:js js/angular.min.js -->
103-
<script type="text/javascript" src="/webjars/angularjs/1.2.26/angular.js"></script>
101+
<script src="webjars/angularjs/1.2.26/angular.min.js"></script>
104102
<!-- endbuild -->
105103

106104
<!-- build:js js/angular-route.min.js -->
107-
<script type="text/javascript" src="/webjars/angularjs/1.2.26/angular-route.js"></script>
105+
<script src="webjars/angularjs/1.2.26/angular-route.min.js"></script>
108106
<!-- endbuild -->
109107

110108
<!-- build:js js/app.min.js -->
111109
<!-- angular-ui-sortable -->
112-
<script type="text/javascript" src="/webjars/angular-ui-sortable/0.12.11/sortable.js"></script>
110+
<script src="webjars/angular-ui-sortable/0.12.11/sortable.min.js"></script>
113111

114112
<!-- angular-bootstrap -->
115-
<script type="text/javascript" src="/webjars/angular-ui-bootstrap/0.11.0/ui-bootstrap.js"></script>
116-
<script type="text/javascript" src="/webjars/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
113+
<script src="webjars/angular-ui-bootstrap/0.11.0/ui-bootstrap.min.js"></script>
114+
<script src="webjars/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
117115

118116
<!-- visjs -->
119-
<script type="text/javascript" src="/webjars/visjs/3.10.0/vis.min.js"></script>
117+
<script src="webjars/visjs/3.10.0/vis.min.js"></script>
118+
119+
<!-- ng-table -->
120+
<link href="webjars/ng-table/0.3.3/ng-table.min.css" rel="stylesheet">
121+
<script src="webjars/ng-table/0.3.3/ng-table.min.js"></script>
122+
123+
<!-- angular-dashboard-framework -->
124+
<script src="scripts/adf.js"></script>
125+
<script src="scripts/provider.js"></script>
126+
<script src="scripts/widget-content.js"></script>
127+
<script src="scripts/widget.js"></script>
128+
<script src="scripts/dashboard.js"></script>
120129

121-
<!-- scripts -->
122-
<script type="text/javascript" src="scripts/adf.js"></script>
123-
<script type="text/javascript" src="scripts/provider.js"></script>
124-
<script type="text/javascript" src="scripts/widget-content.js"></script>
125-
<script type="text/javascript" src="scripts/widget.js"></script>
126-
<script type="text/javascript" src="scripts/dashboard.js"></script>
130+
<!-- application scripts -->
131+
<script src="scripts/directives/tabset.js"></script>
132+
<script src="scripts/filters/readable.js"></script>
127133

128134
<!-- local storage -->
129-
<script type="text/javascript" src="/webjars/angular-local-storage/0.1.1/angular-local-storage.js"></script>
135+
<script src="webjars/angular-local-storage/0.1.1/angular-local-storage.min.js"></script>
130136

131137
<!-- app -->
132-
<script type="text/javascript" src="scripts/app.js"></script>
133-
<script type="text/javascript" src="scripts/app-01.js"></script>
134-
<script type="text/javascript" src="scripts/app-02.js"></script>
135-
<script type="text/javascript" src="scripts/structures.js"></script>
138+
<script src="scripts/app.js"></script>
139+
<script src="scripts/app-01.js"></script>
140+
<script src="scripts/app-02.js"></script>
141+
<script src="scripts/structures.js"></script>
136142

137143
<!-- applist widget -->
138-
<script type="text/javascript" src="scripts/widgets/applist/applist.js"></script>
144+
<script src="scripts/widgets/applist/applist.js"></script>
139145

140146
<!-- visdag widget -->
141-
<script type="text/javascript" src="scripts/widgets/visdag/visdag.js"></script>
147+
<script src="scripts/widgets/visdag/visdag.js"></script>
142148

143149
<!-- dag widget -->
144-
<script type="text/javascript" src="/webjars/d3js/3.5.3/d3.js"></script>
145-
<script type="text/javascript" src="scripts/widgets/dag/fisheye.js"></script>
146-
<script type="text/javascript" src="scripts/widgets/dag/dag.js"></script>
150+
<script src="webjars/d3js/3.5.3/d3.min.js"></script>
151+
<script src="scripts/widgets/dag/fisheye.js"></script>
152+
<script src="scripts/widgets/dag/dag.js"></script>
147153

148154
<!-- endbuild -->
149155
</body>

‎services/dashboard/partials/cluster.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div ng-controller="app01Ctrl">
2+
<tabs>
3+
<pane ng-repeat="pane in panes" title="{{pane.name}}"
4+
controller="{{pane.controller}}" template-url="{{pane.templateUrl}}">
5+
</pane>
6+
</tabs>
7+
</div>

‎services/dashboard/partials/master.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="row">
2+
<table class="table table-striped">
3+
<caption><h4>Master Summary</h4></caption>
4+
<tbody>
5+
<tr>
6+
<td class="summaryItemName">Leader</td>
7+
<td>{{summary.leader}}</td>
8+
</tr>
9+
<tr>
10+
<td class="summaryItemName">Cluster</td>
11+
<td><div ng-repeat="cluster in summary.clusters track by $index">{{cluster}}</div></td>
12+
</tr>
13+
<tr>
14+
<td class="summaryItemName">Status</td>
15+
<td>{{summary.status}}</td>
16+
</tr>
17+
<tr>
18+
<td class="summaryItemName">Alive For</td>
19+
<td>{{summary.aliveFor|readableTime}}</td>
20+
</tr>
21+
<tr>
22+
<td class="summaryItemName">Logfile Location</td>
23+
<td>{{summary.logFile}}</td>
24+
</tr>
25+
<tr>
26+
<td class="summaryItemName">JAR Store Location</td>
27+
<td>{{summary.jarStore}}</td>
28+
</tr>
29+
</tbody>
30+
</table>
31+
</div>

‎services/dashboard/partials/workers.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="row">
2+
<table ng-table="tableParams" class="table table-striped-inverse">
3+
<caption><h4>Registered Workers</h4></caption>
4+
<tr ng-repeat="worker in $data track by $index">
5+
<td header-class="ng-table-header-cell" data-title="'ID'">{{worker.id}}</td>
6+
<td header-class="ng-table-header-cell" data-title="'Actor Path'">{{worker.actorPath}}</td>
7+
<td header-class="ng-table-header-cell" data-title="'State'">
8+
<span ng-class="worker.state=='active'?'label-success':'label-warning'" class="label">{{worker.state}}</span></td>
9+
<td header-class="ng-table-header-cell" data-title="'Slots'">
10+
<p class="text-center" style="padding:0;margin:0;font-size:11px;line-height:100%">
11+
{{worker.slotsTaken}} / {{worker.slotsTotal}}</p>
12+
<div class="progress" style="padding:0;margin:3px 0;height:3px">
13+
<div class="progress-bar" role="progressbar" aria-valuenow="{{worker.slotUsage}}" aria-valuemin="0"
14+
aria-valuemax="100" style="min-width:2em;width:{{worker.slotUsage}}%">
15+
</div>
16+
</div>
17+
</td>
18+
<td header-class="ng-table-header-cell" data-title="'Alive For'">
19+
{{worker.aliveFor|readableTime}}
20+
</td>
21+
<td header-class="ng-table-header-cell" data-title="'Log File'">{{worker.logFile}}</td>
22+
</tr>
23+
</table>
24+
</div>

‎services/dashboard/scripts/app-01.js

Lines changed: 61 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,33 +21,65 @@
2121
*/
2222
'use strict';
2323

24-
angular.module('app-01', ['adf', 'LocalStorageModule'])
25-
.controller('app01Ctrl', function($scope, localStorageService){
26-
27-
var name = 'app-01';
28-
var model = null;//localStorageService.get(name);
29-
if (!model) {
30-
model = {
31-
title: "Master/Workers",
32-
structure: "4-8",
33-
rows: [{
34-
columns: [{
35-
styleClass: "col-md-4",
36-
widgets: [
37-
]
38-
}, {
39-
styleClass: "col-md-8",
40-
widgets: [
41-
]
42-
}]
43-
}]
44-
};
45-
}
46-
$scope.name = name;
47-
$scope.model = model;
48-
$scope.collapsible = false;
49-
50-
$scope.$on('adfDashboardChanged', function (event, name, model) {
51-
localStorageService.set(name, model);
24+
angular.module('app-01', ['ngTable', 'readable'])
25+
.controller('app01Ctrl', function ($scope) {
26+
$scope.panes = [
27+
{name: "Master", templateUrl: "partials/master.html", controller: "masterControl"},
28+
{name: "Workers", templateUrl: "partials/workers.html", controller: "workerControl"},
29+
];
30+
})
31+
.controller('masterControl', function ($scope, $http) {
32+
var url = location.origin + '/master';
33+
$scope.summary = {};
34+
$http.get(url).then(function (response) {
35+
var description = response.data.masterDescripton;
36+
$scope.summary = {
37+
aliveFor: description.aliveFor,
38+
logFile: description.logFile,
39+
jarStore: description.jarStore,
40+
status: description.masterStatus,
41+
leader: description.leader.join(':'),
42+
clusters: description.cluster.map(function(item) {
43+
return item.join(':');
44+
})
45+
};
46+
}, function (err) {
47+
throw err;
48+
});
49+
})
50+
.controller('workerControl', function ($scope, $http, $filter, ngTableParams) {
51+
$scope.tableParams = new ngTableParams({page: 1, count: 10}, {
52+
counts: [10, 25, 50],
53+
total: 0,
54+
getData: function ($defer, params) {
55+
var url = location.origin + '/workers';
56+
var workers = [];
57+
$http.get(url).then(function (response) {
58+
workers = response.data.map(function(worker) {
59+
var slotsTaken = worker.executors.reduce(function(a, b) {
60+
return a.slots + b.slots;
61+
}, 0);
62+
return {
63+
id: worker.workerId,
64+
state: worker.state,
65+
actorPath: worker.actorPath,
66+
aliveFor: worker.aliveFor,
67+
logFile: worker.logFile,
68+
executors: worker.executors,
69+
slotsTotal: worker.totalSlots,
70+
slotsTaken: slotsTaken,
71+
slotUsage: worker.totalSlots > 0 ?
72+
Math.floor(100 * slotsTaken / worker.totalSlots) : 0
73+
}
74+
});
75+
var orderedData = params.sorting() ?
76+
$filter('orderBy')(workers, $scope.tableParams.orderBy()) : workers;
77+
$defer.resolve(
78+
orderedData.slice((params.page() - 1) * params.count(),
79+
params.page() * params.count()));
80+
}, function (err) {
81+
throw err;
82+
});
83+
}
84+
});
5285
});
53-
});

‎services/dashboard/scripts/app.js

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,27 @@
2424
'use strict';
2525

2626
angular.module('app', [
27-
'adf',
28-
'app.widgets.visdag',
29-
'app.widgets.applist',
27+
// Angular modules
3028
'LocalStorageModule',
31-
'structures',
29+
'ngRoute',
30+
// Angular-dashboard-framework (including extensions)
31+
'adf',
32+
'structures',
33+
'app.widgets.visdag',
34+
'app.widgets.applist',
35+
// Application extensions
36+
'app.tabset',
37+
// Application controllers
3238
'app-01',
33-
'app-02',
34-
'ngRoute'
39+
'app-02'
3540
])
3641
.config(function($routeProvider, localStorageServiceProvider){
3742
localStorageServiceProvider.setPrefix('adf');
3843

39-
$routeProvider.when('/app/01', {
40-
templateUrl: 'partials/app.html',
44+
$routeProvider.when('/cluster', {
45+
templateUrl: 'partials/cluster.html',
4146
controller: 'app01Ctrl'
42-
}).when('/app/02', {
47+
}).when('/apps', {
4348
templateUrl: 'partials/app.html',
4449
controller: 'app02Ctrl'
4550
});

0 commit comments

Comments
 (0)