Sorting for applicationlist in overview

Author: Johannes Stelzer

spring-boot-admin-server-ui/app/css/main.css

@@ -190,6 +190,22 @@ span.refresh {
 	color: #f1f1f1; 
 }
 
+.sortable {
+  cursor: pointer;
+}
+
+.sorted-ascending,
+.sorted-descending {
+  color: #6db33f;
+}
+
+.sorted-ascending::after {
+    content: " \25b2";
+}
+.sorted-descending::after {
+    content: " \25bc";
+}
+
 .nav > li > a {
   color: #838789;
 }

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

@@ -63,4 +63,26 @@ module.exports = function ($scope, $location, $interval, $q, Applications, Appli
     $interval(function () {
         $scope.loadData();
     }, 30000);
+
+    $scope.order = {
+        column: 'name',
+        descending: false
+    };
+
+    $scope.orderBy = function (column) {
+        if (column === $scope.order.column) {
+            $scope.order.descending = !$scope.order.descending;
+        } else {
+            $scope.order.column = column;
+            $scope.order.descending = false;
+        }
+    };
+
+    $scope.orderByCssClass = function (column) {
+        if (column === $scope.order.column) {
+            return 'sorted-' + ($scope.order.descending ? 'descending' : 'ascending');
+        } else {
+            return '';
+        }
+    };
 };

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

@@ -4,14 +4,17 @@ <h2 >Spring-Boot applications<br>
 <table class="table table-striped">
 	<thead>
 		<tr>
-			<th>Application / URL</th>
-			<th>Version</th>
+			<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>
+			<th colspan="2"><span class="sortable" ng-class="orderByCssClass('status')" ng-click="orderBy('status')">Status</span></th>
 		</tr>
 	</thead>
 	<tbody>
-		<tr ng-repeat="application in applications track by application.id">
+		<tr ng-repeat="application in applications|orderBy:order.column:order.descending 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>