From 4d50effb614e846d50bcd1b78e9cc7b65e8f68b3 Mon Sep 17 00:00:00 2001
From: Jaekook Brian Lee <107831698+JaeBrian@users.noreply.github.com>
Date: Thu, 7 Nov 2024 18:40:19 -0800
Subject: [PATCH] fix: cpu value is now a percentage (#264)

Signed-off-by: Brian Lee <bnlee419@gmail.com>
---
 internal/api/static/index.html | 163 +++++++++++++++++++++++----------
 1 file changed, 113 insertions(+), 50 deletions(-)
diff --git a/internal/api/static/index.html b/internal/api/static/index.html
index 84b264c..0185000 100644
--- a/internal/api/static/index.html
+++ b/internal/api/static/index.html
@@ -38,42 +38,60 @@
   <body
     class="bg-gradient-to-br from-gray-900 to-black text-terminal-text font-mono h-full flex items-center justify-center p-4"
   >
-    <div
-      class="w-full max-w-6xl bg-terminal-bg rounded-lg overflow-hidden terminal-3d"
-    >
-      <div class="bg-terminal-header p-2 flex items-center">
-        <div class="flex space-x-2">
-          <div class="w-3 h-3 rounded-full bg-red-500"></div>
-          <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-          <div class="w-3 h-3 rounded-full bg-green-500"></div>
-        </div>
-        <div class="flex-grow text-center text-sm">Blink Labs Software</div>
+    <div class="w-full max-w-6xl">
+      <div class="text-center text-xl text-white mb-4">
+        tx-submit-api metrics
       </div>
-      <div class="p-6 h-[800px] overflow-y-auto">
-        <div class="text-sm mb-4">
-          <br />
-          Blink Labs Software: tx-submit-api
-        </div>
-        <div
-          id="metrics-container"
-          class="flex items-center flex-wrap font-mono gap-4 whitespace-pre mb-4"
-          hx-get="/metrics"
-          hx-trigger="load, every 1s"
-          hx-swap="innerHTML"
-        >
-          Loading metrics...
+      <div
+        class="w-full max-w-6xl bg-terminal-bg rounded-lg overflow-hidden terminal-3d"
+      >
+        <div class="bg-terminal-header p-2 flex items-center">
+          <div class="flex space-x-2">
+            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          </div>
+          <div class="flex-grow text-center text-sm">Blink Labs Software</div>
         </div>
-        <div class="grid grid-cols-2 gap-8">
-          <div id="memory-chart"><canvas></canvas></div>
-          <div id="process-chart"><canvas></canvas></div>
-          <div id="go-runtime-chart"><canvas></canvas></div>
-          <div id="tx-chart"><canvas></canvas></div>
+        <div class="p-6 h-[800px] overflow-y-auto">
+          <div class="text-sm mb-4">
+            <br />
+            Blink Labs Software: tx-submit-api
+          </div>
+          <div
+            id="metrics-container"
+            class="invisible h-0"
+            hx-get="/api/metrics"
+            hx-trigger="load, every 1s"
+            hx-swap="innerHTML"
+          >
+            Loading metrics...
+          </div>
+          <div class="grid grid-cols-4 gap-8">
+            <div id="memory-chart" class="col-span-2 h-[300px]">
+              <canvas></canvas>
+            </div>
+            <div id="cpu-chart" class="col-span-1 h-[300px]">
+              <canvas></canvas>
+            </div>
+            <div id="fds-chart" class="col-span-1 h-[300px]">
+              <canvas></canvas>
+            </div>
+            <div id="go-runtime-chart" class="col-span-2 h-[300px]">
+              <canvas></canvas>
+            </div>
+            <div id="tx-chart" class="col-span-2 h-[300px]">
+              <canvas></canvas>
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
     <script>
       let charts = {};
+      let lastCpuSeconds = null;
+      let currentCpuSeconds = null;
 
       function initializeCharts() {
         charts.memory = createChart('memory-chart', {
@@ -101,32 +119,65 @@
           options: getCommonOptions('Memory Usage', true),
         });
 
-        charts.process = createChart('process-chart', {
+        charts.cpu = createChart('cpu-chart', {
           type: 'bar',
           data: {
-            labels: ['CPU Seconds', 'Open FDs'],
+            labels: ['CPU Usage %'],
             datasets: [
               {
-                data: [0, 0],
-                backgroundColor: [
-                  'rgba(255, 99, 132, 0.2)',
-                  'rgba(54, 162, 235, 0.2)',
-                ],
-                borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)'],
+                data: [0],
+                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
+                borderColor: ['rgba(255, 99, 132, 1)'],
                 borderWidth: 1,
               },
             ],
           },
           options: {
-            ...getCommonOptions('Process Metrics', false, false),
+            ...getCommonOptions('CPU Usage', false, false),
             scales: {
               y: {
                 beginAtZero: true,
-                max: 15,
+                max: 5,
                 ticks: {
                   stepSize: 1,
                   callback: function (value) {
-                    return value % 3 === 0 ? value : '';
+                    return value + '%';
+                  },
+                  color: 'white',
+                },
+              },
+              x: {
+                ticks: {
+                  color: 'white',
+                },
+              },
+            },
+          },
+        });
+
+        charts.fds = createChart('fds-chart', {
+          type: 'bar',
+          data: {
+            labels: ['Open FDs'],
+            datasets: [
+              {
+                data: [0],
+                backgroundColor: ['rgba(54, 162, 235, 0.2)'],
+                borderColor: ['rgba(54, 162, 235, 1)'],
+                borderWidth: 1,
+              },
+            ],
+          },
+          options: {
+            ...getCommonOptions('File Descriptors', false, false),
+            scales: {
+              y: {
+                beginAtZero: true,
+                max: 15,
+                ticks: {
+                  stepSize: 3,
+                  callback: function (value) {
+                    return value;
                   },
                   color: 'white',
                 },
@@ -231,6 +282,7 @@
       ) {
         const options = {
           responsive: true,
+          maintainAspectRatio: false,
           animation: {
             duration: 700,
           },
@@ -252,6 +304,7 @@
               display: true,
               text: title,
               color: 'white',
+              padding: 20,
             },
             legend: {
               display: useLegend,
@@ -273,6 +326,7 @@
       }
 
       function updateCharts(metrics) {
+        // Memory chart update
         charts.memory.data.datasets[0].data = [
           metrics.go_memstats_alloc_bytes,
           metrics.go_memstats_sys_bytes,
@@ -280,11 +334,25 @@
         ];
         charts.memory.update();
 
-        charts.process.data.datasets[0].data = [
-          metrics.process_cpu_seconds_total || 0,
-          metrics.process_open_fds || 0,
-        ];
-        charts.process.update();
+        const newCpuSeconds = metrics.process_cpu_seconds_total || 0;
+        // console.log('lastcpu', lastCpuSeconds);
+        // console.log('currentcpu', newCpuSeconds);
+
+        let cpuPercentage = 0;
+        if (lastCpuSeconds !== null) {
+          const cpuSecondsUsed = newCpuSeconds - lastCpuSeconds;
+          cpuPercentage = cpuSecondsUsed * 100;
+          // console.log('CPU Seconds Used:', cpuSecondsUsed);
+          // console.log('CPU Percentage:', cpuPercentage);
+        }
+
+        lastCpuSeconds = newCpuSeconds;
+
+        charts.cpu.data.datasets[0].data = [cpuPercentage];
+        charts.cpu.update();
+
+        charts.fds.data.datasets[0].data = [metrics.process_open_fds || 0];
+        charts.fds.update();
 
         charts.goRuntime.data.datasets[0].data = [
           metrics.go_goroutines,
@@ -359,7 +427,7 @@
       htmx.on('htmx:afterRequest', function (evt) {
         if (evt.detail.elt.id === 'metrics-container') {
           if (evt.detail.failed) {
-            console.error('Failed to load metrics');
+            console.error('Failed to load metrics:', evt.detail.xhr);
             evt.detail.elt.innerHTML =
               '<p class="text-red-500">Failed to load metrics. Please check your connection.</p>';
           } else if (evt.detail.xhr.status === 200) {
@@ -368,12 +436,7 @@
               const parsedMetrics = parseMetrics(metricsData);
 
               evt.detail.elt.innerHTML = formatMetrics(parsedMetrics);
-
               updateCharts(parsedMetrics);
-
-              console.log(
-                'Metrics updated at: ' + new Date().toLocaleTimeString()
-              );
             } catch (error) {
               console.error('Error parsing metrics data:', error);
               evt.detail.elt.innerHTML =
