Skip to content

Commit

Permalink
fix: cpu value is now a percentage (#264)
Browse files Browse the repository at this point in the history 
Signed-off-by: Brian Lee <bnlee419@gmail.com>
  • Loading branch information
@JaeBrian
JaeBrian authored Nov 8, 2024
1 parent 0397136 commit 4d50eff
Showing 1 changed file with 113 additions and 50 deletions.
163 changes: 113 additions & 50 deletions internal/api/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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',
},
Expand Down Expand Up @@ -231,6 +282,7 @@
) {
const options = {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 700,
},
Expand All @@ -252,6 +304,7 @@
display: true,
text: title,
color: 'white',
padding: 20,
},
legend: {
display: useLegend,
Expand All @@ -273,18 +326,33 @@
}

function updateCharts(metrics) {
// Memory chart update
charts.memory.data.datasets[0].data = [
metrics.go_memstats_alloc_bytes,
metrics.go_memstats_sys_bytes,
metrics.go_memstats_gc_sys_bytes,
];
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,
Expand Down Expand Up @@ -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) {
Expand All @@ -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 =
Expand Down

0 comments on commit 4d50eff

Please sign in to comment.