Skip to content

Commit

Permalink
Dev - Add Host Stats (#22)
Browse files Browse the repository at this point in the history
* Add Host Stats FINALLY

* Update readme
  • Loading branch information
Its4Nik authored Sep 21, 2024
1 parent b399e12 commit 437048a
Showing 4 changed files with 60 additions and 4 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ Check the documentation (WIP) [here](https://outline.itsnik.de/s/dockstat).
- [X] Custom host tags (e.g., "Raspberry", "Cloudserver")
- [ ] Alert System (using Apprise or similar)
- [X] Improved mobile UI
- [ ] Host Stats (CPU cores, Max RAM, RAM used by containers)
- [X] Host Stats (CPU cores, Max RAM, RAM used by containers)
- [X] More themes
- [X] More advanced sub-pages
- [X] Exclude network mode "host" from network stats or other handling
2 changes: 2 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -101,6 +101,8 @@ function App() {
darkModeLogoColor={darkModeLogoColor}
lightModeLogoColor={lightModeLogoColor}
gridSize={gridSize}
apiKey={apiKey}
apihost={apihost}
/>
);
})
9 changes: 6 additions & 3 deletions src/components/HostStats.js
Original file line number Diff line number Diff line change
@@ -2,8 +2,9 @@ import React, { useState, useRef, useEffect } from 'react';
import { FaArrowDown } from "react-icons/fa";

import ContainerStats from './ContainerStats';
import HostUsageStats from './HostUsageStats';

function HostStats({ host, containers, logoSize, darkModeLogoColor, lightModeLogoColor, gridSize }) {
function HostStats({ host, containers, logoSize, darkModeLogoColor, lightModeLogoColor, gridSize , apihost, apiKey}) {
const [isCollapsed, setIsCollapsed] = useState(false);
const [contentHeight, setContentHeight] = useState('auto');
const contentRef = useRef(null);
@@ -44,8 +45,10 @@ function HostStats({ host, containers, logoSize, darkModeLogoColor, lightModeLog
</span>
<h2 className="text-xl font-semibold mb-2 text-primary flex-1">{host} - {containers.length} Containers</h2>
<div className="text-right ml-4">
<h3 className="text-secondary">Ram amount: TODO</h3>
<h3 className="text-secondary">CPU Cores: TODO</h3>
<HostUsageStats
apihost={apihost}
apiKey={apiKey}
/>
</div>
</div>
<div
51 changes: 51 additions & 0 deletions src/components/HostUsageStats.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { useState, useEffect } from 'react';
import { toast } from 'react-toastify';

function HostUsageStats({ apihost, apiKey }) {
const [hostStats, setHostStats] = useState({});

const fetchData = async () => {
try {
const response = await fetch(`${apihost}/hosts`, {
method: 'GET',
headers: {
'Authorization': `${apiKey}`,
},
});

if (!response.ok) throw new Error('Failed to fetch data');

const data = await response.json();
setHostStats(data);
} catch (error) {
console.error('Error fetching data:', error);
toast.error('Failed to fetch data. Please try again later.');
}
};

const calculateCpuPercentage = (cpuUsage, cpuLimit) => {
if (!cpuLimit || cpuLimit === 0) return 'N/A';
return ((cpuUsage / cpuLimit) * 100).toFixed(2);
};

useEffect(() => {
fetchData();
}, [apihost, apiKey]);

return (
<div>
{Object.keys(hostStats).map((host) => (
<div key={host} className="grid grid-cols-2 gap-1">
<h3 className="text-secondary">Available Memory: {(hostStats[host].totalMemory / (1024 ** 3)).toFixed(2)} GB</h3>
<h3 className="text-secondary">Cpu Cores: {hostStats[host].totalCPUs}</h3>
<h3 className="text-secondary">Memory Usage: {hostStats[host].memoryUsage}</h3>
<h3 className="text-secondary">
CPU Usage: {calculateCpuPercentage(parseFloat(hostStats[host].cpuUsage), 100000000000000)}%
</h3>
</div>
))}
</div>
);
}

export default HostUsageStats;

0 comments on commit 437048a

Please sign in to comment.