feat: replace all emojis with SVG icons
This commit is contained in:
@@ -236,7 +236,7 @@ class MonitoringViewComponent extends Component {
|
||||
if (error) {
|
||||
container.innerHTML = `
|
||||
<div class="error">
|
||||
<div>❌ Error: ${error}</div>
|
||||
<div>${window.icon('error', { width: 14, height: 14, class: 'icon' })} Error: ${this.escapeHtml(String(error))}</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
@@ -259,7 +259,7 @@ class MonitoringViewComponent extends Component {
|
||||
|
||||
<div class="summary-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🖥️</div>
|
||||
<div class="stat-icon">${window.icon('computer', { width: 18, height: 18 })}</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">Total Nodes</div>
|
||||
<div class="stat-value">${clusterSummary.totalNodes}</div>
|
||||
@@ -267,7 +267,7 @@ class MonitoringViewComponent extends Component {
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">⚡</div>
|
||||
<div class="stat-icon">${window.icon('cpu', { width: 18, height: 18 })}</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">CPU</div>
|
||||
<div class="stat-value">${Math.round(clusterSummary.totalCpu - clusterSummary.availableCpu)}MHz / ${Math.round(clusterSummary.totalCpu)}MHz</div>
|
||||
@@ -281,7 +281,7 @@ class MonitoringViewComponent extends Component {
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🧠</div>
|
||||
<div class="stat-icon">${window.icon('memory', { width: 18, height: 18 })}</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">Memory</div>
|
||||
<div class="stat-value">${this.viewModel.formatResourceValue(clusterSummary.totalMemory - clusterSummary.availableMemory, 'memory')} / ${this.viewModel.formatResourceValue(clusterSummary.totalMemory, 'memory')}</div>
|
||||
@@ -295,7 +295,7 @@ class MonitoringViewComponent extends Component {
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">💾</div>
|
||||
<div class="stat-icon">${window.icon('storage', { width: 18, height: 18 })}</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">Storage</div>
|
||||
<div class="stat-value">${this.viewModel.formatResourceValue(clusterSummary.totalStorage - clusterSummary.availableStorage, 'storage')} / ${this.viewModel.formatResourceValue(clusterSummary.totalStorage, 'storage')}</div>
|
||||
@@ -328,7 +328,7 @@ class MonitoringViewComponent extends Component {
|
||||
if (error) {
|
||||
container.innerHTML = `
|
||||
<div class="error">
|
||||
<div>❌ Error: ${error}</div>
|
||||
<div>${window.icon('error', { width: 14, height: 14, class: 'icon' })} Error: ${this.escapeHtml(String(error))}</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
@@ -357,7 +357,7 @@ class MonitoringViewComponent extends Component {
|
||||
const nodeCount = nodeResources.size;
|
||||
container.innerHTML = `
|
||||
<div class="nodes-monitoring-content">
|
||||
<h3>🖥️ Node Resource Details</h3>
|
||||
<h3>${window.icon('computer', { width: 16, height: 16, class: 'icon', strokeWidth: 2 })} Node Resource Details</h3>
|
||||
<div class="nodes-grid" data-item-count="${nodeCount}">
|
||||
${nodesHtml}
|
||||
</div>
|
||||
@@ -378,7 +378,7 @@ class MonitoringViewComponent extends Component {
|
||||
<div class="node-header">
|
||||
<div class="status-hostname-group">
|
||||
<div class="node-status-indicator status-offline">
|
||||
🔴
|
||||
${window.icon('dotRed', { width: 12, height: 12 })}
|
||||
</div>
|
||||
<div class="node-title">${hostname || ip}</div>
|
||||
</div>
|
||||
@@ -397,12 +397,12 @@ class MonitoringViewComponent extends Component {
|
||||
` : ''}
|
||||
|
||||
<div class="node-error">
|
||||
<div class="error-label">⚠️ Error</div>
|
||||
<div class="error-label">${window.icon('warning', { width: 14, height: 14 })} Error</div>
|
||||
<div class="error-message">${error || 'Monitoring endpoint not available'}</div>
|
||||
</div>
|
||||
${nodeData.lastSeen ? `
|
||||
<div class="node-uptime">
|
||||
<div class="uptime-label">⏱️ Last Seen</div>
|
||||
<div class="uptime-label">${window.icon('timer', { width: 14, height: 14 })} Last Seen</div>
|
||||
<div class="uptime-value">${this.formatLastSeen(nodeData.lastSeen)}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
@@ -457,8 +457,8 @@ class MonitoringViewComponent extends Component {
|
||||
}
|
||||
|
||||
// Determine status indicator based on resource source
|
||||
const statusIcon = resourceSource === 'monitoring' ? '🟢' :
|
||||
resourceSource === 'basic' ? '🟡' : '🔴';
|
||||
const statusIcon = resourceSource === 'monitoring' ? window.icon('dotGreen', { width: 12, height: 12 }) :
|
||||
resourceSource === 'basic' ? window.icon('dotYellow', { width: 12, height: 12 }) : window.icon('dotRed', { width: 12, height: 12 });
|
||||
const statusClass = resourceSource === 'monitoring' ? 'status-online' :
|
||||
resourceSource === 'basic' ? 'status-warning' : 'status-offline';
|
||||
|
||||
@@ -487,27 +487,27 @@ class MonitoringViewComponent extends Component {
|
||||
|
||||
${system.uptime_formatted ? `
|
||||
<div class="node-uptime">
|
||||
<div class="uptime-label">⏱️ Uptime</div>
|
||||
<div class="uptime-label">${window.icon('timer', { width: 14, height: 14 })} Uptime</div>
|
||||
<div class="uptime-value">${system.uptime_formatted}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="node-latency">
|
||||
<div class="latency-label">🐢 Latency</div>
|
||||
<div class="latency-label">${window.icon('latency', { width: 14, height: 14 })} Latency</div>
|
||||
<div class="latency-value">${nodeData.latency ? `${nodeData.latency}ms` : 'N/A'}</div>
|
||||
</div>
|
||||
<div class="latency-divider"></div>
|
||||
|
||||
${(nodeData.basic?.flashChipSize || nodeData.resources?.flashChipSize) ? `
|
||||
<div class="node-flash">
|
||||
<div class="flash-label">💾 Flash</div>
|
||||
<div class="flash-label">${window.icon('storage', { width: 14, height: 14 })} Flash</div>
|
||||
<div class="flash-value">${this.formatFlashSize(nodeData.basic?.flashChipSize || nodeData.resources?.flashChipSize)}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="node-resources">
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">⚡ CPU</div>
|
||||
<div class="resource-label">${window.icon('cpu', { width: 14, height: 14 })} CPU</div>
|
||||
<div class="resource-value">
|
||||
<span class="value-label">Used:</span> ${Math.round(cpuUsed)}MHz / <span class="value-label">Total:</span> ${Math.round(cpuTotal)}MHz
|
||||
</div>
|
||||
@@ -520,7 +520,7 @@ class MonitoringViewComponent extends Component {
|
||||
</div>
|
||||
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">🧠 Memory</div>
|
||||
<div class="resource-label">${window.icon('memory', { width: 14, height: 14 })} Memory</div>
|
||||
<div class="resource-value">
|
||||
<span class="value-label">Used:</span> ${this.viewModel.formatResourceValue(memoryUsed, 'memory')} / <span class="value-label">Total:</span> ${this.viewModel.formatResourceValue(memoryTotal, 'memory')}
|
||||
</div>
|
||||
@@ -533,7 +533,7 @@ class MonitoringViewComponent extends Component {
|
||||
</div>
|
||||
|
||||
<div class="resource-item">
|
||||
<div class="resource-label">💾 Storage</div>
|
||||
<div class="resource-label">${window.icon('storage', { width: 14, height: 14 })} Storage</div>
|
||||
<div class="resource-value">
|
||||
<span class="value-label">Used:</span> ${this.viewModel.formatResourceValue(storageUsed, 'storage')} / <span class="value-label">Total:</span> ${this.viewModel.formatResourceValue(storageTotal, 'storage')}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user