details.html

<div class="container content">
	<div class="alert alert-error" ng-if="error">
		<b>Error:</b> {{ error }}
	</div>
	<div class="row">
		<div class="span6">
			<table class="table">
				<thead><tr><th colspan="2">Application <small class="pull-right"><a href="api/applications/{{ application.id }}/info">raw JSON</a></small></th></tr></thead>
				<tbody>
					<tr ng-repeat="(key, value) in info" >
						<td>{{ key }}</td><td style="white-space: pre">{{ value | yaml }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="span6">
			<table class="table">
				<thead>
					<tr><th colspan="2">Health Checks <small class="pull-right"><a href="api/applications/{{ application.id }}/health">raw JSON</a></small></th></tr>
				</thead>
				<tbody>
					<tr><td ng-init="name= 'Application'" ng-include="'health.html'"></td></tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="span6">
			<table class="table">
				<thead><tr><th colspan="2">Memory</th></tr></thead>
				<tbody>
				<tr>
					<td colspan="2">
						<span>Total Memory ({{ metrics['mem.used'] | humanBytes:'K' }} / {{ metrics['mem'] | humanBytes:'K' }})</span>
						<div class="progress" style="margin-bottom: 0px;">
							<div class="bar" style="width:{{ memPercentage = (metrics['mem.used'] / metrics['mem'] * 100 | number:2) }}%;" ng-class="{'bar-success': memPercentage < 75, 'bar-warning': memPercentage >= 75 && memPercentage < 95, 'bar-danger': memPercentage >= 95}">
								{{memPercentage}}%
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<span>Heap Memory ({{ metrics['heap.used'] | humanBytes:'K' }} / {{ metrics['heap.committed'] | humanBytes:'K' }})</span>
						<div class="progress" style="margin-bottom: 0px;">
							<div class="bar" style="width:{{ heapPercentage = (metrics['heap.used'] / metrics['heap.committed'] * 100 | number:2) }}%;" ng-class="{'bar-success': heapPercentage < 75, 'bar-warning': heapPercentage >= 75 && heapPercentage < 95, 'bar-danger': heapPercentage >= 95}">
								{{heapPercentage}}%
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Initial Heap (-Xms)</td>
					<td>{{metrics['heap.init'] | humanBytes:'K' }}</td>
				</tr>
				<tr>
					<td>Maximum Heap (-Xmx)</td>
					<td>{{metrics['heap'] | humanBytes:'K' }}</td>
				</tr>
			</table>
		</div>
		<div class="span6">
			<table class="table">
				<thead><tr><th colspan="2">JVM <small class="pull-right"><a href="api/applications/{{ application.id }}/metrics">raw JSON</a></small></th></tr></thead>
				<tbody>
					<tr ng-if="metrics['systemload.average'] != null && metrics['systemload.average'] >= 0.0">
						<td>Systemload</td>
						<td>{{metrics['systemload.average'] | number:2}} (last min. &#x2300; runq-sz)</td>
					</tr>
					<tr>
						<td>Uptime</td>
						<td>{{ metrics['uptime'] + ticks | timeInterval }} [d:h:m:s]</td>
					</tr>
					<tr>
						<td>Available Processors</td>
						<td>{{ metrics['processors'] }}</td>
					</tr>
					<tr>
						<td>Current loaded Classes</td>
						<td>{{ metrics['classes']}}</td>
					</tr>
					<tr>
						<td>Total loaded Classes</td>
						<td>{{ metrics['classes.loaded']}}</td>
					</tr>
					<tr>
						<td>Unloaded Classes</td>
						<td>{{ metrics['classes.unloaded']}}</td>
					</tr>
					<tr>
						<td>Threads</td>
						<td>{{ metrics['threads'] }} total / {{ metrics['threads.daemon'] }} daemon / {{ metrics['threads.peak'] }} peak </td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="span6">
			<table class="table">
				<thead><tr><th colspan="2">Garbage Collection</th></tr></thead>
				<tbody>
					<tr ng-repeat-start="(name, value) in gcInfos track by name">
						<td>{{name | capitalize}} GC Count</td>
						<td>{{value.count}}</td>
					</tr>
					<tr ng-repeat-end>
						<td>{{name | capitalize}} GC Time</td>
						<td>{{value.time}} ms</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="span6" ng-show="metrics['httpsessions.active'] != null">
			<table class="table">
				<thead><tr><th colspan="2">Servlet Container</th></tr></thead>
				<tbody>
					<tr>
						<td>Http sessions</td>
						<td>{{ metrics['httpsessions.active'] }} active / {{ metrics['httpsessions.max'] == -1 ? 'unlimited' : metrics['httpsessions.max'] + ' max' }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="span6" ng-show="hasDatasources">
			<table class="table">
				<thead><tr><th colspan="2">Datasources</th></tr></thead>
				<tbody>
					<tr ng-repeat = "(name, value) in datasources track by name">
						<td colspan="2">
							<span>{{name | capitalize}} Datasource Connections (active: {{ value.active }})</span>
							<div class="progress" style="margin-bottom: 0px;">
								<div class="bar" style="width:{{ value.usage * 100 | number:2 }}%;" ng-class="{'bar-success': value.usage < 0.75, 'bar-warning': value.usage >= 0.75 && value.usage < 0.95, 'bar-danger': value.usage >= 0.95}">
									{{value.usage * 100 | number}}%
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="span6" ng-show="hasCaches">
			<table class="table">
				<thead><tr><th colspan="2">Caches</th></tr></thead>
				<tbody>
					<tr ng-repeat = "(name, value) in caches track by name">
						<td colspan="2">
							<span>{{name | capitalize}} (size: {{ value.size }})</span>
							<div class="progress" style="margin-bottom: 0px;">
								<div class="bar bar-success" style="width:{{ value.hitRatio * 100 | number:2 }}%;">
									{{value.hitRatio * 100 | number}}% hits
								</div>
								<div class="bar bar-danger" style="width:{{ value.missRatio * 100 | number:2 }}%;">
									{{value.missRatio * 100 | number}}% misses
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="span12">
			<div class="main-template">
				<div class="tab-pane active col-md-12">
					<ul class="nav nav-tabs">
						<li ui-sref-active="active"><a ui-sref="apps.details.metrics({id: application.id})">Metrics</a></li>
						<li ui-sref-active="active"><a ui-sref="apps.details.classpath({id: application.id})">Classpath</a></li>
					</ul>
					<div class="tab-content" style="overflow: visible;">
						<div ui-view></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/ng-template" id="health.html">
<dl class="health-status">
	<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>

	<dd>
		<table style="width:100%;">
			<tr ng-repeat="(key, value) in health" ng-if="isHealthDetail(key, value)" ng-class="{'error': key == 'error'}">
				<td>{{key | capitalize}}</td><td>{{value | joinArray:', '}}</td>
			</tr>
		</table>
	</dd>

	<dd ng-repeat="(name, health) in health" ng-if="isChildHealth(name, health)" >
		<ng-include src="'health.html'" ng-if="name != 'diskSpace' && name != 'configServer'"></ng-include>
		<ng-include src="'health-diskSpace.html'" ng-if="name == 'diskSpace'"></ng-include>
		<ng-include src="'health-configServer.html'" ng-if="name == 'configServer'"></ng-include>
	</dd>
</dl>
</script>

<script type="text/ng-template" id="health-diskSpace.html">
<dl class="health-status">
	<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>
	<dd>
		<table style="width:100%;">
			<tr>
				<td>Free</td><td>{{ health.free | humanBytes }}</td>
			</tr>
			<tr>
				<td>Threshold</td><td>{{ health.threshold | humanBytes }}</td>
			</tr>
		</table>
	</dd>
</dl>
</script>

<script type="text/ng-template" id="health-configServer.html">
<dl class="health-status">
	<dt>{{name | capitalize}} <span class="status-{{health.status}} pull-right">{{ health.status }}</span></dt>
	<dd ng-if="repository.error">
		<table style="width:100%;">
			<tr class="error">
			<td>Error</td><td>{{ repository.error }}</td>
			</tr>
		</table>
	</dd>
	<dd>
		<dl ng-repeat="repository in health.repositories" class="health-status">
			<dt>{{repository.name }}</dt>
			<dd>
				<table style="width:100%;">
					<tr>
						<td>Label</td><td>{{ repository.label }}</td>
					</tr>
					<tr>
						<td>Sources</td><td>{{ repository.sources | joinArray:', ' }}</td>
					</tr>
					<tr>
						<td>Profiles</td><td>{{ repository.profiles | joinArray:', ' }}</td>
					</tr>
				</table>
			</dd>
		</dl>
	</dd>
</dl>
</script>