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 +309 -52
4 changed files with 309 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,6 +23,9 @@ class ClusterMembersComponent extends Component {
// Drawer state for desktop
this.drawer = new DrawerComponent();
// Terminal panel container (shared with drawer)
this.terminalPanelContainer = null;
// Selection state for highlighting
this.selectedMemberIp = null;
}
@@ -403,7 +406,6 @@ class ClusterMembersComponent extends Component {
const membersHTML = members.map(member => {
const statusClass = (member.status && member.status.toUpperCase() === 'ACTIVE') ? 'status-online' : 'status-offline';
const statusText = (member.status && member.status.toUpperCase() === 'ACTIVE') ? 'Online' : 'Offline';
const statusIcon = (member.status && member.status.toUpperCase() === 'ACTIVE') ? '🟢' : '🔴';
logger.debug('ClusterMembersComponent: Rendering member:', member);
@@ -433,10 +435,18 @@ class ClusterMembersComponent extends Component {
</div>
` : ''}
</div>
<div class="expand-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
<div class="member-actions">
<button class="member-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>
<div class="expand-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</div>
</div>
</div>
<div class="member-details">
@@ -455,6 +465,7 @@ class ClusterMembersComponent extends Component {
setupMemberCards(members) {
setTimeout(() => {
this.findAllElements('.member-card').forEach((card, index) => {
const terminalBtn = card.querySelector('.member-terminal-btn');
const expandIcon = card.querySelector('.expand-icon');
const memberDetails = card.querySelector('.member-details');
const memberIp = card.dataset.memberIp;
@@ -505,6 +516,25 @@ class ClusterMembersComponent extends Component {
}
});
}
if (terminalBtn) {
this.addEventListener(terminalBtn, 'click', async (e) => {
e.stopPropagation();
e.preventDefault();
try {
if (!window.TerminalPanel) return;
this.ensureTerminalContainer();
const panel = window.TerminalPanel;
const wasMinimized = panel.isMinimized;
panel.open(this.terminalPanelContainer, memberIp);
if (wasMinimized && panel.restore) {
panel.restore();
}
} catch (err) {
console.error('Failed to open member terminal:', err);
}
});
}
});
}, 100);
}
@@ -722,6 +752,20 @@ class ClusterMembersComponent extends Component {
this.selectedMemberIp = null;
}
}
ensureTerminalContainer() {
if (!this.terminalPanelContainer) {
try {
const drawer = this.drawer;
if (drawer && drawer.ensureDrawer) {
drawer.ensureDrawer();
this.terminalPanelContainer = drawer.terminalPanelContainer;
}
} catch (err) {
console.error('Failed to ensure terminal container:', err);
}
}
}
}
window.ClusterMembersComponent = ClusterMembersComponent;

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

@@ -35,7 +35,12 @@ class DrawerComponent {
header.innerHTML = `
<div class="drawer-title">Node Details</div>
<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">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
@@ -66,7 +71,13 @@ class DrawerComponent {
e.stopPropagation();
try {
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) {
console.error('Failed to open terminal:', err);
}
@@ -124,9 +135,6 @@ class DrawerComponent {
if (this.detailsDrawer) this.detailsDrawer.classList.remove('open');
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
if (this.onCloseCallback) {
this.onCloseCallback();

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

@@ -10,34 +10,56 @@
this.connectedIp = null;
this.isOpen = false;
this.resizeHandler = null;
this.isMinimized = false;
this.dockEl = null;
this.dockBtnEl = null;
this.lastNodeIp = null;
}
open(container, nodeIp) {
try {
this.container = container;
if (!this.container) return;
if (!this.panelEl) {
this._buildPanel();
}
// Adjust position to be left of the details drawer
this._adjustRightOffset();
if (!this.resizeHandler) {
this.resizeHandler = () => this._adjustRightOffset();
window.addEventListener('resize', this.resizeHandler);
this.lastNodeIp = nodeIp || this.lastNodeIp;
// Reset any leftover inline positioning so CSS centering applies
if (this.container) {
this.container.style.right = '';
this.container.style.left = '';
this.container.style.top = '';
this.container.style.bottom = '';
this.container.style.width = '';
}
// Show panel with animation
requestAnimationFrame(() => {
this.panelEl.classList.add('visible');
this.isOpen = true;
this.inputEl && this.inputEl.focus();
});
if (!this.isMinimized) {
if (this.panelEl) {
this.panelEl.classList.remove('minimized');
this.panelEl.classList.remove('visible');
requestAnimationFrame(() => {
this.panelEl.classList.add('visible');
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
if (nodeIp) {
this._connect(nodeIp);
} else if (this.lastNodeIp && !this.socket) {
this._connect(this.lastNodeIp);
}
} catch (err) {
console.error('TerminalPanel.open error:', err);
@@ -49,6 +71,9 @@
if (!this.isOpen) return;
this.panelEl && this.panelEl.classList.remove('visible');
this.isOpen = false;
this.isMinimized = false;
if (this.panelEl) this.panelEl.classList.remove('minimized');
this._hideDock();
if (this.socket) {
try { this.socket.close(); } catch (_) {}
this.socket = null;
@@ -68,7 +93,7 @@
<div class="terminal-header">
<div class="terminal-title">Terminal</div>
<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>
</div>
</div>
@@ -77,6 +102,7 @@
</div>
<div class="terminal-input-row">
<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>
</div>
`;
@@ -87,6 +113,7 @@
const sendBtn = this.panelEl.querySelector('.terminal-send-btn');
const closeBtn = this.panelEl.querySelector('.terminal-close-btn');
const clearBtn = this.panelEl.querySelector('.terminal-clear-btn');
const minimizeBtn = this.panelEl.querySelector('.terminal-minimize-btn');
const sendHandler = () => {
const value = (this.inputEl && this.inputEl.value) || '';
@@ -104,6 +131,7 @@
});
if (closeBtn) closeBtn.addEventListener('click', (e) => { e.stopPropagation(); this.close(); });
if (clearBtn) clearBtn.addEventListener('click', (e) => { e.stopPropagation(); this._clear(); });
if (minimizeBtn) minimizeBtn.addEventListener('click', (e) => { e.stopPropagation(); this.minimize(); });
}
_connect(nodeIp) {
@@ -158,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) {
try {
if (!this.socket || this.socket.readyState !== 1) {
@@ -193,17 +289,6 @@
return text;
}
}
_adjustRightOffset() {
try {
const drawer = document.querySelector('.details-drawer');
const isOpen = drawer && drawer.classList.contains('open');
const width = isOpen ? drawer.getBoundingClientRect().width : 0;
if (this.container) {
this.container.style.right = `${width}px`;
}
} catch (_) { /* no-op */ }
}
}
// Expose singleton API

156
public/styles/main.css
View File

@@ -333,12 +333,46 @@ p {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.member-info {
flex: 1;
}
.member-actions {
display: flex;
align-items: center;
gap: 0.4rem;
}
.member-terminal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
border-radius: 6px;
border: 1px solid var(--border-primary);
background: rgba(255, 255, 255, 0.05);
color: var(--text-tertiary);
cursor: pointer;
transition: all 0.2s ease;
}
.member-terminal-btn:hover,
.member-terminal-btn:focus-visible {
background: rgba(255, 255, 255, 0.12);
color: var(--text-secondary);
border-color: rgba(255, 255, 255, 0.2);
}
.member-terminal-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
}
.expand-icon {
color: var(--text-tertiary);
cursor: pointer;
@@ -3308,13 +3342,19 @@ select.param-input:focus {
border: 1px solid var(--border-secondary);
color: var(--text-secondary);
border-radius: 8px;
padding: 0.35rem 0.6rem;
padding: 0.35rem;
cursor: pointer;
}
.drawer-terminal-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.drawer-terminal-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
}
.drawer-close {
background: transparent;
border: 1px solid var(--border-secondary);
@@ -3340,40 +3380,44 @@ select.param-input:focus {
.details-drawer-backdrop { display: none; }
}
/* Terminal Panel - bottom up, left of drawer, 1/3 viewport height */
/* Terminal Panel - bottom-centered modal style */
.terminal-panel-container {
position: fixed;
inset: auto 0 0 auto; /* bottom-right anchored; right adjusted dynamically */
right: 0; /* updated at runtime to drawer width */
width: clamp(33.333vw, 600px, 90vw); /* match drawer width by default */
z-index: 1001; /* above drawer (1000) and backdrop (999) */
pointer-events: none; /* allow clicks only on panel */
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1001;
pointer-events: none;
}
.terminal-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 33vh; /* 1/3 of viewport height */
max-height: 40vh;
position: relative;
width: min(720px, 90vw);
height: min(45vh, 520px);
max-height: 65vh;
background: var(--bg-primary);
color: var(--text-primary);
border-top: 1px solid var(--border-primary);
border-left: 1px solid var(--border-primary);
box-shadow: 0 -8px 20px rgba(0,0,0,0.25);
transform: translateY(100%);
border: 1px solid var(--border-primary);
box-shadow: 0 18px 40px rgba(0,0,0,0.35);
transform: translateY(32px);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
border-top-left-radius: 10px;
border-radius: 12px;
pointer-events: auto;
display: flex;
flex-direction: column;
}
.terminal-panel.minimized {
display: none;
}
.terminal-panel.visible {
transform: translateY(0);
opacity: 1;
}
.terminal-header {
display: flex;
align-items: center;
@@ -3402,6 +3446,14 @@ select.param-input:focus {
background: var(--bg-hover);
color: var(--text-primary);
}
.terminal-actions .terminal-minimize-btn {
width: 2rem;
padding: 0.25rem 0;
font-size: 1rem;
line-height: 1;
}
.terminal-body {
flex: 1;
overflow: auto;
@@ -3430,6 +3482,18 @@ select.param-input:focus {
border-radius: 6px;
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 {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
@@ -3442,6 +3506,62 @@ select.param-input:focus {
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-tooltip {
position: fixed;