{{ info }}
- @if (isLoading) {
-
-
-
-
-
-
+();
title = 'Web Console';
info = 'Connecting...';
isConnected = false;
@@ -38,85 +41,35 @@
ngOnInit(): void {
const route = this.coreUiFacade.activeRoute;
- route.queryParams.subscribe((params: any) => {
- this.deviceId = params['device_id'] || 'localhost';
- this.deviceName = params['device_name'] || '';
- this.setTitle();
- this.checkOemVersion();
- });
+ route.queryParams
+ .pipe(takeUntil(this.destroyed$))
+ .subscribe((params: any) => {
+ this.deviceId = params['device_id'] || 'localhost';
+ this.deviceName = params['device_name'] || '';
+ this.setTitle();
+ this.checkOemVersion();
+ });
}
async ngAfterViewInit(): Promise {
- if (isPlatformBrowser(this.platformId)) {
- const { Terminal } = await import('@xterm/xterm');
- const { FitAddon } = await import('@xterm/addon-fit');
-
- if (this.terminalElementRef?.nativeElement) {
- this.terminal = new Terminal({
- convertEol: true,
- cursorBlink: true,
- fontFamily: 'monospace',
- fontSize: 14,
- cols: 80,
- rows: 60,
- allowProposedApi: true,
- theme: {
- background: '#000000',
- foreground: '#FFFFFF',
- cursor: '#FFFFFF',
- selectionBackground: '#5f6062',
- black: '#000000',
- red: '#e06c75',
- green: '#98c379',
- yellow: '#e5c07b',
- blue: '#61afef',
- magenta: '#c678dd',
- cyan: '#56b6c2',
- white: '#abb2bf',
- brightBlack: '#5c6370',
- brightRed: '#e06c75',
- brightGreen: '#98c379',
- brightYellow: '#e5c07b',
- brightBlue: '#61afef',
- brightMagenta: '#c678dd',
- brightCyan: '#56b6c2',
- brightWhite: '#ffffff'
- }
- });
-
- this.fitAddon = new FitAddon();
- this.terminal.loadAddon(this.fitAddon);
-
- this.terminal.open(this.terminalElementRef.nativeElement);
-
- this.fitAddon.fit();
-
- // Initialize ResizeObserver
- this.resizeObserver = new ResizeObserver(() => {
- if (this.terminal && this.fitAddon) {
- this.fitAddon.fit();
- }
- });
- this.resizeObserver.observe(this.terminalElementRef.nativeElement);
-
- this.terminal.write('\x1b[32m[WebConsole Initialized]\x1b[0m\r\n'); // Welcome message for debugging
-
- setTimeout(() => this.connect(), 500);
- } else {
- console.error('Terminal element not found');
- this.info = 'Terminal initialization failed.';
- this.isLoading = false;
- }
- } else {
+ if (!isPlatformBrowser(this.platformId)) {
this.info = 'Terminal is not available in this environment.';
this.isLoading = false;
+ return;
}
+
+ const initialized = await this.initializeTerminal();
+ if (initialized) {
+ setTimeout(() => this.connect(), 250);
+ }
}
ngOnDestroy(): void {
- if (this.qTimer) {
- clearTimeout(this.qTimer);
- }
+ this.destroyed$.next();
+ this.destroyed$.complete();
+ this.clearPollingTimer();
+ this.keyListener?.dispose();
+ this.keyListener = null;
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
@@ -128,74 +81,132 @@
}
}
- // Adjusted to better handle the HTML structure and preserve newlines/spaces
+ get connectionStateLabel(): string {
+ if (this.isConnected) return 'Connected';
+ if (this.isLoading) return 'Connecting';
+ return 'Disconnected';
+ }
+
+ get terminalReady(): boolean {
+ return this.terminal !== null;
+ }
+
+ private async initializeTerminal(): Promise {
+ const terminalHost = this.terminalElementRef?.nativeElement;
+ if (!terminalHost) {
+ this.info = 'Terminal initialization failed.';
+ this.isLoading = false;
+ return false;
+ }
+
+ const { Terminal } = await import('@xterm/xterm');
+ const { FitAddon } = await import('@xterm/addon-fit');
+
+ this.terminal = new Terminal({
+ convertEol: true,
+ cursorBlink: true,
+ fontFamily: 'Monaco, Menlo, Consolas, monospace',
+ fontSize: 13,
+ cols: 80,
+ rows: 60,
+ allowProposedApi: true,
+ theme: {
+ background: '#0b111a',
+ foreground: '#d6deeb',
+ cursor: '#f3f6fb',
+ selectionBackground: '#33435a',
+ black: '#000000',
+ red: '#e06c75',
+ green: '#98c379',
+ yellow: '#e5c07b',
+ blue: '#61afef',
+ magenta: '#c678dd',
+ cyan: '#56b6c2',
+ white: '#abb2bf',
+ brightBlack: '#5c6370',
+ brightRed: '#e06c75',
+ brightGreen: '#98c379',
+ brightYellow: '#e5c07b',
+ brightBlue: '#61afef',
+ brightMagenta: '#c678dd',
+ brightCyan: '#56b6c2',
+ brightWhite: '#ffffff'
+ }
+ });
+
+ this.fitAddon = new FitAddon();
+ this.terminal.loadAddon(this.fitAddon);
+ this.terminal.open(terminalHost);
+ this.fitAddon.fit();
+
+ this.resizeObserver = new ResizeObserver(() => this.fitTerminal());
+ this.resizeObserver.observe(terminalHost);
+ this.terminal.focus();
+ this.terminal.writeln('\x1b[32mReady. Connecting to remote shell...\x1b[0m');
+
+ return true;
+ }
+
private convertHtmlToAnsi(xmlContentString: string): string {
- // The server response starts with then ${cleanResponse} `;
+ const contentOnly = cleanResponse.replace(/${contentOnly} `;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(wrappedXml, 'text/xml');
let ansiOutput = '';
- // Define ANSI mapping - YOU NEED TO COMPLETE THESE BASED ON YOUR BACKEND'S 'ff be', 'ff bc' MEANINGS
- const ansiColorMap: { [key: string]: { start: string, end: string } } = {
- 'ff be': { start: '\x1b[38;5;15;48;5;236m', end: '\x1b[0m' }, // Example: light gray on dark gray for normal text
- 'ff bc': { start: '\x1b[38;5;15;48;5;236m', end: '\x1b[0m' }, // Assuming these are similar default styles
- // Add more mappings as needed:
- // 'error-class': { start: '\x1b[31m', end: '\x1b[0m' }, // Red text
- // 'bold-text': { start: '\x1b[1m', end: '\x1b[0m' }, // Bold text
- // Note: The example response has "ff be" and "ff bc" spanning entire lines,
- // which implies they might be the primary styling for standard text.
- // You might need to experiment to get the exact color mappings.
+ const mapColorCode = (hexCode: string, isBg: boolean): string => {
+ const v = parseInt(hexCode, 16);
+ if (isNaN(v)) return '';
+ // Default terminal behavior overrides
+ if (!isBg && v === 15) return '39'; // Default FG
+ if (isBg && v === 14) return '49'; // Default BG
+
+ if (v < 8) return (isBg ? (v + 40) : (v + 30)).toString();
+ return (isBg ? (v - 8 + 100) : (v - 8 + 90)).toString();
};
-
- // The server response appears to send whole lines (or segments of lines) in spans
- // It's crucial to preserve whitespace and newlines as the server sends them.
- // DOMParser might normalize whitespace, so let's try to grab innerHTML/textContent directly.
-
- // Iterate over the children of the element (which are
that need to be translated to \r\n - // or${cleanResponse} `;
const doc = new DOMParser().parseFromString(wrappedXml, 'text/xml');
@@ -263,40 +316,38 @@
return;
}
- const cNode = doc.querySelector('c');
- const cy = cNode?.getAttribute('cy');
- let cursorRow = 1; // Default to first row
- if (cy) {
- cursorRow = Math.max(parseInt(cy, 10), 1); // Ensure at least 1
+ let cursorRow = 1;
+ let cursorCol = 1;
+ if (cNodeMatch) {
+ cursorRow = Math.max(parseInt(cNodeMatch[1], 10) + 1, 1);
+ if (cNodeMatch[2]) {
+ cursorCol = Math.max(parseInt(cNodeMatch[2], 10) + 1, 1);
+ }
}
- const ansiOutput = this.convertHtmlToAnsi(cleanResponse); // Pass the raw clean string to the converter
+ const ansiOutput = this.convertHtmlToAnsi(cleanResponse);
- if (this.terminal) {
- // Clear the line and move cursor to the specified row and column 1
- // \x1b[2K clears the current line
- // \x1b[;1H moves the cursor to row, col 1
- this.terminal.write(`\x1b[${cursorRow};1H\x1b[2K`);
- this.terminal.write(ansiOutput); // Write the converted content
+ if (this.terminal && ansiOutput.trim().length > 0) {
+ const lines = ansiOutput.split('\r\n');
+ for (let i = 0; i < lines.length; i++) {
+ // Paint each horizontal slice absolutely and prevent emitting '\n' that commands scrolling
+ this.terminal.write(`\x1b[${i + 1};1H${lines[i]}`);
+ }
+ this.terminal.write(`\x1b[${cursorRow};${cursorCol}H`); // Put hardware cursor on active coordinate
}
-
- // Manage polling frequency
- if (ansiOutput.trim().length > 0) { // If there was any meaningful output
- this.qTime = 100; // Reset to fast poll if activity
+ if (ansiOutput.trim().length > 0) {
+ this.qTime = 100;
} else {
- this.qTime = Math.min(this.qTime * 2, 2000); // Slow down if no output
+ this.qTime = Math.min(this.qTime * 2, 2000);
}
- this.retryCount = 0; // Reset retry count on successful response
-
- // Schedule next update
- this.qTimer = setTimeout(() => this.update(), this.qTime);
+ this.retryCount = 0;
+ this.scheduleNextUpdate(this.qTime);
},
error: (err: any) => {
- console.error('Update request error:', err);
this.retryCount++;
if (this.retryCount < 3) {
- this.qTimer = setTimeout(() => this.update(), 1000);
+ this.scheduleNextUpdate(1000);
} else {
this.disconnect();
this.info = 'Network error: ' + (err.message || 'Unknown');
@@ -307,69 +358,101 @@
private registerKeyEvents(): void {
if (this.terminal) {
- this.terminal.onKey(({ key, domEvent }: { key: string; domEvent: KeyboardEvent }) => {
+ this.keyListener?.dispose();
+ this.keyListener = this.terminal.onKey(({ key, domEvent }: { key: string; domEvent: KeyboardEvent }) => {
const code = domEvent.keyCode || domEvent.which;
let k = key;
- // Handle Ctrl + A-Z
if (domEvent.ctrlKey && code >= 65 && code <= 90) {
k = String.fromCharCode(code - 64);
- } else if (code === 8) { // Backspace
- k = String.fromCharCode(127); // ASCII DEL character for backspace
+ } else if (code === 8) {
+ k = String.fromCharCode(127);
} else if ([9, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46].includes(code)) {
k = this.mapSpecialKey(code);
}
- // Add the key to the queue
- this.kbQueue.push(encodeURIComponent(k));
- this.qTime = 100; // Reset polling speed when there's input
- if (!this.qTimer) { // If timer isn't running, start an immediate update
+ this.kbQueue.push(k);
+ this.qTime = 100;
+ if (!this.qTimer) {
this.update();
}
- domEvent.preventDefault(); // Prevent default browser behavior for terminal keys
+ domEvent.preventDefault();
});
}
}
private mapSpecialKey(code: number): string {
const keyMap: { [key: number]: string } = {
- 9: '\t', // Tab
- 27: '\x1b', // Esc
- 33: '\x1b[5~', // Page Up (CSI 5 ~)
- 34: '\x1b[6~', // Page Down (CSI 6 ~)
- 35: '\x1b[F', // End (CSI F) - often equivalent to \x1b[4~
- 36: '\x1b[H', // Home (CSI H) - often equivalent to \x1b[1~
- 37: '\x1b[D', // Left Arrow (CSI D)
- 38: '\x1b[A', // Up Arrow (CSI A)
- 39: '\x1b[C', // Right Arrow (CSI C)
- 40: '\x1b[B', // Down Arrow (CSI B)
- 45: '\x1b[2~', // Insert (CSI 2 ~)
- 46: '\x1b[3~' // Delete (CSI 3 ~)
+ 9: '\t',
+ 27: '\x1b',
+ 33: '\x1b[5~',
+ 34: '\x1b[6~',
+ 35: '\x1b[F',
+ 36: '\x1b[H',
+ 37: '\x1b[D',
+ 38: '\x1b[A',
+ 39: '\x1b[C',
+ 40: '\x1b[B',
+ 45: '\x1b[2~',
+ 46: '\x1b[3~'
};
return keyMap[code] || String.fromCharCode(code);
}
- reconnect(): void {
+ async reconnect(): Promise {
this.isLoading = true;
- this.info = 'Connecting...';
- if (this.terminal && isPlatformBrowser(this.platformId)) {
- this.terminal.dispose();
- this.terminal = null;
- this.fitAddon = null;
- if (this.resizeObserver) {
- this.resizeObserver.disconnect();
- this.resizeObserver = null;
+ this.info = 'Reconnecting...';
+ this.disconnect(false);
+
+ if (!this.terminal && isPlatformBrowser(this.platformId)) {
+ const initialized = await this.initializeTerminal();
+ if (!initialized) {
+ return;
}
}
+ this.terminal?.clear();
this.connect();
}
- private disconnect(): void {
- this.isConnected = false;
- this.isLoading = false;
- this.info = 'Console disconnected.';
+ clearTerminal(): void {
+ this.terminal?.clear();
+ this.terminal?.focus();
+ }
+
+ fitTerminal(): void {
+ if (this.terminal && this.fitAddon) {
+ this.fitAddon.fit();
+ }
+ }
+
+ focusTerminal(): void {
+ this.terminal?.focus();
+ }
+
+ private scheduleNextUpdate(delay: number): void {
+ this.clearPollingTimer();
+ this.qTimer = setTimeout(() => {
+ this.qTimer = null;
+ this.update();
+ }, delay);
+ }
+
+ private clearPollingTimer(): void {
if (this.qTimer) {
clearTimeout(this.qTimer);
this.qTimer = null;
}
}
+
+ private disconnect(overwriteInfo = true): void {
+ this.clearPollingTimer();
+ this.retryCount = 0;
+ this.qTime = 100;
+ this.kbQueue = [];
+ this.isConnected = false;
+ this.isLoading = false;
+
+ if (overwriteInfo) {
+ this.info = 'Console disconnected.';
+ }
+ }
}
+
-
+
+
+
+
- }
- @if (!isLoading) {
-
- }
+
+
+
+
+
+ {{ title }}
+
+ {{ connectionStateLabel }}
+
+ @if (!isConnected) {
+
+ }
+
+
+
+
+
-
-
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/web-console/web-console.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/web-console/web-console.scss (revision 2954)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/web-console/web-console.scss (working copy)
@@ -1,68 +1,230 @@
-$primary-color: #1170cf;
+:host {
+ display: block;
+ height: 100vh;
+ width: 100vw;
+ margin: 0;
+ padding: 0;
+ background-color: #0b111a;
+ overflow: hidden;
+}
-.title {
- height: 36px;
+$terminal-bg: #0b111a;
+$header-bg: #1e2632;
+$text-color: #d6deeb;
+$primary-color: #3b82f6;
+
+.web-console-wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
width: 100%;
- margin-top: 0 !important;
- padding: 0;
- color: #fff;
- font-size: 16px;
- line-height: 36px;
- vertical-align: top;
- background-color: $primary-color;
+ background-color: $terminal-bg;
}
-.hide {
- display: none;
- opacity: 0;
+.console-header {
+ height: 44px;
+ background-color: $header-bg;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ user-select: none;
+
+ &.oem-webconsole {
+ background-color: #1a1a24;
+ }
+
+ .header-content {
+ display: flex;
+ align-items: center;
+ width: 100%;
+
+ .window-controls {
+ display: flex;
+ gap: 8px;
+ margin-right: 16px;
+
+ .control {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+
+ &.close { background-color: #ff5f56; }
+ &.minimize { background-color: #ffbd2e; }
+ &.maximize { background-color: #27c93f; }
+ }
+ }
+
+ .title {
+ color: $text-color;
+ font-size: 14px;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ font-weight: 500;
+ flex-grow: 1;
+ text-align: center;
+ margin-right: 24px;
+ letter-spacing: 0.5px;
+ }
+
+ .status-badge {
+ font-size: 12px;
+ padding: 4px 10px;
+ border-radius: 12px;
+ background-color: rgba(255, 255, 255, 0.1);
+ color: #aaa;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ font-weight: 500;
+
+ &::before {
+ content: '';
+ display: block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: #aaa;
+ }
+
+ &.connected {
+ color: #4ade80;
+ background-color: rgba(74, 222, 128, 0.1);
+ &::before { background-color: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.4); }
+ }
+
+ &.disconnected {
+ color: #f87171;
+ background-color: rgba(248, 113, 113, 0.1);
+ &::before { background-color: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }
+ }
+ }
+ }
}
-.content {
- margin: 0 auto;
- padding-top: 100px;
+.console-body {
+ position: relative;
+ flex-grow: 1;
+ overflow: hidden;
+ background-color: $terminal-bg;
}
-.content .info {
- color: #333;
- font-size: 14px;
- text-align: center;
- margin-bottom: 30px;
+.overlay-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba($terminal-bg, 0.85);
+ z-index: 10;
+ backdrop-filter: blur(8px);
}
-.content .btn-array {
- display: block;
- margin: 0 auto;
- padding: 8px 20px;
- font-size: 14px;
- color: #e4701d;
- background-color: #fff;
- border: 1px solid #e4701d;
- border-radius: 5px;
+.status-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 40px 56px;
+ background-color: #1e2632;
+ border-radius: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+ animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+ .status-icon {
+ margin-bottom: 20px;
+ color: #f87171;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &.loading {
+ color: $primary-color;
+ }
+ }
+
+ .status-text {
+ margin: 0 0 24px 0;
+ color: $text-color;
+ font-size: 16px;
+ font-weight: 500;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ text-align: center;
+ letter-spacing: 0.2px;
+ }
+
+ .btn-reconnect {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 24px;
+ background-color: $primary-color;
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 2px 8px rgba($primary-color, 0.3);
+
+ &:hover {
+ background-color: #4f8cf6;
+ transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba($primary-color, 0.4);
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 4px rgba($primary-color, 0.3);
+ }
+ }
}
-.content .btn-array:active:focus, .content .btn-array:focus {
- outline: 0;
+.spinner-ring {
+ width: 48px;
+ height: 48px;
+ border: 3px solid rgba($primary-color, 0.15);
+ border-top-color: $primary-color;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
}
+.term-container {
+ height: 100%;
+ width: 100%;
+ padding: 16px 0 16px 16px;
+ box-sizing: border-box;
+ opacity: 1;
+ transition: opacity 0.3s ease;
+
+ &.hide {
+ opacity: 0;
+ pointer-events: none;
+ }
-.spinner {
- margin: 50px auto;
- width: 50px;
- height: 30px;
- text-align: center;
- font-size: 10px;
+ #terminal {
+ height: 100%;
+ width: 100%;
+ }
}
-.spinner > div {
- background-color: #e4701e;
- height: 100%;
- width: 6px;
- display: inline-block;
- -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
- animation: stretchdelay 1.2s infinite ease-in-out;
+@keyframes spin {
+ to { transform: rotate(360deg); }
}
-.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
-.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
-.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
-.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
+@keyframes scaleUp {
+ from { opacity: 0; transform: scale(0.95); }
+ to { opacity: 1; transform: scale(1); }
+}
+
+::ng-deep .xterm-viewport {
+ border-radius: 4px;
+}
+::ng-deep .xterm .xterm-screen {
+ padding-right: 16px;
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/web-console/web-console.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/web-console/web-console.ts (revision 2954)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/web-console/web-console.ts (working copy)
@@ -1,6 +1,7 @@
import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild, inject, PLATFORM_ID } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { isPlatformBrowser } from '@angular/common';
+import { Subject, takeUntil } from 'rxjs';
import { URLS } from '../../../constants/api_urls';
import { CoreUiFacade } from '../../../services/facades/core-ui.facade';
@@ -15,7 +16,9 @@
@ViewChild('terminal', { static: false }) terminalElementRef!: ElementRef;
private terminal: import('@xterm/xterm').Terminal | null = null;
private fitAddon: import('@xterm/addon-fit').FitAddon | null = null;
+ private keyListener: { dispose: () => void } | null = null;
private resizeObserver: ResizeObserver | null = null;
+ private destroyed$ = new Subjectthat need to be translated to \r\n - // or