Add sidebar and fix threads view

spring-boot-admin-server-ui/core/css/core.css

 body {
   background-color: #f1f1f1;
   font-family: "Varela Round", sans-serif;
-}
-.content {
-    margin-top: 50px;
-    margin-bottom: 50px;
+  padding-top: 84px;
 }
 .center-block {
   display: block;
@@ -127,72 +124,6 @@ a.spring-boot-logo span {
 a:hover.spring-boot-logo span {
   opacity: 1;
 }
-.header--application .navbar-inner,
-.header--application-urls .navbar-inner {
-    font-family: Montserrat, sans-serif;
-    position: absolute;
-    z-index: 999;
-    background-image: none;
-    filter: none;
-    background-color: #666;
-    border: none;
-    border-bottom: 1px solid #34302D;
-    box-shadow: none;
-    position: relative;
-    border-radius: 0;
-    padding: 0;
-}
-.header--application .application--name {
-    font-family: "Montserrat", sans-serif;
-    font-size: 24px;
-    line-height: 24px;
-    color: #ebf1e7;
-    display: inline-block;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-.header--application .navbar-inner .navbar-link a {
-    color: #eeeeee;
-    text-transform: uppercase;
-    text-shadow: none;
-    font-size: 14px;
-    line-height: 14px;
-    padding: 16px 10px;
-    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--application .navbar-inner .navbar-link:hover a,
-.header--application .navbar-inner .navbar-link.active a {
-    color: #ebf1e7;
-    background-color: #666;
-    box-shadow: none;
-}
-.header--application .navbar-inner .navbar-link a>span {
-    transition: color 0.15s;
-    -webkit-transition: color 0.15s;
-    -moz-transition: color 0.15s;
-    -o-transition: color 0.15s;
-    -ms-transition: color 0.15s;
-}
-.header--application .navbar-inner .navbar-link:hover a>span,
-.header--application .navbar-inner .navbar-link.active a>span {
-    border-top: 2px solid #6db33f;
-    border-bottom: 2px solid #6db33f;
-}
-.header--application-urls .navbar-inner {
-    background-color: #dedede;
-}
-.header--application-urls .navbar-inner li>a,
-.header--application-urls .navbar-inner li>a:hover {
-    text-shadow: none;
-    color: #34302D;
-}
-.header--application-urls .navbar-inner li>a:hover {
-    text-decoration: underline;
-}
 
 /* ---------- */
 

spring-boot-admin-server-ui/core/index.html

@@ -10,6 +10,7 @@
   <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
   <link href="https://fonts.googleapis.com/css?family=Varela+Round|Montserrat:400,700" rel="stylesheet" type="text/css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
   <link rel="stylesheet" type="text/css" href="css/core.css" />
   <link rel="stylesheet" type="text/css" href="css/all-modules.css" />
 </head>
@@ -23,8 +24,7 @@
 
   </script>
 
-    <div class="viewport">
-        <header class="navbar header--navbar desktop-only">
+  <header class="navbar navbar-fixed-top header--navbar desktop-only">
     <div class="navbar-inner">
       <div class="container-fluid">
         <div class="spring-logo--container">
@@ -41,11 +41,10 @@
       </div>
     </div>
   </header>
-        <div class="main-body--wrapper">
+
   <div ui-view></div>
-        </div>
+
   <footer class="footer">
-            <div class="container">
     <ul class="inline">
       <li><a href="https://codecentric.github.io/spring-boot-admin/@project.version@" target="_blank">Reference Guide</a></li>
       <li>-</li>
@@ -53,9 +52,7 @@
       <li>-</li>
       <li>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License 2.0</a></li>
     </ul>
-            </div>
   </footer>
-    </div>
 
   <script src="dependencies.js" type="text/javascript"></script>
   <script type="text/javascript">

spring-boot-admin-server-ui/modules/about/about.html

-<div class="container content">
+<div class="container">
   <h3>About Spring Boot Admin</h3>
   <p>
     This is an administration GUI for Spring-Boot applications.

spring-boot-admin-server-ui/modules/applications-details/views/details.html

-<div class="container content">
-	<div class="alert alert-error" ng-if="error">
+<div class="alert alert-error" ng-if="error">
   <b>Error:</b> {{ error }}
-	</div>
-	<div class="row">
-	    <sba-info-panel class="span6" title="Application" raw="api/applications/{{ application.id }}/info">
+</div>
+<div style="display: flex; flex-wrap: wrap; justify-content: space-around;">
+  <sba-info-panel class="span4" title="Application" raw="api/applications/{{ application.id }}/info">
     <table class="table">
-				<tr ng-repeat="(key, value) in info" >
-					<td ng-bind="key"></td><td style="white-space: pre">{{ value | yaml }}</td>
+      <tr ng-repeat="(key, value) in info">
+        <td ng-bind="key"></td>
+        <td style="white-space: pre">{{ value | yaml }}</td>
       </tr>
     </table>
   </sba-info-panel>
-		<sba-info-panel class="span6" title="Health" raw="api/applications/{{ application.id }}/health">
+  <sba-info-panel class="span4" title="Health" raw="api/applications/{{ application.id }}/health">
     <sba-health-status health="health"></sba-health-status>
   </sba-info-panel>
-	    <sba-info-panel class="span6"  title="Memory" raw="api/applications/{{ application.id }}/metrics/mem.*%7Cheap.*">
+  <sba-info-panel class="span4" title="Memory" raw="api/applications/{{ application.id }}/metrics/mem.*%7Cheap.*">
     <sba-memory-stats metrics=metrics></sba-memory-stats>
   </sba-info-panel>
-		<sba-info-panel class="span6" title="JVM" raw="api/applications/{{ application.id }}/metrics/systemload.*%7Cclasses.*%7Cuptime%7Cprocessors%7Cthreads.*">
+  <sba-info-panel class="span4" title="JVM" raw="api/applications/{{ application.id }}/metrics/systemload.*%7Cclasses.*%7Cuptime%7Cprocessors%7Cthreads.*">
     <sba-jvm-stats metrics="metrics"></sba-jvm-stats>
   </sba-info-panel>
-	    <sba-info-panel class="span6" title="Garbage Collection" raw="api/applications/{{ application.id }}/metrics/gc.*">
+  <sba-info-panel class="span4" title="Garbage Collection" raw="api/applications/{{ application.id }}/metrics/gc.*">
     <sba-gc-stats metrics="metrics"></sba-gc-stats>
   </sba-info-panel>
-		<sba-info-panel class="span6" title="Servlet Container" raw="api/applications/{{ application.id }}/metrics/httpsessions.*" ng-show="metrics['httpsessions.active'] != null">
+  <sba-info-panel class="span4" title="Servlet Container" raw="api/applications/{{ application.id }}/metrics/httpsessions.*" ng-show="metrics['httpsessions.active'] != null">
     <sba-servlet-container-stats metrics="metrics"></sba-servlet-container-stats>
   </sba-info-panel>
-		<sba-info-panel class="span6" title="Datasources" raw="api/applications/{{ application.id }}/metrics/datasource.*" ng-show="hasDatasources">
+  <sba-info-panel class="span4" title="Datasources" raw="api/applications/{{ application.id }}/metrics/datasource.*" ng-show="hasDatasources">
     <sba-datasource-stats metrics="metrics"></sba-datasource-stats>
   </sba-info-panel>
-		<sba-info-panel class="span6" title="Caches" raw="api/applications/{{ application.id }}/metrics/cache.*" ng-show="hasCaches">
+  <sba-info-panel class="span4" title="Caches" raw="api/applications/{{ application.id }}/metrics/cache.*" ng-show="hasCaches">
     <sba-cache-stats metrics="metrics"></sba-cache-stats>
   </sba-info-panel>
-	</div>
 </div>

spring-boot-admin-server-ui/modules/applications-environment/views/environment.html

-<div class="container content">
-	<div class="alert alert-error" ng-if="error">
+<div class="alert alert-error" ng-if="error">
   <b>Error:</b> {{ error }}
-	</div>
+</div>
 
-	<sba-info-panel title="Active profiles"	raw="api/applications/{{ application.id }}/env">
+<sba-info-panel title="Active profiles" raw="api/applications/{{ application.id }}/env">
   <table class="table">
-		  <tr><td>{{profiles.join(', ') || '-'}}</td></tr>
+    <tr>
+      <td>{{profiles.join(', ') || '-'}}</td>
+    </tr>
   </table>
-	</sba-info-panel>
+</sba-info-panel>
 
-	<sba-info-panel title="Environment manager" ng-show="application.capabilities.refresh"> 
+<sba-info-panel title="Environment manager" ng-show="application.capabilities.refresh">
   <sba-environment-manager environment="env" application="application" on-environment-changed="refresh"></sba-environment-manager>
-	</sba-info-panel>
+</sba-info-panel>
 
-	<div class="input-append">
+<div class="input-append">
   <input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" />
   <button class="btn" title="reload list" ng-click="refresh()"><i class="icon-refresh"></i></button>
-	</div>
+</div>
 
-	<sba-info-panel category="PropertySource" title="{{source.name}}" ng-repeat="source in env" ng-show="!searchFilter || (source.value | filter:searchFilter).length > 0">
+<sba-info-panel category="PropertySource" title="{{source.name}}" ng-repeat="source in env" ng-show="!searchFilter || (source.value | filter:searchFilter).length > 0">
   <table class="table">
     <col width="38%">
       <col width="62%">
@@ -30,6 +31,4 @@
           <td colspan="2">-</td>
         </tr>
   </table>
-	</sba-info-panel>
-</div>
-
+</sba-info-panel>

spring-boot-admin-server-ui/modules/applications-jmx/views/jmx.html

-<div class="container content">
-	<div ng-if="errorWhileListing">
-	<p>To make the JMX section work you need to make the /jolokia-endpoint accessible.<br/>
-		Include the jolokia-core.jar in your spring-boot-application:
+<div ng-if="errorWhileListing">
+  <p>To make the JMX section work you need to make the /jolokia-endpoint accessible.
+    <br/> Include the jolokia-core.jar in your spring-boot-application:
     <pre>&lt;dependency&gt;
 	&lt;groupId>org.jolokia&lt;/groupId&gt;
 	&lt;artifactId>jolokia-core&lt;/artifactId&gt;
 &lt;/dependency&gt;</pre></p>
-	</div>
-	<pre class="alert alert-error" ng-if="error"><b>Error:</b><br/>{{ error | json }}</pre>
-	<sba-accordion>
+</div>
+<pre class="alert alert-error" ng-if="error"><b>Error:</b><br/>{{ error | json }}</pre>
+<sba-accordion>
   <sba-accordion-group ng-repeat="domain in domains | orderBy:'name' track by domain.name">
     <sba-accordion-heading>
       <ul class="breadcrumb" style="margin: 0; background-color: #34302D;">
@@ -19,8 +18,7 @@
           <span ng-if="!domain.selectedBean">{{domain.name}}</span>
         </li>
         <li style="text-shadow: none;" ng-if="domain.selectedBean.name">
-			            <small class="muted">MBean</small>
-			            {{domain.selectedBean.name}}
+          <small class="muted">MBean</small> {{domain.selectedBean.name}}
         </li>
       </ul>
     </sba-accordion-heading>
@@ -31,5 +29,4 @@
       <sba-jmx-bean application="application" bean="domain.selectedBean" ng-show="domain.selectedBean"></sba-jmx-bean>
     </sba-accordion-body>
   </sba-accordion-group>
-	</sba-accordion>
-</div>
+</sba-accordion>
\ No newline at end of file

spring-boot-admin-server-ui/modules/applications-logging/views/logging.html

-<div class="container content">
-	<div ng-if="errorWhileListing">
-	<p>To make the logging section work you need to make the /jolokia-endpoint accessible.<br/>
-	Include the jolokia-core.jar in your spring-boot-application:
+<div ng-if="errorWhileListing">
+  <p>To make the logging section work you need to make the /jolokia-endpoint accessible.
+    <br/> Include the jolokia-core.jar in your spring-boot-application:
     <pre>&lt;dependency&gt;
 	&lt;groupId>org.jolokia&lt;/groupId&gt;
 	&lt;artifactId>jolokia-core&lt;/artifactId&gt;
 &lt;/dependency&gt;</pre></p>
-	<p>Please note that the logging section currently only works with Logback.<br/>
-		To make the section work with Logback please activate the JMXConfigurator in your <b>logback.xml</b>:
+  <p>Please note that the logging section currently only works with Logback.
+    <br/> To make the section work with Logback please activate the JMXConfigurator in your <b>logback.xml</b>:
     <pre>&lt;configuration&gt;
 	&lt;include resource="org/springframework/boot/logging/logback/base.xml"/&gt;
 	&lt;jmxConfigurator/&gt;
 &lt;/configuration&gt;</pre></p>
-	</div>
-	<pre class="alert alert-error" ng-if="error"><b>Error:</b><br/>{{ error | json }}</pre>
-	<div ng-show="loggers">
+</div>
+<pre class="alert alert-error" ng-if="error"><b>Error:</b><br/>{{ error | json }}</pre>
+<div ng-show="loggers">
   <form>
     <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>
-				<input placeholder="Filter by name ..." class="span10" type="search" ng-model="filterLogger.name" />
+      <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="input-xxlarge" type="search" ng-model="filterLogger.name" />
       <button class="btn" title="reload list" ng-click="refreshLoggers()"><i class="icon-refresh"></i></button>
       <span title="filtered / total" class="add-on">{{ filteredLoggers.length }}/{{ loggers.length }}</span>
     </div>
@@ -26,15 +25,20 @@
   <table class="table table-hover">
     <tbody>
       <tr ng-repeat="logger in (filteredLoggers = (loggers | filter:packageFilter | filter:filterLogger) ) | limitTo: limit track by logger.name">
-					<td><sba-logger value="logger" on-level-changed="refreshLoggers"></sba-logger></td>
+        <td>
+          <sba-logger value="logger" on-level-changed="refreshLoggers"></sba-logger>
+        </td>
       </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 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 class="btn btn-link btn-block" ng-click="limit = loggers.length">show all</button></td>
+      <tr ng-show="limit < loggers.length">
+        <td>
+          <button class="btn btn-link btn-block" ng-click="limit = loggers.length">show all</button>
+        </td>
       </tr>
     </tbody>
   </table>
-	</div>
 </div>

spring-boot-admin-server-ui/modules/applications-metrics/css/module.css

@@ -5,33 +5,28 @@
   box-sizing: border-box;
   height: 100%;
 }
-
 .with-marks {
   position: relative;
 }
-
 .bar-scale {
   position: relative;
   margin-top: -20px;
   margin-bottom: 40px;
 }
-
 .pitch-line {
   position: absolute;
   width: 1px;
   background-image: linear-gradient(to bottom, #333333 5px, transparent 5px);
   background-repeat: repeat-x;
 }
-
 .value-mark {
   position: absolute;
   border-left: 1px solid #ee5f5b;
   font-size: 12px;
   color: #fff;
   text-align: center;
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
-
 .mark-current {
   width: 1px;
   height: 20px;
@@ -40,4 +35,3 @@
   background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
   background-repeat: repeat-x;
 }
-

spring-boot-admin-server-ui/modules/applications-metrics/views/metrics.html

-<div class="container content">
-  <div class="alert alert-error" ng-if="error">
+<div class="alert alert-error" ng-if="error">
   <b>Error:</b> {{ error }}
-  </div>
-  <div class="row">
-    <div class="span12">
-      <sba-info-panel title="Counter" raw="api/applications/{{ application.id }}/metrics/counter.*">
+</div>
+<sba-info-panel title="Counter" raw="api/applications/{{ application.id }}/metrics/counter.*">
   <table class="table" ng-if="counters.length > 0">
     <tr ng-repeat="counter in counters">
       <td>
@@ -12,8 +9,8 @@
       </td>
     </tr>
   </table>
-      </sba-info-panel>
-      <sba-info-panel title="Gauges" raw="api/applications/{{ application.id }}/metrics/gauge.*">
+</sba-info-panel>
+<sba-info-panel title="Gauges" raw="api/applications/{{ application.id }}/metrics/gauge.*">
   <table class="table" ng-if="gauges.length > 0">
     <tr ng-if="showRichGauges" ng-repeat="gauge in gauges">
       <td>
@@ -26,7 +23,4 @@
       </td>
     </tr>
   </table>
-      </sba-info-panel>
-    </div>
-  </div>
-</div>
+</sba-info-panel>

spring-boot-admin-server-ui/modules/applications-threads/components/thread.tpl.html

@@ -3,8 +3,7 @@
     <small class="muted" ng-bind="$ctrl.thread.threadId"></small> {{$ctrl.thread.threadName}} <span class="pull-right label" ng-class="$ctrl.getStateClass()" ng-bind="$ctrl.thread.threadState"></span> <span class="label label-warning" ng-show="$ctrl.thread.suspended">suspended</span>
   </sba-accordion-heading>
   <sba-accordion-body>
-        <div class="container">
-            <div class="row">
+    <div class="row-fluid">
       <table class="span6">
         <col style="min-width: 10em;" />
         <tr>
@@ -40,7 +39,6 @@
         </tr>
       </table>
     </div>
-        </div>
     <pre style="overflow: auto; max-height: 20em" ng-show="$ctrl.thread.stackTrace.length > 0"><span ng-repeat="el in $ctrl.thread.stackTrace">{{el.className}}.{{el.methodName}}({{el.fileName}}:{{el.lineNumber}}) <span class="label" ng-show="el.nativeMethod">native</span><br/></span></pre>
   </sba-accordion-body>
 </sba-accordion-group>

spring-boot-admin-server-ui/modules/applications-threads/components/threadSummary.js

@@ -25,6 +25,8 @@ module.exports = {
 
     var ctrl = this;
     ctrl.$onChanges = function () {
+      ctrl.threads = ctrl.threads || [];
+
       ctrl.threadSummary = {
         NEW: {
           count: 0,

spring-boot-admin-server-ui/modules/applications-threads/views/threads.html

-<div class="container content">
-	<div class="alert alert-error" ng-if="error">
+<div class="alert alert-error" ng-if="error">
   <b>Error:</b> {{ error }}
-	</div>
-	<div class="row">
-		<div class="span12 text-center" >
+</div>
+<div class="row">
+  <div class="span12 text-center">
     <form>
       <button class="btn" ng-click="dumpThreads()"><i class="icon-screenshot"></i> Dump all threads!</button>
     </form>
   </div>
-	</div>
-	<div class="row" ng-show="dump" >	
-		<div class="span12">
-			<sba-thread-summary threads="dump"></sba-thread-summary>
-		</div>
-	</div>	
-	<div class="row" ng-show="dump">
-		<div class="span12">	
-		  <sba-accordion>
-		      <sba-thread ng-repeat="thread in dump | orderBy:'threadName' track by thread.threadId" thread="thread"></sba-thread>
-		  </sba-accordion>
-		</div>
-	</div>
 </div>
+<sba-thread-summary ng-show="dump" threads="dump"></sba-thread-summary>
+<sba-accordion>
+  <sba-thread ng-repeat="thread in dump | orderBy:'threadName' track by thread.threadId" thread="thread"></sba-thread>
+</sba-accordion>

spring-boot-admin-server-ui/modules/applications-trace/css/module.css

@@ -2,7 +2,7 @@
   position: relative;
   padding: 1em 0;
   list-style-type: none;
-  padding-left: 120px;
+  padding-left: 85px;
 }
 .timeline:before {
   position: absolute;

spring-boot-admin-server-ui/modules/applications-trace/views/trace.html

-<div class="container content">
-	<div class="alert alert-error" ng-if="error">
+<div class="alert alert-error" ng-if="error">
   <b>Error:</b> {{ error }}
-	</div>
-	<div class="form-inline">
+</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}">
@@ -11,12 +10,10 @@
     <input class="input-mini" type="number" min="1" ng-model="refreshInterval" ng-disabled="refresher != null" />
     <span class="add-on">sec</span>
   </div>
-	    <input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" ></input>
-	</div>
-	<ul class="timeline">
-		<li ng-repeat="trace in traces | filter:searchFilter" >
+  <input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" />
+</div>
+<ul class="timeline">
+  <li ng-repeat="trace in traces | filter:searchFilter">
     <sba-trace value="trace"></sba-trace>
   </li>
-	</ul>
-</div>
-
+</ul>

spring-boot-admin-server-ui/modules/applications/css/module.css

+.sidebar-nav {
+  font-family: "Montserrat", sans-serif;
+  font-size: 15px;
+}
+.sidebar-nav .info-panel-title {
+  text-align: center;
+}
+.sidebar-nav h1 {
+  padding-top: 15px;
+  font-size: 24px;
+  line-height: 24px;
+}
+.sidebar-nav ul {
+  border-top: 1px solid #34302D;
+  padding: 8px 15px;
+}
+.sidebar-nav .nav-list > li a {
+  text-transform: uppercase;
+  font-size: 14px;
+  line-height: 14px;
+  padding: 16px 25px;
+  transition: all 0.15s;
+  -webkit-transition: all 0.15s;
+  -moz-transition: all 0.15s;
+  -o-transition: all 0.15s;
+  -ms-transition: all 0.15s;
+}
+.sidebar-nav .nav-list li:hover > a,
+.sidebar-nav .nav-list > .active > a {
+  background-color: #6db33f;
+  box-shadow: none;
+  text-shadow: none;
+  color: #fff;
+}
+ul.application-urls {
+  list-style: none;
+  margin: 0;
+}
+.application-urls li {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 8px 0;
+}
+
+/* ---------- */
 
 .sortable {
   cursor: pointer;
 }
-
 .sorted-ascending,
 .sorted-descending {
   color: #6db33f;
 }
-
 .sorted-ascending::after {
   content: " \25b2";
 }
@@ -21,23 +65,19 @@
   color: #00AA00;
   font-weight: bold;
 }
-
 .status-OFFLINE {
   color: #000000;
   font-weight: bold;
 }
-
 .status-DOWN,
 .status-OUT_OF_SERVICE {
   color: #DD0000;
   font-weight: bold;
 }
-
 .status-UNKNOWN {
   font-weight: bold;
   color: #FF8800;
 }
-
 .refresh {
   display: inline-block;
   width: 16px;
@@ -53,21 +93,19 @@
   border-radius: 4px;
   margin-bottom: 12px;
 }
-
-.info-panel > .info-panel-title {
+.info-panel .info-panel-title {
   background-color: #34302D;
   border-color: #34302D;
   color: #f1f1f1;
   padding: 8px 15px;
 }
-
-.info-panel-content > .table {
+.info-panel-content .table {
   margin-bottom: 0;
 }
 
 /* ---------- */
 
-.accordion-heading ,
+.accordion-heading,
 .accordion-heading > a,
 .accordion-heading > a:hover,
 .accordion-heading > a:focus {
@@ -75,7 +113,6 @@
   border-color: #34302D;
   color: #f1f1f1;
 }
-
 .accordion-group {
   border: 1px solid #34302D;
 }

spring-boot-admin-server-ui/modules/applications/module.js

@@ -43,7 +43,7 @@ module.config(function ($stateProvider) {
     abstract: true,
     url: '/applications/:id',
     controller: 'applicationsHeaderCtrl',
-    templateUrl: 'applications/views/applications-header.html',
+    templateUrl: 'applications/views/application-nav.html',
     resolve: {
       application: function ($stateParams, Application) {
         return Application.get({

spring-boot-admin-server-ui/modules/applications/views/application-nav.html

+<div class="container">
+  <div class="row">
+    <div class="span3">
+      <div class="sidebar-nav info-panel">
+        <div class="info-panel-title">
+          <h1 ng-bind="application.name"></h1>
+          <h1 class="status-{{application.statusInfo.status}}" ng-bind="application.statusInfo.status"></h1>
+        </div>
+        <ul class="application-urls">
+          <li ng-if="application.healthUrl"><a href="{{ application.healthUrl }}" title="Health URL"><i class="icon-heart" ></i> {{ application.healthUrl }}</a></li>
+          <li ng-if="application.managementUrl"><a href="{{ application.managementUrl }}" title="Management URL"><i class="icon-wrench"></i> {{ application.managementUrl }}</a></li>
+          <li ng-if="application.serviceUrl"><a href="{{ application.serviceUrl }}" title="Service URL"><i class="icon-home" ></i> {{ application.serviceUrl }}</a></li>
+        </ul>
+        <div class="info-panel-content">
+          <ul class="nav nav-list">
+            <li ng-repeat="view in views" ng-class="{active: $state.includes(view.state)}"><a ng-href="{{view.href}}"><span ng-bind="view.title"></span></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="span9" ui-view></div>
+  </div>
+</div>

spring-boot-admin-server-ui/modules/applications/views/applications-header.html

-<div class="navbar header--application" style="margin-bottom: 0px;">
-	<div class="navbar-inner">
-			<div class="container-fluid">
-				<div class="application--name">{{ application.name }} <small><span class="status-{{application.statusInfo.status}}">{{ application.statusInfo.status }}</span></small></div>
-				<ul class="nav pull-right">
-					<li ng-repeat="view in views" class="navbar-link" ng-class="{active: $state.includes(view.state)}" ><a ng-href="{{view.href}}"><span ng-bind="view.title"></span></a></li>
-				</ul>
-			</div>
-	</div>
-</div>
-<div class="navbar header--application-urls">
-	<div class="navbar-inner">
-		<div class="container-fluid">
-			<ul class="nav">
-				<li ng-if="application.healthUrl" style=" text-align: center;"><a href="{{ application.healthUrl }}" title="Health URL"><i class="icon-heart" ></i> {{ application.healthUrl }}</a></li>
-				<li ng-if="application.serviceUrl" style="text-align: center;"><a href="{{ application.serviceUrl }}" title="Service URL"><i class="icon-home" ></i> {{ application.serviceUrl }}</a></li>
-				<li ng-if="application.managementUrl" style="text-align: center;"><a href="{{ application.managementUrl }}"  title="Management URL"><i class="icon-wrench"></i> {{ application.managementUrl }}</a></li>
-			</ul>
-		</div>
-	</div>
-</div>
-<div ui-view></div>

spring-boot-admin-server-ui/modules/applications/views/applications-list.html

-<div class="container-fluid content">
+<div class="container-fluid">
   <h3>Spring Boot applications</h3>
   <div>
     <input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter" />

spring-boot-admin-server-ui/modules/events/events.html

-<div class="container content">
+<div class="container">
   <h3>Journal</h3>
   <div class="alert alert-error" ng-if="error">
     <b>Error:</b> {{ error }}
@@ -13,15 +13,16 @@
         </tr>
       </thead>
       <tbody>
-				<tr ng-repeat="event in journal | orderBy:'timestamp':true" >
+        <tr ng-repeat="event in journal | orderBy:'timestamp':true">
           <td>{{ event.timestamp | date:'yyyy-MM-dd-HH.mm.ss.sss' }}</td>
-					<td>{{ event.application.name }} ({{ event.application.id }})<br/>
+          <td>{{ event.application.name }} ({{ event.application.id }})
+            <br/>
             <span class="muted">{{ event.application.serviceUrl || event.application.managementUrl || event.application.healthUrl }}</span>
           </td>
-					<td>{{ event.type }}<br/>
+          <td>{{ event.type }}
+            <br/>
             <span ng-if="event.type == 'STATUS_CHANGE'">
-							<span class="status-{{event.from.status}}">{{ event.from.status }}</span>
-							-&gt; 	<span class="status-{{event.to.status}}">{{ event.to.status }}</span>
+							<span class="status-{{event.from.status}}">{{ event.from.status }}</span> -&gt; <span class="status-{{event.to.status}}">{{ event.to.status }}</span>
             </span>
           </td>
         </tr>