dashboard: Show system stats

dashboard/src/views/system.html

@@ -11,8 +11,45 @@
   </div>
 
   <div class="row">
-    <div class="col-md-6">
+    <div class="col-md-12">
 
+      <h3 class="graphs-toolbar">
+        Server
+      </h3>
+
+      <div class="card card-expand">
+        <div class="row">
+          <div class="col-xs-4 text-muted">Platform Version</div>
+          <div class="col-xs-8 text-right">v{{ config.version }} ({{ config.ubuntuVersion }})</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-4 text-muted">Vendor</div>
+          <div class="col-xs-8 text-right">{{ info.sysVendor }}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-4 text-muted">Product</div>
+          <div class="col-xs-8 text-right">{{ info.productName }}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-4 text-muted">CPU</div>
+          <div class="col-xs-8 text-right">{{ cpus.length + ' Core "' + cpus[0].model + '"' }}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-4 text-muted">Memory</div>
+          <div class="col-xs-8 text-right">{{ memory.memory | prettyDiskSize }} RAM and {{ memory.swap | prettyDiskSize }} Swap</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-4 text-muted">Uptime</div>
+          <div class="col-xs-8 text-right">{{ info.uptimeSecs }}</div>
+        </div>
+        <div class="row" ng-show="info.activationTime">
+          <div class="col-xs-4 text-muted">Cloudron Creation Time</div>
+          <div class="col-xs-8 text-right">{{ info.activationTime | prettyDate }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
       <h3 class="graphs-toolbar">
         Graphs
         <div class="graphs-toolbar-actions">

dashboard/src/views/system.js

@@ -2,6 +2,7 @@
 
 /* global angular */
 /* global $ */
+/* global TASK_TYPES */
 /* global Chart */
 
 angular.module('Application').controller('SystemController', ['$scope', '$location', '$timeout', 'Client', function ($scope, $location, $timeout, Client) {
@@ -9,6 +10,8 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
 
     $scope.config = Client.getConfig();
     $scope.memory = null;
+    $scope.cpus = null;
+    $scope.info = null;
     $scope.volumesById = {};
 
     // https://stackoverflow.com/questions/1484506/random-color-generator
@@ -321,6 +324,20 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
     };
 
     Client.onReady(function () {
+        Client.cpus(function (error, cpus) {
+            if (error) console.error(error);
+            $scope.cpus = cpus;
+        });
+
+        Client.systemInfo(function (error, info) {
+            if (error) console.error(error);
+
+            // prettify for UI
+            info.uptimeSecs = moment.duration(info.uptimeSecs, 'seconds').locale(navigator.language).humanize();
+
+            $scope.info = info;
+        });
+
         Client.memory(function (error, memory) {
             if (error) console.error(error);