export function TwoPodsFilters()

in webview-ui/src/TCPDump/filterScenarios/TwoPodsFilters.tsx [20:157]
84 lines of code
1 McCabe index (conditional complexity)

export function TwoPodsFilters(props: TwoPodsFiltersProps) {
    const updates: EventHandlerFunc[] = [];
    const { lazySourceNodes, lazySourcePods, lazyDestNodes, lazyDestPods } = prepareData(
        props.referenceData,
        props.filter,
        updates,
    );

    useEffect(() => {
        updates.map((fn) => fn(props.eventHandlers));
    });

    function handleSourceNodeChange(node: NodeName | null) {
        props.eventHandlers.onSetCaptureScenarioFilters({
            node: props.captureNode,
            scenario: "TwoPods",
            filters: { ...props.filter, sourceNode: node, sourcePod: null },
        });
        props.eventHandlers.onRefreshPcapFilterString({ node: props.captureNode });
    }

    function handleSourcePodChange(pod: FilterPod | null) {
        props.eventHandlers.onSetCaptureScenarioFilters({
            node: props.captureNode,
            scenario: "TwoPods",
            filters: { ...props.filter, sourcePod: pod },
        });
        props.eventHandlers.onRefreshPcapFilterString({ node: props.captureNode });
    }

    function handleDestNodeChange(node: NodeName | null) {
        props.eventHandlers.onSetCaptureScenarioFilters({
            node: props.captureNode,
            scenario: "TwoPods",
            filters: { ...props.filter, destNode: node, destPod: null },
        });
        props.eventHandlers.onRefreshPcapFilterString({ node: props.captureNode });
    }

    function handleDestPodChange(pod: FilterPod | null) {
        props.eventHandlers.onSetCaptureScenarioFilters({
            node: props.captureNode,
            scenario: "TwoPods",
            filters: { ...props.filter, destPod: pod },
        });
        props.eventHandlers.onRefreshPcapFilterString({ node: props.captureNode });
    }

    function handlePacketDirectionChange(value: string) {
        // const elem = e.target as HTMLInputElement;
        const packetDirection = value as DualEndpointPacketDirection;
        props.eventHandlers.onSetCaptureScenarioFilters({
            node: props.captureNode,
            scenario: "TwoPods",
            filters: { ...props.filter, packetDirection },
        });
        props.eventHandlers.onRefreshPcapFilterString({ node: props.captureNode });
    }

    const packetDirectionLabels: Record<DualEndpointPacketDirection, string> = {
        Bidirectional: "Bidirectional",
        SourceToDestination: "Source to destination",
    };

    return (
        <>
            <label htmlFor="source-node-input" className={styles.label}>
                Source Node
            </label>
            <ResourceSelector<NodeName>
                id="source-node-input"
                className={styles.controlDropdown}
                resources={lazySourceNodes}
                selectedItem={props.filter.sourceNode}
                valueGetter={(n) => n}
                labelGetter={(n) => n}
                onSelect={handleSourceNodeChange}
            />

            <label htmlFor="source-pod-input" className={styles.label}>
                Source Pod
            </label>
            <ResourceSelector<FilterPod>
                id="source-pod-input"
                className={styles.controlDropdown}
                resources={lazySourcePods}
                selectedItem={props.filter.sourcePod}
                valueGetter={(p) => p.name}
                labelGetter={(p) => p.name}
                onSelect={handleSourcePodChange}
            />

            <label htmlFor="dest-node-input" className={styles.label}>
                Destination Node
            </label>
            <ResourceSelector<NodeName>
                id="dest-node-input"
                className={styles.controlDropdown}
                resources={lazyDestNodes}
                selectedItem={props.filter.destNode}
                valueGetter={(n) => n}
                labelGetter={(n) => n}
                onSelect={handleDestNodeChange}
            />

            <label htmlFor="dest-pod-input" className={styles.label}>
                Destination Pod
            </label>
            <ResourceSelector<FilterPod>
                id="dest-pod-input"
                className={styles.controlDropdown}
                resources={lazyDestPods}
                selectedItem={props.filter.destPod}
                valueGetter={(p) => p.name}
                labelGetter={(p) => p.name}
                onSelect={handleDestPodChange}
            />

            <label htmlFor="packet-direction-input" className={styles.label}>
                Packet Direction
            </label>
            <CustomDropdown
                className={styles.controlDropdown}
                id="packet-direction-input"
                value={props.filter.packetDirection}
                onChange={handlePacketDirectionChange}
            >
                {Object.keys(packetDirectionLabels).map((d) => (
                    <CustomDropdownOption
                        key={d}
                        value={d}
                        label={packetDirectionLabels[d as DualEndpointPacketDirection]}
                    />
                ))}
            </CustomDropdown>
        </>
    );
}