import React , { useRef , useEffect } from 'react' ; import cfg from 'teleport/config' ; import * as Icons from 'design/Icon' ; import { Indicator , Text , Box , ButtonPrimary } from 'design' ; import * as Alerts from 'design/Alert' ; import * as stores from 'teleport/Console/stores' ; import FileTransfer , { useFileTransferDialogs } from './../FileTransfer' ; import Terminal from './Terminal' ; import Document from '../Document' ; import AuthnDialog from './AuthnDialog' ; import useWebauthn from './useWebauthn' ; import useSshSession from './useSshSession' ; import ActionBar from './ActionBar' ; export default function DocumentSsh ( { doc , visible } ) { const refTerminal = useRef < Terminal > ( ) ; const scpDialogs = useFileTransferDialogs ( ) ; const { tty , status , statusText , closeDocument } = useSshSession ( doc ) ; const webauthn = useWebauthn ( tty ) ; function onCloseScpDialogs ( ) { scpDialogs . close ( ) ; refTerminal . current . terminal . term . focus ( ) ; } useEffect ( ( ) => { if ( refTerminal && refTerminal . current ) { refTerminal . current . terminal . term . focus ( ) ; } } , [ visible , webauthn . requested ] ) ; return ( < Document visible = { visible } flexDirection = "column" > < ActionBar isConnected = { doc . status === 'connected' } isDownloadOpen = { scpDialogs . isDownloadOpen } isUploadOpen = { scpDialogs . isUploadOpen } onOpenDownload = { scpDialogs . openDownload } onOpenUpload = { scpDialogs . openUpload } / > { status === 'loading' && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { status === 'error' && ( < Alerts . Danger mx = "10" mt = "5" > Connection error : { statusText } < /Alerts.Danger>)} { status === 'notfound' && ( < SidNotFoundError sid = { doc . sid } clusterId = { doc . clusterId } / > ) } { webauthn . requested && ( < AuthnDialog onContinue = { webauthn . authenticate } onCancel = { closeDocument } errorText = { webauthn . errorText } / > ) } { status === 'initialized' && < Terminal tty = { tty } ref = { refTerminal } / > } < FileTransfer clusterId = { doc . clusterId } serverId = { doc . serverId } login = { doc . login } isDownloadOpen = { scpDialogs . isDownloadOpen } isUploadOpen = { scpDialogs . isUploadOpen } onClose = { onCloseScpDialogs } / > < /Document>); } const SidNotFoundError = ( { sid = '' , clusterId = '' } ) => ( < Box my = { 10 } mx = "auto" width = "300px" > < Text typography = "h4" mb = "3" textAlign = "center" > The session is no longer active < /Text> < ButtonPrimary block secondary as = "a" href = { cfg . getPlayerRoute ( { sid , clusterId } ) } target = "_blank" > < Icons . CirclePlay fontSize = "5" mr = "2" / > Replay Session < /ButtonPrimary> < /Box>); interface PropTypes { doc : stores . DocumentSsh ; visible : boolean ; }