Skip to content

Commit 62b5eea

Browse files
author
Johannes Stelzer
committed
Show custom healthchecks in details
Fixes #42
1 parent e667c67 commit 62b5eea

File tree

1 file changed

+168
-167
lines changed

1 file changed

+168
-167
lines changed

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

Lines changed: 168 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,172 +1,173 @@
11
<div class="alert alert-error" ng-if="error">
2-
<b>Error:</b> {{ error }}
2+
<b>Error:</b> {{ error }}
33
</div>
44

55
<div class="container-fluid" style="margin: 0 auto; width: 960px;">
6-
<div class="span6">
7-
<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>
9-
<tbody>
10-
<tr ng-repeat="(key, value) in info" >
11-
<td>{{ key }}</td><td>{{ value }}</td>
12-
</tr>
13-
</tbody>
14-
</table>
15-
</div>
16-
17-
<div class="span6">
18-
<table class="table">
19-
<thead>
20-
<tr><th>Health Checks</th><th><small class="pull-right"><a href="{{ application.url }}/health">raw JSON</a></small></th></tr>
21-
</thead>
22-
<tbody>
23-
<tr>
24-
<td>Application</td><td><span class="status-{{health.status}}">{{ health.status }}</span></td>
25-
</tr>
26-
27-
<tr ng-if="health.db">
28-
<td>Datasources</td>
29-
<td><span class="status-{{health.db.status}}">{{ health.db.status }}</span><br>
30-
{{health.db.database}}
31-
</td>
32-
</tr>
33-
<tr ng-if="health.db.error" colspan="2" class="alert alert-error" >{{ health.db.error }}</td></tr>
34-
35-
<tr ng-repeat-start="(dbname, db) in health.db" ng-if="dbname != 'status' && dbname != 'error' && dbname != 'database' && dbname != 'hello'" >
36-
<td>{{ dbname | capitalize }} Datasource</td><td><span class="status-{{db.status}}">{{ db.status }}</span><br>
37-
{{db.database}}
38-
</td>
39-
</tr>
40-
<tr ng-repeat-end ng-if="db.error"><td colspan="2" class="alert alert-error" >{{ db.error }}</td></tr>
41-
<tr ng-if="health.diskSpace">
42-
<td>Diskspace</td><td><span class="status-{{health.diskSpace.status}}">{{ health.diskSpace.status }}</span><br>
43-
{{ health.diskSpace.free | humanBytes }} free / {{ health.diskSpace.threshold | humanBytes }} threshold
44-
</td>
45-
</tr>
46-
</tbody>
47-
</table>
48-
</div>
49-
50-
51-
<div class="span6">
52-
<table class="table">
53-
<thead><tr><th colspan="2">Memory</th></tr></thead>
54-
<tbody>
55-
<tr>
56-
<td colspan="2">
57-
<span>Total Memory ({{ metrics['mem.used'] | humanBytes:'K' }} / {{ metrics['mem'] | humanBytes:'K' }})</span>
58-
<div class="progress" style="margin-bottom: 0px;">
59-
<div class="bar" style="width:{{ memPercentage = (metrics['mem.used'] / metrics['mem'] * 100 | number:2) }}%;"
60-
ng-class="{'bar-success': memPercentage < 75, 'bar-warning': memPercentage >= 75 && memPercentage < 95, 'bar-danger': memPercentage >= 95}">
61-
{{memPercentage}}%
62-
</div>
63-
</div>
64-
</td>
65-
</tr>
66-
<tr>
67-
<td colspan="2">
68-
<span>Heap Memory ({{ metrics['heap.used'] | humanBytes:'K' }} / {{ metrics['heap.committed'] | humanBytes:'K' }})</span>
69-
<div class="progress" style="margin-bottom: 0px;">
70-
<div class="bar" style="width:{{ heapPercentage = (metrics['heap.used'] / metrics['heap.committed'] * 100 | number:2) }}%;"
71-
ng-class="{'bar-success': heapPercentage < 75, 'bar-warning': heapPercentage >= 75 && heapPercentage < 95, 'bar-danger': heapPercentage >= 95}">
72-
{{heapPercentage}}%
73-
</div>
74-
</div>
75-
</td>
76-
</tr>
77-
<tr>
78-
<td>Initial Heap (-Xms)</td>
79-
<td>{{metrics['heap.init'] | humanBytes:'K' }}</td>
80-
</tr>
81-
<tr>
82-
<td>Maximum Heap (-Xmx)</td>
83-
<td>{{metrics['heap'] | humanBytes:'K' }}</td>
84-
</tr>
85-
</table>
86-
</div>
87-
88-
<div class="span6">
89-
<table class="table">
90-
<thead><tr><th>JVM</th><th><small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
91-
<tbody>
92-
<tr ng-if="metrics['systemload.average'] != null && metrics['systemload.average'] >= 0.0">
93-
<td>Systemload</td>
94-
<td>{{metrics['systemload.average'] | number:2}} (last min. &#x2300; runq-sz)</td>
95-
</tr>
96-
<tr>
97-
<td>Uptime</td>
98-
<td>{{ metrics['uptime'] + ticks | timeInterval }} [d:h:m:s]</td>
99-
</tr>
100-
<tr>
101-
<td>Available Processors</td>
102-
<td>{{ metrics['processors'] }}</td>
103-
</tr>
104-
<tr>
105-
<td>Current loaded Classes</td>
106-
<td>{{ metrics['classes']}}</td>
107-
</tr>
108-
<tr>
109-
<td> Total loaded Classes</td>
110-
<td>{{ metrics['classes.loaded']}}</td>
111-
</tr>
112-
<tr>
113-
<td> Unloaded Classes</td>
114-
<td>{{ metrics['classes.unloaded']}}</td>
115-
</tr>
116-
<tr>
117-
<td> Threads</td>
118-
<td>{{ metrics['threads'] }} total / {{ metrics['threads.daemon'] }} daemon / {{ metrics['threads.peak'] }} peak </td>
119-
</tr>
120-
</tbody>
121-
</table>
122-
</div>
123-
124-
<div class="span6">
125-
<table class="table">
126-
<thead><tr><th colspan="2">Garbage Collection</th></tr></thead>
127-
<tr ng-repeat-start="(name, value) in gcInfos track by name">
128-
<td>{{name | capitalize}} GC Count</td>
129-
<td>{{value.count}}</td>
130-
</tr>
131-
<tr ng-repeat-end>
132-
<td>{{name | capitalize}} GC Time</td>
133-
<td>{{value.time}} ms</td>
134-
</tr>
135-
</tbody>
136-
</table>
137-
</div>
138-
139-
<div class="span6" ng-show="hasDatasources">
140-
<table class="table">
141-
<thead><tr><th colspan="2">Datasources</th></tr></thead>
142-
<tr ng-repeat = "(name, value) in datasources track by name">
143-
<td colspan="2">
144-
<span>{{name | capitalize}} Datasource Connections (active: {{ value.active }})</span>
145-
<div class="progress" style="margin-bottom: 0px;">
146-
<div class="bar" style="width:{{ value.usage * 100 | number:2 }}%;"
147-
ng-class="{'bar-success': value.usage < 0.75, 'bar-warning': value.usage >= 0.75 && value.usage < 0.95, 'bar-danger': value.usage >= 0.95}">
148-
{{value.usage * 100 | number}}%
149-
</div>
150-
</div>
151-
</td>
152-
</tr>
153-
</tbody>
154-
</table>
155-
</div>
156-
157-
<div class="span12">
158-
<div class="main-template">
159-
<div class="tab-pane active col-md-12">
160-
<ul class="nav nav-tabs">
161-
<li ui-sref-active="active"><a ui-sref="apps.details.metrics({id: application.id})">Metrics</a></li>
162-
<li ui-sref-active="active"><a ui-sref="apps.details.env({id: application.id})">Environment</a></li>
163-
<li ui-sref-active="active"><a ui-sref="apps.details.props({id: application.id})">Properties</a></li>
164-
<li ui-sref-active="active"><a ui-sref="apps.details.classpath({id: application.id})">Classpath</a></li>
165-
</ul>
166-
<div class="tab-content" style="overflow: visible;">
167-
<div ui-view></div>
168-
</div>
169-
</div>
170-
</div>
171-
</div>
6+
<div class="span6">
7+
<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>
9+
<tbody>
10+
<tr ng-repeat="(key, value) in info" >
11+
<td>{{ key }}</td><td>{{ value }}</td>
12+
</tr>
13+
</tbody>
14+
</table>
15+
</div>
16+
17+
<div class="span6">
18+
<table class="table">
19+
<thead>
20+
<tr><th>Health Checks</th><th><small class="pull-right"><a href="{{ application.url }}/health">raw JSON</a></small></th></tr>
21+
</thead>
22+
<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+
48+
</tbody>
49+
</table>
50+
</div>
51+
52+
<div class="span6">
53+
<table class="table">
54+
<thead><tr><th colspan="2">Memory</th></tr></thead>
55+
<tbody>
56+
<tr>
57+
<td colspan="2">
58+
<span>Total Memory ({{ metrics['mem.used'] | humanBytes:'K' }} / {{ metrics['mem'] | humanBytes:'K' }})</span>
59+
<div class="progress" style="margin-bottom: 0px;">
60+
<div class="bar" style="width:{{ memPercentage = (metrics['mem.used'] / metrics['mem'] * 100 | number:2) }}%;"
61+
ng-class="{'bar-success': memPercentage < 75, 'bar-warning': memPercentage >= 75 && memPercentage < 95, 'bar-danger': memPercentage >= 95}">
62+
{{memPercentage}}%
63+
</div>
64+
</div>
65+
</td>
66+
</tr>
67+
<tr>
68+
<td colspan="2">
69+
<span>Heap Memory ({{ metrics['heap.used'] | humanBytes:'K' }} / {{ metrics['heap.committed'] | humanBytes:'K' }})</span>
70+
<div class="progress" style="margin-bottom: 0px;">
71+
<div class="bar" style="width:{{ heapPercentage = (metrics['heap.used'] / metrics['heap.committed'] * 100 | number:2) }}%;"
72+
ng-class="{'bar-success': heapPercentage < 75, 'bar-warning': heapPercentage >= 75 && heapPercentage < 95, 'bar-danger': heapPercentage >= 95}">
73+
{{heapPercentage}}%
74+
</div>
75+
</div>
76+
</td>
77+
</tr>
78+
<tr>
79+
<td>Initial Heap (-Xms)</td>
80+
<td>{{metrics['heap.init'] | humanBytes:'K' }}</td>
81+
</tr>
82+
<tr>
83+
<td>Maximum Heap (-Xmx)</td>
84+
<td>{{metrics['heap'] | humanBytes:'K' }}</td>
85+
</tr>
86+
</table>
87+
</div>
88+
89+
<div class="span6">
90+
<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>
92+
<tbody>
93+
<tr ng-if="metrics['systemload.average'] != null && metrics['systemload.average'] >= 0.0">
94+
<td>Systemload</td>
95+
<td>{{metrics['systemload.average'] | number:2}} (last min. &#x2300; runq-sz)</td>
96+
</tr>
97+
<tr>
98+
<td>Uptime</td>
99+
<td>{{ metrics['uptime'] + ticks | timeInterval }} [d:h:m:s]</td>
100+
</tr>
101+
<tr>
102+
<td>Available Processors</td>
103+
<td>{{ metrics['processors'] }}</td>
104+
</tr>
105+
<tr>
106+
<td>Current loaded Classes</td>
107+
<td>{{ metrics['classes']}}</td>
108+
</tr>
109+
<tr>
110+
<td> Total loaded Classes</td>
111+
<td>{{ metrics['classes.loaded']}}</td>
112+
</tr>
113+
<tr>
114+
<td> Unloaded Classes</td>
115+
<td>{{ metrics['classes.unloaded']}}</td>
116+
</tr>
117+
<tr>
118+
<td> Threads</td>
119+
<td>{{ metrics['threads'] }} total / {{ metrics['threads.daemon'] }} daemon / {{ metrics['threads.peak'] }} peak </td>
120+
</tr>
121+
</tbody>
122+
</table>
123+
</div>
124+
125+
<div class="span6">
126+
<table class="table">
127+
<thead><tr><th colspan="2">Garbage Collection</th></tr></thead>
128+
<tr ng-repeat-start="(name, value) in gcInfos track by name">
129+
<td>{{name | capitalize}} GC Count</td>
130+
<td>{{value.count}}</td>
131+
</tr>
132+
<tr ng-repeat-end>
133+
<td>{{name | capitalize}} GC Time</td>
134+
<td>{{value.time}} ms</td>
135+
</tr>
136+
</tbody>
137+
</table>
138+
</div>
139+
140+
<div class="span6" ng-show="hasDatasources">
141+
<table class="table">
142+
<thead><tr><th colspan="2">Datasources</th></tr></thead>
143+
<tr ng-repeat = "(name, value) in datasources track by name">
144+
<td colspan="2">
145+
<span>{{name | capitalize}} Datasource Connections (active: {{ value.active }})</span>
146+
<div class="progress" style="margin-bottom: 0px;">
147+
<div class="bar" style="width:{{ value.usage * 100 | number:2 }}%;"
148+
ng-class="{'bar-success': value.usage < 0.75, 'bar-warning': value.usage >= 0.75 && value.usage < 0.95, 'bar-danger': value.usage >= 0.95}">
149+
{{value.usage * 100 | number}}%
150+
</div>
151+
</div>
152+
</td>
153+
</tr>
154+
</tbody>
155+
</table>
156+
</div>
157+
158+
<div class="span12">
159+
<div class="main-template">
160+
<div class="tab-pane active col-md-12">
161+
<ul class="nav nav-tabs">
162+
<li ui-sref-active="active"><a ui-sref="apps.details.metrics({id: application.id})">Metrics</a></li>
163+
<li ui-sref-active="active"><a ui-sref="apps.details.env({id: application.id})">Environment</a></li>
164+
<li ui-sref-active="active"><a ui-sref="apps.details.props({id: application.id})">Properties</a></li>
165+
<li ui-sref-active="active"><a ui-sref="apps.details.classpath({id: application.id})">Classpath</a></li>
166+
</ul>
167+
<div class="tab-content" style="overflow: visible;">
168+
<div ui-view></div>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
172173
</div>

0 commit comments

Comments
 (0)