⚡ Improve WebUI performance in Stream view

internal/app/version.go

@@ -1,3 +1,3 @@
 package app
 
-const FLOWG_VERSION = "v0.7.0"
+const FLOWG_VERSION = "v0.8.0"

web/apps/streams/templates/components/head.templ

@@ -2,104 +2,8 @@ package components
 
 templ Head() {
   <script type="application/javascript" src="/static/js/apexcharts.min.js"></script>
-  <script type="application/javascript">
-    document.addEventListener('htmx:beforeSwap', () => {
-      if (window.chart !== undefined) {
-        window.chart.destroy()
-        window.chart = undefined
-      }
-    })
-
-    document.addEventListener('htmx:load', () => {
-      const inputOffset = document.getElementById('data_stream_timeoffset')
-      inputOffset.value = `${new Date().getTimezoneOffset()}`
-    })
-
-    document.addEventListener('htmx:load', () => {
-      const histogramElt  = document.getElementById('data_stream_histogram')
-      const histogramData = JSON.parse(histogramElt.dataset.timeserie)
-
-      if (window.chart !== undefined) {
-        window.chart.destroy()
-      }
-
-      window.chart = new ApexCharts(histogramElt, {
-        series: [
-          {
-            name: 'Logs',
-            data: histogramData,
-          },
-        ],
-        chart: {
-          type: 'bar',
-          width: '100%',
-          height: 150,
-          animations: {
-            enabled: false,
-          }
-        },
-        dataLabels: {
-          enabled: false,
-        },
-        xaxis: {
-          type: 'datetime',
-        },
-      })
-      window.chart.render()
-    })
-
-    document.addEventListener('htmx:load', () => {
-      const autoRefreshSelector = document.getElementById('data_stream_autorefresh')
-
-      if (window.autoRefreshToken !== undefined && window.autoRefreshToken !== null) {
-        clearTimeout(window.autoRefreshToken)
-      }
-
-      window.autoRefreshToken = null
-
-      const setupAutoRefresh = () => {
-        const autoRefreshInterval = parseInt(autoRefreshSelector.value) * 1000
-
-        if (window.autoRefreshToken) {
-          clearTimeout(window.autoRefreshToken)
-        }
-
-        if (autoRefreshInterval > 0) {
-          window.autoRefreshToken = setTimeout(
-            () => {
-              const form    = document.getElementById('form_stream')
-              const inputTo = document.getElementById('data_stream_to')
-
-              // <input type="datetime-local" step="1" />
-              // expects a value with the format "YYYY-MM-DDTHH:MM:SS"
-              const now = new Date()
-              const YYYY = now.getFullYear()
-              const mm = String(now.getMonth() + 1).padStart(2, '0')
-              const dd = String(now.getDate()).padStart(2, '0')
-              const HH = String(now.getHours()).padStart(2, '0')
-              const MM = String(now.getMinutes()).padStart(2, '0')
-              let SS = String(now.getSeconds()).padStart(2, '0')
-
-              // somehow, when SS is '00', the input is set to:
-              // 01/01/0001 00:00:00 ???
-              if (SS === '00') {
-                SS = '01'
-              }
-
-              inputTo.value = `${YYYY}-${mm}-${dd}T${HH}:${MM}:${SS}`
-
-              // form.submit() does not trigger the submit event
-              // and we want HTMX to catch it
-              form.dispatchEvent(new Event('submit'))
-            },
-            autoRefreshInterval,
-          )
-        }
-      }
-
-      // make sure the setup is done after the htmx:load is fully processed
-      setTimeout(setupAutoRefresh, 0)
-      autoRefreshSelector.addEventListener('change', setupAutoRefresh)
-    })
-  </script>
+  <script type="application/javascript" src="/static/js/virtual-scroller.min.js"></script>
+  <script type="application/javascript" src="/static/js/flowg.streams.chart.js" defer></script>
+  <script type="application/javascript" src="/static/js/flowg.streams.autorefresh.js" defer></script>
+  <script type="application/javascript" src="/static/js/flowg.streams.logtable.js" defer></script>
 }

web/apps/streams/templates/components/viewer.templ

@@ -33,6 +33,7 @@ templ Viewer(props ViewerProps) {
       })
     </div>
     <div
+      id="stream_logs"
       class="
         card-panel white
         p-0 mb-0 h-0
