From 2faecfa4033c5d09a4f264699638e4b1d303909a Mon Sep 17 00:00:00 2001
From: Jakob Borg <jakob@nym.se>
Date: Thu, 12 Jun 2014 02:13:30 +0200
Subject: [PATCH] Formatted report

---
 static/app.js     | 51 +++++++++++++++++++++++++++++++++------
 static/index.html | 61 +++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/static/app.js b/static/app.js
index 550708943..793841617 100644
--- a/static/app.js
+++ b/static/app.js
@@ -10,12 +10,49 @@
 var reports = angular.module('reports', []);
 
 reports.controller('ReportsCtrl', function ($scope, $http) {
-    $scope.report = {};
-    $scope.failure = false;
+	$scope.report = {};
+	$scope.failure = false;
+	$scope.categories = [
+	{key: 'totFiles', descr: 'Files Managed per Node', unit: ''},
+	{key: 'maxFiles', descr: 'Files in Largest Repo', unit: ''},
+	{key: 'totMiB', descr: 'Data Managed per Node', unit: 'MiB'},
+	{key: 'maxMiB', descr: 'Data in Largest Repo', unit: 'MiB'},
+	{key: 'numNodes', descr: 'Number of Nodes in Cluster', unit: ''},
+	{key: 'numRepos', descr: 'Number of Repositories Configured', unit: ''},
+	{key: 'memoryUsage', descr: 'Memory Usage', unit: 'MiB'},
+	{key: 'sha256Perf', descr: 'SHA-256 Hashing Performance', unit: 'MiB/s'},
+	];
 
-    $http.get('/report').success(function (data) {
-        $scope.report = data;
-    }).error(function () {
-        $scope.failure = true;
-    });
+	$http.get('/report').success(function (data) {
+		$scope.report = data;
+
+		var versions = [];
+		for (var ver in data.versions) {
+			versions.push([ver, data.versions[ver]]);
+		}
+		$scope.versions = sortedList(data.versions);
+		$scope.platforms = sortedList(data.platforms);
+
+	}).error(function () {
+		$scope.failure = true;
+	});
 });
+
+function sortedList(d) {
+	var l = [];
+	var tot = 0;
+	for (var o in d) {
+		tot += d[o];
+	}
+
+	for (var o in d) {
+		l.push([o, d[o], 100 * d[o] / tot]);
+	}
+
+	l.sort(function (a, b) {
+		if (b[1] < a[1])
+			return -1;
+		return b[1] > a[1];
+	});
+	return l;
+}
diff --git a/static/index.html b/static/index.html
index 7a92cef1a..5f096f807 100644
--- a/static/index.html
+++ b/static/index.html
@@ -27,11 +27,62 @@ found in the LICENSE file.
   <div class="container">
     <div class="row">
       <div class="col-md-12">
-      <h1>Syncthing Usage Data</h1>
-      <p>
-      This is the aggregated usage report data for yesterday.
-      </p>
-      <pre>{{ report | json}}</pre>
+        <h1>Syncthing Usage Data</h1>
+        <p>
+          This is the aggregated usage report data for yesterday. Data based on <b>{{ report.nodes }}</b> nodes that have reported in.
+        </p>
+
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th></th><th class="text-right">Min</th><th class="text-right">Median</th><th class="text-right">95%</th><th class="text-right">Max</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="cat in categories">
+              <td>{{cat.descr}}</td>
+              <td class="text-right">{{report[cat.key].min}} {{cat.unit}}</td>
+              <td class="text-right">{{report[cat.key].med}} {{cat.unit}}</td>
+              <td class="text-right">{{report[cat.key].nfp}} {{cat.unit}}</td>
+              <td class="text-right">{{report[cat.key].max}} {{cat.unit}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Version</th><th class="text-right">Nodes</th><th class="text-right">Share</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="v in versions">
+              <td>{{v[0]}}</td>
+              <td class="text-right">{{v[1]}}</td>
+              <td class="text-right">{{v[2] | number:2}}%</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="col-md-6">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Platform</th><th class="text-right">Nodes</th><th class="text-right">Share</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="p in platforms">
+              <td>{{p[0]}}</td>
+              <td class="text-right">{{p[1]}}</td>
+              <td class="text-right">{{p[2] | number:2}}%</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>