Improve UI logic and port name handling in components #6
|
|
@ -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
|
||||
? "Deselect All"
|
||||
: "Select All"}{" "}
|
||||
{"(" + listPorts.flat().length + ")"}
|
||||
{listPortsSelected.length === listPorts.flat().length &&
|
||||
listPorts.flat().length > 0
|
||||
? "Clear All"
|
||||
: "Select All"}
|
||||
</Button>
|
||||
<Button
|
||||
className={classes.buttonMenuTool}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
setIsInit(false);
|
||||
// setLoading(true);
|
||||
// setIsInit(false);
|
||||
// if (terminal.current) {
|
||||
// terminal?.current.clear();
|
||||
// terminal?.current.dispose();
|
||||
|
|
|
|||
Loading…
Reference in New Issue