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);
|
return api.get(url);
|
||||||
},
|
},
|
||||||
setSettings: (settings) =>
|
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 = {
|
export const authApi = {
|
||||||
|
|||||||
@@ -195,6 +195,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cancel-btn,
|
.cancel-btn,
|
||||||
|
.test-btn,
|
||||||
.submit-btn {
|
.submit-btn {
|
||||||
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -218,6 +219,16 @@
|
|||||||
background: var(--surface-hover);
|
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 {
|
.submit-btn {
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
|
|||||||
@@ -116,6 +116,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
<button @click="showWebhookDialog = false" class="cancel-btn">Cancel</button>
|
<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>
|
<button @click="saveWebhookSettings" class="submit-btn">Save</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -126,6 +127,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { systemApi } from '../api/index.js';
|
import { systemApi } from '../api/index.js';
|
||||||
|
import { showNotification } from '../utils/functions.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Settings',
|
name: 'Settings',
|
||||||
@@ -211,12 +213,49 @@ export default {
|
|||||||
const result = await systemApi.setSettings(payload);
|
const result = await systemApi.setSettings(payload);
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
showWebhookDialog.value = false;
|
showWebhookDialog.value = false;
|
||||||
alert('WebHook settings saved successfully');
|
showNotification('WebHook settings saved successfully', 'success');
|
||||||
} else {
|
} else {
|
||||||
alert(result.message || 'Failed to save WebHook settings');
|
showNotification(result.message || 'Failed to save WebHook settings', 'error');
|
||||||
}
|
}
|
||||||
} catch (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,
|
webhookSettings,
|
||||||
isSaving,
|
isSaving,
|
||||||
showWebhookDialog,
|
showWebhookDialog,
|
||||||
|
WebhookTestBtn,
|
||||||
saveSettings,
|
saveSettings,
|
||||||
saveWebhookSettings
|
saveWebhookSettings
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user