Commit 48aacc4f by joshiste Committed by Johannes Stelzer

* Redesigned Details-View

* Removed a bunch of useless CSS * Prepared DI-usage for minification
parent b6a8d375
This diff was suppressed by a .gitattributes entry.
......@@ -22,7 +22,7 @@
<div class="viewport">
<header class="navbar header--navbar desktop-only">
<div class="navbar-inner">
<div class="container-fluid">
<div class="container-fluid" >
<div class="spring-logo--container">
<a class="spring-logo" href="/"><span></span></a>
</div>
......@@ -30,30 +30,22 @@
<a class="spring-boot-logo" href="/"><span></span></a>
</div>
<ul class="nav pull-right" ng-controller='navCtrl'>
<li class="navbar-link" ng-class="{active: $state.includes('apps')}"><a ui-sref="apps.overview">Applications</a></li>
<li class="navbar-link" ng-class="{active: $state.includes('apps') || $state.includes('overview') }"><a ui-sref="overview">Applications</a></li>
<li class="navbar-link" ng-class="{active: $state.includes('about')}"><a ui-sref="about">About</a></li>
<li class="navbar-link" ng-if="authenticationEnabled" class="dropdown"><a data-target="#" class="dropdown-toggle"
data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-if="user.isAuthenticated"><a ui-sref="logout">Logout</a></li>
<li ng-if="!user.isAuthenticated"><a ui-sref="login">Login</a></li>
</ul></li>
</ul>
</div>
</div>
</header>
<div class="body--container container-fluid ">
<div class="container-fluid ">
<div class="main-body--wrapper">
<div ui-view></div>
</div>
<div id="footer-push-down"></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>
</div>
</footer>
<div id="scrim"></div>
</div>
<script src="/webjars/jquery/${jquery.version}/jquery.min.js"></script>
<script src="/webjars/angularjs/${angularjs.version}/angular.min.js"></script>
......
......@@ -25,34 +25,28 @@ angular.module('springBootAdmin', [
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/', '/apps/overview')
.when('/', '/overview')
.otherwise('/')
$stateProvider
.state('apps', {
url: '/apps',
abstract: true,
templateUrl: 'views/apps.html',
.state('overview', {
url: '/overview',
templateUrl: 'views/overview.html',
controller: 'overviewCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html'
})
.state('apps.overview', {
url: '/overview',
templateUrl: 'views/apps/overview.html',
controller: 'overviewCtrl'
.state('apps', {
url: '/apps/:id',
controller: 'appsCtrl',
templateUrl: 'views/apps.html',
})
.state('apps.details', {
url: '/details/:id',
abstract: true,
url: '/details',
templateUrl: 'views/apps/details.html',
controller: 'detailsCtrl'
})
.state('apps.details.infos', {
url: '/infos',
templateUrl: 'views/apps/details/infos.html',
controller: 'detailsInfosCtrl'
})
.state('apps.details.metrics', {
url: '/metrics',
templateUrl: 'views/apps/details/metrics.html',
......@@ -74,12 +68,12 @@ angular.module('springBootAdmin', [
controller: 'detailsClasspathCtrl'
})
.state('apps.logging', {
url: '/logging/:id',
url: '/logging',
templateUrl: 'views/apps/logging.html',
controller: 'loggingCtrl'
})
.state('apps.jmx', {
url: '/jmx/:id',
url: '/jmx',
templateUrl: 'views/apps/jmx.html',
controller: 'jmxCtrl'
});
......
......@@ -16,10 +16,11 @@
'use strict';
angular.module('springBootAdmin')
.controller('overviewCtrl', function ($scope, Applications, Application, ApplicationOverview, $location, $interval) {
.controller('overviewCtrl', ['$scope', '$location', '$interval', 'Applications', 'ApplicationOverview',
function ($scope, $location, $interval, Applications, ApplicationOverview) {
$scope.loadData = function() {
$scope.applications = Applications.query({}, function(applications) {
for (var i = 0; i < applications.length; i++) {
for (var i in applications) {
var app = applications[i];
ApplicationOverview.getVersion(app);
ApplicationOverview.getHealth(app);
......@@ -28,44 +29,59 @@ angular.module('springBootAdmin')
});
}
$scope.loadData();
// callback for ng-click 'showDetails':
$scope.showDetails = function(id) {
$location.path('/apps/details/' + id + '/infos');
};
// callback for ng-click 'showLogging':
$scope.showLogging = function(id) {
$location.path('/apps/logging/' + id);
};
// callback for ng-click 'showJmx':
$scope.showJmx = function(id) {
$location.path('/apps/jmx/' + id);
};
// callback for ng-click 'refresh':
$scope.refresh = function(id) {
$scope.application = Application.query({id: id}, function(application) {
ApplicationOverview.refresh(application);
});
};
// reload site every 30 seconds
var task = $interval(function() {
$scope.loadData();
}, 30000);
})
.controller('navCtrl', function ($scope, $location) {
$scope.navClass = function(page) {
var currentRoute = $location.path().substring(1) || 'main';
return page == currentRoute ? 'active' : '';
};
})
.controller('detailsCtrl', function ($scope, $stateParams, Application) {
$scope.application = Application.query({id: $stateParams.id});
})
.controller('detailsInfosCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
}])
.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
}])
.controller('appsCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
$scope.applicationId = $stateParams.id;
}])
.controller('detailsCtrl', ['$scope', '$stateParams', '$interval', 'Application', 'ApplicationDetails',
function ($scope, $stateParams, $interval, Application, ApplicationDetails) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getInfo(application);
ApplicationDetails.getMetrics(application, function(application){
application.metrics["mem.used"] = application.metrics["mem"] - $scope.application.metrics["mem.free"];
$scope.gcInfos = {};
for (var metric in application.metrics) {
var matchTime = /gc\.(.+)\.time/.exec(metric);
if ( matchTime !== null) {
var gcName = matchTime[1];
if ($scope.gcInfos[gcName] == null) $scope.gcInfos[gcName] = {};
$scope.gcInfos[gcName].time = application.metrics[metric];
}
var matchCount = /gc\.(.+)\.count/.exec(metric);
if ( matchCount !== null) {
var gcName = matchCount[1];
if ($scope.gcInfos[gcName] == null) $scope.gcInfos[gcName] = {};
$scope.gcInfos[gcName].count = application.metrics[metric];
}
}
});
})
.controller('detailsMetricsCtrl', function ($scope, $stateParams, Application, ApplicationDetails, Abbreviator) {
});
var start = Date.now();
var tick = $interval(function() {
$scope.ticks = Date.now() - start;
},1000);
}])
.controller('detailsMetricsCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationDetails', 'Abbreviator',
function ($scope, $stateParams, Application, ApplicationDetails, Abbreviator) {
$scope.memoryData = [];
$scope.heapMemoryData = [];
$scope.counterData = [];
......@@ -73,17 +89,6 @@ angular.module('springBootAdmin')
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getMetrics(application, function(application) {
//*** Extract data for JVM-Memory-Chart
application.metrics["mem.used"] = application.metrics["mem"] - $scope.application.metrics["mem.free"];
$scope.memoryData = [ ['Free Memory', application.metrics["mem.free"]],
['Used Memory', application.metrics["mem.used"]] ];
//*** Extract data for Heap-Memory-Chart
application.metrics["heap.free"] = application.metrics["heap"] - $scope.application.metrics["heap.used"];
$scope.heapMemoryData = [ ['Free Heap', application.metrics["heap.free"]],
['Used Heap', application.metrics["heap.used"]] ];
//*** Extract data for Counter-Chart and Gauge-Chart
$scope.counterData = [ { key : "value", values: [] } ];
$scope.gaugeData = [ { key : "value", values: [] },
......@@ -176,23 +181,27 @@ angular.module('springBootAdmin')
}
}
})
.controller('detailsEnvCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
}])
.controller('detailsEnvCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationDetails',
function ($scope, $stateParams, Application, ApplicationDetails) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getEnv(application);
});
})
.controller('detailsPropsCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
}])
.controller('detailsPropsCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationDetails',
function ($scope, $stateParams, Application, ApplicationDetails) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getProps(application);
});
})
.controller('detailsClasspathCtrl', function ($scope, $stateParams, Application, ApplicationDetails, Abbreviator) {
}])
.controller('detailsClasspathCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationDetails', 'Abbreviator',
function ($scope, $stateParams, Application, ApplicationDetails, Abbreviator) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getClasspath(application);
});
})
.controller('loggingCtrl', function ($scope, $stateParams, $filter, Application, ApplicationLogging) {
}])
.controller('loggingCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationLogging',
function ($scope, $stateParams, Application, ApplicationLogging) {
$scope.loggers = [];
$scope.filteredLoggers = [];
$scope.limit = 10;
......@@ -272,8 +281,9 @@ angular.module('springBootAdmin')
console.log(response.stacktrace);
})
});
})
.controller('jmxCtrl', function ($scope, $stateParams, $modal, Application, ApplicationJMX) {
}])
.controller('jmxCtrl', ['$scope', '$stateParams', '$modal', 'Application', 'ApplicationJMX',
function ($scope, $stateParams, $modal, Application, ApplicationJMX) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
$scope.error = null;
$scope.domains = [];
......@@ -366,4 +376,4 @@ angular.module('springBootAdmin')
}
}
}
});
}]);
......@@ -16,21 +16,20 @@
'use strict';
angular.module('springBootAdmin')
.filter('ceil', function() {
return function(input) {
return Math.ceil(input);
.filter('timeInterval', function() {
function padZero(i,n) {
var s = i + "";
while (s.length < n) s = "0" + s;
return s;
}
})
.filter('floor', function() {
return function(input) {
return Math.floor(input);
}
})
.filter('padZero', function() {
return function(input) {
var s = input + "";
while (s.length < 2) s = "0" + s;
return s;
var s = input || 0;
var d = padZero(Math.floor(s / 86400000),2);
var h = padZero(Math.floor(s % 86400000 / 3600000),2);
var m = padZero(Math.floor(s % 3600000 / 60000),2);
var s = padZero(Math.floor(s % 60000 / 1000),2);
return d + ':' + h + ':' + m + ':' + s;
}
})
.filter('classNameLoggerOnly', function() {
......@@ -49,3 +48,10 @@ angular.module('springBootAdmin')
return result;
}
})
.filter('capitalize', function() {
return function(input, active) {
var s = input + "";
return s.charAt(0).toUpperCase() + s.slice(1);
}
})
;
\ No newline at end of file
......@@ -100,7 +100,8 @@ angular.module('springBootAdmin.services', ['ngResource'])
}
this.getClasspath = function(app) {
return $http.get(app.url + '/env').success(function(response) {
app.classpath = response['systemProperties']['java.class.path'].split(":");
var seperator = response['systemProperties']['path.separator'];
app.classpath = response['systemProperties']['java.class.path'].split(seperator);
});
}
}])
......
#authentication {
line-height: 20px;
padding: 10px 0;
}
ul.download-links {
list-style-type: none;
margin-left: 0;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.nvd3 text, div.nvtooltip {
font-size: 14px;
}
ul.chart-legend {
list-style: none;
}
ul.chart-legend li:before {
content: '\2022';
font-size: 250%;
vertical-align: middle;
}
li.chart-1:before {
color: #6db33f;
}
li.chart-2:before {
color: #a5b2b9;
}
li.chart-3:before {
color: #34302d;
}
li.no-bullet:before {
color: rgba(0,0,0, 0.0);
}
\ No newline at end of file
.btn.btn-black {
background-color: #34302d;
background-image: none;
border-radius: 0;
color: #f1f1f1;
font-size: 14px;
line-height: 14px;
font-family: "Montserrat", sans-serif;
border: 2px solid #6db33f;
padding: 21px 60px;
text-shadow: none;
transition: border 0.15s;
-webkit-transition: border 0.15s;
-moz-transition: border 0.15s;
-o-transition: border 0.15s;
-ms-transition: border 0.15s;
}
.btn.btn-black.compact {
padding: 6px 12px;
font-size: 12px;
}
.btn.btn-black.sub-text {
padding: 12px 0;
}
.btn.btn-black.sub-text p {
margin-top: 6px;
color: #eeeeee;
font-size: 14px;
line-height: 14px;
font-family: "Montserrat", sans-serif;
text-transform: none;
}
.btn.btn-black.on-black:hover {
border-color: #6db33f;
box-shadow: 0 1px 3px #0b0a0a;
}
.btn.btn-black.on-black:active {
box-shadow: 0 1px 3px #0b0a0a, inset 0 3px 6px #0b0a0a;
border-color: #6db33f;
}
.btn.btn-black.with-icon [class^="icon-"] {
margin-right: 21px;
font-size: 20px;
vertical-align: top;
line-height: 10px;
}
.btn.btn-black:hover {
border-color: #34302d;
box-shadow: none;
text-decoration: none;
}
.btn.btn-black:active {
box-shadow: inset 0 3px 6px #0b0a0a;
border-color: #34302d;
}
.btn.uppercase {
text-transform: uppercase;
}
/*
* Font Custom: bare CSS
*/
@font-face {
font-family: "fontcustom";
src: url("../font-custom/fontcustom.eot");
src: url("../font-custom/fontcustom.eot?#iefix") format("embedded-opentype"),
url("../font-custom/fontcustom.woff") format("woff"),
url("../font-custom/fontcustom.ttf") format("truetype"),
url("../font-custom/fontcustom.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
.icon-community-support,
.icon-gs-guides-black,
.icon-professional-support,
.icon-spring-amqp,
.icon-spring-android,
.icon-spring-batch,
.icon-spring-data,
.icon-spring-framework,
.icon-spring-hateos,
.icon-spring-integration,
.icon-spring-leaf,
.icon-spring-logo,
.icon-spring-mobile,
.icon-spring-security,
.icon-spring-social,
.icon-spring-web-flow,
.icon-spring-web-services,
.icon-tutorials-black {
font-family: "fontcustom" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block !important;
text-decoration: inherit;
}
.icon-community-support:before { content: "\f100"; }
.icon-gs-guides-black:before { content: "\f101"; }
.icon-professional-support:before { content: "\f102"; }
.icon-spring-amqp:before { content: "\f103"; }
.icon-spring-android:before { content: "\f104"; }
.icon-spring-batch:before { content: "\f105"; }
.icon-spring-data:before { content: "\f106"; }
.icon-spring-framework:before { content: "\f107"; }
.icon-spring-hateos:before { content: "\f108"; }
.icon-spring-integration:before { content: "\f109"; }
.icon-spring-leaf:before { content: "\f10a"; }
.icon-spring-logo:before { content: "\f10b"; }
.icon-spring-mobile:before { content: "\f10c"; }
.icon-spring-security:before { content: "\f10d"; }
.icon-spring-social:before { content: "\f10e"; }
.icon-spring-web-flow:before { content: "\f10f"; }
.icon-spring-web-services:before { content: "\f110"; }
.icon-tutorials-black:before { content: "\f111"; }
.highlight .hll {
background-color: #ffffcc;
}
.highlight .c {
color: #999988;
font-style: italic;
}
/* Comment */
.highlight .err {
color: #a61717;
background-color: #e3d2d2;
}
/* Error */
.highlight .k {
color: #000000;
font-weight: bold;
}
/* Keyword */
.highlight .o {
color: #000000;
font-weight: bold;
}
/* Operator */
.highlight .cm {
color: #999988;
font-style: italic;
}
/* Comment.Multiline */
.highlight .cp {
color: #999999;
font-weight: bold;
font-style: italic;
}
/* Comment.Preproc */
.highlight .c1 {
color: #999988;
font-style: italic;
}
/* Comment.Single */
.highlight .cs {
color: #999999;
font-weight: bold;
font-style: italic;
}
/* Comment.Special */
.highlight .gd {
color: #000000;
background-color: #ffdddd;
}
/* Generic.Deleted */
.highlight .ge {
color: #000000;
font-style: italic;
}
/* Generic.Emph */
.highlight .gr {
color: #aa0000;
}
/* Generic.Error */
.highlight .gh {
color: #999999;
}
/* Generic.Heading */
.highlight .gi {
color: #000000;
background-color: #ddffdd;
}
/* Generic.Inserted */
.highlight .go {
color: #888888;
}
/* Generic.Output */
.highlight .gp {
color: #555555;
}
/* Generic.Prompt */
.highlight .gs {
font-weight: bold;
}
/* Generic.Strong */
.highlight .gu {
color: #aaaaaa;
}
/* Generic.Subheading */
.highlight .gt {
color: #aa0000;
}
/* Generic.Traceback */
.highlight .kc {
color: #000000;
font-weight: bold;
}
/* Keyword.Constant */
.highlight .kd {
color: #000000;
font-weight: bold;
}
/* Keyword.Declaration */
.highlight .kn {
color: #000000;
font-weight: bold;
}
/* Keyword.Namespace */
.highlight .kp {
color: #000000;
font-weight: bold;
}
/* Keyword.Pseudo */
.highlight .kr {
color: #000000;
font-weight: bold;
}
/* Keyword.Reserved */
.highlight .kt {
color: #445588;
font-weight: bold;
}
/* Keyword.Type */
.highlight .m {
color: #009999;
}
/* Literal.Number */
.highlight .s {
color: #d01040;
}
/* Literal.String */
.highlight .na {
color: teal;
}
/* Name.Attribute */
.highlight .nb {
color: #0086b3;
}
/* Name.Builtin */
.highlight .nc {
color: #445588;
font-weight: bold;
}
/* Name.Class */
.highlight .no {
color: teal;
}
/* Name.Constant */
.highlight .nd {
color: #3c5d5d;
font-weight: bold;
}
/* Name.Decorator */
.highlight .ni {
color: purple;
}
/* Name.Entity */
.highlight .ne {
color: #990000;
font-weight: bold;
}
/* Name.Exception */
.highlight .nf {
color: #990000;
font-weight: bold;
}
/* Name.Function */
.highlight .nl {
color: #990000;
font-weight: bold;
}
/* Name.Label */
.highlight .nn {
color: #555555;
}
/* Name.Namespace */
.highlight .nt {
color: navy;
}
/* Name.Tag */
.highlight .nv {
color: teal;
}
/* Name.Variable */
.highlight .ow {
color: #000000;
font-weight: bold;
}
/* Operator.Word */
.highlight .w {
color: #bbbbbb;
}
/* Text.Whitespace */
.highlight .mf {
color: #009999;
}
/* Literal.Number.Float */
.highlight .mh {
color: #009999;
}
/* Literal.Number.Hex */
.highlight .mi {
color: #009999;
}
/* Literal.Number.Integer */
.highlight .mo {
color: #009999;
}
/* Literal.Number.Oct */
.highlight .sb {
color: #d01040;
}
/* Literal.String.Backtick */
.highlight .sc {
color: #d01040;
}
/* Literal.String.Char */
.highlight .sd {
color: #d01040;
}
/* Literal.String.Doc */
.highlight .s2 {
color: #d01040;
}
/* Literal.String.Double */
.highlight .se {
color: #d01040;
}
/* Literal.String.Escape */
.highlight .sh {
color: #d01040;
}
/* Literal.String.Heredoc */
.highlight .si {
color: #d01040;
}
/* Literal.String.Interpol */
.highlight .sx {
color: #d01040;
}
/* Literal.String.Other */
.highlight .sr {
color: #009926;
}
/* Literal.String.Regex */
.highlight .s1 {
color: #d01040;
}
/* Literal.String.Single */
.highlight .ss {
color: #990073;
}
/* Literal.String.Symbol */
.highlight .bp {
color: #999999;
}
/* Name.Builtin.Pseudo */
.highlight .vc {
color: teal;
}
/* Name.Variable.Class */
.highlight .vg {
color: teal;
}
/* Name.Variable.Global */
.highlight .vi {
color: teal;
}
/* Name.Variable.Instance */
.highlight .il {
color: #009999;
}
/* Literal.Number.Integer.Long */
.icon {
background-image: url("../img/iconsprite.png");
display: inline-block !important;
}
.icon.icon-spring-logo-mobile {
width: 204px;
height: 60px;
background-position: 904px 302px;
margin-top: -13px;
transform: scale(0.5);
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
}
.icon.icon-spring-logo-big {
width: 154px;
height: 154px;
background-position: 154px 191px;
}
.icon.project--logo.logo-spring-framework {
width: 135px;
height: 133px;
background-position: 518px 837px;
margin-top: 2px;
}
.icon.project--logo.logo-spring-security {
width: 99px;
height: 137px;
background-position: 519px 677px;
}
.icon.project--logo.logo-spring-data {
width: 111px;
height: 111px;
background-position: 519px 512px;
margin-top: 13px;
}
.icon.project--logo.logo-spring-batch {
width: 104px;
height: 108px;
background-position: 360px 837px;
margin-top: 14px;
}
.icon.project--logo.logo-spring-integration {
width: 145px;
height: 104px;
background-position: 361px 677px;
margin-top: 16px;
}
.icon.project--logo.logo-spring-amqp {
width: 109px;
height: 98px;
background-position: 361px 513px;
margin: 19px;
}
.icon.project--logo.logo-spring-default {
width: 100px;
height: 100px;
background-position: -805px 0;
margin-top: 18px;
}
.icon.project--logo.logo-spring-mobile {
width: 104px;
height: 137px;
background-position: 196px 677px;
}
.icon.project--logo.logo-spring-android {
width: 104px;
height: 126px;
background-position: 196px 513px;
margin-top: 10px;
}
.icon.project--logo.logo-spring-social {
width: 130px;
height: 100px;
background-position: 518px 357px;
margin-top: 18px;
}
.icon.project--logo.logo-spring-hateoas {
width: 126px;
height: 99px;
background-position: 518px 256px;
margin-top: 19px;
}
.icon.project--logo.logo-spring-webflow {
width: 99px;
height: 99px;
background-position: 619px 256px;
margin-top: 19px;
}
.icon.project--logo.logo-spring-web-services {
width: 100px;
height: 100px;
background-position: 532px 155px;
margin-top: 19px;
}
.icon.project--logo.logo-spring-xd {
width: 104px;
height: 113px;
background-position: 247px 837px;
margin-top: 11px;
}
.icon.project--logo.logo-spring-boot {
width: 102px;
height: 90px;
background-position: 143px 837px;
margin-top: 23px;
}
.icon.project--logo.logo-spring-ldap {
width: 93px;
height: 105px;
background-position: 247px 944px;
margin-top: 19px;
}
.icon.project--logo.logo-grails {
width: 107px;
height: 100px;
background-position: 361px 944px;
margin-top: 23px;
}
.icon.project--logo.logo-groovy {
width: 183px;
height: 92px;
background-position: 546px 940px;
margin-top: 23px;
}
.icon.project--logo.logo-spring-cloud {
width: 150px;
height: 111px;
background-position: 698px 955px;
margin-top: 13px;
}
.icon.icon-projects {
width: 28px;
height: 28px;
background-position: -641px -481px;
}
.icon.icon-projects:hover {
background-position: -641px -521px;
}
.icon.icon-forum {
width: 32px;
height: 32px;
background-position: -409px -450px;
}
.icon.icon-forum:hover {
background-position: -449px -450px;
}
.icon.icon-current-version {
height: 13px;
width: 42px;
background-position: 718px 317px;
}
.icon.icon-pre-release {
height: 13px;
width: 23px;
background-position: 657px 317px;
}
.icon.icon-ga-release {
margin-left: 0 !important;
height: 13px;
width: 9px;
background-position: 626px 317px;
background-color: #6db33f;
padding: 0 2px;
border-radius: 10px;
}
.icon.icon-snapshot-release {
height: 13px;
width: 46px;
background-position: 603px 317px;
}
.icon.logo-eclipse-text {
width: 159px;
height: 38px;
background-position: 603px 38px;
}
.icon.icon-social-twitter {
width: 36px;
height: 36px;
background-position: -1px -143px;
}
.icon.icon-social-twitter:hover {
background-position: -84px -143px;
}
.icon.icon-build-anything {
width: 107px;
background-position: 107px 279px;
height: 88px;
}
.icon.icon-run-anywhere {
background-position: 120px 344px;
width: 120px;
height: 65px;
margin-top: 11px;
}
.icon.icon-rest-assured {
background-position: 253px 86px;
width: 86px;
height: 86px;
margin-top: 1px;
}
.icon.icon-community-support {
width: 97px;
height: 97px;
background-position: 257px 185px;
font-size: 0;
}
.icon.icon-professional-support {
width: 126px;
height: 97px;
background-position: 272px 282px;
font-size: 0;
}
.icon.icon-gs-guides {
width: 73px;
height: 101px;
background-position: 356px 101px;
}
.icon.icon-tutorial {
width: 73px;
height: 101px;
background-position: 430px 101px;
}
.icon.blog-icon {
width: 20px;
height: 20px;
vertical-align: middle;
}
.icon.blog-icon.comments {
background-position: 20px 636px;
}
.icon.blog-icon.calendar {
background-position: 20px 594px;
}
.icon.blog-icon.all-posts {
background-position: 20px 561px;
}
.icon.blog-icon.broadcasts {
background-position: 20px 519px;
}
.icon.blog-icon.engineering {
background-position: 20px 477px;
}
.icon.blog-icon.releases {
background-position: 20px 433px;
}
.icon.blog-icon.news-and-events {
background-position: 20px 387px;
}
.icon.about-icon.team {
width: 183px;
height: 127px;
background-position: 902px 202px;
}
.icon.about-icon.jobs {
width: 112px;
height: 85px;
background-position: 387px 415px;
margin: 21px 0;
}
.icon.about-icon.pivotal {
width: 93px;
height: 114px;
background-position: 387px 329px;
margin: 6px 0 7px;
}
i.icon {
background-image: none;
}
@import "fontcustom.css";
@import "icons.css";
@import "buttons.css";
@import "typography.css";
@import "base.css";
@import "application.css";
@import "highlight.css";
/** main classes **/
.accordion-heading ,
.table > thead > tr > th {
background-color: #34302D; /* lighten 3% */
color: #f1f1f1;
body {
background-color: #f1f1f1;
}
.tabs-left > ul {
max-width: 30%;
overflow: hidden;
.container-fluid {
max-width: 1024px;
margin: 0 auto;
}
.table tr.highlight > td {
background-color: #a5b2b9 !important;
font-weight: bold;
.main-body--wrapper {
margin-top: 50px;
margin-bottom: 50px;
}
.table-filter {
background-color: #34302D;
padding: 9px 12px;
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.nav > li > a {
color: #838789;
/** NVD3 **/
.nvd3 text, div.nvtooltip {
font-size: 14px;
}
.nav {
margin-bottom: 0;
/** HEADER **/
.header--navbar {
margin: 0;
}
.header--navbar .navbar-inner {
position: absolute;
z-index: 999;
background-image: none;
filter: none;
background-color: #34302d;
border: none;
border-top: 4px solid #6db33f;
box-shadow: none;
position: relative;
border-radius: 0;
padding: 0;
}
.header--navbar .navbar-inner .spring-logo--container {
display: inline-block;
}
.header--navbar .navbar-inner .spring-logo--container .spring-logo {
margin: 12px 0 6px;
width: 160px;
height: 46px;
display: inline-block;
text-decoration: none;
}
.header--navbar .navbar-inner .navbar-link.active a {
background-color: #6db33f;
box-shadow: none;
}
.header--navbar .navbar-inner .navbar-link a {
color: #eeeeee;
text-transform: uppercase;
text-shadow: none;
font-size: 14px;
line-height: 14px;
padding: 28px 20px;
transition: all 0.15s;
-webkit-transition: all 0.15s;
-moz-transition: all 0.15s;
-o-transition: all 0.15s;
-ms-transition: all 0.15s;
}
.header--navbar .navbar-inner .navbar-link:hover a {
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;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
background-color: #34302D;
border-color: #34302D;
color: #f1f1f1;
a.spring-logo {
background: url("../img/spring-logo.png") -1px -1px no-repeat;
}
a.spring-logo span {
display: block;
width: 160px;
height: 46px;
background: url("../img/spring-logo.png") -1px -48px no-repeat;
opacity: 0;
-moz-transition: opacity 0.12s ease-in-out;
-webkit-transition: opacity 0.12s ease-in-out;
-o-transition: opacity 0.12s ease-in-out;
}
a:hover.spring-logo span {
opacity: 1;
}
/** FOOTER **/
.footer {
background-color: #34302d;
color: #eeeeee;
padding: 30px 0;
}
.footer a {
color: #6db33f;
}
/** LOGOS **/
a.spring-boot-logo {
background: url("../img/platform-spring-boot.png") -1px -1px no-repeat;
}
......@@ -56,6 +137,8 @@ a:hover.spring-boot-logo span {
opacity: 1;
}
/** Status in Application Overview-View **/
span.up {
color: #00AA00;
}
......@@ -73,3 +156,38 @@ span.down, span.outofservice {
span.unknown {
color: #DDDDDD;
}
/** Headings and Tabs in Detail-View **/
.accordion-heading ,
.accordion-heading > a,
.accordion-heading > a:hover,
.accordion-heading > a:focus,
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus,
.table > thead > tr > th {
background-color: #34302D;
border-color: #34302D;
color: #f1f1f1;
}
.nav > li > a {
color: #838789;
}
.nav {
margin-bottom: 0;
}
/** highlighted rows on Detail-Environment-View **/
.table tr.highlight > td {
background-color: #999 !important;
font-weight: bold;
}
/** Tabs-list in domain-section in JMX-View **/
.tabs-left > ul {
max-width: 30%;
overflow: hidden;
}
body, h1, h2, h3, p, input {
margin: 0;
font-weight: 400;
font-family: "Varela Round", sans-serif;
color: #34302d;
}
h1 {
font-size: 24px;
line-height: 30px;
font-family: "Montserrat", sans-serif;
}
h2 {
font-size: 18px;
font-weight: 700;
line-height: 24px;
margin-bottom: 10px;
font-family: "Montserrat", sans-serif;
}
h3 {
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
font-weight: 700;
}
p {
font-size: 15px;
line-height: 24px;
}
p a {
color: #5fa134;
}
p a:hover {
color: #5fa134;
}
code {
font-size: 14px;
}
<h2>{{ applicationId }}
<div class="btn-group">
<a class="btn " ng-class="{active: $state.includes('apps.details')}" ui-sref="apps.details.metrics({id: applicationId})">Details</a>
<a class="btn " ui-sref-active="active" ui-sref="apps.logging({id: applicationId})" >Logging</a></label>
<a class="btn " ui-sref-active="active" ui-sref="apps.jmx({id: applicationId})">JMX</a></label>
</div>
</h2>
<div ui-view></div>
<div class="row-fluid">
<div class="span12">
<h1 class="index-page--title">{{ application.id }}</h1>
<p class="index-page--subtitle">Show information provided by the Spring-Boot Actuators.</p>
<div class="span6">
<table class="table">
<thead><tr><th>Application</th><th><small class="pull-right"><a href="{{ application.url }}/info">raw JSON</a></small></th></tr></thead>
<tbody>
<tr ng-repeat="(key, value) in application.info" >
<td>{{ key }}</td><td>{{ value }}</td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<table class="table">
<thead><tr><th>JVM</th><th><small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
<tbody>
<tr>
<td>Uptime</td>
<td>{{ application.metrics['uptime'] + ticks | timeInterval }} [d:h:m:s]</td>
</tr>
<tr>
<td>Available Processors</td>
<td>{{ application.metrics['processors'] }}</td>
</tr>
<tr>
<td>Current loaded Classes</td>
<td>{{ application.metrics['classes']}}</td>
</tr>
<tr>
<td> Total loaded Classes</td>
<td>{{ application.metrics['classes.loaded']}}</td>
</tr>
<tr>
<td> Unloaded Classes</td>
<td>{{ application.metrics['classes.unloaded']}}</td>
</tr>
<tr>
<td> Threads</td>
<td>{{ application.metrics['threads'] }} total / {{ application.metrics['threads.daemon'] }} daemon</td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<table class="table">
<thead><tr><th colspan="2">Memory</th></tr></thead>
<tbody>
<tr>
<td colspan="2">
<span>Total Memory ({{ application.metrics['mem.used'] / 1024 | number:2 }}M / {{ application.metrics['mem'] / 1024 | number:2 }}M)</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" style="width:{{ memPercentage = (application.metrics['mem.used'] / application.metrics['mem'] * 100 | number:0) }}%;"
ng-class="{'bar-success': memPercentage < 75, 'bar-warning': memPercentage >= 75 && memPercentage < 95, 'bar-danger': memPercentage >= 95}">
{{memPercentage}}%
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<span>Heap Memory ({{ application.metrics['heap.used'] / 1024 | number:2 }}M / {{ application.metrics['heap.committed'] / 1024 | number:2 }}M)</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" style="width:{{ heapPercentage = (application.metrics['heap.used'] / application.metrics['heap.committed'] * 100 | number:0) }}%;"
ng-class="{'bar-success': heapPercentage < 75, 'bar-warning': heapPercentage >= 75 && heapPercentage < 95, 'bar-danger': heapPercentage >= 95}">
{{heapPercentage}}%
</div>
</div>
</td>
</tr>
<tr>
<td>Initial Heap (-Xms)</td>
<td>{{application.metrics['heap.init'] / 1024 | number:2}}M</td>
</tr>
<tr>
<td>Maximum Heap (-Xmx)</td>
<td>{{application.metrics['heap'] / 1024 | number:2}}M</td>
</tr>
</table>
</div>
<div class="span6">
<table class="table">
<thead><tr><th colspan="2">Garbage Collection</th></tr></thead>
<tr ng-repeat-start="(name, value) in gcInfos track by name">
<td>{{name | capitalize}} Count</td>
<td>{{value.count}}</td>
</tr>
<tr ng-repeat-end>
<td>{{name | capitalize}} Time</td>
<td>{{value.time}} ms</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="span12">
<div class="main-template">
<div id="xd-jobs" class="tab-pane active col-md-12">
<ul class="nav nav-tabs">
<li ui-sref-active="active"><a ui-sref="apps.details.infos({id: application.id})">Infos</a></li>
<li ui-sref-active="active"><a ui-sref="apps.details.metrics({id: application.id})">Metrics</a></li>
<li ui-sref-active="active"><a ui-sref="apps.details.env({id: application.id})">Environment</a></li>
<li ui-sref-active="active"><a ui-sref="apps.details.props({id: application.id})">Properties</a></li>
......@@ -20,3 +108,4 @@
</div>
</div>
</div>
<table class="table table-striped">
<col style="width:30%">
<col style="width:auto">
<thead>
<tr>
<th>Key</th>
<th>Value <small class="pull-right"><a href="{{ application.url }}/info">raw JSON</a></small></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in application.info" >
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
\ No newline at end of file
<table class="table table-striped">
<col style="width: 50%;" />
<col style="width: auto;" />
<table class="table">
<thead>
<tr>
<th colspan="2">Memory <small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th>
<th>Counters</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h1 style="text-align: center;">JVM Memory</h1>
<div class="center-block" style="width: 400px; height: 200px;">
<nvd3-pie-chart id="memoryChart" nodata="not available"
data="memoryData"
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
</nvd3-pie-chart>
</div>
<ul class="chart-legend center-block" style="width: 200px;">
<li class="chart-1">Free Memory: {{ application.metrics['mem.free'] / 1024 | number:2 }} MB</li>
<li class="chart-2">Used Memory: {{ application.metrics['mem.used'] / 1024 | number:2 }} MB</li>
<li class="no-bullet"><b>Total Memory: {{ application.metrics['mem'] / 1024 | number:2 }} MB</b></li>
</ul>
</td>
<td>
<h1 style="text-align: center;">Heap Memory</h1>
<div class="center-block" style="width: 400px; height: 200px;">
<nvd3-pie-chart id="heapMemoryChart" nodata="not available"
data="heapMemoryData"
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
</nvd3-pie-chart>
</div>
<ul class="chart-legend center-block" style="width: 200px;">
<li class="chart-1">Free Heap: {{ application.metrics['heap.free'] / 1024 | number:2 }} MB</li>
<li class="chart-2">Used Heap: {{ application.metrics['heap.used'] / 1024 | number:2 }} MB</li>
<li class="no-bullet"><b>Max Heap: {{ application.metrics['heap'] / 1024 | number:2 }} MB</b></li>
</ul>
</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>Metrics</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h1 style="text-align: center;">Counter</h1>
<div class="center-block" style="width: 800px; height: {{ 75 + counterData[0].values.length * 15 }}px; position:relative;">
<div class="center-block" style="width: 800px; height: {{ 75 + counterData[0].values.length * 20 }}px; position:relative; overflow: hidden;">
<nvd3-multi-bar-horizontal-chart id="counterChart" nodata="not available"
data="counterData"
color="colorFunction()"
......@@ -65,10 +19,18 @@
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Gauges</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h1 style="text-align: center;">Gauge</h1>
<div class="center-block" style="width: 800px; height: {{ 75 + gaugeData[0].values.length * (10 + gaugeData.length *5) }}px; position:relative;">
<div class="center-block" style="width: 800px; height: {{ 75 + gaugeData[0].values.length * ( 10 + gaugeData.length * 10 ) }}px; position:relative; overflow: hidden;">
<nvd3-multi-bar-horizontal-chart id="gaugesChart" nodata="not available"
data="gaugeData"
color="colorFunction()"
......@@ -83,35 +45,3 @@
</tr>
</tbody>
</table>
<table class="table table-striped">
<col style="width:30%">
<col style="width:auto">
<thead>
<tr>
<th colspan="2">JVM Information</th>
</tr>
</thead>
<tbody>
<tr>
<td>Available Processors</td>
<td>{{ application.metrics['processors'] }}</td>
</tr>
<tr>
<td>Uptime</td>
<td>{{ application.metrics['uptime'] / 86400000 | floor | padZero }}:{{ application.metrics['uptime'] % 86400000 / 3600000 | floor | padZero }}:{{ application.metrics['uptime'] % 3600000 / 60000 | floor | padZero }}:{{ application.metrics['uptime'] % 60000 / 1000 | floor | padZero }} [d:h:m:s]</td>
</tr>
<tr>
<td>Current loaded Classes</td>
<td>{{ application.metrics['classes']}}</td>
</tr>
<tr>
<td> Total loaded Classes</td>
<td>{{ application.metrics['classes.loaded']}}</td>
</tr>
<tr>
<td> Unloaded Classes</td>
<td>{{ application.metrics['classes.unloaded']}}</td>
</tr>
</tbody>
</table>
<div class="row-fluid">
<div class="span12">
<h1 class="index-page--title">{{ application.id }}</h1>
<p class="index-page--subtitle">JMX Beans</p>
</div>
</div>
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
......
<div class="row-fluid">
<div class="span12">
<h1 class="index-page--title">{{ application.id }}</h1>
<p class="index-page--subtitle">Manage loggers</p>
</div>
</div>
<div class="container">
<form ng-init="showPackageLoggers = false">
<div class="input-prepend input-append">
<button class="btn" title="Show package-level loggers" ng-model="showPackageLoggers" btn-checkbox ><i class="icon-folder-open"></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>
<input placeholder="Filter by name ..." class="span10" type="search" ng-model="filterLogger.name" />
<button class="btn" title="reload list" ng-click="reload()"><i class="icon-refresh"></i></button>
<span title="filtered / total" class="add-on">{{ filteredLoggers.length }}/{{ loggers.length }}</span>
</div>
</form>
<table class="table">
<tbody>
<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="{'btn-danger': logger.level== 'TRACE'}" ng-model="logger.level" btn-radio="'TRACE'" ng-click="setLogLevel(logger.name, 'TRACE')">TRACE</label>
<label class="btn btn-small" ng-class="{'btn-warning': logger.level=='DEBUG'}" ng-model="logger.level" btn-radio="'DEBUG'" ng-click="setLogLevel(logger.name, 'DEBUG')">DEBUG</label>
<label class="btn btn-small" ng-class="{'btn-info': logger.level=='INFO'}" ng-model="logger.level" btn-radio="'INFO'" ng-click="setLogLevel(logger.name, 'INFO')">INFO</label>
<label class="btn btn-small" ng-class="{'btn-success': logger.level == 'WARN'}" ng-model="logger.level" btn-radio="'WARN'" ng-click="setLogLevel(logger.name, 'WARN')">WARN</label>
<label class="btn btn-small" ng-class="{'btn-primary': logger.level == 'ERROR'}" ng-model="logger.level" btn-radio="'ERROR'" ng-click="setLogLevel(logger.name, 'ERROR')">ERROR</label>
<label class="btn btn-small" ng-class="{'btn-inverse': logger.level == 'OFF'}" ng-model="logger.level" btn-radio="'OFF'" ng-click="setLogLevel(logger.name, 'OFF')">OFF</label>
<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>
<tr ng-show="limit < loggers.length" >
<td>
<button class="btn btn-link btn-block" ng-click="limit = limit + 10">show more</button>
</td>
</tr>
<tr ng-show="limit < loggers.length" >
<td>
<button ng-show="limit < loggers.length" class="btn btn-link" ng-click="limit = limit + 10">show more</button>
<button ng-show="limit < loggers.length" class="btn btn-link" ng-click="limit = loggers.length">show all</button>
<button class="btn btn-link btn-block" ng-click="limit = loggers.length">show all</button>
</td>
</tr>
</tbody>
......
<div class="row-fluid">
<div class="span12">
<h1 class="index-page--title">Spring-Boot applications</h1>
<p class="index-page--subtitle">Here you'll find all Spring-Boot applications that registered itself at this admin
application.</p>
</div>
</div>
<div class="container">
<div class="main-template">
<h2 >Spring-Boot applications<br>
<small>Here you'll find all Spring-Boot applications that registered itself at this admin application.</small>
</h2>
<div class="span12">
<table class="table table-striped">
<thead>
<tr>
......@@ -17,7 +12,7 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="application in applications">
<tr ng-repeat="application in applications track by application.id">
<td>{{ application.id }}</td>
<td>{{ application.version }}</td>
<td>
......@@ -29,15 +24,13 @@
</td>
<td>
<span ng-show="application.up" style="float:right">
<a ng-show="application.providesLogfile" target="_self" ng-href="{{application.urlLogfile}}"><button class="btn btn-success">Logfile</button></a>
<button ng-click="showDetails(application.id)" class="btn btn-success">Details</button>
<button ng-click="showLogging(application.id)" class="btn btn-success">Logging</button>
<button ng-click="showJmx(application.id)" class="btn btn-success">JMX</button>
<!-- <button ng-click="refresh(application.id)" class="btn btn-success">Refresh</button> -->
<a ng-disabled="!application.providesLogfile" target="_self" class="btn btn-success" ng-href="{{application.urlLogfile}}"><i class="icon-file icon-white"></i>Logfile</a>
<a ui-sref="apps.details.metrics({id: application.id})" class="btn btn-success">Details</a>
<a ui-sref="apps.logging({id: application.id})" class="btn btn-success">Logging</a>
<a ui-sref="apps.jmx({id: application.id})" class="btn btn-success">JMX</a>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
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