andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
nguyentrungthat 2025-11-25 07:46:52 +07:00
parent 3123262c7f
commit dc47636c96
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
BACKEND/app/services/switch_connection.ts
View File

@ -271,7 +271,9 @@ export default class SwitchController {
} }
public async getPorts(): Promise<boolean> { public async getPorts(): Promise<boolean> {
this._send(' terminal length 0')
this._send('show interface status') this._send('show interface status')
this._send(' ')
await this.sleep(2000) await this.sleep(2000)
const statusOutput = this.buffer const statusOutput = this.buffer
this.buffer = '' this.buffer = ''

6
BACKEND/providers/socket_io_provider.ts
View File

@ -658,10 +658,10 @@ export class WebSocketIo {
try { try {
const ip = station.switch_control_ip as string const ip = station.switch_control_ip as string
const port = station.switch_control_port as number const port = station.switch_control_port as number
const username = station.switch_control_username as string const username = (station.switch_control_username as string) || ''
const password = station.switch_control_password as string const password = (station.switch_control_password as string) || ''
if (!ip || !port || !password) { if (!ip || !port) {
socket.emit('switch_output', { socket.emit('switch_output', {
stationId: station.id, stationId: station.id,
portGroups: [], portGroups: [],

19
FRONTEND/src/components/DrawerControl.tsx
View File

@ -792,14 +792,19 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
const normalizePortName = (port: string): string => { const normalizePortName = (port: string): string => {
if (!port) return ""; 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/]+)$/); const match = port.match(/^([A-Za-z]+)([\d/]+)$/);
if (!match) return port; 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) => { const changeShowPort = (status: string) => {
@ -1260,9 +1265,11 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
<Box <Box
style={{ style={{
display: "flex", display: "flex",
flexWrap: "wrap", flexDirection: "column",
justifyContent: "center", // flexWrap: "wrap",
gap: "10px", // justifyContent: "center",
alignItems: "center",
gap: "8px",
overflow: "auto", overflow: "auto",
height: "11vh", height: "11vh",
maxWidth: "70vw", maxWidth: "70vw",