refactor log writer for ui

languages/en_CA.json

@@ -222,6 +222,7 @@
    "Full URL Path": "Full URL Path",
    "Streamed Logs": "Streamed Logs",
    "Saved Logs": "Saved Logs",
+   "User Logs": "User Logs",
    "Logs": "Logs",
    "Full Stream URL": "Full Stream URL",
    "Manual": "Manual",

web/assets/css/dashboard.css

@@ -214,6 +214,7 @@ body {
 }
 
 .text-white-50 { color: rgba(255, 255, 255, .5); }
+.text-yellow { color: yellow; }
 
 .bg-purple { background-color: #6f42c1; }
 .bg-darker { background-color: #121417; }

web/assets/js/bs5.dashboard-base.buttons.js

@@ -86,17 +86,20 @@ $(document).ready(function(){
         var el = $(this)
         var targetElement = el.attr('data-target')
         var classToToggle = el.attr('class_toggle')
-        var iconClassesToToggle = el.attr('icon-toggle').split(' ')
+        var iconClassesToToggle = el.attr('icon-toggle')
-        var iconTarget = el.attr('icon-child')
-        var iconTargetElement = el.find(el.attr('icon-child'))
         var togglPosition = $(targetElement).hasClass(classToToggle) ? 0 : 1
         var classToggles = dashboardOptions().class_toggle || {}
         classToggles[targetElement] = [classToToggle,togglPosition,iconClassesToToggle,iconTarget];
         dashboardOptions('class_toggle',classToggles)
         $(targetElement).toggleClass(classToToggle)
+        if(iconClassesToToggle){
+            iconClassesToToggle = iconClassesToToggle.split(' ')
+            var iconTarget = el.attr('icon-child')
+            var iconTargetElement = el.find(el.attr('icon-child'))
             iconTargetElement
                 .removeClass(iconClassesToToggle[togglPosition === 1 ? 0 : 1])
                 .addClass(iconClassesToToggle[togglPosition])
+        }
     })
     .on('keyup','.search-parent .search-controller',function(){
         var _this = this;

web/assets/js/bs5.dashboard-base.js

@@ -834,6 +834,15 @@ function shakeLogWriterIcon(){
         logWriterIconIndicator.removeClass('animate-shake')
     },3000)
 }
+function shakeLogWriterMonitorIcon(monitorId){
+    if(logStreamWiggling[monitorId])return;
+    var theWiggler = logStreamWiggler[monitorId];
+    theWiggler.addClass('animate-shake text-yellow')
+    logStreamWiggling[monitorId] = setTimeout(function(){
+        logStreamWiggling[monitorId] = null;
+        theWiggler.removeClass('animate-shake text-yellow')
+    },3000)
+}
 var logWriterFloodTimeout = null
 var logWriterFloodCounter = 0
 var logWriterFloodLock = null
@@ -854,23 +863,20 @@ function buildLogRow(v){
     </div>`
     return html
 }
-function logWriterDraw(id,data){
+
-    // if(logWriterFloodLock)return debugLog('logWriterFloodLock : Log was dropped');
+function removeLogRows(logElements){
-    var elementTags = '#global-log-stream,'+id+'.monitor_item .logs:visible,'+id+'#tab-monitorSettings:visible .logs'
+    logElements.each(function(n,v){
-    // if(logWriterFloodTimeout){
+        var theRows = logElements.find('.log-item')
-    //     ++logWriterFloodCounter
+        if(theRows.length > 10){
-    // }
+            theRows.last().remove()
-    // if(logWriterFloodCounter > 10){
+        }
-    //     window.logWriterFloodLock = setTimeout(function(){
+    })
-    //         delete(logWriterFloodLock)
+}
-    //     },10000)
+
-    // }
+function logWriterDraw(monitorId,data){
-    // clearTimeout(logWriterFloodTimeout)
-    // logWriterFloodTimeout = setTimeout(function(){
-    //     delete(logWriterFloodTimeout)
-    //     logWriterFloodCounter = 0
-    // },2000)
     if(!data.time)data.time = formattedTime();
+    var isUserLog = monitorId === '$USER'
+    var logElement = isUserLog ? logStreams['_USER'] : logStreams[monitorId];
     var html = buildLogRow({
         ke: data.ke,
         mid: data.mid,
@@ -878,13 +884,18 @@ function logWriterDraw(id,data){
         time: data.time,
     })
     shakeLogWriterIcon()
-    $(elementTags).prepend(html).each(function(n,v){
+    try{
-        var el = $(v);
+        shakeLogWriterMonitorIcon(isUserLog ? '_USER' : monitorId)
-        var theRows = el.find('.log-item')
+        logElement.prepend(html)
-        if(theRows.length > 10){
+        removeLogRows(logElement)
-            theRows.last().remove()
+        if(tabTree.name === 'monitorSettings' && monitorEditorSelectedMonitor.mid === monitorId){
+            monitorLogStreamElement.prepend(html)
+            removeLogRows(monitorLogStreamElement)
+        }
+        logStreamLastTimeEl[monitorId].text(formattedTime(new Date(), true))
+    }catch(err){
+        console.log(`Failed Log Write`, data)
     }
-    })
 }
 
 function setSwitchUIState(systemSwitch,toggleState){

web/assets/js/bs5.embed.js

@@ -445,7 +445,7 @@ function signalCheckLiveStream(options){
         var streamType = subStreamChannel ? monitorDetails.substream ? monitorDetails.substream.output.stream_type : 'hls' : monitorDetails.stream_type
         function failedStreamCheck(){
             if(monitorConfig.signal_check_log == 1){
-                logWriterDraw('[mid="'+monitorId+'"]',{
+                logWriterDraw(monitorId, {
                     log: {
                         type: 'Stream Check',
                         msg: lang.clientStreamFailedattemptingReconnect
@@ -456,7 +456,7 @@ function signalCheckLiveStream(options){
         }
         function succeededStreamCheck(){
             if(monitorConfig.signal_check_log == 1){
-                logWriterDraw('[mid="'+monitorId+'"]',{
+                logWriterDraw(monitorId, {
                     log: {
                         type: 'Stream Check',
                         msg : lang.Success

web/assets/js/bs5.liveGrid.js

@@ -852,7 +852,7 @@ function signalCheckLiveStream(options){
         var streamType = subStreamChannel ? monitorDetails.substream ? monitorDetails.substream.output.stream_type : 'hls' : monitorDetails.stream_type
         function failedStreamCheck(){
             if(monitorConfig.signal_check_log == 1){
-                logWriterDraw('[mid="'+monitorId+'"]',{
+                logWriterDraw(monitorId, {
                     log: {
                         type: 'Stream Check',
                         msg: lang.clientStreamFailedattemptingReconnect
@@ -863,7 +863,7 @@ function signalCheckLiveStream(options){
         }
         function succeededStreamCheck(){
             if(monitorConfig.signal_check_log == 1){
-                logWriterDraw('[mid="'+monitorId+'"]',{
+                logWriterDraw(monitorId, {
                     log: {
                         type: 'Stream Check',
                         msg : lang.Success

web/assets/js/bs5.logViewer.js

@@ -1,28 +1,49 @@
+var logStreams = {}
+var logStreamWiggler = {}
+var logStreamWiggling = {}
+var logStreamLastTimeEl = {}
+var monitorLogStreamElement = $(`#tab-monitorSettings .logs`);
 $(document).ready(function(e){
     var theWindow = $('#tab-logViewer')
     var logTypeSelector = $('#log_monitors')
     var dateSelector = $('#logs_daterange')
     var savedLogRows = $('#saved-logs-rows')
+    var globalLogStream = $('#global-log-stream')
     var theForm = theWindow.find('form')
     var logViewerDataInMemory = {}
     //log viewer
-    loadDateRangePicker(dateSelector,{
+    function setLogStreamElements(monitorId){
-        onChange: function(start, end, label) {
+        logStreams[monitorId] = $(`.logViewerStream[data-mid="${monitorId}"],.monitor_item[data-mid="${monitorId}"] .logs:visible`)
-            drawLogRows()
+        logStreamWiggler[monitorId] = $(`#logViewerStreamContainer_${monitorId} .fa-exclamation-triangle`)
+        logStreamLastTimeEl[monitorId] = $(`#logViewerStreamContainer_${monitorId} .lastlogtime`)
     }
+    function drawMonitorContainer(monitor){
+        var groupKey = monitor.ke
+        var monitorId = monitor.mid
+        var notExist = $(`#logViewerStreamContainer_${monitorId}`).length === 0;
+        if(notExist){
+            var dataTarget = `.logViewerStream[data-mid='${monitorId}']`
+            var classToggle = (dashboardOptions().class_toggle || {})[dataTarget] || []
+            var html = `<div id="logViewerStreamContainer_${monitorId}" class="card ${definitions.Theme.isDark ? 'btn-default' : ''} mb-3">
+                <div id="logViewerStreamHeader_${monitorId}" class_toggle="d-none" data-target="${dataTarget}" class="card-header cursor-pointer d-flex">
+                    <div class="col">
+                        <i class="fa fa-exclamation-triangle"></i> &nbsp; ${monitor.name} <small>(${monitor.mid})</small>
+                    </div>
+                    <div class="lastlogtime col text-end"></div>
+                </div>
+                <div data-mid="${monitorId}" data-ke="${groupKey}" class="logViewerStream card-body ${classToggle[1] === 1 ? 'd-none' : ''}"></div>
+            </div>`
+            globalLogStream.append(html);
+            setLogStreamElements(monitorId)
+        }
+    }
+    function drawMonitorContainers(){
+        globalLogStream.empty()
+        drawMonitorContainer({ mid: '_USER', ke: $user.ke, name: lang['User Logs'] })
+        $.each(loadedMonitors,function(n,monitor){
+            drawMonitorContainer(monitor)
         })
-    addOnTabOpen('logViewer',function(){
+    }
-        logTypeSelector.find('optgroup option').remove()
-        var html = ''
-        $.each(loadedMonitors,function(n,v){
-            html += createOptionHtml({
-                value: v.mid,
-                label: v.name,
-            })
-        })
-        logTypeSelector.find('optgroup').html(html)
-        drawLogRows()
-    })
     function drawLogRows(){
         var html = ''
         var selectedLogType = logTypeSelector.val()
@@ -62,4 +83,38 @@ $(document).ready(function(e){
         downloadJSON(logViewerDataInMemory,'Shinobi_Logs_'+(new Date())+'.json')
         return false;
     })
+    loadDateRangePicker(dateSelector,{
+        onChange: function(start, end, label) {
+            drawLogRows()
+        }
+    })
+    addOnTabOpen('logViewer',function(){
+        logTypeSelector.find('optgroup option').remove()
+        var html = ''
+        $.each(loadedMonitors,function(n,v){
+            html += createOptionHtml({
+                value: v.mid,
+                label: v.name,
+            })
+        })
+        logTypeSelector.find('optgroup').html(html)
+        drawLogRows()
+    })
+    drawMonitorContainers()
+    onDashboardReady(function(){
+        drawMonitorContainers()
+    })
+    onWebSocketEvent(function (d){
+        switch(d.f){
+            case'monitor_edit':
+                drawMonitorContainer(d.mon)
+            break;
+            case'monitor_watch_on':
+                setLogStreamElements(d.id || d.mid)
+            break;
+            case'monitor_watch_off':case'monitor_stopping':
+                setLogStreamElements(d.id || d.mid)
+            break;
+        }
+    })
 })

web/assets/js/bs5.monitorSettings.js

@@ -971,7 +971,7 @@ var showInputMappingFields = function(showMaps){
 function setFieldVisibilityNewWay(){
     var validation = getMonitorEditFormFields()
     if(!validation.ok){
-        return console.log('Failed setFieldVisibilityNewWay',new Error(),validation)
+        return console.log('Failed setFieldVisibilityNewWay', validation)
     }
     var monitorConfig = validation.monitorConfig
     var monitorDetails = safeJsonParse(monitorConfig.details)

web/assets/js/bs5.monitorsUtils.js

@@ -679,6 +679,7 @@ function redAlertNotify(options) {
         hide: options.hide === undefined ? false : options.hide,
         delay: options.delay || 30000
     };
+    try{
         if (redAlertNotice) {
             redAlertNotice.update(notifyOptions);
         } else {
@@ -687,6 +688,9 @@ function redAlertNotify(options) {
                 redAlertNotices[title] = null;
             });
         }
+    }catch(err){
+        console.error('redAlertNotify ERROR',err)
+    }
 }
 function buildPosePoints(bodyParts, x, y){
     let theArray = []

web/assets/js/bs5.startup.js

@@ -164,7 +164,7 @@ onWebSocketEvent(function (d){
             }
         break;
         case'log':
-            logWriterDraw('[data-mid="'+d.mid+'"][data-ke="'+d.ke+'"]',d)
+            logWriterDraw(d.mid, d)
         break;
         case'os'://indicator
             //cpu