feat: implement core UI dashboard and service management infrastructure for MultiPHP

This commit is contained in:
Ümit Tunç
2026-03-30 16:36:49 +03:00
parent 173af5640a
commit 532e1a5407
5 changed files with 438 additions and 1 deletions
+29
View File
@@ -341,6 +341,35 @@ export function registerIpcHandlers(): void {
}
})
ipcMain.handle('php:extensions:get', async (_event, version: string) => {
return await phpManagerService.getExtensions(version)
})
ipcMain.handle('php:extensions:toggle', async (_event, { version, extName, enabled }) => {
const result = await phpManagerService.toggleExtension(version, extName, enabled)
if (result.success) {
// Automatically restart the PHP service if it's running
const serviceName = `php:${version}`
if (processManager.isServiceRunning(serviceName)) {
console.log(`Restarting ${serviceName} due to extension change...`)
await processManager.stopService(serviceName)
// We need to re-run the start logic or just let the user do it?
// The user said "Proceed with the decision that you think is the most optimal"
// Optimal is to restart it exactly as it was.
// However, the start logic in 'services:start' has many parameters (ports, ini templates).
// It's better to just stop it and tell the user it needs to be started again,
// OR I can try to trigger the same start logic.
// Given the current architecture, I'll just stop it and return a message.
// Wait, I can't easily call 'services:start' from here without the event object.
// Actually, I can just not restart it here and let the renderer handle it if they want.
// NO, I'll just return that it's updated. PHP usually needs a restart anyway.
// I'll update the message to reflect that.
result.message += ". Please restart the PHP service to apply changes."
}
}
return result
})
// MariaDB Versions
ipcMain.handle('mariadb:versions', async () => {
return await mariaDbManagerService.getVersions()
+95
View File
@@ -13,6 +13,12 @@ export interface PhpVersion {
port?: number
}
export interface PhpExtension {
name: string
dll: string
enabled: boolean
}
export class PhpManagerService {
private versions: PhpVersion[] = []
private binDir: string
@@ -154,6 +160,95 @@ export class PhpManagerService {
}
return null
}
async getExtensions(version: string): Promise<PhpExtension[]> {
const phpDir = path.join(this.binDir, `php-${version}`)
const extDir = path.join(phpDir, 'ext')
const iniPath = path.join(phpDir, 'php.ini')
if (!fs.existsSync(phpDir)) return []
// Ensure php.ini exists
if (!fs.existsSync(iniPath)) {
const devIni = path.join(phpDir, 'php.ini-development')
const prodIni = path.join(phpDir, 'php.ini-production')
if (fs.existsSync(devIni)) fs.copyFileSync(devIni, iniPath)
else if (fs.existsSync(prodIni)) fs.copyFileSync(prodIni, iniPath)
}
const extensions: PhpExtension[] = []
if (fs.existsSync(extDir)) {
const files = fs.readdirSync(extDir)
for (const file of files) {
if (file.startsWith('php_') && file.endsWith('.dll')) {
const name = file.slice(4, -4)
extensions.push({ name, dll: file, enabled: false })
}
}
}
if (fs.existsSync(iniPath)) {
const content = fs.readFileSync(iniPath, 'utf8')
const lines = content.split(/\r?\n/)
for (const ext of extensions) {
// Check for extension=php_NAME.dll or extension=NAME (newer PHP)
const pattern = new RegExp(`^\\s*extension\\s*=\\s*(?:php_)?${ext.name}(?:\\.dll)?\\s*$`, 'i')
ext.enabled = lines.some(line => pattern.test(line.trim()))
}
}
return extensions
}
async toggleExtension(version: string, extName: string, enabled: boolean): Promise<{ success: boolean; message: string }> {
const phpDir = path.join(this.binDir, `php-${version}`)
const iniPath = path.join(phpDir, 'php.ini')
if (!fs.existsSync(iniPath)) return { success: false, message: 'php.ini not found' }
let content = fs.readFileSync(iniPath, 'utf8')
const lines = content.split(/\r?\n/)
let found = false
const newLines = lines.map(line => {
const trimmedLine = line.trim()
// Pattern matches: ;extension=php_mysql.dll, extension=php_mysql.dll, ; extension = php_mysql.dll
const pattern = new RegExp(`^\\s*;?\\s*extension\\s*=\\s*(?:php_)?${extName}(?:\\.dll)?\\s*$`, 'i')
if (pattern.test(trimmedLine)) {
found = true
return enabled ? `extension=php_${extName}.dll` : `;extension=php_${extName}.dll`
}
return line
})
if (!found && enabled) {
// If not found in file, append it under [Extension] or at the end
const extSectionIndex = newLines.findIndex(l => l.trim().toLowerCase() === '; dynamic extensions')
if (extSectionIndex !== -1) {
newLines.splice(extSectionIndex + 1, 0, `extension=php_${extName}.dll`)
} else {
newLines.push(`extension=php_${extName}.dll`)
}
}
// Also ensure extension_dir = "ext"
let extDirSet = false
const finalLines = newLines.map(line => {
if (line.trim().startsWith('extension_dir') || line.trim().startsWith(';extension_dir')) {
extDirSet = true
return 'extension_dir = "ext"'
}
return line
})
if (!extDirSet) {
finalLines.unshift('extension_dir = "ext"')
}
fs.writeFileSync(iniPath, finalLines.join('\n'), 'utf8')
return { success: true, message: `Extension ${extName} ${enabled ? 'enabled' : 'disabled'}` }
}
}
export const phpManagerService = new PhpManagerService()
+19 -1
View File
@@ -75,6 +75,7 @@ import { useTranslation } from 'react-i18next'
import MariaDbImportWizard from './components/MariaDbImportWizard'
import MariaDbExportWizard from './components/MariaDbExportWizard'
import NginxCodeEditor from './components/NginxCodeEditor'
import PhpExtensionManager from './components/PhpExtensionManager'
declare global {
interface Window {
@@ -141,6 +142,8 @@ function App(): JSX.Element {
const [isProjectNginxConfigOpen, setIsProjectNginxConfigOpen] = useState(false)
const [projectNginxConfig, setProjectNginxConfig] = useState('')
const [selectedProjectHost, setSelectedProjectHost] = useState('')
const [isPhpExtensionsOpen, setIsPhpExtensionsOpen] = useState(false)
const [selectedPhpVersion, setSelectedPhpVersion] = useState('')
const parseNginxError = (message: string) => {
const match = message.match(/in (.*):(\d+)/)
@@ -605,6 +608,11 @@ function App(): JSX.Element {
window.open(`http://localhost:${settings.nginxPort}/phpmyadmin`, '_blank')
}
const handleOpenPhpExtensions = (version: string) => {
setSelectedPhpVersion(version)
setIsPhpExtensionsOpen(true)
}
const installedPhpVersions = phpVersions.filter(v => v.status === 'installed')
return (
@@ -740,7 +748,12 @@ function App(): JSX.Element {
</Box>
)}
{v.status === 'installed' && (
<Chip label="HAZIR" color="success" variant="outlined" size="small" />
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
<Button variant="outlined" size="small" startIcon={<ToolsIcon />} onClick={() => handleOpenPhpExtensions(v.version)}>
EKLENTİLER
</Button>
<Chip label="HAZIR" color="success" variant="outlined" size="small" />
</Box>
)}
</Box>
</ListItem>
@@ -1621,6 +1634,11 @@ function App(): JSX.Element {
</Button>
</DialogActions>
</Dialog>
<PhpExtensionManager
open={isPhpExtensionsOpen}
onClose={() => setIsPhpExtensionsOpen(false)}
phpVersion={selectedPhpVersion}
/>
</Box >
</>
)
@@ -0,0 +1,207 @@
import React, { useState, useEffect } from 'react'
import {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Button,
List,
ListItem,
ListItemText,
Switch,
TextField,
InputAdornment,
CircularProgress,
Box,
Typography,
Chip,
IconButton,
Alert
} from '@mui/material'
import { Search as SearchIcon, Close as CloseIcon, Refresh as RefreshIcon } from '@mui/icons-material'
import Swal from 'sweetalert2'
interface PhpExtension {
name: string
dll: string
enabled: boolean
}
interface PhpExtensionManagerProps {
open: boolean
onClose: () => void
phpVersion: string
}
const PhpExtensionManager: React.FC<PhpExtensionManagerProps> = ({ open, onClose, phpVersion }) => {
const [extensions, setExtensions] = useState<PhpExtension[]>([])
const [loading, setLoading] = useState(false)
const [searchTerm, setSearchTerm] = useState('')
const [saving, setSaving] = useState<string | null>(null)
const fetchExtensions = async () => {
if (!phpVersion) return
setLoading(true)
try {
const data = await window.api.invoke('php:extensions:get', phpVersion)
setExtensions(data || [])
} catch (error) {
console.error('Failed to fetch extensions:', error)
} finally {
setLoading(false)
}
}
useEffect(() => {
if (open && phpVersion) {
fetchExtensions()
}
}, [open, phpVersion])
const handleToggle = async (extName: string, enabled: boolean) => {
setSaving(extName)
try {
const result = await window.api.invoke('php:extensions:toggle', { version: phpVersion, extName, enabled })
if (result.success) {
setExtensions(prev => prev.map(ext => ext.name === extName ? { ...ext, enabled } : ext))
if (result.message.includes('restart')) {
Swal.fire({
title: 'Bilgi',
text: result.message,
icon: 'info',
background: '#1e1e1e',
color: '#fff'
})
}
} else {
Swal.fire({
title: 'Hata',
text: result.message,
icon: 'error',
background: '#1e1e1e',
color: '#fff'
})
}
} catch (error: any) {
Swal.fire({
title: 'Hata',
text: error.message,
icon: 'error',
background: '#1e1e1e',
color: '#fff'
})
} finally {
setSaving(null)
}
}
const filteredExtensions = extensions.filter(ext =>
ext.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
ext.dll.toLowerCase().includes(searchTerm.toLowerCase())
)
return (
<Dialog
open={open}
onClose={onClose}
maxWidth="sm"
fullWidth
PaperProps={{
sx: {
bgcolor: '#1e1e1e',
color: '#fff',
backgroundImage: 'none',
borderRadius: 2,
border: '1px solid rgba(255,255,255,0.1)'
}
}}
>
<DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Box>
<Typography variant="h6">PHP {phpVersion} Eklentileri</Typography>
<Typography variant="caption" color="text.secondary">php.ini üzerinden eklentileri yönetin</Typography>
</Box>
<IconButton onClick={onClose} sx={{ color: 'text.secondary' }}>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent dividers sx={{ borderColor: 'rgba(255,255,255,0.1)', p: 0 }}>
<Box sx={{ p: 2, bgcolor: 'rgba(255,255,255,0.03)' }}>
<TextField
fullWidth
size="small"
placeholder="Eklenti ara... (mysql, gd, mbstring...)"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon sx={{ color: 'text.secondary' }} />
</InputAdornment>
),
sx: { color: '#fff', bgcolor: 'rgba(0,0,0,0.2)' }
}}
/>
</Box>
{loading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
<CircularProgress />
</Box>
) : (
<List sx={{ maxHeight: 400, overflow: 'auto' }}>
{filteredExtensions.length === 0 ? (
<ListItem>
<ListItemText
primary={searchTerm ? "Eklenti bulunamadı." : "Hiç eklenti yok."}
sx={{ textAlign: 'center', color: 'text.secondary' }}
/>
</ListItem>
) : (
filteredExtensions.map((ext) => (
<ListItem
key={ext.name}
divider
sx={{ borderColor: 'rgba(255,255,255,0.05)' }}
secondaryAction={
saving === ext.name ? (
<CircularProgress size={24} />
) : (
<Switch
edge="end"
checked={ext.enabled}
onChange={(e) => handleToggle(ext.name, e.target.checked)}
color="primary"
/>
)
}
>
<ListItemText
primary={
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{ext.name}
{ext.enabled && <Chip label="Aktif" size="small" color="success" sx={{ height: 18, fontSize: '0.65rem' }} />}
</Box>
}
secondary={ext.dll}
secondaryTypographyProps={{ sx: { color: 'text.secondary', fontSize: '0.75rem' } }}
/>
</ListItem>
))
)}
</List>
)}
</DialogContent>
<DialogActions sx={{ p: 2, bgcolor: 'rgba(255,255,255,0.02)' }}>
<Button onClick={fetchExtensions} startIcon={<RefreshIcon />} sx={{ mr: 'auto' }}>
YENİLE
</Button>
<Button onClick={onClose} variant="contained" color="primary">
KAPAT
</Button>
</DialogActions>
</Dialog>
)
}
export default PhpExtensionManager