@@ -41,7 +42,7 @@ templ Viewer(props ViewerProps) {
       "
     >
       <table class="w-full table-responsive logs highlight">
-        <thead class="grey lighten-2 z-depth-1">
+        <thead id="stream_logs_header" class="grey lighten-2 z-depth-1">
           <tr>
             <th class="text-center">Ingested At</th>
             for _, field := range props.Fields {
@@ -50,7 +51,10 @@ templ Viewer(props ViewerProps) {
           </tr>
         </thead>
 
-        <tbody>
+        <tbody id="stream_logs_content">
+        </tbody>
+
+        <template id="stream_logs_data">
           for _, entry := range props.LogEntries {
             <tr>
               <td class="font-monospace">{entry.Timestamp.Format(time.RFC3339)}</td>
@@ -66,8 +70,9 @@ templ Viewer(props ViewerProps) {
               }
             </tr>
           }
-        </tbody>
+        </template>
       </table>
     </div>
   </div>
+
 }

web/static/js/flowg.streams.autorefresh.js

@@ -0,0 +1,58 @@
+document.addEventListener('htmx:load', () => {
+  const inputOffset = document.getElementById('data_stream_timeoffset')
+  inputOffset.value = `${new Date().getTimezoneOffset()}`
+})
+
+document.addEventListener('htmx:load', () => {
+  const autoRefreshSelector = document.getElementById('data_stream_autorefresh')
+
+  if (window.autoRefreshToken !== undefined && window.autoRefreshToken !== null) {
+    clearTimeout(window.autoRefreshToken)
+  }
+
+  window.autoRefreshToken = null
+
+  const setupAutoRefresh = () => {
+    const autoRefreshInterval = parseInt(autoRefreshSelector.value) * 1000
+
+    if (window.autoRefreshToken) {
+      clearTimeout(window.autoRefreshToken)
+    }
+
+    if (autoRefreshInterval > 0) {
+      window.autoRefreshToken = setTimeout(
+        () => {
+          const form    = document.getElementById('form_stream')
+          const inputTo = document.getElementById('data_stream_to')
+
+          // <input type="datetime-local" step="1" />
+          // expects a value with the format "YYYY-MM-DDTHH:MM:SS"
+          const now = new Date()
+          const YYYY = now.getFullYear()
+          const mm = String(now.getMonth() + 1).padStart(2, '0')
+          const dd = String(now.getDate()).padStart(2, '0')
+          const HH = String(now.getHours()).padStart(2, '0')
+          const MM = String(now.getMinutes()).padStart(2, '0')
+          let SS = String(now.getSeconds()).padStart(2, '0')
+
+          // somehow, when SS is '00', the input is set to:
+          // 01/01/0001 00:00:00 ???
+          if (SS === '00') {
+            SS = '01'
+          }
+
+          inputTo.value = `${YYYY}-${mm}-${dd}T${HH}:${MM}:${SS}`
+
+          // form.submit() does not trigger the submit event
+          // and we want HTMX to catch it
+          form.dispatchEvent(new Event('submit'))
+        },
+        autoRefreshInterval,
+      )
+    }
+  }
+
+  // make sure the setup is done after the htmx:load is fully processed
+  setTimeout(setupAutoRefresh, 0)
+  autoRefreshSelector.addEventListener('change', setupAutoRefresh)
+})

web/static/js/flowg.streams.chart.js

@@ -0,0 +1,39 @@
+document.addEventListener('htmx:beforeSwap', () => {
+  if (window.chart !== undefined) {
+    window.chart.destroy()
+    window.chart = undefined
+  }
+})
+
+document.addEventListener('htmx:load', () => {
+  const histogramElt  = document.getElementById('data_stream_histogram')
+  const histogramData = JSON.parse(histogramElt.dataset.timeserie)
+
+  if (window.chart !== undefined) {
+    window.chart.destroy()
+  }
+
+  window.chart = new ApexCharts(histogramElt, {
+    series: [
+      {
+        name: 'Logs',
+        data: histogramData,
+      },
+    ],
+    chart: {
+      type: 'bar',
+      width: '100%',
+      height: 150,
+      animations: {
+        enabled: false,
+      }
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    xaxis: {
+      type: 'datetime',
+    },
+  })
+  window.chart.render()
+})

web/static/js/flowg.streams.logtable.js

@@ -0,0 +1,17 @@
+document.addEventListener('htmx:beforeSwap', () => {
+  if (window.logtable !== undefined) {
+    window.logtable.stop()
+    window.logtable = undefined
+  }
+})
+
+document.addEventListener('htmx:load', () => {
+  window.logtable = new VirtualScroller(
+    document.getElementById('stream_logs_content'),
+    document.getElementById('stream_logs_data').content.querySelectorAll('tr'),
+    (item) => item.cloneNode(true),
+    {
+      getScrollableContainer: () => document.getElementById('stream_logs'),
+    },
+  )
+})