Show status detials in journal and application list

spring-boot-admin-server-ui/modules/applications/components/statusInfo.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';
+
+var angular = require('angular');
+
+module.exports = {
+  bindings: {
+    statusInfo: '<statusInfo'
+  },
+  controller: function () {
+    'ngInject';
+    var ctrl = this;
+    ctrl.showPopover = false;
+
+    var isDetail = function (detail) {
+      return detail !== null && !Array.isArray(detail) && typeof detail === 'object' && 'status' in detail;
+    };
+
+    ctrl.$onChanges = function () {
+      ctrl.details = [];
+      angular.forEach(ctrl.statusInfo.details, function (value, key) {
+        if (isDetail(value)) {
+          ctrl.details.push({ name: key, status: value.status });
+        }
+      });
+    };
+  },
+  template: require('./statusInfo.tpl.html')
+};

spring-boot-admin-server-ui/modules/applications/components/statusInfo.tpl.html

+<span class="status-{{$ctrl.statusInfo.status}}" ng-bind="$ctrl.statusInfo.status" ng-mouseenter="$ctrl.showPopover=true"
+  ng-mouseleave="$ctrl.showPopover=false"></span>
+<sba-popover popover-toggle="$ctrl.showPopover">
+  <table class="table cable-condensed">
+    <tr ng-repeat="detail in $ctrl.details | orderBy:'name'">
+      <td style="text-transform: capitalize;" ng-bind="detail.name"></td>
+      <td ng-bind="detail.status " class="status-{{detail.status}}"></td>
+    </tr>
+  </table>
+  <div style="max-width: 400px;" class="alert alert-error" ng-if="$ctrl.statusInfo.details.message">
+    <b style="word-break: break-all;" ng-if="$ctrl.statusInfo.details.exception" ng-bind="$ctrl.statusInfo.details.exception + ':'"></b><br>
+    <span ng-bind="$ctrl.statusInfo.details.message"></span>
+  </div>
+  <small class="pull-right muted" ng-bind="$ctrl.statusInfo.timestamp | date:'dd.MM.yyyy HH:mm:ss'"></small>
+</sba-popover>
\ No newline at end of file

spring-boot-admin-server-ui/modules/applications/module.js

@@ -38,6 +38,7 @@ module.component('sbaAccordionGroup', require('./components/accordionGroup.js'))
 module.component('sbaNotificationSettings', require('./components/notificationSettings.js'));
 module.component('sbaPopover', require('./components/popover.js'));
 module.component('sbaLimitedText', require('./components/limitedText.js'));
+module.component('sbaStatusInfo', require('./components/statusInfo.js'));
 
 require('./css/module.css');
 

spring-boot-admin-server-ui/modules/applications/views/applications-list.html

@@ -24,7 +24,7 @@
     </thead>
     <tbody>
       <tr ng-repeat-start="group in applicationGroups.groups|orderBy:order.column:order.descending|orderBy:'status':false|filter:searchFilter track by group.name"
-				ng-init="group.collapsed = group.applications.length > 1 && !expandAll" ng-show="group.collapsed">
+        ng-init="group.collapsed = group.applications.length > 1 &amp;&amp; !expandAll" ng-show="group.collapsed">
         <td class="group-column" ng-click="group.collapsed = false"><i class="fa fa-plus"></i></td>
         <td ng-bind="group.name"></td>
         <td><span ng-bind="group.version"></span></td>
@@ -43,8 +43,8 @@
         <td class="scroll">
           <sba-limited-text max-lines="3" bind-html="application.info | yaml | linkify:60"></sba-limited-text>
         </td>
-				<td><span class="status-{{application.statusInfo.status}}" title="{{application.statusInfo.timestamp  | date:'dd.MM.yyyy HH:mm:ss' }}"
-						ng-bind="application.statusInfo.status"></span>
+        <td>
+          <sba-status-info status-info="application.statusInfo"></sba-status-info>
           <span ng-show="application.refreshing"><i class="fa fa-spinner fa-pulse fa-lg"></i></span>
         </td>
         <td>

spring-boot-admin-server-ui/modules/events/events.html

@@ -22,7 +22,7 @@
           <td>{{ event.type }}
             <br/>
             <span ng-if="event.type == 'STATUS_CHANGE'">
-							<span class="status-{{event.from.status}}">{{ event.from.status }}</span> -&gt; <span class="status-{{event.to.status}}">{{ event.to.status }}</span>
+              <sba-status-info status-info="event.from"></sba-status-info> -&gt; <sba-status-info status-info="event.to"></sba-status-info>
             </span>
           </td>
         </tr>