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

package/controller/ui.js

@@ -115,6 +115,23 @@ class UiController extends Controller {
             result.pages = req.app.locals.pager(result.count, result.size, result.page);
             res.json(result);
         });
+        this.addRoute('capture', 'get', '/capture/:filename', async (req, res, next) => {
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            const result = await api.getCapture(req.params.filename);
+            if (result.data) {
+                const ext = req.params.filename.substr(req.params.filename.lastIndexOf('.') + 1).toLowerCase();
+                switch (ext) {
+                    case 'png':
+                    case 'json':
+                        res.type(ext);
+                        break;
+                }
+                res.send(result.data);
+            } else {
+                res.sendStatus(404);
+            }
+        });
         this.addRoute('task', 'post', '/task/:op', async (req, res, next) => {
             const result = {
                 success: false

package/index.js

@@ -35,7 +35,10 @@ const { Assets, CDN } = require('@ntlab/ntjs-assets');
 // register script repository
 require('@ntlab/ntjs-repo')();
 
-/* --- BEGIN API V1 --- */
+/* --- BEGIN API V2 --- */
+
+/* V1: 2026-03-05 */
+/* V2: 2026-06-23 */
 
 /**
  * SIPD Penatausahaan Bridge main application.
@@ -52,6 +55,7 @@ require('@ntlab/ntjs-repo')();
  * @property {ActivityFunction} getActivity Get activity logs
  * @property {ObjectFunction} getCount Get activity count
  * @property {PagedObjectsFunction} getErrors Get captured errors
+ * @property {CaptureFileFunction} getCapture Get captured error file
  * @property {QueryFunction} query Perform API query
  */
 
@@ -127,6 +131,14 @@ require('@ntlab/ntjs-repo')();
  * @returns {Promise<[{name: string, seq: string, time: number}]>}
  */
 
+/**
+ * Get captured error file.
+ *
+ * @callback CaptureFileFunction
+ * @param {string} filename Filename
+ * @returns {Promise<{data: Buffer}>}
+ */
+
 /* --- END API --- */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntlab/sipd-tu-bridge-ui",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "description": "SIPD Penatausahaan Bridge Web Interface",
   "main": "index.js",
   "scripts": {
@@ -34,15 +34,15 @@
     "@ntlab/express-controller": "^1.3.0",
     "@ntlab/express-middleware": "^2.6.0",
     "@ntlab/ntjs": "^3.1.0",
-    "@ntlab/ntjs-assets": "^2.144.0",
+    "@ntlab/ntjs-assets": "^3.28.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",
-    "morgan": "^1.10.1",
+    "morgan": "^1.11.0",
     "session-file-store": "^1.5.0",
-    "terser": "^5.46.0"
+    "terser": "^5.48.0"
   }
 }

package/views/ui/error.ejs

@@ -40,9 +40,9 @@ $.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.toImg($.toStr(data.filename), data.filename)}</td>
         <td>\${this.toPayload(data.error, '${_('Error Message')}')}</td>
-        <td>\${this.toPayload(data.data, '${_('Error Data')}')}</td>
+        <td>\${this.toPayload(null, '${_('Error Data')}', data.datafilename)}</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>
@@ -52,21 +52,22 @@ $.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}">
+            <img class="ui medium rounded bordered image" src="\${'${route('Ui', {name: 'capture', filename: 'FILENAME'})}'.replace(/FILENAME/, data)}" alt="\${alt}">
           </a>\`;
     }
 }
-$.error.toPayload = function(data, title) {
-    if (data) {
-        if (typeof data === 'string' && data.startsWith('{')) {
-            try {
-                data = JSON.parse(data);
-            }
-            catch (err) {
-            }
+$.error.toPayload = function(data, title, filename) {
+    if (typeof data === 'string' && data.startsWith('{')) {
+        try {
+            data = JSON.parse(data);
         }
-        const payload = $.toStr(data);
-        let excerpt = payload;
+        catch (err) {
+        }
+    }
+    let excerpt, payload;
+    if (data) {
+        payload = $.toStr(data);
+        excerpt = payload;
         if (excerpt.length > 100) {
             excerpt = excerpt.substr(0, 100);
             if (excerpt.includes('\\n')) {
@@ -78,12 +79,16 @@ $.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>\`;
+    } else {
+        excerpt = '&hellip;';
+        payload = '';
     }
+    const url = filename ? '${route('Ui', {name: 'capture', filename: 'FILENAME'})}'.replace(/FILENAME/, filename) : '#';
+    return \`
+        <a href="\${url}" class="err-clicker" data-op="view" data-title="\${title}">
+        <span>\${excerpt}</span>
+        <pre style="display: none;">\${payload}</pre>
+        </a>\`;
 }
 $.error.handle = function(el) {
     const self = this;
@@ -96,7 +101,19 @@ $.error.handle = function(el) {
                 size = 'fullscreen';
             }
             if (pre.length) {
-                content = \`<div class="ui fluid scrolling container"><pre>\${$.safeStr(pre.text())}</pre></div>\`;
+                if (el.attr('href') !== '#') {
+                    content = \`
+                        <div class="ui placeholder">
+                          <div class="line"></div>
+                          <div class="line"></div>
+                          <div class="line"></div>
+                          <div class="line"></div>
+                          <div class="line"></div>
+                        </div>\`;
+                } else {
+                    content = \`<pre>\${$.safeStr(pre.text())}</pre>\`;
+                }
+                content = \`<div class="ui fluid scrolling container">\${content}</div>\`;
             }
             const dlg = $.ntdlg.create('err-view-dlg', el.data('title'), content, {
                 size,
@@ -105,6 +122,14 @@ $.error.handle = function(el) {
                         type: 'green approve',
                         caption: '<i class="check icon"></i>${_('Ok')}',
                     }
+                },
+                show() {
+                    if (el.attr('href') !== '#') {
+                        $.get(el.attr('href'))
+                            .done(function(data) {
+                                $('#err-view-dlg .container').html(typeof data === 'object' ? JSON.stringify(data, null, 2) : $.safeStr(data));
+                            });
+                    }
                 }
             });
             $.ntdlg.show(dlg);