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

feature/terminaling #13

Merged
master merged 2 commits from feature/terminaling into main 2025-09-30 22:16:42 +02:00
Conversation 0 Commits 2 Files Changed 4 +211 -20
4 changed files with 211 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 96e0641819 - Show all commits

10
public/scripts/components/ClusterMembersComponent.js
View File

@@ -518,13 +518,17 @@ class ClusterMembersComponent extends Component {
} }
if (terminalBtn) { if (terminalBtn) {
this.addEventListener(terminalBtn, 'click', (e) => { this.addEventListener(terminalBtn, 'click', async (e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
try { try {
if (window.TerminalPanel) { if (!window.TerminalPanel) return;
this.ensureTerminalContainer(); this.ensureTerminalContainer();
window.TerminalPanel.open(this.terminalPanelContainer, memberIp); const panel = window.TerminalPanel;
const wasMinimized = panel.isMinimized;
panel.open(this.terminalPanelContainer, memberIp);
if (wasMinimized && panel.restore) {
panel.restore();
} }
} catch (err) { } catch (err) {
console.error('Failed to open member terminal:', err); console.error('Failed to open member terminal:', err);

18
public/scripts/components/DrawerComponent.js
View File

@@ -35,7 +35,12 @@ class DrawerComponent {
header.innerHTML = ` header.innerHTML = `
<div class="drawer-title">Node Details</div> <div class="drawer-title">Node Details</div>
<div class="drawer-actions"> <div class="drawer-actions">
<button class="drawer-terminal-btn" title="Open Terminal" aria-label="Open Terminal">Terminal</button> <button class="drawer-terminal-btn" title="Open Terminal" aria-label="Open Terminal">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 17l6-6-6-6"></path>
<path d="M12 19h8"></path>
</svg>
</button>
<button class="drawer-close" aria-label="Close"> <button class="drawer-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/> <path d="M18 6L6 18M6 6l12 12"/>
@@ -66,7 +71,13 @@ class DrawerComponent {
e.stopPropagation(); e.stopPropagation();
try { try {
const nodeIp = this.activeDrawerComponent && this.activeDrawerComponent.viewModel && this.activeDrawerComponent.viewModel.get('nodeIp'); const nodeIp = this.activeDrawerComponent && this.activeDrawerComponent.viewModel && this.activeDrawerComponent.viewModel.get('nodeIp');
window.TerminalPanel && window.TerminalPanel.open(this.terminalPanelContainer, nodeIp); if (!window.TerminalPanel) return;
const panel = window.TerminalPanel;
const wasMinimized = panel.isMinimized;
panel.open(this.terminalPanelContainer, nodeIp);
if (wasMinimized && panel.restore) {
panel.restore();
}
} catch (err) { } catch (err) {
console.error('Failed to open terminal:', err); console.error('Failed to open terminal:', err);
} }
@@ -124,9 +135,6 @@ class DrawerComponent {
if (this.detailsDrawer) this.detailsDrawer.classList.remove('open'); if (this.detailsDrawer) this.detailsDrawer.classList.remove('open');
if (this.detailsDrawerBackdrop) this.detailsDrawerBackdrop.classList.remove('visible'); if (this.detailsDrawerBackdrop) this.detailsDrawerBackdrop.classList.remove('visible');
// Also close terminal panel if open
try { if (window.TerminalPanel) window.TerminalPanel.close(); } catch (_) {}
// Call close callback if provided // Call close callback if provided
if (this.onCloseCallback) { if (this.onCloseCallback) {
this.onCloseCallback(); this.onCloseCallback();

102
public/scripts/components/TerminalPanelComponent.js
View File

@@ -10,17 +10,22 @@
this.connectedIp = null; this.connectedIp = null;
this.isOpen = false; this.isOpen = false;
this.resizeHandler = null; this.resizeHandler = null;
this.isMinimized = false;
this.dockEl = null;
this.dockBtnEl = null;
this.lastNodeIp = null;
} }
open(container, nodeIp) { open(container, nodeIp) {
try { try {
this.container = container; this.container = container;
if (!this.container) return; if (!this.container) return;
if (!this.panelEl) { if (!this.panelEl) {
this._buildPanel(); this._buildPanel();
} }
this.lastNodeIp = nodeIp || this.lastNodeIp;
// Reset any leftover inline positioning so CSS centering applies // Reset any leftover inline positioning so CSS centering applies
if (this.container) { if (this.container) {
this.container.style.right = ''; this.container.style.right = '';
@@ -30,16 +35,31 @@
this.container.style.width = ''; this.container.style.width = '';
} }
// Show panel with animation if (!this.isMinimized) {
if (this.panelEl) {
this.panelEl.classList.remove('minimized');
this.panelEl.classList.remove('visible');
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.panelEl.classList.add('visible'); this.panelEl.classList.add('visible');
this.isOpen = true;
this.inputEl && this.inputEl.focus(); this.inputEl && this.inputEl.focus();
}); });
}
this._hideDock();
} else {
if (this.panelEl) {
this.panelEl.classList.remove('visible');
this.panelEl.classList.add('minimized');
}
this._showDock();
}
this.isOpen = true;
// Connect websocket // Connect websocket
if (nodeIp) { if (nodeIp) {
this._connect(nodeIp); this._connect(nodeIp);
} else if (this.lastNodeIp && !this.socket) {
this._connect(this.lastNodeIp);
} }
} catch (err) { } catch (err) {
console.error('TerminalPanel.open error:', err); console.error('TerminalPanel.open error:', err);
@@ -51,6 +71,9 @@
if (!this.isOpen) return; if (!this.isOpen) return;
this.panelEl && this.panelEl.classList.remove('visible'); this.panelEl && this.panelEl.classList.remove('visible');
this.isOpen = false; this.isOpen = false;
this.isMinimized = false;
if (this.panelEl) this.panelEl.classList.remove('minimized');
this._hideDock();
if (this.socket) { if (this.socket) {
try { this.socket.close(); } catch (_) {} try { this.socket.close(); } catch (_) {}
this.socket = null; this.socket = null;
@@ -70,7 +93,7 @@
<div class="terminal-header"> <div class="terminal-header">
<div class="terminal-title">Terminal</div> <div class="terminal-title">Terminal</div>
<div class="terminal-actions"> <div class="terminal-actions">
<button class="terminal-clear-btn" title="Clear">Clear</button> <button class="terminal-minimize-btn" title="Minimize">_</button>
<button class="terminal-close-btn" title="Close">✕</button> <button class="terminal-close-btn" title="Close">✕</button>
</div> </div>
</div> </div>
@@ -79,6 +102,7 @@
</div> </div>
<div class="terminal-input-row"> <div class="terminal-input-row">
<input type="text" class="terminal-input" placeholder="Type and press Enter to send" /> <input type="text" class="terminal-input" placeholder="Type and press Enter to send" />
<button class="terminal-clear-btn" title="Clear">Clear</button>
<button class="terminal-send-btn">Send</button> <button class="terminal-send-btn">Send</button>
</div> </div>
`; `;
@@ -89,6 +113,7 @@
const sendBtn = this.panelEl.querySelector('.terminal-send-btn'); const sendBtn = this.panelEl.querySelector('.terminal-send-btn');
const closeBtn = this.panelEl.querySelector('.terminal-close-btn'); const closeBtn = this.panelEl.querySelector('.terminal-close-btn');
const clearBtn = this.panelEl.querySelector('.terminal-clear-btn'); const clearBtn = this.panelEl.querySelector('.terminal-clear-btn');
const minimizeBtn = this.panelEl.querySelector('.terminal-minimize-btn');
const sendHandler = () => { const sendHandler = () => {
const value = (this.inputEl && this.inputEl.value) || ''; const value = (this.inputEl && this.inputEl.value) || '';
@@ -106,6 +131,7 @@
}); });
if (closeBtn) closeBtn.addEventListener('click', (e) => { e.stopPropagation(); this.close(); }); if (closeBtn) closeBtn.addEventListener('click', (e) => { e.stopPropagation(); this.close(); });
if (clearBtn) clearBtn.addEventListener('click', (e) => { e.stopPropagation(); this._clear(); }); if (clearBtn) clearBtn.addEventListener('click', (e) => { e.stopPropagation(); this._clear(); });
if (minimizeBtn) minimizeBtn.addEventListener('click', (e) => { e.stopPropagation(); this.minimize(); });
} }
_connect(nodeIp) { _connect(nodeIp) {
@@ -160,6 +186,74 @@
} }
} }
minimize() {
try {
if (!this.panelEl || this.isMinimized) return;
this.panelEl.classList.remove('visible');
this.panelEl.classList.add('minimized');
this.isMinimized = true;
this.isOpen = true;
this._showDock();
} catch (err) {
console.error('TerminalPanel.minimize error:', err);
}
}
restore() {
try {
if (!this.panelEl || !this.isMinimized) return;
this.panelEl.classList.remove('minimized');
requestAnimationFrame(() => {
this.panelEl.classList.add('visible');
this.inputEl && this.inputEl.focus();
});
this.isMinimized = false;
this.isOpen = true;
this._hideDock();
} catch (err) {
console.error('TerminalPanel.restore error:', err);
}
}
_ensureDock() {
if (this.dockEl) return this.dockEl;
const dock = document.createElement('div');
dock.className = 'terminal-dock';
const button = document.createElement('button');
button.type = 'button';
button.className = 'terminal-dock-btn';
button.title = 'Show Terminal';
button.setAttribute('aria-label', 'Show Terminal');
button.innerHTML = `
<span class="terminal-dock-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 17l6-6-6-6"></path>
<path d="M12 19h8"></path>
</svg>
</span>
<span class="terminal-dock-label">Terminal</span>
`;
button.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
this.restore();
});
dock.appendChild(button);
document.body.appendChild(dock);
this.dockEl = dock;
this.dockBtnEl = button;
return dock;
}
_showDock() {
const dock = this._ensureDock();
if (dock) dock.classList.add('visible');
}
_hideDock() {
if (this.dockEl) this.dockEl.classList.remove('visible');
}
_send(text) { _send(text) {
try { try {
if (!this.socket || this.socket.readyState !== 1) { if (!this.socket || this.socket.readyState !== 1) {

89
public/styles/main.css
View File

@@ -3342,13 +3342,19 @@ select.param-input:focus {
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
color: var(--text-secondary); color: var(--text-secondary);
border-radius: 8px; border-radius: 8px;
padding: 0.35rem 0.6rem; padding: 0.35rem;
cursor: pointer; cursor: pointer;
} }
.drawer-terminal-btn:hover { .drawer-terminal-btn:hover {
background: var(--bg-hover); background: var(--bg-hover);
color: var(--text-primary); color: var(--text-primary);
} }
.drawer-terminal-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
}
.drawer-close { .drawer-close {
background: transparent; background: transparent;
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
@@ -3381,7 +3387,6 @@ select.param-input:focus {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
padding: 1.5rem;
z-index: 1001; z-index: 1001;
pointer-events: none; pointer-events: none;
} }
@@ -3404,6 +3409,10 @@ select.param-input:focus {
flex-direction: column; flex-direction: column;
} }
.terminal-panel.minimized {
display: none;
}
.terminal-panel.visible { .terminal-panel.visible {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
@@ -3437,6 +3446,14 @@ select.param-input:focus {
background: var(--bg-hover); background: var(--bg-hover);
color: var(--text-primary); color: var(--text-primary);
} }
.terminal-actions .terminal-minimize-btn {
width: 2rem;
padding: 0.25rem 0;
font-size: 1rem;
line-height: 1;
}
.terminal-body { .terminal-body {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
@@ -3465,6 +3482,18 @@ select.param-input:focus {
border-radius: 6px; border-radius: 6px;
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
.terminal-input-row .terminal-clear-btn {
background: transparent;
border: 1px solid var(--border-secondary);
color: var(--text-secondary);
border-radius: 6px;
padding: 0.4rem 0.6rem;
cursor: pointer;
}
.terminal-input-row .terminal-clear-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.terminal-send-btn { .terminal-send-btn {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white; color: white;
@@ -3477,6 +3506,62 @@ select.param-input:focus {
filter: brightness(1.05); filter: brightness(1.05);
} }
.terminal-dock {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
display: none;
pointer-events: none;
}
.terminal-dock.visible {
display: flex;
}
.terminal-dock-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(21, 31, 46, 0.85);
backdrop-filter: blur(14px);
color: var(--text-primary);
cursor: pointer;
box-shadow: 0 18px 40px rgba(0,0,0,0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
pointer-events: auto;
}
.terminal-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 22px 44px rgba(0,0,0,0.35);
background: rgba(35, 49, 68, 0.95);
}
.terminal-dock-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.terminal-dock-icon svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
}
.terminal-dock-label {
font-size: 0.9rem;
font-weight: 600;
}
/* Topology hover tooltip for labels */ /* Topology hover tooltip for labels */
.topology-tooltip { .topology-tooltip {
position: fixed; position: fixed;