From f84962211028f54e0073590bf6c3532178c64843 Mon Sep 17 00:00:00 2001
From: Nico Verwer <nico.verwer.jbp@gmail.com>
Date: Mon, 30 Sep 2024 12:09:58 +0200
Subject: [PATCH 1/3] monex would stop refreshing when properties on $data are
 undefined

---
 src/main/xar-resources/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/xar-resources/index.html b/src/main/xar-resources/index.html
index f0816e1..70faa01 100644
--- a/src/main/xar-resources/index.html
+++ b/src/main/xar-resources/index.html
@@ -414,7 +414,7 @@ <h3 class="box-title">Running Queries</h3>
                                     <tr>
                                         <td data-bind="text: $data.thread ? $data.thread : $data.id"/>
                                         <td>
-                                            <span class="source-key" data-bind="text: $data.sourceKey().replace(/^.*\/([^\/]+)$/, '$1'), attr: { title: sourceKey }" data-toggle="tooltip"/>
+                                          <span class="source-key" data-bind="text: typeof($data.sourceKey) == 'function' ? ( $data.sourceKey().replace(/^.*\/([^\/]+)$/, '$1') ) : '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
                                         </td>
                                         <td>
                                             <a target="_new" data-bind="attr: { href: (typeof $data.requestURI == 'function' ? ($root.url + $data.requestURI()) : '#') }, text: ($data.requestURI ? $data.requestURI : '')"/>
@@ -467,11 +467,11 @@ <h3 class="box-title">Recent Queries
                                 </tbody>
                                 <tbody id="jmx-recent-queries" data-bind="visible: $data.jmx.ProcessReport.RecentQueryHistory().length &gt; 0, foreach: {data: jmx.ProcessReport.RecentQueryHistory, afterRender: function(node) { $('.source-key', node).tooltip(); }}">
                                     <tr>
-                                        <td data-bind="text: new Date(parseInt($data.mostRecentExecutionTime())).toISOString()"/>
+                                      <td data-bind="text: typeof($data.mostRecentExecutionTime) == 'function' ? ( new Date(parseInt($data.mostRecentExecutionTime())).toISOString() ) : ''"/>
                                         <td>
-                                            <span class="source-key" data-bind="text: $data.sourceKey().replace(/^.*\/([^\/]+)$/, '$1'), attr: { title: sourceKey }" data-toggle="tooltip"/>
+                                          <span class="source-key" data-bind="text: typeof($data.sourceKey) == 'function' ? ( $data.sourceKey().replace(/^.*\/([^\/]+)$/, '$1') ) : '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
                                         </td>
-                                        <td data-bind="text: mostRecentExecutionDuration"/>
+                                      <td data-bind="text: typeof($data.mostRecentExecutionTime) == 'function' ? mostRecentExecutionDuration : ''"/>
                                         <td>
                                             <a target="_new" data-bind="attr: { href: (typeof $data.requestURI == 'function' ? ($root.url + $data.requestURI()) : '#') }, text: ($data.requestURI ? $data.requestURI : '')"/>
                                         </td>

From f8c8a0d2b850e98281e6fe1abc5e0e80c18750e5 Mon Sep 17 00:00:00 2001
From: Nico Verwer <nico.verwer.jbp@gmail.com>
Date: Mon, 30 Sep 2024 15:24:59 +0200
Subject: [PATCH 2/3] prevent any undefined property errors

Works only in modern-ish browsers, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#browser_compatibility
---
 src/main/xar-resources/index.html | 70 +++++++++++++++----------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/main/xar-resources/index.html b/src/main/xar-resources/index.html
index 70faa01..07ee7a9 100644
--- a/src/main/xar-resources/index.html
+++ b/src/main/xar-resources/index.html
@@ -49,7 +49,7 @@ <h1>
                         <span class="info-box-text">
                             Uptime
                         </span>
-                        <span class="info-box-number" id="jmx-uptime" data-bind="text: uptime($data.jmx.Database.Uptime())">?</span>
+                        <span class="info-box-number" id="jmx-uptime" data-bind="text: uptime($data?.jmx?.Database?.Uptime() ?? '')">?</span>
                     </div>
                 </div>
             </div><!-- ./col -->
