{{ upper .method }}
@@ -403,12 +404,32 @@
Try this endpoint
{{ range $server := $servers }} {{ $serverUrl := index $server "url" | default "" }} {{ $serverDescription := index $server "description" | default "Layer5 Cloud URL" }} -
+
{{ end }}
+
+ {{ if eq .method "get" }}
+ {{ $serverDescription }}
{{ printf "%s%s" $serverUrl $operationPath }}
+
+ {{ end }}
{{ if gt (len $parameters) 0 }}
diff --git a/static/js/rest-api-executor.js b/static/js/rest-api-executor.js
new file mode 100644
index 0000000000..822ffd6671
--- /dev/null
+++ b/static/js/rest-api-executor.js
@@ -0,0 +1,519 @@
+/**
+ * REST API Executor - Handles interactive API requests from documentation
+ * Supports GET requests with parameter substitution and response formatting
+ */
+
+class RESTAPIExecutor {
+ constructor() {
+ this.activeRequest = null;
+ this.requestCache = new Map();
+ this.init();
+ }
+
+ /**
+ * Initialize the executor by setting up event listeners
+ */
+ init() {
+ this.setupExecuteButtons();
+ this.setupParameterInputs();
+ }
+
+ /**
+ * Set up click handlers for execute buttons
+ */
+ setupExecuteButtons() {
+ const buttons = document.querySelectorAll('[data-execute-request]');
+ buttons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ const operationPanel = button.closest('[data-operation-panel]');
+ if (operationPanel) {
+ this.executeRequest(operationPanel);
+ }
+ });
+ });
+ }
+
+ /**
+ * Set up input listeners for real-time parameter updates using event delegation
+ */
+ setupParameterInputs() {
+ document.addEventListener('change', (e) => {
+ const panel = e.target.closest('[data-operation-panel]');
+ if (panel) {
+ if (e.target.matches('[data-parameter-input]') || e.target.matches('[data-server-select]')) {
+ this.updatePreviewUrl(panel);
+ }
+ }
+ });
+ document.addEventListener('input', (e) => {
+ if (e.target.matches('[data-parameter-input]')) {
+ const panel = e.target.closest('[data-operation-panel]');
+ if (panel) this.updatePreviewUrl(panel);
+ }
+ });
+ }
+
+ /**
+ * Execute an API request for the given operation panel
+ * @param {Element} operationPanel - The operation panel element
+ */
+ async executeRequest(operationPanel) {
+ if (!operationPanel) {
+ console.error('Operation panel not found');
+ return;
+ }
+
+ try {
+ // Get operation metadata from data attributes
+ const operation = this.getOperationMetadata(operationPanel);
+
+ // Validate required parameters before executing
+ const validationError = this.validateRequiredParameters(operationPanel);
+ if (validationError) {
+ this.displayError(operationPanel, validationError);
+ return;
+ }
+
+ // Build the complete URL with parameters
+ const url = this.buildRequestUrl(operationPanel, operation);
+
+ // Extract headers (including auth token if provided)
+ const headers = this.buildRequestHeaders(operationPanel);
+
+ // Show loading state
+ this.setLoadingState(operationPanel, true);
+
+ // Abort previous request if any
+ if (this.activeRequest) {
+ this.activeRequest.abort();
+ }
+
+ // Execute the request
+ const controller = new AbortController();
+ this.activeRequest = controller;
+
+ const startTime = performance.now();
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: headers,
+ signal: controller.signal,
+ mode: 'cors',
+ });
+ const endTime = performance.now();
+ const duration = endTime - startTime;
+
+ // Parse response
+ const contentType = response.headers.get('content-type');
+ let responseData;
+ let responseText;
+
+ if (contentType && contentType.includes('application/json')) {
+ responseText = await response.text();
+ try {
+ responseData = JSON.parse(responseText);
+ } catch (e) {
+ responseData = null;
+ }
+ } else {
+ responseText = await response.text();
+ responseData = null;
+ }
+
+ // Display response
+ this.displayResponse(operationPanel, {
+ status: response.status,
+ statusText: response.statusText,
+ headers: response.headers,
+ data: responseData,
+ text: responseText,
+ duration: duration,
+ url: url,
+ success: response.ok,
+ });
+
+ this.setLoadingState(operationPanel, false);
+ } catch (error) {
+ if (error.name === 'AbortError') {
+ this.setLoadingState(operationPanel, false);
+ return;
+ }
+
+ try {
+ this.displayError(operationPanel, error);
+ } catch (displayError) {
+ console.error('Error displaying error:', displayError);
+ }
+ this.setLoadingState(operationPanel, false);
+ }
+ }
+
+ /**
+ * Validate that all required parameters are provided
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {Error|null} Error object if validation fails, null otherwise
+ */
+ validateRequiredParameters(operationPanel) {
+ const requiredInputs = operationPanel.querySelectorAll('[data-parameter-input][required]');
+ const missingParams = [];
+
+ requiredInputs.forEach(input => {
+ if (!input.value || input.value.trim() === '') {
+ const paramName = input.dataset.parameterName;
+ const paramLocation = input.dataset.parameterLocation;
+ missingParams.push(`${paramName} (${paramLocation})`);
+ }
+ });
+
+ if (missingParams.length > 0) {
+ const error = new Error(`Required parameters are missing: ${missingParams.join(', ')}`);
+ error.validationError = true;
+ return error;
+ }
+
+ return null;
+ }
+
+ /**
+ * Get operation metadata from the panel
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {Object} Operation metadata
+ */
+ getOperationMetadata(operationPanel) {
+ return {
+ id: operationPanel.dataset.operationId,
+ pathId: operationPanel.dataset.pathId,
+ method: this.extractMethod(operationPanel),
+ path: this.extractPath(operationPanel),
+ servers: this.extractServers(operationPanel),
+ };
+ }
+
+ /**
+ * Extract HTTP method from panel
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {string} HTTP method
+ */
+ extractMethod(operationPanel) {
+ return operationPanel.dataset.operationMethod || 'get';
+ }
+
+ /**
+ * Extract path from panel
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {string} API path
+ */
+ extractPath(operationPanel) {
+ const pathElement = operationPanel.querySelector('.rest-api-operation__path');
+ return pathElement ? pathElement.textContent.trim() : '';
+ }
+
+ /**
+ * Extract available servers from panel
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {Array} Server URLs from the server selector dropdown
+ */
+ extractServers(operationPanel) {
+ const serverSelect = operationPanel.querySelector('[data-server-select]');
+ if (!serverSelect) return ['https://cloud.layer5.io'];
+
+ const servers = [];
+ const options = serverSelect.querySelectorAll('option');
+ options.forEach(option => {
+ const url = option.value;
+ if (url && !servers.includes(url)) {
+ servers.push(url);
+ }
+ });
+
+ return servers.length > 0 ? servers : ['https://cloud.layer5.io'];
+ }
+
+ /**
+ * Build the complete request URL with parameters
+ * @param {Element} operationPanel - The operation panel element
+ * @param {Object} operation - Operation metadata
+ * @returns {string} Complete URL
+ */
+ buildRequestUrl(operationPanel, operation) {
+ let path = operation.path;
+ let baseUrl = this.getSelectedServer(operationPanel) || operation.servers[0];
+
+ // Replace path parameters
+ const pathParams = this.getParameterValues(operationPanel, 'path');
+ Object.entries(pathParams).forEach(([name, value]) => {
+ path = path.replace(`{${name}}`, encodeURIComponent(value));
+ });
+
+ // Build query string
+ const queryParams = this.getParameterValues(operationPanel, 'query');
+ const queryString = this.buildQueryString(queryParams);
+
+ return `${baseUrl}${path}${queryString}`;
+ }
+
+ /**
+ * Build query string from parameters
+ * @param {Object} params - Query parameters
+ * @returns {string} Query string
+ */
+ buildQueryString(params) {
+ const entries = Object.entries(params)
+ .filter(([, value]) => value !== null && value !== '')
+ .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
+
+ return entries.length > 0 ? `?${entries.join('&')}` : '';
+ }
+
+ /**
+ * Get parameter values from inputs
+ * @param {Element} operationPanel - The operation panel element
+ * @param {string} location - Parameter location (path, query, or header)
+ * @returns {Object} Parameter values
+ */
+ getParameterValues(operationPanel, location) {
+ const params = {};
+ const inputs = operationPanel.querySelectorAll(
+ `[data-parameter-input][data-parameter-location="${location}"]`
+ );
+
+ inputs.forEach(input => {
+ const name = input.dataset.parameterName;
+ if (name) {
+ params[name] = input.value;
+ }
+ });
+
+ return params;
+ }
+
+ /**
+ * Get the selected server URL
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {string|null} Selected server URL
+ */
+ getSelectedServer(operationPanel) {
+ const select = operationPanel.querySelector('[data-server-select]');
+ return select ? select.value : null;
+ }
+
+ /**
+ * Build request headers
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {Object} Headers object
+ */
+ buildRequestHeaders(operationPanel) {
+ const headers = {
+ 'Accept': 'application/json',
+ };
+
+ // Add custom headers if provided
+ const headerInputs = this.getParameterValues(operationPanel, 'header');
+ Object.assign(headers, headerInputs);
+
+ // Add authorization token if provided
+ const authInput = operationPanel.querySelector('[data-auth-token-input]');
+ if (authInput && authInput.value) {
+ headers['Authorization'] = `Bearer ${authInput.value}`;
+ }
+
+ return headers;
+ }
+
+ /**
+ * Update the preview URL when parameters change
+ * @param {Element} operationPanel - Optional specific panel to update. If not provided, updates all panels.
+ */
+ updatePreviewUrl(operationPanel) {
+ const panels = operationPanel ? [operationPanel] : document.querySelectorAll('[data-operation-panel]');
+ panels.forEach(panel => {
+ const preview = panel.querySelector('[data-url-preview]');
+ if (preview) {
+ const operation = this.getOperationMetadata(panel);
+ const url = this.buildRequestUrl(panel, operation);
+ preview.textContent = url;
+ }
+ });
+ }
+
+ /**
+ * Display API response in the UI
+ * @param {Element} operationPanel - The operation panel element
+ * @param {Object} response - Response data
+ */
+ displayResponse(operationPanel, response) {
+ try {
+ let responseSection = operationPanel.querySelector('.rest-api-response-display');
+
+ if (!responseSection) {
+ responseSection = this.createResponseSection(operationPanel);
+ }
+
+ // Update status
+ const statusElement = responseSection.querySelector('[data-response-status]');
+ if (statusElement) {
+ statusElement.textContent = `${response.status} ${response.statusText}`;
+ statusElement.className = `rest-api-response-status ${response.success ? 'success' : 'error'}`;
+ }
+
+ // Update duration
+ const durationElement = responseSection.querySelector('[data-response-duration]');
+ if (durationElement) {
+ durationElement.textContent = `${response.duration.toFixed(0)}ms`;
+ }
+
+ // Update body
+ const bodyElement = responseSection.querySelector('[data-response-body]');
+ if (bodyElement) {
+ if (response.data) {
+ bodyElement.textContent = JSON.stringify(response.data, null, 2);
+ bodyElement.classList.add('language-json');
+ } else if (response.text) {
+ bodyElement.textContent = response.text;
+ } else {
+ bodyElement.textContent = '(empty response)';
+ }
+
+ // Re-highlight if using a syntax highlighter
+ if (window.hljs) {
+ window.hljs.highlightElement(bodyElement);
+ }
+ }
+
+ responseSection.style.display = 'block';
+ } catch (err) {
+ console.error('Error displaying response:', err);
+ }
+ }
+
+ /**
+ * Create the response display section
+ * @param {Element} operationPanel - The operation panel element
+ * @returns {Element} Response section
+ */
+ createResponseSection(operationPanel) {
+ try {
+ const section = document.createElement('section');
+ section.className = 'rest-api-response-display';
+ section.innerHTML = `
+ Execute directly
+ + {{ partial "rest-apis/server-selector.html" (dict "servers" $servers "operationId" $operationId) }} + + {{ partial "rest-apis/url-preview.html" (dict "operationId" $operationId "path" $operationPath "servers" $servers) }} + + {{ if $authSummary }} + {{ partial "rest-apis/auth-input.html" (dict "operationId" $operationId "requiresAuth" true) }} + {{ end }} + + {{ if gt (len $parameters) 0 }} + {{ partial "rest-apis/parameter-inputs.html" (dict "operationId" $operationId "parameters" $parameters "schemas" $schemas) }} + {{ end }} + + {{ partial "rest-apis/execute-button.html" (dict "operationId" $operationId "method" .method "path" $operationPath) }} +
+
+ Response
+ +
+
+
+ Error
+${this.escapeHtml(errorMessage)}
+ ${detailedMessage ? `
+
` : ''}
+ `;
+
+ // Replace or create response section
+ let responseSection = operationPanel.querySelector('.rest-api-response-display');
+ if (responseSection) {
+ responseSection.replaceWith(errorSection);
+ } else {
+ const requestSection = operationPanel.querySelector('.rest-api-section--try');
+ if (requestSection) {
+ requestSection.after(errorSection);
+ } else {
+ operationPanel.appendChild(errorSection);
+ }
+ }
+
+ errorSection.classList.add('rest-api-error-display--active');
+ }
+
+ /**
+ * Get detailed error information
+ * @param {Error} error - The error object
+ * @returns {string} Detailed error message
+ */
+ getDetailedError(error) {
+ if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
+ return 'CORS Error: The API server may not allow requests from this domain. Try using a CORS proxy or configuring CORS headers on the API server.';
+ }
+
+ if (error.response && error.response.statusText) {
+ return `${error.response.status} ${error.response.statusText}`;
+ }
+
+ return error.stack || error.message;
+ }
+
+ /**
+ * Set loading state
+ * @param {Element} operationPanel - The operation panel element
+ * @param {boolean} isLoading - Whether loading
+ */
+ setLoadingState(operationPanel, isLoading) {
+ const button = operationPanel.querySelector('[data-execute-request]');
+ if (button) {
+ button.disabled = isLoading;
+ button.classList.toggle('is-loading', isLoading);
+ button.textContent = isLoading ? 'Executing...' : 'Execute Request';
+ }
+ }
+
+ /**
+ * Escape HTML to prevent XSS
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+ escapeHtml(text) {
+ const map = {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": ''',
+ };
+ return text.replace(/[&<>"']/g, m => map[m]);
+ }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => {
+ window.restAPIExecutor = new RESTAPIExecutor();
+ });
+} else {
+ window.restAPIExecutor = new RESTAPIExecutor();
+}
Details
+${this.escapeHtml(detailedMessage)}
+