render()

in source/idea/idea-cluster-manager/webapp/src/pages/home/ssh-access.tsx [96:221]

• 118 lines of code
• 1 McCabe index (conditional complexity)

    render() {
        const getKeyName = (keyFormat: string): string => {
            const clusterName =  AppContext.get().getClusterName();
            const username = AppContext.get().auth().getUsername();
            return `${username}_${clusterName}_privatekey.${keyFormat}`;
        };

        const getUsername = (): string => {
            return AppContext.get().auth().getUsername();
        };

        const getClusterName = (): string => {
            return AppContext.get().getClusterName();
        };

        const getAwsRegion = (): string => {
            return AppContext.get().getAwsRegion();
        };

        return (
            <IdeaAppLayout
                ideaPageId={this.props.ideaPageId}
                toolsOpen={this.props.toolsOpen}
                tools={this.props.tools}
                onToolsChange={this.props.onToolsChange}
                onPageChange={this.props.onPageChange}
                sideNavHeader={this.props.sideNavHeader}
                sideNavItems={this.props.sideNavItems}
                onSideNavChange={this.props.onSideNavChange}
                onFlashbarChange={this.props.onFlashbarChange}
                flashbarItems={this.props.flashbarItems}
                breadcrumbItems={[
                    {
                        text: "RES",
                        href: "#/",
                    },
                    {
                        text: "Home",
                        href: "#/",
                    },
                    {
                        text: "SSH Access",
                        href: "",
                    },
                ]}
                header={<Header variant={"h1"}>SSH Access</Header>}
                contentType={"default"}
                content={
                    <Grid gridDefinition={[{ colspan: { xxs: 12, xs: 6 } }, { colspan: { xxs: 12, xs: 6 } }]}>
                        <Container variant="default">
                            <SpaceBetween size={"xl"}>
                                <Box textAlign="center">
                                    <FontAwesomeIcon icon={faLinux} size="5x" />
                                    &nbsp; &nbsp;
                                    <FontAwesomeIcon icon={faApple} size="5x" />
                                </Box>
                                <Header variant="h3">Access environment using Linux / MacOS</Header>
                            </SpaceBetween>
                            <p>Follow the below steps to connect to the cluster using Terminal on your Linux or MacOS laptop/workstation:</p>
                            <SpaceBetween size="m" direction="vertical">
                                <Box>
                                    <h3>Step 1: Download my Private Key</h3>
                                    <p>Download the private key file, and save it your ~/.ssh directory. </p>
                                    <p>
                                        <Button variant="primary" loading={this.state.downloadPemLoading} onClick={() => this.onDownloadPrivateKey("pem")}>
                                            <FontAwesomeIcon icon={faDownload} /> Download Private Key
                                        </Button>
                                    </p>
                                </Box>
                                <Box>
                                    <h3>Step 2: Modify key permissions</h3>
                                    Run: &nbsp;
                                    <Box variant={"code"}>chmod 600 ~/.ssh/{getKeyName("pem")}</Box>
                                </Box>
                                <Box>
                                    <h3>Step 3: Connect to the cluster</h3>
                                    Run: &nbsp;
                                    <Box variant={"code"}>
                                        ssh -i ~/.ssh/{getKeyName("pem")} {getUsername()}@{this.state.sshHostIp}
                                    </Box>
                                </Box>
                                <Box>
                                    <h3>
                                        <Badge color="green">Optional</Badge> Step 4: Create SSH config
                                    </h3>
                                    <p>
                                        If you don't want your session to be automatically closed after a couple of minutes of inactivity, edit: <code>~/.ssh/config</code> and add:
                                    </p>

                                    <Box variant={"code"}>
                                        Host {getClusterName()}-{getAwsRegion()}
                                        <br />
                                        &nbsp;&nbsp;User {getUsername()}
                                        <br />
                                        &nbsp;&nbsp;Hostname {this.state.sshHostIp}
                                        <br />
                                        &nbsp;&nbsp;ServerAliveInterval 10
                                        <br />
                                        &nbsp;&nbsp;ServerAliveCountMax 2<br />
                                        &nbsp;&nbsp;IdentityFile ~/.ssh/{getKeyName("pem")}
                                    </Box>

                                    <p>
                                        Once updated, you can simply run below to connect to your cluster: <br />
                                        <Box variant={"code"}>
                                            ssh {getClusterName()}-{getAwsRegion()}
                                        </Box>
                                    </p>
                                </Box>
                            </SpaceBetween>
                        </Container>

                        <Container variant="default">
                            <SpaceBetween size={"xl"}>
                                <Box textAlign="center">
                                    <FontAwesomeIcon icon={faWindows} size="5x" />
                                </Box>
                                <Header variant="h3">Access environment using Windows (PuTTY)</Header>
                            </SpaceBetween>

                            <p>Follow the below steps to connect to the cluster using Terminal on your Windows laptop/workstation:</p>
                            <SpaceBetween size="m" direction="vertical">
                                <Box>
                                    <h3>Step 1: Download my PuTTY private key</h3>
                                    <p>
                                        <Button loading={this.state.downloadPpkLoading} variant="primary" onClick={() => this.onDownloadPrivateKey("ppk")}>