Skip to content

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

Prevent application info from overflowing

Change the application list to a fixed table layout to prevent it from overflowing in the window and limit the info column to a max width. Also limit the info column in the detail view. fixes #316
parent 29567a92
Showing with 77 additions and 59 deletions
spring-boot-admin-server-ui/modules/applications-details/views/details.html
......@@ -17,7 +17,7 @@
<table class="table">
<tr ng-repeat="(key, value) in info">
<td ng-bind="key"></td>
<td style="white-space: pre" ng-bind-html="value | yaml | linkify:50"></td>
<td style="white-space: pre; padding: 8px 0 8px 8px; max-width: 400px; overflow-x: auto;" ng-bind-html="value | yaml | linkify:50"></td>
</tr>
</table>
</sba-info-panel>
......
spring-boot-admin-server-ui/modules/applications/css/module.css
......@@ -78,6 +78,15 @@
background-color: #f9f9f9;
}
table.application-list {
table-layout: fixed;
width: 100%;
}
.application-list td.scroll {
overflow-x: auto;
max-width: 400px;
}
.table .group-column {
border-right: 1px solid #dddddd;
color: #999999;
......
spring-boot-admin-server-ui/modules/applications/views/applications-list.html
<div class="container-fluid">
<h3>Spring Boot applications</h3>
<div>
<input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" ng-keypress="toggleExpandAll(true)" />
</div>
<table class="table application-list">
<thead>
<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><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>
<th><span class="sortable" ng-class="orderByCssClass('info.version')" ng-click="orderBy('info.version')">Version</span></th>
<th>Info</th>
<th>Status</th>
<th colspan="2"></th>
</tr>
</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">
<td class="group-column" ng-click="group.collapsed = false"><i class="fa fa-plus"></i></td>
<td colspan="3" ng-bind="group.name"></td>
<td>
<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>
</td>
<th colspan="2"></th>
</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" 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>{{ application.name }} ({{ application.id }})<br/>
<span class="muted">{{ application.serviceUrl || application.managementUrl || application.healthUrl }}</span></td>
<td>{{ application.version }}</td>
<td>
<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>
<span ng-show="application.refreshing"><i class="fa fa-spinner fa-pulse fa-lg"></i></span>
</td>
<td>
<sba-notification-settings ng-if="notificationFilters" application="application" filters="notificationFilters" refresh-callback="loadFilters()"></sba-notification-settings>
</td>
<td>
<div class="pull-right">
<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>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="views.length > 1">
<h3>Spring Boot applications</h3>
<div>
<input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" ng-keypress="toggleExpandAll(true)"
/>
</div>
<table class="table application-list">
<col style="width: 30px; ">
<col style="width: 300px;">
<col style="width: 150px;">
<col style="width: auto;">
<col style="width: 100px;">
<col style="width: 250px;">
<thead>
<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><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>
<th><span class="sortable" ng-class="orderByCssClass('info.version')" ng-click="orderBy('info.version')">Version</span></th>
<th>Info</th>
<th>Status</th>
<th></th>
</tr>
</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">
<td class="group-column" ng-click="group.collapsed = false"><i class="fa fa-plus"></i></td>
<td colspan="3" ng-bind="group.name"></td>
<td>
<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>
</td>
<th colspan="2"></th>
</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"
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>{{ application.name }} ({{ application.id }})<br/>
<span class="muted">{{ application.serviceUrl || application.managementUrl || application.healthUrl }}</span></td>
<td>{{ application.version }}</td>
<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>
<span ng-show="application.refreshing"><i class="fa fa-spinner fa-pulse fa-lg"></i></span>
</td>
<td>
<sba-notification-settings ng-if="notificationFilters" application="application" filters="notificationFilters" refresh-callback="loadFilters()"></sba-notification-settings>
<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>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="views.length > 1">
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li ng-repeat="view in views.slice(1)">
<a ng-href="{{view.href}}" target="{{view.target}}" ng-bind-html="view.title"></a>
</li>
</ul>
</div>
<div class="btn-group" title="remove">
<a class="btn btn-danger" ng-click="remove(application)"><i class="fa fa-times"></i></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="dropdown-menu">
<li ng-repeat="view in views.slice(1)">
<a ng-href="{{view.href}}" target="{{view.target}}" ng-bind-html="view.title"></a>
</li>
</ul>
</div>
<div class="btn-group" title="remove">
<a class="btn btn-danger" ng-click="remove(application)"><i class="fa fa-times"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</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