iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: frontend optimization, refactoring

Browse Source
This commit is contained in:
0x1d
2025-08-28 20:46:53 +02:00
parent 9486594199
commit c15654ef5a
4 changed files with 179 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
public/components.js
View File

@@ -207,7 +207,7 @@ class ClusterMembersComponent extends Component {
if (isLoading) {
console.log('ClusterMembersComponent: Showing loading state');
this.showLoadingState();
this.renderLoading(`\n <div class="loading">\n <div>Loading cluster members...</div>\n </div>\n `);
// Set up a loading completion check
this.checkLoadingCompletion();
@@ -402,7 +402,7 @@ class ClusterMembersComponent extends Component {
// Show loading state
showLoadingState() {
console.log('ClusterMembersComponent: showLoadingState() called');
this.setHTML('', `
this.renderLoading(`
<div class="loading">
<div>Loading cluster members...</div>
</div>
@@ -412,18 +412,13 @@ class ClusterMembersComponent extends Component {
// Show error state
showErrorState(error) {
console.log('ClusterMembersComponent: showErrorState() called with error:', error);
this.setHTML('', `
<div class="error">
<strong>Error loading cluster members:</strong><br>
${error}
</div>
`);
this.renderError(`Error loading cluster members: ${error}`);
}
// Show empty state
showEmptyState() {
console.log('ClusterMembersComponent: showEmptyState() called');
this.setHTML('', `
this.renderEmpty(`
<div class="empty-state">
<div class="empty-state-icon">🌐</div>
<div>No cluster members found</div>
@@ -571,16 +566,8 @@ class ClusterMembersComponent extends Component {
const targetTab = button.dataset.tab;
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to clicked button and corresponding content
button.classList.add('active');
const targetContent = container.querySelector(`#${targetTab}-tab`);
if (targetContent) {
targetContent.classList.add('active');
}
// Use base helper to set active tab
this.setActiveTab(targetTab, container);
// Store active tab state
const memberCard = container.closest('.member-card');
@@ -772,19 +759,14 @@ class NodeDetailsComponent extends Component {
// Handle loading state update
handleLoadingUpdate(isLoading) {
if (isLoading) {
this.setHTML('', '<div class="loading-details">Loading detailed information...</div>');
this.renderLoading('<div class="loading-details">Loading detailed information...</div>');
}
}
// Handle error state update
handleErrorUpdate(error) {
if (error) {
this.setHTML('', `
<div class="error">
<strong>Error loading node details:</strong><br>
${error}
</div>
`);
this.renderError(`Error loading node details: ${error}`);
}
}
@@ -811,22 +793,17 @@ class NodeDetailsComponent extends Component {
const capabilities = this.viewModel.get('capabilities');
if (isLoading) {
this.setHTML('', '<div class="loading-details">Loading detailed information...</div>');
this.renderLoading('<div class="loading-details">Loading detailed information...</div>');
return;
}
if (error) {
this.setHTML('', `
<div class="error">
<strong>Error loading node details:</strong><br>
${error}
</div>
`);
this.renderError(`Error loading node details: ${error}`);
return;
}
if (!nodeStatus) {
this.setHTML('', '<div class="loading-details">No node status available</div>');
this.renderEmpty('<div class="loading-details">No node status available</div>');
return;
}
@@ -1036,7 +1013,14 @@ class NodeDetailsComponent extends Component {
}
renderTasksTab(tasks) {
const summary = this.viewModel.get('tasksSummary');
if (tasks && tasks.length > 0) {
const summaryHTML = summary ? `
<div class="tasks-summary">
<span>Total: ${summary.totalTasks ?? tasks.length}</span>
<span style="margin-left: 0.75rem;">Active: ${summary.activeTasks ?? tasks.filter(t => t.running).length}</span>
</div>
` : '';
const tasksHTML = tasks.map(task => `
<div class="task-item">
<div class="task-header">
@@ -1053,14 +1037,17 @@ class NodeDetailsComponent extends Component {
`).join('');
return `
${summaryHTML}
${tasksHTML}
`;
} else {
const total = summary?.totalTasks ?? 0;
const active = summary?.activeTasks ?? 0;
return `
<div class="no-tasks">
<div>📋 No active tasks found</div>
<div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">
This node has no running tasks
${total > 0 ? `Total tasks: ${total}, active: ${active}` : 'This node has no running tasks'}
</div>
</div>
`;
@@ -1096,7 +1083,7 @@ class NodeDetailsComponent extends Component {
console.log('NodeDetailsComponent: Tab clicked:', targetTab);
// Update tab UI locally, don't store in view model
this.updateActiveTab(targetTab);
this.setActiveTab(targetTab);
});
});
@@ -1110,20 +1097,7 @@ class NodeDetailsComponent extends Component {
// Update active tab without full re-render
updateActiveTab(newTab, previousTab = null) {
const tabButtons = this.findAllElements('.tab-button');
const tabContents = this.findAllElements('.tab-content');
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to new active tab
const activeButton = this.findElement(`[data-tab="${newTab}"]`);
const activeContent = this.findElement(`#${newTab}-tab`);
if (activeButton) activeButton.classList.add('active');
if (activeContent) activeContent.classList.add('active');
this.setActiveTab(newTab);
console.log(`NodeDetailsComponent: Active tab updated to '${newTab}'`);
}