@@ -63,7 +63,7 @@ <h1>
                             Running Queries
                         </span>
                         <span class="info-box-number">
-                            <span id="jmx-queries" data-bind="text: $data.jmx.ProcessReport.RunningQueries().length || 0">?</span>
+                            <span id="jmx-queries" data-bind="text: $data?.jmx?.ProcessReport?.RunningQueries?.()?.length || 0">?</span>
                         </span>
                     </div>
                 </div>
@@ -104,31 +104,31 @@ <h3 class="box-title">Java Memory</h3>
                                     <div class="clearfix">
                                         <span class="pull-left">Memory Used</span>
                                         <small class="pull-right">
-                                            <span data-bind="text: Math.floor(parseInt($data.used()) / 1024 / 1024)">10</span> /
-                                            <span data-bind="text: Math.floor(parseInt($data.max()) / 1024 / 1024)">10</span> M
+                                            <span data-bind="text: Math.floor(parseInt($data?.used?.() ?? 0) / 1024 / 1024)">10</span> /
+                                            <span data-bind="text: Math.floor(parseInt($data?.max?.() ?? 1) / 1024 / 1024)">10</span> M
                                         </small>
                                     </div>
                                     <div class="progress xs">
-                                        <div class="progress-bar progress-bar-green" data-bind="style: {width: Math.round($data.used() / ($data.max() / 100)) + '%'}"/>
+                                      <div class="progress-bar progress-bar-green" data-bind="style: {width: Math.round(($data?.used?.() ?? 0) / (($data?.max?.() ?? 1) / 100)) + '%'}"/>
                                     </div>
                                 </div><!-- /.pad -->
                                 <div class="pad"><!-- Progress bars -->
                                     <div class="clearfix">
                                         <span class="pull-left">Memory Committed</span>
                                         <small class="pull-right">
-                                            <span data-bind="text: Math.floor(parseInt($data.committed()) / 1024 / 1024)">10</span> /
-                                            <span data-bind="text: Math.floor(parseInt($data.max()) / 1024 / 1024)">10</span> M
+                                            <span data-bind="text: Math.floor(parseInt($data?.committed?.() ?? 0) / 1024 / 1024)">10</span> /
+                                          <span data-bind="text: Math.floor(parseInt($data?.max?.() ?? 1) / 1024 / 1024)">10</span> M
                                         </small>
                                     </div>
                                     <div class="progress xs">
-                                        <div class="progress-bar progress-bar-green" data-bind="style: {width: Math.round($data.committed() / ($data.max() / 100)) + '%'}"/>
+                                      <div class="progress-bar progress-bar-green" data-bind="style: {width: Math.round(($data?.committed?.() ?? 0) / (($data?.max?.() ?? 1) / 100)) + '%'}"/>
                                     </div>
                                 </div><!-- /.pad -->
                             </div><!-- /.col -->
                         </div><!-- /.row - inside box -->
                     </div><!-- /.box-body -->
                     <div class="box-footer">
-                        <button class="btn btn-warning" data-bind="visible: parseInt($data.jmx.version()) &gt; 0, click: gc">Garbage Collect</button>
+                        <button class="btn btn-warning" data-bind="visible: parseInt($data?.jmx?.version?.() ?? 0) &gt; 0, click: gc">Garbage Collect</button>
                     </div>
                 </div><!-- /.box -->
             </section>
@@ -182,7 +182,7 @@ <h3 class="box-title">Running Jobs</h3>
                                     <th>Info</th>
                                 </tr>
                             </thead>
-                            <tbody data-bind="visible: $data.jmx.ProcessReport.RunningJobs().length == 0">
+                            <tbody data-bind="visible: $data?.jmx?.ProcessReport?.RunningJobs?.()?.length == 0">
                                 <tr>
                                     <td colspan="5">No running jobs</td>
                                 </tr>
@@ -250,19 +250,19 @@ <h3 class="box-title">System Information</h3>
                                 </tr>
                                 <tr data-bind="if: $data.jmx.OperatingSystemImpl">
                                     <td>System CPU Load:</td>
