From dc47636c9640cda838a3c74616b0727a8da6055b Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Tue, 25 Nov 2025 07:46:52 +0700
Subject: [PATCH] Improve switch port handling and UI layout

Added extra commands in getPorts for better terminal output handling. Updated socket_io_provider to allow empty username/password and relaxed connection validation. Refined DrawerControl port normalization and adjusted port display layout for improved clarity and alignment.
---
 BACKEND/app/services/switch_connection.ts |  2 ++
 BACKEND/providers/socket_io_provider.ts   |  6 +++---
 FRONTEND/src/components/DrawerControl.tsx | 19 +++++++++++++------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/BACKEND/app/services/switch_connection.ts b/BACKEND/app/services/switch_connection.ts
index da70e27..8f5e4af 100644
--- a/BACKEND/app/services/switch_connection.ts
+++ b/BACKEND/app/services/switch_connection.ts
@@ -271,7 +271,9 @@ export default class SwitchController {
   }
 
   public async getPorts(): Promise<boolean> {
+    this._send('    terminal length 0')
     this._send('show interface status')
+    this._send('    ')
     await this.sleep(2000)
     const statusOutput = this.buffer
     this.buffer = ''
diff --git a/BACKEND/providers/socket_io_provider.ts b/BACKEND/providers/socket_io_provider.ts
index ac04ae7..4cdbea7 100644
--- a/BACKEND/providers/socket_io_provider.ts
+++ b/BACKEND/providers/socket_io_provider.ts
@@ -658,10 +658,10 @@ export class WebSocketIo {
     try {
       const ip = station.switch_control_ip as string
       const port = station.switch_control_port as number
-      const username = station.switch_control_username as string
-      const password = station.switch_control_password as string
+      const username = (station.switch_control_username as string) || ''
+      const password = (station.switch_control_password as string) || ''
 
-      if (!ip || !port || !password) {
+      if (!ip || !port) {
         socket.emit('switch_output', {
           stationId: station.id,
           portGroups: [],
diff --git a/FRONTEND/src/components/DrawerControl.tsx b/FRONTEND/src/components/DrawerControl.tsx
index d469004..61fe0e1 100644
--- a/FRONTEND/src/components/DrawerControl.tsx
+++ b/FRONTEND/src/components/DrawerControl.tsx
@@ -792,14 +792,19 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
   const normalizePortName = (port: string): string => {
     if (!port) return "";
 
-    // Match interface type + numeric hierarchy (e.g. "Gi" + "1/0/24")
+    // Example inputs: "Fa0/1", "Gi0/0/1", "Fa0/0/2"
     const match = port.match(/^([A-Za-z]+)([\d/]+)$/);
 
     if (!match) return port;
 
-    const numbers = match[2]; // e.g. "1/0/24"
+    // const type = match[1]; // Fa, Gi, Te, etc.
+    const numbers = match[2]; // "0/1" / "0/0/1" / "0/0/2"
 
-    return numbers;
+    // Get the last part after slash
+    const parts = numbers.split("/");
+    const last = parts[parts.length - 1];
+
+    return `${last}`;
   };
 
   const changeShowPort = (status: string) => {
@@ -1260,9 +1265,11 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                         <Box
                           style={{
                             display: "flex",
-                            flexWrap: "wrap",
-                            justifyContent: "center",
-                            gap: "10px",
+                            flexDirection: "column",
+                            // flexWrap: "wrap",
+                            // justifyContent: "center",
+                            alignItems: "center",
+                            gap: "8px",
                             overflow: "auto",
                             height: "11vh",
                             maxWidth: "70vw",