Nicer views with fixed columns

src/main/webapp/public/scripts/services/services.js

@@ -71,7 +71,7 @@ angular.module('springBootAdmin.services', ['ngResource'])
   	.service('ApplicationDetails', ['$http', function($http) {
   		this.getInfo = function(app) {
   			return $http.get(app.url + '/info').success(function(response) {
-  				app.info = angular.toJson(response, true);
+  				app.info = response;
   			});
   		}
   		this.getMetrics = function(app) {
@@ -82,8 +82,6 @@ angular.module('springBootAdmin.services', ['ngResource'])
   		this.getEnv = function(app) {
   			return $http.get(app.url + '/env').success(function(response) {
   				app.env = response;
-  				app.env.systemProp = angular.toJson(app.env['systemProperties'], true);
-  				app.env.systemEnv = angular.toJson(app.env['systemEnvironment'], true);
   			});
   		}
   		this.getProps = function(app) {
@@ -93,7 +91,7 @@ angular.module('springBootAdmin.services', ['ngResource'])
   					if (attr.indexOf('[') != -1 && attr.indexOf('.properties]') != -1) {
   						var prop = new Object();
   						prop.key = attr;
-  						prop.value = angular.toJson(response[attr], true);
+  						prop.value = response[attr];
   						app.props.push(prop);
   					}
   				}

src/main/webapp/public/styles/main.css

@@ -11,6 +11,11 @@
   color: #f1f1f1;
 }
 
+.table tr.highlight > td {
+  background-color: #6db33f !important;
+  font-weight: bold;
+}
+
 .table-filter {
   background-color: #34302D;
   padding: 9px 12px;

src/main/webapp/public/views/apps/details/env.html

 <table class="table table-striped">
+    <col style="width:30%">
+    <col style="width:auto">
 	<thead>
 		<tr>
-			<th>Profiles</th>
-			<th width="400">System Properties</th>
-			<th width="400">System Environment</th>
+			<th>Property</th>
+			<th>Value</th>
 		</tr>
 	</thead>
 	<tbody>
-		<tr>
-			<td>{{ application.env.profiles }}</td>
-			<td style="word-break: break-all; ">{{ application.env.systemProp }}</td>
-			<td style="word-break: break-all; ">{{ application.env.systemEnv }}</td>
+		<tr class="highlight" ng-repeat-start="(envkey, envvalue) in application.env">
+			<td colspan="2">{{ envkey }}</td>
+		</tr>
+		<tr ng-repeat-end ng-repeat="(key, value) in envvalue" >
+			<td style="text-align: right; word-break: break-all;" >{{ key }}</td>
+			<td style="word-break: break-all;" >{{ value }}</td>
 		</tr>
 	</tbody>
 </table>

src/main/webapp/public/views/apps/details/infos.html

 <table class="table table-striped">
+    <col style="width:30%">
+    <col style="width:auto">
 	<thead>
 		<tr>
-			<th>Info JSON</th>
+			<th>Key</th>
+			<th>Value</th>
 		</tr>
 	</thead>
 	<tbody>
-		<tr>
-			<td>
-				{{ application.info }}
-			</td>
+		<tr ng-repeat="(key, value) in application.info" >
+			<td style="text-align: right;" >{{ key }}</td>
+			<td>{{ value }}</td>
 		</tr>
 	</tbody>
 </table>
\ No newline at end of file

src/main/webapp/public/views/apps/details/props.html

 <table class="table table-striped">
+    <col style="width:30%">
+    <col style="width:auto">
 	<thead>
 		<tr>
-			<th>Resource</th>
-			<th>Properties</th>
+			<th>Property</th>
+			<th>Value</th>
 		</tr>
 	</thead>
 	<tbody>	
-		<tr ng-repeat="prop in application.props">
-			<td>{{ prop.key }}</td>
-			<td style="word-break: normal; ">{{ prop.value }}</td>
+		<tr class="highlight" ng-repeat-start="prop in application.props">
+			<td colspan="2">{{ prop.key }}</td>
+		</tr>
+		<tr ng-repeat-end ng-repeat="(key, value) in prop.value" >
+			<td style="text-align: right; word-break: break-all;" >{{ key }}</td>
+			<td style="word-break: break-all;" >{{ value }}</td>
 		</tr>
 	</tbody>
 </table>
+