-                                    <td data-bind="text: parseFloat($data.jmx.OperatingSystemImpl.SystemCpuLoad()).toPrecision(6)"/>
+                                    <td data-bind="text: parseFloat($data?.jmx?.OperatingSystemImpl?.SystemCpuLoad?.() ?? 0).toPrecision(6)"/>
                                 </tr>
                                 <tr data-bind="if: $data.jmx.OperatingSystemImpl">
                                     <td>Process CPU Load:</td>
-                                    <td data-bind="text: parseFloat($data.jmx.OperatingSystemImpl.ProcessCpuLoad()).toPrecision(6)"/>
+                                    <td data-bind="text: parseFloat($data?.jmx?.OperatingSystemImpl?.ProcessCpuLoad?.() ?? 0).toPrecision(6)"/>
                                 </tr>
                                 <tr data-bind="if: $data.jmx.OperatingSystemImpl">
                                     <td>Free Physical Memory:</td>
-                                    <td data-bind="text: parseInt($data.jmx.OperatingSystemImpl.FreePhysicalMemorySize())"/>
+                                    <td data-bind="text: parseInt($data?.jmx?.OperatingSystemImpl?.FreePhysicalMemorySize?.() ?? 0)"/>
                                 </tr>
                                 <tr data-bind="if: $data.jmx.OperatingSystemImpl">
                                     <td>Total Physical Memory:</td>
-                                    <td data-bind="text: parseInt($data.jmx.OperatingSystemImpl.TotalPhysicalMemorySize())"/>
+                                    <td data-bind="text: parseInt($data?.jmx?.OperatingSystemImpl?.TotalPhysicalMemorySize?.() ?? 0)"/>
                                 </tr>
                             </tbody>
                         </table>
@@ -301,7 +301,7 @@ <h3 class="box-title">Cache Usage</h3>
                                 Using <span data-bind="text: CurrentSize">0</span> of <span data-bind="text: MaxTotal">0</span> pages</small>
                         </div>
                         <div class="progress xs">
-                            <div class="progress-bar progress-bar-success progress-cache" data-bind="style: {width: Math.round($data.CurrentSize() / ($data.MaxTotal() / 100)) + '%'}"/>
+                            <div class="progress-bar progress-bar-success progress-cache" data-bind="style: {width: Math.round(($data?.CurrentSize?.() ?? 0) / (($data?.MaxTotal?.() ?? 1) / 100)) + '%'}"/>
                         </div>
                     </div>
                     <div class="box-body jmx-cache-manager" data-bind="with: findByName($data.jmx.CacheManager, 'org.exist.management.exist:type=CollectionCacheManager')">
@@ -311,10 +311,10 @@ <h3 class="box-title">Cache Usage</h3>
                                 Using <span data-bind="text: CurrentSize">0</span> of <span data-bind="text: MaxTotal">0</span> bytes</small>
                         </div>
                         <div class="progress xs">
-                            <div class="progress-bar progress-bar-success progress-cache" data-bind="style: {width: Math.round($data.CurrentSize() / ($data.MaxTotal() / 100)) + '%'}"/>
+                            <div class="progress-bar progress-bar-success progress-cache" data-bind="style: {width: Math.round(($data?.CurrentSize?.() ?? 0) / (($data?.MaxTotal?.() ?? 0) / 100)) + '%'}"/>
                         </div>
                     </div>
-                    <div class="box-body jmx-cache" data-bind="with: findByName($data.jmx.Cache(), 'org.exist.management.exist:type=CacheManager.Cache,name=dom.dbx,cache-type=BTREE')">
+                    <div class="box-body jmx-cache" data-bind="with: findByName($data?.jmx?.Cache?.(), 'org.exist.management.exist:type=CacheManager.Cache,name=dom.dbx,cache-type=BTREE')">
                         <div class="clearfix">
                             <span class="pull-left">dom.dbx (BTree)</span>
                             <small class="pull-right">
@@ -327,10 +327,10 @@ <h3 class="box-title">Cache Usage</h3>
                             </small>
                         </div>
                         <div class="progress xs">
-                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round($data.Used() / ($data.Size() / 100)) + '%'}"/>
+                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round(($data?.Used?.() ?? 0) / (($data?.Size?.() ?? 1) / 100)) + '%'}"/>
                         </div>
                     </div>
