feat: implement server tuning interface for PHP and MariaDB configurations
This commit is contained in:
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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 } }}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user