@ntlab/sipd-tu-bridge-ui 1.2.0 → 1.4.0

package/controller/ui.js

@@ -132,6 +132,11 @@ class UiController extends Controller {
             /** @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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntlab/sipd-tu-bridge-ui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "SIPD Penatausahaan Bridge Web Interface",
   "main": "index.js",
   "scripts": {

package/public/css/app.css

@@ -22,8 +22,11 @@ img.logo {
   .ui.container.queue-result {
     max-width: 22.5em;
   }
+  .ui.container.err-message {
+    max-width: 20em;
+  }
   .ui.container.err-data {
-    max-width: 40em;
+    max-width: 25em;
   }
 }
 
@@ -34,8 +37,11 @@ img.logo {
   .ui.container.queue-result {
     max-width: 17.5em;
   }
+  .ui.container.err-message {
+    max-width: 15em;
+  }
   .ui.container.err-data {
-    max-width: 30em;
+    max-width: 20em;
   }
 }
 
@@ -46,14 +52,18 @@ img.logo {
   .ui.container.queue-result {
     max-width: 12.5em;
   }
+  .ui.container.err-message {
+    max-width: 12.5em;
+  }
   .ui.container.err-data {
-    max-width: 20em;
+    max-width: 15em;
   }
 }
 
 @media only screen and (max-width: 767.98px) {
   .ui.container.queue-name,
   .ui.container.queue-result,
+  .ui.container.err-message,
   .ui.container.err-data {
     max-width: 75vw;
     margin-left: 0 !important;

package/views/ui/error.ejs

@@ -6,11 +6,12 @@
       <th><%= _('Screen') %></th>
       <th><%= _('Error') %></th>
       <th><%= _('Data') %></th>
+      <th><%= _('Action') %></th>
     </tr>
   </thead>
 </table>
 <%_ script.create('JQuery')
-  .useDependencies(['SemanticUI/Loader', 'SemanticUI/Dialog'])
+  .useDependencies(['SemanticUI/Loader', 'SemanticUI/Dialog/Confirm'])
   .add(`
 $.error = $.loader($('div[data-tab="error"] table'), {
     url: '${route('Ui', {name: 'error', page: 'PAGE'})}',
@@ -27,23 +28,9 @@ $.error = $.loader($('div[data-tab="error"] table'), {
                 counter.addClass('hidden');
             }
         }
-        $('a.err-img-view').on('click', function(e) {
+        $('a.err-clicker').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);
+            self.handle($(this));
         });
         if (self.loading) {
             self.loading = false;
@@ -51,20 +38,95 @@ $.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>\${$.toStr(data.error)}</td>
-    <td><div class="ui scrolling container err-data">\${$.hidePayload($.toStr(data.data))}</div></td>
+    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>\`);
 }
 $.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}">
+        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>\`;
+    }
+}
+$.error.toPayload = function(data, title) {
+    if (data) {
+        if (typeof data === 'string' && data.startsWith('{')) {
+            try {
+                data = JSON.parse(data);
+            }
+            catch (err) {
+            }
+        }
+        const payload = $.toStr(data);
+        let excerpt = payload;
+        if (excerpt.length > 100) {
+            excerpt = excerpt.substr(0, 100);
+            if (excerpt.includes('\\n')) {
+                excerpt = excerpt.substr(0, excerpt.lastIndexOf('\\n'));
+            } else if (excerpt.includes(' ')) {
+                excerpt = excerpt.substr(0, excerpt.lastIndexOf(' '));
+            } else if (excerpt.includes('-')) {
+                excerpt = excerpt.substr(0, excerpt.lastIndexOf('-'));
+            }
+            excerpt += '&hellip;';
+        }
+        return \`
+<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) {
+    switch (el.data('op')) {
+        case 'view':
+            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;">\`;
+                size = 'fullscreen';
+            }
+            if (pre.length) {
+                content = \`<div class="ui fluid scrolling container"><pre>\${pre.text()}</pre></div>\`;
+            }
+            const dlg = $.ntdlg.create('err-view-dlg', el.data('title'), content, {
+                size,
+                buttons: {
+                    okay: {
+                        type: 'green approve',
+                        caption: '<i class="check icon"></i>${_('Ok')}',
+                    }
+                }
+            });
+            $.ntdlg.show(dlg);
+            break;
+        case 'delete':
+            $.ntdlg.confirm(
+                'err-delete-confirm-dlg',
+                '${_('Confirm')}',
+                '${_('Are you sure want to remove error <code>%ERR%</code>?')}'.replace(/%ERR%/g, el.data('filename')),
+                $.ntdlg.ICON_QUESTION,
+                function() {
+                    $.post('${route('Ui', {name: 'task', op: 'remove'})}', {error: el.data('filename')})
+                        .done(function(json) {
+                            $.tasks.notify(json);
+                            if (json.success) {
+                                self.reload();
+                            }
+                        });
+                }
+            );
+            break;
+    }
+}
 $.error.reload = function() {
     const self = this;
     if (!self.loading) {

package/views/ui/queue.ejs

@@ -36,20 +36,20 @@ $.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>
+    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>\`);
 }
 $.queue.toStatus = function(data) {
     const icon = {
         new: 'pause circle outline',
-        processing: 'spinner',
+        processing: 'loading spinner',
         done: 'green check',
         error: 'red times',
         timeout: 'clock outline',

package/views/ui/util.ejs

@@ -47,12 +47,12 @@ $.hidePayload = function(message) {
     }
     return message;
 }
+$.isPayload = function(data) {
+    return Array.isArray(data) || typeof data === 'object' && data.constructor.name === 'Object';
+}
 $.toStr = function(o) {
-    if (
-        Array.isArray(o) ||
-        typeof o === 'object' && o.constructor.name === 'Object'
-    ) {
-        return JSON.stringify(o);
+    if ($.isPayload(o)) {
+        return JSON.stringify(o, null, '  ');
     } else if (o !== undefined && o !== null) {
         return o.toString();
     }