feat: implement server tuning interface for PHP and MariaDB configurations

This commit is contained in:
Ümit Tunç
2026-04-03 17:47:09 +03:00
parent 4ca4f6e124
commit 2c938865e3
4 changed files with 32 additions and 30 deletions
@@ -174,7 +174,7 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
return (
<Box>
<Paper sx={{ p: 3, mb: 3, bgcolor: 'rgba(255, 255, 255, 0.03)', borderRadius: 2 }}>
<Paper sx={{ p: 3, mb: 3, bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)', borderRadius: 'var(--radius-lg)' }}>
<Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between" sx={{ mb: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<DbIcon color="primary" />
@@ -211,20 +211,20 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
{/* Databases Section */}
<Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
<Typography variant="subtitle2" sx={{ color: 'primary.light' }} className="font-black text-md">
<Typography variant="subtitle2" sx={{ color: 'var(--color-primary)' }} className="font-black text-md">
{t('mariadb_manager.databases_title')}
</Typography>
<Button variant="outlined" size="small" startIcon={<AddIcon sx={{ fontSize: 'var(--font-size-base)' }} />} onClick={handleCreateDb} sx={{ height: 28 }} className="text-xs rounded-md">
{t('mariadb_manager.create_db_btn')}
</Button>
</Box>
<TableContainer component={Paper} variant="outlined" sx={{ bgcolor: 'rgba(0,0,0,0.2)', maxHeight: 300, borderRadius: 2 }}>
<TableContainer component={Paper} variant="outlined" sx={{ bgcolor: 'var(--color-bg-medium)', maxHeight: 300, borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-soft)' }}>
<Table stickyHeader size="small">
<TableHead>
<TableRow>
<TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_name')}</TableCell>
<TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_size')}</TableCell>
<TableCell sx={{ bgcolor: '#1a1d21', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
<TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_name')}</TableCell>
<TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">{t('mariadb_manager.db_size')}</TableCell>
<TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
@@ -255,7 +255,7 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
{/* Users Section */}
<Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
<Typography variant="subtitle2" className="font-black text-sm" sx={{ color: 'secondary.light' }}>
<Typography variant="subtitle2" className="font-black text-sm" sx={{ color: 'var(--color-secondary)' }}>
{t('mariadb_manager.users_title')}
</Typography>
<Button variant="outlined" color="secondary" size="small" startIcon={<AddIcon sx={{ fontSize: 'var(--font-size-base)' }} />} onClick={handleCreateUser} sx={{ height: 28 }} className="text-xs rounded-md">
@@ -266,9 +266,9 @@ const MariaDbDatabaseManager: React.FC<MariaDbDatabaseManagerProps> = ({ version
<Table stickyHeader size="small">
<TableHead>
<TableRow>
<TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">{t('mariadb_manager.user_label')}</TableCell>
<TableCell sx={{ bgcolor: '#1a1d21', py: 1 }} className="font-black text-xs">Host</TableCell>
<TableCell sx={{ bgcolor: '#1a1d21', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
<TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">{t('mariadb_manager.user_label')}</TableCell>
<TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1 }} className="font-black text-xs">Host</TableCell>
<TableCell sx={{ bgcolor: 'var(--color-bg-dark)', borderBottom: '1px solid var(--color-border-medium)', py: 1, textAlign: 'right' }} className="font-black text-xs">{t('common.actions')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
@@ -59,13 +59,13 @@ export default function ProjectSidebar({
bgcolor: 'var(--color-bg-sidebar)',
height: '100%'
}}>
<Box sx={{ p: 2, borderBottom: '1px solid rgba(255, 255, 255, 0.05)' }}>
<Box sx={{ p: 2, borderBottom: '1px solid var(--color-border-soft)' }}>
<Box sx={{ display: 'flex', gap: 1, mb: 2, alignItems: 'center' }}>
<Typography variant="h6" className="font-bold text-lg" sx={{ flexGrow: 1 }}>
{t('projects.title')}
</Typography>
<Tooltip title={t('projects.add_new')}>
<IconButton size="small" color="primary" onClick={onAddProject} sx={{ bgcolor: 'rgba(57, 167, 255, 0.1)' }}>
<IconButton size="small" color="primary" onClick={onAddProject} sx={{ bgcolor: 'var(--color-primary-soft)' }}>
<AddIcon fontSize="small" />
</IconButton>
</Tooltip>
@@ -83,20 +83,20 @@ export default function ProjectSidebar({
</InputAdornment>
),
className: 'text-sm',
sx: { bgcolor: 'rgba(0,0,0,0.2)' }
sx: { bgcolor: 'var(--color-bg-medium)' }
}}
/>
</Box>
<Box sx={{ flexGrow: 1, overflowY: 'auto', p: 1 }}>
{filtered.length === 0 ? (
<Box sx={{ p: 4, textAlign: 'center', color: 'rgba(255,255,255,0.2)' }}>
<Box sx={{ p: 4, textAlign: 'center', color: 'var(--color-text-muted)' }}>
<Typography variant="body2">{t('projects.empty')}</Typography>
</Box>
) : (
Object.entries(grouped).sort().map(([version, projs]: [string, any]) => (
<Box key={version} sx={{ mb: 2 }}>
<Typography variant="overline" className="font-black" sx={{ px: 1.5, color: 'primary.main', letterSpacing: 1 }}>
<Typography variant="overline" className="font-black" sx={{ px: 1.5, color: 'var(--color-primary)', letterSpacing: 1 }}>
{version}
</Typography>
<List dense disablePadding>
@@ -115,8 +115,8 @@ export default function ProjectSidebar({
onClick={() => setSelectedProjectId(p.id)}
sx={{
mb: 0.5,
border: selectedProjectId === p.id ? '1px solid rgba(57, 167, 255, 0.3)' : '1px solid transparent',
'&.Mui-selected': { bgcolor: 'rgba(57, 167, 255, 0.08)' }
border: selectedProjectId === p.id ? '1px solid var(--color-primary)' : '1px solid transparent',
'&.Mui-selected': { bgcolor: 'var(--color-primary-soft)' }
}}
className="rounded-md"
>
@@ -126,8 +126,8 @@ export default function ProjectSidebar({
width: 8,
height: 8,
borderRadius: '50%',
bgcolor: isRunning ? 'success.main' : 'error.main',
boxShadow: isRunning ? '0 0 8px rgba(76, 175, 80, 0.5)' : 'none'
bgcolor: isRunning ? 'var(--color-success)' : 'var(--color-error)',
boxShadow: isRunning ? '0 0 8px var(--color-success-soft)' : 'none'
}} />
<Typography variant="body2" noWrap className="font-semibold" sx={{ flexGrow: 1 }}>
{p.name}
@@ -138,7 +138,7 @@ export default function ProjectSidebar({
{(p.serverType || '').toUpperCase()} {p.host}
</Typography>
{isRunning && (
<Typography variant="caption" className="text-sm font-bold" sx={{ color: 'primary.light' }}>
<Typography variant="caption" className="text-sm font-bold" sx={{ color: 'var(--color-primary)' }}>
{Math.round((serverStats?.cpu || 0) + (phpStats?.cpu || 0))}% CPU
</Typography>
)}
+10 -10
View File
@@ -258,10 +258,10 @@ export default function ServerTuning() {
return (
<Box>
<Box sx={{ mb: 4 }}>
<Typography variant="h4" color="primary.light" className="font-black text-3xl" sx={{ mb: 1 }}>
<Typography variant="h4" sx={{ color: 'var(--color-primary)', mb: 1 }} className="font-black text-3xl">
{t('tuning.title')}
</Typography>
<Typography variant="body1" className="text-secondary">
<Typography variant="body1" sx={{ color: 'var(--color-text-secondary)' }}>
{t('tuning.desc')}
</Typography>
</Box>
@@ -271,8 +271,8 @@ export default function ServerTuning() {
<Grid item xs={12} md={6}>
<Paper sx={{ p: 3, height: '100%', bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-xl">
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3, gap: 2 }}>
<Box sx={{ p: 1.5, borderRadius: 2, bgcolor: 'primary.main', display: 'flex' }}>
<PhpIcon className="text-white" />
<Box sx={{ p: 1.5, borderRadius: 'var(--radius-md)', bgcolor: 'var(--color-primary)', display: 'flex' }}>
<PhpIcon sx={{ color: 'white' }} />
</Box>
<Typography variant="h6" className="font-bold">PHP Tuning</Typography>
<Chip label={phpVersions.length} size="small" variant="outlined" />
@@ -302,8 +302,8 @@ export default function ServerTuning() {
<Grid item xs={12} md={6}>
<Paper sx={{ p: 3, height: '100%', bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-xl">
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3, gap: 2 }}>
<Box sx={{ p: 1.5, borderRadius: 2, bgcolor: 'secondary.main', display: 'flex' }}>
<DbIcon className="text-white" />
<Box sx={{ p: 1.5, borderRadius: 'var(--radius-md)', bgcolor: 'var(--color-secondary)', display: 'flex' }}>
<DbIcon sx={{ color: 'white' }} />
</Box>
<Typography variant="h6" className="font-bold">MariaDB Tuning</Typography>
<Chip label={mariaDbVersions.length} size="small" variant="outlined" />
@@ -347,13 +347,13 @@ export default function ServerTuning() {
{selectedVersion?.type === 'php' ? `PHP ${selectedVersion?.version}` : `MariaDB ${selectedVersion?.version}`} Tuning
</Typography>
</Box>
<IconButton onClick={() => setIsModalOpen(false)} className="text-secondary">
<IconButton onClick={() => setIsModalOpen(false)} sx={{ color: 'var(--color-text-tertiary)' }}>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ pt: 2 }}>
<Alert severity="info" sx={{ mb: 4, bgcolor: 'rgba(2, 136, 209, 0.1)', color: 'info.light', border: '1px solid rgba(2, 136, 209, 0.2)' }}>
<Alert severity="info" sx={{ mb: 4, bgcolor: 'var(--color-primary-soft)', color: 'var(--color-primary)', border: '1px solid var(--color-border-soft)' }}>
{t('tuning.restart_notice')}
</Alert>
@@ -364,7 +364,7 @@ export default function ServerTuning() {
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="subtitle2" className="font-bold">{p.label}</Typography>
<Tooltip title={t(p.description)}>
<InfoIcon className="text-secondary" sx={{ fontSize: 'var(--font-size-md)', cursor: 'help' }} />
<InfoIcon sx={{ color: 'var(--color-text-tertiary)', fontSize: 'var(--font-size-md)', cursor: 'help' }} />
</Tooltip>
</Box>
<TextField
@@ -372,7 +372,7 @@ export default function ServerTuning() {
value={tuningValues[p.key]}
onChange={(e) => setTuningValues({ ...tuningValues, [p.key]: parseInt(e.target.value) || p.min })}
InputProps={{
endAdornment: <Typography variant="caption" sx={{ ml: 1 }} className="text-secondary">{p.unit}</Typography>
endAdornment: <Typography variant="caption" sx={{ ml: 1, color: 'var(--color-text-tertiary)' }}>{p.unit}</Typography>
} as any}
sx={{ width: 120, '& .MuiOutlinedInput-root': { height: 32 } }}
/>
+2
View File
@@ -7,6 +7,7 @@
"restart": "Yeniden Başlat",
"settings": "Ayarlar",
"tools": "Araçlar",
"open": "Aç",
"close": "Kapat",
"quit": "Çıkış",
"save": "Kaydet",
@@ -75,6 +76,7 @@
},
"projects": {
"title": "Projelerim",
"site_name": "Site Adı",
"add_new": "Yeni Proje Ekle",
"search": "Proje veya host ara...",
"edit": "Proje Düzenle",