diff --git a/index.js b/index.js
index 53b5e15..6548fc0 100644
--- a/index.js
+++ b/index.js
@@ -394,7 +394,45 @@ app.get('/api/tasks/status', async (req, res) => {
// API endpoint to get system status
app.get('/api/node/status', async (req, res) => {
+ try {
+ if (!sporeClient) {
+ return res.status(503).json({
+ error: 'Service unavailable',
+ message: 'No SPORE nodes discovered yet. Waiting for CLUSTER_DISCOVERY messages...',
+ discoveredNodes: Array.from(discoveredNodes.keys())
+ });
+ }
+
+ const systemStatus = await sporeClient.getSystemStatus();
+ res.json(systemStatus);
+ } catch (error) {
+ console.error('Error fetching system status:', error);
+ res.status(500).json({
+ error: 'Failed to fetch system status',
+ message: error.message
+ });
+ }
+});
+
+// Proxy endpoint to get node capabilities (optionally for a specific node via ?ip=)
+app.get('/api/capabilities', async (req, res) => {
try {
+ const { ip } = req.query;
+
+ if (ip) {
+ try {
+ const nodeClient = new SporeApiClient(`http://${ip}`);
+ const caps = await nodeClient.getCapabilities();
+ return res.json(caps);
+ } catch (innerError) {
+ console.error('Error fetching capabilities from specific node:', innerError);
+ return res.status(500).json({
+ error: 'Failed to fetch capabilities from node',
+ message: innerError.message
+ });
+ }
+ }
+
if (!sporeClient) {
return res.status(503).json({
error: 'Service unavailable',
@@ -402,14 +440,94 @@ app.get('/api/node/status', async (req, res) => {
discoveredNodes: Array.from(discoveredNodes.keys())
});
}
-
- const systemStatus = await sporeClient.getSystemStatus();
- res.json(systemStatus);
+
+ const caps = await sporeClient.getCapabilities();
+ return res.json(caps);
} catch (error) {
- console.error('Error fetching system status:', error);
- res.status(500).json({
- error: 'Failed to fetch system status',
- message: error.message
+ console.error('Error fetching capabilities:', error);
+ return res.status(500).json({
+ error: 'Failed to fetch capabilities',
+ message: error.message
+ });
+ }
+});
+
+// Generic proxy to call a node capability directly
+app.post('/api/proxy-call', async (req, res) => {
+ try {
+ const { ip, method, uri, params } = req.body || {};
+
+ if (!ip || !method || !uri) {
+ return res.status(400).json({
+ error: 'Missing required fields',
+ message: 'Required: ip, method, uri'
+ });
+ }
+
+ // Build target URL
+ let targetPath = uri;
+ let queryParams = new URLSearchParams();
+ let bodyParams = new URLSearchParams();
+
+ if (Array.isArray(params)) {
+ for (const p of params) {
+ const name = p?.name;
+ const value = p?.value ?? '';
+ const location = (p?.location || 'body').toLowerCase();
+
+ if (!name) continue;
+
+ if (location === 'query') {
+ queryParams.append(name, String(value));
+ } else if (location === 'path') {
+ // Replace {name} or :name in path
+ targetPath = targetPath.replace(new RegExp(`[{:]${name}[}]?`, 'g'), encodeURIComponent(String(value)));
+ } else {
+ // Default to body
+ bodyParams.append(name, String(value));
+ }
+ }
+ }
+
+ const queryString = queryParams.toString();
+ const fullUrl = `http://${ip}${targetPath}${queryString ? `?${queryString}` : ''}`;
+
+ // Prepare fetch options
+ const upperMethod = String(method).toUpperCase();
+ const fetchOptions = { method: upperMethod, headers: {} };
+
+ if (upperMethod !== 'GET') {
+ // Default to form-encoded body for generic proxy
+ fetchOptions.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+ fetchOptions.body = bodyParams.toString();
+ }
+
+ // Execute request
+ const response = await fetch(fullUrl, fetchOptions);
+ const respContentType = response.headers.get('content-type') || '';
+
+ let data;
+ if (respContentType.includes('application/json')) {
+ data = await response.json();
+ } else {
+ data = await response.text();
+ }
+
+ if (!response.ok) {
+ return res.status(response.status).json({
+ error: 'Upstream request failed',
+ status: response.status,
+ statusText: response.statusText,
+ data
+ });
+ }
+
+ return res.json({ success: true, data });
+ } catch (error) {
+ console.error('Error in /api/proxy-call:', error);
+ return res.status(500).json({
+ error: 'Proxy call failed',
+ message: error.message
});
}
});
diff --git a/public/api-client.js b/public/api-client.js
index 67a261c..480127d 100644
--- a/public/api-client.js
+++ b/public/api-client.js
@@ -107,6 +107,48 @@ class ApiClient {
}
}
+ async getCapabilities(ip) {
+ try {
+ const url = ip
+ ? `${this.baseUrl}/api/capabilities?ip=${encodeURIComponent(ip)}`
+ : `${this.baseUrl}/api/capabilities`;
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+
+ return await response.json();
+ } catch (error) {
+ throw new Error(`Request failed: ${error.message}`);
+ }
+ }
+
+ async callCapability({ ip, method, uri, params }) {
+ try {
+ const response = await fetch(`${this.baseUrl}/api/proxy-call`, {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ ip, method, uri, params })
+ });
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+ }
+ return await response.json();
+ } catch (error) {
+ throw new Error(`Request failed: ${error.message}`);
+ }
+ }
+
async uploadFirmware(file, nodeIp) {
try {
const formData = new FormData();
diff --git a/public/components.js b/public/components.js
index c7d4411..61b8d00 100644
--- a/public/components.js
+++ b/public/components.js
@@ -751,12 +751,13 @@ class NodeDetailsComponent extends Component {
this.subscribeToProperty('isLoading', this.handleLoadingUpdate.bind(this));
this.subscribeToProperty('error', this.handleErrorUpdate.bind(this));
this.subscribeToProperty('activeTab', this.handleActiveTabUpdate.bind(this));
+ this.subscribeToProperty('capabilities', this.handleCapabilitiesUpdate.bind(this));
}
// Handle node status update with state preservation
handleNodeStatusUpdate(newStatus, previousStatus) {
if (newStatus && !this.viewModel.get('isLoading')) {
- this.renderNodeDetails(newStatus, this.viewModel.get('tasks'));
+ this.renderNodeDetails(newStatus, this.viewModel.get('tasks'), this.viewModel.get('capabilities'));
}
}
@@ -764,7 +765,7 @@ class NodeDetailsComponent extends Component {
handleTasksUpdate(newTasks, previousTasks) {
const nodeStatus = this.viewModel.get('nodeStatus');
if (nodeStatus && !this.viewModel.get('isLoading')) {
- this.renderNodeDetails(nodeStatus, newTasks);
+ this.renderNodeDetails(nodeStatus, newTasks, this.viewModel.get('capabilities'));
}
}
@@ -793,11 +794,21 @@ class NodeDetailsComponent extends Component {
this.updateActiveTab(newTab, previousTab);
}
+ // Handle capabilities update with state preservation
+ handleCapabilitiesUpdate(newCapabilities, previousCapabilities) {
+ const nodeStatus = this.viewModel.get('nodeStatus');
+ const tasks = this.viewModel.get('tasks');
+ if (nodeStatus && !this.viewModel.get('isLoading')) {
+ this.renderNodeDetails(nodeStatus, tasks, newCapabilities);
+ }
+ }
+
render() {
const nodeStatus = this.viewModel.get('nodeStatus');
const tasks = this.viewModel.get('tasks');
const isLoading = this.viewModel.get('isLoading');
const error = this.viewModel.get('error');
+ const capabilities = this.viewModel.get('capabilities');
if (isLoading) {
this.setHTML('', 'Loading detailed information...
');
@@ -819,10 +830,10 @@ class NodeDetailsComponent extends Component {
return;
}
- this.renderNodeDetails(nodeStatus, tasks);
+ this.renderNodeDetails(nodeStatus, tasks, capabilities);
}
- renderNodeDetails(nodeStatus, tasks) {
+ renderNodeDetails(nodeStatus, tasks, capabilities) {
// Always start with 'status' tab, don't restore previous state
const activeTab = 'status';
console.log('NodeDetailsComponent: Rendering with activeTab:', activeTab);
@@ -832,6 +843,7 @@ class NodeDetailsComponent extends Component {
@@ -866,6 +878,10 @@ class NodeDetailsComponent extends Component {
).join('') : 'No API endpoints available
'}
+
+ ${this.renderCapabilitiesTab(capabilities)}
+
+
${this.renderTasksTab(tasks)}
@@ -881,6 +897,120 @@ class NodeDetailsComponent extends Component {
this.setupFirmwareUpload();
}
+ renderCapabilitiesTab(capabilities) {
+ if (!capabilities || !Array.isArray(capabilities.endpoints) || capabilities.endpoints.length === 0) {
+ return `
+
+
🧩 No capabilities reported
+
This node did not return any capabilities
+
${ep.params.map((p, pidx) => `
+
+ `).join('')}
`
+ : 'No parameters
';
+ return `
+
+ `;
+ }).join('');
+
+ // Attach events after render in setupCapabilitiesEvents()
+ setTimeout(() => this.setupCapabilitiesEvents(), 0);
+
+ return `
+ Node Capabilities
+ ${items}
+ `;
+ }
+
+ setupCapabilitiesEvents() {
+ const buttons = this.findAllElements('.cap-call-btn');
+ buttons.forEach(btn => {
+ this.addEventListener(btn, 'click', async (e) => {
+ e.stopPropagation();
+ const method = btn.dataset.method || 'GET';
+ const uri = btn.dataset.uri || '';
+ const formId = btn.dataset.formId;
+ const resultId = btn.dataset.resultId;
+
+ const formEl = this.findElement(`#${formId}`);
+ const resultEl = this.findElement(`#${resultId}`);
+ if (!formEl || !resultEl) return;
+
+ const inputs = Array.from(formEl.querySelectorAll('.param-input'));
+ const params = inputs.map(input => ({
+ name: input.dataset.paramName,
+ location: input.dataset.paramLocation || 'body',
+ type: input.dataset.paramType || 'string',
+ required: input.dataset.paramRequired === '1',
+ value: input.value
+ }));
+
+ // Required validation
+ const missing = params.filter(p => p.required && (!p.value || String(p.value).trim() === ''));
+ if (missing.length > 0) {
+ resultEl.style.display = 'block';
+ resultEl.innerHTML = `
+
+
❌ Missing required fields: ${missing.map(m => this.escapeHtml(m.name)).join(', ')}
+
Calling endpoint...
';
+
+ try {
+ const response = await this.viewModel.callCapability(method, uri, params);
+ const pretty = typeof response?.data === 'object' ? JSON.stringify(response.data, null, 2) : String(response?.data ?? '');
+ resultEl.innerHTML = `
+
+
✅ Success
+
${this.escapeHtml(pretty)}
+
+
❌ Error: ${this.escapeHtml(err.message || 'Request failed')}
+