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 {
font-family: "Varela Round",sans-serif;
}
.container-fluid {
margin: 0 auto;
}
.main-body--wrapper {
.content {
margin-top: 50px;
margin-bottom: 50px;
}
.center-block {
display: block;
margin-left: auto;
......@@ -82,24 +80,6 @@ pre {
color: #eeeeee;
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 {
background: url("../img/spring-logo.png") -1px -1px no-repeat;
......@@ -120,6 +100,7 @@ a:hover.spring-logo span {
opacity: 1;
}
/** FOOTER **/
.footer {
background-color: #34302d;
......
spring-boot-admin-server-ui/app/index.html
......@@ -35,11 +35,9 @@
</div>
</div>
</header>
<div class="container-fluid ">
<div class="main-body--wrapper">
<div ui-view></div>
</div>
</div>
<footer class="footer">
<div class="container">
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', [
'ngResource',
'ngRoute',
'ui.router',
'ui.bootstrap',
'ui.bootstrap'
]);
require('./controller');
......
spring-boot-admin-server-ui/app/views/about.html
<div class="container">
<div class="main-template">
<div class="container content">
<p>
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
auto-configure a registrator that registers the application.
</div>
</p>
</div>
spring-boot-admin-server-ui/app/views/apps.html
<div class="container" style="margin-bottom: 20px;">
<div class="row">
<div class="span12">
<h2 style="display: inline-block;">{{ application.name }}
<small>{{ application.url }}</small>
</h2>
</div>
</div>
<div class="row">
<div class="span12 btn-group text-center">
<a class="btn" ng-class="{active: $state.includes('apps.details')}" ui-sref="apps.details.metrics({id: application.id})">Details</a>
<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 class="navbar">
<div class="navbar-inner">
<span class="brand">{{ application.name }}</span>
<ul class="nav pull-right">
<li class="navbar-link" ng-class="{active: $state.includes('apps.details')}"> <a ui-sref="apps.details.metrics({id: application.id})">Details</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.logging({id: application.id})" >Logging</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.jmx({id: application.id})">JMX</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.threads({id: application.id})">Threads</a></li>
<li class="navbar-link" ui-sref-active="active" ><a ui-sref="apps.trace({id: application.id})">Trace</a></li>
</ul>
<small class="navbar-text">{{ application.url }}</small>
</div>
</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">
<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>
......@@ -13,7 +14,6 @@
</tbody>
</table>
</div>
<div class="span6">
<table class="table">
<thead>
......@@ -24,7 +24,8 @@
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6">
<table class="table">
<thead><tr><th colspan="2">Memory</th></tr></thead>
......@@ -33,8 +34,7 @@
<td colspan="2">
<span>Total Memory ({{ metrics['mem.used'] | humanBytes:'K' }} / {{ metrics['mem'] | humanBytes:'K' }})</span>
<div class="progress" style="margin-bottom: 0px;">
<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}">
<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}">
{{memPercentage}}%
</div>
</div>
......@@ -44,8 +44,7 @@
<td colspan="2">
<span>Heap Memory ({{ metrics['heap.used'] | humanBytes:'K' }} / {{ metrics['heap.committed'] | humanBytes:'K' }})</span>
<div class="progress" style="margin-bottom: 0px;">
<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}">
<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}">
{{heapPercentage}}%
</div>
</div>
......@@ -97,10 +96,12 @@
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6">
<table class="table">
<thead><tr><th colspan="2">Garbage Collection</th></tr></thead>
<tbody>
<tr ng-repeat-start="(name, value) in gcInfos track by name">
<td>{{name | capitalize}} GC Count</td>
<td>{{value.count}}</td>
......@@ -116,12 +117,12 @@
<div class="span6" ng-show="hasDatasources">
<table class="table">
<thead><tr><th colspan="2">Datasources</th></tr></thead>
<tbody>
<tr ng-repeat = "(name, value) in datasources track by name">
<td colspan="2">
<span>{{name | capitalize}} Datasource Connections (active: {{ value.active }})</span>
<div class="progress" style="margin-bottom: 0px;">
<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}">
<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}">
{{value.usage * 100 | number}}%
</div>
</div>
......@@ -130,7 +131,8 @@
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span12">
<div class="main-template">
<div class="tab-pane active col-md-12">
......@@ -146,6 +148,7 @@
</div>
</div>
</div>
</div>
</div>
<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 }}
</div>
<div class="container">
</div>
<accordion close-others="true">
<accordion-group ng-repeat="domain in domains track by domain.name">
<accordion-heading>
......
spring-boot-admin-server-ui/app/views/apps/logging.html
<div class="container">
<div class="container content">
<form ng-init="showPackageLoggers = false">
<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>
......
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 }}
</div>
<div class="container">
</div>
<div class="row">
<div class="span12 text-center" >
<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 }}
</div>
<div class="container">
</div>
<div class="form-inline">
<button title="refresh" class="btn" ng-click="refresh()"><i class="icon-refresh"></i></button>
<div class="input-prepend input-append">
......
spring-boot-admin-server-ui/app/views/overview.html
<h2 >Spring-Boot applications<br>
<small>Here you'll find all Spring-Boot applications that registered themselves at this admin application.</small>
</h2>
<table class="table table-striped">
<div class="container-fluid content">
<h2 >Spring-Boot applications<br>
<small>Here you'll find all Spring-Boot applications that registered themselves at this admin application.</small>
</h2>
<table class="table table-striped">
<thead>
<tr>
<th><span class="sortable" ng-class="orderByCssClass('name')" ng-click="orderBy('name')">Application</span>
......@@ -40,4 +41,5 @@
</td>
</tr>
</tbody>
</table>
</table>
</div>
spring-boot-admin-server-ui/gulpfile.js
......@@ -79,7 +79,7 @@ gulp.task('lint', function () {
'app/js/**/*.js',
'test/**/*.js',
'!app/js/third-party/**',
'!test/browserified/**',
'!test/browserified/**'
])
.pipe(eslint())
.pipe(eslint.format());
......@@ -107,7 +107,7 @@ gulp.task('browserify', ['lint', 'unit'], function () {
gulp.task('ngAnnotate', ['lint', 'unit'], function () {
return gulp.src([
'app/js/**/*.js',
'!app/js/third-party/**',
'!app/js/third-party/**'
])
.pipe(ngAnnotage())
.pipe(gulp.dest(target('/ngAnnotate')));
......@@ -187,7 +187,7 @@ gulp.task('e2e', ['server'], skipTests(function () {
return gulp.src(['./test/e2e/**/*.js'])
.pipe(protractor({
configFile: forEnv('protractor.conf.js'),
args: ['--baseUrl', 'http://localhost:' + serverPort],
args: ['--baseUrl', 'http://localhost:' + serverPort]
}))
.on('error', function (e) {
throw e;
......@@ -202,7 +202,7 @@ gulp.task('watch', function () {
gulp.watch([
'app/**',
'!app/js/third-party/**',
'test/**/*.js',
'test/**/*.js'
], ['fast']);
});
......
spring-boot-admin-server-ui/test/unit/filter/humanBytes.js
'use strict';
var chai = require('chai')
, expect = chai.expect
, sinon = require('sinon')
, sinonChai = require('sinon-chai');
, expect = chai.expect;
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