-                    <div class="box-body jmx-cache" data-bind="with: findByName($data.jmx.Cache(), 'org.exist.management.exist:type=CacheManager.Cache,name=structure.dbx,cache-type=BTREE')">
+                    <div class="box-body jmx-cache" data-bind="with: findByName($data?.jmx?.Cache?.(), 'org.exist.management.exist:type=CacheManager.Cache,name=structure.dbx,cache-type=BTREE')">
                         <div class="clearfix">
                             <span class="pull-left">structure.dbx (BTree)</span>
                             <small class="pull-right">
@@ -343,10 +343,10 @@ <h3 class="box-title">Cache Usage</h3>
                             </small>
                         </div>
                         <div class="progress xs">
-                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round($data.Used() / ($data.Size() / 100)) + '%'}"/>
+                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round(($data?.Used?.() ?? 0) / (($data?.Size?.() ?? 1) / 100)) + '%'}"/>
                         </div>
                     </div>
-                    <div class="box-body jmx-cache" data-bind="with: findByName($data.jmx.Cache(), 'org.exist.management.exist:type=CacheManager.Cache,name=collections.dbx,cache-type=BTREE')">
+                    <div class="box-body jmx-cache" data-bind="with: findByName($data?.jmx?.Cache?.(), 'org.exist.management.exist:type=CacheManager.Cache,name=collections.dbx,cache-type=BTREE')">
                         <div class="clearfix">
                             <span class="pull-left">collections.dbx (BTree)</span>
                             <small class="pull-right">
@@ -359,10 +359,10 @@ <h3 class="box-title">Cache Usage</h3>
                             </small>
                         </div>
                         <div class="progress xs">
-                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round($data.Used() / ($data.Size() / 100)) + '%'}"/>
+                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round(($data?.Used?.() ?? 0) / (($data?.Size?.() ?? 1) / 100)) + '%'}"/>
                         </div>
                     </div>
-                    <div class="box-body jmx-cache" data-bind="with: findByName($data.jmx.Cache(), 'org.exist.management.exist:type=CacheManager.Cache,name=values.dbx,cache-type=BTREE')">
+                    <div class="box-body jmx-cache" data-bind="with: findByName($data?.jmx?.Cache?.(), 'org.exist.management.exist:type=CacheManager.Cache,name=values.dbx,cache-type=BTREE')">
                         <div class="clearfix">
                             <span class="pull-left">values.dbx (BTree)</span>
                             <small class="pull-right">
@@ -375,7 +375,7 @@ <h3 class="box-title">Cache Usage</h3>
                             </small>
                         </div>
                         <div class="progress xs">
-                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round($data.Used() / ($data.Size() / 100)) + '%'}"/>
+                            <div class="progress-bar progress-bar-info progress-cache" data-bind="style: {width: Math.round(($data?.Used?.() ?? 0) / (($data?.Size?.() ?? 1) / 100)) + '%'}"/>
                         </div>
                     </div>
                 </div>
@@ -405,7 +405,7 @@ <h3 class="box-title">Running Queries</h3>
                                         <th/>
                                     </tr>
                                 </thead>
-                                <tbody data-bind="visible: $data.jmx.ProcessReport.RunningQueries().length == 0">
+                                <tbody data-bind="visible: $data?.jmx?.ProcessReport?.RunningQueries?.()?.length == 0">
                                     <tr>
                                         <td colspan="5">No running queries</td>
                                     </tr>
@@ -414,13 +414,13 @@ <h3 class="box-title">Running Queries</h3>
                                     <tr>
                                         <td data-bind="text: $data.thread ? $data.thread : $data.id"/>
                                         <td>
-                                          <span class="source-key" data-bind="text: typeof($data.sourceKey) == 'function' ? ( $data.sourceKey().replace(/^.*\/([^\/]+)$/, '$1') ) : '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
+                                          <span class="source-key" data-bind="text: $data?.sourceKey?.()?.replace(/^.*\/([^\/]+)$/, '$1') ?? '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
                                         </td>
                                         <td>
