Skip to content

S
spring-boot-admin
Commit accb52d1 by Johannes Edmeier
Options

Show status detials in journal and application list

When hovering over the status a summary of the health indicators pops up in application list and journal. closes #334
parent 68173d87
Showing with 130 additions and 68 deletions
spring-boot-admin-server-ui/modules/applications/components/statusInfo.js 0 → 100644
/*
* 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 0 → 100644
<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')) ...@@ -38,6 +38,7 @@ module.component('sbaAccordionGroup', require('./components/accordionGroup.js'))
module.component('sbaNotificationSettings', require('./components/notificationSettings.js')); module.component('sbaNotificationSettings', require('./components/notificationSettings.js'));
module.component('sbaPopover', require('./components/popover.js')); module.component('sbaPopover', require('./components/popover.js'));
module.component('sbaLimitedText', require('./components/limitedText.js')); module.component('sbaLimitedText', require('./components/limitedText.js'));
module.component('sbaStatusInfo', require('./components/statusInfo.js'));
require('./css/module.css'); require('./css/module.css');
......
spring-boot-admin-server-ui/modules/applications/views/applications-list.html
<div class="container-fluid"> <div class="container-fluid">
<h3>Spring Boot applications</h3> <h3>Spring Boot applications</h3>
<div> <div>
<input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" ng-keypress="toggleExpandAll(true)" <input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" ng-keypress="toggleExpandAll(true)"
/> />
</div> </div>
<table class="table application-list"> <table class="table application-list">
<col style="width: 30px; "> <col style="width: 30px; ">
<col style="width: 300px;"> <col style="width: 300px;">
<col style="width: 150px;"> <col style="width: 150px;">
<col style="width: auto;"> <col style="width: auto;">
<col style="width: 100px;"> <col style="width: 100px;">
<col style="width: 250px;"> <col style="width: 250px;">
<thead> <thead>
<tr> <tr>
<th class="group-column" title="{{expandAll ? 'collapse' : 'expand'}} all" ng-click="toggleExpandAll()"><i class="fa" ng-class="{'fa-plus': !expandAll, 'fa-minus': expandAll}"></i></th> <th class="group-column" title="{{expandAll ? 'collapse' : 'expand'}} all" ng-click="toggleExpandAll()"><i class="fa" ng-class="{'fa-plus': !expandAll, 'fa-minus': expandAll}"></i></th>
<th><span class="sortable" ng-class="orderByCssClass('name')" ng-click="orderBy('name')">Application</span> / <span class="sortable" <th><span class="sortable" ng-class="orderByCssClass('name')" ng-click="orderBy('name')">Application</span> / <span class="sortable"
ng-class="orderByCssClass('healthUrl')" ng-click="orderBy('healthUrl')">URL</span></th> ng-class="orderByCssClass('healthUrl')" ng-click="orderBy('healthUrl')">URL</span></th>
<th><span class="sortable" ng-class="orderByCssClass('info.version')" ng-click="orderBy('info.version')">Version</span></th> <th><span class="sortable" ng-class="orderByCssClass('info.version')" ng-click="orderBy('info.version')">Version</span></th>
<th>Info</th> <th>Info</th>
<th>Status</th> <th>Status</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat-start="group in applicationGroups.groups|orderBy:order.column:order.descending|orderBy:'status':false|filter:searchFilter track by group.name" <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 class="group-column" ng-click="group.collapsed = false"><i class="fa fa-plus"></i></td>
<td ng-bind="group.name"></td> <td ng-bind="group.name"></td>
<td><span ng-bind="group.version"></span></td> <td><span ng-bind="group.version"></span></td>
<td></td> <td></td>
<td colspan="2"> <td colspan="2">
<span ng-repeat-start="(status, count) in group.statusCounter track by status" class="status-{{status}}" ng-bind="count + ' ' + status"></span> <span ng-repeat-start="(status, count) in group.statusCounter track by status" class="status-{{status}}" ng-bind="count + ' ' + status"></span>
<span ng-repeat-end ng-hide="$last"> / </span> <span ng-repeat-end ng-hide="$last"> / </span>
</td> </td>
</tr> </tr>
<tr ng-hide="group.collapsed" ng-repeat="application in filteredApps = (group.applications|orderBy:order.column:order.descending|orderBy:'statusInfo.status':false|filter:searchFilter) track by application.id" <tr ng-hide="group.collapsed" ng-repeat="application in filteredApps = (group.applications|orderBy:order.column:order.descending|orderBy:'statusInfo.status':false|filter:searchFilter) track by application.id"
ng-init="views = viewsForApplication(application)" ng-repeat-end> ng-init="views = viewsForApplication(application)" ng-repeat-end>
<td class="group-column" ng-if="$first" rowspan="{{filteredApps.length}}" ng-click="group.collapsed = filteredApps.length > 1"><i ng-show="filteredApps.length > 1" class="fa fa-minus"></i></td> <td class="group-column" ng-if="$first" rowspan="{{filteredApps.length}}" ng-click="group.collapsed = filteredApps.length > 1"><i ng-show="filteredApps.length > 1" class="fa fa-minus"></i></td>
<td>{{ application.name }} ({{ application.id }})<br/> <td>{{ application.name }} ({{ application.id }})<br/>
<span class="muted">{{ application.serviceUrl || application.managementUrl || application.healthUrl }}</span></td> <span class="muted">{{ application.serviceUrl || application.managementUrl || application.healthUrl }}</span></td>
<td>{{ application.version }}</td> <td>{{ application.version }}</td>
<td class="scroll"> <td class="scroll">
<sba-limited-text max-lines="3" bind-html="application.info | yaml | linkify:60"></sba-limited-text> <sba-limited-text max-lines="3" bind-html="application.info | yaml | linkify:60"></sba-limited-text>
</td> </td>
<td><span class="status-{{application.statusInfo.status}}" title="{{application.statusInfo.timestamp | date:'dd.MM.yyyy HH:mm:ss' }}" <td>
ng-bind="application.statusInfo.status"></span> <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> <span ng-show="application.refreshing"><i class="fa fa-spinner fa-pulse fa-lg"></i></span>
</td> </td>
<td> <td>
<sba-notification-settings ng-if="notificationFilters" application="application" filters="notificationFilters" refresh-callback="loadFilters()"></sba-notification-settings> <sba-notification-settings ng-if="notificationFilters" application="application" filters="notificationFilters" refresh-callback="loadFilters()"></sba-notification-settings>
<div class="btn-group"> <div class="btn-group">
<a ng-if="views.length > 0" ng-href="{{views[0].href}}" target="{{views[0].target}}" class="btn btn-success" ng-bind-html="views[0].title"></a> <a ng-if="views.length > 0" ng-href="{{views[0].href}}" target="{{views[0].target}}" class="btn btn-success" ng-bind-html="views[0].title"></a>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="views.length > 1"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="views.length > 1">
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li ng-repeat="view in views.slice(1)"> <li ng-repeat="view in views.slice(1)">
<a ng-href="{{view.href}}" target="{{view.target}}" ng-bind-html="view.title"></a> <a ng-href="{{view.href}}" target="{{view.target}}" ng-bind-html="view.title"></a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="btn-group" title="remove"> <div class="btn-group" title="remove">
<a class="btn btn-danger" ng-click="remove(application)"><i class="fa fa-times"></i></a> <a class="btn btn-danger" ng-click="remove(application)"><i class="fa fa-times"></i></a>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
\ No newline at end of file
spring-boot-admin-server-ui/modules/events/events.html
...@@ -22,11 +22,11 @@ ...@@ -22,11 +22,11 @@
<td>{{ event.type }} <td>{{ event.type }}
<br/> <br/>
<span ng-if="event.type == 'STATUS_CHANGE'"> <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> </span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment