Use YAML for infos and shorten them in overview

fixes #107

Author: joshiste

spring-boot-admin-server-ui/app/js/controller/overviewCtrl.js

@@ -15,9 +15,7 @@
  */
 'use strict';
 
-var angular = require('angular');
-
-module.exports = function ($scope, $location, $interval, $q, $state, Application, Notification) {
+module.exports = function ($scope, $location, $interval, $q, $state, $filter, Application, Notification) {
     var createNote = function(app) {
         var title = app.name + (app.statusInfo.status === 'UP' ? ' is back ' : ' went ') + app.statusInfo.status;
         var options = { tag: app.id,
@@ -37,18 +35,28 @@ module.exports = function ($scope, $location, $interval, $q, $state, Application
                 //find application in known applications and copy state --> less flickering
                 for (var j = 0; $scope.applications != null && j < $scope.applications.length; j++) {
                     if (app.id === $scope.applications[j].id) {
-                        app.info = $scope.applications[j].info;
-
+                        app.infoShort = $scope.applications[j].infoShort;
+                        app.infoDetails = $scope.applications[j].infoDetails;
+                        app.version = $scope.applications[j].version;
                         //issue notifiaction on state change
                         if (app.statusInfo.status !== $scope.applications[j].statusInfo.status) {
                             createNote(app);
                         }
                         break;
                     }
                 }
-
                 app.getInfo().success(function(info) {
-                    angular.copy(info, app.info);
+                    app.version = info.version;
+                    app.infoDetails = null;
+                    app.infoShort = '';
+                    delete info.version;
+                    var infoYml = $filter('yaml')(info);
+                    if (infoYml !== '{}\n') {
+                        app.infoShort = $filter('limitLines')(infoYml, 3);
+                        if (app.infoShort !== infoYml) {
+                           app.infoDetails = $filter('limitLines')(infoYml, 32000, 3);
+                        }
+                    }
                 }).finally(function(){
                     app.refreshing = false;
                 });

spring-boot-admin-server-ui/app/js/filter/flatten.js

@@ -8,4 +8,5 @@ springBootAdmin.filter('classNameLoggerOnly', require('./classNameLoggerOnly'));
 springBootAdmin.filter('capitalize', require('./capitalize'));
 springBootAdmin.filter('humanBytes', require('./humanBytes'));
 springBootAdmin.filter('joinArray', require('./joinArray'));
-springBootAdmin.filter('flatten', require('./flatten'));
+springBootAdmin.filter('yaml', require('./yaml'));
+springBootAdmin.filter('limitLines', require('./limitLines'));

spring-boot-admin-server-ui/app/js/filter/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2014 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+module.exports = function () {
+    return function (input, limit, begin) {
+        begin = begin | 0;
+        var lines = input.match(/[^\r\n]+/g);
+        return lines.splice(begin, begin + limit).join('\n');
+    };
+};

spring-boot-admin-server-ui/app/js/filter/limitLines.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2014 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+var yaml = require('js-yaml');
+
+module.exports = function () {
+    return function (input) {
+        return yaml.dump(input, {skipInvalid: true, sort: true});
+    };
+};

spring-boot-admin-server-ui/app/js/filter/yaml.js

@@ -9,7 +9,7 @@
 				<thead><tr><th colspan="2">Application <small class="pull-right"><a href="api/applications/{{ application.id }}/info">raw JSON</a></small></th></tr></thead>
 				<tbody>
 					<tr ng-repeat="(key, value) in info" >
-						<td>{{ key }}</td><td style="white-space: pre;">{{ value | flatten }}</td>
+						<td>{{ key }}</td><td style="white-space: pre">{{ value | yaml }}</td>
 					</tr>
 				</tbody>
 			</table>

spring-boot-admin-server-ui/app/views/apps/details.html

@@ -22,8 +22,10 @@ <h2 >Spring-Boot applications<br>
 		<tbody>
 			<tr ng-repeat="application in applications|orderBy:order.column:order.descending|orderBy:'statusInfo.status':false track by application.id">
 				<td>{{ application.name }}<br/><span class="muted">{{ application.serviceUrl || application.managementUrl || application.healthUrl }}</span></td>
-				<td>{{ application.info.version }}</td>
-				<td><span ng-repeat="(name, value) in application.info track by name" ng-if="name != 'version'" style="white-space: pre">{{value | flatten:name}}<br/></span></td>
+				<td>{{ application.version }}</td>
+				<td><span style="white-space: pre" ng-init="collapsed = true">{{application.infoShort}}</span>
+					<a class="btn btn-mini" ng-show="application.infoDetails" ng-click="collapsed = !collapsed">...</a><br/>
+					<span style="white-space: pre" ng-hide="collapsed">{{application.infoDetails}}</span></td>
 				<td><span class="status-{{application.statusInfo.status}}" title="{{application.statusInfo.timestamp  | date:'dd.MM.yyyy HH:mm:ss' }}">{{ application.statusInfo.status }}</span>
 				<span ng-show="application.refreshing" class="refresh"></span></td>
 				<td>

spring-boot-admin-server-ui/app/views/overview.html

@@ -7,12 +7,13 @@
     "test": "./node_modules/gulp/bin/gulp.js"
   },
   "dependencies": {
-    "es5-shim": "^3.0.2",
-    "jquery": "~2.1.1",
-    "angular-ui-router": "~0.2.11",
+    "angular": "~1.2.27",
     "angular-resource": "~1.2.27",
     "angular-route": "~1.2.27",
-    "angular": "~1.2.27"
+    "angular-ui-router": "~0.2.11",
+    "es5-shim": "^3.0.2",
+    "jquery": "~2.1.1",
+    "js-yaml": "^3.4.2"
   },
   "devDependencies": {
     "browserify": "^3.44.2",