-                                            <a target="_new" data-bind="attr: { href: (typeof $data.requestURI == 'function' ? ($root.url + $data.requestURI()) : '#') }, text: ($data.requestURI ? $data.requestURI : '')"/>
+                                            <a target="_new" data-bind="attr: { href: (typeof $data.requestURI == 'function' ? ($root.url + $data?.requestURI?.()) : '#') }, text: ($data.requestURI ? $data.requestURI : '')"/>
                                         </td>
                                         <td>
-                                            <span class="label" data-bind="text: $data.terminating() == 'false' ? 'running' : 'terminating', css: { 'label-success': $data.terminating() == 'false', 'label-warning': $data.terminating() == 'true' }"/>
+                                            <span class="label" data-bind="text: $data?.terminating?.() == 'false' ? 'running' : 'terminating', css: { 'label-success': $data?.terminating?.() == 'false', 'label-warning': $data?.terminating?.() == 'true' }"/>
                                         </td>
                                         <td>
                                             <a href="#" class="kill-query" title="Kill Query" data-bind="if: JMX_INSTANCE.name == 'localhost' || JMX_INSTANCE.version != 0">
@@ -460,16 +460,16 @@ <h3 class="box-title">Recent Queries
                                         <th>Request URI</th>
                                     </tr>
                                 </thead>
-                                <tbody data-bind="visible: $data.jmx.ProcessReport.RecentQueryHistory().length == 0">
+                                <tbody data-bind="visible: $data?.jmx?.ProcessReport?.RecentQueryHistory?.()?.length == 0">
                                     <tr>
                                         <td colspan="2">Empty</td>
                                     </tr>
                                 </tbody>
-                                <tbody id="jmx-recent-queries" data-bind="visible: $data.jmx.ProcessReport.RecentQueryHistory().length &gt; 0, foreach: {data: jmx.ProcessReport.RecentQueryHistory, afterRender: function(node) { $('.source-key', node).tooltip(); }}">
+                                <tbody id="jmx-recent-queries" data-bind="visible: $data?.jmx?.ProcessReport?.RecentQueryHistory?.()?.length &gt; 0, foreach: {data: jmx.ProcessReport.RecentQueryHistory, afterRender: function(node) { $('.source-key', node).tooltip(); }}">
                                     <tr>
-                                      <td data-bind="text: typeof($data.mostRecentExecutionTime) == 'function' ? ( new Date(parseInt($data.mostRecentExecutionTime())).toISOString() ) : ''"/>
+                                      <td data-bind="text: new Date(parseInt($data?.mostRecentExecutionTime?.() ?? 0)).toISOString()"/>
                                         <td>
-                                          <span class="source-key" data-bind="text: typeof($data.sourceKey) == 'function' ? ( $data.sourceKey().replace(/^.*\/([^\/]+)$/, '$1') ) : '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
+                                          <span class="source-key" data-bind="text: $data?.sourceKey?.()?.replace(/^.*\/([^\/]+)$/, '$1') ?? '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
                                         </td>
                                       <td data-bind="text: typeof($data.mostRecentExecutionTime) == 'function' ? mostRecentExecutionDuration : ''"/>
                                         <td>
@@ -523,7 +523,7 @@ <h3 class="box-title">Waiting Threads</h3>
                                     <th>Waiting for</th>
                                 </tr>
                             </thead>
-                            <tbody data-bind="visible: !$data.jmx.LockTable.Acquired() || $data.jmx.LockTable.Acquired().length == 0">
+                            <tbody data-bind="visible: !$data?.jmx?.LockTable?.Acquired?.() || $data?.jmx?.LockTable?.Acquired?.()?.length == 0">
                                 <tr>
                                     <td colspan="5">No waiting threads</td>
                                 </tr>
@@ -562,7 +562,7 @@ <h3 class="box-title">Active Threads</h3>
                                     <th/>
                                 </tr>
                             </thead>
-                            <tbody data-bind="visible: $data.jmx.Database.ActiveBrokersMap().length == 0">
+                            <tbody data-bind="visible: $data?.jmx?.Database?.ActiveBrokersMap?.()?.length == 0">
                                 <tr>
                                     <td colspan="2">No active threads</td>
                                 </tr>
@@ -591,4 +591,4 @@ <h3 class="box-title">Active Threads</h3>
     <script type="text/javascript" src="resources/scripts/ion.rangeSlider.min.js"></script>
     <script type="text/javascript" src="resources/scripts/util.js"></script>
     <script type="text/javascript" src="resources/scripts/exadmin.js"></script>
