@ntlab/sipd-tu-bridge-ui 1.5.0 → 1.6.1

package/controller/ui.js

@@ -43,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') !== '/') {
@@ -114,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) {
@@ -130,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/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.5.0",
+  "version": "1.6.1",
   "description": "SIPD Penatausahaan Bridge Web Interface",
   "main": "index.js",
   "scripts": {
@@ -34,7 +34,7 @@
     "@ntlab/express-controller": "^1.3.0",
     "@ntlab/express-middleware": "^2.6.0",
     "@ntlab/ntjs": "^3.1.0",
-    "@ntlab/ntjs-assets": "^2.141.0",
+    "@ntlab/ntjs-assets": "^2.144.0",
     "@ntlab/ntjs-repo": "^3.1.0",
     "@ntlab/ntlib": "^2.9.1",
     "ejs": "^3.1.10",

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/ui/bridge.ejs

@@ -12,12 +12,29 @@
     <div class="twelve wide column">
       <%_ bridges.forEach(bridge => { -%>
       <div class="ui form bridge <%= bridge.name %>" data-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 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

@@ -92,11 +92,11 @@ $.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) {
-                content = \`<div class="ui fluid scrolling container"><pre>\${pre.text()}</pre></div>\`;
+                content = \`<div class="ui fluid scrolling container"><pre>\${$.safeStr(pre.text())}</pre></div>\`;
             }
             const dlg = $.ntdlg.create('err-view-dlg', el.data('title'), content, {
                 size,
@@ -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,11 +1,11 @@
 <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">
   <%- indent(include('status'), 2) -%>
@@ -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/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,13 +43,16 @@ $.queue = $.loader($('div[data-tab="queue"] table'), {
 });
 $.queue.toRow = function(data) {
     return $(\`
-      <tr><td>\${data.nr}</td>
+      <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) {
@@ -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

@@ -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/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(
@@ -50,11 +74,20 @@ $.hidePayload = function(message) {
 $.isPayload = function(data) {
     return Array.isArray(data) || typeof data === 'object' && data.constructor.name === 'Object';
 }
+$.safeStr = function(s) {
+    if (s !== '') {
+        const tn = document.createTextNode(s);
+        const pn = document.createElement('p');
+        pn.appendChild(tn);
+        s = pn.innerHTML;
+    }
+    return s;
+}
 $.toStr = function(o) {
     if ($.isPayload(o)) {
         return JSON.stringify(o, null, '  ');
     } else if (o !== undefined && o !== null) {
-        return o.toString();
+        return $.safeStr(o.toString());
     }
     return '';
 }