Skip to content

Commit bef593c

Browse files
author
Johannes Stelzer
committed
small ui-changes:
* make sure non-UP applications are shown at the top of the list (closes #55) * refinements for health-section * remove-button for all apps * fixed headers in details view
1 parent 6236d2d commit bef593c

File tree

6 files changed

+103
-34
lines changed

6 files changed

+103
-34
lines changed

‎spring-boot-admin-server-ui/app/css/main.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,28 @@ span.refresh {
226226
overflow: hidden;
227227
}
228228

229+
/** health status**/
230+
dl.health-status > dt {
231+
border-bottom: 1px solid #ddd;
232+
background-color: #f9f9f9;
233+
line-height: 20px;
234+
padding: 8px;
235+
}
236+
237+
dl.health-status {
238+
margin-top: 0px;
239+
}
240+
241+
dl.health-status dl.health-status {
242+
margin-top: 20px !important;
243+
}
244+
245+
dl.health-status td {
246+
border-top: none;
247+
border-bottom: 1px solid #ddd;
248+
}
249+
250+
229251
/** Metric Bars **/
230252
.bar-offset {
231253
float: left;

‎spring-boot-admin-server-ui/app/js/controller/apps/detailsCtrl.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@ module.exports = function ($scope, $interval, application, MetricsHelper) {
3939
$scope.health = health;
4040
});
4141

42+
$scope.isHealthDetail = function (key, value) {
43+
return key !== 'status' && value !== null && (Array.isArray(value) || typeof value !== 'object');
44+
};
45+
46+
$scope.isChildHealth = function (key, health) {
47+
return health !== null && !Array.isArray(health) && typeof health === 'object';
48+
};
49+
4250
application.getMetrics()
4351
.success(function (metrics) {
4452
$scope.metrics = metrics;

‎spring-boot-admin-server-ui/app/js/filter/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ var angular = require('angular');
44
var springBootAdmin = angular.module('springBootAdmin');
55

66
springBootAdmin.filter('timeInterval', require('./timeInterval'));
7+
78
springBootAdmin.filter('classNameLoggerOnly', require('./classNameLoggerOnly'));
89
springBootAdmin.filter('capitalize', require('./capitalize'));
910
springBootAdmin.filter('humanBytes', require('./humanBytes'));
11+
springBootAdmin.filter('joinArray', require('./joinArray'));

‎spring-boot-admin-server-ui/app/js/filter/joinArray.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Copyright 2014 the original author or authors.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
'use strict';
17+
18+
module.exports = function () {
19+
return function (input, separator) {
20+
if (! Array.isArray(input) ) {
21+
return input;
22+
} else {
23+
return input.join(separator);
24+
}
25+
};
26+
};

‎spring-boot-admin-server-ui/app/views/apps/details.html‎

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="container-fluid" style="margin: 0 auto; width: 960px;">
66
<div class="span6">
77
<table class="table">
8-
<thead><tr><th>Application</th><th><small class="pull-right"><a href="{{ application.url }}/info">raw JSON</a></small></th></tr></thead>
8+
<thead><tr><th colspan="2">Application <small class="pull-right"><a href="{{ application.url }}/info">raw JSON</a></small></th></tr></thead>
99
<tbody>
1010
<tr ng-repeat="(key, value) in info" >
1111
<td>{{ key }}</td><td>{{ value }}</td>
@@ -17,34 +17,10 @@
1717
<div class="span6">
1818
<table class="table">
1919
<thead>
20-
<tr><th>Health Checks</th><th><small class="pull-right"><a href="{{ application.url }}/health">raw JSON</a></small></th></tr>
20+
<tr><th colspan="2">Health Checks <small class="pull-right"><a href="{{ application.url }}/health">raw JSON</a></small></th></tr>
2121
</thead>
2222
<tbody>
23-
<tr>
24-
<td>Application</td><td><span class="status-{{health.status}}">{{ health.status }}</span></td>
25-
</tr>
26-
27-
<tr ng-repeat-start="(indicator, details) in health" ng-if="indicator != 'status'">
28-
<td ng-if="indicator != 'db'">{{indicator | capitalize}}</td>
29-
<td ng-if="indicator == 'db'">Datasource</td>
30-
31-
<td><span class="status-{{details.status}}">{{ details.status }}</span><br>
32-
<span ng-repeat="(key, value) in details" ng-if="indicator != 'db' && indicator != 'diskSpace' && key != 'status' && key != 'error'">{{ key | capitalize }}: {{value}}<br></span>
33-
<span ng-if="indicator == 'db' && details.database">{{ details.database }}</span>
34-
<span ng-if="indicator == 'diskSpace'">{{ health.diskSpace.free | humanBytes }} free / {{ health.diskSpace.threshold | humanBytes }} threshold</span>
35-
</td>
36-
</tr>
37-
38-
<tr ng-repeat-start="(dbname, dbhealth) in details" ng-if="indicator == 'db' && dbname != 'status' && dbname != 'error' && dbname != 'database' && dbname != 'hello'" >
39-
<td>- {{ dbname | capitalize }}</td>
40-
<td><span class="status-{{dbhealth.status}}">{{ dbhealth.status }}</span><br>
41-
{{dbhealth.database}}
42-
</td>
43-
</tr>
44-
<tr ng-repeat-end ng-if="dbhealth.error"><td colspan="2" class="alert alert-error" >{{ dbhealth.error }}</td></tr>
45-
46-
<tr ng-repeat-end ng-if="details.error"><td colspan="2" class="alert alert-error" >{{ details.error }}</td></tr>
47-
23+
<tr><td ng-init="name= 'Application'" ng-include="'health.html'"></td></tr>
4824
</tbody>
4925
</table>
5026
</div>
@@ -88,7 +64,7 @@
8864

8965
<div class="span6">
9066
<table class="table">
91-
<thead><tr><th>JVM</th><th><small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
67+
<thead><tr><th colspan="2">JVM <small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
9268
<tbody>
9369
<tr ng-if="metrics['systemload.average'] != null && metrics['systemload.average'] >= 0.0">
9470
<td>Systemload</td>
@@ -171,3 +147,38 @@
171147
</div>
172148
</div>
173149
</div>
150+
151+
<script type="text/ng-template" id="health.html">
152+
<dl class="health-status">
153+
<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>
154+
155+
<dd>
156+
<table style="width:100%;">
157+
<tr ng-repeat="(key, value) in health" ng-if="isHealthDetail(key, value)" ng-class="{'error': key == 'error'}">
158+
<td>{{key | capitalize}}</td><td>{{value | joinArray:', '}}</td>
159+
</tr>
160+
</table>
161+
</dd>
162+
163+
<dd ng-repeat="(name, health) in health" ng-if="isChildHealth(name, health)" >
164+
<ng-include src="'health.html'" ng-if="name != 'diskSpace'"></ng-include>
165+
<ng-include src="'health-diskSpace.html'" ng-if="name == 'diskSpace'"></ng-include>
166+
</dd>
167+
</dl>
168+
</script>
169+
170+
<script type="text/ng-template" id="health-diskSpace.html">
171+
<dl class="health-status">
172+
<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>
173+
<dd>
174+
<table style="width:100%;">
175+
<tr>
176+
<td>Free</td><td>{{ health.free | humanBytes }}</td>
177+
</tr>
178+
<tr>
179+
<td>Threshold</td><td>{{ health.threshold | humanBytes }}</td>
180+
</tr>
181+
</table>
182+
</dd>
183+
</dl>
184+
</script>

‎spring-boot-admin-server-ui/app/views/overview.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ <h2 >Spring-Boot applications<br>
1010
</th>
1111
<th><span class="sortable" ng-class="orderByCssClass('version')" ng-click="orderBy('version')">Version</span></th>
1212
<th>Info</th>
13-
<th colspan="2"><span class="sortable" ng-class="orderByCssClass('status')" ng-click="orderBy('status')">Status</span></th>
13+
<th colspan="2">Status</th>
1414
</tr>
1515
</thead>
1616
<tbody>
17-
<tr ng-repeat="application in applications|orderBy:order.column:order.descending track by application.id">
17+
<tr ng-repeat="application in applications|orderBy:order.column:order.descending|orderBy:'status':false track by application.id">
1818
<td>{{ application.name }}<br/><span class="muted">{{ application.url }}</span></td>
1919
<td>{{ application.version }}</td>
2020
<td><span ng-repeat="(name, value) in application.info track by name">{{name}}: {{value}}<br></span></td>
2121
<td><span class="status-{{application.status}}">{{ application.status }}</span>
2222
<span ng-show="application.refreshing" class="refresh"></span></td>
23-
<td>
24-
<div class="btn-group pull-right" ng-hide="application.status == null || application.status == 'OFFLINE'">
23+
<td style="text-align: right;">
24+
<div class="btn-group" ng-hide="application.status == null || application.status == 'OFFLINE'">
2525
<a ng-disabled="!application.providesLogfile" target="_self" class="btn btn-success" ng-href="{{application.providesLogfile ? application.url + '/logfile' :''}}"><i class="icon-file icon-white"></i>Log</a>
2626
<a ui-sref="apps.details.metrics({id: application.id})" class="btn btn-success">Details</a>
2727
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown">
@@ -34,8 +34,8 @@ <h2 >Spring-Boot applications<br>
3434
<li><a ui-sref="apps.trace({id: application.id})" >Trace</a></li>
3535
</ul>
3636
</div>
37-
<div class="btn-group pull-right" ng-show="application.status == 'UNKNOWN' || application.status == 'OFFLINE'">
38-
<a class="btn btn-danger" ng-click="remove(application)"><i class="icon-remove icon-white"></i>Remove</a>
37+
<div class="btn-group" title="remove">
38+
<a class="btn btn-danger" ng-click="remove(application)"><i class="icon-remove icon-white"></i></a>
3939
</div>
4040
</td>
4141
</tr>

0 commit comments

Comments
 (0)