-</div>
+</div>
\ No newline at end of file

From c668537605d72654b3a29f14c1aa7908392b5096 Mon Sep 17 00:00:00 2001
From: Nico Verwer <nico.verwer.jbp@gmail.com>
Date: Mon, 7 Oct 2024 14:39:26 +0200
Subject: [PATCH 3/3] adapt knockoutjs paths to changed JMX tabular structure

---
 src/main/xar-resources/index.html | 62 +++++++++++++++----------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/main/xar-resources/index.html b/src/main/xar-resources/index.html
index 07ee7a9..e9d7133 100644
--- a/src/main/xar-resources/index.html
+++ b/src/main/xar-resources/index.html
@@ -63,7 +63,7 @@ <h1>
                             Running Queries
                         </span>
                         <span class="info-box-number">
-                            <span id="jmx-queries" data-bind="text: $data?.jmx?.ProcessReport?.RunningQueries?.()?.length || 0">?</span>
+                          <span id="jmx-queries" data-bind="text: $data?.jmx?.ProcessReport?.RunningQueries?.()?.length ?? '???'">?</span>
                         </span>
                     </div>
                 </div>
@@ -105,7 +105,7 @@ <h3 class="box-title">Java Memory</h3>
                                         <span class="pull-left">Memory Used</span>
                                         <small class="pull-right">
                                             <span data-bind="text: Math.floor(parseInt($data?.used?.() ?? 0) / 1024 / 1024)">10</span> /
-                                            <span data-bind="text: Math.floor(parseInt($data?.max?.() ?? 1) / 1024 / 1024)">10</span> M
+                                            <span data-bind="text: Math.floor(parseInt($data?.max?.() ?? 0) / 1024 / 1024)">10</span> M
                                         </small>
                                     </div>
                                     <div class="progress xs">
@@ -117,7 +117,7 @@ <h3 class="box-title">Java Memory</h3>
                                         <span class="pull-left">Memory Committed</span>
                                         <small class="pull-right">
                                             <span data-bind="text: Math.floor(parseInt($data?.committed?.() ?? 0) / 1024 / 1024)">10</span> /
-                                          <span data-bind="text: Math.floor(parseInt($data?.max?.() ?? 1) / 1024 / 1024)">10</span> M
+                                          <span data-bind="text: Math.floor(parseInt($data?.max?.() ?? 0) / 1024 / 1024)">10</span> M
                                         </small>
                                     </div>
                                     <div class="progress xs">
@@ -182,16 +182,16 @@ <h3 class="box-title">Running Jobs</h3>
                                     <th>Info</th>
                                 </tr>
                             </thead>
-                            <tbody data-bind="visible: $data?.jmx?.ProcessReport?.RunningJobs?.()?.length == 0">
+                            <tbody data-bind="visible: ( $data?.jmx?.ProcessReport?.RunningJobs?.()?.length ?? 0 ) == 0">
                                 <tr>
-                                    <td colspan="5">No running jobs</td>
+                                    <td colspan="3">No running jobs</td>
                                 </tr>
                             </tbody>
-                            <tbody data-bind="foreach: jmx.ProcessReport.RunningJobs">
+                          <tbody data-bind="foreach: { data: jmx.ProcessReport.RunningJobs }">
                                 <tr>
-                                    <td data-bind="text: action"/>
-                                    <td data-bind="text: id"/>
-                                    <td data-bind="text: info"/>
+                                  <td data-bind="text: ( $data?.action?.() ?? $data?.value?.action?.() ?? '' )"/>
+                                  <td data-bind="text: ( $data?.id?.() ?? $data?.value?.id?.() ?? '' )"/>
+                                  <td data-bind="text: ( $data?.info?.() ?? $data?.value?.info?.() ?? '' )"/>
                                 </tr>
                             </tbody>
                         </table>
@@ -405,22 +405,22 @@ <h3 class="box-title">Running Queries</h3>
                                         <th/>
                                     </tr>
                                 </thead>
