Clean / update service view, followup of PR in the core

src/js/yunohost/controllers/services.js

@@ -16,15 +16,9 @@
             };
             $.each(data, function(k, v) {
                 v.name = k;
-                // Handlebars want booleans
-                v.is_loaded = (v.loaded=='enabled') ? true : false;
-                v.is_running = (v.active=='active') ? true : false;
-                // Translate status and loaded state
-                v.status = y18n.t(v.status);
-                v.loaded = y18n.t(v.loaded);
-                if (v.active_at == 'unknown')
+                if (v.last_state_change == 'unknown')
                 {
-                    delete v.active_at;
+                    v.last_state_change = 0;
                 }
                 data2.services.push(v);
             });
@@ -46,25 +40,12 @@
     // Status & actions for a service
     app.get('#/services/:service', function (c) {
         c.api('GET', '/services/'+ c.params['service'], {}, function(data) {
-            var data2 = {
-                service: data
-            };
-            data2.service.name = c.params['service'];
-            // Handlebars want booleans
-            data2.service.is_loaded = (data.loaded=='enabled') ? true : false;
-            data2.service.is_running = (data.active=='active') ? true : false;
-            // Translate status and loaded state
-            data2.service.active = y18n.t(data.active);
-            data2.service.loaded = y18n.t(data.loaded);
-            if (data.active_at != 'unknown')
+            data.name = c.params['service'];
+            if (data.last_state_change == 'unknown')
             {
-                data2.service.active_at = data.active_at;
+                data.last_state_change = 0;
             }
-            else
-            {
-                data2.service.active_at = 0;
-            }
-            c.view('service/service_info', data2, function() {
+            c.view('service/service_info', data, function() {
 
                 // Configure behavior for enable/disable and start/stop buttons
                 $('button[data-action]').on('click', function() {

src/locales/en.json

@@ -53,6 +53,7 @@
     "cancel": "Cancel",
     "check": "Check",
     "close": "Close",
+    "configuration": "Configuration",
     "confirm_app_change_url": "Are you sure you want to change the app access URL?",
     "confirm_app_default": "Are you sure you want to make this app default?",
     "confirm_change_maindomain": "Are you sure you want to change the main domain?",
@@ -269,15 +270,15 @@
     "select_none": "Select none",
     "service_description": "Description:",
     "service_log": "%s log",
-    "service_start_on_boot": "Start on boot: ",
+    "service_start_on_boot": "Start on boot",
     "service_status": "Status: ",
     "services": "Services",
     "services_list": "Service list",
     "set_default": "Set default",
     "size": "Size",
+    "since": "since",
     "skip": "Skip",
     "start": "Start",
-    "started_at": "Started at:",
     "status": "Status",
     "stop": "Stop",
     "storage_create": "Add remote storage",

src/views/service/service_info.ms

@@ -1,7 +1,7 @@
 <div class="btn-breadcrumb">
     <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
     <a href="#/services">{{t 'services'}}</a>
-    <a href="#/services/{{service.name}}">{{service.name}}</a>
+    <a href="#/services/{{service.name}}">{{name}}</a>
 </div>
 
 <div class="separator"></div>
@@ -12,73 +12,70 @@
     <h2 class="panel-title"><span class="fa-fw fa-info-circle"></span> {{t 'infos'}}</h2>
     </div>
     <div class="panel-body">
-    {{#service}}
-        <dl class="dl-horizontal">
-            <dt>{{t 'name'}}</dt>
-            <dd>{{name}}</dd>
-            <dt>{{t 'description'}}</dt>
-            <dd>{{description}}</dd>
-        </dl>
-    {{/service}}
+    <dl class="dl-horizontal">
+
+        <dt>{{t 'name'}}</dt>
+        <dd>{{name}}</dd>
+
+        <dt>{{t 'description'}}</dt>
+        <dd>{{description}}</dd>
+
+        <dt>{{t 'status'}}</dt>
+        <dd>
+        {{#if (eq status "running")}}
+        <span class="text-success">
+            <span class="fa-fw fa-check-circle"></span>
+        {{else}}
+        <span class="text-danger">
+            <span class="fa-fw fa-times"></span>
+        {{/if}}
+            {{t status}} </span> {{t 'since'}} {{formatRelative last_state_change day="numeric" month="long" year="numeric" hour="numeric" minute="numeric" }}
+        </dd>
+
+        <dt>{{t 'service_start_on_boot'}}</dt>
+        {{#if (eq start_on_boot "enabled")}}
+        <dd class="text-success">
+        {{else}}
+        <dd class="text-danger">
+        {{/if}}
+            {{t start_on_boot}}
+        </dd>
+
+        <dt>{{t 'configuration'}}</dt>
+        {{#if (eq configuration "valid")}}
+        <dd class="text-success">
+        {{else if (eq configuration "broken")}}
+        <dd class="text-danger">
+        {{else}}
+        <dd>
+        {{/if}}
+            {{t configuration}}
+        </dd>
+    </dl>
     </div>
 </div>
 
 
 <div class="panel panel-default">
     <div class="panel-heading">
-    <h2 class="panel-title"><span class="fa-fw fa-wrench"></span> {{t 'status'}}</h2>
+    <h2 class="panel-title"><span class="fa-fw fa-wrench"></span> {{t 'operations'}}</h2>
     </div>
     <div class="panel-body">
         <dl class="dl-horizontal">
-    {{#service}}
-        <div class="pull-left">
-            {{t 'service_start_on_boot'}}
-            <span class="text-{{#is_loaded}}success{{/is_loaded}}{{^is_loaded}}danger{{/is_loaded}}">
-            {{loaded}}
-            </span>
-            <br>
-            {{t 'service_status'}}
-            <span class="text-{{#is_running}}success{{/is_running}}{{^is_running}}danger{{/is_running}}">
-            {{active}}
-            </span>
-            <br>
-            {{t 'started_at'}}
-            {{#active_at}}
-            {{formatTime . day="numeric" month="long" year="numeric" hour="numeric" minute="numeric"}}
-            {{/active_at}}
-            {{^active_at}}
-            {{t 'unknown'}}
-            {{/active_at}}
-        </div>
 
-        <div class="pull-right">
-        {{#is_loaded}}
-            <button class="btn btn-danger" data-service="{{name}}" data-action="disable">
-                <span class="fa-square-o"></span> {{t 'disable'}}
-            </button>
-        {{/is_loaded}}
-        {{^is_loaded}}
-            <button class="btn btn-success" data-service="{{name}}" data-action="enable">
-                <span class="fa-check-square-o"></span> {{t 'enable'}}
-            </button>
-        {{/is_loaded}}
-
-        {{#is_running}}
+        {{#if (eq status "running")}}
             <button class="btn btn-danger" data-service="{{name}}" data-action="stop">
                 <span class="fa-stop"></span> {{t 'stop'}}
             </button>
-        {{/is_running}}
-        {{^is_running}}
+        {{else}}
             <button class="btn btn-success" data-service="{{name}}" data-action="start">
                 <span class="fa-play"></span> {{t 'start'}}
             </button>
-        {{/is_running}}
+        {{/if}}
             <a href="#/services/{{name}}/log" role="button" class="btn btn-default slide">
                 <span class="fa-book"></span> {{t 'log'}}
             </a>
-        </div>
 
-    {{/service}}
         </dl>
     </div>
 </div>

src/views/service/service_list.ms

@@ -11,18 +11,16 @@
         <span class="fa-chevron-right pull-right"></span>
         <h2 class="list-group-item-heading">{{name}} <small>{{description}}</small></h2>
         <div class="list-group-item-text">
-            {{t 'service_status'}}
-            <span class="text-{{#is_running}}success{{/is_running}}{{^is_running}}danger{{/is_running}}">
-            {{active}}
-            </span>
-            <br>
-            {{t 'started_at'}}
-            {{#active_at}}
-            {{formatTime . day="numeric" month="long" year="numeric" hour="numeric" minute="numeric"}}
-            {{/active_at}}
-            {{^active_at}}
-            {{t 'unknown'}}
-            {{/active_at}}
+            {{#if (eq status "running")}}
+                <span class="text-success">
+                    <span class="fa-fw fa-check-circle"></span>
+            {{else}}
+                <span class="text-danger">
+                    <span class="fa-fw fa-times"></span>
+            {{/if}}
+                    {{t status}}
+                </span>
+                {{t 'since'}} {{formatRelative last_state_change day="numeric" month="long" year="numeric" hour="numeric" minute="numeric" }}
         </div>
     </a>
 {{/services}}