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 (
|
||||
<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>
|
||||
)}
|
||||
|
||||
@@ -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 } }}
|
||||
/>
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user