Skip to content

S
spring-boot-admin
Commit 27325103 by Johannes Stelzer
Options

Redesgin layout in view to save some space.

Use tabs for idents, small lint fixes
parent a53ba390
Showing with 57 additions and 80 deletions
spring-boot-admin-server-ui/app/css/main.css
...@@ -5,15 +5,13 @@ body { ...@@ -5,15 +5,13 @@ body {
font-family: "Varela Round",sans-serif; font-family: "Varela Round",sans-serif;
} }
.container-fluid {
margin: 0 auto;
}
.main-body--wrapper { .content {
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
} }
.center-block { .center-block {
display: block; display: block;
margin-left: auto; margin-left: auto;
...@@ -82,24 +80,6 @@ pre { ...@@ -82,24 +80,6 @@ pre {
color: #eeeeee; color: #eeeeee;
background-color: #6db33f; background-color: #6db33f;
} }
.header--navbar .navbar-inner .navbar-link.nav-search {
padding: 20px 0 23px;
}
.header--navbar .navbar-inner .navbar-link.nav-search .navbar-search--icon {
color: #eeeeee;
font-size: 24px;
padding: 3px 16px 3px 18px;
cursor: pointer;
}
.header--navbar .navbar-inner .navbar-link.nav-search:hover .navbar-search--icon {
text-shadow: 0 0 10px #6db33f;
}
.header--navbar .navbar-inner .navbar-link.nav-search .search-input-close {
display: none;
}
.header--navbar .navbar-inner .navbar-link.nav-search.js-highlight {
background-color: #6db33f;
}
a.spring-logo { a.spring-logo {
background: url("../img/spring-logo.png") -1px -1px no-repeat; background: url("../img/spring-logo.png") -1px -1px no-repeat;
...@@ -120,6 +100,7 @@ a:hover.spring-logo span { ...@@ -120,6 +100,7 @@ a:hover.spring-logo span {
opacity: 1; opacity: 1;
} }
/** FOOTER **/ /** FOOTER **/
.footer { .footer {
background-color: #34302d; background-color: #34302d;
......
spring-boot-admin-server-ui/app/index.html
...@@ -35,11 +35,9 @@ ...@@ -35,11 +35,9 @@
</div> </div>
</div> </div>
</header> </header>
<div class="container-fluid ">
<div class="main-body--wrapper"> <div class="main-body--wrapper">
<div ui-view></div> <div ui-view></div>
</div> </div>
</div>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Open Source</a> Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Open Source</a>
......
spring-boot-admin-server-ui/app/js/app.js
...@@ -31,7 +31,7 @@ var springBootAdmin = angular.module('springBootAdmin', [ ...@@ -31,7 +31,7 @@ var springBootAdmin = angular.module('springBootAdmin', [
'ngResource', 'ngResource',
'ngRoute', 'ngRoute',
'ui.router', 'ui.router',
'ui.bootstrap', 'ui.bootstrap'
]); ]);
require('./controller'); require('./controller');
......
spring-boot-admin-server-ui/app/views/about.html
<div class="container"> <div class="container content">
<div class="main-template"> <p>
This is an administration GUI for Spring-Boot applications. All applications have to register themselves at this application. This is an administration GUI for Spring-Boot applications. All applications have to register themselves at this application.
This is done by including <a href="">spring-boot-starters-admin-client</a> as dependency. This will This is done by including <a href="">spring-boot-starters-admin-client</a> as dependency. This will
auto-configure a registrator that registers the application. auto-configure a registrator that registers the application.
</div> </p>
</div> </div>
spring-boot-admin-server-ui/app/views/apps.html
<div class="container" style="margin-bottom: 20px;"> <div class="navbar">
<div class="row"> <div class="navbar-inner">
<div class="span12"> <span class="brand">{{ application.name }}</span>
<h2 style="display: inline-block;">{{ application.name }} <ul class="nav pull-right">
<small>{{ application.url }}</small> <li class="navbar-link" ng-class="{active: $state.includes('apps.details')}"> <a ui-sref="apps.details.metrics({id: application.id})">Details</a></li>
</h2> <li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.logging({id: application.id})" >Logging</a></li>
</div> <li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.jmx({id: application.id})">JMX</a></li>
</div> <li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.threads({id: application.id})">Threads</a></li>
<div class="row"> <li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.trace({id: application.id})">Trace</a></li>
<div class="span12 btn-group text-center"> </ul>
<a class="btn" ng-class="{active: $state.includes('apps.details')}" ui-sref="apps.details.metrics({id: application.id})">Details</a> <small class="navbar-text">{{ application.url }}</small>
<a class="btn" ui-sref-active="active" ui-sref="apps.logging({id: application.id})" >Logging</a></label>
<a class="btn" ui-sref-active="active" ui-sref="apps.jmx({id: application.id})">JMX</a></label>
<a class="btn" ui-sref-active="active" ui-sref="apps.threads({id: application.id})">Threads</a></label>
<a class="btn" ui-sref-active="active" ui-sref="apps.trace({id: application.id})">Trace</a></label>
</div>
</div> </div>
</div> </div>
<div ui-view></div> <div ui-view></div>
spring-boot-admin-server-ui/app/views/apps/details.html
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="container-fluid" style="margin: 0 auto; width: 960px;"> <div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="row">
<div class="span6"> <div class="span6">
<table class="table"> <table class="table">
<thead><tr><th colspan="2">Application <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>
...@@ -13,7 +14,6 @@ ...@@ -13,7 +14,6 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="span6"> <div class="span6">
<table class="table"> <table class="table">
<thead> <thead>
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="row">
<div class="span6"> <div class="span6">
<table class="table"> <table class="table">
<thead><tr><th colspan="2">Memory</th></tr></thead> <thead><tr><th colspan="2">Memory</th></tr></thead>
...@@ -33,8 +34,7 @@ ...@@ -33,8 +34,7 @@
<td colspan="2"> <td colspan="2">
<span>Total Memory ({{ metrics['mem.used'] | humanBytes:'K' }} / {{ metrics['mem'] | humanBytes:'K' }})</span> <span>Total Memory ({{ metrics['mem.used'] | humanBytes:'K' }} / {{ metrics['mem'] | humanBytes:'K' }})</span>
<div class="progress" style="margin-bottom: 0px;"> <div class="progress" style="margin-bottom: 0px;">
<div class="bar" style="width:{{ memPercentage = (metrics['mem.used'] / metrics['mem'] * 100 | number:2) }}%;" <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}">
ng-class="{'bar-success': memPercentage < 75, 'bar-warning': memPercentage >= 75 && memPercentage < 95, 'bar-danger': memPercentage >= 95}">
{{memPercentage}}% {{memPercentage}}%
</div> </div>
</div> </div>
...@@ -44,8 +44,7 @@ ...@@ -44,8 +44,7 @@
<td colspan="2"> <td colspan="2">
<span>Heap Memory ({{ metrics['heap.used'] | humanBytes:'K' }} / {{ metrics['heap.committed'] | humanBytes:'K' }})</span> <span>Heap Memory ({{ metrics['heap.used'] | humanBytes:'K' }} / {{ metrics['heap.committed'] | humanBytes:'K' }})</span>
<div class="progress" style="margin-bottom: 0px;"> <div class="progress" style="margin-bottom: 0px;">
<div class="bar" style="width:{{ heapPercentage = (metrics['heap.used'] / metrics['heap.committed'] * 100 | number:2) }}%;" <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}">
ng-class="{'bar-success': heapPercentage < 75, 'bar-warning': heapPercentage >= 75 && heapPercentage < 95, 'bar-danger': heapPercentage >= 95}">
{{heapPercentage}}% {{heapPercentage}}%
</div> </div>
</div> </div>
...@@ -97,10 +96,12 @@ ...@@ -97,10 +96,12 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="row">
<div class="span6"> <div class="span6">
<table class="table"> <table class="table">
<thead><tr><th colspan="2">Garbage Collection</th></tr></thead> <thead><tr><th colspan="2">Garbage Collection</th></tr></thead>
<tbody>
<tr ng-repeat-start="(name, value) in gcInfos track by name"> <tr ng-repeat-start="(name, value) in gcInfos track by name">
<td>{{name | capitalize}} GC Count</td> <td>{{name | capitalize}} GC Count</td>
<td>{{value.count}}</td> <td>{{value.count}}</td>
...@@ -116,12 +117,12 @@ ...@@ -116,12 +117,12 @@
<div class="span6" ng-show="hasDatasources"> <div class="span6" ng-show="hasDatasources">
<table class="table"> <table class="table">
<thead><tr><th colspan="2">Datasources</th></tr></thead> <thead><tr><th colspan="2">Datasources</th></tr></thead>
<tbody>
<tr ng-repeat = "(name, value) in datasources track by name"> <tr ng-repeat = "(name, value) in datasources track by name">
<td colspan="2"> <td colspan="2">
<span>{{name | capitalize}} Datasource Connections (active: {{ value.active }})</span> <span>{{name | capitalize}} Datasource Connections (active: {{ value.active }})</span>
<div class="progress" style="margin-bottom: 0px;"> <div class="progress" style="margin-bottom: 0px;">
<div class="bar" style="width:{{ value.usage * 100 | number:2 }}%;" <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}">
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}}% {{value.usage * 100 | number}}%
</div> </div>
</div> </div>
...@@ -130,7 +131,8 @@ ...@@ -130,7 +131,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="row">
<div class="span12"> <div class="span12">
<div class="main-template"> <div class="main-template">
<div class="tab-pane active col-md-12"> <div class="tab-pane active col-md-12">
...@@ -146,6 +148,7 @@ ...@@ -146,6 +148,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<script type="text/ng-template" id="health.html"> <script type="text/ng-template" id="health.html">
......
spring-boot-admin-server-ui/app/views/apps/jmx.html
<div class="alert alert-error" ng-if="error"> <div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }} <b>Error:</b> {{ error }}
</div> </div>
<div class="container">
<accordion close-others="true"> <accordion close-others="true">
<accordion-group ng-repeat="domain in domains track by domain.name"> <accordion-group ng-repeat="domain in domains track by domain.name">
<accordion-heading> <accordion-heading>
......
spring-boot-admin-server-ui/app/views/apps/logging.html
<div class="container"> <div class="container content">
<form ng-init="showPackageLoggers = false"> <form ng-init="showPackageLoggers = false">
<div class="input-prepend input-append"> <div class="input-prepend input-append">
<button class="btn" title="Show package-level loggers" ng-class="{'btn-inverse': showPackageLoggers}" ng-model="showPackageLoggers" btn-checkbox ><i class="icon-folder-open" ng-class="{'icon-white': showPackageLoggers}"></i></button> <button class="btn" title="Show package-level loggers" ng-class="{'btn-inverse': showPackageLoggers}" ng-model="showPackageLoggers" btn-checkbox ><i class="icon-folder-open" ng-class="{'icon-white': showPackageLoggers}"></i></button>
......
spring-boot-admin-server-ui/app/views/apps/threads.html
<div class="alert alert-error" ng-if="error"> <div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }} <b>Error:</b> {{ error }}
</div> </div>
<div class="container">
<div class="row"> <div class="row">
<div class="span12 text-center" > <div class="span12 text-center" >
<form> <form>
......
spring-boot-admin-server-ui/app/views/apps/trace.html
<div class="alert alert-error" ng-if="error"> <div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }} <b>Error:</b> {{ error }}
</div> </div>
<div class="container">
<div class="form-inline"> <div class="form-inline">
<button title="refresh" class="btn" ng-click="refresh()"><i class="icon-refresh"></i></button> <button title="refresh" class="btn" ng-click="refresh()"><i class="icon-refresh"></i></button>
<div class="input-prepend input-append"> <div class="input-prepend input-append">
......
spring-boot-admin-server-ui/app/views/overview.html
<h2 >Spring-Boot applications<br> <div class="container-fluid content">
<small>Here you'll find all Spring-Boot applications that registered themselves at this admin application.</small> <h2 >Spring-Boot applications<br>
</h2> <small>Here you'll find all Spring-Boot applications that registered themselves at this admin application.</small>
<table class="table table-striped"> </h2>
<table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th><span class="sortable" ng-class="orderByCssClass('name')" ng-click="orderBy('name')">Application</span> <th><span class="sortable" ng-class="orderByCssClass('name')" ng-click="orderBy('name')">Application</span>
...@@ -40,4 +41,5 @@ ...@@ -40,4 +41,5 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
spring-boot-admin-server-ui/gulpfile.js
...@@ -79,7 +79,7 @@ gulp.task('lint', function () { ...@@ -79,7 +79,7 @@ gulp.task('lint', function () {
'app/js/**/*.js', 'app/js/**/*.js',
'test/**/*.js', 'test/**/*.js',
'!app/js/third-party/**', '!app/js/third-party/**',
'!test/browserified/**', '!test/browserified/**'
]) ])
.pipe(eslint()) .pipe(eslint())
.pipe(eslint.format()); .pipe(eslint.format());
...@@ -107,7 +107,7 @@ gulp.task('browserify', ['lint', 'unit'], function () { ...@@ -107,7 +107,7 @@ gulp.task('browserify', ['lint', 'unit'], function () {
gulp.task('ngAnnotate', ['lint', 'unit'], function () { gulp.task('ngAnnotate', ['lint', 'unit'], function () {
return gulp.src([ return gulp.src([
'app/js/**/*.js', 'app/js/**/*.js',
'!app/js/third-party/**', '!app/js/third-party/**'
]) ])
.pipe(ngAnnotage()) .pipe(ngAnnotage())
.pipe(gulp.dest(target('/ngAnnotate'))); .pipe(gulp.dest(target('/ngAnnotate')));
...@@ -187,7 +187,7 @@ gulp.task('e2e', ['server'], skipTests(function () { ...@@ -187,7 +187,7 @@ gulp.task('e2e', ['server'], skipTests(function () {
return gulp.src(['./test/e2e/**/*.js']) return gulp.src(['./test/e2e/**/*.js'])
.pipe(protractor({ .pipe(protractor({
configFile: forEnv('protractor.conf.js'), configFile: forEnv('protractor.conf.js'),
args: ['--baseUrl', 'http://localhost:' + serverPort], args: ['--baseUrl', 'http://localhost:' + serverPort]
})) }))
.on('error', function (e) { .on('error', function (e) {
throw e; throw e;
...@@ -202,7 +202,7 @@ gulp.task('watch', function () { ...@@ -202,7 +202,7 @@ gulp.task('watch', function () {
gulp.watch([ gulp.watch([
'app/**', 'app/**',
'!app/js/third-party/**', '!app/js/third-party/**',
'test/**/*.js', 'test/**/*.js'
], ['fast']); ], ['fast']);
}); });
......
spring-boot-admin-server-ui/test/unit/filter/humanBytes.js
'use strict'; 'use strict';
var chai = require('chai') var chai = require('chai')
, expect = chai.expect , expect = chai.expect;
, sinon = require('sinon')
, sinonChai = require('sinon-chai');
var humanBytesFilter = require('../../../app/js/filter/humanBytes')(); var humanBytesFilter = require('../../../app/js/filter/humanBytes')();
......
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