Merge pull request #274 from YunoHost/update-service-view

Update service view

src/js/yunohost/controllers/services.js

@@ -16,15 +16,9 @@
             };
             $.each(data, function(k, v) {
                 v.name = k;
-                // Handlebars want booleans
+                if (v.last_state_change == 'unknown')
-                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')
                 {
-                    delete v.active_at;
+                    v.last_state_change = 0;
                 }
                 data2.services.push(v);
             });
@@ -46,28 +40,26 @@
     // Status & actions for a service
     app.get('#/services/:service', function (c) {
         c.api('GET', '/services/'+ c.params['service'], {}, function(data) {
-            var data2 = {
+        c.api('GET', '/services/'+ c.params['service'] +'/log', {number: 50}, function(data_log) {
-                service: data
+
-            };
+            data.name = c.params['service'];
-            data2.service.name = c.params['service'];
+            if (data.last_state_change == 'unknown')
-            // 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')
             {
-                data2.service.active_at = data.active_at;
+                data.last_state_change = 0;
             }
-            else
+
-            {
+            data.logs = [];
-                data2.service.active_at = 0;
+            $.each(data_log, function(k, v) {
-            }
+                data.logs.push({filename: k, filecontent: v.join('\n')});
-            c.view('service/service_info', data2, function() {
+            });
+
+            // Sort logs by filename, put the journalctl/systemd log on top
+            data.logs.sort(function(a,b) { return a.filename === "journalctl" ? -1 : b.filename === "journalctl" ? 1 : a.filename < b.filename ? -1 : a.filename > b.filename ? 1 : 0; });
+
+            c.view('service/service_info', data, function() {
 
                 // Configure behavior for enable/disable and start/stop buttons
-                $('button[data-action]').on('click', function() {
+                $('button[data-action="start"], button[data-action="stop"]').on('click', function() {
 
                     var service = $(this).data('service');
                     var action = $(this).data('action');
@@ -77,32 +69,35 @@
                         var method = null,
                             endurl = service;
 
-                        switch (action) {
+                        method = action === "start" ? 'PUT' : 'DELETE';
-                            case 'start':
-                                method = 'PUT';
-                                break;
-                            case 'stop':
-                                method = 'DELETE';
-                                break;
-                            case 'enable':
-                                method = 'PUT';
-                                endurl += '/enable';
-                                break;
-                            case 'disable':
-                                method = 'DELETE';
-                                endurl += '/enable';
-                                break;
-                            default:
-                                c.flash('fail', y18n.t('unknown_action', [action]));
-                                c.refresh();
-                                return;
-                        }
-
                         c.api(method, '/services/'+ endurl, {}, function() { c.refresh(); });
                     });
                 });
+
+                // Configure behavior for enable/disable and start/stop buttons
+                $('button[data-action="share"]').on('click', function() {
+
+                    c.showLoader();
+
+                    // Send to paste.yunohost.org
+                    $.ajax({
+                        type: "POST",
+                        url: 'https://paste.yunohost.org/documents',
+                        data: $("#logs").text(),
+                    })
+                    .success(function(data, textStatus, jqXHR) {
+                        window.open('https://paste.yunohost.org/' + data.key, '_blank');
+                    })
+                    .fail(function() {
+                        c.flash('fail', y18n.t('paste_error'));
+                    })
+                    .always(function(){
+                        c.hideLoader();
+                    });
+                });
             });
         });
+        });
     });
 
     // Service log

src/js/yunohost/helpers.js

@@ -336,9 +336,6 @@
                         }
                     });
 
-                    // Paste <pre> helper
-                    c.prePaste();
-
                     // Run callback
                     callback();
 
@@ -493,39 +490,7 @@
               str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
             }
           return str.join("&");
-        },
-
-
-        //
-        // Misc helpers used in views etc..
-        //
-
-        // Paste <pre>
-        prePaste: function() {
-            var pasteButtons = $('button[data-paste-content],a[data-paste-content]');
-            pasteButtons.on('click', function(){
-                // Get paste content element
-                var preElement = $($(this).data('paste-content'));
-
-                c.showLoader();
-
-                // Send to paste.yunohost.org
-                $.ajax({
-                    type: "POST",
-                    url: 'https://paste.yunohost.org/documents',
-                    data: preElement.text(),
-                })
-                .success(function(data, textStatus, jqXHR) {
-                    window.open('https://paste.yunohost.org/' + data.key, '_blank');
-                })
-                .fail(function() {
-                    c.flash('fail', y18n.t('paste_error'));
-                })
-                .always(function(){
-                    c.hideLoader();
-                });
-            });
         }
