truncgit/multiphp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize main application dashboard and service management interface in App.tsx

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-02 00:29:38 +03:00
parent 2e0ba0d35f
commit d4d3d6cbb3
1 changed files with 65 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/App.tsx
+65 -1
View File
@@ -539,6 +539,64 @@ function App(): JSX.Element {
);
};
const ProjectResourceMonitor = ({ serverStats, phpStats, serverType }: { serverStats?: ServiceInfo; phpStats?: ServiceInfo; serverType: string }) => {
const hasServerStat = serverStats?.cpu !== undefined || serverStats?.memory !== undefined;
const hasPhpStat = phpStats?.cpu !== undefined || phpStats?.memory !== undefined;
if (!hasServerStat && !hasPhpStat) return null;
const renderMiniStats = (stats?: ServiceInfo, label: string = 'Service') => {
if (!stats) return null;
const cpu = stats.cpu || 0;
const memory = stats.memory || 0;
const ramMB = Math.round(memory / (1024 * 1024));
const ramPercent = Math.min((ramMB / 1024) * 100, 100);
return (
<Box sx={{ flex: 1 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.4)', fontSize: '0.65rem', fontWeight: 700 }}>{label.toUpperCase()}</Typography>
<Box sx={{ display: 'flex', gap: 1 }}>
<Typography variant="caption" sx={{ color: 'primary.light', fontSize: '0.65rem', fontWeight: 700 }}>{cpu}%</Typography>
<Typography variant="caption" sx={{ color: 'secondary.light', fontSize: '0.65rem', fontWeight: 700 }}>{formatMemory(memory)}</Typography>
</Box>
</Box>
<Box sx={{ display: 'flex', gap: '2px' }}>
<LinearProgress
variant="determinate"
value={cpu}
sx={{
height: 3,
borderRadius: 1,
flex: 1,
bgcolor: 'rgba(255,255,255,0.05)',
'.MuiLinearProgress-bar': { borderRadius: 1, backgroundImage: `linear-gradient(90deg, #33d9b2 ${cpu}%, #ff5252 100%)`, bgcolor: 'transparent' }
}}
/>
<LinearProgress
variant="determinate"
value={ramPercent}
sx={{
height: 3,
borderRadius: 1,
flex: 1,
bgcolor: 'rgba(255,255,255,0.05)',
'.MuiLinearProgress-bar': { borderRadius: 1, bgcolor: 'secondary.main' }
}}
/>
</Box>
</Box>
);
};
return (
<Box sx={{ mt: 1.5, display: 'flex', gap: 2 }}>
{renderMiniStats(serverStats, serverType)}
{renderMiniStats(phpStats, 'PHP')}
</Box>
);
};
const handleAddProject = async () => {
if (!window.api) return
if (newProject.id) {
@@ -1543,7 +1601,7 @@ function App(): JSX.Element {
</Tooltip>
)}
<Tooltip title="Sil">
<IconButton size="small" onClick={() => handleRemoveProject(project.id)} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#ff4444' } }}>
<IconButton size="small" onClick={() => handleRemoveProject(project.id)} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#ff4444' } }}>
<DeleteIcon fontSize="small" />
</IconButton>
</Tooltip>
@@ -1566,6 +1624,12 @@ function App(): JSX.Element {
/>
</Box>
<ProjectResourceMonitor
serverType={project.serverType === 'apache' ? 'Apache' : 'Nginx'}
serverStats={project.serverType === 'apache' ? status.apache : status.nginx}
phpStats={status[`php:${project.phpVersion}`]}
/>
<Paper variant="outlined" sx={{
p: 1.5,
bgcolor: 'rgba(0,0,0,0.2)',