Commit 27325103 by Johannes Stelzer

Redesgin layout in view to save some space.

Use tabs for idents, small lint fixes
parent a53ba390
......@@ -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;
......@@ -21,16 +19,16 @@ body {
}
a {
color: #5fa134;
color: #5fa134;
}
a:hover,
a:active {
color: #5fa134;
color: #5fa134;
}
pre {
white-space: pre;
white-space: pre;
}
/** HEADER **/
......@@ -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;
......
......@@ -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>
......
......@@ -31,7 +31,7 @@ var springBootAdmin = angular.module('springBootAdmin', [
'ngResource',
'ngRoute',
'ui.router',
'ui.bootstrap',
'ui.bootstrap'
]);
require('./controller');
......
<div class="container">
<div class="main-template">
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>
</div>
\ No newline at end of file
<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.
</p>
</div>
<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>
<table class="table table-striped">
<col style="width:30%">
<col style="width:auto">
<col style="width:30%">
<col style="width:auto">
<thead>
<tr>
<th>Classpath <small class="pull-right"><a href="{{ application.url }}/env">raw JSON</a></small></th>
......@@ -9,7 +9,7 @@
<tbody>
<tr ng-repeat="element in classpath">
<td style="text-wrap: none;">
{{ element }}
{{ element }}
</td>
</tr>
</tbody>
......
<table class="table table-striped">
<col style="width:30%">
<col style="width:auto">
<col style="width:30%">
<col style="width:auto">
<thead>
<tr>
<th>Property</th>
......
......@@ -5,9 +5,9 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="counter in counters">
<td><simple-metric-bar for-metric="counter" global-max="countersMax" ></simple-metric-bar></td>
</tr>
<tr ng-repeat="counter in counters">
<td><simple-metric-bar for-metric="counter" global-max="countersMax" ></simple-metric-bar></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="gauges.length > 0">
......@@ -17,11 +17,11 @@
</tr>
</thead>
<tbody>
<tr ng-if="showRichGauges" ng-repeat="gauge in gauges">
<td><rich-metric-bar for-metric="gauge" global-max="gaugesMax" ></rich-metric-bar></td>
</tr>
<tr ng-if="!showRichGauges" ng-repeat="gauge in gauges">
<td><simple-metric-bar for-metric="gauge" global-max="gaugesMax" ></simple-metric-bar></td>
</tr>
<tr ng-if="showRichGauges" ng-repeat="gauge in gauges">
<td><rich-metric-bar for-metric="gauge" global-max="gaugesMax" ></rich-metric-bar></td>
</tr>
<tr ng-if="!showRichGauges" ng-repeat="gauge in gauges">
<td><simple-metric-bar for-metric="gauge" global-max="gaugesMax" ></simple-metric-bar></td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<col style="width:30%">
<col style="width:auto">
<col style="width:30%">
<col style="width:auto">
<thead>
<tr>
<th>Property</th>
......
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="container">
<div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<accordion close-others="true">
<accordion-group ng-repeat="domain in domains track by domain.name">
<accordion-heading>
......@@ -30,8 +30,8 @@
<button class="btn" type="button" ng-click="readAllAttr(bean)">read</button>
</legend>
<div ng-show="bean.error" class="alert alert-error">
<b>Error:</b> {{ bean.error }}
</div>
<b>Error:</b> {{ bean.error }}
</div>
<div class="control-group" ng-repeat="(name, attr) in bean.attributes track by name" ng-class="{error: attr.error}">
<label class="control-label" for="{{name}}" style="word-break: break-all;">
{{name}}<br/>
......@@ -91,19 +91,19 @@
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" ng-click="$dismiss()" >Abort</button>
<button class="btn btn-inverse" ng-click="$close()">Execute</button>
</div>
</div>
<div class="modal-footer">
<button class="btn" ng-click="$dismiss()" >Abort</button>
<button class="btn btn-inverse" ng-click="$close()">Execute</button>
</div>
</script>
<script type="text/ng-template" id="invocationVariantDialog.html">
<div class="modal-header">
<h3>Variant for {{ invocation.opname }}</h3>
</div>
<div class="modal-body">
<p>The method is overloaded. Please choose a variant.</p>
<div class="modal-header">
<h3>Variant for {{ invocation.opname }}</h3>
</div>
<div class="modal-body">
<p>The method is overloaded. Please choose a variant.</p>
<form>
<div class="control-group" >
<button class="btn btn-block" style="text-align: left; padding-left: 5px;" ng-repeat="op in invocation.opdesc" ng-click="$close(op)">
......@@ -115,36 +115,36 @@
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" ng-click="$dismiss()">Abort</button>
</div>
</div>
<div class="modal-footer">
<button class="btn" ng-click="$dismiss()">Abort</button>
</div>
</script>
<script type="text/ng-template" id="invocationResultDialog.html">
<div class="modal-header">
<h3>Executing {{ invocation.opname }}</h3>
</div>
<div class="modal-body" ng-switch="invocation.state">
<div ng-switch-when="executing" class="progress progress-striped active">
<div class="bar">executing ... </div>
<div class="modal-header">
<h3>Executing {{ invocation.opname }}</h3>
</div>
<div class="modal-body" ng-switch="invocation.state">
<div ng-switch-when="executing" class="progress progress-striped active">
<div class="bar">executing ... </div>
</div>
<div ng-switch-when="success" >
<div class="alert alert-success">
<b>Success</b>
</div>
<h4>Result <small class="muted"> {{invocation.opdesc.ret}}</small></h4>
<pre>{{ invocation.result | json }}</pre>
<div class="alert alert-success">
<b>Success</b>
</div>
<h4>Result <small class="muted"> {{invocation.opdesc.ret}}</small></h4>
<pre>{{ invocation.result | json }}</pre>
</div>
<div ng-switch-when="error">
<div class="alert alert-error">
<b>Error:</b> {{ invocation.error }}
</div>
<h4>Stacktrace:</h4>
<div ng-switch-when="error">
<div class="alert alert-error">
<b>Error:</b> {{ invocation.error }}
</div>
<h4>Stacktrace:</h4>
<pre>{{ invocation.stacktrace }}</pre>
</div>
</div>
<div class="modal-footer">
<button class="btn" ng-click="$close()">Close</button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" ng-click="$close()">Close</button>
</div>
</script>
<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>
......@@ -12,15 +12,15 @@
<tr ng-repeat="logger in (filteredLoggers = (loggers | classNameLoggerOnly:!showPackageLoggers | filter:filterLogger) ) | limitTo: limit track by logger.name">
<td>
{{ logger.name }}
<div class="btn-group pull-right">
<label class="btn btn-small" ng-class="{'active btn-danger': logger.level== 'TRACE'}" ng-click="setLogLevel(logger.name, 'TRACE')">TRACE</label>
<label class="btn btn-small" ng-class="{'active btn-warning': logger.level=='DEBUG'}" ng-click="setLogLevel(logger.name, 'DEBUG')">DEBUG</label>
<label class="btn btn-small" ng-class="{'active btn-info': logger.level=='INFO'}" ng-click="setLogLevel(logger.name, 'INFO')">INFO</label>
<label class="btn btn-small" ng-class="{'active btn-success': logger.level == 'WARN'}" ng-click="setLogLevel(logger.name, 'WARN')">WARN</label>
<label class="btn btn-small" ng-class="{'active btn-primary': logger.level == 'ERROR'}" ng-click="setLogLevel(logger.name, 'ERROR')">ERROR</label>
<label class="btn btn-small" ng-class="{'active btn-inverse': logger.level == 'OFF'}" ng-click="setLogLevel(logger.name, 'OFF')">OFF</label>
</div>
</td>
<div class="btn-group pull-right">
<label class="btn btn-small" ng-class="{'active btn-danger': logger.level== 'TRACE'}" ng-click="setLogLevel(logger.name, 'TRACE')">TRACE</label>
<label class="btn btn-small" ng-class="{'active btn-warning': logger.level=='DEBUG'}" ng-click="setLogLevel(logger.name, 'DEBUG')">DEBUG</label>
<label class="btn btn-small" ng-class="{'active btn-info': logger.level=='INFO'}" ng-click="setLogLevel(logger.name, 'INFO')">INFO</label>
<label class="btn btn-small" ng-class="{'active btn-success': logger.level == 'WARN'}" ng-click="setLogLevel(logger.name, 'WARN')">WARN</label>
<label class="btn btn-small" ng-class="{'active btn-primary': logger.level == 'ERROR'}" ng-click="setLogLevel(logger.name, 'ERROR')">ERROR</label>
<label class="btn btn-small" ng-class="{'active btn-inverse': logger.level == 'OFF'}" ng-click="setLogLevel(logger.name, 'OFF')">OFF</label>
</div>
</td>
</tr>
<tr ng-show="limit < loggers.length" >
<td>
......@@ -34,4 +34,4 @@
</tr>
</tbody>
</table>
</div>
\ No newline at end of file
</div>
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="container">
<div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="row">
<div class="span12 text-center" >
<form>
......@@ -13,22 +13,22 @@
<div class="span12">
<div class="progress">
<div ng-if="threadStats.NEW &gt; 0" class="bar bar-info" style="width:{{ threadStats.NEW / threadStats.total * 100 | number:2 }}%;">
New {{ threadStats.NEW }}
New {{ threadStats.NEW }}
</div>
<div ng-if="threadStats.RUNNABLE &gt; 0" class="bar bar-success" style="width:{{ threadStats.RUNNABLE / threadStats.total * 100 | number:2 }}%;">
Runnable {{ threadStats.RUNNABLE }}
Runnable {{ threadStats.RUNNABLE }}
</div>
<div ng-if="threadStats.BLOCKED &gt; 0" class="bar bar-danger" style="width:{{ threadStats.BLOCKED / threadStats.total * 100 | number:2 }}%;">
Blocked {{ threadStats.BLOCKED }}
Blocked {{ threadStats.BLOCKED }}
</div>
<div ng-if="threadStats.WAITING &gt; 0" class="bar bar-warning" style="width:{{ threadStats.WAITING / threadStats.total * 100 | number:2 }}%;">
Waiting {{ threadStats.WAITING }}
Waiting {{ threadStats.WAITING }}
</div>
<div ng-if="threadStats.TIMED_WAITING &gt; 0" class="bar bar-warning bar-striped" style="width:{{ threadStats.TIMED_WAITING / threadStats.total * 100 | number:2 }}%;">
Timed waiting {{ threadStats.TIMED_WAITING }}
Timed waiting {{ threadStats.TIMED_WAITING }}
</div>
<div ng-if="threadStats.TERMINATED &gt; 0" class="bar bar-info" style="width:{{ threadStats.TERMINATED / threadStats.total * 100 | number:2 }}%;">
Terminated {{ threadStats.TERMINATED }}
Terminated {{ threadStats.TERMINATED }}
</div>
</div>
</div>
......
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="container">
<div class="form-inline">
<button title="refresh" class="btn" ng-click="refresh()"><i class="icon-refresh"></i></button>
<div class="input-prepend input-append">
<button title="auto refresh" class="btn" ng-click="toggleAutoRefresh()" ng-class="{'active':refresher != null}"><i ng-class="{'icon-play':refresher == null, 'icon-pause':refresher != null}"></i></button>
<input class="input-mini" type="number" min="1" ng-model="refreshInterval" ng-disabled="refresher != null"></input>
<span class="add-on">sec</span>
</div>
</div>
<ul class="timeline">
<li ng-repeat="trace in traces | orderBy:'timestamp':true" >
<div class="event" ng-click="trace.show = !trace.show">
<div class="time">
{{trace.timestamp | date:'HH:mm:ss.sss'}}
<small class="muted">{{trace.timestamp | date:'dd.MM.yyyy'}}</small><br/>
</div>
<div class="title"><span class="muted">{{trace.info.method}}</span> {{trace.info.path}}</div>
<pre class="content" ng-show="trace.show">{{trace.info | json}}</pre>
</div>
</li>
</ul>
<div class="container content">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</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">
<button title="auto refresh" class="btn" ng-click="toggleAutoRefresh()" ng-class="{'active':refresher != null}"><i ng-class="{'icon-play':refresher == null, 'icon-pause':refresher != null}"></i></button>
<input class="input-mini" type="number" min="1" ng-model="refreshInterval" ng-disabled="refresher != null"></input>
<span class="add-on">sec</span>
</div>
</div>
<ul class="timeline">
<li ng-repeat="trace in traces | orderBy:'timestamp':true" >
<div class="event" ng-click="trace.show = !trace.show">
<div class="time">
{{trace.timestamp | date:'HH:mm:ss.sss'}}
<small class="muted">{{trace.timestamp | date:'dd.MM.yyyy'}}</small><br/>
</div>
<div class="title"><span class="muted">{{trace.info.method}}</span> {{trace.info.path}}</div>
<pre class="content" ng-show="trace.show">{{trace.info | json}}</pre>
</div>
</li>
</ul>
</div>
<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>
/
<span class="sortable" ng-class="orderByCssClass('url')" ng-click="orderBy('url')">URL</span>
</th>
<th><span class="sortable" ng-class="orderByCssClass('version')" ng-click="orderBy('version')">Version</span></th>
<th>Info</th>
<th colspan="2">Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="application in applications|orderBy:order.column:order.descending|orderBy:'status':false track by application.id">
<td>{{ application.name }}<br/><span class="muted">{{ application.url }}</span></td>
<td>{{ application.version }}</td>
<td><span ng-repeat="(name, value) in application.info track by name">{{name}}: {{value}}<br></span></td>
<td><span class="status-{{application.status}}">{{ application.status }}</span>
<span ng-show="application.refreshing" class="refresh"></span></td>
<td style="text-align: right;">
<div class="btn-group" ng-hide="application.status == null || application.status == 'OFFLINE'">
<a ng-disabled="!application.providesLogfile" target="_self" class="btn btn-success" ng-href="{{application.providesLogfile ? application.url + '/logfile' :''}}"><i class="icon-file icon-white"></i>Log</a>
<a ui-sref="apps.details.metrics({id: application.id})" class="btn btn-success">Details</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a ui-sref="apps.logging({id: application.id})" >Logging</a></li>
<li><a ui-sref="apps.jmx({id: application.id})" >JMX</a></li>
<li><a ui-sref="apps.threads({id: application.id})" >Threads</a></li>
<li><a ui-sref="apps.trace({id: application.id})" >Trace</a></li>
</ul>
</div>
<div class="btn-group" title="remove">
<a class="btn btn-danger" ng-click="remove(application)"><i class="icon-remove icon-white"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
<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>
/
<span class="sortable" ng-class="orderByCssClass('url')" ng-click="orderBy('url')">URL</span>
</th>
<th><span class="sortable" ng-class="orderByCssClass('version')" ng-click="orderBy('version')">Version</span></th>
<th>Info</th>
<th colspan="2">Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="application in applications|orderBy:order.column:order.descending|orderBy:'status':false track by application.id">
<td>{{ application.name }}<br/><span class="muted">{{ application.url }}</span></td>
<td>{{ application.version }}</td>
<td><span ng-repeat="(name, value) in application.info track by name">{{name}}: {{value}}<br></span></td>
<td><span class="status-{{application.status}}">{{ application.status }}</span>
<span ng-show="application.refreshing" class="refresh"></span></td>
<td style="text-align: right;">
<div class="btn-group" ng-hide="application.status == null || application.status == 'OFFLINE'">
<a ng-disabled="!application.providesLogfile" target="_self" class="btn btn-success" ng-href="{{application.providesLogfile ? application.url + '/logfile' :''}}"><i class="icon-file icon-white"></i>Log</a>
<a ui-sref="apps.details.metrics({id: application.id})" class="btn btn-success">Details</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a ui-sref="apps.logging({id: application.id})" >Logging</a></li>
<li><a ui-sref="apps.jmx({id: application.id})" >JMX</a></li>
<li><a ui-sref="apps.threads({id: application.id})" >Threads</a></li>
<li><a ui-sref="apps.trace({id: application.id})" >Trace</a></li>
</ul>
</div>
<div class="btn-group" title="remove">
<a class="btn btn-danger" ng-click="remove(application)"><i class="icon-remove icon-white"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
......@@ -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']);
});
......
'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