feat: initialize main application dashboard with service management and project configuration UI

This commit is contained in:
Ümit Tunç
2026-03-30 07:53:02 +03:00
parent 2766b0ed39
commit 7c2ec5aa1a
+61 -10
View File
@@ -137,6 +137,17 @@ function App(): JSX.Element {
const [projectNginxConfig, setProjectNginxConfig] = useState('')
const [selectedProjectHost, setSelectedProjectHost] = useState('')
const parseNginxError = (message: string) => {
const match = message.match(/in (.*):(\d+)/)
if (!match) return null
const filePath = match[1].replace(/\\/g, '/')
const line = parseInt(match[2])
const fileName = filePath.split('/').pop() || ''
const isProjectConfig = filePath.includes('/generated_configs/projects/')
const host = isProjectConfig ? fileName.replace('.conf', '') : null
return { filePath, line, host }
}
const fetchStatus = async () => {
if (window.api && window.api.getServiceStatus) {
const currentStatus = await window.api.getServiceStatus()
@@ -479,14 +490,38 @@ function App(): JSX.Element {
const handleTestNginxConfig = async () => {
if (window.api && window.api.invoke) {
const result = await window.api.invoke('nginx:config:test')
const errorInfo = !result.success ? parseNginxError(result.message) : null
const formattedMessage = result.message
.replace(/\[emerg\]/g, '<span style="color: #ff5252; font-weight: bold;">[emerg]</span>')
.replace(/\[warn\]/g, '<span style="color: #ffb142; font-weight: bold;">[warn]</span>')
.replace(/failed/g, '<span style="color: #ff5252;">failed</span>')
.replace(/successful/g, '<span style="color: #33d9b2;">successful</span>')
Swal.fire({
title: result.success ? 'Başarılı' : 'Hata',
text: result.message,
title: result.success ? 'Başarılı' : 'Yapılandırma Hatası',
html: `
<div class="nginx-error-container">
${formattedMessage}
</div>
${errorInfo?.host ? `
<div style="margin-top: 15px; text-align: center;">
<p style="font-size: 0.9rem; color: #ffb142;">
<b>Sorunlu Proje:</b> ${errorInfo.host} (Satır: ${errorInfo.line})
</p>
</div>
` : ''}
`,
icon: result.success ? 'success' : 'error',
showCancelButton: !result.success && !!errorInfo?.host,
confirmButtonText: !result.success && errorInfo?.host ? 'Düzeltmeye Git' : 'Tamam',
cancelButtonText: 'Kapat',
background: '#1e1e1e',
color: '#fff',
customClass: {
htmlContainer: 'nginx-error-container'
width: '600px'
}).then((alertResult) => {
if (alertResult.isConfirmed && !result.success && errorInfo?.host) {
setIsNginxConfigOpen(false) // Close global if open
handleOpenProjectNginxConfig(errorInfo.host)
}
})
}
@@ -1484,16 +1519,32 @@ function App(): JSX.Element {
// We need to test the global config because this project is part of it
// But we should ideally save the project config first (to the temp or real file)
// For now, testing global config is the most reliable
const result = await window.api.invoke('nginx:config:test')
const result = await window.api.invoke('project:nginx:test', selectedProjectHost, projectNginxConfig)
const errorInfo = !result.success ? parseNginxError(result.message) : null
const formattedMessage = result.message
.replace(/\[emerg\]/g, '<span style="color: #ff5252; font-weight: bold;">[emerg]</span>')
.replace(/\[warn\]/g, '<span style="color: #ffb142; font-weight: bold;">[warn]</span>')
.replace(/failed/g, '<span style="color: #ff5252;">failed</span>')
.replace(/successful/g, '<span style="color: #33d9b2;">successful</span>')
Swal.fire({
title: result.success ? 'Başarılı' : 'Hata',
text: result.message,
title: result.success ? 'Başarılı' : 'Yapılandırma Hatası',
html: `
<div class="nginx-error-container">
${formattedMessage}
</div>
${!result.success && errorInfo ? `
<div style="margin-top: 15px; text-align: center;">
<p style="font-size: 0.9rem; color: #ffb142;">
<b>Hata Satırı:</b> ${errorInfo.line}
</p>
</div>
` : ''}
`,
icon: result.success ? 'success' : 'error',
background: '#1e1e1e',
color: '#fff',
customClass: {
htmlContainer: 'nginx-error-container'
}
width: '600px'
})
}
}}