@ntlab/sipd-tu-bridge-ui 1.4.1 → 1.6.0

package/controller/security.js

@@ -25,6 +25,11 @@
 const Controller = require('@ntlab/express-controller');
 const Express = require('express').application;
 
+/**
+ * Security controller provides user authentication mechanism.
+ *
+ * @author Toha <tohenk@yahoo.com>
+ */
 class SecurityController extends Controller {
 
     buildRoutes() {

package/controller/ui.js

@@ -27,6 +27,11 @@ const path = require('path');
 const Controller = require('@ntlab/express-controller');
 const Express = require('express').application;
 
+/**
+ * Ui controller provides user interface interaction.
+ *
+ * @author Toha <tohenk@yahoo.com>
+ */
 class UiController extends Controller {
 
     buildRoutes() {
@@ -38,6 +43,7 @@ class UiController extends Controller {
                 bridge.stat = await bridge.getStats();
                 bridge.last = await bridge.getLast();
                 bridge.current = await bridge.getCurrent();
+                bridge.logs = await bridge.getLogFiles();
             }
             const socketOptions = {};
             if (req.app.get('root') !== '/') {
@@ -109,6 +115,37 @@ class UiController extends Controller {
             result.pages = req.app.locals.pager(result.count, result.size, result.page);
             res.json(result);
         });
+        this.addRoute('task', 'post', '/task/:op', async (req, res, next) => {
+            const result = {
+                success: false
+            }
+            let retval;
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            switch (req.params.op) {
+                case 'log':
+                    if  (req.body.seq) {
+                        if (req.body.log) {
+                            retval = await api.query({cmd: 'log-file', log: req.body.log, seq: req.body.seq});
+                        } else {
+                            retval = await api.query({cmd: 'log-file', seq: req.body.seq});
+                        }
+                    }
+                    break;
+                case 'remove':
+                    if  (req.body.queue) {
+                        retval = await api.query({cmd: 'remove-queue', queue: req.body.queue});
+                    }
+                    if  (req.body.error) {
+                        retval = await api.query({cmd: 'clean-err', error: req.body.error});
+                    }
+                    break;
+                case 'restart':
+                    retval = await api.query({cmd: 'restart'});
+                    break;
+            }
+            res.json({...result, ...(retval || {})});
+        });
         this.addRoute('about', 'get', '/about', (req, res, next) => {
             let about;
             if (req.app.about) {
@@ -125,24 +162,6 @@ class UiController extends Controller {
             }
             res.json(about);
         });
-        this.addRoute('task', 'post', '/task/:op', async (req, res, next) => {
-            const result = {
-                success: false
-            }
-            /** @type {import('..').SipdApi} */
-            const api = req.app.api;
-            switch (req.params.op) {
-                case 'remove':
-                    if  (req.body.error) {
-                        Object.assign(result, await api.query({cmd: 'clean-err', error: req.body.error}));
-                    }
-                    break;
-                case 'restart':
-                    Object.assign(result, await api.query({cmd: 'restart'}));
-                    break;
-            }
-            res.json(result);
-        });
     }
 
     /**

package/helper/app.js

@@ -32,6 +32,8 @@ const { minify_sync } = require('terser');
 
 /**
  * Express app middleware.
+ *
+ * @author Toha <tohenk@yahoo.com>
  */
 class AppFunctions extends HelperFunctions {
 

package/index.js

@@ -22,7 +22,20 @@
  * SOFTWARE.
  */
 
-/* --- BEGIN API --- */
+const createError = require('http-errors');
+const express = require('express');
+const path = require('path');
+const logger = require('morgan');
+const session = require('express-session');
+const FileStore = require('session-file-store')(session);
+const { Helper, Security, Factory } = require('@ntlab/express-middleware');
+const { ScriptManager, ScriptAsset } = require('@ntlab/ntjs');
+const { Assets, CDN } = require('@ntlab/ntjs-assets');
+
+// register script repository
+require('@ntlab/ntjs-repo')();
+
+/* --- BEGIN API V1 --- */
 
 /**
  * SIPD Penatausahaan Bridge main application.
@@ -35,10 +48,10 @@
  * @property {object} config Configuration
  * @property {SipdBridge[]} bridges Bridges
  * @property {AuthenticateFunction} authenticate Perform usename and password authentication
- * @property {PagedObjectsPromiseFunction} getQueues Get queues
- * @property {StringPromiseFunction} getActivity Get activity logs
- * @property {ObjectPromiseFunction} getCount Get activity count
- * @property {PagedObjectsPromiseFunction} getErrors Get captured errors
+ * @property {PagedObjectsFunction} getQueues Get queues
+ * @property {ActivityFunction} getActivity Get activity logs
+ * @property {ObjectFunction} getCount Get activity count
+ * @property {PagedObjectsFunction} getErrors Get captured errors
  * @property {QueryFunction} query Perform API query
  */
 
@@ -48,10 +61,11 @@
  * @typedef {Object} SipdBridge
  * @property {string} name Name
  * @property {number} year Year
- * @property {ObjectPromiseFunction} getStats Get bridge stats
- * @property {StringPromiseFunction} getLogs Get bridge logs
- * @property {ObjectPromiseFunction} getLast Get last queue
- * @property {ObjectPromiseFunction} getCurrent Get current processing queue
+ * @property {ObjectFunction} getStats Get bridge stats
+ * @property {ActivityFunction} getLogs Get bridge logs
+ * @property {LogFilesFunction} getLogFiles Get bridge addiitonal log files
+ * @property {ObjectFunction} getLast Get last queue
+ * @property {ObjectFunction} getCurrent Get current processing queue
  */
 
 /**
@@ -74,50 +88,46 @@
  */
 
 /**
- * A function which returns paged objects Promise.
+ * Get objects at specified page with size of limit. If none specified
+ * it returns first page with default size limit (either 10 or 25).
  *
- * @callback PagedObjectsPromiseFunction
- * @param {number} page Page number
- * @param {number} size Page size
+ * @callback PagedObjectsFunction
+ * @param {?number} page Page number
+ * @param {?number} size Page size
  * @returns {Promise<object[]>}
  */
 
 /**
- * A function which returns object Promise.
+ * Get miscellanous object such as queue or log.
  *
- * @callback ObjectPromiseFunction
+ * @callback ObjectFunction
  * @returns {Promise<object>}
  */
 
 /**
- * A function which returns string Promise.
+ * Get string content such as activity logs.
  *
- * @callback StringPromiseFunction
+ * @callback ActivityFunction
+ * @param {?string} seq Sequence number
  * @returns {Promise<string>}
  */
 
 /**
- * A function which returns object Promise.
+ * Query api and return result object.
  *
  * @callback QueryFunction
  * @param {object} data Query data
  * @returns {Promise<object>}
  */
 
-/* --- END API --- */
-
-const createError = require('http-errors');
-const express = require('express');
-const path = require('path');
-const logger = require('morgan');
-const session = require('express-session');
-const FileStore = require('session-file-store')(session);
-const { Helper, Security, Factory } = require('@ntlab/express-middleware');
-const { ScriptManager, ScriptAsset } = require('@ntlab/ntjs');
-const { Assets, CDN } = require('@ntlab/ntjs-assets');
+/**
+ * Get additional log files.
+ *
+ * @callback LogFilesFunction
+ * @returns {Promise<[{name: string, seq: string, time: number}]>}
+ */
 
-// register script repository
-require('@ntlab/ntjs-repo')();
+/* --- END API --- */
 
 /**
  * Express application.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntlab/sipd-tu-bridge-ui",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "SIPD Penatausahaan Bridge Web Interface",
   "main": "index.js",
   "scripts": {
@@ -31,17 +31,16 @@
   },
   "homepage": "https://github.com/tohenk/node-sipd-tu-bridge-ui#readme",
   "dependencies": {
-    "@ntlab/express-controller": "^1.2.0",
-    "@ntlab/express-middleware": "^2.4.0",
+    "@ntlab/express-controller": "^1.3.0",
+    "@ntlab/express-middleware": "^2.6.0",
     "@ntlab/ntjs": "^3.1.0",
-    "@ntlab/ntjs-assets": "^2.139.0",
+    "@ntlab/ntjs-assets": "^2.144.0",
     "@ntlab/ntjs-repo": "^3.1.0",
     "@ntlab/ntlib": "^2.9.1",
     "ejs": "^3.1.10",
     "express": "^5.2.1",
     "express-session": "^1.19.0",
     "http-errors": "^2.0.1",
-    "moment": "^2.30.1",
     "morgan": "^1.10.1",
     "session-file-store": "^1.5.0",
     "terser": "^5.46.0"

package/public/css/app.css

@@ -1,3 +1,8 @@
+:root {
+  --viewport-h-limit: 70vh;
+  --viewport-w-limit: 70vw;
+}
+
 body.with-menu {
   padding-top: 5em;
 }
@@ -15,6 +20,14 @@ img.logo {
   margin-right: 1em !important;
 }
 
+.v-max {
+  max-height: var(--viewport-h-limit) !important;
+}
+
+.v-min {
+  min-height: var(--viewport-h-limit) !important;
+}
+
 @media only screen and (min-width: 1200px) {
   .ui.container.queue-name {
     max-width: 20em;
@@ -47,10 +60,10 @@ img.logo {
 
 @media only screen and (min-width: 768px) and (max-width: 991.98px) {
   .ui.container.queue-name {
-    max-width: 10em;
+    max-width: 8em;
   }
   .ui.container.queue-result {
-    max-width: 12.5em;
+    max-width: 10em;
   }
   .ui.container.err-message {
     max-width: 12.5em;
@@ -65,7 +78,7 @@ img.logo {
   .ui.container.queue-result,
   .ui.container.err-message,
   .ui.container.err-data {
-    max-width: 75vw;
+    max-width: var(--viewport-w-limit);
     margin-left: 0 !important;
     margin-right: 0 !important;
   }

package/views/layout/default.ejs

@@ -15,17 +15,17 @@
 <body<% if (mainmenu) { %> class="with-menu"<% } %>>
   <%_ if (mainmenu) { -%>
   <section class="ui fixed inverted menu">
-  <%- mainmenu -%>
+    <%- indent(mainmenu, 4) -%>
   </section>
   <%_ } -%>
   <main class="ui container">
     <%_ if (title.length) { -%>
     <h1 class="ui dividing header"><%= title %></h1>
     <%_ } -%>
-    <%- content -%>
+    <%- indent(content, 4) -%>
   </main>
   <%_ if ((addons = slot('addons')) && (addons = include(addons))) { -%>
-  <%- addons -%>
+  <%- indent(addons, 2) -%>
   <%_ } -%>
   <%_ javascripts().forEach(js => { -%>
   <script type="text/javascript" src="<%- path(js) %>"></script>

package/views/slot/mainmenu.ejs

@@ -32,7 +32,7 @@
         }
     });
 } -%>
-<%- menu(menus, {mainmenu: true, indentation: 2}) %>
+<%- menu(menus, {mainmenu: true}) %>
 <%_ script.create('JQuery')
   .useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message', 'SemanticUI/Dialog/Confirm'])
   .add(`

package/views/ui/bridge.ejs

@@ -11,13 +11,30 @@
     </div>
     <div class="twelve wide column">
       <%_ bridges.forEach(bridge => { -%>
-      <div class="ui form bridge <%= bridge.name %>" style="display: none;">
-        <%_ Object.keys(bridge.stat).forEach(stat => { -%>
-        <div class="fields">
-          <div class="six wide field"><label><%= _(bridge.stat[stat].label) %></label></div>
-          <div class="ten wide field"><input type="text" value="<%- bridge.stat[stat].value %>" data-key="<%= stat %>" readonly></div>
+      <div class="ui form bridge <%= bridge.name %>" data-bridge="<%= bridge.name %>" style="display: none;">
+        <div class="ui two column stackable grid">
+          <div class="column">
+            <%_ Object.keys(bridge.stat).forEach(stat => { -%>
+            <div class="two fields">
+              <div class="field"><label><%= _(bridge.stat[stat].label) %></label></div>
+              <div class="field"><input type="text" value="<%- bridge.stat[stat].value %>" data-key="<%= stat %>" readonly></div>
+            </div>
+            <%_ }) -%>
+          </div>
+          <div class="column">
+            <div class="two fields">
+              <div class="field"><label><%= _('Archived logs') %></label></div>
+              <div class="field">
+                <select class="ui dropdown" data-log="<%= bridge.name %>" data-title="<%= _('Bridge <span class="ui info text">%NAME%</span> log %LOG%') %>">
+                  <option value=""><%= _('- Select log -') %></option>
+                  <%_ bridge.logs.forEach(log => { -%>
+                  <option value="<%= log.seq %>"><%= log.name %></option>
+                  <%_ }) -%>
+                </select>
+              </div>
+            </div>
+          </div>
         </div>
-        <%_ }) -%>
         <div class="field">
           <label><%= _('Logs') %></label>
           <textarea class="log <%= bridge.name %>" rows="20" readonly></textarea>
@@ -39,4 +56,5 @@ $('a[data-bridge]').on('click', function(e) {
     $(\`.ui.form.bridge\`).hide();
     $(\`.ui.form.bridge.\${a.data('bridge')}\`).show();
 }).filter(':first').click();
+$('.ui.dropdown').dropdown();
 `) -%>

package/views/ui/error.ejs

@@ -39,21 +39,21 @@ $.error = $.loader($('div[data-tab="error"] table'), {
 });
 $.error.toRow = function(data) {
     return $(\`
-<tr><td>\${data.nr}</td>
-  <td>\${this.toImg($.toStr(data.image), data.filename)}</td>
-  <td>\${this.toPayload(data.error, '${_('Error Message')}')}</td>
-  <td>\${this.toPayload(data.data, '${_('Error Data')}')}</td>
-  <td>
-    <a href="#" class="err-clicker" data-op="delete" data-filename="\${data.filename}" role="button"><i class="trash alternate outline red icon"></i></a>
-  </td>
-</tr>\`);
+      <tr><td>\${data.nr}</td>
+        <td>\${this.toImg($.toStr(data.image), data.filename)}</td>
+        <td>\${this.toPayload(data.error, '${_('Error Message')}')}</td>
+        <td>\${this.toPayload(data.data, '${_('Error Data')}')}</td>
+        <td>
+          <a href="#" class="err-clicker" data-op="delete" data-filename="\${data.filename}" role="button"><i class="trash alternate outline red icon"></i></a>
+        </td>
+      </tr>\`);
 }
 $.error.toImg = function(data, alt) {
     if (data) {
         return \`
-<a href="#" class="err-clicker" data-op="view" data-title="\${alt}" data-tooltip="\${alt}" data-position="right center">
-  <img class="ui medium rounded bordered image" src="\${data}" alt="\${alt}">
-</a>\`;
+          <a href="#" class="err-clicker" data-op="view" data-title="\${alt}" data-tooltip="\${alt}" data-position="right center">
+            <img class="ui medium rounded bordered image" src="\${data}" alt="\${alt}">
+          </a>\`;
     }
 }
 $.error.toPayload = function(data, title) {
@@ -79,10 +79,10 @@ $.error.toPayload = function(data, title) {
             excerpt += '&hellip;';
         }
         return \`
-<a href="#" class="err-clicker" data-op="view" data-title="\${title}">
-  <span>\${excerpt}</span>
-  <pre style="display: none;">\${payload}</pre>
-</a>\`;
+          <a href="#" class="err-clicker" data-op="view" data-title="\${title}">
+            <span>\${excerpt}</span>
+            <pre style="display: none;">\${payload}</pre>
+          </a>\`;
     }
 }
 $.error.handle = function(el) {
@@ -92,7 +92,7 @@ $.error.handle = function(el) {
             let content, size = 'large';
             const img = el.find('img'), pre = el.find('pre');
             if (img.length) {
-                content = \`<img class="ui fluid image" src="\${img.attr('src')}" style="max-height: 70vh;">\`;
+                content = \`<img class="ui fluid image v-max" src="\${img.attr('src')}">\`;
                 size = 'fullscreen';
             }
             if (pre.length) {
@@ -113,7 +113,7 @@ $.error.handle = function(el) {
             $.ntdlg.confirm(
                 'err-delete-confirm-dlg',
                 '${_('Confirm')}',
-                '${_('Are you sure want to remove error <code>%ERR%</code>?')}'.replace(/%ERR%/g, el.data('filename')),
+                '${_('Are you sure want to remove error <span class="ui error text">%ERR%</span>?')}'.replace(/%ERR%/g, el.data('filename')),
                 $.ntdlg.ICON_QUESTION,
                 function() {
                     $.post('${route('Ui', {name: 'task', op: 'remove'})}', {error: el.data('filename')})

package/views/ui/index.ejs

@@ -1,29 +1,29 @@
 <div class="ui top attached stackable tabular menu">
   <a class="item" data-tab="status"><%= _('Status') %></a>
   <a class="item" data-tab="activity"><%= _('Activity') %></a>
-  <a class="item" data-tab="queue"><%= _('Queue') %> <span class="ui hidden tiny label"></span></a>
+  <a class="item" data-tab="queue"><%= _('Queue') %> <span class="ui hidden blue tiny label"></span></a>
   <%_ if (api.bridges.length) { -%>
-  <a class="item" data-tab="bridge"><%= _('Bridge') %> <span class="ui tiny label"><%= api.bridges.length %></span></a>
+  <a class="item" data-tab="bridge"><%= _('Bridge') %> <span class="ui green tiny label"><%= api.bridges.length %></span></a>
   <%_ } -%>
-  <a class="item" data-tab="error"><%= _('Error') %> <span class="ui hidden tiny label"></span></a>
+  <a class="item" data-tab="error"><%= _('Error') %> <span class="ui hidden red tiny label"></span></a>
 </div>
 <div class="ui bottom attached tab segment" data-tab="status">
-<%- include('status') -%>
+  <%- indent(include('status'), 2) -%>
 </div>
 <div class="ui bottom attached tab segment" data-tab="activity">
-<%- include('activity') -%>
+  <%- indent(include('activity'), 2) -%>
 </div>
 <div class="ui bottom attached tab segment" data-tab="queue">
-<%- include('queue') -%>
+  <%- indent(include('queue'), 2) -%>
 </div>
 <%- include('bridgehandler') -%>
 <%_ if (api.bridges.length) { -%>
 <div class="ui bottom attached tab segment" data-tab="bridge">
-<%- include('bridge') -%>
+  <%- indent(include('bridge'), 2) -%>
 </div>
 <%_ } -%>
 <div class="ui bottom attached tab segment" data-tab="error">
-<%- include('error') -%>
+  <%- indent(include('error'), 2) -%>
 </div>
 <%- include('ticker') -%>
 <%- include('util') -%>
@@ -84,5 +84,18 @@ $('.menu [data-tab]').tab({
         window.location.hash = path;
     }
 });
+$('select[data-log]').on('change', function(e) {
+    e.preventDefault();
+    const el = $(this);
+    const seq = el.val();
+    if (seq !== '') {
+        const log = el.data('log');
+        const logname = el.find(\`option[value="\${seq}"]\`).text();
+        const title = el.data('title')
+            .replace(/%LOG%/g, logname)
+            .replace(/%NAME%/g, log?.toUpperCase());
+        $.viewLog(title, log, seq);
+    }
+});
 $.uiCon.init();
 `) -%>

package/views/ui/info.ejs

@@ -3,27 +3,27 @@
     <div class="item header"><i class="ui info circle icon"></i><%- _('General Information') %></div>
   </div>
   <div class="extra content">
-      <div class="ui form">
-        <div class="ui two column stackable grid">
-          <div class="column">
-            <div class="fields">
-              <div class="eight wide field"><label><%= _('Protocol:') %></label></div>
-              <div class="eight wide field"><label><%= api.proto %></label></div>
-            </div>
-            <div class="fields">
-              <div class="eight wide field"><label><%= _('Mode:') %></label></div>
-              <div class="eight wide field"><label><%= api.mode %></label></div>
-            </div>
+    <div class="ui form">
+      <div class="ui two column stackable grid">
+        <div class="column">
+          <div class="fields">
+            <div class="eight wide field"><label><%= _('Protocol:') %></label></div>
+            <div class="eight wide field"><label><%= api.proto %></label></div>
           </div>
-          <div class="column">
-            <%_ Object.keys(api.counter).forEach(counter => { -%>
-            <div class="fields">
-              <div class="eight wide field"><label><%= _(api.counter[counter].label) %></label></div>
-              <div class="eight wide field"><label data-counter="<%= counter %>"><%= _(api.counter[counter].value) %></label></div>
-            </div>
-            <%_ }) -%>
+          <div class="fields">
+            <div class="eight wide field"><label><%= _('Mode:') %></label></div>
+            <div class="eight wide field"><label><%= api.mode %></label></div>
           </div>
         </div>
+        <div class="column">
+          <%_ Object.keys(api.counter).forEach(counter => { -%>
+          <div class="fields">
+            <div class="eight wide field"><label><%= _(api.counter[counter].label) %></label></div>
+            <div class="eight wide field"><label data-counter="<%= counter %>"><%= _(api.counter[counter].value) %></label></div>
+          </div>
+          <%_ }) -%>
+        </div>
       </div>
+    </div>
   </div>
 </div>

package/views/ui/queue.ejs

@@ -9,11 +9,12 @@
       <th><%= _('Status') %></th>
       <th><%= _('Result') %></th>
       <th><%= _('Time') %></th>
+      <th><%= _('Action') %></th>
     </tr>
   </thead>
 </table>
 <%_ script.create('JQuery')
-  .useDependencies('SemanticUI/Loader')
+  .useDependencies(['SemanticUI/Loader', 'SemanticUI/Dialog/Confirm'])
   .add(`
 $.queue = $.loader($('div[data-tab="queue"] table'), {
     url: '${route('Ui', {name: 'queue', page: 'PAGE'})}',
@@ -30,6 +31,11 @@ $.queue = $.loader($('div[data-tab="queue"] table'), {
                 counter.addClass('hidden');
             }
         }
+        $('[data-status!="processing"] [data-op="delete"]').hide();
+        $('a.queue-clicker').on('click', function(e) {
+            e.preventDefault();
+            self.handle($(this));
+        });
         if (self.loading) {
             self.loading = false;
         }
@@ -37,14 +43,17 @@ $.queue = $.loader($('div[data-tab="queue"] table'), {
 });
 $.queue.toRow = function(data) {
     return $(\`
-<tr><td>\${data.nr}</td>
-  <td>\${$.toStr(data.id)}</td>
-  <td>\${$.toStr(data.type)}</td>
-  <td><div class="ui scrolling container queue-name">\${$.hidePayload($.toStr(data.name))}</div></td>
-  <td>\${this.toStatus(data.status)}</td>
-  <td><div class="ui scrolling container queue-result">\${$.hidePayload($.toStr(data.result))}</div></td>
-  <td>\${$.toStr(data.time)}</td>
-</tr>\`);
+      <tr data-status="\${data.status}"><td>\${data.nr}</td>
+        <td>\${$.toStr(data.id)}</td>
+        <td>\${$.toStr(data.type)}</td>
+        <td><div class="ui scrolling container queue-name">\${$.hidePayload($.toStr(data.name))}</div></td>
+        <td>\${this.toStatus(data.status)}</td>
+        <td><div class="ui scrolling container queue-result">\${$.hidePayload($.toStr(data.result))}</div></td>
+        <td>\${$.toStr(data.time)}</td>
+        <td>
+          <a href="#" class="queue-clicker" data-op="delete" data-queue="\${data.id}" role="button"><i class="trash alternate outline red icon"></i></a>
+        </td>
+      </tr>\`);
 }
 $.queue.toStatus = function(data) {
     const icon = {
@@ -58,6 +67,28 @@ $.queue.toStatus = function(data) {
     return icon ? \`<div data-tooltip="\${data}" data-position="right center"><i class="\${icon} icon"></i></div>\` :
         $.toStr(data);
 }
+$.queue.handle = function(el) {
+    const self = this;
+    switch (el.data('op')) {
+        case 'delete':
+            $.ntdlg.confirm(
+                'queue-delete-confirm-dlg',
+                '${_('Confirm')}',
+                '${_('Are you sure want to remove queue <span class="ui error text">%QUEUE%</span>?')}'.replace(/%QUEUE%/g, el.data('queue')),
+                $.ntdlg.ICON_QUESTION,
+                function() {
+                    $.post('${route('Ui', {name: 'task', op: 'remove'})}', {queue: el.data('queue')})
+                        .done(function(json) {
+                            $.tasks.notify(json);
+                            if (json.success) {
+                                self.reload();
+                            }
+                        });
+                }
+            );
+            break;
+    }
+}
 $.queue.reload = function() {
     const self = this;
     if (!self.loading) {

package/views/ui/status.ejs

@@ -2,7 +2,7 @@
   <div class="row"></div>
   <div class="row">
     <div class="twelve wide column">
-      <%- include('info') -%>
+      <%- indent(include('info'), 6) -%>
     </div>
   </div>
   <%_ if (api.bridges.length) { -%>
@@ -18,7 +18,7 @@
   <div class="twelve wide column">
     <div class="ui fluid card">
       <div class="content">
-        <div class="ui right floated tiny label"><%= bridge.year %></div>
+        <div class="ui red right floated tiny label"><%= bridge.year %></div>
         <div class="item header"><i class="ui laptop code icon"></i><%= bridge.name.toUpperCase() %></div>
       </div>
       <div class="extra content" data-bridge="<%= bridge.name %>">
@@ -71,12 +71,16 @@
   </div>
   <%_ }) -%>
   <%_ } else { -%>
-  <div class="ui placeholder segment" style="min-height: 75vh;">
-    <div class="ui icon header">
-      <i class="laptop code icon"></i>
-      <div class="ui big hidden divider"></div>
-      <%= _('Currently, no connected bridge available.') %><br/>
-      <%= _('Once a connection established, it will appear here.') %>
+  <div class="row">
+    <div class="twelve wide column">
+      <div class="ui placeholder segment v-min">
+        <div class="ui icon header">
+          <i class="laptop code icon"></i>
+          <div class="ui big hidden divider"></div>
+          <%= _('Currently, no configured bridge available.') %><br/>
+          <%= _('Once a bridge is configured, it will appear here.') %>
+        </div>
+      </div>
     </div>
   </div>
   <%_ } -%>

package/views/ui/ticker.ejs

@@ -35,11 +35,11 @@ $.ticker = {
             'restart-timer-dlg',
             '${_('Please Wait')}',
             \`<div class="ui grid container">
-            <div class="row">
+              <div class="row">
                 <span class="ui large red text"><i class="clock outline icon"></i><span class="elapsed">00:00:00</span></span>
                 <span>&nbsp;&nbsp;&nbsp;</span>
                 <span class="ui large text">\${message}</span>
-            </div>
+              </div>
             </div>\`,
             {
                 size: 'small',

package/views/ui/util.ejs

@@ -38,6 +38,30 @@ $.addLog = function(el, message) {
     }
     return false;
 }
+$.viewLog = function(title, log, seq) {
+    $.post('${route('Ui', {name: 'task', op: 'log'})}', {log, seq})
+        .done(function(json) {
+            if (json.success) {
+                const logs = document.createTextNode(json.logs);
+                const content = \`<div class="ui fluid scrolling container v-min v-max"><pre></pre></div>\`;
+                const dlg = $.ntdlg.create('log-view-dlg', title, content, {
+                    size: 'fullscreen',
+                    show() {
+                        dlg.find('pre').append(logs);
+                    },
+                    buttons: {
+                        okay: {
+                            type: 'green approve',
+                            caption: '<i class="check icon"></i>${_('Ok')}',
+                        }
+                    }
+                });
+                $.ntdlg.show(dlg);
+            } else {
+                $.tasks.notify(json);
+            }
+        });
+}
 $.hidePayload = function(message) {
     if (message) {
         message = message.replace(