feat(settings): add webhook test functionality
- Add test button to webhook settings dialog - Implement webhook test API endpoint - Replace alert with notification system - Style test button to match existing UI
This commit is contained in:
@@ -41,7 +41,9 @@ export const systemApi = {
|
||||
return api.get(url);
|
||||
},
|
||||
setSettings: (settings) =>
|
||||
api.post('/system/settings/set', settings)
|
||||
api.post('/system/settings/set', settings),
|
||||
testWebhook: (webhookConfig) =>
|
||||
api.post('/system/webhook/test', webhookConfig)
|
||||
};
|
||||
|
||||
export const authApi = {
|
||||
|
||||
@@ -195,6 +195,7 @@
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.test-btn,
|
||||
.submit-btn {
|
||||
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
flex: 1;
|
||||
@@ -218,6 +219,16 @@
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-color);
|
||||
border: 3px solid var(--border-color);
|
||||
}
|
||||
|
||||
.test-btn:hover {
|
||||
background: var(--surface-hover-hover);
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
|
||||
@@ -116,6 +116,7 @@
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button @click="showWebhookDialog = false" class="cancel-btn">Cancel</button>
|
||||
<button @click="WebhookTestBtn" class="test-btn">Test</button>
|
||||
<button @click="saveWebhookSettings" class="submit-btn">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,6 +127,7 @@
|
||||
<script>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { systemApi } from '../api/index.js';
|
||||
import { showNotification } from '../utils/functions.js';
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
@@ -211,12 +213,49 @@ export default {
|
||||
const result = await systemApi.setSettings(payload);
|
||||
if (result.success) {
|
||||
showWebhookDialog.value = false;
|
||||
alert('WebHook settings saved successfully');
|
||||
showNotification('WebHook settings saved successfully', 'success');
|
||||
} else {
|
||||
alert(result.message || 'Failed to save WebHook settings');
|
||||
showNotification(result.message || 'Failed to save WebHook settings', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to save WebHook settings');
|
||||
showNotification('Failed to save WebHook settings', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const WebhookTestBtn = async () => {
|
||||
try {
|
||||
let testBody = webhookSettings.body || '';
|
||||
testBody = testBody.replace(/\{\{\s*exceptionType\s*\}\}/g, 'Test Process Dead');
|
||||
testBody = testBody.replace(/\{\{\s*serviceName\s*\}\}/g, 'superfrpc_test_test');
|
||||
testBody = testBody.replace(/\{\{\s*exceptionMsg\s*\}\}/g, 'WebHook Test');
|
||||
|
||||
const headers = {};
|
||||
if (webhookSettings.headers) {
|
||||
webhookSettings.headers.split('\n').forEach(line => {
|
||||
const colonIndex = line.indexOf(':');
|
||||
if (colonIndex > 0) {
|
||||
const key = line.substring(0, colonIndex).trim();
|
||||
const value = line.substring(colonIndex + 1).trim();
|
||||
if (key) {
|
||||
headers[key] = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const response = await fetch(webhookSettings.url, {
|
||||
method: webhookSettings.method,
|
||||
headers: headers,
|
||||
body: webhookSettings.method !== 'GET' ? testBody : undefined
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showNotification('WebHook test successful', 'success');
|
||||
} else {
|
||||
showNotification(`WebHook test failed: HTTP ${response.status}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showNotification(`WebHook test failed: ${error.message}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -229,6 +268,7 @@ export default {
|
||||
webhookSettings,
|
||||
isSaving,
|
||||
showWebhookDialog,
|
||||
WebhookTestBtn,
|
||||
saveSettings,
|
||||
saveWebhookSettings
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user