searchable and sortable event table

Author: hobbyquaker

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "homematic-manager",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "private": true,
   "dependencies": {
     "async": "2.6.2",

package.json

@@ -64,6 +64,9 @@ <h3 id="console-rpc-method-heading"></h3>
             <div id="pager-messages"></div>
         </div>
         <div id="events">
+            <table id="grid-events"></table>
+            <div id="pager-events"></div>
+            <!--
            <div id="grid-events" class="ui-jqgrid" style="display: block;">
                <div class="ui-jqgrid-titlebar ui-jqgrid-caption ui-widget-header ui-corner-top ui-helper-clearfix">
                    <div class="">
@@ -90,7 +93,7 @@ <h3 id="console-rpc-method-heading"></h3>
                    </table>
                </div>
            </div>
-
+            -->
         </div>
     </div>
     <div id="dialog-paramset">

www/index.html

@@ -1,5 +1,5 @@
-/* global $, window, document, alert */
 /* eslint-disable import/no-unassigned-import */
+/* global $, window, document, alert */
 
 const ipc = require('electron').ipcRenderer;
 const {shell} = require('electron');
@@ -85,6 +85,7 @@ const $gridDevices = $('#grid-devices');
 const $gridLinks = $('#grid-links');
 const $gridRssi = $('#grid-rssi');
 const $gridMessages = $('#grid-messages');
+const $gridEvents = $('#grid-events');
 const $gridInterfaces = $('#grid-interfaces');
 
 const $tableEasymode = $('#table-easymode');
@@ -189,6 +190,17 @@ ipcRpc.on('connection', connected => {
     $('#connection-indicator').html(`${config.ccuAddress}<br><span style="font-size: 8px; font-weight: normal;">${connections}</span>`);
 });
 
+let eventRow = 0;
+let newEvent = false;
+
+function pushEvent(data) {
+    newEvent = true;
+    eventsData.push(data);
+    if (eventsData.length > 8192) {
+        eventsData.splice(0, 1);
+    }
+}
+
 // Incoming Events
 ipcRpc.on('rpc', data => {
     const [method, params] = data;
@@ -201,6 +213,8 @@ ipcRpc.on('rpc', data => {
     }
     switch (method) {
         case 'newDevices': {
+            pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});
+
             const devArr = params[1];
             $('div.ui-dialog[aria-describedby="dialog-alert"] .ui-dialog-title').html(_('New devices'));
             let count = 0;
@@ -224,6 +238,8 @@ ipcRpc.on('rpc', data => {
             break;
         }
         case 'deleteDevices': {
+            pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});
+
             const devArr = params[1];
             $('div.ui-dialog[aria-describedby="dialog-alert"] .ui-dialog-title').html(_('Devices deleted'));
             let count = 0;
@@ -249,6 +265,7 @@ ipcRpc.on('rpc', data => {
             break;
         }
         case 'replaceDevice': {
+            pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});
             getNames(() => {
                 getDevices(() => {
                     getLinks(() => {
@@ -260,18 +277,14 @@ ipcRpc.on('rpc', data => {
         }
         case 'event': {
             const [, address, param, value] = params;
-
-            const timestamp = new Date();
-            const ts = timestamp.getFullYear() + '-' +
-                ('0' + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' +
-                ('0' + (timestamp.getDate()).toString(10)).slice(-2) + ' ' +
-                ('0' + (timestamp.getHours()).toString(10)).slice(-2) + ':' +
-                ('0' + (timestamp.getMinutes()).toString(10)).slice(-2) + ':' +
-                ('0' + (timestamp.getSeconds()).toString(10)).slice(-2);
+            const [device, channel] = address.split(':');
 
             const name = names && names[address] ? names[address] : '';
 
-            $('#event-table').prepend('<tr class="ui-widget-content jqgrow ui-row-ltr "><td class="event-column-1 monospace">' + ts + '</td><td class="event-column-2">' + name + '</td><td class="event-column-3 monospace">' + address + '</td><td class="event-column-4 monospace">' + param + '</td><td class="event-column-5 monospace">' + value + '</td></tr>');
+            //$('#event-table').prepend('<tr class="ui-widget-content jqgrow ui-row-ltr "><td class="event-column-1 monospace">' + ts + '</td><td class="event-column-2">' + name + '</td><td class="event-column-3 monospace">' + address + '</td><td class="event-column-4 monospace">' + param + '</td><td class="event-column-5 monospace">' + value + '</td></tr>');
+
+            pushEvent({timestamp: ts(), method: 'event', channel, device, name, param, value});
+
 
             // Service-Meldung?
             if (!listMessages) {
@@ -358,6 +371,8 @@ ipcRpc.on('rpc', data => {
             break;
         }
         default:
+            pushEvent({timestamp: ts(), method, value: JSON.stringify(params[1])});
+
     }
 });
 
@@ -411,15 +426,17 @@ function getConfig() {
         translate();
 
         initTabs();
-        initDialogsMisc();
-        initDialogParamset();
-        initDialogLinkParamset();
+        initGridEvents();
 
         initGridDevices();
         initGridMessages();
         initGridLinks();
         initConsole();
 
+        initDialogsMisc();
+        initDialogParamset();
+        initDialogLinkParamset();
+
         $('#loader').hide();
 
         if (!config.ccuAddress) {
@@ -472,12 +489,30 @@ function getNames(callback) {
         }
     });
 }
+
+let refreshEvents = false;
+
+setInterval(() => {
+     if (refreshEvents) {
+        if (newEvent) {
+            newEvent = false;
+            $gridEvents.trigger('reloadGrid');
+        }
+     }
+}, 1000);
+
 function initTabs() {
     $tabsMain.tabs({
 
         activate(event, ui) {
             resizeGrids();
+
             const tab = ui.newTab[0].children[0].hash.slice(1);
+
+            refreshEvents = tab === 'events';
+            console.log('refreshEvents', refreshEvents);
+
+
             if (hash) {
                 window.location.hash = '/' + hash + '/' + tab;
             }
@@ -606,6 +641,7 @@ function initDialogsMisc() {
     });
 }
 function initDaemon() {
+    eventsData.length = 0;
     indexSourceRoles = {};
     indexTargetRoles = {};
     daemon = $('#select-bidcos-daemon option:selected').val();
@@ -643,6 +679,7 @@ function initDaemon() {
     firstLoad = false;
 
     console.log('initDaemon', daemon);
+    $gridEvents.trigger('reloadGrid');
 
     if (daemon && config.daemons[daemon]) {
         const {type} = config.daemons[daemon];
@@ -3928,6 +3965,57 @@ function refreshGridInterfaces() {
     $gridInterfaces.trigger('reloadGrid');
 }
 
+const eventsData = [];
+
+function initGridEvents() {
+    $gridEvents.jqGrid({
+        colNames: ['Timestamp', 'Method', 'Name', 'Device', 'Channel', 'Param', 'Value'],
+        colModel: [
+            {name: 'timestamp', index: 'timestamp', width: 140, fixed: true, title: true, search: true},
+            {name: 'method', index: 'method', width: 80, fixed: true, title: true, align: 'center', search: true},
+            {name: 'name', index: 'name', width: 320, fixed: true, title: false, hidden: config.hideNameCols, search: true},
+            {name: 'device', index: 'device', width: 110, fixed: true, title: true, search: true},
+            {name: 'channel', index: 'channel', width: 60, fixed: true, title: false, align: 'right', search: true},
+            {name: 'param', index: 'param', width: 200, fixed: true, title: false, search: true},
+            {name: 'value', index: 'value', width: 80, fixed: false, title: false, align: 'right', search: true}
+        ],
+        data: eventsData,
+        datatype: 'local',
+        rowNum: 100,
+        autowidth: true,
+        width: '1000',
+        height: 'auto',
+        rowList: [25, 50, 100, 500],
+        pager: $('#pager-events'),
+        sortname: 'timestamp',
+        viewrecords: true,
+        sortorder: 'desc',
+        caption: _('Events'),
+
+    }).navGrid('#pager-events', {
+        search: false,
+        edit: false,
+        add: false,
+        del: false,
+        refresh: false
+    })/*.jqGrid('navButtonAdd', '#pager-events', {
+        caption: '',
+        buttonicon: 'ui-icon-refresh',
+        onClickButton: () => {
+            $gridEvents.trigger('reloadGrid');
+        },
+        position: 'first',
+        id: 'refresh-events',
+        title: _('Refresh'),
+        cursor: 'pointer'
+    })*/.jqGrid('filterToolbar', {
+        defaultSearch: 'cn',
+        autosearch: true,
+        searchOnEnter: false,
+        enableClear: true
+    })
+}
+
 // Service Messages
 function initGridMessages() {
     $gridMessages.jqGrid({
@@ -4604,10 +4692,10 @@ function resizeGrids() {
         y = 600;
     }
 
-    $('#grid-devices, #grid-links, #grid-messages').setGridHeight(y - 144).setGridWidth(x - 18);
+    $('#grid-devices, #grid-links, #grid-messages, #grid-events').setGridHeight(y - 144).setGridWidth(x - 18);
 
-    $('#grid-events').css('height', (y - 80) + 'px').css('width', (x - 18) + 'px');
-    $('#grid-events-inner').css('height', (y - 100) + 'px');
+   // $('#grid-events').css('height', (y - 80) + 'px').css('width', (x - 18) + 'px');
+   // $('#grid-events-inner').css('height', (y - 100) + 'px');
     $('#grid-interfaces')/* .setGridHeight(y - 99) */.setGridWidth(x - 18);
     $('#grid-rssi').setGridHeight(y - (173 + $('#gbox_grid-interfaces').height())).setGridWidth(x - 18);
 
@@ -4784,3 +4872,14 @@ function convertHmIPKeyBase32ToBase16(valueString) {
 
     return keyString.toUpperCase();
 }
+
+
+function ts() {
+    const timestamp = new Date();
+    return timestamp.getFullYear() + '-' +
+        ('0' + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' +
+        ('0' + (timestamp.getDate()).toString(10)).slice(-2) + ' ' +
+        ('0' + (timestamp.getHours()).toString(10)).slice(-2) + ':' +
+        ('0' + (timestamp.getMinutes()).toString(10)).slice(-2) + ':' +
+        ('0' + (timestamp.getSeconds()).toString(10)).slice(-2);
+}