@ntlab/sipd-tu-bridge-ui 1.1.5 → 1.3.0

package/controller/ui.js

@@ -125,10 +125,22 @@ class UiController extends Controller {
             }
             res.json(about);
         });
-        this.addRoute('task', 'post', '/task/:op', (req, res, next) => {
+        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

@@ -39,6 +39,7 @@
  * @property {StringPromiseFunction} getActivity Get activity logs
  * @property {ObjectPromiseFunction} getCount Get activity count
  * @property {PagedObjectsPromiseFunction} getErrors Get captured errors
+ * @property {QueryFunction} query Perform API query
  */
 
 /**
@@ -95,6 +96,14 @@
  * @returns {Promise<string>}
  */
 
+/**
+ * A function which returns object Promise.
+ *
+ * @callback QueryFunction
+ * @param {object} data Query data
+ * @returns {Promise<object>}
+ */
+
 /* --- END API --- */
 
 const createError = require('http-errors');

package/package.json

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

package/public/css/app.css

@@ -16,8 +16,11 @@ img.logo {
 }
 
 @media only screen and (min-width: 1200px) {
+  .ui.container.queue-name {
+    max-width: 20em;
+  }
   .ui.container.queue-result {
-    max-width: 30em;
+    max-width: 22.5em;
   }
   .ui.container.err-data {
     max-width: 40em;
@@ -25,8 +28,11 @@ img.logo {
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+  .ui.container.queue-name {
+    max-width: 15em;
+  }
   .ui.container.queue-result {
-    max-width: 25em;
+    max-width: 17.5em;
   }
   .ui.container.err-data {
     max-width: 30em;
@@ -34,8 +40,11 @@ img.logo {
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991.98px) {
+  .ui.container.queue-name {
+    max-width: 10em;
+  }
   .ui.container.queue-result {
-    max-width: 20em;
+    max-width: 12.5em;
   }
   .ui.container.err-data {
     max-width: 20em;
@@ -43,11 +52,8 @@ img.logo {
 }
 
 @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.queue-name,
+  .ui.container.queue-result,
   .ui.container.err-data {
     max-width: 75vw;
     margin-left: 0 !important;

package/views/slot/mainmenu.ejs

@@ -20,6 +20,12 @@
         divider1: {
             type: 'divider'
         },
+        restart: {
+            title: _('Restart Server'),
+        },
+        divider2: {
+            type: 'divider'
+        },
         logout: {
             title: _('Logout'),
             url: route('Security', {name: 'logout'})
@@ -28,7 +34,7 @@
 } -%>
 <%- menu(menus, {mainmenu: true, indentation: 2}) %>
 <%_ script.create('JQuery')
-  .useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message'])
+  .useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message', 'SemanticUI/Dialog/Confirm'])
   .add(`
 $.tasks = {
     about() {
@@ -57,11 +63,45 @@ $.tasks = {
             f();
         }
     },
+    restart() {
+        const self = this;
+        if (self._restart === undefined) {
+            self._restart = true;
+            $.ntdlg.confirm(
+                'restart-confirm-dlg',
+                '${_('Confirm')}',
+                '${_('Are you sure want to restart the server?')}',
+                $.ntdlg.ICON_QUESTION,
+                function() {
+                    $.post('${route('Ui', {name: 'task', op: 'restart'})}')
+                        .done(function(json) {
+                            self.notify(json);
+                        })
+                        .always(function() {
+                            delete self._restart;
+                        });
+                },
+                function() {
+                    delete self._restart;
+                }
+            );
+        }
+    },
+    notify(result) {
+        if (result.success) {
+            $.notify('${_('Operation successfully submitted!')}', 'success');
+        } else {
+            $.notify('${_('Operation failed!')}', 'error');
+        }
+    },
     init() {
         const self = this;
-        $('.menu-about').on('click', function(e) {
+        $('.menu div.item').on('click', function(e) {
             e.preventDefault();
-            self.about();
+            const menu = $(this).attr('class').split(' ')[0].split('-')[1];
+            if (typeof self[menu] === 'function') {
+                self[menu]();
+            }
         });
     }
 }

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,44 @@ $.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')}',
+            switch (a.data('op')) {
+                case 'view':
+                    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);
+                    );
+                    $.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, a.data('filename')),
+                        $.ntdlg.ICON_QUESTION,
+                        function() {
+                            $.post('${route('Ui', {name: 'task', op: 'remove'})}', {error: a.data('filename')})
+                                .done(function(json) {
+                                    $.tasks.notify(json);
+                                    if (json.success) {
+                                        self.reload();
+                                    }
+                                });
+                        }
+                    );
+                    break;
+            }
         });
         if (self.loading) {
             self.loading = false;
@@ -53,14 +75,17 @@ $.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>
+  <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>
+  <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">
+        return \`<a href="#" class="err-clicker" data-op="view" data-tooltip="\${alt}" data-position="right center">
 <img class="ui medium rounded bordered image" src="\${data}" alt="\${alt}">
 </a>\`;
     }

package/views/ui/index.ejs

@@ -25,6 +25,7 @@
 <div class="ui bottom attached tab segment" data-tab="error">
 <%- include('error') -%>
 </div>
+<%- include('ticker') -%>
 <%- include('util') -%>
 <%_ script.create('JQuery')
   .useDependencies(['SocketIO'])
@@ -39,6 +40,9 @@ $.uiCon = {
             .on('connect', function() {
                 self.connected = true;
                 console.log('Socket connected');
+                if (self.restarted) {
+                    window.location.reload();
+                }
             })
             .on('disconnect', function() {
                 self.connected = false;
@@ -64,12 +68,17 @@ $.uiCon = {
             })
             .on('error', function() {
                 $.error.reload();
+            })
+            .on('restart', function() {
+                console.log('Server restarted');
+                self.restarted = true;
+                $.ticker.start('${_('A server restart is undergo&hellip;')}');
             });
     }
 }
 `)
   .addInitializer(`
-$('.menu .item').tab({
+$('.menu [data-tab]').tab({
     autoTabActivation: window.location.hash ? window.location.hash.substr(1) : true,
     onLoad(path, params, history) {
         window.location.hash = path;

package/views/ui/queue.ejs

@@ -38,18 +38,18 @@ $.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>\${$.toStr(data.name)}</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>\${$.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/ticker.ejs

@@ -0,0 +1,67 @@
+<%_ script.create('JQuery')
+  .useDependencies(['SemanticUI/Dialog'])
+  .add(`
+$.ticker = {
+    formatTick(value) {
+        return value.toString().padStart(2, '0');
+    },
+    formatTime(seconds) {
+        const self = this;
+        if (!self.seconds_in_hour) {
+            self.seconds_in_hour = 60 * 60;
+        }
+        if (!self.seconds_in_minute) {
+            self.seconds_in_minute = 60;
+        }
+        const hour = Math.floor(seconds / self.seconds_in_hour);
+        seconds -= hour * self.seconds_in_hour;
+        const minute = Math.floor(seconds / self.seconds_in_minute);
+        seconds -= minute * self.seconds_in_minute;
+        return \`\${self.formatTick(hour)}:\${self.formatTick(minute)}:\${self.formatTick(seconds)}\`;
+    },
+    build() {
+        const self = this;
+        self.start = new Date().getTime();
+        const f = function() {
+            const elapsed = Math.round((new Date().getTime() - self.start) / 1000);
+            $('.elapsed').text(self.formatTime(elapsed));
+        }
+        self.tick = setInterval(f, 1000);
+        f();
+    },
+    start(message) {
+        const self = this;
+        self.dlg = $.ntdlg.create(
+            'restart-timer-dlg',
+            '${_('Please Wait')}',
+            \`<div class="ui grid container">
+            <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>\`,
+            {
+                size: 'small',
+                closable: false,
+                show() {
+                    self.build();
+                },
+                hide() {
+                    if (self.tick) {
+                        clearInterval(self.tick);
+                        delete self.tick;
+                    }
+                }
+            }
+        );
+        $.ntdlg.show(self.dlg);
+    },
+    stop() {
+        const self = this;
+        if (self.dlg) {
+            $.ntdlg.close(self.dlg);
+        }
+    }
+}
+`) -%>