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