@ntlab/sipd-tu-bridge-ui 1.0.3 → 1.1.0

package/controller/ui.js

@@ -33,15 +33,17 @@ class UiController extends Controller {
         this.addRoute('index', 'get', '/', async (req, res, next) => {
             /** @type {import('..').SipdApi} */
             const api = req.app.api;
+            api.counter = await api.getCount();
             for (const bridge of api.bridges) {
                 bridge.stat = await bridge.getStats();
                 bridge.last = await bridge.getLast();
                 bridge.current = await bridge.getCurrent();
             }
-            const socketOptions = {reconnection: true};
+            const socketOptions = {};
             if (req.app.get('root') !== '/') {
                 socketOptions.path = req.getPath('/socket.io/');
             }
+            socketOptions.reconnection = true;
             res.render('ui/index', {
                 socket: {
                     url: `${req.getUri({noproto: true})}/ui`,
@@ -53,6 +55,7 @@ class UiController extends Controller {
             const result = {updates: {}};
             /** @type {import('..').SipdApi} */
             const api = req.app.api;
+            result.counter = await api.getCount();
             for (const bridge of api.bridges) {
                 bridge.stat = await bridge.getStats();
                 bridge.last = await bridge.getLast();
@@ -99,6 +102,13 @@ class UiController extends Controller {
             }
             res.json(result);
         });
+        this.addRoute('error', 'get', '/error', async (req, res, next) => {
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            const result = await api.getErrors(req.params.page || req.query.page, req.params.size || req.query.size);
+            result.pages = req.app.locals.pager(result.count, result.size, result.page);
+            res.json(result);
+        });
         this.addRoute('about', 'get', '/about', (req, res, next) => {
             let about;
             if (req.app.about) {

package/index.js

@@ -35,8 +35,10 @@
  * @property {object} config Configuration
  * @property {SipdBridge[]} bridges Bridges
  * @property {AuthenticateFunction} authenticate Perform usename and password authentication
- * @property {GetQueuesFunction} getQueues Get queues
+ * @property {PagedObjectsPromiseFunction} getQueues Get queues
  * @property {StringPromiseFunction} getActivity Get activity logs
+ * @property {ObjectPromiseFunction} getCount Get activity count
+ * @property {PagedObjectsPromiseFunction} getErrors Get captured errors
  */
 
 /**
@@ -71,9 +73,9 @@
  */
 
 /**
- * Get queues.
+ * A function which returns paged objects Promise.
  *
- * @callback GetQueuesFunction
+ * @callback PagedObjectsPromiseFunction
  * @param {number} page Page number
  * @param {number} size Page size
  * @returns {Promise<object[]>}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntlab/sipd-tu-bridge-ui",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "SIPD Penatausahaan Bridge Web Interface",
   "main": "index.js",
   "scripts": {
@@ -33,10 +33,10 @@
   "dependencies": {
     "@ntlab/express-controller": "^1.2.0",
     "@ntlab/express-middleware": "^2.4.0",
-    "@ntlab/ntjs": "^3.0.0",
+    "@ntlab/ntjs": "^3.1.0",
     "@ntlab/ntjs-assets": "^2.139.0",
-    "@ntlab/ntjs-repo": "^3.0.1",
-    "@ntlab/ntlib": "^2.9.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",

package/public/css/app.css

@@ -14,3 +14,43 @@ body:not([class]) main, #login-container {
 img.logo {
   margin-right: 1em !important;
 }
+
+@media only screen and (min-width: 1200px) {
+  .ui.container.queue-result {
+    max-width: 30em;
+  }
+  .ui.container.err-data {
+    max-width: 40em;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+  .ui.container.queue-result {
+    max-width: 25em;
+  }
+  .ui.container.err-data {
+    max-width: 30em;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
+  .ui.container.queue-result {
+    max-width: 20em;
+  }
+  .ui.container.err-data {
+    max-width: 20em;
+  }
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.container.queue-result {
+    max-width: 75vw;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .ui.container.err-data {
+    max-width: 75vw;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}

package/views/security/login.ejs

@@ -29,7 +29,7 @@
 </div>
 <%_ script.create('JQuery')
   .useDependencies(['JQuery/Util', 'JQuery/FormPost'])
-  .addMiddle(`
+  .add(`
 $.login = function(form) {
     const fp = $.formpost(form, {progress: false, xhr: true});
     const err = fp.errhelper;
@@ -57,6 +57,6 @@ $.login = function(form) {
     form.find('input[name=username]').focus();
 }
 `)
-  .addLast(`
+  .addInitializer(`
 $.login($('form.login'));
 `) -%>

package/views/slot/errhandler.ejs

@@ -1,6 +1,6 @@
 <%_ script.create('JQuery')
   .useDependencies(['JQuery/Util'])
-  .addMiddle(`
+  .add(`
 $.define('errhandler', {
     handlers: {},
     register(code, handler) {

package/views/slot/errhandler401.ejs

@@ -1,6 +1,6 @@
 <%_ script.create('JQuery')
   .useDependencies(['JQuery/Util', 'SemanticUI/Dialog'])
-  .addMiddle(`
+  .add(`
 $.errhandler.register(401, function() {
     const dlgId = 'err401';
     if ($.ntdlg.isVisible(dlgId)) {

package/views/slot/errhandler500.ejs

@@ -1,6 +1,6 @@
 <%_ script.create('JQuery')
   .useDependencies(['JQuery/Util', 'SemanticUI/Dialog/Message'])
-  .addMiddle(`
+  .add(`
 $.errhandler.register(500, function() {
     const dlgId = 'err500';
     if ($.ntdlg.isVisible(dlgId)) {

package/views/slot/mainmenu.ejs

@@ -29,7 +29,7 @@
 <%- menu(menus, {mainmenu: true, indentation: 2}) %>
 <%_ script.create('JQuery')
   .useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message'])
-  .addMiddle(`
+  .add(`
 $.tasks = {
     about() {
         const self = this;
@@ -65,6 +65,6 @@ $.tasks = {
         });
     }
 }
-`).addLast(`
+`).addInitializer(`
 $.tasks.init();
 `) -%>

package/views/ui/activity.ejs

@@ -2,7 +2,7 @@
   <textarea class="activity" rows="30" readonly></textarea>
 </div>
 <%_ script.create('JQuery')
-  .addMiddle(`
+  .add(`
 $.activity = {
     el: $('textarea.activity'),
     url: '${route('Ui', {name: 'activity'})}',
@@ -29,6 +29,6 @@ $.activity = {
     }
 }
 `)
-  .addLast(`
+  .addInitializer(`
 $.activity.load();
 `) -%>

package/views/ui/bridge.ejs

@@ -29,7 +29,7 @@
 </div>
 <%_ items = JSON.stringify(names, null, 4) -%>
 <%_ script.create('JQuery')
-  .add(`
+  .addInitializer(`
 $.bridge.init(${items});
 $('a[data-bridge]').on('click', function(e) {
     e.preventDefault();

package/views/ui/bridgehandler.ejs

@@ -1,5 +1,5 @@
 <%_ script.create('JQuery')
-  .addMiddle(`
+  .add(`
 $.bridge = {
     bridges: {},
     getLog(name) {
@@ -25,27 +25,6 @@ $.bridge = {
             }
         }
     },
-    update() {
-        const self = this;
-        $.get('${route('Ui', {name: 'updates'})}')
-            .done(function(json) {
-                if (json.updates) {
-                    for (const bridge of Object.keys(json.updates)) {
-                        for (const [k, v] of Object.entries(json.updates[bridge])) {
-                            $(\`[data-bridge="\${bridge}"] [data-key="\${k}"]\`).each(function() {
-                                const el = $(this);
-                                const value = v && v.value !== undefined ? v.value : v;
-                                if (el.is('input')) {
-                                    el.val(value);
-                                } else {
-                                    el.html(value ? value : '&ndash;');
-                                }
-                            });
-                        }
-                    }
-                }
-            });
-    },
     init(bridges) {
         const self = this;
         for (const bridge of bridges) {

package/views/ui/error.ejs

@@ -0,0 +1,78 @@
+<h3 class="ui header x-title"></h3>
+<table class="ui selectable celled table">
+  <thead>
+    <tr>
+      <th><%= _('#') %></th>
+      <th><%= _('Screen') %></th>
+      <th><%= _('Error') %></th>
+      <th><%= _('Data') %></th>
+    </tr>
+  </thead>
+</table>
+<%_ script.create('JQuery')
+  .useDependencies(['SemanticUI/Loader', 'SemanticUI/Dialog'])
+  .add(`
+$.error = $.loader($('div[data-tab="error"] table'), {
+    url: '${route('Ui', {name: 'error', page: 'PAGE'})}',
+    formatRow(item) {
+        return this.toRow(item);
+    },
+    loaded(json) {
+        const self = this;
+        if (json.count !== undefined) {
+            const counter = $('[data-tab="error"] .label');
+            if (json.count) {
+                counter.text(json.count).removeClass('hidden');
+            } else {
+                counter.addClass('hidden');
+            }
+        }
+        $('a.err-img-view').on('click', function(e) {
+            e.preventDefault();
+            const a = $(this);
+            const dlg = $.ntdlg.create(
+                'err-img-view-dlg',
+                a.data('tooltip'),
+                \`<img class="ui fluid image" src="\${a.find('img').attr('src')}" style="max-height: 70vh;">\`, {
+                    size: 'fullscreen',
+                    buttons: {
+                        okay: {
+                            type: 'green approve',
+                            caption: '<i class="check icon"></i>${_('Ok')}',
+                        }
+                    }
+                }
+            );
+            $.ntdlg.show(dlg);
+        });
+        if (self.loading) {
+            self.loading = false;
+        }
+    }
+});
+$.error.toRow = function(data) {
+    return $(
+\`<tr><td>\${data.nr}</td>
+    <td>\${this.toImg($.toStr(data.image), data.filename)}</td>
+    <td>\${$.toStr(data.error)}</td>
+    <td><div class="ui scrolling container err-data">\${$.hidePayload($.toStr(data.data))}</div></td>
+</tr>\`);
+}
+$.error.toImg = function(data, alt) {
+    if (data) {
+        return \`<a href="#" class="err-img-view" data-tooltip="\${alt}" data-position="right center">
+<img class="ui medium rounded bordered image" src="\${data}" alt="\${alt}">
+</a>\`;
+    }
+}
+$.error.reload = function() {
+    const self = this;
+    if (!self.loading) {
+        self.loading = true;
+        self.load();
+    }
+}
+`)
+  .addInitializer(`
+$.error.load();
+`) -%>

package/views/ui/index.ejs

@@ -1,10 +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') %></a>
+  <a class="item" data-tab="queue"><%= _('Queue') %> <span class="ui hidden 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="error"><%= _('Error') %> <span class="ui hidden tiny label"></span></a>
 </div>
 <div class="ui bottom attached tab segment" data-tab="status">
 <%- include('status') -%>
@@ -21,9 +22,13 @@
 <%- include('bridge') -%>
 </div>
 <%_ } -%>
+<div class="ui bottom attached tab segment" data-tab="error">
+<%- include('error') -%>
+</div>
+<%- include('util') -%>
 <%_ script.create('JQuery')
   .useDependencies(['SocketIO'])
-  .addMiddle(`
+  .add(`
 $.uiCon = {
     connected: false,
     data: ${s(socket, 1)},
@@ -55,12 +60,12 @@ $.uiCon = {
             })
             .on('queue', function() {
                 $.queue.reload();
-                $.bridge.update();
+                $.uiRefresh();
             });
     }
 }
 `)
-  .addLast(`
+  .addInitializer(`
 $('.menu .item').tab({
     autoTabActivation: window.location.hash ? window.location.hash.substr(1) : true,
     onLoad(path, params, history) {

package/views/ui/info.ejs

@@ -4,13 +4,25 @@
   </div>
   <div class="extra content">
       <div class="ui form">
-        <div class="fields">
-          <div class="six wide field"><%= _('Protocol:') %></div>
-          <div class="ten wide field"><%= api.proto %></div>
-        </div>
-        <div class="fields">
-          <div class="six wide field"><%= _('Mode:') %></div>
-          <div class="ten wide field"><%= api.mode %></div>
+        <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>
+          <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>

package/views/ui/queue.ejs

@@ -14,14 +14,22 @@
 </table>
 <%_ script.create('JQuery')
   .useDependencies('SemanticUI/Loader')
-  .addMiddle(`
+  .add(`
 $.queue = $.loader($('div[data-tab="queue"] table'), {
     url: '${route('Ui', {name: 'queue', page: 'PAGE'})}',
     formatRow(item) {
         return this.toRow(item);
     },
-    loaded() {
+    loaded(json) {
         const self = this;
+        if (json.count !== undefined) {
+            const counter = $('[data-tab="queue"] .label');
+            if (json.count) {
+                counter.text(json.count).removeClass('hidden');
+            } else {
+                counter.addClass('hidden');
+            }
+        }
         if (self.loading) {
             self.loading = false;
         }
@@ -30,25 +38,14 @@ $.queue = $.loader($('div[data-tab="queue"] table'), {
 $.queue.toRow = function(data) {
     return $(
 \`<tr><td>\${data.nr}</td>
-    <td>\${this.toStr(data.id)}</td>
-    <td>\${this.toStr(data.type)}</td>
-    <td>\${this.toStr(data.name)}</td>
+    <td>\${$.toStr(data.id)}</td>
+    <td>\${$.toStr(data.type)}</td>
+    <td>\${$.toStr(data.name)}</td>
     <td>\${this.toStatus(data.status)}</td>
-    <td>\${this.toStr(data.result)}</td>
-    <td>\${this.toStr(data.time)}</td>
+    <td><div class="ui scrolling container queue-result">\${$.hidePayload($.toStr(data.result))}</div></td>
+    <td>\${$.toStr(data.time)}</td>
 </tr>\`);
 }
-$.queue.toStr = function(o) {
-    if (
-        Array.isArray(o) ||
-        typeof o === 'object' && o.constructor.name === 'Object'
-    ) {
-        return JSON.stringify(o);
-    } else if (o !== undefined && o !== null) {
-        return o.toString();
-    }
-    return '';
-}
 $.queue.toStatus = function(data) {
     const icon = {
         new: 'pause circle outline',
@@ -59,7 +56,7 @@ $.queue.toStatus = function(data) {
         skipped: 'exclamation',
     }[data];
     return icon ? \`<div data-tooltip="\${data}" data-position="right center"><i class="\${icon} icon"></i></div>\` :
-        this.toStr(data);
+        $.toStr(data);
 }
 $.queue.reload = function() {
     const self = this;
@@ -69,6 +66,6 @@ $.queue.reload = function() {
     }
 }
 `)
-  .addLast(`
+  .addInitializer(`
 $.queue.load();
 `) -%>

package/views/ui/util.ejs

@@ -0,0 +1,52 @@
+<%_ script.create('JQuery')
+  .add(`
+$.uiRefresh = function() {
+    $.get('${route('Ui', {name: 'updates'})}')
+        .done(function(json) {
+            if (json.counter) {
+                for (const [k, v] of Object.entries(json.counter)) {
+                    $(\`[data-counter="\${k}"]\`).each(function() {
+                        const el = $(this);
+                        const value = v && v.value !== undefined ? v.value : v;
+                        el.html(value);
+                    });
+                }
+            }
+            if (json.updates) {
+                for (const bridge of Object.keys(json.updates)) {
+                    for (const [k, v] of Object.entries(json.updates[bridge])) {
+                        $(\`[data-bridge="\${bridge}"] [data-key="\${k}"]\`).each(function() {
+                            const el = $(this);
+                            const value = v && v.value !== undefined ? v.value : v;
+                            if (el.is('input')) {
+                                el.val(value);
+                            } else {
+                                el.html(value ? value : '&ndash;');
+                            }
+                        });
+                    }
+                }
+            }
+        });
+}
+$.hidePayload = function(message) {
+    if (message) {
+        message = message.replace(
+            /[A-Za-z0-9\\+\\/\\=\\@\\,]{40,}/g,
+            s => \`<i class="comment dots outline icon" data-tooltip="\${s}" data-position="right center"></i>\`
+        );
+    }
+    return message;
+}
+$.toStr = function(o) {
+    if (
+        Array.isArray(o) ||
+        typeof o === 'object' && o.constructor.name === 'Object'
+    ) {
+        return JSON.stringify(o);
+    } else if (o !== undefined && o !== null) {
+        return o.toString();
+    }
+    return '';
+}
+`) -%>