import React from 'react' ; import Dialog , { DialogFooter , DialogHeader , DialogTitle , DialogContent , } from 'design/Dialog' ; import { Text , Box , ButtonSecondary } from 'design' ; import TextSelectCopy from 'teleport/components/TextSelectCopy' ; import { AuthType } from 'teleport/services/user' ; function ConnectDialog ( props ) { const { onClose , username , authType , kubeConnectName } = props ; const { hostname , port } = window . document . location ; const host = `${ hostname }:${ port || '443' }` ; const text = `tsh login --proxy=${ host } ${ authType === 'local' ? `--auth=${ authType } --user=${ username }` : '' }` ; return ( < Dialog dialogCss = { dialogCss } disableEscapeKeyDown = { false } onClose = { onClose } open = { true } > < DialogHeader > < DialogTitle > connect to kubernetes cluster < /DialogTitle> < /DialogHeader> < DialogContent > < Box mb = { 4 } > < Text bold as = "span" > Step 1 < /Text> { ' - Login to Teleport' } < TextSelectCopy mt = "2" text = { text } / > < /Box> < Box mb = { 4 } > < Text bold as = "span" > * Step 2 < /Text> { ' - Select the Kubernetes cluster' } < TextSelectCopy mt = "2" text = { `tsh kube login ${ kubeConnectName }` } /> < /Box> < Box mb = { 4 } > < Text bold as = "span" > Step 3 < /Text> { ' - Connect to the Kubernetes cluster' } < TextSelectCopy mt = "2" text = { `kubectl get pods` } /> < /Box> < Box > * Note : To write kubectl configuration to a separate file instead of having your global kubectl configuration modified , run the following command , before running Step 2 : < TextSelectCopy mt = "2" text = "export KUBECONFIG=${HOME?}/teleport-kubeconfig.yaml" / > < /Box> < /DialogContent> < DialogFooter > < ButtonSecondary onClick = { onClose } > Close < /ButtonSecondary> < /DialogFooter> < /Dialog>); } type Props = { onClose : ( ) => void ; username : string ; authType : AuthType ; kubeConnectName : string ; } ; const dialogCss = ( ) => `
  min-height: 400px;
  max-width: 600px;
  width: 100%;
` ; export default ConnectDialog ;