Merge pull request 'Improve UI logic and port name handling in components' (#6) from that into main

Reviewed-on: #6

FRONTEND/src/components/DrawerControl.tsx

@@ -892,7 +892,8 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
             className={classes.buttonMenuTool}
             disabled={isSubmit}
             title={
-              listPortsSelected.length === listPorts.flat().length
+              listPortsSelected.length === listPorts.flat().length &&
+              listPorts.flat().length > 0
                 ? "Deselect All"
                 : "Select All"
             }
@@ -908,10 +909,10 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
               }
             }}
           >
-            {listPortsSelected.length === listPorts.flat().length
+            {listPortsSelected.length === listPorts.flat().length &&
-              ? "Deselect All"
+            listPorts.flat().length > 0
-              : "Select All"}{" "}
+              ? "Clear All"
-            {"(" + listPorts.flat().length + ")"}
+              : "Select All"}
           </Button>
           <Button
             className={classes.buttonMenuTool}

FRONTEND/src/components/FormAddEdit.tsx

@@ -401,7 +401,7 @@ const StationSetting = ({
       >
         <Flex justify={"space-between"} gap={"sm"}>
           {/* Station info */}
-          <Box w={"40%"}>
+          <Box w={"30%"}>
             <TextInput
               required
               name="name"
@@ -689,7 +689,7 @@ const StationSetting = ({
             </div>
           </Box>
           {/* Lines */}
-          <Box w={"60%"}>
+          <Box w={"70%"}>
             <Table
               verticalSpacing="xs"
               horizontalSpacing="lg"

FRONTEND/src/components/ModalTerminal.tsx

@@ -351,12 +351,32 @@ const ModalTerminal = ({
 
   const findSwitchPort = (portName: string): SwitchPortsProps | null => {
     if (listPorts?.length > 0) {
-      const port = listPorts.find((el) => el.name === portName);
+      const port = listPorts.find(
+        (el) => normalizePortName(el.name) === normalizePortName(portName)
+      );
       if (port) return port;
     }
     return null;
   };
 
+  const normalizePortName = (port: string): string => {
+    if (!port) return "";
+
+    // Example inputs: "Fa0/1", "Gi0/0/1", "Fa0/0/2"
+    const match = port.match(/^([A-Za-z]+)([\d/]+)$/);
+
+    if (!match) return port;
+
+    const type = match[1]; // Fa, Gi, Te, etc.
+    const numbers = match[2]; // "0/1" / "0/0/1" / "0/0/2"
+
+    // Get the last part after slash
+    const parts = numbers.split("/");
+    const last = parts[parts.length - 1];
+
+    return `${type?.slice(0, 2)}${last}`;
+  };
+
   return (
     <Box>
       <Modal
@@ -494,11 +514,11 @@ const ModalTerminal = ({
                       {line?.interface ? (
                         findSwitchPort(line?.interface)?.status === "ON" ? (
                           <Text size="sm" ml={"4px"} c={"green"}>
-                            Connected ({line?.interface})
+                            Connected ({normalizePortName(line?.interface)})
                           </Text>
                         ) : (
                           <Text size="sm" ml={"4px"} c={"red"}>
-                            Not Connected ({line?.interface})
+                            Not Connected ({normalizePortName(line?.interface)})
                           </Text>
                         )
                       ) : (

FRONTEND/src/components/TerminalXTerm.tsx

@@ -144,8 +144,12 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
     if (cliOpened) {
       setTimeout(() => {
         setLoading(false);
-      }, 500);
+      }, 100);
       if (fitRef.current) fitRef.current?.fit();
+    } else {
+      setLoading(true);
+      setIsInit(false);
+      terminal.current?.reset();
     }
   }, [cliOpened]);
 
@@ -170,8 +174,8 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
 
   useEffect(() => {
     return () => {
-      setLoading(true);
+      // setLoading(true);
-      setIsInit(false);
+      // setIsInit(false);
       // if (terminal.current) {
       //   terminal?.current.clear();
       //   terminal?.current.dispose();