export function SuccessView()

in webview-ui/src/Periscope/SuccessView.tsx [22:97]
57 lines of code
4 McCabe index (conditional complexity)

export function SuccessView(props: SuccessViewProps) {
    // Once
    useEffect(() => {
        const interval = setInterval(props.onRequestUploadStatusCheck, 10 * 1000);
        return () => clearInterval(interval);
    }, [props.onRequestUploadStatusCheck]);

    function getNodeRowClassNames(nodeName: string): string {
        return [props.selectedNode === nodeName && styles.selected].filter((s) => s).join(" ");
    }

    function handleRowClick(event: React.MouseEvent, nodeName: string) {
        // If the event came from an anchor element, let it bubble up.
        // The parent iframe needs to handle navigation events.
        if (event.target instanceof HTMLElement && event.target.closest("a,vscode-link")) {
            return;
        }

        props.onNodeClick(nodeName);
    }

    return (
        <>
            <p>
                <FontAwesomeIcon className={styles.successIndicator} icon={faCheckCircle} />
                AKS Periscope has successfully started run <b>{props.runId}</b> on cluster <b>{props.clusterName}</b>
            </p>

            <table className={styles.nodelist}>
                <thead>
                    <tr>
                        <th>Status</th>
                        <th>Node Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {props.uploadStatuses.map((status) => (
                        <tr
                            key={status.nodeName}
                            onClick={(e) => handleRowClick(e, status.nodeName)}
                            className={getNodeRowClassNames(status.nodeName)}
                        >
                            <td>
                                {status.isUploaded ? (
                                    <>
                                        <FontAwesomeIcon className={styles.successIndicator} icon={faCheckCircle} />
                                        Uploaded
                                    </>
                                ) : (
                                    <ProgressRing />
                                )}
                            </td>
                            <td>{status.nodeName}</td>
                            <td className={styles.actionsContainer}>
                                <NodeActions
                                    runId={props.runId}
                                    nodeName={status.nodeName}
                                    containerUrl={props.containerUrl}
                                    shareableSas={props.shareableSas}
                                    isUploaded={status.isUploaded}
                                />
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>

            <hr />

            {props.selectedNode && props.nodePodLogs && (
                <NodeLogs node={props.selectedNode} podLogs={props.nodePodLogs} />
            )}
        </>
    );
}