[WIP] Add initial support of the SSH client. Improved UI

Makefile

@@ -1,6 +1,6 @@
 SPK_NAME = rr-manager
 SPK_VERS = 2.0
-SPK_REV = 57
+SPK_REV = 58
 SPK_ICON = src/rr-manager.png
 
 DSM_UI_DIR = ui

package.json

@@ -24,5 +24,14 @@
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "@xterm/addon-canvas": "^0.6.0",
+    "@xterm/addon-fit": "^0.9.0",
+    "@xterm/addon-image": "^0.7.0",
+    "@xterm/addon-unicode11": "^0.7.0",
+    "@xterm/addon-web-links": "^0.10.0",
+    "@xterm/addon-webgl": "^0.17.0",
+    "@xterm/xterm": "^5.4.0"
   }
 }

src/src/appWindow.js

@@ -61,6 +61,12 @@ export default
                     fn: "SYNOCOMMUNITY.RRManager.Debug.Main",
                     // help: "setting.html",
                 },
+                {
+                    text: 'SSH',
+                    iconCls: "icon-ssh",
+                    fn: "SYNOCOMMUNITY.RRManager.Ssh.Main",
+                    // help: "setting.html",
+                }                
             ];
         },
 

src/src/components/iframePanel.js

@@ -0,0 +1,51 @@
+Ext.define("SYNOCOMMUNITY.RRManager.IframePanel", {
+    extend: "SYNO.ux.Panel",    
+    constructor: function (config) {
+        this.callParent([this.fillConfig(config)]);
+    },
+
+    fillConfig: function (config) {
+        const me = this;
+        const cfg = {
+            items: [
+                {
+                    itemId: "iframeBox",
+                    xtype: "box",
+                    cls: "iframe-panel",
+                    html: '<iframe src="' + (config.iframeSrc || '') + '" style="width:100%; height:100%; border:none;"></iframe>',
+                }
+            ],
+            listeners: {
+                scope: me,
+                afterrender: me.onAfterRender,
+                update: me.updateIframe,
+                src_change: me.onSrcChange
+            }
+        };
+        return Ext.apply(cfg, config);
+    },
+
+    onAfterRender: function () {
+        // Example: Add a click event listener if needed
+        this.mon(this.body, "click", this.onMouseClick, this);
+    },
+
+    updateIframe: function () {
+        const iframeBox = this.getComponent("iframeBox");
+        iframeBox.update('<iframe src="' + this.iframeSrc + '" style="width:100%; height:100%; border:none;"></iframe>');
+    },
+
+    setSrc: function (src) {
+        this.iframeSrc = src;
+        this.fireEvent('src_change');
+    },
+
+    onSrcChange: function () {
+        this.updateIframe();
+    },
+
+    onMouseClick: function () {
+        // Example: Fire an event when the iframe panel is clicked
+        this.fireEvent("iframeclick", this);
+    }
+});

src/src/components/statusBoxTmpl.js

@@ -32,7 +32,6 @@ export default
         },
         isBothErrorWarn: (error, warning) => error !== 0 && warning !== 0,
         showNumber: (number) => {
-            debugger;
             return number;        
         },
 

src/src/index.js

@@ -3,7 +3,6 @@ import AppWindow from './appWindow';
 //tab main
 import Main from './tabs/main';
 import HealthPanel from './panels/healthPanel';
-
 import statusBoxTmpl from './components/statusBoxTmpl';
 import statusBox from './components/statusBox';
 import StatusBoxsPanel from './panels/statusBoxsPanel';
@@ -23,6 +22,9 @@ import RrManagerConfigTab from './panels/settings/rrManagerConfigTab';
 import Debug from './tabs/debug';
 import DebugGeneralTab from './panels/debug/generalTab';
 
+//tab ssh
+import Ssh from './tabs/ssh';
+
 // Namespace definition
 Ext.ns('SYNOCOMMUNITY.RRManager');
 // Application definition

src/src/panels/terminal.js

@@ -0,0 +1,74 @@
+import { Terminal } from '@xterm/xterm';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+
+export default
+    Ext.define('SYNOCOMMUNITY.RRManager.TerminalPanel', {
+        extend: "SYNO.ux.Panel",
+
+        constructor: function (config) {
+            this.callParent([this.fillConfig(config)]);
+        },
+
+        fillConfig: function (config) {
+            const me = this;
+            const cfg = {
+                itemId: "iframeBox",
+                cls: "iframe-panel",
+                html: '<div class="terminal-container" style="width:100%; height:100%;"></div>',
+                listeners: {
+                    scope: me,
+                    afterrender: me.onAfterRender,
+                    resize: me.onResize
+                }
+            };
+            return Ext.apply(cfg, config);
+        },
+
+        onAfterRender: function () {
+            const me = this;
+            // Defer the initialization to ensure the DOM is ready
+            Ext.defer(function () {
+                const containerEl = me.getEl().dom
+                // Initialize the xterm Terminal
+                me.terminal = new Terminal({
+                    cols: 80,
+                    rows: 24
+                });
+
+                me.terminal.open(containerEl);
+
+                // Optional: You can add some initial content to the terminal
+                me.terminal.write('Welcome to the xterm.js terminal!\r\n');
+
+                // Adjust terminal size to fit the container
+                me.resizeTerminal();
+            }, 50);
+        },
+
+        onResize: function () {
+            this.resizeTerminal();
+        },
+
+        resizeTerminal: function () {
+            const me = this;
+            if (me.terminal) {
+                const containerEl = me.getEl().dom;
+                const width = containerEl.clientWidth;
+                const height = containerEl.clientHeight;
+
+                // Calculate new cols and rows based on the container size
+                const cols = Math.floor(width / me.terminal._core._renderService.dimensions.actualCellWidth);
+                const rows = Math.floor(height / me.terminal._core._renderService.dimensions.actualCellHeight);
+                if (cols && rows){
+                    me.terminal.resize(cols, rows);
+                }                
+            }
+        },
+
+        // Optional: Method to send data to the terminal
+        write: function (data) {
+            if (this.terminal) {
+                this.terminal.write(data);
+            }
+        }
+    });

src/src/tabs/main.js

@@ -45,7 +45,7 @@ export default
                 statusBoxsPanel: new SYNOCOMMUNITY.RRManager.Overview.StatusBoxsPanel({
                     appWin: e.appWin,
                     owner: this
-                }),
+                }),               
             };
             const t = {
                 layout: "vbox",