Initial prototype of interface

src/css/style.less

@@ -810,3 +810,24 @@ input[type='radio'].nice-radio {
       margin: 1%;
     }
 }
+
+/* Just to be able to override list-group-item with alert-success's background and border colors */
+.alert-success-yo {
+	background-color: #dff0d8;
+	border-color: #d6e9c6;
+}
+
+.alert-warning-yo {
+	background-color: #fcf8e3;
+	border-color: #faebcc;
+}
+
+.alert-danger-yo {
+	background-color: #f2dede;
+	border-color: #ebccd1;
+}
+
+.alert-info-yo {
+	background-color: #d9edf7;
+	border-color: #bce8f1;
+}

src/js/yunohost/controllers/diagnosis.js

@@ -0,0 +1,41 @@
+(function() {
+    // Get application context
+    var app = Sammy.apps['#main'];
+    var store = app.store;
+
+    // *********
+    // Diagnosis
+    // *********
+
+    // Server monitoring
+    app.get('#/diagnosis', function (c) {
+
+        // Why this method ?
+        c.api('/diagnosis/show', function(data) { 
+		console.log(data);
+		c.view('diagnosis/diagnosis_show', data);
+		for (var i = 0 ; i < data.reports.length ; i++)
+		{
+		    for (var j = 0 ; j < data.reports[i].reports.length ; j++)
+		    {
+			var type_ = data.reports[i].reports[j].report[0];
+			type_ = type_.toLowerCase();
+			var icon = "";
+			if (type_ == "success") {
+			    icon = "check-circle";
+			}
+			else if (type_ == "warning") {
+			    icon = "warning";
+			}
+			else if (type_ == "error") {
+			    icon = "times";
+			}
+			data.reports[i].reports[j].report[0] = type_;
+			data.reports[i].reports[j].report.push(icon);
+		    };
+		};
+        }, 'GET');
+
+    });
+
+})();

src/views/diagnosis/diagnosis_show.ms

@@ -0,0 +1,26 @@
+<div class="btn-breadcrumb">
+    <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
+    <a href="#/diagnosis">{{t 'diagnosis'}}</a>
+</div>
+
+<div class="separator"></div>
+
+{{#reports}}
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h2 class="panel-title">{{ description }}</h2>
+    </div>
+    <div class="panel-body">
+	<ul class="list-group">
+		{{#reports}}
+		<li class="list-group-item alert alert-{{report.[0]}} alert-{{report.[0]}}-yo">
+			{{#if report.[2]}}
+			<span class="fa-fw fa-{{report.[2]}}"></span>
+                        {{/if}}
+			{{report.[1]}}
+		</li>
+		{{/reports}}
+	</ul>
+    </div>
+</div>
+{{/reports}}

src/views/home.ms

@@ -23,6 +23,10 @@
         <span class="pull-right fa-chevron-right"></span>
         <h2 class="list-group-item-heading"><span class="fa-fw fa-wrench"></span> {{t 'tools'}}</h2>
     </a>
+    <a href="#/diagnosis" class="list-group-item slide clearfix">
+        <span class="pull-right fa-chevron-right"></span>
+        <h2 class="list-group-item-heading"><span class="fa-fw fa-stethoscope"></span> {{t 'diagnosis'}}</h2>
+    </a>
     <a href="#/backup" class="list-group-item slide clearfix">
         <span class="pull-right fa-chevron-right"></span>
         <h2 class="list-group-item-heading"><span class="fa-fw fa-archive"></span> {{t 'backup'}}</h2>