-                                <tbody data-bind="visible: $data?.jmx?.ProcessReport?.RunningQueries?.()?.length == 0">
+                                <tbody data-bind="visible: ( $data?.jmx?.ProcessReport?.RunningQueries?.()?.length ?? 0 ) == 0">
                                     <tr>
                                         <td colspan="5">No running queries</td>
                                     </tr>
                                 </tbody>
                                 <tbody data-bind="foreach: { data: jmx.ProcessReport.RunningQueries, afterRender: addKillBtn }">
                                     <tr>
-                                        <td data-bind="text: $data.thread ? $data.thread : $data.id"/>
+                                        <td data-bind="text: ( $data.thread ?? $data.value.thread ?? $data.id ?? $data.value.id )" />
                                         <td>
-                                          <span class="source-key" data-bind="text: $data?.sourceKey?.()?.replace(/^.*\/([^\/]+)$/, '$1') ?? '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
+                                          <span class="source-key" data-bind="text: ( $data?.sourceKey?.() ?? $data?.value?.sourceKey?.() )?.replace(/^.*\/([^\/]+)$/, '$1') ?? '???', attr: { title: ( $data?.sourceKey?.() ?? $data?.value?.sourceKey?.() ?? '' ) }" data-toggle="tooltip"/>
                                         </td>
                                         <td>
-                                            <a target="_new" data-bind="attr: { href: (typeof $data.requestURI == 'function' ? ($root.url + $data?.requestURI?.()) : '#') }, text: ($data.requestURI ? $data.requestURI : '')"/>
+                                          <a target="_blank" data-bind="attr: { href: $root.url +( $data?.requestURI?.() ?? $data?.value?.requestURI?.() ?? '#') }, text: ($data?.requestURI ?? $data?.value?.requestURI ?? '???')"/>
                                         </td>
                                         <td>
-                                            <span class="label" data-bind="text: $data?.terminating?.() == 'false' ? 'running' : 'terminating', css: { 'label-success': $data?.terminating?.() == 'false', 'label-warning': $data?.terminating?.() == 'true' }"/>
+                                          <span class="label" data-bind="text: ( $data?.terminating?.() ?? $data?.value?.terminating?.() ?? 'false' ) == 'false' ? 'running' : 'terminating', css: { 'label-success': ( $data?.terminating?.() ?? $data?.value?.terminating?.() ?? 'false' ) == 'false', 'label-warning': ( $data?.terminating?.() ?? $data?.value?.terminating?.() ?? 'false' ) == 'true' }"/>
                                         </td>
                                         <td>
                                             <a href="#" class="kill-query" title="Kill Query" data-bind="if: JMX_INSTANCE.name == 'localhost' || JMX_INSTANCE.version != 0">
@@ -460,20 +460,20 @@ <h3 class="box-title">Recent Queries
                                         <th>Request URI</th>
                                     </tr>
                                 </thead>
-                                <tbody data-bind="visible: $data?.jmx?.ProcessReport?.RecentQueryHistory?.()?.length == 0">
+                                <tbody data-bind="visible: ( $data?.jmx?.ProcessReport?.RecentQueryHistory?.()?.length ?? 0) == 0">
                                     <tr>
-                                        <td colspan="2">Empty</td>
+                                        <td colspan="4">No recent queries</td>
                                     </tr>
                                 </tbody>
-                                <tbody id="jmx-recent-queries" data-bind="visible: $data?.jmx?.ProcessReport?.RecentQueryHistory?.()?.length &gt; 0, foreach: {data: jmx.ProcessReport.RecentQueryHistory, afterRender: function(node) { $('.source-key', node).tooltip(); }}">
+                                <tbody id="jmx-recent-queries" data-bind="visible: ( $data?.jmx?.ProcessReport?.RecentQueryHistory?.()?.length ?? 0 ) &gt; 0, foreach: {data: $data.jmx.ProcessReport.RecentQueryHistory, afterRender: function(node) { $('.source-key', node).tooltip(); }}">
                                     <tr>
-                                      <td data-bind="text: new Date(parseInt($data?.mostRecentExecutionTime?.() ?? 0)).toISOString()"/>
+                                      <td data-bind="text: new Date(parseInt( $data?.mostRecentExecutionTime?.() ?? $data?.value?.mostRecentExecutionTime?.() ?? 0 )).toISOString()"/>
                                         <td>
