small ui-changes:

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

@@ -226,6 +226,28 @@ span.refresh {
 	overflow: hidden;
 }
 
+/** health status**/
+dl.health-status > dt {
+    border-bottom: 1px solid #ddd;
+    background-color: #f9f9f9;
+    line-height: 20px;
+    padding: 8px;
+}
+
+dl.health-status {
+    margin-top: 0px;
+}
+
+dl.health-status dl.health-status {
+    margin-top: 20px !important;
+}
+
+dl.health-status td {
+    border-top: none;
+    border-bottom: 1px solid #ddd;
+}
+
+
 /** Metric Bars **/
 .bar-offset {
     float: left; 

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

@@ -39,6 +39,14 @@ module.exports = function ($scope, $interval, application, MetricsHelper) {
             $scope.health = health;
         });
 
+    $scope.isHealthDetail = function (key, value) {
+        return key !== 'status' && value !== null && (Array.isArray(value) || typeof value !== 'object');
+    };
+
+    $scope.isChildHealth = function (key, health) {
+        return health !== null && !Array.isArray(health) && typeof health === 'object';
+    };
+
     application.getMetrics()
         .success(function (metrics) {
             $scope.metrics = metrics;

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

@@ -4,6 +4,8 @@ var angular = require('angular');
 var springBootAdmin = angular.module('springBootAdmin');
 
 springBootAdmin.filter('timeInterval', require('./timeInterval'));
+
 springBootAdmin.filter('classNameLoggerOnly', require('./classNameLoggerOnly'));
 springBootAdmin.filter('capitalize', require('./capitalize'));
 springBootAdmin.filter('humanBytes', require('./humanBytes'));
+springBootAdmin.filter('joinArray', require('./joinArray'));

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

+/*
+ * Copyright 2014 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+module.exports = function () {
+    return function (input, separator) {
+        if (! Array.isArray(input) ) {
+            return input;
+        } else {
+            return input.join(separator);
+        }
+    };
+};

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

@@ -5,7 +5,7 @@
 <div class="container-fluid" style="margin: 0 auto; width: 960px;">
     <div class="span6">
         <table class="table">
-         <thead><tr><th>Application</th><th><small class="pull-right"><a href="{{ application.url }}/info">raw JSON</a></small></th></tr></thead>
+         <thead><tr><th colspan="2">Application <small class="pull-right"><a href="{{ application.url }}/info">raw JSON</a></small></th></tr></thead>
         <tbody>
           <tr ng-repeat="(key, value) in info" >
             <td>{{ key }}</td><td>{{ value }}</td>
@@ -17,34 +17,10 @@
      <div class="span6">
         <table class="table">
             <thead>
-                <tr><th>Health Checks</th><th><small class="pull-right"><a href="{{ application.url }}/health">raw JSON</a></small></th></tr>
+                <tr><th colspan="2">Health Checks <small class="pull-right"><a href="{{ application.url }}/health">raw JSON</a></small></th></tr>
             </thead>
             <tbody>
-                <tr>
-                    <td>Application</td><td><span class="status-{{health.status}}">{{ health.status }}</span></td>
-                </tr>
-
-                <tr ng-repeat-start="(indicator, details) in health" ng-if="indicator != 'status'">
-                    <td ng-if="indicator != 'db'">{{indicator | capitalize}}</td>
-                    <td ng-if="indicator == 'db'">Datasource</td>
-
-                    <td><span class="status-{{details.status}}">{{ details.status }}</span><br>
-                        <span ng-repeat="(key, value) in details" ng-if="indicator != 'db' && indicator != 'diskSpace' && key != 'status' && key != 'error'">{{ key | capitalize }}: {{value}}<br></span>
-                        <span ng-if="indicator == 'db' && details.database">{{ details.database }}</span>
-                        <span ng-if="indicator == 'diskSpace'">{{ health.diskSpace.free | humanBytes }} free / {{ health.diskSpace.threshold | humanBytes }} threshold</span>
-                    </td>
-                </tr>
-
-                <tr ng-repeat-start="(dbname, dbhealth) in details" ng-if="indicator == 'db' && dbname != 'status'  && dbname != 'error' && dbname != 'database' && dbname != 'hello'" >
-                   <td>- {{ dbname | capitalize }}</td>
-                   <td><span class="status-{{dbhealth.status}}">{{ dbhealth.status }}</span><br>
-                       {{dbhealth.database}}
-                   </td>
-                </tr>
-                <tr ng-repeat-end ng-if="dbhealth.error"><td colspan="2" class="alert alert-error" >{{ dbhealth.error }}</td></tr>
-
-                <tr ng-repeat-end ng-if="details.error"><td colspan="2" class="alert alert-error" >{{ details.error }}</td></tr>
-
+                <tr><td ng-init="name= 'Application'" ng-include="'health.html'"></td></tr>
             </tbody>
         </table>
     </div>
@@ -88,7 +64,7 @@
 
     <div class="span6">
       <table class="table">
-        <thead><tr><th>JVM</th><th><small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
+        <thead><tr><th colspan="2">JVM <small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
         <tbody>
           <tr ng-if="metrics['systemload.average'] != null && metrics['systemload.average'] >= 0.0">
             <td>Systemload</td>
@@ -171,3 +147,38 @@
       </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'"></ng-include>
+        <ng-include src="'health-diskSpace.html'" ng-if="name == 'diskSpace'"></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>

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

@@ -10,18 +10,18 @@
             </th>
             <th><span class="sortable" ng-class="orderByCssClass('version')" ng-click="orderBy('version')">Version</span></th>
             <th>Info</th>
-            <th colspan="2"><span class="sortable" ng-class="orderByCssClass('status')" ng-click="orderBy('status')">Status</span></th>
+            <th colspan="2">Status</th>
         </tr>
     </thead>
     <tbody>
-        <tr ng-repeat="application in applications|orderBy:order.column:order.descending track by application.id">
+        <tr ng-repeat="application in applications|orderBy:order.column:order.descending|orderBy:'status':false track by application.id">
             <td>{{ application.name }}<br/><span class="muted">{{ application.url }}</span></td>
             <td>{{ application.version }}</td>
             <td><span ng-repeat="(name, value) in application.info track by name">{{name}}: {{value}}<br></span></td>
             <td><span class="status-{{application.status}}">{{ application.status }}</span>
             <span ng-show="application.refreshing" class="refresh"></span></td>
-            <td>
-                <div class="btn-group pull-right" ng-hide="application.status == null || application.status == 'OFFLINE'">
+            <td style="text-align: right;">
+                <div class="btn-group" ng-hide="application.status == null || application.status == 'OFFLINE'">
                     <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>
                     <a ui-sref="apps.details.metrics({id: application.id})" class="btn btn-success">Details</a>
                     <a class="btn btn-success dropdown-toggle" data-toggle="dropdown">
@@ -34,8 +34,8 @@
                         <li><a ui-sref="apps.trace({id: application.id})" >Trace</a></li>
                     </ul>
                 </div>
-                <div class="btn-group pull-right" ng-show="application.status == 'UNKNOWN' || application.status == 'OFFLINE'">
-                    <a class="btn btn-danger" ng-click="remove(application)"><i class="icon-remove icon-white"></i>Remove</a>
+                <div class="btn-group" title="remove">
+                    <a class="btn btn-danger" ng-click="remove(application)"><i class="icon-remove icon-white"></i></a>
                 </div>
             </td>
         </tr>