@trap_stevo/osx
Version:
OSX, the pinnacle of real-time system resource tracking, seamlessly monitors and transmits vital system metrics, transforming complex data into clear, actionable insights. Experience the future of system monitoring with your ultimate ally for comprehensiv
248 lines (226 loc) • 8.79 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OSX ~ Usage</title>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #e0e0e0;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
h1 {
color: #03dac6;
margin-bottom: 20px;
text-transform: uppercase;
}
.info-panel {
width: 90%;
max-width: 1200px;
background: #1c1c1c;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.info-panel div {
margin: 10px;
flex: 1;
min-width: 200px;
text-align: center;
background: #2a2a2a;
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.chart-container {
width: 90%;
max-width: 1200px;
margin-bottom: 40px;
background: #1c1c1c;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
canvas {
width: 100% ;
height: auto ;
}
</style>
</head>
<body>
<h1>OSX Usage Dashboard</h1>
<div class="info-panel">
<div id="uptime">Uptime: N/A</div>
<div id="processes">Processes: N/A</div>
<div id="network">Network: N/A</div>
<div id="cpuTemp">CPU Temp: N/A</div>
<div id="gpuTemp">GPU Temp: N/A</div>
<div id="memoryDetails">Memory: N/A</div>
<div id="diskUsage">Disk Usage: N/A</div>
</div>
<div class="chart-container">
<canvas id="cpuChart"></canvas>
</div>
<div class="chart-container">
<canvas id="memoryChart"></canvas>
</div>
<div class="chart-container">
<canvas id="gpuChart"></canvas>
</div>
<script>
const socket = io('http://localhost:9769');
const fetchResourceData = (resources = [], platform = "windows") => {
console.log("OSX tracking....");
socket.emit('get-OSX-resource-data', { resources, platform });
};
const cpuChartCtx = document.getElementById('cpuChart').getContext('2d');
const memoryChartCtx = document.getElementById('memoryChart').getContext('2d');
const gpuChartCtx = document.getElementById('gpuChart').getContext('2d');
const chartOptions = {
scales: {
x: {
type: 'time',
time: {
unit: 'second'
},
ticks: {
color: '#ffffff'
}
},
y: {
beginAtZero: true,
max: 100,
ticks: {
color: '#ffffff'
}
}
},
plugins: {
legend: {
labels: {
color: '#ffffff'
}
}
},
elements: {
line: {
tension: 0.4
}
},
maintainAspectRatio: false
};
const cpuChart = new Chart(cpuChartCtx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'CPU Usage',
data: [],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
}]
},
options: chartOptions
});
const memoryChart = new Chart(memoryChartCtx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Memory Usage',
data: [],
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1,
fill: false
}]
},
options: chartOptions
});
const gpuChart = new Chart(gpuChartCtx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'GPU Utilization',
data: [],
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false
}]
},
options: chartOptions
});
socket.on('connect', () => {
console.log('Connected to server');
setInterval(() => {
fetchResourceData(['cpu', 'memory', 'disks', 'network', 'wifi', 'gpu', 'os', 'uptime'], "windows");
}, 1000);
});
socket.on('osx-resources', (data) => {
const now = new Date();
if (data.cpu) {
cpuChart.data.labels.push(now);
cpuChart.data.datasets[0].data.push(data.cpu.usage);
}
if (data.memory) {
memoryChart.data.labels.push(now);
memoryChart.data.datasets[0].data.push((data.memory.used / data.memory.total) * 100);
}
if (data.gpu) {
gpuChart.data.labels.push(now);
gpuChart.data.datasets[0].data.push(data.gpu.reduce((acc, gpu) => acc + (gpu.utilizationGpu || 0), 0) / data.gpu.length);
}
if (cpuChart.data.labels.length > 100) {
cpuChart.data.labels.shift();
cpuChart.data.datasets[0].data.shift();
}
if (memoryChart.data.labels.length > 100) {
memoryChart.data.labels.shift();
memoryChart.data.datasets[0].data.shift();
}
if (gpuChart.data.labels.length > 100) {
gpuChart.data.labels.shift();
gpuChart.data.datasets[0].data.shift();
}
cpuChart.update();
memoryChart.update();
gpuChart.update();
const uptimeSeconds = data.uptime || 0;
const uptimeHours = Math.floor(uptimeSeconds / 3600);
const uptimeMinutes = Math.floor((uptimeSeconds % 3600) / 60);
const uptimeSecs = (uptimeSeconds % 60).toFixed(0);
document.getElementById('uptime').innerText = `Uptime: ${uptimeHours}h ${uptimeMinutes}m ${uptimeSecs}s`;
document.getElementById('processes').innerText = `Processes: ${data.processes?.running || 0} running / ${data.processes?.all || 0} total`;
document.getElementById('network').innerText = `Network: ${data.network[0]?.rx_bytes || 0} Rx / ${data.network[0]?.tx_bytes || 0} Tx`;
document.getElementById('cpuTemp').innerText = `CPU Temp: ${data.cpu?.temp || 'N/A'}°C`;
document.getElementById('gpuTemp').innerText = `GPU Temp: ${data.gpu?.[0]?.temperatureGpu || 'N/A'}°C`;
document.getElementById('memoryDetails').innerText = `Memory: ${Math.round(data.memory?.used / (1024 * 1024))} MB used / ${Math.round(data.memory?.total / (1024 * 1024))} MB total`;
document.getElementById('diskUsage').innerText = `Disk Usage: ${Math.round(data.disks?.reduce((acc, disk) => acc + disk.used, 0) / (1024 * 1024 * 1024))} GB used`;
});
socket.on('disconnect', () => {
console.log('Disconnected from server');
});
socket.on('connect_error', (error) => {
console.error('Connection error: ', error);
});
</script>
</body>
</html>