-    });
 
+    });
 })();

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>
@@ -9,76 +9,67 @@
 
 <div class="panel panel-default">
     <div class="panel-heading">
-    <h2 class="panel-title"><span class="fa-fw fa-info-circle"></span> {{t 'infos'}}</h2>
+        <h2 class="panel-title" style="display: inline-block; margin-right: 10px;"><span class="fa-fw fa-info-circle"></span> {{t name}}</h2>
+        {{#if (eq status "running")}}
+            <button class="btn btn-sm btn-danger pull-right" data-service="{{name}}" data-action="stop">
+                <span class="fa-stop"></span> {{t 'stop'}}
+            </button>
+        {{else}}
+            <button class="btn btn-sm btn-success pull-right" data-service="{{name}}" data-action="start">
+                <span class="fa-play"></span> {{t 'start'}}
+            </button>
+        {{/if}}
     </div>
     <div class="panel-body">
-    {{#service}}
+    <dl class="dl-horizontal">
-        <dl class="dl-horizontal">
+
-            <dt>{{t 'name'}}</dt>
+        <dt>{{t 'description'}}</dt>
-            <dd>{{name}}</dd>
+        <dd>{{description}}</dd>
-            <dt>{{t 'description'}}</dt>
+
-            <dd>{{description}}</dd>
+        <dt>{{t 'status'}}</dt>
-        </dl>
+        <dd>
-    {{/service}}
+        {{#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" style="display: inline-block; margin-right: 10px;"><span class="fa-fw fa-book"></span> {{t 'logs'}}</h2>
+        <button class="btn btn-sm btn-success pull-right" data-action="share"><span class="fa-cloud-upload"></span> {{t 'logs_share_with_yunopaste'}}</button>
     </div>
-    <div class="panel-body">
+    <div id="logs" class="panel-body">
-        <dl class="dl-horizontal">
+    {{#logs}}
-    {{#service}}
+        <h2>{{filename}}</h2>
-        <div class="pull-left">
+        <pre class="service-log">{{filecontent}}</pre>
-            {{t 'service_start_on_boot'}}
+    {{/logs}}
-            <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}}
-            <button class="btn btn-danger" data-service="{{name}}" data-action="stop">
-                <span class="fa-stop"></span> {{t 'stop'}}
-            </button>
-        {{/is_running}}
-        {{^is_running}}
-            <button class="btn btn-success" data-service="{{name}}" data-action="start">
-                <span class="fa-play"></span> {{t 'start'}}
-            </button>
-        {{/is_running}}
-            <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'}}
+            {{#if (eq status "running")}}
-            <span class="text-{{#is_running}}success{{/is_running}}{{^is_running}}danger{{/is_running}}">
+                <span class="text-success">
-            {{active}}
+                    <span class="fa-fw fa-check-circle"></span>
-            </span>
+            {{else}}
-            <br>
+                <span class="text-danger">
-            {{t 'started_at'}}
+                    <span class="fa-fw fa-times"></span>
-            {{#active_at}}
+            {{/if}}
-            {{formatTime . day="numeric" month="long" year="numeric" hour="numeric" minute="numeric"}}
+                    {{t status}}
-            {{/active_at}}
+                </span>
-            {{^active_at}}
+                {{t 'since'}} {{formatRelative last_state_change day="numeric" month="long" year="numeric" hour="numeric" minute="numeric" }}
-            {{t 'unknown'}}
-            {{/active_at}}
         </div>
     </a>
 {{/services}}

src/views/service/service_log.ms

@@ -1,16 +0,0 @@
-<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/{{name}}">{{name}}</a>
-    <a href="#/services/{{name}}/log">{{t 'log'}}</a>
-</div>
-
-<div class="separator"></div>
-
-<div class="container">
-    {{#logs}}
-        <h2>{{filename}}</h2>
-        <pre id="log" class="service-log">{{filecontent}}</pre>
-        <button data-paste-content="#log"><i class="fa-cloud-upload"></i> {{t 'upload'}}</button>
-    {{/logs}}
-</div>