-                                          <span class="source-key" data-bind="text: $data?.sourceKey?.()?.replace(/^.*\/([^\/]+)$/, '$1') ?? '', attr: { title: ( typeof($data.sourceKey) == 'function' ? sourceKey : '' ) }" data-toggle="tooltip"/>
+                                          <span class="source-key"  data-bind="text: ( $data?.sourceKey?.() ?? $data?.value?.sourceKey?.() )?.replace(/^.*\/([^\/]+)$/, '$1') ?? '???', attr: { title: ( $data?.sourceKey?.() ?? $data?.value?.sourceKey?.() ?? '' ) }" data-toggle="tooltip"/>
                                         </td>
-                                      <td data-bind="text: typeof($data.mostRecentExecutionTime) == 'function' ? mostRecentExecutionDuration : ''"/>
+                                        <td data-bind="text: ( $data?.mostRecentExecutionDuration?.() ?? $data?.value?.mostRecentExecutionDuration?.() ?? '' )"/>
                                         <td>
-                                            <a target="_new" data-bind="attr: { href: (typeof $data.requestURI == 'function' ? ($root.url + $data.requestURI()) : '#') }, text: ($data.requestURI ? $data.requestURI : '')"/>
+                                          <a target="_blank" data-bind="attr: { href: $root.url + ( $data?.requestURI?.() ?? $data?.value?.requestURI() ?? '#' ) }, text: ( $data?.requestURI?.() ?? $data?.value?.requestURI() ?? '#' )"/>
                                         </td>
                                     </tr>
                                 </tbody>
@@ -487,7 +487,7 @@ <h3 class="box-title">Recent Queries
                                 <input type="text" class="form-control" id="threshold" title="The minimum execution time for a query to be recorded"/>
                             </div>
                             <div class="form-group">
-                                <label for="history-max">Keep history for (ms): </label>
+                              <label for="history-timespan">Keep history for (ms): </label>
                                 <input type="text" class="form-control" id="history-timespan" title="The time in seconds to keep queries in the history"/>
                             </div>
                             <div class="form-group">
@@ -525,7 +525,7 @@ <h3 class="box-title">Waiting Threads</h3>
                             </thead>
                             <tbody data-bind="visible: !$data?.jmx?.LockTable?.Acquired?.() || $data?.jmx?.LockTable?.Acquired?.()?.length == 0">
                                 <tr>
-                                    <td colspan="5">No waiting threads</td>
+                                    <td colspan="2">No waiting threads</td>
                                 </tr>
                             </tbody>
                             <tbody data-bind="foreach: jmx.LockTable.Acquired">
@@ -583,12 +583,12 @@ <h3 class="box-title">Active Threads</h3>
             </section>
         </div>
     </section>
-    <script type="text/javascript" src="resources/scripts/modernizr.custom.js"></script>
-    <script type="text/javascript" src="resources/scripts/knockout-latest.js"></script>
-    <script type="text/javascript" src="resources/scripts/knockout.mapping.js"></script>
-    <script type="text/javascript" src="resources/scripts/jquery.flot.min.js"></script>
-    <script type="text/javascript" src="resources/scripts/jquery.flot.time.min.js"></script>
-    <script type="text/javascript" src="resources/scripts/ion.rangeSlider.min.js"></script>
-    <script type="text/javascript" src="resources/scripts/util.js"></script>
-    <script type="text/javascript" src="resources/scripts/exadmin.js"></script>
+    <script type="text/javascript" src="resources/scripts/modernizr.custom.js"> </script>
+    <script type="text/javascript" src="resources/scripts/knockout-latest.js"> </script>
+    <script type="text/javascript" src="resources/scripts/knockout.mapping.js"> </script>
+    <script type="text/javascript" src="resources/scripts/jquery.flot.min.js"> </script>
+    <script type="text/javascript" src="resources/scripts/jquery.flot.time.min.js"> </script>
+    <script type="text/javascript" src="resources/scripts/ion.rangeSlider.min.js"> </script>
+    <script type="text/javascript" src="resources/scripts/util.js"> </script>
+    <script type="text/javascript" src="resources/scripts/exadmin.js"> </script>
 </div>
\ No newline at end of file